@badnpm/ui 0.0.0 → 0.0.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 -11
- package/dist/cjs/components/accordion.cjs +24 -0
- package/dist/cjs/components/alert-dialog.cjs +56 -0
- package/dist/cjs/components/alert.cjs +34 -0
- package/dist/cjs/components/aspect-ratio.cjs +12 -0
- package/dist/cjs/components/attachment.cjs +80 -0
- package/dist/cjs/components/avatar.cjs +31 -0
- package/dist/cjs/components/badge.cjs +38 -0
- package/dist/cjs/components/breadcrumb.cjs +46 -0
- package/dist/cjs/components/bubble.cjs +66 -0
- package/dist/cjs/components/button-group.cjs +43 -0
- package/dist/cjs/components/calendar.cjs +100 -0
- package/dist/cjs/components/card.cjs +34 -0
- package/dist/cjs/components/carousel.cjs +113 -0
- package/dist/cjs/components/chart.cjs +160 -0
- package/dist/cjs/components/checkbox.cjs +13 -0
- package/dist/cjs/components/code-block.cjs +110 -0
- package/dist/cjs/components/collapsible.cjs +18 -0
- package/dist/cjs/components/combobox.cjs +96 -0
- package/dist/cjs/components/command.cjs +46 -0
- package/dist/cjs/components/context-menu.cjs +69 -0
- package/dist/cjs/components/dialog.cjs +50 -0
- package/dist/cjs/components/drawer.cjs +108 -0
- package/dist/cjs/components/dropdown-menu.cjs +68 -0
- package/dist/cjs/components/empty.cjs +42 -0
- package/dist/cjs/components/field.cjs +80 -0
- package/dist/cjs/components/hover-card.cjs +20 -0
- package/dist/cjs/components/input-group.cjs +66 -0
- package/dist/cjs/components/input-otp.cjs +46 -0
- package/dist/cjs/components/item.cjs +91 -0
- package/dist/cjs/components/kbd.cjs +14 -0
- package/dist/cjs/components/label.cjs +11 -0
- package/dist/cjs/components/marker.cjs +41 -0
- package/dist/cjs/components/menubar.cjs +75 -0
- package/dist/cjs/components/message-scroller.cjs +45 -0
- package/dist/cjs/components/message.cjs +30 -0
- package/dist/cjs/components/native-select.cjs +19 -0
- package/dist/cjs/components/navigation-menu.cjs +43 -0
- package/dist/cjs/components/pagination.cjs +36 -0
- package/dist/cjs/components/popover.cjs +31 -0
- package/dist/cjs/components/progress.cjs +28 -0
- package/dist/cjs/components/questionnaire.cjs +70 -0
- package/dist/cjs/components/radio-group.cjs +16 -0
- package/dist/cjs/components/resizable.cjs +39 -0
- package/dist/cjs/components/scroll-area.cjs +15 -0
- package/dist/cjs/components/select.cjs +47 -0
- package/dist/cjs/components/separator.cjs +11 -0
- package/dist/cjs/components/sheet.cjs +47 -0
- package/dist/cjs/components/sidebar.cjs +301 -0
- package/dist/cjs/components/skeleton.cjs +10 -0
- package/dist/cjs/components/slider.cjs +16 -0
- package/dist/cjs/components/spinner.cjs +11 -0
- package/dist/cjs/components/switch.cjs +12 -0
- package/dist/cjs/components/table.cjs +38 -0
- package/dist/cjs/components/tabs.cjs +37 -0
- package/dist/cjs/components/textarea.cjs +10 -0
- package/dist/cjs/components/toast.cjs +82 -0
- package/dist/cjs/components/toggle-group.cjs +47 -0
- package/dist/cjs/components/toggle.cjs +30 -0
- package/dist/cjs/components/tooltip.cjs +24 -0
- package/dist/cjs/components/trace.cjs +40 -0
- package/dist/cjs/hooks/use-highlighted-code.cjs +73 -0
- package/dist/cjs/hooks/use-hydrated.cjs +2 -2
- package/dist/cjs/hooks/use-mobile.cjs +36 -0
- package/dist/cjs/index.cjs +467 -0
- package/dist/cjs/lib/highlighter.cjs +96 -0
- package/dist/cjs/providers/preference-provider.cjs +13 -13
- package/dist/cjs/providers/theme-provider.cjs +10 -10
- package/dist/cjs/types/components/accordion.d.ts +9 -0
- package/dist/cjs/types/components/alert-dialog.d.ts +20 -0
- package/dist/cjs/types/components/alert.d.ts +13 -0
- package/dist/cjs/types/components/aspect-ratio.d.ts +7 -0
- package/dist/cjs/types/components/attachment.d.ts +26 -0
- package/dist/cjs/types/components/avatar.d.ts +13 -0
- package/dist/cjs/types/components/badge.d.ts +11 -0
- package/dist/cjs/types/components/breadcrumb.d.ts +12 -0
- package/dist/cjs/types/components/bubble.d.ts +19 -0
- package/dist/cjs/types/components/button-group.d.ts +14 -0
- package/dist/cjs/types/components/button.d.ts +4 -4
- package/dist/cjs/types/components/calendar.d.ts +12 -0
- package/dist/cjs/types/components/card.d.ts +13 -0
- package/dist/cjs/types/components/carousel.d.ts +31 -0
- package/dist/cjs/types/components/chart.d.ts +47 -0
- package/dist/cjs/types/components/checkbox.d.ts +6 -0
- package/dist/cjs/types/components/code-block.d.ts +29 -0
- package/dist/cjs/types/components/collapsible.d.ts +8 -0
- package/dist/cjs/types/components/combobox.d.ts +26 -0
- package/dist/cjs/types/components/command.d.ts +21 -0
- package/dist/cjs/types/components/context-menu.d.ts +31 -0
- package/dist/cjs/types/components/dialog.d.ts +19 -0
- package/dist/cjs/types/components/direction.d.ts +1 -0
- package/dist/cjs/types/components/drawer.d.ts +18 -0
- package/dist/cjs/types/components/dropdown-menu.d.ts +31 -0
- package/dist/cjs/types/components/empty.d.ts +15 -0
- package/dist/cjs/types/components/field.d.ts +28 -0
- package/dist/cjs/types/components/hover-card.d.ts +8 -0
- package/dist/cjs/types/components/index.d.ts +62 -0
- package/dist/cjs/types/components/input-group.d.ts +21 -0
- package/dist/cjs/types/components/input-otp.d.ts +13 -0
- package/dist/cjs/types/components/input.d.ts +2 -2
- package/dist/cjs/types/components/item.d.ts +25 -0
- package/dist/cjs/types/components/kbd.d.ts +6 -0
- package/dist/cjs/types/components/label.d.ts +5 -0
- package/dist/cjs/types/components/marker.d.ts +13 -0
- package/dist/cjs/types/components/menubar.d.ts +31 -0
- package/dist/cjs/types/components/message-scroller.d.ts +13 -0
- package/dist/cjs/types/components/message.d.ts +12 -0
- package/dist/cjs/types/components/native-select.d.ts +10 -0
- package/dist/cjs/types/components/navigation-menu.d.ts +15 -0
- package/dist/cjs/types/components/pagination.d.ts +19 -0
- package/dist/cjs/types/components/popover.d.ts +11 -0
- package/dist/cjs/types/components/progress.d.ts +10 -0
- package/dist/cjs/types/components/questionnaire.d.ts +21 -0
- package/dist/cjs/types/components/radio-group.d.ts +8 -0
- package/dist/cjs/types/components/resizable.d.ts +10 -0
- package/dist/cjs/types/components/scroll-area.d.ts +7 -0
- package/dist/cjs/types/components/select.d.ts +17 -0
- package/dist/cjs/types/components/separator.d.ts +6 -0
- package/dist/cjs/types/components/sheet.d.ts +16 -0
- package/dist/cjs/types/components/sidebar.d.ts +66 -0
- package/dist/cjs/types/components/skeleton.d.ts +5 -0
- package/dist/cjs/types/components/slider.d.ts +6 -0
- package/dist/cjs/types/components/spinner.d.ts +5 -0
- package/dist/cjs/types/components/switch.d.ts +8 -0
- package/dist/cjs/types/components/table.d.ts +12 -0
- package/dist/cjs/types/components/tabs.d.ts +14 -0
- package/dist/cjs/types/components/textarea.d.ts +5 -0
- package/dist/cjs/types/components/theme-toggle.d.ts +2 -2
- package/dist/cjs/types/components/toast.d.ts +19 -0
- package/dist/cjs/types/components/toggle-group.d.ts +13 -0
- package/dist/cjs/types/components/toggle.d.ts +12 -0
- package/dist/cjs/types/components/tooltip.d.ts +9 -0
- package/dist/cjs/types/components/trace.d.ts +20 -0
- package/dist/cjs/types/hooks/index.d.ts +2 -0
- package/dist/cjs/types/hooks/use-highlighted-code.d.ts +3 -0
- package/dist/cjs/types/hooks/use-mobile.d.ts +3 -0
- package/dist/cjs/types/index.d.ts +65 -0
- package/dist/cjs/types/lib/highlighter.d.ts +11 -0
- package/dist/cjs/types/lib/index.d.ts +1 -0
- package/dist/cjs/types/providers/preference-provider.d.ts +2 -2
- package/dist/cjs/types/providers/theme-provider.d.ts +2 -2
- package/dist/esm/components/accordion.js +19 -0
- package/dist/esm/components/alert-dialog.js +43 -0
- package/dist/esm/components/alert.js +29 -0
- package/dist/esm/components/aspect-ratio.js +10 -0
- package/dist/esm/components/attachment.js +70 -0
- package/dist/esm/components/avatar.js +24 -0
- package/dist/esm/components/badge.js +35 -0
- package/dist/esm/components/breadcrumb.js +38 -0
- package/dist/esm/components/bubble.js +61 -0
- package/dist/esm/components/button-group.js +38 -0
- package/dist/esm/components/calendar.js +78 -0
- package/dist/esm/components/card.js +26 -0
- package/dist/esm/components/carousel.js +87 -0
- package/dist/esm/components/chart.js +133 -0
- package/dist/esm/components/checkbox.js +11 -0
- package/dist/esm/components/code-block.js +82 -0
- package/dist/esm/components/collapsible.js +14 -0
- package/dist/esm/components/combobox.js +60 -0
- package/dist/esm/components/command.js +36 -0
- package/dist/esm/components/context-menu.js +53 -0
- package/dist/esm/components/dialog.js +39 -0
- package/dist/esm/components/drawer.js +77 -0
- package/dist/esm/components/dropdown-menu.js +52 -0
- package/dist/esm/components/empty.js +35 -0
- package/dist/esm/components/field.js +69 -0
- package/dist/esm/components/hover-card.js +16 -0
- package/dist/esm/components/input-group.js +59 -0
- package/dist/esm/components/input-otp.js +22 -0
- package/dist/esm/components/item.js +80 -0
- package/dist/esm/components/kbd.js +11 -0
- package/dist/esm/components/label.js +9 -0
- package/dist/esm/components/marker.js +36 -0
- package/dist/esm/components/menubar.js +58 -0
- package/dist/esm/components/message-scroller.js +27 -0
- package/dist/esm/components/message.js +23 -0
- package/dist/esm/components/native-select.js +15 -0
- package/dist/esm/components/navigation-menu.js +33 -0
- package/dist/esm/components/pagination.js +28 -0
- package/dist/esm/components/popover.js +24 -0
- package/dist/esm/components/progress.js +22 -0
- package/dist/esm/components/questionnaire.js +54 -0
- package/dist/esm/components/radio-group.js +13 -0
- package/dist/esm/components/resizable.js +16 -0
- package/dist/esm/components/scroll-area.js +12 -0
- package/dist/esm/components/select.js +36 -0
- package/dist/esm/components/separator.js +9 -0
- package/dist/esm/components/sheet.js +38 -0
- package/dist/esm/components/sidebar.js +257 -0
- package/dist/esm/components/skeleton.js +8 -0
- package/dist/esm/components/slider.js +14 -0
- package/dist/esm/components/spinner.js +9 -0
- package/dist/esm/components/switch.js +10 -0
- package/dist/esm/components/table.js +29 -0
- package/dist/esm/components/tabs.js +31 -0
- package/dist/esm/components/textarea.js +8 -0
- package/dist/esm/components/toast.js +68 -0
- package/dist/esm/components/toggle-group.js +25 -0
- package/dist/esm/components/toggle.js +27 -0
- package/dist/esm/components/tooltip.js +19 -0
- package/dist/esm/components/trace.js +31 -0
- package/dist/esm/hooks/use-highlighted-code.js +52 -0
- package/dist/esm/hooks/use-mobile.js +15 -0
- package/dist/esm/index.js +65 -0
- package/dist/esm/lib/highlighter.js +93 -0
- package/dist/styles/custom.css +2 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/components/accordion.d.ts +9 -0
- package/dist/types/components/alert-dialog.d.ts +20 -0
- package/dist/types/components/alert.d.ts +13 -0
- package/dist/types/components/aspect-ratio.d.ts +7 -0
- package/dist/types/components/attachment.d.ts +26 -0
- package/dist/types/components/avatar.d.ts +13 -0
- package/dist/types/components/badge.d.ts +11 -0
- package/dist/types/components/breadcrumb.d.ts +12 -0
- package/dist/types/components/bubble.d.ts +19 -0
- package/dist/types/components/button-group.d.ts +14 -0
- package/dist/types/components/button.d.ts +4 -4
- package/dist/types/components/calendar.d.ts +12 -0
- package/dist/types/components/card.d.ts +13 -0
- package/dist/types/components/carousel.d.ts +31 -0
- package/dist/types/components/chart.d.ts +47 -0
- package/dist/types/components/checkbox.d.ts +6 -0
- package/dist/types/components/code-block.d.ts +29 -0
- package/dist/types/components/collapsible.d.ts +8 -0
- package/dist/types/components/combobox.d.ts +26 -0
- package/dist/types/components/command.d.ts +21 -0
- package/dist/types/components/context-menu.d.ts +31 -0
- package/dist/types/components/dialog.d.ts +19 -0
- package/dist/types/components/direction.d.ts +1 -0
- package/dist/types/components/drawer.d.ts +18 -0
- package/dist/types/components/dropdown-menu.d.ts +31 -0
- package/dist/types/components/empty.d.ts +15 -0
- package/dist/types/components/field.d.ts +28 -0
- package/dist/types/components/hover-card.d.ts +8 -0
- package/dist/types/components/index.d.ts +62 -0
- package/dist/types/components/input-group.d.ts +21 -0
- package/dist/types/components/input-otp.d.ts +13 -0
- package/dist/types/components/input.d.ts +2 -2
- package/dist/types/components/item.d.ts +25 -0
- package/dist/types/components/kbd.d.ts +6 -0
- package/dist/types/components/label.d.ts +5 -0
- package/dist/types/components/marker.d.ts +13 -0
- package/dist/types/components/menubar.d.ts +31 -0
- package/dist/types/components/message-scroller.d.ts +13 -0
- package/dist/types/components/message.d.ts +12 -0
- package/dist/types/components/native-select.d.ts +10 -0
- package/dist/types/components/navigation-menu.d.ts +15 -0
- package/dist/types/components/pagination.d.ts +19 -0
- package/dist/types/components/popover.d.ts +11 -0
- package/dist/types/components/progress.d.ts +10 -0
- package/dist/types/components/questionnaire.d.ts +21 -0
- package/dist/types/components/radio-group.d.ts +8 -0
- package/dist/types/components/resizable.d.ts +10 -0
- package/dist/types/components/scroll-area.d.ts +7 -0
- package/dist/types/components/select.d.ts +17 -0
- package/dist/types/components/separator.d.ts +6 -0
- package/dist/types/components/sheet.d.ts +16 -0
- package/dist/types/components/sidebar.d.ts +66 -0
- package/dist/types/components/skeleton.d.ts +5 -0
- package/dist/types/components/slider.d.ts +6 -0
- package/dist/types/components/spinner.d.ts +5 -0
- package/dist/types/components/switch.d.ts +8 -0
- package/dist/types/components/table.d.ts +12 -0
- package/dist/types/components/tabs.d.ts +14 -0
- package/dist/types/components/textarea.d.ts +5 -0
- package/dist/types/components/theme-toggle.d.ts +2 -2
- package/dist/types/components/toast.d.ts +19 -0
- package/dist/types/components/toggle-group.d.ts +13 -0
- package/dist/types/components/toggle.d.ts +12 -0
- package/dist/types/components/tooltip.d.ts +9 -0
- package/dist/types/components/trace.d.ts +20 -0
- package/dist/types/hooks/index.d.ts +2 -0
- package/dist/types/hooks/use-highlighted-code.d.ts +3 -0
- package/dist/types/hooks/use-mobile.d.ts +3 -0
- package/dist/types/index.d.ts +65 -0
- package/dist/types/lib/highlighter.d.ts +11 -0
- package/dist/types/lib/index.d.ts +1 -0
- package/dist/types/providers/preference-provider.d.ts +2 -2
- package/dist/types/providers/theme-provider.d.ts +2 -2
- package/dist/umd/index.js +86764 -3487
- package/package.json +39 -4
- package/dist/styles/body.css +0 -7
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Toggle } from '@base-ui/react/toggle';
|
|
3
|
+
import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import { toggleVariants } from './toggle.js';
|
|
6
|
+
|
|
7
|
+
declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: ToggleGroup$1.Props & VariantProps<typeof toggleVariants> & {
|
|
8
|
+
spacing?: number;
|
|
9
|
+
orientation?: "horizontal" | "vertical";
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function ToggleGroupItem({ className, children, variant, size, ...props }: Toggle.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
|
|
12
|
+
|
|
13
|
+
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
declare const toggleVariants: (props?: ({
|
|
7
|
+
variant?: "default" | "outline" | null | undefined;
|
|
8
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
9
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
|
+
declare function Toggle({ className, variant, size, ...props }: Toggle$1.Props & VariantProps<typeof toggleVariants>): React.JSX.Element;
|
|
11
|
+
|
|
12
|
+
export { Toggle, toggleVariants };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
3
|
+
|
|
4
|
+
declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): React.JSX.Element;
|
|
5
|
+
declare function Tooltip({ ...props }: Tooltip$1.Root.Props): React.JSX.Element;
|
|
6
|
+
declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): React.JSX.Element;
|
|
7
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
8
|
+
|
|
9
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible.js';
|
|
3
|
+
|
|
4
|
+
declare function Trace({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare function TraceLine({ className, status, ...props }: React.ComponentProps<"span"> & {
|
|
6
|
+
status?: "running" | "error" | "pending";
|
|
7
|
+
}): React.JSX.Element;
|
|
8
|
+
declare function TraceIcon({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
9
|
+
declare function TraceTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
10
|
+
declare function TraceDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
11
|
+
declare function TraceCollapsible({ className, ...props }: Omit<React.ComponentProps<typeof Collapsible>, "open"> & ({
|
|
12
|
+
open?: undefined;
|
|
13
|
+
} | {
|
|
14
|
+
open: boolean;
|
|
15
|
+
onOpenChange: NonNullable<React.ComponentProps<typeof Collapsible>["onOpenChange"]>;
|
|
16
|
+
})): React.JSX.Element;
|
|
17
|
+
declare function TraceCollapsibleTrigger({ className, children, ...props }: React.ComponentProps<typeof CollapsibleTrigger>): React.JSX.Element;
|
|
18
|
+
declare function TraceCollapsibleContent({ className, children, ...props }: React.ComponentProps<typeof CollapsibleContent>): React.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };
|
|
@@ -1,8 +1,73 @@
|
|
|
1
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/accordion.js';
|
|
2
|
+
export { Alert, AlertAction, AlertDescription, AlertTitle } from './components/alert.js';
|
|
3
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/alert-dialog.js';
|
|
4
|
+
export { AspectRatio } from './components/aspect-ratio.js';
|
|
5
|
+
export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from './components/attachment.js';
|
|
6
|
+
export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from './components/avatar.js';
|
|
7
|
+
export { Badge, badgeVariants } from './components/badge.js';
|
|
8
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/breadcrumb.js';
|
|
9
|
+
export { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from './components/bubble.js';
|
|
1
10
|
export { Button, buttonVariants } from './components/button.js';
|
|
11
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './components/button-group.js';
|
|
12
|
+
export { Calendar, CalendarDayButton } from './components/calendar.js';
|
|
13
|
+
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
|
|
14
|
+
export { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from './components/carousel.js';
|
|
15
|
+
export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './components/chart.js';
|
|
16
|
+
export { Checkbox } from './components/checkbox.js';
|
|
17
|
+
export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from './components/code-block.js';
|
|
18
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/collapsible.js';
|
|
19
|
+
export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from './components/combobox.js';
|
|
20
|
+
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/command.js';
|
|
21
|
+
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './components/context-menu.js';
|
|
22
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
|
|
23
|
+
export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
|
|
24
|
+
export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from './components/drawer.js';
|
|
25
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
|
|
26
|
+
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './components/empty.js';
|
|
27
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from './components/field.js';
|
|
28
|
+
export { HoverCard, HoverCardContent, HoverCardTrigger } from './components/hover-card.js';
|
|
2
29
|
export { Input } from './components/input.js';
|
|
30
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/input-group.js';
|
|
31
|
+
export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './components/input-otp.js';
|
|
32
|
+
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from './components/item.js';
|
|
33
|
+
export { Kbd, KbdGroup } from './components/kbd.js';
|
|
34
|
+
export { Label } from './components/label.js';
|
|
35
|
+
export { Marker, MarkerContent, MarkerIcon, markerVariants } from './components/marker.js';
|
|
36
|
+
export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from './components/menubar.js';
|
|
37
|
+
export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from './components/message.js';
|
|
38
|
+
export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from './components/message-scroller.js';
|
|
39
|
+
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './components/native-select.js';
|
|
40
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle } from './components/navigation-menu.js';
|
|
41
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/pagination.js';
|
|
42
|
+
export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from './components/popover.js';
|
|
43
|
+
export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from './components/progress.js';
|
|
44
|
+
export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from './components/questionnaire.js';
|
|
45
|
+
export { RadioGroup, RadioGroupItem } from './components/radio-group.js';
|
|
46
|
+
export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/resizable.js';
|
|
47
|
+
export { ScrollArea, ScrollBar } from './components/scroll-area.js';
|
|
48
|
+
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/select.js';
|
|
49
|
+
export { Separator } from './components/separator.js';
|
|
50
|
+
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './components/sheet.js';
|
|
51
|
+
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/sidebar.js';
|
|
52
|
+
export { Skeleton } from './components/skeleton.js';
|
|
53
|
+
export { Slider } from './components/slider.js';
|
|
54
|
+
export { Spinner } from './components/spinner.js';
|
|
55
|
+
export { Switch } from './components/switch.js';
|
|
56
|
+
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
|
|
57
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './components/tabs.js';
|
|
58
|
+
export { Textarea } from './components/textarea.js';
|
|
3
59
|
export { ThemeToggle, ThemeToggleProps } from './components/theme-toggle.js';
|
|
60
|
+
export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from './components/toast.js';
|
|
61
|
+
export { Toggle, toggleVariants } from './components/toggle.js';
|
|
62
|
+
export { ToggleGroup, ToggleGroupItem } from './components/toggle-group.js';
|
|
63
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/tooltip.js';
|
|
64
|
+
export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from './components/trace.js';
|
|
4
65
|
export { PreferenceProvider, usePreference } from './providers/preference-provider.js';
|
|
5
66
|
export { ThemeProvider, useTheme } from './providers/theme-provider.js';
|
|
67
|
+
export { useHighlightedCode } from './hooks/use-highlighted-code.js';
|
|
6
68
|
export { useHydrated } from './hooks/use-hydrated.js';
|
|
69
|
+
export { useIsMobile } from './hooks/use-mobile.js';
|
|
70
|
+
export { highlightCode, loadHighlighter } from './lib/highlighter.js';
|
|
7
71
|
export { BASE_COLORS, BaseColor, COLOR_THEMES, ColorTheme, DEFAULT_PREFERENCE, Preference, RADIUS_OPTIONS } from './lib/preference.js';
|
|
8
72
|
export { cn } from 'cn';
|
|
73
|
+
export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { GrammarState } from 'shiki/core';
|
|
2
|
+
|
|
3
|
+
declare function loadHighlighter(language: string): Promise<{
|
|
4
|
+
highlight(code: string, state?: GrammarState): {
|
|
5
|
+
lines: any;
|
|
6
|
+
state: any;
|
|
7
|
+
};
|
|
8
|
+
} | null>;
|
|
9
|
+
declare function highlightCode(code: string, language: string): Promise<any>;
|
|
10
|
+
|
|
11
|
+
export { highlightCode, loadHighlighter };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { Preference, BaseColor, ColorTheme } from '../lib/preference.js';
|
|
4
4
|
|
|
@@ -14,7 +14,7 @@ type PreferenceContextValue = Preference & {
|
|
|
14
14
|
setTheme: (theme: ColorTheme) => void;
|
|
15
15
|
setRadius: (radius: number) => void;
|
|
16
16
|
};
|
|
17
|
-
declare function PreferenceProvider({ children, defaultPreference, storageKey, }: PreferenceProviderProps):
|
|
17
|
+
declare function PreferenceProvider({ children, defaultPreference, storageKey, }: PreferenceProviderProps): React.JSX.Element;
|
|
18
18
|
declare function usePreference(): PreferenceContextValue;
|
|
19
19
|
|
|
20
20
|
export { PreferenceProvider, usePreference };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
type Theme = 'dark' | 'light' | 'system';
|
|
@@ -19,7 +19,7 @@ type ThemeProviderState = {
|
|
|
19
19
|
/** 根据当前实际配色切换深浅模式,切换后停止跟随系统。 */
|
|
20
20
|
toggleTheme: () => void;
|
|
21
21
|
};
|
|
22
|
-
declare function ThemeProvider({ children, defaultTheme, storageKey, disableTransitionOnChange, keyboardShortcut, }: ThemeProviderProps):
|
|
22
|
+
declare function ThemeProvider({ children, defaultTheme, storageKey, disableTransitionOnChange, keyboardShortcut, }: ThemeProviderProps): React.JSX.Element;
|
|
23
23
|
declare const useTheme: () => ThemeProviderState;
|
|
24
24
|
|
|
25
25
|
export { ThemeProvider, useTheme };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
|
|
3
|
+
import { cn } from 'cn';
|
|
4
|
+
import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
|
|
5
|
+
|
|
6
|
+
function Accordion({ className, ...props }) {
|
|
7
|
+
return (jsx(Accordion$1.Root, { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
function AccordionItem({ className, ...props }) {
|
|
10
|
+
return (jsx(Accordion$1.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
|
|
11
|
+
}
|
|
12
|
+
function AccordionTrigger({ className, children, ...props }) {
|
|
13
|
+
return (jsx(Accordion$1.Header, { className: "flex", children: jsxs(Accordion$1.Trigger, { "data-slot": "accordion-trigger", className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
|
|
14
|
+
}
|
|
15
|
+
function AccordionContent({ className, children, ...props }) {
|
|
16
|
+
return (jsx(Accordion$1.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
|
|
3
|
+
import { cn } from 'cn';
|
|
4
|
+
import { Button } from './button.js';
|
|
5
|
+
|
|
6
|
+
function AlertDialog({ ...props }) {
|
|
7
|
+
return jsx(AlertDialog$1.Root, { "data-slot": "alert-dialog", ...props });
|
|
8
|
+
}
|
|
9
|
+
function AlertDialogTrigger({ ...props }) {
|
|
10
|
+
return (jsx(AlertDialog$1.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
|
|
11
|
+
}
|
|
12
|
+
function AlertDialogPortal({ ...props }) {
|
|
13
|
+
return (jsx(AlertDialog$1.Portal, { "data-slot": "alert-dialog-portal", ...props }));
|
|
14
|
+
}
|
|
15
|
+
function AlertDialogOverlay({ className, ...props }) {
|
|
16
|
+
return (jsx(AlertDialog$1.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
|
|
17
|
+
}
|
|
18
|
+
function AlertDialogContent({ className, size = "default", ...props }) {
|
|
19
|
+
return (jsxs(AlertDialogPortal, { children: [jsx(AlertDialogOverlay, {}), jsx(AlertDialog$1.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props })] }));
|
|
20
|
+
}
|
|
21
|
+
function AlertDialogHeader({ className, ...props }) {
|
|
22
|
+
return (jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
function AlertDialogFooter({ className, ...props }) {
|
|
25
|
+
return (jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function AlertDialogMedia({ className, ...props }) {
|
|
28
|
+
return (jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function AlertDialogTitle({ className, ...props }) {
|
|
31
|
+
return (jsx(AlertDialog$1.Title, { "data-slot": "alert-dialog-title", className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
|
|
32
|
+
}
|
|
33
|
+
function AlertDialogDescription({ className, ...props }) {
|
|
34
|
+
return (jsx(AlertDialog$1.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
|
|
35
|
+
}
|
|
36
|
+
function AlertDialogAction({ className, ...props }) {
|
|
37
|
+
return (jsx(Button, { "data-slot": "alert-dialog-action", className: cn(className), ...props }));
|
|
38
|
+
}
|
|
39
|
+
function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
|
|
40
|
+
return (jsx(AlertDialog$1.Close, { "data-slot": "alert-dialog-cancel", className: cn(className), render: jsx(Button, { variant: variant, size: size }), ...props }));
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from 'cn';
|
|
4
|
+
|
|
5
|
+
const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: "bg-card text-card-foreground",
|
|
9
|
+
destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
defaultVariants: {
|
|
13
|
+
variant: "default",
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
function Alert({ className, variant, ...props }) {
|
|
17
|
+
return (jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
|
|
18
|
+
}
|
|
19
|
+
function AlertTitle({ className, ...props }) {
|
|
20
|
+
return (jsx("div", { "data-slot": "alert-title", className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function AlertDescription({ className, ...props }) {
|
|
23
|
+
return (jsx("div", { "data-slot": "alert-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), ...props }));
|
|
24
|
+
}
|
|
25
|
+
function AlertAction({ className, ...props }) {
|
|
26
|
+
return (jsx("div", { "data-slot": "alert-action", className: cn("absolute top-2 right-2", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { Alert, AlertAction, AlertDescription, AlertTitle };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cn } from 'cn';
|
|
3
|
+
|
|
4
|
+
function AspectRatio({ ratio, className, ...props }) {
|
|
5
|
+
return (jsx("div", { "data-slot": "aspect-ratio", style: {
|
|
6
|
+
"--ratio": ratio,
|
|
7
|
+
}, className: cn("relative aspect-(--ratio)", className), ...props }));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { AspectRatio };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
3
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { cn } from 'cn';
|
|
6
|
+
import { Button } from './button.js';
|
|
7
|
+
|
|
8
|
+
const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", {
|
|
9
|
+
variants: {
|
|
10
|
+
size: {
|
|
11
|
+
default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
|
|
12
|
+
sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
|
|
13
|
+
xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
|
|
14
|
+
},
|
|
15
|
+
orientation: {
|
|
16
|
+
horizontal: "min-w-40 items-center",
|
|
17
|
+
vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
|
|
22
|
+
return (jsx("div", { "data-slot": "attachment", "data-state": state, "data-size": size, "data-orientation": orientation, className: cn(attachmentVariants({ size, orientation }), className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
|
|
25
|
+
variants: {
|
|
26
|
+
variant: {
|
|
27
|
+
icon: "",
|
|
28
|
+
image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
variant: "icon",
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
function AttachmentMedia({ className, variant = "icon", ...props }) {
|
|
36
|
+
return (jsx("div", { "data-slot": "attachment-media", "data-variant": variant, className: cn(attachmentMediaVariants({ variant }), className), ...props }));
|
|
37
|
+
}
|
|
38
|
+
function AttachmentContent({ className, ...props }) {
|
|
39
|
+
return (jsx("div", { "data-slot": "attachment-content", className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className), ...props }));
|
|
40
|
+
}
|
|
41
|
+
function AttachmentTitle({ className, ...props }) {
|
|
42
|
+
return (jsx("span", { "data-slot": "attachment-title", className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className), ...props }));
|
|
43
|
+
}
|
|
44
|
+
function AttachmentDescription({ className, ...props }) {
|
|
45
|
+
return (jsx("span", { "data-slot": "attachment-description", className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive", "max-w-full", className), ...props }));
|
|
46
|
+
}
|
|
47
|
+
function AttachmentActions({ className, ...props }) {
|
|
48
|
+
return (jsx("div", { "data-slot": "attachment-actions", className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className), ...props }));
|
|
49
|
+
}
|
|
50
|
+
function AttachmentAction({ className, variant, size = "icon-xs", ...props }) {
|
|
51
|
+
return (jsx(Button, { "data-slot": "attachment-action", variant: variant ?? "ghost", size: size, className: cn(className), ...props }));
|
|
52
|
+
}
|
|
53
|
+
function AttachmentTrigger({ className, render, type, ...props }) {
|
|
54
|
+
return useRender({
|
|
55
|
+
defaultTagName: "button",
|
|
56
|
+
props: mergeProps({
|
|
57
|
+
type: render ? type : (type ?? "button"),
|
|
58
|
+
className: cn("absolute inset-0 z-10 outline-none", className),
|
|
59
|
+
}, props),
|
|
60
|
+
render,
|
|
61
|
+
state: {
|
|
62
|
+
slot: "attachment-trigger",
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
function AttachmentGroup({ className, ...props }) {
|
|
67
|
+
return (jsx("div", { "data-slot": "attachment-group", className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className), ...props }));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
|
|
3
|
+
import { cn } from 'cn';
|
|
4
|
+
|
|
5
|
+
function Avatar({ className, size = "default", ...props }) {
|
|
6
|
+
return (jsx(Avatar$1.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
|
|
7
|
+
}
|
|
8
|
+
function AvatarImage({ className, ...props }) {
|
|
9
|
+
return (jsx(Avatar$1.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function AvatarFallback({ className, ...props }) {
|
|
12
|
+
return (jsx(Avatar$1.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function AvatarBadge({ className, ...props }) {
|
|
15
|
+
return (jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
|
|
16
|
+
}
|
|
17
|
+
function AvatarGroup({ className, ...props }) {
|
|
18
|
+
return (jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function AvatarGroupCount({ className, ...props }) {
|
|
21
|
+
return (jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from 'cn';
|
|
5
|
+
|
|
6
|
+
const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
10
|
+
secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
|
11
|
+
destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
|
12
|
+
outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
|
13
|
+
ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
|
14
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: "default",
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
function Badge({ className, variant = "default", render, ...props }) {
|
|
22
|
+
return useRender({
|
|
23
|
+
defaultTagName: "span",
|
|
24
|
+
props: mergeProps({
|
|
25
|
+
className: cn(badgeVariants({ variant }), className),
|
|
26
|
+
}, props),
|
|
27
|
+
render,
|
|
28
|
+
state: {
|
|
29
|
+
slot: "badge",
|
|
30
|
+
variant,
|
|
31
|
+
},
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
3
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
4
|
+
import { cn } from 'cn';
|
|
5
|
+
import { MoreHorizontalIcon, ChevronRightIcon } from 'lucide-react';
|
|
6
|
+
|
|
7
|
+
function Breadcrumb({ className, ...props }) {
|
|
8
|
+
return (jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props }));
|
|
9
|
+
}
|
|
10
|
+
function BreadcrumbList({ className, ...props }) {
|
|
11
|
+
return (jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className), ...props }));
|
|
12
|
+
}
|
|
13
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
14
|
+
return (jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1", className), ...props }));
|
|
15
|
+
}
|
|
16
|
+
function BreadcrumbLink({ className, render, ...props }) {
|
|
17
|
+
return useRender({
|
|
18
|
+
defaultTagName: "a",
|
|
19
|
+
props: mergeProps({
|
|
20
|
+
className: cn("transition-colors hover:text-foreground", className),
|
|
21
|
+
}, props),
|
|
22
|
+
render,
|
|
23
|
+
state: {
|
|
24
|
+
slot: "breadcrumb-link",
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
29
|
+
return (jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
|
|
30
|
+
}
|
|
31
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
32
|
+
return (jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? (jsx(ChevronRightIcon, {})) }));
|
|
33
|
+
}
|
|
34
|
+
function BreadcrumbEllipsis({ className, ...props }) {
|
|
35
|
+
return (jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [jsx(MoreHorizontalIcon, {}), jsx("span", { className: "sr-only", children: "More" })] }));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
3
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { cn } from 'cn';
|
|
6
|
+
|
|
7
|
+
function BubbleGroup({ className, ...props }) {
|
|
8
|
+
return (jsx("div", { "data-slot": "bubble-group", className: cn("flex min-w-0 flex-col gap-2", className), ...props }));
|
|
9
|
+
}
|
|
10
|
+
const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
|
|
14
|
+
secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
|
|
15
|
+
muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
|
|
16
|
+
tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
|
|
17
|
+
outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
|
|
18
|
+
ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
|
|
19
|
+
destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "default",
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
function Bubble({ variant = "default", align = "start", className, ...props }) {
|
|
27
|
+
return (jsx("div", { "data-slot": "bubble", "data-variant": variant, "data-align": align, className: cn(bubbleVariants({ variant }), className), ...props }));
|
|
28
|
+
}
|
|
29
|
+
function BubbleContent({ className, render, ...props }) {
|
|
30
|
+
return useRender({
|
|
31
|
+
defaultTagName: "div",
|
|
32
|
+
props: mergeProps({
|
|
33
|
+
className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50", className),
|
|
34
|
+
}, props),
|
|
35
|
+
render,
|
|
36
|
+
state: {
|
|
37
|
+
slot: "bubble-content",
|
|
38
|
+
},
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
const bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
|
|
42
|
+
variants: {
|
|
43
|
+
side: {
|
|
44
|
+
top: "top-0 -translate-y-3/4",
|
|
45
|
+
bottom: "bottom-0 translate-y-3/4",
|
|
46
|
+
},
|
|
47
|
+
align: {
|
|
48
|
+
start: "left-3",
|
|
49
|
+
end: "right-3",
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
defaultVariants: {
|
|
53
|
+
side: "bottom",
|
|
54
|
+
align: "end",
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
|
|
58
|
+
return (jsx("div", { "data-slot": "bubble-reactions", "data-align": align, "data-side": side, className: cn(bubbleReactionsVariants({ side, align }), className), ...props }));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
3
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { cn } from 'cn';
|
|
6
|
+
import { Separator } from './separator.js';
|
|
7
|
+
|
|
8
|
+
const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
|
|
9
|
+
variants: {
|
|
10
|
+
orientation: {
|
|
11
|
+
horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
|
|
12
|
+
vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
orientation: "horizontal",
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
function ButtonGroup({ className, orientation, ...props }) {
|
|
20
|
+
return (jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function ButtonGroupText({ className, render, ...props }) {
|
|
23
|
+
return useRender({
|
|
24
|
+
defaultTagName: "div",
|
|
25
|
+
props: mergeProps({
|
|
26
|
+
className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
27
|
+
}, props),
|
|
28
|
+
render,
|
|
29
|
+
state: {
|
|
30
|
+
slot: "button-group-text",
|
|
31
|
+
},
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
35
|
+
return (jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|