{"_id":"@deriv-web-design/ui-new","_rev":"2-3f4d081ff4adc8d43ef36c2099c37ab6","name":"@deriv-web-design/ui-new","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.4":{"name":"@deriv-web-design/ui-new","version":"0.1.4","_id":"@deriv-web-design/ui-new@0.1.4","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"557de98794e14774666409af69bffca1490ec150","tarball":"https://registry.npmjs.org/@deriv-web-design/ui-new/-/ui-new-0.1.4.tgz","fileCount":29,"integrity":"sha512-VpA/DscOr9Hfovrm21MmdOhe3bEYdLfZYTEYqX+TMoloUEWiJdpCUTuP707p745ge/tUCgwl1iv43ioTjAJ7zg==","signatures":[{"sig":"MEYCIQDH4XfEoaXGiEqKJF2Cy88tFvBbj6BI6KPM2ZEZLcXWkgIhAPun7tRij5UQ6hsY6ZU2txEKClQpCQomBpYoikSbtQAm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2446514},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","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"},"_npmUser":{"name":"robin.saha","email":"robin@regentmarkets.com"},"_npmVersion":"10.9.4","description":"React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.","directories":{},"_nodeVersion":"22.21.1","dependencies":{"gsap":"^3.15.0","@lottiefiles/dotlottie-react":"^0.18.9"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^26.1.2","@types/react":"^19.2.14","@storybook/react":"^10.2.17","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","framer-motion":"^11 || ^12"},"_npmOperationalInternal":{"tmp":"tmp/ui-new_0.1.4_1786363757879_0.6427283068746212","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@deriv-web-design/ui-new","version":"0.1.5","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-new@0.1.5","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-WBmMocwX7HAAc3tz9M/8n3AAB8zfU7jqtRODOKh76kAq1HgYsTYvsrXFuQdyeIiicw65Hvuqd4yuENlnJeGYAA==","shasum":"5d7361d863d494e360a4a88b3f8311ca7d61b7bd","tarball":"https://registry.npmjs.org/@deriv-web-design/ui-new/-/ui-new-0.1.5.tgz","fileCount":29,"unpackedSize":2446514,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC3qfbPvXjgDr3f1N/E11+AVKLXV2H+Lrvj9Mf+IF+YKAiBVfAcZnJVxNsmnYMx5ezt25lDDwbM/Sd0LKtREnnQcCg=="}]},"_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-new_0.1.5_1786364531241_0.902526535653591"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T12:09:17.735Z","modified":"2026-08-10T12:22:11.618Z","0.1.4":"2026-08-10T12:09:18.090Z","0.1.5":"2026-08-10T12:22:11.413Z"},"description":"React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"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
\n \n \n \n\n \n \n\n \n \n
\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"}