{"_id":"@bekkbekk/ui","_rev":"3-c8978359c7690bb381ae75271849980a","name":"@bekkbekk/ui","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@bekkbekk/ui","version":"0.1.0","keywords":["react","components","ui","tailwindcss","component-library"],"author":"","license":"MIT","_id":"@bekkbekk/ui@0.1.0","maintainers":[{"name":"bekkwin","email":"jerwin00561@gmail.com"}],"homepage":"https://github.com/bekkbekk/bekkbekk-ui#readme","bugs":{"url":"https://github.com/bekkbekk/bekkbekk-ui/issues"},"dist":{"shasum":"0fe06582a1d690e32e937161daf95c665132401a","tarball":"https://registry.npmjs.org/@bekkbekk/ui/-/ui-0.1.0.tgz","fileCount":7,"integrity":"sha512-kuPStwIVUAWVrg/A9cnScf+iYjIrervUYeNYj4QfC9vvlEvPV4/t0Uf0KhSIKIlR1YmNoD9YRaxjh3+H/jAgag==","signatures":[{"sig":"MEQCIEg0zecYN1SP4Xwr0vtRDhFpz3NIkvtV2ix68+lVCW6GAiAxeLy0tHGMGNJkTe+9JPSb0mJfdbREw3cEzom+fOhzCQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24439},"main":"./dist/index.cjs","type":"module","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"422740e1dda156f7181fae8cac0c3f0cdba48c56","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"bekkwin","email":"jerwin00561@gmail.com"},"repository":{"url":"git+https://github.com/bekkbekk/bekkbekk-ui.git","type":"git"},"_npmVersion":"11.18.0","description":"A collection of reusable React components (forms, modals, and more) styled with Tailwind CSS.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^7.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","react-hook-form":">=7.0.0"},"peerDependenciesMeta":{"react-hook-form":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1784644881987_0.2557170185766551","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@bekkbekk/ui","version":"0.1.1","keywords":["react","components","ui","tailwindcss","component-library"],"author":"","license":"MIT","_id":"@bekkbekk/ui@0.1.1","maintainers":[{"name":"bekkwin","email":"jerwin00561@gmail.com"}],"homepage":"https://github.com/bekkbekk/bekkbekk-ui#readme","bugs":{"url":"https://github.com/bekkbekk/bekkbekk-ui/issues"},"dist":{"shasum":"d5c7015a1ecdcb45ef6e04223afd5e69d2bfc2ef","tarball":"https://registry.npmjs.org/@bekkbekk/ui/-/ui-0.1.1.tgz","fileCount":7,"integrity":"sha512-TM5QjmrPH8Wt3t9S+wy8bqO51hE9YJA50JLfDZy71Y2RO5B11s4XESCpVnfIaOvETXE/BL0xm/6eq4+CbIBSMg==","signatures":[{"sig":"MEQCIFt88joZvIo+g+1x4oGE6avHQf/XDMwTk/Db2ddBr/LIAiATrNaYzoMu5VxVZEqBh654+VH5nROBrz3OAELlPXs2VQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24379},"main":"./dist/index.cjs","type":"module","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"422740e1dda156f7181fae8cac0c3f0cdba48c56","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"bekkwin","email":"jerwin00561@gmail.com"},"repository":{"url":"git+https://github.com/bekkbekk/bekkbekk-ui.git","type":"git"},"_npmVersion":"11.18.0","description":"A collection of reusable React components (forms, modals, and more) styled with Tailwind CSS.","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.2.4","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^7.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","react-hook-form":">=7.0.0"},"peerDependenciesMeta":{"react-hook-form":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.1_1784645079455_0.6990769435776147","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bekkbekk/ui","version":"0.1.2","description":"A collection of reusable React components (forms, modals, and more) styled with Tailwind CSS.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","sideEffects":false,"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","react-hook-form":">=7.0.0"},"peerDependenciesMeta":{"react-hook-form":{"optional":true}},"dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.5.2"},"devDependencies":{"react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.2.4","typescript":"^7.0.2"},"keywords":["react","components","ui","tailwindcss","component-library"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/bekkbekk/bekkbekk-ui.git"},"publishConfig":{"access":"public"},"gitHead":"86311a2dca93b12649406bf334b07d12c4088eee","_id":"@bekkbekk/ui@0.1.2","bugs":{"url":"https://github.com/bekkbekk/bekkbekk-ui/issues"},"homepage":"https://github.com/bekkbekk/bekkbekk-ui#readme","_nodeVersion":"22.18.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-ZGjIxMa8kg698YPBjMurMXUg86DgW4Xj2Na3Z9ken7UyZ0k+2tCCz7SHdV+qersG6KCe9HYXN5rmRleslX2a4Q==","shasum":"7deface66053d636ca17f29b5b3079d55c58e647","tarball":"https://registry.npmjs.org/@bekkbekk/ui/-/ui-0.1.2.tgz","fileCount":7,"unpackedSize":24379,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICTpOY7fHDNFx/YQYW3IvWk/QEyRH5CWOSzLZkN3qW0cAiAmEve9kIIJzZcOP2ee1VL/Fb/BBO5iVCcwUV1DIvCEgw=="}]},"_npmUser":{"name":"bekkwin","email":"jerwin00561@gmail.com"},"directories":{},"maintainers":[{"name":"bekkwin","email":"jerwin00561@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.2_1784645136558_0.3268431300622312"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-21T14:41:21.789Z","modified":"2026-07-21T14:45:36.893Z","0.1.0":"2026-07-21T14:41:22.140Z","0.1.1":"2026-07-21T14:44:39.598Z","0.1.2":"2026-07-21T14:45:36.712Z"},"bugs":{"url":"https://github.com/bekkbekk/bekkbekk-ui/issues"},"license":"MIT","homepage":"https://github.com/bekkbekk/bekkbekk-ui#readme","keywords":["react","components","ui","tailwindcss","component-library"],"repository":{"type":"git","url":"git+https://github.com/bekkbekk/bekkbekk-ui.git"},"description":"A collection of reusable React components (forms, modals, and more) styled with Tailwind CSS.","maintainers":[{"name":"bekkwin","email":"jerwin00561@gmail.com"}],"readme":"# @bekkbekk/ui\n\nA collection of reusable React components — forms, modals, and more — styled with Tailwind CSS.\n\n> Built for **React apps** (React 18+). It is not framework-agnostic and does not support Vue, Svelte, etc.\n\n## Installation\n\n```bash\nnpm install @bekkbekk/ui\n```\n\nThis package assumes your project already has **React**, **React DOM**, and **Tailwind CSS** installed. If you use any react-hook-form-aware components, you'll also need `react-hook-form`.\n\n### 1. Tailwind CSS\n\nIf your project doesn't already have Tailwind set up, follow the official install guide first:\n👉 https://tailwindcss.com/docs/installation\n\n### 2. Tell Tailwind to scan this package\n\nBecause Tailwind generates CSS by scanning your source files for class names, it also needs to scan this package's compiled files, or the components will render unstyled.\n\n**Tailwind v3** — add this package to your `content` array in `tailwind.config.js`:\n\n```js\n// tailwind.config.js\nexport default {\n  content: [\n    './src/**/*.{js,jsx,ts,tsx}',\n    './node_modules/@bekkbekk/ui/dist/**/*.{js,cjs}',\n  ],\n  // ...\n};\n```\n\n**Tailwind v4** — add a `@source` directive in your CSS entry file:\n\n```css\n@import \"tailwindcss\";\n@source \"./node_modules/@bekkbekk/ui/dist\";\n```\n\n### 3. react-hook-form (optional)\n\nOnly needed if you use components designed to integrate with it (e.g. `Input`, `Select` forward refs so they work with `register()`).\n\n```bash\nnpm install react-hook-form\n```\n\n## Usage\n\n```jsx\nimport { Input, Select, Modal } from '@bekkbekk/ui';\nimport { useForm } from 'react-hook-form';\nimport { useState } from 'react';\n\nfunction ExampleForm() {\n  const { register, handleSubmit } = useForm();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <form onSubmit={handleSubmit((data) => console.log(data))}>\n      <Input placeholder=\"Email\" {...register('email')} />\n      <Select\n        placeholder=\"Choose a role\"\n        options={['Admin', 'Editor', 'Viewer']}\n        {...register('role')}\n      />\n      <button type=\"button\" onClick={() => setOpen(true)}>\n        Open modal\n      </button>\n\n      <Modal open={open} onClose={() => setOpen(false)} title=\"Confirm\">\n        <p>Are you sure?</p>\n      </Modal>\n    </form>\n  );\n}\n```\n\n## Components\n\n| Category | Component | Description |\n|---|---|---|\n| `form` | `Input`   | Styled text input, ref-forwarded for react-hook-form |\n| `form` | `Select`  | Styled select, ref-forwarded for react-hook-form |\n| `modals` | `Modal` | Portal-based modal with backdrop click and Escape-to-close |\n\nAlso exported: `cn` — a small utility (clsx + tailwind-merge) for conditionally merging class names inside your own components.\n\n## Adding a new component\n\n1. Create a subfolder under `src/` if it doesn't already exist (e.g. `src/cards/`).\n2. Add your component file(s), plus an `index.js` barrel export in that folder.\n3. Re-export it from `src/index.js`.\n4. Run `npm run dev` to build in watch mode while you work, or `npm run build` for a one-off build.\n\n## Publishing updates (for maintainers)\n\n```bash\n# 1. Make your changes in src/\n# 2. Bump the version (patch/minor/major)\nnpm version patch\n\n# 3. Build and publish\nnpm publish --access public\n```\n\n`prepublishOnly` automatically runs the build before publishing, so `dist/` is always fresh.\n\nThe first time you publish, make sure you're logged in:\n\n```bash\nnpm login\n```\n\nSince this package is scoped (`@bekkbekk/ui`), publishes must include `--access public` (scoped packages default to private otherwise), as shown above.\n\nA GitHub Actions workflow is included at `.github/workflows/publish.yml` that publishes automatically whenever you push a new version tag, if you'd rather not publish manually — see that file for the one-time setup (adding an `NPM_TOKEN` secret to your repo).\n\n## License\n\nMIT","readmeFilename":"README.md"}