@evinvest/uikit 0.2.0 → 0.3.2
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 +19 -9
- package/dist/index.d.ts +111 -48
- package/dist/index.js +1497 -1158
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/tokens.css +179 -4
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @evinvest/uikit
|
|
2
2
|
|
|
3
3
|
A **dep-light** React UI kit with shadcn-style semantics — the TypeScript mirror
|
|
4
|
-
of the `uikit` feature of the [`
|
|
5
|
-
(`
|
|
4
|
+
of the `uikit` feature of the [`ev_lib`](https://github.com/EV-invest/lib) Rust crate
|
|
5
|
+
(`ev_lib::uikit`, Dioxus). Both ports are driven from the same canonical class
|
|
6
6
|
strings and the same design tokens, so a component looks and behaves the same
|
|
7
7
|
whether it is rendered by React or by Dioxus.
|
|
8
8
|
|
|
@@ -86,7 +86,7 @@ The Rust crate is the source of truth; this package preserves its _semantics_
|
|
|
86
86
|
while reading like idiomatic React. Canonical class strings are identical per
|
|
87
87
|
element across the two ports.
|
|
88
88
|
|
|
89
|
-
| Concept | Rust (`
|
|
89
|
+
| Concept | Rust (`ev_lib::uikit`) | TS (`@evinvest/uikit`) |
|
|
90
90
|
| --- | --- | --- |
|
|
91
91
|
| class fusion | `cn!` macro (`tailwind_fuse`) | `cn` (`clsx` + `tailwind-merge`) |
|
|
92
92
|
| variants | `enum` + `fn class()` match | `as const` map keyed by variant |
|
|
@@ -132,9 +132,19 @@ measuring needs host-only `web-sys`). Known gaps:
|
|
|
132
132
|
- **calendar:** single month, single-date selection (no range/multi-month, no
|
|
133
133
|
locale/dropdown features). Rust does manual date math; TS uses the built-in
|
|
134
134
|
`Date`.
|
|
135
|
-
- **sonner:**
|
|
136
|
-
|
|
137
|
-
|
|
135
|
+
- **sonner:** both ports stack toasts Sonner-style — a collapsed pile (front
|
|
136
|
+
three peeking, scaled by depth) that spreads into a list on hover / keyboard
|
|
137
|
+
focus, via the shared `data-stack` CSS in `tokens.css`. The enter is a CSS
|
|
138
|
+
keyframe (plays on insertion), the exit slides out on `data-state="closed"` and
|
|
139
|
+
unmounts on `transitionend` (no host timer). React measures each toast's height
|
|
140
|
+
for exact expanded spacing; Dioxus can't (layout measuring needs host-only
|
|
141
|
+
`web-sys`), so it assumes a constant height — collapsed pile exact, expanded
|
|
142
|
+
list uniform. Both **auto-dismiss** (default 4000ms) and **pause while the stack
|
|
143
|
+
is hovered/focused**, and support **persistent** toasts; React does it with a
|
|
144
|
+
`setTimeout` (`duration: Infinity` to persist), Dioxus with a host-timer-free
|
|
145
|
+
CSS "life" animation whose `animationend` closes the toast (`use_toaster().show(
|
|
146
|
+
msg, variant, None)` to persist). Swipe-to-dismiss (horizontal drag, past 45px
|
|
147
|
+
or a fast flick) is TS-only pointer physics.
|
|
138
148
|
- **form:** react-hook-form is dropped — these are presentational + ARIA-id
|
|
139
149
|
wiring; consumers own validation/state. Rust `FormControl` can't inject ids
|
|
140
150
|
onto an arbitrary child (no `Slot`), so the consumer wires them.
|
|
@@ -156,7 +166,7 @@ npm run build # tsup → dist/ (ESM + d.ts)
|
|
|
156
166
|
The Rust counterpart is verified from the repo root:
|
|
157
167
|
|
|
158
168
|
```sh
|
|
159
|
-
cargo test -p
|
|
160
|
-
cargo clippy -p
|
|
161
|
-
cargo check -p
|
|
169
|
+
cargo test -p ev_lib --features uikit
|
|
170
|
+
cargo clippy -p ev_lib --features uikit --all-targets -- -D warnings
|
|
171
|
+
cargo check -p ev_lib --features "uikit wasm" --target wasm32-unknown-unknown
|
|
162
172
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -147,6 +147,7 @@ declare const alertVariants: {
|
|
|
147
147
|
readonly destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90";
|
|
148
148
|
};
|
|
149
149
|
type AlertVariant = keyof typeof alertVariants;
|
|
150
|
+
|
|
150
151
|
interface AlertProps extends React.ComponentProps<"div"> {
|
|
151
152
|
variant?: AlertVariant;
|
|
152
153
|
}
|
|
@@ -154,11 +155,6 @@ declare function Alert({ className, variant, ...props }: AlertProps): React.JSX.
|
|
|
154
155
|
declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
155
156
|
declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
156
157
|
|
|
157
|
-
interface AspectRatioProps extends React.ComponentProps<"div"> {
|
|
158
|
-
ratio?: number;
|
|
159
|
-
}
|
|
160
|
-
declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): React.JSX.Element;
|
|
161
|
-
|
|
162
158
|
declare function Avatar({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
163
159
|
declare function AvatarImage({ className, onError, ...props }: React.ComponentProps<"img">): React.JSX.Element | null;
|
|
164
160
|
declare function AvatarFallback({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
@@ -171,6 +167,7 @@ declare const badgeVariants: {
|
|
|
171
167
|
readonly success: "border-transparent bg-main-accent-t2/20 text-main-accent-t2";
|
|
172
168
|
};
|
|
173
169
|
type BadgeVariant = keyof typeof badgeVariants;
|
|
170
|
+
|
|
174
171
|
interface BadgeProps extends React.ComponentProps<"span"> {
|
|
175
172
|
variant?: BadgeVariant;
|
|
176
173
|
asChild?: boolean;
|
|
@@ -196,16 +193,17 @@ declare const buttonVariantClasses: {
|
|
|
196
193
|
readonly destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20";
|
|
197
194
|
readonly link: "text-primary underline-offset-4 hover:underline";
|
|
198
195
|
};
|
|
196
|
+
type ButtonVariant = keyof typeof buttonVariantClasses;
|
|
199
197
|
declare const buttonSizeClasses: {
|
|
200
198
|
readonly default: "h-9 px-4 py-2 has-[>svg]:px-3";
|
|
201
199
|
readonly sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5";
|
|
202
200
|
readonly lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
|
|
203
|
-
readonly icon: "
|
|
204
|
-
readonly "icon-sm": "
|
|
205
|
-
readonly "icon-lg": "
|
|
201
|
+
readonly icon: "h-9 aspect-square px-0";
|
|
202
|
+
readonly "icon-sm": "h-8 aspect-square px-0";
|
|
203
|
+
readonly "icon-lg": "h-10 aspect-square px-0";
|
|
206
204
|
};
|
|
207
|
-
type ButtonVariant = keyof typeof buttonVariantClasses;
|
|
208
205
|
type ButtonSize = keyof typeof buttonSizeClasses;
|
|
206
|
+
|
|
209
207
|
interface ButtonVariantsOptions {
|
|
210
208
|
variant?: ButtonVariant;
|
|
211
209
|
size?: ButtonSize;
|
|
@@ -229,6 +227,7 @@ declare const buttonGroupOrientationClasses: {
|
|
|
229
227
|
readonly vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none";
|
|
230
228
|
};
|
|
231
229
|
type ButtonGroupOrientation = keyof typeof buttonGroupOrientationClasses;
|
|
230
|
+
|
|
232
231
|
interface ButtonGroupProps extends React.ComponentProps<"div"> {
|
|
233
232
|
orientation?: ButtonGroupOrientation;
|
|
234
233
|
}
|
|
@@ -247,13 +246,14 @@ declare function CardAction({ className, ...props }: React.ComponentProps<"div">
|
|
|
247
246
|
declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
248
247
|
declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
249
248
|
|
|
250
|
-
declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
251
|
-
declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
252
249
|
declare const emptyMediaVariants: {
|
|
253
250
|
readonly default: "bg-transparent";
|
|
254
251
|
readonly icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6";
|
|
255
252
|
};
|
|
256
253
|
type EmptyMediaVariant = keyof typeof emptyMediaVariants;
|
|
254
|
+
|
|
255
|
+
declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
256
|
+
declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
257
257
|
interface EmptyMediaProps extends React.ComponentProps<"div"> {
|
|
258
258
|
variant?: EmptyMediaVariant;
|
|
259
259
|
}
|
|
@@ -266,10 +266,11 @@ declare function Label({ className, ...props }: React.ComponentProps<"label">):
|
|
|
266
266
|
|
|
267
267
|
declare const fieldOrientation: {
|
|
268
268
|
readonly vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto";
|
|
269
|
-
readonly horizontal:
|
|
270
|
-
readonly responsive:
|
|
269
|
+
readonly horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
|
|
270
|
+
readonly responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
|
|
271
271
|
};
|
|
272
272
|
type FieldOrientation = keyof typeof fieldOrientation;
|
|
273
|
+
|
|
273
274
|
declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React.JSX.Element;
|
|
274
275
|
declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
|
|
275
276
|
variant?: "legend" | "label";
|
|
@@ -295,7 +296,6 @@ declare function Input({ className, type, ...props }: React.ComponentProps<"inpu
|
|
|
295
296
|
|
|
296
297
|
declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
|
|
297
298
|
|
|
298
|
-
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
299
299
|
declare const inputGroupAddonAligns: {
|
|
300
300
|
readonly "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]";
|
|
301
301
|
readonly "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]";
|
|
@@ -303,10 +303,6 @@ declare const inputGroupAddonAligns: {
|
|
|
303
303
|
readonly "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5";
|
|
304
304
|
};
|
|
305
305
|
type InputGroupAddonAlign = keyof typeof inputGroupAddonAligns;
|
|
306
|
-
interface InputGroupAddonProps extends React.ComponentProps<"div"> {
|
|
307
|
-
align?: InputGroupAddonAlign;
|
|
308
|
-
}
|
|
309
|
-
declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
|
|
310
306
|
declare const inputGroupButtonSizes: {
|
|
311
307
|
readonly xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2";
|
|
312
308
|
readonly sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5";
|
|
@@ -314,6 +310,12 @@ declare const inputGroupButtonSizes: {
|
|
|
314
310
|
readonly "icon-sm": "size-8 p-0 has-[>svg]:p-0";
|
|
315
311
|
};
|
|
316
312
|
type InputGroupButtonSize = keyof typeof inputGroupButtonSizes;
|
|
313
|
+
|
|
314
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
315
|
+
interface InputGroupAddonProps extends React.ComponentProps<"div"> {
|
|
316
|
+
align?: InputGroupAddonAlign;
|
|
317
|
+
}
|
|
318
|
+
declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
|
|
317
319
|
interface InputGroupButtonProps extends Omit<ButtonProps, "size"> {
|
|
318
320
|
size?: InputGroupButtonSize;
|
|
319
321
|
}
|
|
@@ -327,36 +329,38 @@ declare const separatorOrientations: {
|
|
|
327
329
|
readonly vertical: "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px";
|
|
328
330
|
};
|
|
329
331
|
type SeparatorOrientation = keyof typeof separatorOrientations;
|
|
332
|
+
|
|
330
333
|
interface SeparatorProps extends React.ComponentProps<"div"> {
|
|
331
334
|
orientation?: SeparatorOrientation;
|
|
332
335
|
}
|
|
333
336
|
declare function Separator({ className, orientation, ...props }: SeparatorProps): React.JSX.Element;
|
|
334
337
|
|
|
335
|
-
declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
336
|
-
declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
337
338
|
declare const itemVariants: {
|
|
338
339
|
readonly default: "bg-transparent";
|
|
339
340
|
readonly outline: "border-border";
|
|
340
341
|
readonly muted: "bg-muted/50";
|
|
341
342
|
};
|
|
343
|
+
type ItemVariant = keyof typeof itemVariants;
|
|
342
344
|
declare const itemSizes: {
|
|
343
|
-
readonly default: "p-4 gap-4
|
|
345
|
+
readonly default: "p-4 gap-4";
|
|
344
346
|
readonly sm: "py-3 px-4 gap-2.5";
|
|
345
347
|
};
|
|
346
|
-
type ItemVariant = keyof typeof itemVariants;
|
|
347
348
|
type ItemSize = keyof typeof itemSizes;
|
|
348
|
-
interface ItemProps extends React.ComponentProps<"div"> {
|
|
349
|
-
variant?: ItemVariant;
|
|
350
|
-
size?: ItemSize;
|
|
351
|
-
asChild?: boolean;
|
|
352
|
-
}
|
|
353
|
-
declare function Item({ className, variant, size, asChild, ...props }: ItemProps): React.JSX.Element;
|
|
354
349
|
declare const itemMediaVariants: {
|
|
355
350
|
readonly default: "bg-transparent";
|
|
356
351
|
readonly icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4";
|
|
357
352
|
readonly image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover";
|
|
358
353
|
};
|
|
359
354
|
type ItemMediaVariant = keyof typeof itemMediaVariants;
|
|
355
|
+
|
|
356
|
+
declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
357
|
+
declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
358
|
+
interface ItemProps extends React.ComponentProps<"div"> {
|
|
359
|
+
variant?: ItemVariant;
|
|
360
|
+
size?: ItemSize;
|
|
361
|
+
asChild?: boolean;
|
|
362
|
+
}
|
|
363
|
+
declare function Item({ className, variant, size, asChild, ...props }: ItemProps): React.JSX.Element;
|
|
360
364
|
interface ItemMediaProps extends React.ComponentProps<"div"> {
|
|
361
365
|
variant?: ItemMediaVariant;
|
|
362
366
|
}
|
|
@@ -462,13 +466,14 @@ declare const toggleVariantClasses: {
|
|
|
462
466
|
readonly default: "bg-transparent";
|
|
463
467
|
readonly outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground";
|
|
464
468
|
};
|
|
469
|
+
type ToggleVariant = keyof typeof toggleVariantClasses;
|
|
465
470
|
declare const toggleSizeClasses: {
|
|
466
471
|
readonly default: "h-9 px-2 min-w-9";
|
|
467
472
|
readonly sm: "h-8 px-1.5 min-w-8";
|
|
468
473
|
readonly lg: "h-10 px-2.5 min-w-10";
|
|
469
474
|
};
|
|
470
|
-
type ToggleVariant = keyof typeof toggleVariantClasses;
|
|
471
475
|
type ToggleSize = keyof typeof toggleSizeClasses;
|
|
476
|
+
|
|
472
477
|
interface ToggleVariantsOptions {
|
|
473
478
|
variant?: ToggleVariant;
|
|
474
479
|
size?: ToggleSize;
|
|
@@ -542,12 +547,30 @@ interface SliderProps extends Omit<React.ComponentProps<"span">, "defaultValue"
|
|
|
542
547
|
}
|
|
543
548
|
declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, ...props }: SliderProps): React.JSX.Element;
|
|
544
549
|
|
|
550
|
+
declare const scrollBarOrientations: {
|
|
551
|
+
readonly vertical: "h-full w-2.5 border-l border-l-transparent";
|
|
552
|
+
readonly horizontal: "h-2.5 flex-col border-t border-t-transparent";
|
|
553
|
+
};
|
|
554
|
+
type ScrollBarOrientation = keyof typeof scrollBarOrientations;
|
|
555
|
+
|
|
545
556
|
declare function ScrollArea({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
546
557
|
interface ScrollBarProps extends React.ComponentProps<"div"> {
|
|
547
|
-
orientation?:
|
|
558
|
+
orientation?: ScrollBarOrientation;
|
|
548
559
|
}
|
|
549
560
|
declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): React.JSX.Element;
|
|
550
561
|
|
|
562
|
+
declare const sidebarMenuButtonVariantClasses: {
|
|
563
|
+
readonly default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
|
|
564
|
+
readonly outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]";
|
|
565
|
+
};
|
|
566
|
+
type SidebarMenuButtonVariant = keyof typeof sidebarMenuButtonVariantClasses;
|
|
567
|
+
declare const sidebarMenuButtonSizeClasses: {
|
|
568
|
+
readonly default: "h-8 text-sm";
|
|
569
|
+
readonly sm: "h-7 text-xs";
|
|
570
|
+
readonly lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
|
|
571
|
+
};
|
|
572
|
+
type SidebarMenuButtonSize = keyof typeof sidebarMenuButtonSizeClasses;
|
|
573
|
+
|
|
551
574
|
interface SidebarContextValue {
|
|
552
575
|
state: "expanded" | "collapsed";
|
|
553
576
|
open: boolean;
|
|
@@ -582,17 +605,6 @@ declare function SidebarGroupLabel({ className, asChild, ...props }: SidebarGrou
|
|
|
582
605
|
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
583
606
|
declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
584
607
|
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
585
|
-
declare const sidebarMenuButtonVariantClasses: {
|
|
586
|
-
readonly default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
|
|
587
|
-
readonly outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]";
|
|
588
|
-
};
|
|
589
|
-
declare const sidebarMenuButtonSizeClasses: {
|
|
590
|
-
readonly default: "h-8 text-sm";
|
|
591
|
-
readonly sm: "h-7 text-xs";
|
|
592
|
-
readonly lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
|
|
593
|
-
};
|
|
594
|
-
type SidebarMenuButtonVariant = keyof typeof sidebarMenuButtonVariantClasses;
|
|
595
|
-
type SidebarMenuButtonSize = keyof typeof sidebarMenuButtonSizeClasses;
|
|
596
608
|
interface SidebarMenuButtonProps extends React.ComponentProps<"button"> {
|
|
597
609
|
asChild?: boolean;
|
|
598
610
|
isActive?: boolean;
|
|
@@ -611,6 +623,14 @@ interface CarouselProps extends React.ComponentProps<"div"> {
|
|
|
611
623
|
declare function Carousel({ orientation, index: indexProp, defaultIndex, onIndexChange, className, children, onKeyDown, ...props }: CarouselProps): React.JSX.Element;
|
|
612
624
|
declare function CarouselContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
613
625
|
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
626
|
+
/**
|
|
627
|
+
* Netflix-style edge scrims that dissolve the current slide into the surface
|
|
628
|
+
* colour, signalling adjacent slides without revealing them. Each side shows
|
|
629
|
+
* only when there is somewhere to scroll. Drop inside a <Carousel>.
|
|
630
|
+
*/
|
|
631
|
+
declare function CarouselEdgeFade({ className, }: {
|
|
632
|
+
className?: string;
|
|
633
|
+
}): React.JSX.Element;
|
|
614
634
|
declare function CarouselPrevious({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
|
|
615
635
|
declare function CarouselNext({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
|
|
616
636
|
|
|
@@ -964,7 +984,14 @@ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div"
|
|
|
964
984
|
declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
965
985
|
declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
966
986
|
|
|
967
|
-
|
|
987
|
+
declare const drawerDirectionClasses: {
|
|
988
|
+
readonly bottom: "inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
|
|
989
|
+
readonly top: "inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
|
|
990
|
+
readonly left: "inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
|
|
991
|
+
readonly right: "inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
|
|
992
|
+
};
|
|
993
|
+
type DrawerDirection = keyof typeof drawerDirectionClasses;
|
|
994
|
+
|
|
968
995
|
interface DrawerProps {
|
|
969
996
|
open?: boolean;
|
|
970
997
|
defaultOpen?: boolean;
|
|
@@ -1118,10 +1145,38 @@ interface CalendarProps {
|
|
|
1118
1145
|
*/
|
|
1119
1146
|
declare function Calendar({ selected, onSelect, month, defaultMonth, onMonthChange, today, className, }: CalendarProps): React.JSX.Element;
|
|
1120
1147
|
|
|
1121
|
-
|
|
1122
|
-
|
|
1148
|
+
declare const toastVariantClasses: {
|
|
1149
|
+
readonly default: "bg-popover text-popover-foreground border-border";
|
|
1150
|
+
readonly success: "bg-popover text-popover-foreground border-main-accent-t2/40";
|
|
1151
|
+
readonly error: "bg-popover text-popover-foreground border-destructive/50";
|
|
1152
|
+
readonly info: "bg-popover text-popover-foreground border-border";
|
|
1153
|
+
readonly warning: "bg-popover text-popover-foreground border-border";
|
|
1154
|
+
};
|
|
1155
|
+
type ToastVariant = keyof typeof toastVariantClasses;
|
|
1156
|
+
declare const positionClasses: {
|
|
1157
|
+
readonly "top-left": "top-4 left-4";
|
|
1158
|
+
readonly "top-center": "top-4 left-1/2 -translate-x-1/2";
|
|
1159
|
+
readonly "top-right": "top-4 right-4";
|
|
1160
|
+
readonly "bottom-left": "bottom-4 left-4";
|
|
1161
|
+
readonly "bottom-center": "bottom-4 left-1/2 -translate-x-1/2";
|
|
1162
|
+
readonly "bottom-right": "bottom-4 right-4";
|
|
1163
|
+
};
|
|
1164
|
+
type ToastPosition = keyof typeof positionClasses;
|
|
1165
|
+
|
|
1166
|
+
/**
|
|
1167
|
+
* Lifecycle phase of a toast. It is added `"open"` (plays the enter keyframe);
|
|
1168
|
+
* {@link ToastFn.dismiss} flips it to `"closing"` (plays the exit keyframe) and
|
|
1169
|
+
* the live node is dropped once the exit `animationend` fires. Mirrors Rust's
|
|
1170
|
+
* `ToastState` enum and the `data-state` the shared `tokens.css` keys on.
|
|
1171
|
+
*/
|
|
1172
|
+
type ToastState = "open" | "closing";
|
|
1123
1173
|
interface ToastOptions {
|
|
1124
1174
|
description?: React.ReactNode;
|
|
1175
|
+
/**
|
|
1176
|
+
* Auto-dismiss delay in ms (default 4000). Pass `Infinity` for a **persistent**
|
|
1177
|
+
* toast that never times out — it stays until the close button, a swipe, or
|
|
1178
|
+
* `toast.dismiss(id)` removes it. Hovering the stack also pauses the countdown.
|
|
1179
|
+
*/
|
|
1125
1180
|
duration?: number;
|
|
1126
1181
|
variant?: ToastVariant;
|
|
1127
1182
|
}
|
|
@@ -1131,6 +1186,7 @@ interface Toast {
|
|
|
1131
1186
|
description?: React.ReactNode;
|
|
1132
1187
|
duration: number;
|
|
1133
1188
|
variant: ToastVariant;
|
|
1189
|
+
state: ToastState;
|
|
1134
1190
|
}
|
|
1135
1191
|
interface ToastFn {
|
|
1136
1192
|
(message: React.ReactNode, opts?: ToastOptions): number;
|
|
@@ -1151,9 +1207,16 @@ interface ToasterProps extends React.ComponentProps<"ol"> {
|
|
|
1151
1207
|
}
|
|
1152
1208
|
/**
|
|
1153
1209
|
* Renders the live toast stack from the module store. Fixed-positioned per
|
|
1154
|
-
* `position` (default `bottom-right`)
|
|
1155
|
-
*
|
|
1156
|
-
*
|
|
1210
|
+
* `position` (default `bottom-right`).
|
|
1211
|
+
*
|
|
1212
|
+
* Stacking mirrors Sonner: toasts pile up collapsed (the front three peeking,
|
|
1213
|
+
* each scaled + lifted by depth and clamped to the front toast's height) and
|
|
1214
|
+
* spread into a list on hover / keyboard focus — driven by the measured
|
|
1215
|
+
* `--front-height`/`--offset` vars and the `data-stack` CSS in `tokens.css`.
|
|
1216
|
+
* Each toast auto-dismisses after its `duration` (default 4000ms) via the same
|
|
1217
|
+
* animated `dismiss` as the close button (`data-state="closed"` → slide out →
|
|
1218
|
+
* unmount on `transitionend`), and is swipe-to-dismiss (horizontal drag, TS-only
|
|
1219
|
+
* pointer physics). Single dark palette — no theme switching.
|
|
1157
1220
|
*/
|
|
1158
1221
|
declare function Toaster({ position, className, ...props }: ToasterProps): React.JSX.Element;
|
|
1159
1222
|
|
|
@@ -1186,4 +1249,4 @@ interface ResizableHandleProps extends React.ComponentProps<"div"> {
|
|
|
1186
1249
|
}
|
|
1187
1250
|
declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
|
|
1188
1251
|
|
|
1189
|
-
export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align,
|
|
1252
|
+
export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselEdgeFade, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ScrollArea, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, buttonVariants, cn, mergeRefs, navigationMenuTriggerStyle, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, usePresence, useRovingFocus, useSidebar };
|