{"_id":"@carlos_zuniga_1992/ui","_rev":"2-b35407c6b956eddbf88ef7fc3b5a7ed0","name":"@carlos_zuniga_1992/ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@carlos_zuniga_1992/ui","version":"0.1.0","keywords":["react","components","dark-theme","minimal","ui"],"license":"MIT","_id":"@carlos_zuniga_1992/ui@0.1.0","maintainers":[{"name":"carlos_zuniga_1992","email":"ca513zn@gmail.com"}],"dist":{"shasum":"cf3fd21d8db85f8e1e1359c6504c76f7f46d0ce5","tarball":"https://registry.npmjs.org/@carlos_zuniga_1992/ui/-/ui-0.1.0.tgz","fileCount":8,"integrity":"sha512-uE4KtHqOYIwd/feIGgwFXgFGfcbtj3MYRxSf3gqmGOlBqsszr1sTttu6/q8aifebrdKiGytruESVwDd10lVcZQ==","signatures":[{"sig":"MEUCIQDRX8KKbw7bXqdxERIpEaLjsJ+glOg5uoSJM+S+7kBG2QIgOSeWqm68EWJ8L82A9pNL5wWmeoNuOpJNZ0nYLde6mo4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85574},"main":"dist/cjs/index.js","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"dev":"vite","build":"rollup -c","build:watch":"rollup -c --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"carlos_zuniga_1992","email":"ca513zn@gmail.com"},"_npmVersion":"11.5.1","description":"Minimal dark-themed React component library. Made for real swingaz.","directories":{},"sideEffects":["**/*.scss","**/*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.70.0","vite":"^8.0.3","react":"^18.2.0","tslib":"^2.8.1","rollup":"^4.0.0","react-dom":"^18.2.0","typescript":"^5.3.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","rollup-plugin-dts":"^6.0.0","@vitejs/plugin-react":"^6.0.1","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-typescript":"^12.0.0","@rollup/plugin-node-resolve":"^16.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1775274275579_0.7979098698451317","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@carlos_zuniga_1992/ui","version":"0.1.1","description":"Minimal dark-themed React component library. Made for real swingaz.","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","sideEffects":["**/*.scss","**/*.css"],"scripts":{"dev":"vite","build":"rollup -c","build:watch":"rollup -c --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-typescript":"^12.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^6.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.0.0","rollup-plugin-dts":"^6.0.0","rollup-plugin-postcss":"^4.0.2","sass":"^1.70.0","tslib":"^2.8.1","typescript":"^5.3.0","vite":"^8.0.3"},"keywords":["react","components","dark-theme","minimal","ui"],"license":"MIT","_id":"@carlos_zuniga_1992/ui@0.1.1","_nodeVersion":"22.17.1","_npmVersion":"11.5.1","dist":{"integrity":"sha512-npDKShj2RbMV78s8Nv8Euu4Oyz4JlQXAWjRGMVJUbjlnO9qe21patBbhNNDaySG40gJCKHI812+0ACdmtAIiAg==","shasum":"4833736e906c46a4f6eedbdcba014ce38cd92a62","tarball":"https://registry.npmjs.org/@carlos_zuniga_1992/ui/-/ui-0.1.1.tgz","fileCount":9,"unpackedSize":90863,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDFU8ZoyM48vVnoiCmt/Zszp8rhD6PcAMnvKyLZbJmjwQIhAJ5O0PU5wRIiFC6VTQwBcynGLIKtyMGRbHeiFZLpmbLx"}]},"_npmUser":{"name":"carlos_zuniga_1992","email":"ca513zn@gmail.com"},"directories":{},"maintainers":[{"name":"carlos_zuniga_1992","email":"ca513zn@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.1_1775274521443_0.2986684608959349"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-04T03:44:35.480Z","modified":"2026-04-04T03:48:41.701Z","0.1.0":"2026-04-04T03:44:35.739Z","0.1.1":"2026-04-04T03:48:41.583Z"},"license":"MIT","keywords":["react","components","dark-theme","minimal","ui"],"description":"Minimal dark-themed React component library. Made for real swingaz.","maintainers":[{"name":"carlos_zuniga_1992","email":"ca513zn@gmail.com"}],"readme":"# @carlos_zuniga_1992/ui\n\nMinimal dark-themed React component library built with SASS.\n\n## Install\n\n```bash\nnpm install @carlos_zuniga_1992/ui\n```\n\n## Setup\n\nImport the stylesheet once in your app entry point:\n\n```tsx\nimport '@carlos_zuniga_1992/ui/dist/esm/styles.css';\n```\n\nWrap your app (or a section) with the `cl-root` class to apply the dark theme:\n\n```tsx\n<div className=\"cl-root\">\n  <App />\n</div>\n```\n\n## Components\n\n### Button\n\n```tsx\nimport { Button } from '@carlos_zuniga_1992/ui';\n\n<Button>Default</Button>\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\">Secondary</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"ghost\">Ghost</Button>\n<Button variant=\"danger\">Danger</Button>\n<Button variant=\"outline-danger\">Outline Danger</Button>\n\n// Sizes\n<Button size=\"sm\">Small</Button>\n<Button size=\"md\">Medium</Button>\n<Button size=\"lg\">Large</Button>\n\n// With icons\n<Button icon={<MyIcon />}>With Icon</Button>\n<Button icon={<MyIcon />} iconPosition=\"end\">Icon End</Button>\n<Button icon={<MyIcon />} iconOnly aria-label=\"Settings\" />\n\n// Full width\n<Button fullWidth>Full Width</Button>\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `variant` | `'primary' \\| 'secondary' \\| 'ghost' \\| 'danger' \\| 'outline' \\| 'outline-danger'` | `'primary'` |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'md'` |\n| `fullWidth` | `boolean` | `false` |\n| `icon` | `ReactNode` | — |\n| `iconPosition` | `'start' \\| 'end'` | `'start'` |\n| `iconOnly` | `boolean` | `false` |\n\n### Input\n\n```tsx\nimport { Input } from '@carlos_zuniga_1992/ui';\n\n<Input label=\"Email\" placeholder=\"you@example.com\" />\n<Input label=\"Password\" type=\"password\" togglePassword />\n<Input label=\"Valid\" success endIcon={<CheckIcon />} hint=\"Looks good\" />\n<Input label=\"Error\" error hint=\"Required field\" />\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `label` | `string` | — |\n| `hint` | `string` | — |\n| `error` | `boolean` | `false` |\n| `success` | `boolean` | `false` |\n| `endIcon` | `ReactNode` | — |\n| `togglePassword` | `boolean` | `false` |\n\n### Select\n\n```tsx\nimport { Select } from '@carlos_zuniga_1992/ui';\n\nconst options = [\n  { value: 'react', label: 'React' },\n  { value: 'vue', label: 'Vue' },\n  { value: 'svelte', label: 'Svelte' },\n];\n\n<Select label=\"Framework\" options={options} value={value} onChange={setValue} />\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `options` | `{ value: string; label: string; disabled?: boolean }[]` | — |\n| `value` | `string` | — |\n| `onChange` | `(value: string) => void` | — |\n| `label` | `string` | — |\n| `placeholder` | `string` | `'Select...'` |\n\n### MultiSelect\n\n```tsx\nimport { MultiSelect } from '@carlos_zuniga_1992/ui';\n\n<MultiSelect\n  label=\"Roles\"\n  options={options}\n  value={selected}\n  onChange={setSelected}\n  placeholder=\"Select roles\"\n/>\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `options` | `{ value: string; label: string; disabled?: boolean }[]` | — |\n| `value` | `string[]` | `[]` |\n| `onChange` | `(value: string[]) => void` | — |\n| `label` | `string` | — |\n| `placeholder` | `string` | `'Select...'` |\n\n### RadioGroup\n\n```tsx\nimport { RadioGroup } from '@carlos_zuniga_1992/ui';\n\nconst plans = [\n  { value: 'free', label: 'Free' },\n  { value: 'pro', label: 'Pro' },\n  { value: 'enterprise', label: 'Enterprise' },\n];\n\n<RadioGroup name=\"plan\" label=\"Plan\" options={plans} value={plan} onChange={setPlan} />\n<RadioGroup name=\"plan\" options={plans} value={plan} onChange={setPlan} horizontal />\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `options` | `{ value: string; label: string; disabled?: boolean }[]` | — |\n| `value` | `string` | — |\n| `onChange` | `(value: string) => void` | — |\n| `name` | `string` | — |\n| `label` | `string` | — |\n| `horizontal` | `boolean` | `false` |\n\n### Card\n\n```tsx\nimport { Card, CardHeader, CardBody, CardFooter } from '@carlos_zuniga_1992/ui';\n\n<Card>\n  <CardHeader>Title</CardHeader>\n  <CardBody>Content goes here.</CardBody>\n  <CardFooter><Button size=\"sm\">Action</Button></CardFooter>\n</Card>\n\n<Card hoverable>Hover me</Card>\n```\n\n### Badge\n\n```tsx\nimport { Badge } from '@carlos_zuniga_1992/ui';\n\n<Badge>Default</Badge>\n<Badge variant=\"accent\">Accent</Badge>\n<Badge variant=\"success\">Success</Badge>\n<Badge variant=\"warning\">Warning</Badge>\n<Badge variant=\"danger\">Danger</Badge>\n```\n\n### Toggle\n\n```tsx\nimport { Toggle } from '@carlos_zuniga_1992/ui';\n\n<Toggle label=\"Notifications\" checked={on} onChange={setOn} />\n```\n\n### Text\n\n```tsx\nimport { Text } from '@carlos_zuniga_1992/ui';\n\n<Text as=\"h1\" size=\"3xl\" bold>Heading</Text>\n<Text color=\"secondary\" size=\"sm\">Subtitle</Text>\n<Text mono>Code style</Text>\n<Text color=\"accent\">Highlighted</Text>\n```\n\n| Prop | Type | Default |\n|------|------|---------|\n| `as` | `'p' \\| 'span' \\| 'h1' \\| 'h2' \\| 'h3' \\| 'h4' \\| 'h5' \\| 'h6' \\| 'label' \\| 'code'` | `'p'` |\n| `size` | `'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| '2xl' \\| '3xl'` | `'md'` |\n| `color` | `'primary' \\| 'secondary' \\| 'muted' \\| 'accent' \\| 'danger' \\| 'success'` | — |\n| `mono` | `boolean` | `false` |\n| `bold` | `boolean` | `false` |\n\n## Development\n\n```bash\nnpm install\nnpm run dev       # Preview dev server\nnpm run build     # Build library\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}