@deriv-ds/design-intelligence-layer 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -4
- package/dist/index.cjs +2554 -1791
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +289 -102
- package/dist/index.d.ts +289 -102
- package/dist/index.js +2466 -1699
- package/dist/index.js.map +1 -1
- package/package.json +10 -4
- package/src/styles.css +131 -21
package/README.md
CHANGED
|
@@ -11,10 +11,10 @@ Published as **`@deriv-ds/design-intelligence-layer`** on npm.
|
|
|
11
11
|
### Installation
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
|
-
npm install @deriv-ds/design-intelligence-layer
|
|
14
|
+
npm install @deriv-ds/design-intelligence-layer
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
-
> **
|
|
17
|
+
> **CI / time-sensitive installs:** If the package was published less than 72 hours ago and npm's safe-chain hold is blocking it, append `--safe-chain-skip-minimum-package-age` to the command above.
|
|
18
18
|
|
|
19
19
|
### 1. Add the CSS imports
|
|
20
20
|
|
|
@@ -83,7 +83,7 @@ npm install react react-dom tailwindcss
|
|
|
83
83
|
|
|
84
84
|
## What's inside
|
|
85
85
|
|
|
86
|
-
- **
|
|
86
|
+
- **61 UI components** — buttons, forms, dialogs, charts, sidebars, and more
|
|
87
87
|
- **Design tokens** — three-layer architecture (primitives → foundation semantics → component tokens) synced from Figma
|
|
88
88
|
- **Light + Dark themes** — toggle `.dark` on `<html>` to switch; every semantic token has a paired override
|
|
89
89
|
- **Inter typography** — heading (mega → h6) and body (xl → xs) scales ready to use
|
|
@@ -100,7 +100,9 @@ npm install react react-dom tailwindcss
|
|
|
100
100
|
| Component | Import |
|
|
101
101
|
|---|---|
|
|
102
102
|
| Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |
|
|
103
|
+
| Aspect Ratio | `AspectRatio` |
|
|
103
104
|
| Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
|
|
105
|
+
| Badge | `Badge, BadgeDot` |
|
|
104
106
|
| Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
|
|
105
107
|
| Button | `Button, buttonVariants` |
|
|
106
108
|
| Calendar | `Calendar, CalendarDayButton` |
|
|
@@ -131,6 +133,7 @@ npm install react react-dom tailwindcss
|
|
|
131
133
|
| Modal | `AlertDialog, AlertDialogTrigger, AlertDialogContent, ...` |
|
|
132
134
|
| Native Select | `NativeSelect, NativeSelectOptGroup, NativeSelectOption` |
|
|
133
135
|
| Navigation Menu | `NavigationMenu, NavigationMenuList, NavigationMenuTrigger, ...` |
|
|
136
|
+
| Notification | `NotificationBanner, NotificationItem, NotificationDivider` |
|
|
134
137
|
| OTP Field | `CodeInput, CodeInputGroup, CodeInputSlot, CodeInputSeparator` |
|
|
135
138
|
| Pagination | `Pagination, PaginationContent, PaginationLink, ...` |
|
|
136
139
|
| Popover | `Popover, PopoverTrigger, PopoverContent, PopoverAnchor` |
|
|
@@ -138,20 +141,24 @@ npm install react react-dom tailwindcss
|
|
|
138
141
|
| Radio Group | `RadioGroup, RadioGroupItem` |
|
|
139
142
|
| Resizable | `ResizableHandle, ResizablePanel, ResizablePanelGroup` |
|
|
140
143
|
| Scroll Area | `ScrollArea, ScrollBar` |
|
|
144
|
+
| Search Field | `SearchField, searchFieldVariants` |
|
|
141
145
|
| Section Message | `SectionMessage, SectionMessageTitle, SectionMessageDescription` |
|
|
146
|
+
| Segmented Control | `SegmentedControl, SegmentedControlList, SegmentedControlTrigger, SegmentedControlContent` |
|
|
142
147
|
| Select | `Select, SelectTrigger, SelectContent, SelectItem, ...` |
|
|
143
148
|
| Separator | `Separator` |
|
|
144
149
|
| Sheet | `Sheet, SheetTrigger, SheetContent, SheetHeader, ...` |
|
|
145
150
|
| Sidebar | `Sidebar, SidebarProvider, SidebarMenu, SidebarMenuItem, ...` |
|
|
146
151
|
| Skeleton | `Skeleton` |
|
|
147
152
|
| Slider | `Slider` |
|
|
153
|
+
| Snackbar | `Snackbar` |
|
|
154
|
+
| Spinner | `Spinner` |
|
|
155
|
+
| Stepper | `Stepper` |
|
|
148
156
|
| Switch | `Switch` |
|
|
149
157
|
| Tab | `Tab, TabList, TabTrigger, TabContent` |
|
|
150
158
|
| Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |
|
|
151
159
|
| Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |
|
|
152
160
|
| Tag | `Tag, tagVariants` |
|
|
153
161
|
| Textarea | `Textarea` |
|
|
154
|
-
| Ticket Card | `TicketCard` |
|
|
155
162
|
| Toggle | `Toggle, toggleVariants` |
|
|
156
163
|
| Toggle Group | `ToggleGroup, ToggleGroupItem` |
|
|
157
164
|
| Tooltip | `Tooltip, TooltipTrigger, TooltipContent, TooltipProvider` |
|