{"_id":"@deriv-web-design/ui-core","name":"@deriv-web-design/ui-core","dist-tags":{"latest":"0.0.19"},"versions":{"0.0.19":{"name":"@deriv-web-design/ui-core","version":"0.0.19","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"},"./core":{"types":"./dist/core.d.ts","import":"./dist/core.mjs","require":"./dist/core.js"},"./styles.css":"./dist/index.css","./tokens.css":"./tokens.css"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"dependencies":{"@lottiefiles/dotlottie-react":"^0.18.9","@deriv-web-design/ui-templates":"0.0.1"},"peerDependencies":{"framer-motion":"^11 || ^12","react":"^18 || ^19","react-dom":"^18 || ^19"},"devDependencies":{"@storybook/react":"^10.2.17","@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"},"scripts":{"prebuild":"cp ../tokens/tokens.css ./tokens.css","build":"pnpm run build:core && pnpm --filter @deriv-web-design/ui-templates run build && pnpm run build:index && node ./scripts/merge-css.mjs","build:core":"tsup --config tsup.core.config.ts","build:index":"tsup --config tsup.index.config.ts","dev":"pnpm run build:core && pnpm --filter @deriv-web-design/ui-templates run build && tsup --watch --config tsup.index.config.ts"},"_id":"@deriv-web-design/ui-core@0.0.19","description":"React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.","_integrity":"sha512-u8p2own3JYyrBmg8xHktNuHgBKtQX/wyq8DoMXYkeRkRM6Pp5sxY58pJz2KFQwxbuXn1hpRJl/+exybe3hNmbw==","_resolved":"/tmp/1f76d51ef63125a9e1f0acb8010b0448/deriv-web-design-ui-core-0.0.19.tgz","_from":"file:deriv-web-design-ui-core-0.0.19.tgz","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-u8p2own3JYyrBmg8xHktNuHgBKtQX/wyq8DoMXYkeRkRM6Pp5sxY58pJz2KFQwxbuXn1hpRJl/+exybe3hNmbw==","shasum":"d3ac7d2dafa3583585f54f466e108f8351d9d283","tarball":"https://registry.npmjs.org/@deriv-web-design/ui-core/-/ui-core-0.0.19.tgz","fileCount":34,"unpackedSize":1791658,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDWpRZnRA+io7Foq4hz9C2sLii/nsrOyzDHaHYz0REKLwIhANJLKAGzM5WC90nJQLih5OqgF5j9sQ9tOoB+8EQy6ZBN"}]},"_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-core_0.0.19_1776332804523_0.3517714642255261"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-16T09:46:44.450Z","0.0.19":"2026-04-16T09:46:44.702Z","modified":"2026-04-16T09:46:44.889Z"},"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-core\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-core\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-core/styles.css\";\nimport \"@deriv-web-design/ui-core/tokens.css\";\n```\n\n## Usage\n\n```tsx\nimport { Button, TextField, Chip, Tag } from \"@deriv-web-design/ui-core\";\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","_rev":"1-c89a031a82559b2d746d8850677be133"}