@evinvest/uikit 0.3.0 → 0.4.0
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 +6 -6
- package/dist/index.d.ts +172 -45
- package/dist/index.js +1670 -1215
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/styles/tokens.css +9 -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 |
|
|
@@ -166,7 +166,7 @@ npm run build # tsup → dist/ (ESM + d.ts)
|
|
|
166
166
|
The Rust counterpart is verified from the repo root:
|
|
167
167
|
|
|
168
168
|
```sh
|
|
169
|
-
cargo test -p
|
|
170
|
-
cargo clippy -p
|
|
171
|
-
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
|
|
172
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";
|
|
@@ -291,11 +292,75 @@ declare function FieldError({ className, children, errors, ...props }: React.Com
|
|
|
291
292
|
} | undefined>;
|
|
292
293
|
}): React.JSX.Element | null;
|
|
293
294
|
|
|
295
|
+
/**
|
|
296
|
+
* The EV brand chrome footer, ported from site_conductor: a 12-col grid —
|
|
297
|
+
* brand 3 | sitemap groups 2 each | Offices 3 | Newsletter 2 — over the dark
|
|
298
|
+
* field, with the legal links and copyright line. On mobile the sitemap
|
|
299
|
+
* columns sit side by side. All copy is parameterized with the EV defaults so
|
|
300
|
+
* a bare `<Footer nav={…} />` matches the site; only the sitemap groups (and
|
|
301
|
+
* the newsletter form, when wanted) come from the app. `children` render right
|
|
302
|
+
* after the `<footer>` tag — the slot for app-side extras like the
|
|
303
|
+
* build-version easter egg.
|
|
304
|
+
*
|
|
305
|
+
* `linkComponent` lets Next hosts pass `next/link`; everyone else gets `<a>`.
|
|
306
|
+
*/
|
|
307
|
+
interface FooterLink {
|
|
308
|
+
label: string;
|
|
309
|
+
href: string;
|
|
310
|
+
}
|
|
311
|
+
interface FooterLinkGroup {
|
|
312
|
+
heading: string;
|
|
313
|
+
links: readonly FooterLink[];
|
|
314
|
+
}
|
|
315
|
+
interface FooterOffice {
|
|
316
|
+
name: string;
|
|
317
|
+
address: string;
|
|
318
|
+
}
|
|
319
|
+
interface FooterProps {
|
|
320
|
+
nav: readonly FooterLinkGroup[];
|
|
321
|
+
description?: string;
|
|
322
|
+
offices?: readonly FooterOffice[];
|
|
323
|
+
legalLinks?: readonly FooterLink[];
|
|
324
|
+
/** The newsletter form; the Newsletter column renders only when present. */
|
|
325
|
+
newsletter?: React.ReactNode;
|
|
326
|
+
newsletterBlurb?: string;
|
|
327
|
+
version?: string;
|
|
328
|
+
commitHref?: string;
|
|
329
|
+
tagline?: string;
|
|
330
|
+
linkComponent?: React.ElementType;
|
|
331
|
+
children?: React.ReactNode;
|
|
332
|
+
}
|
|
333
|
+
declare function Footer({ nav, description, offices, legalLinks, newsletter, newsletterBlurb, version, commitHref, tagline, linkComponent, children, }: FooterProps): React.JSX.Element;
|
|
334
|
+
|
|
335
|
+
/**
|
|
336
|
+
* The EV brand chrome header, ported from site_conductor: a fixed, scroll-aware
|
|
337
|
+
* bar (transparent over the hero, blurred dark once scrolled past 50px) with
|
|
338
|
+
* the brand lockup, a desktop nav and a built-in below-`lg` full-screen menu.
|
|
339
|
+
* Nav items and the CTA stay app-side — the kit owns only the chrome.
|
|
340
|
+
*
|
|
341
|
+
* `linkComponent` lets Next hosts pass `next/link`; everyone else gets `<a>`.
|
|
342
|
+
*/
|
|
343
|
+
interface HeaderNavItem {
|
|
344
|
+
label: string;
|
|
345
|
+
href: string;
|
|
346
|
+
}
|
|
347
|
+
interface HeaderProps {
|
|
348
|
+
nav: readonly HeaderNavItem[];
|
|
349
|
+
/** Right-side call-to-action slot; also re-rendered at the mobile menu's bottom. */
|
|
350
|
+
cta?: React.ReactNode;
|
|
351
|
+
/** Overlay-specific CTA (e.g. full-width variant); falls back to `cta`. */
|
|
352
|
+
mobileCta?: React.ReactNode;
|
|
353
|
+
tagline?: string;
|
|
354
|
+
homeHref?: string;
|
|
355
|
+
className?: string;
|
|
356
|
+
linkComponent?: React.ElementType;
|
|
357
|
+
}
|
|
358
|
+
declare function Header({ nav, cta, mobileCta, tagline, homeHref, className, linkComponent, }: HeaderProps): React.JSX.Element;
|
|
359
|
+
|
|
294
360
|
declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
|
|
295
361
|
|
|
296
362
|
declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
|
|
297
363
|
|
|
298
|
-
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
299
364
|
declare const inputGroupAddonAligns: {
|
|
300
365
|
readonly "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]";
|
|
301
366
|
readonly "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]";
|
|
@@ -303,10 +368,6 @@ declare const inputGroupAddonAligns: {
|
|
|
303
368
|
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
369
|
};
|
|
305
370
|
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
371
|
declare const inputGroupButtonSizes: {
|
|
311
372
|
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
373
|
readonly sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5";
|
|
@@ -314,6 +375,12 @@ declare const inputGroupButtonSizes: {
|
|
|
314
375
|
readonly "icon-sm": "size-8 p-0 has-[>svg]:p-0";
|
|
315
376
|
};
|
|
316
377
|
type InputGroupButtonSize = keyof typeof inputGroupButtonSizes;
|
|
378
|
+
|
|
379
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
380
|
+
interface InputGroupAddonProps extends React.ComponentProps<"div"> {
|
|
381
|
+
align?: InputGroupAddonAlign;
|
|
382
|
+
}
|
|
383
|
+
declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): React.JSX.Element;
|
|
317
384
|
interface InputGroupButtonProps extends Omit<ButtonProps, "size"> {
|
|
318
385
|
size?: InputGroupButtonSize;
|
|
319
386
|
}
|
|
@@ -327,36 +394,38 @@ declare const separatorOrientations: {
|
|
|
327
394
|
readonly vertical: "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px";
|
|
328
395
|
};
|
|
329
396
|
type SeparatorOrientation = keyof typeof separatorOrientations;
|
|
397
|
+
|
|
330
398
|
interface SeparatorProps extends React.ComponentProps<"div"> {
|
|
331
399
|
orientation?: SeparatorOrientation;
|
|
332
400
|
}
|
|
333
401
|
declare function Separator({ className, orientation, ...props }: SeparatorProps): React.JSX.Element;
|
|
334
402
|
|
|
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
403
|
declare const itemVariants: {
|
|
338
404
|
readonly default: "bg-transparent";
|
|
339
405
|
readonly outline: "border-border";
|
|
340
406
|
readonly muted: "bg-muted/50";
|
|
341
407
|
};
|
|
408
|
+
type ItemVariant = keyof typeof itemVariants;
|
|
342
409
|
declare const itemSizes: {
|
|
343
|
-
readonly default: "p-4 gap-4
|
|
410
|
+
readonly default: "p-4 gap-4";
|
|
344
411
|
readonly sm: "py-3 px-4 gap-2.5";
|
|
345
412
|
};
|
|
346
|
-
type ItemVariant = keyof typeof itemVariants;
|
|
347
413
|
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
414
|
declare const itemMediaVariants: {
|
|
355
415
|
readonly default: "bg-transparent";
|
|
356
416
|
readonly icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4";
|
|
357
417
|
readonly image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover";
|
|
358
418
|
};
|
|
359
419
|
type ItemMediaVariant = keyof typeof itemMediaVariants;
|
|
420
|
+
|
|
421
|
+
declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
422
|
+
declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
423
|
+
interface ItemProps extends React.ComponentProps<"div"> {
|
|
424
|
+
variant?: ItemVariant;
|
|
425
|
+
size?: ItemSize;
|
|
426
|
+
asChild?: boolean;
|
|
427
|
+
}
|
|
428
|
+
declare function Item({ className, variant, size, asChild, ...props }: ItemProps): React.JSX.Element;
|
|
360
429
|
interface ItemMediaProps extends React.ComponentProps<"div"> {
|
|
361
430
|
variant?: ItemMediaVariant;
|
|
362
431
|
}
|
|
@@ -371,6 +440,25 @@ declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">
|
|
|
371
440
|
declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): React.JSX.Element;
|
|
372
441
|
declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
373
442
|
|
|
443
|
+
/**
|
|
444
|
+
* The EV Investment mark, rendered as a CSS mask (`backgroundColor:
|
|
445
|
+
* currentColor` + `maskImage`) so the monochrome lockup follows the
|
|
446
|
+
* surrounding text color instead of the SVG's baked-in black. The SVG is
|
|
447
|
+
* inlined as a URL-encoded `data:` URI so consumers need no asset pipeline;
|
|
448
|
+
* `src` swaps in an externally hosted mark when one is preferred.
|
|
449
|
+
*
|
|
450
|
+
* `withBackground` paints the clean brand field generated from
|
|
451
|
+
* OKLCH(0.256, 0.1, 260) behind the mark, keeping the chip consistent with
|
|
452
|
+
* the favicon.
|
|
453
|
+
*/
|
|
454
|
+
interface LogoProps {
|
|
455
|
+
className?: string;
|
|
456
|
+
withBackground?: boolean;
|
|
457
|
+
/** Overrides the inlined data-URI mark with an external SVG URL. */
|
|
458
|
+
src?: string;
|
|
459
|
+
}
|
|
460
|
+
declare function Logo({ className, withBackground, src }: LogoProps): React.JSX.Element;
|
|
461
|
+
|
|
374
462
|
declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
|
|
375
463
|
declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
376
464
|
declare function PaginationItem(props: React.ComponentProps<"li">): React.JSX.Element;
|
|
@@ -462,13 +550,14 @@ declare const toggleVariantClasses: {
|
|
|
462
550
|
readonly default: "bg-transparent";
|
|
463
551
|
readonly outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground";
|
|
464
552
|
};
|
|
553
|
+
type ToggleVariant = keyof typeof toggleVariantClasses;
|
|
465
554
|
declare const toggleSizeClasses: {
|
|
466
555
|
readonly default: "h-9 px-2 min-w-9";
|
|
467
556
|
readonly sm: "h-8 px-1.5 min-w-8";
|
|
468
557
|
readonly lg: "h-10 px-2.5 min-w-10";
|
|
469
558
|
};
|
|
470
|
-
type ToggleVariant = keyof typeof toggleVariantClasses;
|
|
471
559
|
type ToggleSize = keyof typeof toggleSizeClasses;
|
|
560
|
+
|
|
472
561
|
interface ToggleVariantsOptions {
|
|
473
562
|
variant?: ToggleVariant;
|
|
474
563
|
size?: ToggleSize;
|
|
@@ -542,12 +631,30 @@ interface SliderProps extends Omit<React.ComponentProps<"span">, "defaultValue"
|
|
|
542
631
|
}
|
|
543
632
|
declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, ...props }: SliderProps): React.JSX.Element;
|
|
544
633
|
|
|
634
|
+
declare const scrollBarOrientations: {
|
|
635
|
+
readonly vertical: "h-full w-2.5 border-l border-l-transparent";
|
|
636
|
+
readonly horizontal: "h-2.5 flex-col border-t border-t-transparent";
|
|
637
|
+
};
|
|
638
|
+
type ScrollBarOrientation = keyof typeof scrollBarOrientations;
|
|
639
|
+
|
|
545
640
|
declare function ScrollArea({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
546
641
|
interface ScrollBarProps extends React.ComponentProps<"div"> {
|
|
547
|
-
orientation?:
|
|
642
|
+
orientation?: ScrollBarOrientation;
|
|
548
643
|
}
|
|
549
644
|
declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): React.JSX.Element;
|
|
550
645
|
|
|
646
|
+
declare const sidebarMenuButtonVariantClasses: {
|
|
647
|
+
readonly default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
|
|
648
|
+
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))]";
|
|
649
|
+
};
|
|
650
|
+
type SidebarMenuButtonVariant = keyof typeof sidebarMenuButtonVariantClasses;
|
|
651
|
+
declare const sidebarMenuButtonSizeClasses: {
|
|
652
|
+
readonly default: "h-8 text-sm";
|
|
653
|
+
readonly sm: "h-7 text-xs";
|
|
654
|
+
readonly lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!";
|
|
655
|
+
};
|
|
656
|
+
type SidebarMenuButtonSize = keyof typeof sidebarMenuButtonSizeClasses;
|
|
657
|
+
|
|
551
658
|
interface SidebarContextValue {
|
|
552
659
|
state: "expanded" | "collapsed";
|
|
553
660
|
open: boolean;
|
|
@@ -582,17 +689,6 @@ declare function SidebarGroupLabel({ className, asChild, ...props }: SidebarGrou
|
|
|
582
689
|
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
583
690
|
declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
584
691
|
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
692
|
interface SidebarMenuButtonProps extends React.ComponentProps<"button"> {
|
|
597
693
|
asChild?: boolean;
|
|
598
694
|
isActive?: boolean;
|
|
@@ -611,6 +707,14 @@ interface CarouselProps extends React.ComponentProps<"div"> {
|
|
|
611
707
|
declare function Carousel({ orientation, index: indexProp, defaultIndex, onIndexChange, className, children, onKeyDown, ...props }: CarouselProps): React.JSX.Element;
|
|
612
708
|
declare function CarouselContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
613
709
|
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
710
|
+
/**
|
|
711
|
+
* Netflix-style edge scrims that dissolve the current slide into the surface
|
|
712
|
+
* colour, signalling adjacent slides without revealing them. Each side shows
|
|
713
|
+
* only when there is somewhere to scroll. Drop inside a <Carousel>.
|
|
714
|
+
*/
|
|
715
|
+
declare function CarouselEdgeFade({ className, }: {
|
|
716
|
+
className?: string;
|
|
717
|
+
}): React.JSX.Element;
|
|
614
718
|
declare function CarouselPrevious({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
|
|
615
719
|
declare function CarouselNext({ className, variant, size, ...props }: ButtonProps): React.JSX.Element;
|
|
616
720
|
|
|
@@ -964,7 +1068,14 @@ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div"
|
|
|
964
1068
|
declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
965
1069
|
declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
966
1070
|
|
|
967
|
-
|
|
1071
|
+
declare const drawerDirectionClasses: {
|
|
1072
|
+
readonly bottom: "inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
|
|
1073
|
+
readonly top: "inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
|
|
1074
|
+
readonly left: "inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
|
|
1075
|
+
readonly right: "inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
|
|
1076
|
+
};
|
|
1077
|
+
type DrawerDirection = keyof typeof drawerDirectionClasses;
|
|
1078
|
+
|
|
968
1079
|
interface DrawerProps {
|
|
969
1080
|
open?: boolean;
|
|
970
1081
|
defaultOpen?: boolean;
|
|
@@ -1118,7 +1229,24 @@ interface CalendarProps {
|
|
|
1118
1229
|
*/
|
|
1119
1230
|
declare function Calendar({ selected, onSelect, month, defaultMonth, onMonthChange, today, className, }: CalendarProps): React.JSX.Element;
|
|
1120
1231
|
|
|
1121
|
-
|
|
1232
|
+
declare const toastVariantClasses: {
|
|
1233
|
+
readonly default: "bg-popover text-popover-foreground border-border";
|
|
1234
|
+
readonly success: "bg-popover text-popover-foreground border-main-accent-t2/40";
|
|
1235
|
+
readonly error: "bg-popover text-popover-foreground border-destructive/50";
|
|
1236
|
+
readonly info: "bg-popover text-popover-foreground border-border";
|
|
1237
|
+
readonly warning: "bg-popover text-popover-foreground border-border";
|
|
1238
|
+
};
|
|
1239
|
+
type ToastVariant = keyof typeof toastVariantClasses;
|
|
1240
|
+
declare const positionClasses: {
|
|
1241
|
+
readonly "top-left": "top-4 left-4";
|
|
1242
|
+
readonly "top-center": "top-4 left-1/2 -translate-x-1/2";
|
|
1243
|
+
readonly "top-right": "top-4 right-4";
|
|
1244
|
+
readonly "bottom-left": "bottom-4 left-4";
|
|
1245
|
+
readonly "bottom-center": "bottom-4 left-1/2 -translate-x-1/2";
|
|
1246
|
+
readonly "bottom-right": "bottom-4 right-4";
|
|
1247
|
+
};
|
|
1248
|
+
type ToastPosition = keyof typeof positionClasses;
|
|
1249
|
+
|
|
1122
1250
|
/**
|
|
1123
1251
|
* Lifecycle phase of a toast. It is added `"open"` (plays the enter keyframe);
|
|
1124
1252
|
* {@link ToastFn.dismiss} flips it to `"closing"` (plays the exit keyframe) and
|
|
@@ -1126,7 +1254,6 @@ type ToastVariant = "default" | "success" | "error" | "info" | "warning";
|
|
|
1126
1254
|
* `ToastState` enum and the `data-state` the shared `tokens.css` keys on.
|
|
1127
1255
|
*/
|
|
1128
1256
|
type ToastState = "open" | "closing";
|
|
1129
|
-
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
1130
1257
|
interface ToastOptions {
|
|
1131
1258
|
description?: React.ReactNode;
|
|
1132
1259
|
/**
|
|
@@ -1206,4 +1333,4 @@ interface ResizableHandleProps extends React.ComponentProps<"div"> {
|
|
|
1206
1333
|
}
|
|
1207
1334
|
declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
|
|
1208
1335
|
|
|
1209
|
-
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,
|
|
1336
|
+
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, Footer, type FooterLink, type FooterLinkGroup, type FooterOffice, type FooterProps, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, Header, type HeaderNavItem, type HeaderProps, 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, Logo, type LogoProps, 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 };
|