{"_id":"@duapuluhtiga/ui","name":"@duapuluhtiga/ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@duapuluhtiga/ui","version":"0.1.0","type":"module","scripts":{"dev":"vite","build":"vite build","build:lib":"vite build --config vite.lib.config.ts && tailwindcss -i src/styles.css -o dist/style.css --minify","lint":"eslint .","preview":"vite preview"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./style.css":"./dist/style.css"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","peerDependencies":{"react":">=18","react-dom":">=18","react-aria-components":">=1","@untitledui/icons":">=0.0.22","@untitledui/file-icons":">=0.0.9"},"dependencies":{"@react-stately/utils":"^3.12.0","@react-types/overlays":"^3.10.0","@react-types/shared":"^3.34.0","embla-carousel-react":"^8.6.0","motion":"^12.38.0","react-router-dom":"^7.15.0","recharts":"^3.8.1","tailwind-merge":"^3.6.0","tailwindcss-animate":"^1.0.7"},"devDependencies":{"@eslint/js":"^10.0.1","@tailwindcss/cli":"^4.3.0","@tailwindcss/typography":"^0.5.19","@tailwindcss/vite":"^4.3.0","@types/node":"^24.12.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@untitledui/file-icons":"^0.0.9","@untitledui/icons":"^0.0.22","@vitejs/plugin-react":"^6.0.1","eslint":"^10.3.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.6.0","react":"^19.2.6","react-aria-components":"^1.17.0","react-dom":"^19.2.6","tailwindcss":"^4.3.0","tailwindcss-react-aria-components":"^2.1.0","typescript":"~6.0.2","typescript-eslint":"^8.59.2","vite":"^8.0.12","vite-plugin-dts":"^5.0.0"},"_id":"@duapuluhtiga/ui@0.1.0","gitHead":"aada998c48d06d2234c7b022c3812300fda513cb","description":"Design system internal **PT Duapuluhtiga** — kumpulan komponen UI, design tokens, dan panduan desain untuk membangun produk web konsisten di seluruh platform 23.","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Y7WYG1znSc4v4OQ8jOJcSXNEc0FOwU+nKsyXoJreisIpGKOU4KD6xftUK2gWlItgHx+qVMxcpoZnJTSVxUqRYw==","shasum":"46f74c08cadedede656757483cc527f9e5218f9b","tarball":"https://registry.npmjs.org/@duapuluhtiga/ui/-/ui-0.1.0.tgz","fileCount":270,"unpackedSize":3609381,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCc6QMHgE59KkjLxktMjuyIF3Tydi9ux951NnBU44mf6gIgLvacpVFcu3BlMM1CB3jf6J/zAj3NbkuMw50BC9FBfmY="}]},"_npmUser":{"name":"ferdisain","email":"ferdiansyah@duapuluhtiga.com"},"directories":{},"maintainers":[{"name":"ferdisain","email":"ferdiansyah@duapuluhtiga.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.0_1778766768147_0.8519142766264116"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-14T13:52:48.096Z","0.1.0":"2026-05-14T13:52:48.431Z","modified":"2026-05-14T13:52:48.611Z"},"maintainers":[{"name":"ferdisain","email":"ferdiansyah@duapuluhtiga.com"}],"description":"Design system internal **PT Duapuluhtiga** — kumpulan komponen UI, design tokens, dan panduan desain untuk membangun produk web konsisten di seluruh platform 23.","readme":"# @duapuluhtiga/ui\n\nDesign system internal **PT Duapuluhtiga** — kumpulan komponen UI, design tokens, dan panduan desain untuk membangun produk web konsisten di seluruh platform 23.\n\nDibangun di atas **React 19**, **Tailwind CSS v4**, dan **React Aria Components**.\n\n---\n\n## Instalasi\n\n```bash\nnpm install @duapuluhtiga/ui\n```\n\n### Peer dependencies yang dibutuhkan\n\n```bash\nnpm install react react-dom react-aria-components @untitledui/icons @untitledui/file-icons\n```\n\n---\n\n## Quick Start\n\n### 1. Import CSS di root layout\n\n**Next.js** (`app/layout.tsx`):\n```tsx\nimport \"@duapuluhtiga/ui/style.css\";\n```\n\n**Vite** (`src/main.tsx`):\n```tsx\nimport \"@duapuluhtiga/ui/style.css\";\n```\n\n### 2. Wrap app dengan ThemeProvider\n\n```tsx\nimport { ThemeProvider } from \"@duapuluhtiga/ui\";\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n );\n}\n```\n\n### 3. Pakai komponen\n\n```tsx\nimport { Button, Badge, Input, Select } from \"@duapuluhtiga/ui\";\n\nexport default function Page() {\n return (\n
\n \n \n Aktif\n \n
\n );\n}\n```\n\n---\n\n## Komponen yang tersedia\n\n### Base\n| Komponen | Import |\n|---|---|\n| Button | `import { Button } from \"@duapuluhtiga/ui\"` |\n| Input, InputGroup, InputFile, InputNumber | `import { Input, InputGroup } from \"@duapuluhtiga/ui\"` |\n| Select, MultiSelect, ComboBox | `import { Select, MultiSelect } from \"@duapuluhtiga/ui\"` |\n| Badge, BadgeWithDot, BadgeWithIcon | `import { Badge } from \"@duapuluhtiga/ui\"` |\n| Checkbox | `import { Checkbox } from \"@duapuluhtiga/ui\"` |\n| Toggle | `import { Toggle } from \"@duapuluhtiga/ui\"` |\n| RadioGroup, RadioButton | `import { RadioGroup, RadioButton } from \"@duapuluhtiga/ui\"` |\n| TextArea | `import { TextArea } from \"@duapuluhtiga/ui\"` |\n| Tooltip | `import { Tooltip } from \"@duapuluhtiga/ui\"` |\n| Avatar, AvatarLabelGroup | `import { Avatar } from \"@duapuluhtiga/ui\"` |\n| Slider | `import { Slider } from \"@duapuluhtiga/ui\"` |\n| TagGroup, Tag | `import { TagGroup, Tag } from \"@duapuluhtiga/ui\"` |\n| ProgressBar, ProgressBarCircle | `import { ProgressBar } from \"@duapuluhtiga/ui\"` |\n| ButtonGroup | `import { ButtonGroup, ButtonGroupItem } from \"@duapuluhtiga/ui\"` |\n| Dropdown | `import { Dropdown } from \"@duapuluhtiga/ui\"` |\n\n### Application\n| Komponen | Import |\n|---|---|\n| Modal, Dialog | `import { Modal, Dialog, DialogTrigger } from \"@duapuluhtiga/ui\"` |\n| Tabs, TabList, Tab, TabPanel | `import { Tabs, TabList, Tab, TabPanel } from \"@duapuluhtiga/ui\"` |\n| Table, TableCard | `import { Table } from \"@duapuluhtiga/ui\"` |\n| Pagination | `import { PaginationPageDefault } from \"@duapuluhtiga/ui\"` |\n| EmptyState | `import { EmptyState } from \"@duapuluhtiga/ui\"` |\n| DatePicker, DateRangePicker | `import { DatePicker } from \"@duapuluhtiga/ui\"` |\n| FileUpload | `import { FileUpload } from \"@duapuluhtiga/ui\"` |\n| LoadingIndicator | `import { LoadingIndicator } from \"@duapuluhtiga/ui\"` |\n| Carousel | `import { Carousel } from \"@duapuluhtiga/ui\"` |\n\n### Foundations\n| Komponen | Import |\n|---|---|\n| FeaturedIcon | `import { FeaturedIcon } from \"@duapuluhtiga/ui\"` |\n| RatingBadge, RatingStars | `import { RatingBadge, RatingStars } from \"@duapuluhtiga/ui\"` |\n| Social Icons | `import { GitHub, LinkedIn, Twitter } from \"@duapuluhtiga/ui\"` |\n| Payment Icons | `import { Visa, Mastercard } from \"@duapuluhtiga/ui\"` |\n\n---\n\n## Dark Mode\n\nPackage ini mendukung dark mode via class `.dark-mode` di root element:\n\n```tsx\nimport { useTheme } from \"@duapuluhtiga/ui\";\n\nfunction ThemeToggle() {\n const { theme, setTheme } = useTheme();\n return (\n \n );\n}\n```\n\n---\n\n## Tech Stack\n\n- **React** 18+\n- **Tailwind CSS** v4\n- **React Aria Components** — aksesibilitas WCAG\n- **Motion (Framer Motion)** — animasi\n- **Untitled UI Icons**\n- **Tailwind Merge**\n\n---\n\n## Lisensi\n\nInternal use only — © PT Duapuluhtiga\n","readmeFilename":"README.md","_rev":"1-1a121ca75bc40706fc9e9b74222b6211"}