{"_id":"@bluehat8/my-own","_rev":"4-f68f1b4c280566921cb2340eb1b190b5","name":"@bluehat8/my-own","dist-tags":{"latest":"0.5.0"},"versions":{"0.1.0":{"name":"@bluehat8/my-own","version":"0.1.0","keywords":["react","components","ui","tailwind","customizable","nextjs"],"author":"","license":"MIT","_id":"@bluehat8/my-own@0.1.0","maintainers":[{"name":"bluehat8","email":"g.agustink19@gmail.com"}],"homepage":"","dist":{"shasum":"c9157a872f6bfb031c865822bcd068a4d4cd485b","tarball":"https://registry.npmjs.org/@bluehat8/my-own/-/my-own-0.1.0.tgz","fileCount":74,"integrity":"sha512-o2HVcFEQwwgnJ4affehU/ehm+XPB+v0Gua3F2sIgf7JCpyofBTY5yarVl6mJxnU127MEgMv9svbskc0cJEfrww==","signatures":[{"sig":"MEQCIEIsqxBBCZrKPdibrZiApO26+K2J1aDLdwlzLEyo9NwXAiBtYCVptrkPSJ7qdJtx/I5mSsp9NY8rw4FfcNWFtEhBGg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":612007},"main":"./dist/cjs/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./styles":"./dist/styles/base.css","./tailwind":"./dist/tailwind.preset.js"},"scripts":{"dev":"vite","lint":"eslint src --ext .ts,.tsx","test":"vitest","build":"npm run build:types && npm run build:esm && npm run build:cjs && npm run build:styles","build:cjs":"vite build --mode cjs","build:esm":"vite build --mode esm","storybook":"storybook dev -p 6006","build:types":"tsc --emitDeclarationOnly --outDir dist/types","build:styles":"copyfiles -u 1 src/styles/*.css dist/styles","test:coverage":"vitest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bluehat8","email":"g.agustink19@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"Customizable UI components library for React and Next.js","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.19.1","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.1","eslint":"^9.0.0","vitest":"^2.0.0","copyfiles":"^2.4.1","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.8.0","@types/node":"^22.0.0","@types/react":"^18.3.0","lucide-react":"^0.462.0","react-hook-form":"^7.67.0","vite-plugin-dts":"^4.0.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.0","@storybook/addon-docs":"^8.4.0","@storybook/react-vite":"^8.4.0","@vitejs/plugin-react-swc":"^3.11.0","@storybook/addon-essentials":"^8.4.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"react-hook-form":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/my-own_0.1.0_1765616149574_0.5620361846468762","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@bluehat8/my-own","version":"0.2.0","keywords":["react","components","ui","tailwind","customizable","nextjs"],"author":"","license":"MIT","_id":"@bluehat8/my-own@0.2.0","maintainers":[{"name":"bluehat8","email":"g.agustink19@gmail.com"}],"homepage":"","dist":{"shasum":"efd4713cbc8bf1ce9574a81fe93f5642b9b2aa5d","tarball":"https://registry.npmjs.org/@bluehat8/my-own/-/my-own-0.2.0.tgz","fileCount":81,"integrity":"sha512-tru73QwvN4JJpvq+OPK3Jcz5V6Tyj57/RgmrYlZAfgt/FkGvwmrcVwB1mTSOhlqy5eigl2w/ZgHod01XasjC8w==","signatures":[{"sig":"MEUCIQC2b1hXDxJMxTyPZWyHAWrf4LLndSYUN4si2pAW2+LT8AIgUaGqAnUQUMCBqJ++d8yAr5EwBoe7gzDpFA+piYwSjfQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":622332},"main":"./dist/cjs/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./styles":"./dist/styles/base.css","./tailwind":"./dist/tailwind.preset.js"},"scripts":{"dev":"vite","lint":"eslint src --ext .ts,.tsx","test":"vitest","build":"npm run build:types && npm run build:esm && npm run build:cjs && npm run build:styles","build:cjs":"vite build --mode cjs","build:esm":"vite build --mode esm","storybook":"storybook dev -p 6006","build:types":"tsc --emitDeclarationOnly --outDir dist/types","build:styles":"copyfiles -u 2 src/styles/*.css dist/styles","test:coverage":"vitest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bluehat8","email":"g.agustink19@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"Customizable UI components library for React and Next.js","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.19.1","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.1","eslint":"^9.0.0","vitest":"^2.0.0","copyfiles":"^2.4.1","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.8.0","@types/node":"^22.0.0","@types/react":"^18.3.0","lucide-react":"^0.462.0","react-hook-form":"^7.67.0","vite-plugin-dts":"^4.0.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.0","@storybook/addon-docs":"^8.4.0","@storybook/react-vite":"^8.4.0","@vitejs/plugin-react-swc":"^3.11.0","@storybook/addon-essentials":"^8.4.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"react-hook-form":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/my-own_0.2.0_1765618017570_0.9103011819376781","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@bluehat8/my-own","version":"0.4.0","keywords":["react","components","ui","tailwind","customizable","nextjs"],"author":"","license":"MIT","_id":"@bluehat8/my-own@0.4.0","maintainers":[{"name":"bluehat8","email":"g.agustink19@gmail.com"}],"homepage":"","dist":{"shasum":"59f42df05b2df7cbf176a67d948b1fcded549091","tarball":"https://registry.npmjs.org/@bluehat8/my-own/-/my-own-0.4.0.tgz","fileCount":81,"integrity":"sha512-clWNKI7S9Esmv9S6LUa2sO4/XppFrQmaasiFIXiNLiJF3PGLMPLRBe3vwBeYtdUb4/vk8QHEMYUpuBoksMppTw==","signatures":[{"sig":"MEYCIQC4xXWa+SthQyGEFdwC0xSzG+fTQ9v1v4uI1tBqGOsKJAIhAMivMgYAvdlgANcYTbGx7pekZxNKkXtzcyuexUoVPjAx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":626140},"main":"./dist/cjs/index.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./styles":"./dist/styles/base.css","./tailwind":"./dist/tailwind.preset.js"},"gitHead":"6f236bbddc1674231b1a59b9008806e672e56c17","scripts":{"dev":"vite","lint":"eslint src --ext .ts,.tsx","test":"vitest","build":"npm run build:types && npm run build:esm && npm run build:cjs && npm run build:styles","build:cjs":"vite build --mode cjs","build:esm":"vite build --mode esm","storybook":"storybook dev -p 6006","build:types":"tsc --emitDeclarationOnly --outDir dist/types","build:styles":"copyfiles -u 2 src/styles/*.css dist/styles","test:coverage":"vitest --coverage","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bluehat8","email":"g.agustink19@gmail.com"},"repository":{"url":"","type":"git"},"_npmVersion":"10.8.2","description":"Customizable UI components library for React and Next.js","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"20.19.1","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.6.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.1","eslint":"^9.0.0","vitest":"^2.0.0","copyfiles":"^2.4.1","react-dom":"^18.3.1","storybook":"^8.4.0","typescript":"^5.8.0","@types/node":"^22.0.0","@types/react":"^18.3.0","lucide-react":"^0.462.0","react-hook-form":"^7.67.0","vite-plugin-dts":"^4.0.0","@storybook/react":"^8.4.0","@types/react-dom":"^18.3.0","@storybook/addon-docs":"^8.4.0","@storybook/react-vite":"^8.4.0","@vitejs/plugin-react-swc":"^3.11.0","@storybook/addon-essentials":"^8.4.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"lucide-react":{"optional":true},"react-hook-form":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/my-own_0.4.0_1765662278827_0.43315366546842626","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@bluehat8/my-own","version":"0.5.0","description":"Customizable UI components library for React and Next.js","type":"module","main":"./dist/cjs/index.js","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./styles":"./dist/styles/base.css","./tailwind":"./dist/tailwind.preset.js"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"npm run build:types && npm run build:esm && npm run build:cjs && npm run build:styles","build:types":"tsc --emitDeclarationOnly --outDir dist/types","build:esm":"vite build --mode esm","build:cjs":"vite build --mode cjs","build:styles":"copyfiles -u 2 src/styles/*.css dist/styles","lint":"eslint src --ext .ts,.tsx","test":"vitest","test:coverage":"vitest --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build","chromatic":"npx chromatic"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react-hook-form":{"optional":true},"lucide-react":{"optional":true}},"dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.6.0"},"devDependencies":{"@storybook/addon-docs":"^10.1.8","@storybook/addon-essentials":"^8.4.0","@storybook/react-vite":"^10.1.8","@tailwindcss/vite":"^4.1.18","@types/node":"^22.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react-swc":"^3.11.0","@vitest/browser":"^2.0.0","@vitest/coverage-v8":"^2.0.0","copyfiles":"^2.4.1","eslint":"^9.0.0","lucide-react":"^0.462.0","playwright":"^1.57.0","react":"^18.3.1","react-dom":"^18.3.1","react-hook-form":"^7.67.0","storybook":"^10.1.8","tailwindcss":"^4.1.18","typescript":"^5.8.0","vite":"^5.4.0","vite-plugin-dts":"^4.0.0","vitest":"^2.0.0"},"keywords":["react","components","ui","tailwind","customizable","nextjs"],"author":"","license":"MIT","repository":{"type":"git","url":""},"homepage":"","eslintConfig":{"extends":["plugin:storybook/recommended"]},"_id":"@bluehat8/my-own@0.5.0","gitHead":"8b985eff05683fcb1ad71cdfc664b2195e1ec4fe","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-VH3M19/Sp1Z2TZxwQe4JawrZvFNLCRoH7Xe8XSHpUf7tBN7tvsrPwZEvnMUI0Wc7TurzSHtr1BxV/9M6/Dq9Rw==","shasum":"50793efd981939255ea19d684d74feb5e779a020","tarball":"https://registry.npmjs.org/@bluehat8/my-own/-/my-own-0.5.0.tgz","fileCount":91,"unpackedSize":669840,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCtFhHtSIqRXFwCboqpAiJM3/aw2iucbzahleDn8nmWwQIhAM2uKdWXiOAhaloPe/pfhI1PrHm+v4bdHwTOAcUli7B1"}]},"_npmUser":{"name":"bluehat8","email":"g.agustink19@gmail.com"},"directories":{},"maintainers":[{"name":"bluehat8","email":"g.agustink19@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-own_0.5.0_1765676504149_0.11874179825166187"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-13T08:55:49.346Z","modified":"2025-12-14T01:41:44.501Z","0.1.0":"2025-12-13T08:55:49.760Z","0.2.0":"2025-12-13T09:26:57.752Z","0.4.0":"2025-12-13T21:44:39.007Z","0.5.0":"2025-12-14T01:41:44.302Z"},"license":"MIT","keywords":["react","components","ui","tailwind","customizable","nextjs"],"repository":{"type":"git","url":""},"description":"Customizable UI components library for React and Next.js","maintainers":[{"name":"bluehat8","email":"g.agustink19@gmail.com"}],"readme":"# @bluehat8/my-own\r\n\r\nCustomizable UI components for React/Next.js with automatic dark/light mode.\r\n\r\n[![Storybook](https://img.shields.io/badge/Storybook-View%20Docs-ff4785)](https://693e1253918a7cf5e2670935-oehyastvdw.chromatic.com/)\r\n[![npm](https://img.shields.io/npm/v/@bluehat8/my-own)](https://www.npmjs.com/package/@bluehat8/my-own)\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @bluehat8/my-own\r\n```\r\n\r\n## Setup (3 steps)\r\n\r\n### 1. Import styles in your App.tsx\r\n\r\n```tsx\r\nimport \"@bluehat8/my-own/styles\";\r\n```\r\n\r\n### 2. Add source/content for Tailwind\r\n\r\n**Tailwind v4+** (use `@source` in CSS):\r\n```css\r\n/* global.css */\r\n@source \"../node_modules/@bluehat8/my-own/dist/**/*.js\";\r\n```\r\n\r\n**Tailwind v3.x** (use `content` in config):\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n  content: [\r\n    \"./src/**/*.{js,ts,jsx,tsx}\",\r\n    \"./node_modules/@bluehat8/my-own/dist/**/*.js\"\r\n  ],\r\n}\r\n```\r\n\r\n### 3. Set theme (optional)\r\n\r\n```html\r\n<!-- Light mode -->\r\n<body data-theme=\"light\">\r\n\r\n<!-- Dark mode (default) -->\r\n<body>\r\n```\r\n\r\n**Auto-detect:** The package automatically uses light/dark based on system preference.\r\n\r\n---\r\n\r\n## Components\r\n\r\n### BirthDateSelect\r\n\r\n```tsx\r\nimport { BirthDateSelect } from '@bluehat8/my-own';\r\n\r\n<BirthDateSelect\r\n  value={date}\r\n  onChange={setDate}\r\n  minAge={18}\r\n  maxAge={100}\r\n/>\r\n```\r\n\r\n### SearchableSelect\r\n\r\n```tsx\r\nimport { SearchableSelect } from '@bluehat8/my-own';\r\n\r\n<SearchableSelect\r\n  options={[{ value: 'us', label: 'United States' }]}\r\n  value={selected}\r\n  onChange={setSelected}\r\n  placeholder=\"Select...\"\r\n/>\r\n```\r\n\r\n### PhoneInput\r\n\r\n```tsx\r\nimport { PhoneInput } from '@bluehat8/my-own';\r\n\r\n<PhoneInput\r\n  value={phone}\r\n  onChange={(e) => setPhone(e.target.value)}\r\n  onRegionChange={setCode}\r\n  defaultCountryCode=\"+1\"\r\n/>\r\n```\r\n\r\n### CedulaInput\r\n\r\n```tsx\r\nimport { CedulaInput } from '@bluehat8/my-own';\r\n\r\n<CedulaInput\r\n  value={cedula}\r\n  onChange={setCedula}\r\n  format=\"NI\"  // \"NI\", \"CR\", or \"custom\"\r\n/>\r\n```\r\n\r\n### FormField\r\n\r\n```tsx\r\nimport { FormField } from '@bluehat8/my-own';\r\nimport { Mail, Lock, User } from 'lucide-react'; // or any icon library\r\n\r\n// With icon (ReactNode)\r\n<FormField\r\n  label=\"Email\"\r\n  placeholder=\"Enter email\"\r\n  type=\"email\"\r\n  icon={<Mail size={18} />}\r\n  value={email}\r\n  onChange={setEmail}\r\n  error={errors.email}\r\n/>\r\n\r\n// With icon (image URL)\r\n<FormField\r\n  label=\"Username\"\r\n  placeholder=\"Enter username\"\r\n  icon=\"/icons/user.svg\"\r\n  value={username}\r\n  onChange={setUsername}\r\n/>\r\n\r\n// Password with toggle and icon\r\n<FormField\r\n  label=\"Password\"\r\n  placeholder=\"Enter password\"\r\n  icon={<Lock size={18} />}\r\n  showPasswordToggle\r\n  value={password}\r\n  onChange={setPassword}\r\n/>\r\n\r\n// Multiline with icon\r\n<FormField\r\n  label=\"Description\"\r\n  placeholder=\"Enter description\"\r\n  icon={<User size={18} />}\r\n  multiline\r\n  rows={4}\r\n  value={description}\r\n  onChange={setDescription}\r\n/>\r\n```\r\n\r\n---\r\n\r\n## Customization\r\n\r\n### classNames prop\r\n\r\nAll components accept a `classNames` prop for granular styling:\r\n\r\n```tsx\r\n<PhoneInput\r\n  classNames={{\r\n    container: '',\r\n    inputContainer: 'bg-white',\r\n    dialCode: 'text-gray-800',\r\n    dropdown: 'bg-white',\r\n    searchContainer: 'bg-gray-50',\r\n    searchInput: 'bg-white text-gray-900',\r\n    countryList: 'bg-white',\r\n    countryOption: 'hover:bg-gray-100',\r\n    countryName: 'text-gray-900',\r\n    countryDialCode: 'text-gray-500',\r\n    phoneInput: 'text-gray-900',\r\n  }}\r\n/>\r\n```\r\n\r\n### CSS Variables\r\n\r\nOverride in your CSS:\r\n\r\n```css\r\n:root {\r\n  --my-primary: #your-brand-color;\r\n  --my-bg-base: #ffffff;\r\n  --my-border: #e5e7eb;\r\n  --my-text: #111827;\r\n  --my-radius: 0.5rem;\r\n}\r\n```\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}