{"_id":"@abolfazl_sh/ui","_rev":"2-28f27be0efb9acc3b85e2a4f1f59acef","name":"@abolfazl_sh/ui","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.1":{"name":"@abolfazl_sh/ui","version":"0.1.1","keywords":["react","ui","components","library","typescript"],"author":"","license":"MIT","_id":"@abolfazl_sh/ui@0.1.1","maintainers":[{"name":"abolfazl_sh","email":"abazsh3@gmail.com"}],"dist":{"shasum":"3ccce1d6a63208ba74e5dbc3942a69d8dba1d546","tarball":"https://registry.npmjs.org/@abolfazl_sh/ui/-/ui-0.1.1.tgz","fileCount":255,"integrity":"sha512-1AKqI59Bba0L4HBTyAEOAqyAGIoIZvYX7U8bcgrguHVYC30//x7upmHcnk/0C3aYKSCEYBg5s/CqpA8bXy3ilg==","signatures":[{"sig":"MEUCIQCiYJATG3PFxt+bNuCkKEmS15IIBaU1hfN5Bgo5X/YJjgIgAy6rC7p7EwN6ccd3isUUM5zgkyKS225f50rzvzW+kag=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":472973},"main":"./dist/rahkar-ui.js","type":"module","_from":"file:abolfazl_sh-ui-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/rahkar-ui.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/rahkar-ui.js"},"./icon":{"types":"./dist/components/Icon/index.d.ts","import":"./dist/components/Icon/index.js"}},"scripts":{"dev":"storybook dev -p 6006","lint":"biome check .","build":"tsc && vite build","check":"pnpm run typecheck && pnpm run lint","format":"biome format --write .","lint:fix":"biome check --write .","changeset":"changeset","typecheck":"tsc --noEmit","format:check":"biome format .","generate-icons":"node scripts/generate-icons.mjs && biome check --write ./src/components/Icon","build-storybook":"storybook build","changeset:publish":"pnpm run build && changeset publish --access public","changeset:version":"changeset version"},"_npmUser":{"name":"abolfazl_sh","email":"abazsh3@gmail.com"},"_resolved":"/private/var/folders/87/fl7jwz012sq5721zfbpz_hvw0000gn/T/f03c5f6ae2c1d85e43a5994269299fef/abolfazl_sh-ui-0.1.1.tgz","_integrity":"sha512-1AKqI59Bba0L4HBTyAEOAqyAGIoIZvYX7U8bcgrguHVYC30//x7upmHcnk/0C3aYKSCEYBg5s/CqpA8bXy3ilg==","repository":{"url":"","type":"git"},"_npmVersion":"10.9.2","description":"A modern UI component library built with React and TypeScript","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"clsx":"2.1.1","vaul":"1.1.2","vite":"^7.2.4","dayjs":"1.11.19","husky":"^9.1.7","react":"^19.0.0","jalaliday":"3.1.1","react-dom":"^19.0.0","storybook":"^8.5.0","@svgr/core":"^8.1.0","typescript":"^5.9.3","@types/node":"^22.10.2","lint-staged":"^16.2.7","tailwindcss":"4.1.17","@types/react":"^19.0.0","@biomejs/biome":"^2.3.8","tailwind-merge":"^2.5.2","@changesets/cli":"^2.29.8","@storybook/test":"^8.5.0","react-hook-form":"7.67.0","vite-plugin-dts":"^4.5.4","@storybook/react":"^8.5.0","@svgr/plugin-jsx":"^8.1.0","@types/react-dom":"^19.0.0","@storybook/blocks":"^8.5.0","tailwind-variants":"^0.2.1","@radix-ui/react-slot":"^1.1.0","@tailwindcss/postcss":"4.1.17","@vitejs/plugin-react":"^5.1.1","@radix-ui/react-label":"^2.1.0","@storybook/react-vite":"^8.5.0","@svgr/plugin-prettier":"^8.1.0","@radix-ui/react-avatar":"^1.1.1","@radix-ui/react-dialog":"^1.1.2","@radix-ui/react-select":"^2.1.2","@radix-ui/react-slider":"^1.2.1","@storybook/addon-links":"^8.5.0","@radix-ui/react-tooltip":"^1.1.3","@storybook/addon-themes":"^8.5.0","@chromatic-com/storybook":"^3.2.2","@radix-ui/react-checkbox":"^1.1.2","@radix-ui/react-accordion":"^1.2.1","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-collapsible":"^1.1.1","@storybook/addon-essentials":"^8.5.0","@storybook/addon-onboarding":"^8.6.14","@radix-ui/react-alert-dialog":"^1.1.2","@radix-ui/react-dropdown-menu":"^2.1.2","@storybook/addon-interactions":"^8.5.0","@radix-ui/react-visually-hidden":"^1.1.0"},"peerDependencies":{"clsx":">=2","vaul":">=1","dayjs":">=1","react":">=19.0.0","jalaliday":">=3","react-dom":">=19.0.0","tailwindcss":">=4","tailwind-merge":">=2","react-hook-form":">=7","tailwind-variants":">=0.2","@tailwindcss/postcss":">=4"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.1_1764488544470_0.9120765903507158","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@abolfazl_sh/ui","version":"0.1.3","description":"A modern UI component library built with React and TypeScript","type":"module","main":"./dist/rahkar-ui.js","module":"./dist/rahkar-ui.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/rahkar-ui.js"},"./icon":{"types":"./dist/components/Icon/index.d.ts","import":"./dist/components/Icon/index.js"}},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0","dayjs":">=1","jalaliday":">=3","@tailwindcss/postcss":">=4","react-hook-form":">=7","tailwindcss":">=4","clsx":">=2","tailwind-merge":">=2","tailwind-variants":">=0.2","vaul":">=1"},"devDependencies":{"@biomejs/biome":"^2.3.8","@changesets/cli":"^2.29.8","@chromatic-com/storybook":"^3.2.2","@storybook/addon-essentials":"^8.5.0","@storybook/addon-interactions":"^8.5.0","@storybook/addon-links":"^8.5.0","@storybook/addon-onboarding":"^8.6.14","@storybook/addon-themes":"^8.5.0","@storybook/blocks":"^8.5.0","@storybook/react":"^8.5.0","@storybook/react-vite":"^8.5.0","@storybook/test":"^8.5.0","@svgr/core":"^8.1.0","@svgr/plugin-jsx":"^8.1.0","@svgr/plugin-prettier":"^8.1.0","@tailwindcss/postcss":"4.1.17","@types/node":"^22.10.2","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@vitejs/plugin-react":"^5.1.1","husky":"^9.1.7","lint-staged":"^16.2.7","react":"^19.0.0","react-dom":"^19.0.0","storybook":"^8.5.0","tailwindcss":"4.1.17","typescript":"^5.9.3","vite":"^7.2.4","vite-plugin-dts":"^4.5.4","@radix-ui/react-accordion":"^1.2.1","@radix-ui/react-alert-dialog":"^1.1.2","@radix-ui/react-avatar":"^1.1.1","@radix-ui/react-checkbox":"^1.1.2","@radix-ui/react-collapsible":"^1.1.1","@radix-ui/react-dialog":"^1.1.2","@radix-ui/react-dropdown-menu":"^2.1.2","@radix-ui/react-label":"^2.1.0","@radix-ui/react-select":"^2.1.2","@radix-ui/react-separator":"^1.1.0","@radix-ui/react-slider":"^1.2.1","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tooltip":"^1.1.3","@radix-ui/react-visually-hidden":"^1.1.0","clsx":"2.1.1","tailwind-merge":"^2.5.2","tailwind-variants":"^0.2.1","dayjs":"1.11.19","jalaliday":"3.1.1","vaul":"1.1.2","react-hook-form":"7.67.0"},"keywords":["react","ui","components","library","typescript"],"publishConfig":{"access":"public"},"author":"","license":"MIT","repository":{"type":"git","url":""},"scripts":{"dev":"storybook dev -p 6006","build":"tsc && vite build","build-storybook":"storybook build","generate-icons":"node scripts/generate-icons.mjs && biome check --write ./src/components/Icon","lint":"biome check .","lint:fix":"biome check --write .","format":"biome format --write .","format:check":"biome format .","typecheck":"tsc --noEmit","check":"pnpm run typecheck && pnpm run lint","changeset":"changeset","changeset:version":"changeset version","changeset:publish":"pnpm run build && changeset publish --access public"},"_id":"@abolfazl_sh/ui@0.1.3","_integrity":"sha512-dDsox1s087p0Jj6wngyYrjKX3FEESVtgowUFbsbQDHIWxHNGwzXf0eGvwqc30d++pJBplotwHnX+mL7Bm4Gd+Q==","_resolved":"/private/var/folders/87/fl7jwz012sq5721zfbpz_hvw0000gn/T/eb0a6757b036a33c5b38e5ff2233af6e/abolfazl_sh-ui-0.1.3.tgz","_from":"file:abolfazl_sh-ui-0.1.3.tgz","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-dDsox1s087p0Jj6wngyYrjKX3FEESVtgowUFbsbQDHIWxHNGwzXf0eGvwqc30d++pJBplotwHnX+mL7Bm4Gd+Q==","shasum":"bdc53702b949ef2fff98ea1c746956deb07a42ad","tarball":"https://registry.npmjs.org/@abolfazl_sh/ui/-/ui-0.1.3.tgz","fileCount":255,"unpackedSize":473435,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFKxmC0GonwQs5ET7JDcFyGbJ7lX40rXQD1HUS8I/eZ8AiEAsDyWmmtdkEsIZMI92Uf1v19Nq43/wwTKKON1OlEAzS8="}]},"_npmUser":{"name":"abolfazl_sh","email":"abazsh3@gmail.com"},"directories":{},"maintainers":[{"name":"abolfazl_sh","email":"abazsh3@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.3_1764492332216_0.6188185262752786"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-30T07:42:24.344Z","modified":"2025-11-30T08:45:32.572Z","0.1.1":"2025-11-30T07:42:24.718Z","0.1.3":"2025-11-30T08:45:32.405Z"},"license":"MIT","keywords":["react","ui","components","library","typescript"],"repository":{"type":"git","url":""},"description":"A modern UI component library built with React and TypeScript","maintainers":[{"name":"abolfazl_sh","email":"abazsh3@gmail.com"}],"readme":"# @rahkar/ui\n\nA modern UI component library built with React, TypeScript, Radix UI, and Tailwind CSS.\n\n## ✨ Features\n\n- 🚀 Built with Vite for fast development\n- 📦 Tree-shakeable ES modules\n- 💪 Written in TypeScript\n- 🎨 Styled with Tailwind CSS\n- ♿ Accessible components with Radix UI\n- 🎭 Customizable with CSS variables and Tailwind\n- ⚡ Optimized with Biome (fast linting & formatting)\n- 📝 Automated releases with Changesets\n\n## Installation\n\n```bash\npnpm add @rahkar/ui\n# or\nnpm install @rahkar/ui\n# or\nyarn add @rahkar/ui\n```\n\n**Requirements:**\n- React 19.0+\n- Tailwind CSS 4.0+\n- Modern bundler (Vite, Next.js, etc.) with ES modules support\n\n### Tailwind CSS Setup\n\nThis library **does not ship compiled CSS**. Configure your app's Tailwind to scan the library:\n\n```typescript\n// tailwind.config.ts\nexport default {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@rahkar/ui/**/*.{js,mjs}', // Add this line\n  ],\n  // ... rest of config\n}\n```\n\nSee [TAILWIND_SETUP.md](./TAILWIND_SETUP.md) for detailed setup instructions.\n\n## Usage\n\nImport the components and styles:\n\n```tsx\nimport { Button } from '@rahkar/ui'\nimport '@rahkar/ui/styles.css'\n\nfunction App() {\n  return (\n    <div>\n      <Button variant=\"default\" size=\"default\">\n        Click me\n      </Button>\n    </div>\n  )\n}\n```\n\n## Styling\n\nThe library uses Tailwind CSS and CSS variables for theming. You can customize the colors by overriding the CSS variables:\n\n```css\n:root {\n  --color-brand-primary: #3b82f6;\n  --color-brand-secondary: #6b7280;\n  --color-tertiary: #ffffff;\n  --color-disabled: #d1d5db;\n  --color-error: #ef4444;\n}\n```\n\n## Available Components\n\n### Form Components\n- **Button** - Versatile button with variants, sizes, loading states\n- **Input** - Text input field\n- **Textarea** - Multi-line text input\n- **Checkbox** - Checkbox with label support\n- **Check** - Custom check component\n- **Label** - Form label\n- **Form** - Form wrapper with react-hook-form integration\n- **ComboBox** - Searchable select dropdown\n- **DatePicker** - Date picker with Jalali calendar support\n- **Dropdown** - Dropdown menu\n- **Slider** - Range slider input\n- **Rating** - Star rating component\n\n### Display Components\n- **Badge** - Status badges and labels\n- **Avatar** - User avatar\n- **Card** - Container card\n- **Divider** - Visual separator\n- **Skeleton** - Loading placeholder\n- **Spinner** - Loading indicator\n\n### Feedback Components\n- **Alert** - Alert messages\n- **AlertDialog** - Confirmation dialog\n- **Tooltip** - Hover tooltip\n\n### Overlay Components\n- **Modal** - Modal dialog\n- **Sheet** - Slide-in panel\n- **Drawer** - Slide-out drawer\n\n### Layout Components\n- **Accordion** - Expandable content panels\n- **Collapsible** - Collapsible content\n- **Tab** - Tab navigation\n\n## Usage Examples\n\n### Button\n\n```tsx\nimport { Button } from '@rahkar/ui'\n\n<Button variant=\"default\" size=\"lg\">\n  Click me\n</Button>\n```\n\n### Form\n\n```tsx\nimport { Form, Input, Button } from '@rahkar/ui'\nimport { useForm } from 'react-hook-form'\n\nfunction MyForm() {\n  const form = useForm()\n  \n  return (\n    <Form {...form}>\n      <Form.Field name=\"email\">\n        <Form.Label>Email</Form.Label>\n        <Form.Control>\n          <Input placeholder=\"Enter email\" />\n        </Form.Control>\n        <Form.Message />\n      </Form.Field>\n      \n      <Button type=\"submit\">Submit</Button>\n    </Form>\n  )\n}\n```\n\n### DatePicker\n\n```tsx\nimport { DatePicker } from '@rahkar/ui'\n\n<DatePicker calendar=\"jalali\" />\n```\n\n### Icons\n\n```tsx\nimport { SearchIcon, ArrowRightIcon } from '@rahkar/ui/icon'\n\n<SearchIcon className=\"w-6 h-6 text-green-500\" />\n```\n\n## Development\n\n### Prerequisites\n\n- Node.js 16+\n- pnpm 8+\n\n### Setup\n\n```bash\n# Install dependencies\npnpm install\n\n# Initialize Husky (git hooks)\npnpm prepare\n\n# Start Storybook\npnpm dev\n\n# Build library\npnpm run build\n\n# Build Storybook (for deployment)\npnpm run build-storybook\n\n# Lint and format code\npnpm run lint\npnpm run format\n\n# Type check\npnpm run typecheck\n\n# Run all checks\npnpm run check\n```\n\n### Storybook\n\nThis project uses Storybook for component development and documentation:\n\n- View and interact with components in isolation\n- Auto-generated documentation\n- Test different component states\n- Dark/light theme toggle\n- Accessibility checks\n\nAccess Storybook at `http://localhost:6006` after running `pnpm dev`.\n\n### Development Tools\n\nThis project uses industry-standard tools:\n\n- **Storybook** - Component development and documentation\n- **Biome** - Ultra-fast linting and formatting (replaces ESLint + Prettier)\n- **Radix UI** - Accessible component primitives\n- **Tailwind CSS** - Utility-first styling\n- **tailwind-variants** - Type-safe variant management\n- **Husky** - Git hooks for pre-commit linting\n- **lint-staged** - Run linters on staged files only\n- **Changesets** - Version management and changelog generation\n- **TypeScript** - Type safety and better DX\n\n### Project Structure\n\n```\nrahkar-ui/\n├── .changeset/           # Changesets for version management\n├── .storybook/          # Storybook configuration\n│   ├── main.ts\n│   ├── preview.ts\n│   └── Introduction.mdx\n├── .husky/              # Git hooks\n├── src/\n│   ├── components/      # UI components\n│   │   ├── Button/\n│   │   │   ├── index.tsx\n│   │   │   ├── variants.ts\n│   │   │   └── Button.stories.tsx\n│   │   ├── Spinner/\n│   │   │   ├── index.tsx\n│   │   │   └── Spinner.stories.tsx\n│   │   └── utils/\n│   │       ├── cn.ts\n│   │       └── date.ts\n│   ├── styles.css       # Global styles & Tailwind\n│   └── index.ts         # Library entry point\n├── dist/                # Built files (generated)\n├── storybook-static/    # Built Storybook (generated)\n├── biome.json          # Biome configuration\n├── postcss.config.mjs   # PostCSS configuration\n├── vite.config.ts      # Vite configuration\n├── tsconfig.json       # TypeScript configuration\n└── package.json\n```\n\n## Building for Production\n\nRun the build command to compile the library:\n\n```bash\npnpm run build\n```\n\nThis will generate:\n- `dist/rahkar-ui.js` - ES module format\n- `dist/rahkar-ui.umd.cjs` - UMD format for broader compatibility\n- `dist/style.css` - Bundled styles\n- `dist/index.d.ts` - TypeScript type definitions\n\n## Publishing to npm\n\nThis project uses Changesets for version management:\n\n### Creating a changeset\n\nAfter making changes, create a changeset:\n\n```bash\npnpm changeset\n```\n\nFollow the prompts to:\n1. Select the type of change (major, minor, patch)\n2. Write a summary of the changes\n3. Commit the generated changeset file\n\n### Versioning\n\nWhen ready to release, consume all changesets and update versions:\n\n```bash\npnpm changeset:version\n```\n\nThis will:\n- Update version in `package.json`\n- Update `CHANGELOG.md`\n- Delete consumed changeset files\n\n### Publishing\n\nBuild and publish to npm:\n\n```bash\npnpm changeset:publish\n```\n\n**Note:** For scoped packages, ensure public access:\n\n```bash\npnpm publish --access public\n```\n\nBefore publishing, make sure to:\n- Update the `author` field in `package.json`\n- Add your repository URL\n- Test the build locally using `pnpm link`\n\n## Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}