{"_id":"@7sikandar/my-ui-components","name":"@7sikandar/my-ui-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@7sikandar/my-ui-components","version":"0.1.0","private":false,"description":"A modern React component library built with Next.js, TypeScript, and Tailwind CSS","keywords":["react","nextjs","typescript","tailwindcss","components","ui"],"author":{"name":"sikanadar"},"license":"MIT","main":"./dist/exports.js","module":"./dist/exports.mjs","types":"./dist/exports.d.ts","exports":{".":{"types":"./dist/exports.d.ts","import":"./dist/exports.mjs","require":"./dist/exports.js"}},"scripts":{"dev":"next dev --turbopack","build":"next build","build:package":"tsup","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build:package","start":"next start","lint":"next lint"},"dependencies":{"next":"15.3.4","react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@eslint/eslintrc":"^3","@tailwindcss/postcss":"^4","@types/node":"^20","@types/react":"^19","@types/react-dom":"^19","eslint":"^9","eslint-config-next":"15.3.4","rimraf":"^6.0.1","tailwindcss":"^4","tsup":"^8.5.0","typescript":"^5"},"publishConfig":{"access":"public"},"_id":"@7sikandar/my-ui-components@0.1.0","gitHead":"ad91e7e7cfc612a3e8eb9590e868599cbdb7aaf1","_nodeVersion":"22.15.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-mhzAm41KC5s4sbhj2MQgAThIMj/ap9suhmety+XlsSh/wEW25nuL9XcyY6eqGLAw7WTm4ZxGLhgs8unCh2/NCg==","shasum":"08990360c80fc1b4bf6032659f059c9285f16cea","tarball":"https://registry.npmjs.org/@7sikandar/my-ui-components/-/my-ui-components-0.1.0.tgz","fileCount":9,"unpackedSize":34075,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGBnyw//R97FzDb4BwMDG6srooowRVSNGJb4cKyBlUPvAiEAwv/kRmiZjOishfdLJvm+aJWM2/kJ8eD6XLuD1LxVuyA="}]},"_npmUser":{"name":"7sikandar","email":"msikandargujjar@gmail.com","actor":{"name":"7sikandar","email":"msikandargujjar@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"7sikandar","email":"msikandargujjar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-ui-components_0.1.0_1751458454517_0.8149797533427414"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-02T12:14:14.448Z","0.1.0":"2025-07-02T12:14:14.722Z","modified":"2025-07-02T12:14:14.964Z"},"maintainers":[{"name":"7sikandar","email":"msikandargujjar@gmail.com"}],"description":"A modern React component library built with Next.js, TypeScript, and Tailwind CSS","keywords":["react","nextjs","typescript","tailwindcss","components","ui"],"author":{"name":"sikanadar"},"license":"MIT","readme":"# @sikanadar/my-ui-components\n\nA modern React component library built with Next.js, TypeScript, and Tailwind CSS.\n\n## Features\n\n- 🎨 **Modern UI Components** - Beautiful, accessible components built with Tailwind CSS\n- 📱 **Responsive Design** - Mobile-first responsive components\n- 🔧 **TypeScript Support** - Full TypeScript support with type definitions\n- 🪝 **Custom Hooks** - Useful React hooks for common patterns\n- 🛠️ **Utility Functions** - Helper functions for formatting and common operations\n- ⚡ **Tree Shakeable** - Import only what you need\n\n## Installation\n\n```bash\nnpm install @sikanadar/my-ui-components\n```\n\n## Usage\n\n### Components\n\n#### Button\n\n```tsx\nimport { Button } from \"@sikanadar/my-ui-components\";\n\nfunction MyApp() {\n  return (\n    <div>\n      <Button\n        variant=\"primary\"\n        size=\"md\"\n        onClick={() => console.log(\"Clicked!\")}\n      >\n        Click me\n      </Button>\n      <Button variant=\"secondary\">Secondary Button</Button>\n      <Button variant=\"outline\" disabled>\n        Disabled Button\n      </Button>\n    </div>\n  );\n}\n```\n\n#### Card\n\n```tsx\nimport { Card } from \"@sikanadar/my-ui-components\";\n\nfunction MyApp() {\n  return (\n    <Card title=\"My Card\" padding=\"lg\">\n      <p>Card content goes here</p>\n    </Card>\n  );\n}\n```\n\n### Hooks\n\n#### useLocalStorage\n\n```tsx\nimport { useLocalStorage } from \"@sikanadar/my-ui-components\";\n\nfunction MyComponent() {\n  const [count, setCount] = useLocalStorage(\"counter\", { defaultValue: 0 });\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count + 1)}>Increment</button>\n    </div>\n  );\n}\n```\n\n### Utility Functions\n\n```tsx\nimport {\n  formatCurrency,\n  formatDate,\n  debounce,\n  cn,\n} from \"@sikanadar/my-ui-components\";\n\n// Format currency\nconst price = formatCurrency(1234.56); // \"$1,234.56\"\nconst euroPrice = formatCurrency(1234.56, \"EUR\", \"de-DE\"); // \"1.234,56 €\"\n\n// Format dates\nconst date = formatDate(new Date()); // \"January 1, 2024\"\nconst customDate = formatDate(new Date(), {\n  weekday: \"long\",\n  year: \"numeric\",\n  month: \"short\",\n  day: \"numeric\",\n}); // \"Monday, Jan 1, 2024\"\n\n// Debounce function\nconst debouncedSearch = debounce((query: string) => {\n  console.log(\"Searching for:\", query);\n}, 300);\n\n// Combine class names\nconst className = cn(\n  \"base-class\",\n  condition && \"conditional-class\",\n  \"another-class\"\n);\n```\n\n## API Reference\n\n### Button Props\n\n| Prop      | Type                                  | Default   | Description                |\n| --------- | ------------------------------------- | --------- | -------------------------- |\n| children  | ReactNode                             | -         | Button content             |\n| variant   | 'primary' \\| 'secondary' \\| 'outline' | 'primary' | Button style variant       |\n| size      | 'sm' \\| 'md' \\| 'lg'                  | 'md'      | Button size                |\n| disabled  | boolean                               | false     | Whether button is disabled |\n| onClick   | () => void                            | -         | Click handler              |\n| className | string                                | ''        | Additional CSS classes     |\n\n### Card Props\n\n| Prop      | Type                 | Default | Description            |\n| --------- | -------------------- | ------- | ---------------------- |\n| children  | ReactNode            | -       | Card content           |\n| title     | string               | -       | Optional card title    |\n| padding   | 'sm' \\| 'md' \\| 'lg' | 'md'    | Card padding size      |\n| className | string               | ''      | Additional CSS classes |\n\n### useLocalStorage Options\n\n| Option       | Type                 | Default        | Description                          |\n| ------------ | -------------------- | -------------- | ------------------------------------ |\n| defaultValue | T                    | -              | Default value when key doesn't exist |\n| serialize    | (value: T) => string | JSON.stringify | Custom serialization function        |\n| deserialize  | (value: string) => T | JSON.parse     | Custom deserialization function      |\n\n## Requirements\n\n- React 18+\n- Tailwind CSS (for styling)\n\n## Development\n\nThis package is built with:\n\n- [Next.js](https://nextjs.org/) - React framework\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\n- [Tailwind CSS](https://tailwindcss.com/) - Styling\n- [TSUP](https://tsup.egoist.dev/) - Bundling\n\n## License\n\nMIT License\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n","readmeFilename":"README.package.md","_rev":"1-abdc8a4c26401c0fb7e777e248e98994"}