{"_id":"@damarkuncoro/ui-components","_rev":"2-ba5c9d2533ec1b9bc69e62565a04f5be","name":"@damarkuncoro/ui-components","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@damarkuncoro/ui-components","version":"0.1.0","keywords":["ui","components","react","typescript","library"],"author":{"name":"DAMAR KUNCORO"},"license":"MIT","_id":"@damarkuncoro/ui-components@0.1.0","maintainers":[{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"}],"homepage":"https://github.com/damarkuncoro/contract-architecture#readme","bugs":{"url":"https://github.com/damarkuncoro/contract-architecture/issues"},"dist":{"shasum":"b9c25693c29ac3baf75a8055aac278890ea32cce","tarball":"https://registry.npmjs.org/@damarkuncoro/ui-components/-/ui-components-0.1.0.tgz","fileCount":57,"integrity":"sha512-omuXJ6kLemugeDKABVwsW9p73mloY+OfxxSi6Pz0XtGoM0osCD7W8X+WzoYsP74BxGQSfEpMFmTQ0+ndWCt/Ow==","signatures":[{"sig":"MEUCIFnQmxjErr385pHx1ER7QibAxX99a71/L0nkl72AntfXAiEAkriq/nFyhiXa5pMWtjNpnah25KwFcdQJpgDWWy8FdOo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1047289},"main":"lib/index.cjs","type":"module","types":"lib/index.d.ts","module":"lib/index.js","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","require":"./lib/index.cjs"}},"gitHead":"9306bbf856d5088066f17ef04267135ddf91e7eb","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"vitest","build":"tsc --emitDeclarationOnly && rollup -c","clean":"rm -rf lib","type-check":"tsc --noEmit"},"_npmUser":{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"},"repository":{"url":"git+https://github.com/damarkuncoro/contract-architecture.git","type":"git","directory":"examples/react-renderer/packages/components"},"_npmVersion":"10.8.2","description":"UI Components library with base implementations and custom hooks","directories":{},"_nodeVersion":"20.19.4","dependencies":{"clsx":"^2.0.0","lucide-react":"^0.292.0","framer-motion":"^10.16.4","tailwind-merge":"^2.0.0","@damarkuncoro/ui-core":"^0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"jsdom":"^24.0.0","eslint":"^8.0.0","rollup":"^4.0.0","vitest":"^1.2.0","postcss":"^8.0.0","typescript":"^5.0.0","tailwindcss":"^3.0.0","@types/react":"^18.0.0","autoprefixer":"^10.0.0","@types/react-dom":"^18.0.0","rollup-plugin-dts":"^6.0.0","@vitest/coverage-v8":"^1.2.0","@testing-library/react":"^16.3.2","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-typescript":"^11.0.0","@testing-library/jest-dom":"^6.9.1","@rollup/plugin-node-resolve":"^15.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@damarkuncoro/meta-architecture":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-components_0.1.0_1769684201066_0.546154202535396","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@damarkuncoro/ui-components","version":"0.1.1","description":"UI Components library with base implementations and custom hooks","type":"module","main":"lib/index.cjs","module":"lib/index.js","types":"lib/index.d.ts","exports":{".":{"types":"./lib/index.d.ts","import":"./lib/index.js","require":"./lib/index.cjs"}},"scripts":{"build":"tsc --emitDeclarationOnly && rollup -c","dev":"rollup -c -w","test":"vitest","lint":"eslint src __tests__ --ext .ts,.tsx","type-check":"tsc --noEmit","clean":"rm -rf lib"},"keywords":["ui","components","react","typescript","library"],"author":{"name":"DAMAR KUNCORO"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/damarkuncoro/contract-architecture.git","directory":"examples/react-renderer/packages/components"},"dependencies":{"@damarkuncoro/ui-core":"^0.1.2","clsx":"^2.0.0","framer-motion":"^10.16.4","lucide-react":"^0.292.0","tailwind-merge":"^2.0.0"},"peerDependencies":{"@damarkuncoro/meta-architecture":"^2.0.3","react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^8.54.0","@typescript-eslint/parser":"^8.54.0","@vitest/coverage-v8":"^1.2.0","autoprefixer":"^10.0.0","eslint":"^8.0.0","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.0.1","jsdom":"^24.0.0","postcss":"^8.0.0","rollup":"^4.0.0","rollup-plugin-dts":"^6.0.0","tailwindcss":"^3.0.0","typescript":"^5.0.0","vitest":"^1.2.0"},"_id":"@damarkuncoro/ui-components@0.1.1","gitHead":"4bae033ee8fd44303895a95141a1608adf624dcd","bugs":{"url":"https://github.com/damarkuncoro/contract-architecture/issues"},"homepage":"https://github.com/damarkuncoro/contract-architecture#readme","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-IwsPZGadlFC4EtPn7LTur4cEvf/611O9piNNAknEpdWwlmINMfturvs4UeNeGU/lfTa/BdhzrhOrrEEc16yD1A==","shasum":"f352e942ac2c789a78167cbd33633d315134832a","tarball":"https://registry.npmjs.org/@damarkuncoro/ui-components/-/ui-components-0.1.1.tgz","fileCount":57,"unpackedSize":645825,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDP5MzCPO6q232+YamfRYoHaYDSC0hsCdoKVHIQt18rKAIhANgRsWWJbapS6xIwXtJwJfKi4cL37s6MtvjUcWRp1ywz"}]},"_npmUser":{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"},"directories":{},"maintainers":[{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_0.1.1_1769764737981_0.5508321565948291"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-29T10:56:40.982Z","modified":"2026-01-30T09:18:58.242Z","0.1.0":"2026-01-29T10:56:41.228Z","0.1.1":"2026-01-30T09:18:58.119Z"},"bugs":{"url":"https://github.com/damarkuncoro/contract-architecture/issues"},"author":{"name":"DAMAR KUNCORO"},"license":"MIT","homepage":"https://github.com/damarkuncoro/contract-architecture#readme","keywords":["ui","components","react","typescript","library"],"repository":{"type":"git","url":"git+https://github.com/damarkuncoro/contract-architecture.git","directory":"examples/react-renderer/packages/components"},"description":"UI Components library with base implementations and custom hooks","maintainers":[{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"}],"readme":"# @damarkuncoro/ui-components\n\nA comprehensive collection of React UI components built with TypeScript, following atomic design principles.\n\n## 📦 Installation\n\n```bash\nnpm install @damarkuncoro/ui-components @damarkuncoro/ui-core\n```\n\n## 💅 Styling Configuration (Tailwind CSS)\n\nThis library uses Tailwind CSS for styling. To ensure styles are correctly applied, you must add the package paths to your project's `tailwind.config.js` `content` array.\n\n```javascript\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    // ... your other paths\n    \"./node_modules/@damarkuncoro/ui-components/dist/**/*.{js,jsx,ts,tsx}\"\n  ],\n  // ... rest of your config\n}\n```\n\n## 🎨 Component Categories\n\n### Atoms (Basic Elements)\nFundamental UI elements that can't be broken down further.\n\n```tsx\nimport { Button, Input, Switch, Avatar } from '@damarkuncoro/ui-components/atoms';\n\n// Basic usage\n<Button variant=\"primary\" size=\"md\" onClick={handleClick}>\n  Click me\n</Button>\n\n<Input\n  placeholder=\"Enter text\"\n  value={value}\n  onChange={setValue}\n/>\n\n<Switch\n  checked={isEnabled}\n  onChange={setIsEnabled}\n  label=\"Enable feature\"\n/>\n```\n\n### Molecules (Composite Elements)\nGroups of atoms that form more complex UI patterns.\n\n```tsx\nimport { Card, Form, Pagination, StatsCard } from '@damarkuncoro/ui-components/molecules';\n\n// Card component\n<Card title=\"User Profile\" className=\"max-w-md\">\n  <Avatar src={user.avatar} name={user.name} />\n  <div className=\"mt-4\">\n    <h3 className=\"font-semibold\">{user.name}</h3>\n    <p className=\"text-gray-600\">{user.email}</p>\n  </div>\n</Card>\n\n// Form with validation\n<Form onSubmit={handleSubmit}>\n  <Input name=\"email\" type=\"email\" required />\n  <Input name=\"password\" type=\"password\" required />\n  <Button type=\"submit\">Login</Button>\n</Form>\n\n// Pagination\n<Pagination\n  currentPage={currentPage}\n  totalPages={totalPages}\n  onPageChange={setCurrentPage}\n/>\n```\n\n### Organisms (Complex Components)\nLarge, complex components that contain molecules and atoms.\n\n```tsx\nimport { Table, Modal, DashboardLayout } from '@damarkuncoro/ui-components/organisms';\n\n// Data table\n<Table\n  columns={columns}\n  data={tableData}\n  sortable\n  pagination\n/>\n\n// Modal dialog\n<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>\n  <Modal.Header>Confirm Action</Modal.Header>\n  <Modal.Body>Are you sure you want to proceed?</Modal.Body>\n  <Modal.Footer>\n    <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>\n      Cancel\n    </Button>\n    <Button variant=\"primary\" onClick={handleConfirm}>\n      Confirm\n    </Button>\n  </Modal.Footer>\n</Modal>\n\n// Dashboard layout\n<DashboardLayout\n  sidebar={<Sidebar />}\n  header={<Header />}\n>\n  <MainContent />\n</DashboardLayout>\n```\n\n\n## 🎨 Theming & Styling\n\nComponents are designed to work with the theme system:\n\n```tsx\nimport { ThemeProvider } from '@damarkuncoro/ui-themes';\nimport '@damarkuncoro/ui-themes/skins/metronic';\n\nfunction App() {\n  return (\n    <ThemeProvider theme=\"metronic\">\n      <Button variant=\"primary\">Themed Button</Button>\n    </ThemeProvider>\n  );\n}\n```\n\n## 📋 Component API\n\n### Shared Props\n\nAll components support these common props:\n\n```typescript\ninterface BaseComponentProps {\n  className?: string;        // Custom CSS classes\n  style?: React.CSSProperties; // Inline styles\n  'data-testid'?: string;    // Test ID for testing\n  id?: string;              // HTML ID attribute\n}\n```\n\n### Size Variants\n\n```typescript\ntype ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n```\n\n### Color Variants\n\n```typescript\ntype ComponentVariant =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info'\n  | 'light'\n  | 'dark';\n```\n\n## 🔧 Advanced Usage\n\n### Custom Styling\n\n```tsx\n// Using className prop\n<Button\n  className=\"custom-button\"\n  variant=\"primary\"\n>\n  Custom Styled Button\n</Button>\n\n// Using style prop\n<Input\n  style={{ borderRadius: '8px', borderColor: '#custom' }}\n  placeholder=\"Custom styled input\"\n/>\n```\n\n### Composition\n\n```tsx\n// Building complex UIs by composition\nfunction UserCard({ user }) {\n  return (\n    <Card className=\"user-card\">\n      <div className=\"flex items-center space-x-4\">\n        <Avatar src={user.avatar} name={user.name} />\n        <div className=\"flex-1\">\n          <h3 className=\"font-semibold\">{user.name}</h3>\n          <p className=\"text-gray-600\">{user.email}</p>\n        </div>\n        <Button variant=\"secondary\" size=\"sm\">\n          Edit\n        </Button>\n      </div>\n    </Card>\n  );\n}\n```\n\n### Form Integration\n\n```tsx\nimport { Form, Input, Select, Checkbox } from '@damarkuncoro/ui-components';\n\nfunction ContactForm() {\n  const handleSubmit = (data) => {\n    console.log('Form data:', data);\n  };\n\n  return (\n    <Form onSubmit={handleSubmit} className=\"max-w-md\">\n      <Input\n        name=\"name\"\n        label=\"Full Name\"\n        required\n        placeholder=\"Enter your name\"\n      />\n\n      <Input\n        name=\"email\"\n        type=\"email\"\n        label=\"Email\"\n        required\n        placeholder=\"Enter your email\"\n      />\n\n      <Select\n        name=\"country\"\n        label=\"Country\"\n        options={[\n          { value: 'us', label: 'United States' },\n          { value: 'ca', label: 'Canada' },\n          { value: 'uk', label: 'United Kingdom' }\n        ]}\n      />\n\n      <Checkbox\n        name=\"newsletter\"\n        label=\"Subscribe to newsletter\"\n      />\n\n      <Button type=\"submit\" variant=\"primary\" className=\"w-full\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n```\n\n## ♿ Accessibility\n\nAll components are built with accessibility in mind:\n\n- **Keyboard Navigation**: Full keyboard support\n- **Screen Readers**: Proper ARIA attributes\n- **Focus Management**: Visible focus indicators\n- **Semantic HTML**: Correct element usage\n\n```tsx\n// Accessible button with loading state\n<Button\n  loading={isSubmitting}\n  disabled={isSubmitting}\n  aria-describedby=\"submit-help\"\n>\n  {isSubmitting ? 'Submitting...' : 'Submit Form'}\n</Button>\n<span id=\"submit-help\" className=\"sr-only\">\n  This will send your information to our servers\n</span>\n```\n\n## 🧪 Testing\n\nComponents include data attributes for easy testing:\n\n```tsx\n// Component with test ID\n<Button data-testid=\"submit-button\">\n  Submit\n</Button>\n\n// Testing with React Testing Library\nconst button = screen.getByTestId('submit-button');\nfireEvent.click(button);\n```\n\n## 📚 Component List\n\n### Atoms (16 components)\n- `Avatar` - User avatar display\n- `Badge` - Status indicators\n- `Button` - Interactive buttons\n- `Checkbox` - Boolean input\n- `Divider` - Content separators\n- `Icon` - Icon display\n- `Input` - Text input\n- `ProgressBar` - Progress indicators\n- `Radio` - Single selection\n- `Select` - Dropdown selection\n- `Skeleton` - Loading placeholders\n- `Spinner` - Loading indicators\n- `Switch` - Toggle input\n- `Text` - Text display\n- `Textarea` - Multi-line text input\n- `Tooltip` - Contextual help\n\n### Molecules (14 components)\n- `Accordion` - Collapsible content\n- `Alert` - Status messages\n- `Breadcrumb` - Navigation path\n- `Card` - Content containers\n- `Chart` - Data visualization\n- `EmptyState` - Empty state display\n- `Grid` - Layout grids\n- `Pagination` - Page navigation\n- `Stack` - Vertical layouts\n- `StatsCard` - Statistics display\n- `StatWidget` - Metric widgets\n- `Timeline` - Event timelines\n- `Toast` - Notification messages\n- `UserCard` - User information\n\n### Organisms (7 components)\n- `Drawer` - Slide-out panels\n- `Form` - Complex forms\n- `Modal` - Dialog overlays\n- `PageHeader` - Page headers\n- `Table` - Data tables\n- `Tabs` - Tabbed interfaces\n\n## 🔄 Migration Guide\n\n### From v0.x to v1.0\n\n#### Breaking Changes\n- Component APIs standardized\n- Hook signatures updated\n- Theme integration required\n\n#### Migration Steps\n\n```tsx\n// Before (v0.x)\nimport { Button } from '@damarkuncoro/ui-components';\n<Button primary large>Click me</Button>\n\n// After (v1.0)\nimport { Button } from '@damarkuncoro/ui-components';\n<Button variant=\"primary\" size=\"lg\">Click me</Button>\n```\n\n## 📄 License\n\nMIT License - see [LICENSE](../../LICENSE) file for details.","readmeFilename":"README.md"}