{"_id":"@deriv-web-design/ui-v2","name":"@deriv-web-design/ui-v2","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@deriv-web-design/ui-v2","version":"0.1.0","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/index.css","./tokens.css":"./tokens.css","./block-registry.json":"./block-registry.json"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"dependencies":{"@lottiefiles/dotlottie-react":"^0.18.9","gsap":"^3.15.0"},"peerDependencies":{"framer-motion":"^11 || ^12","react":"^18 || ^19","react-dom":"^18 || ^19"},"devDependencies":{"@storybook/react":"^10.2.17","@types/node":"^26.1.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.5.1","typescript":"^5.7.0"},"_id":"@deriv-web-design/ui-v2@0.1.0","description":"React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-jlhi0F4YasVgSMh5CiVu9GzP1KD2d8WwwEa9HEVLkrpEv0Hb/bWYIsdjYvygUNJx19OfMIdPmP3vkj5CxOWeiw==","shasum":"2579b4042160fcb793a9ac2a736ad620396b304a","tarball":"https://registry.npmjs.org/@deriv-web-design/ui-v2/-/ui-v2-0.1.0.tgz","fileCount":29,"unpackedSize":2446513,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICkIOYLRJcZRZTn3za9vnlw70wDOCtZngXI1Iy7BVpqJAiEAjzq1/R7FLZN3glGHamiTdgoVMNQR8wAN4xLOAYo1cPU="}]},"_npmUser":{"name":"robin.saha","email":"robin@regentmarkets.com"},"directories":{},"maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-v2_0.1.0_1786364657296_0.2919535191268785"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T12:24:17.119Z","0.1.0":"2026-08-10T12:24:17.506Z","modified":"2026-08-10T12:24:17.863Z"},"maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"description":"React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.","readme":"# @deriv-web-design/ui\n\nReact component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.\n\n## Installation\n\n```bash\nnpm install @deriv-web-design/ui\n```\n\n## Setup\n\nImport styles and tokens once in your app entry file (e.g. `main.tsx`):\n\n```js\nimport \"@deriv-web-design/ui/styles.css\";\nimport \"@deriv-web-design/ui/tokens.css\";\n```\n\n## Usage\n\n```tsx\nimport { Button, TextField, Chip, Tag } from \"@deriv-web-design/ui\";\n\nexport default function App() {\n  return (\n    <div>\n      <Button variant=\"primary\">Submit</Button>\n      <Button variant=\"secondary\">Cancel</Button>\n      <Button variant=\"danger\">Delete</Button>\n\n      <TextField label=\"Email\" placeholder=\"you@example.com\" />\n      <TextField label=\"Password\" type=\"password\" helperText=\"Min 8 characters\" />\n\n      <Chip label=\"Active\" selected />\n      <Tag label=\"New\" />\n    </div>\n  );\n}\n```\n\n## Components\n\n| Component      | Description                                               |\n| -------------- | --------------------------------------------------------- |\n| `Button`       | Primary, secondary, ghost, and danger variants            |\n| `Accordion`    | Expandable/collapsible content sections                   |\n| `Breadcrumb`   | Navigation breadcrumb trail                               |\n| `Chip`         | Compact selection or filter element with selected state   |\n| `ChipDropdown` | Chip that opens a dropdown list for selection             |\n| `Link`         | Styled anchor — coral, black, and white schemes           |\n| `Pagination`   | Page navigation with previous/next and numbered pages     |\n| `SearchField`  | Text input with built-in search icon                      |\n| `Tag`          | Fill or outline label for status and categories           |\n| `TextField`    | Text input with label, helper text, and validation states |\n| `Card`         | Content card container                                    |\n\n## Design Tokens\n\nAll components use Deriv semantic tokens. Tokens are included in `tokens.css` and cover:\n\n- **Colors** — core palette (slate, coral, emerald, yellow, blue) + semantic tokens per component\n- **Spacing** — 8-point scale from `--spacing-2` (2px) to `--spacing-112` (112px)\n- **Typography** — Inter font, sizes `xs`–`5xl`, responsive at tablet/desktop breakpoints\n- **Border Radius** — `--radius-xs` through `--radius-full`\n- **Shadows** — `--shadow-xs` through `--shadow-xl`\n\nSee [`@deriv-web-design/tokens`](https://www.npmjs.com/package/@deriv-web-design/tokens) for the full token reference.\n\n## TypeScript\n\nFull TypeScript definitions are included — no `@types` package needed.\n\n## Requirements\n\n- React 18 or 19\n- Node.js 18+\n","readmeFilename":"README.md","_rev":"1-9f92a6d2074fec24b432e37f4cbc1647"}