@jackbernnie/hiyf 0.1.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/LICENSE +191 -0
- package/NOTICE +12 -0
- package/README.md +47 -0
- package/dist/components/Accordion.d.ts +38 -0
- package/dist/components/Accordion.js +38 -0
- package/dist/components/Alert.d.ts +29 -0
- package/dist/components/Alert.js +39 -0
- package/dist/components/AlertDialog.d.ts +37 -0
- package/dist/components/AlertDialog.js +38 -0
- package/dist/components/AspectRatio.d.ts +15 -0
- package/dist/components/AspectRatio.js +15 -0
- package/dist/components/Avatar.d.ts +26 -0
- package/dist/components/Avatar.js +13 -0
- package/dist/components/Badge.d.ts +18 -0
- package/dist/components/Badge.js +17 -0
- package/dist/components/Box.d.ts +13 -0
- package/dist/components/Box.js +52 -0
- package/dist/components/Breadcrumb.d.ts +33 -0
- package/dist/components/Breadcrumb.js +16 -0
- package/dist/components/Button.d.ts +40 -0
- package/dist/components/Button.js +33 -0
- package/dist/components/ButtonGroup.d.ts +18 -0
- package/dist/components/ButtonGroup.js +8 -0
- package/dist/components/Card.d.ts +46 -0
- package/dist/components/Card.js +24 -0
- package/dist/components/Carousel.d.ts +27 -0
- package/dist/components/Carousel.js +13 -0
- package/dist/components/Chart.d.ts +17 -0
- package/dist/components/Chart.js +94 -0
- package/dist/components/Checkbox.d.ts +26 -0
- package/dist/components/Checkbox.js +9 -0
- package/dist/components/Collapsible.d.ts +27 -0
- package/dist/components/Collapsible.js +26 -0
- package/dist/components/Combobox.d.ts +36 -0
- package/dist/components/Combobox.js +41 -0
- package/dist/components/Command.d.ts +37 -0
- package/dist/components/Command.js +32 -0
- package/dist/components/ContextMenu.d.ts +34 -0
- package/dist/components/ContextMenu.js +23 -0
- package/dist/components/Dialog.d.ts +20 -0
- package/dist/components/Dialog.js +34 -0
- package/dist/components/Drawer.d.ts +28 -0
- package/dist/components/Drawer.js +25 -0
- package/dist/components/DropdownMenu.d.ts +42 -0
- package/dist/components/DropdownMenu.js +32 -0
- package/dist/components/Empty.d.ts +28 -0
- package/dist/components/Empty.js +15 -0
- package/dist/components/Field.d.ts +30 -0
- package/dist/components/Field.js +13 -0
- package/dist/components/Grid.d.ts +32 -0
- package/dist/components/Grid.js +37 -0
- package/dist/components/GridItem.d.ts +30 -0
- package/dist/components/GridItem.js +40 -0
- package/dist/components/HoverCard.d.ts +22 -0
- package/dist/components/HoverCard.js +12 -0
- package/dist/components/Input.d.ts +34 -0
- package/dist/components/Input.js +8 -0
- package/dist/components/InputGroup.d.ts +28 -0
- package/dist/components/InputGroup.js +13 -0
- package/dist/components/InputOTP.d.ts +26 -0
- package/dist/components/InputOTP.js +25 -0
- package/dist/components/Kbd.d.ts +26 -0
- package/dist/components/Kbd.js +11 -0
- package/dist/components/Label.d.ts +20 -0
- package/dist/components/Label.js +17 -0
- package/dist/components/Menubar.d.ts +35 -0
- package/dist/components/Menubar.js +19 -0
- package/dist/components/NativeSelect.d.ts +33 -0
- package/dist/components/NativeSelect.js +37 -0
- package/dist/components/NavigationMenu.d.ts +32 -0
- package/dist/components/NavigationMenu.js +14 -0
- package/dist/components/Pagination.d.ts +28 -0
- package/dist/components/Pagination.js +62 -0
- package/dist/components/Popover.d.ts +28 -0
- package/dist/components/Popover.js +19 -0
- package/dist/components/Progress.d.ts +25 -0
- package/dist/components/Progress.js +37 -0
- package/dist/components/RadioGroup.d.ts +35 -0
- package/dist/components/RadioGroup.js +44 -0
- package/dist/components/Resizable.d.ts +31 -0
- package/dist/components/Resizable.js +17 -0
- package/dist/components/ScrollArea.d.ts +8 -0
- package/dist/components/ScrollArea.js +14 -0
- package/dist/components/Select.d.ts +35 -0
- package/dist/components/Select.js +33 -0
- package/dist/components/Separator.d.ts +10 -0
- package/dist/components/Separator.js +30 -0
- package/dist/components/Sheet.d.ts +31 -0
- package/dist/components/Sheet.js +26 -0
- package/dist/components/Sidebar.d.ts +52 -0
- package/dist/components/Sidebar.js +96 -0
- package/dist/components/Skeleton.d.ts +40 -0
- package/dist/components/Skeleton.js +42 -0
- package/dist/components/Slider.d.ts +26 -0
- package/dist/components/Slider.js +9 -0
- package/dist/components/Spinner.d.ts +7 -0
- package/dist/components/Spinner.js +13 -0
- package/dist/components/Status.d.ts +30 -0
- package/dist/components/Status.js +27 -0
- package/dist/components/Switch.d.ts +27 -0
- package/dist/components/Switch.js +9 -0
- package/dist/components/Table.d.ts +39 -0
- package/dist/components/Table.js +22 -0
- package/dist/components/Tabs.d.ts +32 -0
- package/dist/components/Tabs.js +21 -0
- package/dist/components/Text.d.ts +2 -0
- package/dist/components/Text.js +5 -0
- package/dist/components/Textarea.d.ts +32 -0
- package/dist/components/Textarea.js +15 -0
- package/dist/components/Toaster.d.ts +30 -0
- package/dist/components/Toaster.js +9 -0
- package/dist/components/Toggle.d.ts +34 -0
- package/dist/components/Toggle.js +31 -0
- package/dist/components/ToggleGroup.d.ts +46 -0
- package/dist/components/ToggleGroup.js +26 -0
- package/dist/components/Tooltip.d.ts +25 -0
- package/dist/components/Tooltip.js +12 -0
- package/dist/components/ui/accordion.d.ts +7 -0
- package/dist/components/ui/accordion.js +81 -0
- package/dist/components/ui/alert-dialog.d.ts +18 -0
- package/dist/components/ui/alert-dialog.js +154 -0
- package/dist/components/ui/alert.d.ts +10 -0
- package/dist/components/ui/alert.js +64 -0
- package/dist/components/ui/aspect-ratio.d.ts +3 -0
- package/dist/components/ui/aspect-ratio.js +11 -0
- package/dist/components/ui/avatar.d.ts +11 -0
- package/dist/components/ui/avatar.js +57 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/badge.js +42 -0
- package/dist/components/ui/breadcrumb.d.ts +11 -0
- package/dist/components/ui/breadcrumb.js +87 -0
- package/dist/components/ui/button-group.d.ts +11 -0
- package/dist/components/ui/button-group.js +37 -0
- package/dist/components/ui/button.d.ts +10 -0
- package/dist/components/ui/button.js +55 -0
- package/dist/components/ui/card.d.ts +11 -0
- package/dist/components/ui/card.js +82 -0
- package/dist/components/ui/carousel.d.ts +28 -0
- package/dist/components/ui/carousel.js +196 -0
- package/dist/components/ui/chart.d.ts +44 -0
- package/dist/components/ui/chart.js +198 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/checkbox.js +33 -0
- package/dist/components/ui/collapsible.d.ts +5 -0
- package/dist/components/ui/collapsible.js +33 -0
- package/dist/components/ui/combobox.d.ts +24 -0
- package/dist/components/ui/combobox.js +160 -0
- package/dist/components/ui/command.d.ts +18 -0
- package/dist/components/ui/command.js +142 -0
- package/dist/components/ui/context-menu.d.ts +31 -0
- package/dist/components/ui/context-menu.js +73 -0
- package/dist/components/ui/dialog.d.ts +17 -0
- package/dist/components/ui/dialog.js +138 -0
- package/dist/components/ui/direction.d.ts +7 -0
- package/dist/components/ui/direction.js +14 -0
- package/dist/components/ui/drawer.d.ts +13 -0
- package/dist/components/ui/drawer.js +101 -0
- package/dist/components/ui/dropdown-menu.d.ts +29 -0
- package/dist/components/ui/dropdown-menu.js +98 -0
- package/dist/components/ui/empty.d.ts +11 -0
- package/dist/components/ui/empty.js +97 -0
- package/dist/components/ui/field.d.ts +24 -0
- package/dist/components/ui/field.js +110 -0
- package/dist/components/ui/hover-card.d.ts +6 -0
- package/dist/components/ui/hover-card.js +37 -0
- package/dist/components/ui/input-group.d.ts +16 -0
- package/dist/components/ui/input-group.js +111 -0
- package/dist/components/ui/input-otp.d.ts +11 -0
- package/dist/components/ui/input-otp.js +66 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/input.js +19 -0
- package/dist/components/ui/item.d.ts +23 -0
- package/dist/components/ui/item.js +181 -0
- package/dist/components/ui/kbd.d.ts +3 -0
- package/dist/components/ui/kbd.js +28 -0
- package/dist/components/ui/label.d.ts +4 -0
- package/dist/components/ui/label.js +23 -0
- package/dist/components/ui/menubar.d.ts +30 -0
- package/dist/components/ui/menubar.js +119 -0
- package/dist/components/ui/native-select.d.ts +8 -0
- package/dist/components/ui/native-select.js +49 -0
- package/dist/components/ui/navigation-menu.d.ts +14 -0
- package/dist/components/ui/navigation-menu.js +139 -0
- package/dist/components/ui/pagination.d.ts +17 -0
- package/dist/components/ui/pagination.js +120 -0
- package/dist/components/ui/popover.d.ts +10 -0
- package/dist/components/ui/popover.js +37 -0
- package/dist/components/ui/progress.d.ts +4 -0
- package/dist/components/ui/radio-group.d.ts +5 -0
- package/dist/components/ui/radio-group.js +44 -0
- package/dist/components/ui/resizable.d.ts +7 -0
- package/dist/components/ui/resizable.js +44 -0
- package/dist/components/ui/scroll-area.d.ts +5 -0
- package/dist/components/ui/scroll-area.js +59 -0
- package/dist/components/ui/select.d.ts +15 -0
- package/dist/components/ui/select.js +131 -0
- package/dist/components/ui/separator.d.ts +4 -0
- package/dist/components/ui/separator.js +27 -0
- package/dist/components/ui/sheet.d.ts +14 -0
- package/dist/components/ui/sheet.js +113 -0
- package/dist/components/ui/sidebar.d.ts +69 -0
- package/dist/components/ui/sidebar.js +459 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/slider.d.ts +4 -0
- package/dist/components/ui/slider.js +60 -0
- package/dist/components/ui/sonner.d.ts +3 -0
- package/dist/components/ui/sonner.js +38 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/spinner.js +13 -0
- package/dist/components/ui/switch.d.ts +6 -0
- package/dist/components/ui/switch.js +32 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/components/ui/table.js +95 -0
- package/dist/components/ui/tabs.d.ts +11 -0
- package/dist/components/ui/tabs.js +87 -0
- package/dist/components/ui/textarea.d.ts +3 -0
- package/dist/components/ui/textarea.js +18 -0
- package/dist/components/ui/toggle-group.d.ts +10 -0
- package/dist/components/ui/toggle-group.js +76 -0
- package/dist/components/ui/toggle.d.ts +9 -0
- package/dist/components/ui/toggle.js +43 -0
- package/dist/components/ui/tooltip.d.ts +7 -0
- package/dist/components/ui/tooltip.js +53 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +18 -0
- package/dist/index.d.ts +122 -0
- package/dist/index.js +61 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +8 -0
- package/dist/primitives/createText.d.ts +103 -0
- package/dist/primitives/createText.js +183 -0
- package/dist/primitives/resolveProperties.d.ts +17 -0
- package/dist/stylex.css +1450 -0
- package/dist/tokens/animations.d.ts +126 -0
- package/dist/tokens/animations.js +61 -0
- package/dist/tokens/tokens.stylex.d.ts +85 -0
- package/dist/tokens/tokens.stylex.js +81 -0
- package/dist/utils/box-styles.d.ts +1117 -0
- package/dist/utils/box-styles.js +1455 -0
- package/dist/utils/grid.d.ts +4 -0
- package/dist/utils/resolvers.d.ts +10 -0
- package/dist/utils/resolvers.js +356 -0
- package/dist/utils/types.d.ts +133 -0
- package/package.json +80 -0
- package/src/theme.css +206 -0
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { cn } from '../../lib/utils.js';
|
|
6
|
+
import { Label } from './label.js';
|
|
7
|
+
import 'radix-ui';
|
|
8
|
+
|
|
9
|
+
const fieldVariants = cva(
|
|
10
|
+
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
|
11
|
+
{
|
|
12
|
+
variants: {
|
|
13
|
+
orientation: {
|
|
14
|
+
vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
|
|
15
|
+
horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
16
|
+
responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
defaultVariants: {
|
|
20
|
+
orientation: "vertical"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
function Field({
|
|
25
|
+
className,
|
|
26
|
+
orientation = "vertical",
|
|
27
|
+
...props
|
|
28
|
+
}) {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
role: "group",
|
|
33
|
+
"data-slot": "field",
|
|
34
|
+
"data-orientation": orientation,
|
|
35
|
+
className: cn(fieldVariants({ orientation }), className),
|
|
36
|
+
...props
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
function FieldLabel({
|
|
41
|
+
className,
|
|
42
|
+
...props
|
|
43
|
+
}) {
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
Label,
|
|
46
|
+
{
|
|
47
|
+
"data-slot": "field-label",
|
|
48
|
+
className: cn(
|
|
49
|
+
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
|
|
50
|
+
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
|
|
51
|
+
className
|
|
52
|
+
),
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
function FieldDescription({ className, ...props }) {
|
|
58
|
+
return /* @__PURE__ */ jsx(
|
|
59
|
+
"p",
|
|
60
|
+
{
|
|
61
|
+
"data-slot": "field-description",
|
|
62
|
+
className: cn(
|
|
63
|
+
"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
|
|
64
|
+
"last:mt-0 nth-last-2:-mt-1",
|
|
65
|
+
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
66
|
+
className
|
|
67
|
+
),
|
|
68
|
+
...props
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
function FieldError({
|
|
73
|
+
className,
|
|
74
|
+
children,
|
|
75
|
+
errors,
|
|
76
|
+
...props
|
|
77
|
+
}) {
|
|
78
|
+
const content = useMemo(() => {
|
|
79
|
+
if (children) {
|
|
80
|
+
return children;
|
|
81
|
+
}
|
|
82
|
+
if (!errors?.length) {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
const uniqueErrors = [
|
|
86
|
+
...new Map(errors.map((error) => [error?.message, error])).values()
|
|
87
|
+
];
|
|
88
|
+
if (uniqueErrors?.length == 1) {
|
|
89
|
+
return uniqueErrors[0]?.message;
|
|
90
|
+
}
|
|
91
|
+
return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
|
|
92
|
+
(error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
|
|
93
|
+
) });
|
|
94
|
+
}, [children, errors]);
|
|
95
|
+
if (!content) {
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
return /* @__PURE__ */ jsx(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
role: "alert",
|
|
102
|
+
"data-slot": "field-error",
|
|
103
|
+
className: cn("text-sm font-normal text-destructive", className),
|
|
104
|
+
...props,
|
|
105
|
+
children: content
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export { Field, FieldDescription, FieldError, FieldLabel };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { HoverCard as HoverCardPrimitive } from "radix-ui";
|
|
3
|
+
declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
|
|
4
|
+
declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): React.JSX.Element;
|
|
6
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { HoverCard as HoverCard$1 } from 'radix-ui';
|
|
4
|
+
import { cn } from '../../lib/utils.js';
|
|
5
|
+
|
|
6
|
+
function HoverCard({
|
|
7
|
+
...props
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Root, { "data-slot": "hover-card", ...props });
|
|
10
|
+
}
|
|
11
|
+
function HoverCardTrigger({
|
|
12
|
+
...props
|
|
13
|
+
}) {
|
|
14
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
15
|
+
}
|
|
16
|
+
function HoverCardContent({
|
|
17
|
+
className,
|
|
18
|
+
align = "center",
|
|
19
|
+
sideOffset = 4,
|
|
20
|
+
...props
|
|
21
|
+
}) {
|
|
22
|
+
return /* @__PURE__ */ jsx(HoverCard$1.Portal, { "data-slot": "hover-card-portal", children: /* @__PURE__ */ jsx(
|
|
23
|
+
HoverCard$1.Content,
|
|
24
|
+
{
|
|
25
|
+
"data-slot": "hover-card-content",
|
|
26
|
+
align,
|
|
27
|
+
sideOffset,
|
|
28
|
+
className: cn(
|
|
29
|
+
"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
|
|
30
|
+
className
|
|
31
|
+
),
|
|
32
|
+
...props
|
|
33
|
+
}
|
|
34
|
+
) });
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export { HoverCard, HoverCardContent, HoverCardTrigger };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Button } from "./button";
|
|
4
|
+
declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
6
|
+
align?: "block-start" | "block-end" | "inline-start" | "inline-end" | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
|
|
9
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
10
|
+
size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
|
|
13
|
+
declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
14
|
+
declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
|
|
15
|
+
declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
|
|
16
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from '../../lib/utils.js';
|
|
5
|
+
import { Button } from './button.js';
|
|
6
|
+
import { Input } from './input.js';
|
|
7
|
+
|
|
8
|
+
function InputGroup({ className, ...props }) {
|
|
9
|
+
return /* @__PURE__ */ jsx(
|
|
10
|
+
"div",
|
|
11
|
+
{
|
|
12
|
+
"data-slot": "input-group",
|
|
13
|
+
role: "group",
|
|
14
|
+
className: cn(
|
|
15
|
+
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
|
16
|
+
className
|
|
17
|
+
),
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
const inputGroupAddonVariants = cva(
|
|
23
|
+
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
|
24
|
+
{
|
|
25
|
+
variants: {
|
|
26
|
+
align: {
|
|
27
|
+
"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
|
|
28
|
+
"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
|
|
29
|
+
"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
30
|
+
"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
defaultVariants: {
|
|
34
|
+
align: "inline-start"
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
function InputGroupAddon({
|
|
39
|
+
className,
|
|
40
|
+
align = "inline-start",
|
|
41
|
+
...props
|
|
42
|
+
}) {
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
role: "group",
|
|
47
|
+
"data-slot": "input-group-addon",
|
|
48
|
+
"data-align": align,
|
|
49
|
+
className: cn(inputGroupAddonVariants({ align }), className),
|
|
50
|
+
onClick: (e) => {
|
|
51
|
+
if (e.target.closest("button")) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
|
55
|
+
},
|
|
56
|
+
...props
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
const inputGroupButtonVariants = cva(
|
|
61
|
+
"flex items-center gap-2 text-sm shadow-none",
|
|
62
|
+
{
|
|
63
|
+
variants: {
|
|
64
|
+
size: {
|
|
65
|
+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
66
|
+
sm: "",
|
|
67
|
+
"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
|
68
|
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
size: "xs"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
function InputGroupButton({
|
|
77
|
+
className,
|
|
78
|
+
type = "button",
|
|
79
|
+
variant = "ghost",
|
|
80
|
+
size = "xs",
|
|
81
|
+
...props
|
|
82
|
+
}) {
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
Button,
|
|
85
|
+
{
|
|
86
|
+
type,
|
|
87
|
+
"data-size": size,
|
|
88
|
+
variant,
|
|
89
|
+
className: cn(inputGroupButtonVariants({ size }), className),
|
|
90
|
+
...props
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
function InputGroupInput({
|
|
95
|
+
className,
|
|
96
|
+
...props
|
|
97
|
+
}) {
|
|
98
|
+
return /* @__PURE__ */ jsx(
|
|
99
|
+
Input,
|
|
100
|
+
{
|
|
101
|
+
"data-slot": "input-group-control",
|
|
102
|
+
className: cn(
|
|
103
|
+
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
|
|
104
|
+
className
|
|
105
|
+
),
|
|
106
|
+
...props
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { OTPInput } from "input-otp";
|
|
3
|
+
declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
|
|
4
|
+
containerClassName?: string;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
7
|
+
declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
|
|
8
|
+
index: number;
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { OTPInput, OTPInputContext } from 'input-otp';
|
|
5
|
+
import { cn } from '../../lib/utils.js';
|
|
6
|
+
import '@hugeicons/react';
|
|
7
|
+
import '@hugeicons/core-free-icons';
|
|
8
|
+
|
|
9
|
+
function InputOTP({
|
|
10
|
+
className,
|
|
11
|
+
containerClassName,
|
|
12
|
+
...props
|
|
13
|
+
}) {
|
|
14
|
+
return /* @__PURE__ */ jsx(
|
|
15
|
+
OTPInput,
|
|
16
|
+
{
|
|
17
|
+
"data-slot": "input-otp",
|
|
18
|
+
containerClassName: cn(
|
|
19
|
+
"cn-input-otp flex items-center has-disabled:opacity-50",
|
|
20
|
+
containerClassName
|
|
21
|
+
),
|
|
22
|
+
spellCheck: false,
|
|
23
|
+
className: cn("disabled:cursor-not-allowed", className),
|
|
24
|
+
...props
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
function InputOTPGroup({ className, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
"data-slot": "input-otp-group",
|
|
33
|
+
className: cn(
|
|
34
|
+
"flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
|
|
35
|
+
className
|
|
36
|
+
),
|
|
37
|
+
...props
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function InputOTPSlot({
|
|
42
|
+
index,
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}) {
|
|
46
|
+
const inputOTPContext = React.useContext(OTPInputContext);
|
|
47
|
+
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
48
|
+
return /* @__PURE__ */ jsxs(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
"data-slot": "input-otp-slot",
|
|
52
|
+
"data-active": isActive,
|
|
53
|
+
className: cn(
|
|
54
|
+
"relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
|
|
55
|
+
className
|
|
56
|
+
),
|
|
57
|
+
...props,
|
|
58
|
+
children: [
|
|
59
|
+
char,
|
|
60
|
+
hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
|
|
4
|
+
function Input({ className, type, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"input",
|
|
7
|
+
{
|
|
8
|
+
type,
|
|
9
|
+
"data-slot": "input",
|
|
10
|
+
className: cn(
|
|
11
|
+
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
12
|
+
className
|
|
13
|
+
),
|
|
14
|
+
...props
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export { Input };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
import { Separator } from "./separator";
|
|
4
|
+
declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
5
|
+
declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
6
|
+
declare const itemVariants: (props?: ({
|
|
7
|
+
variant?: "default" | "outline" | "muted" | null | undefined;
|
|
8
|
+
size?: "default" | "xs" | "sm" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
|
|
11
|
+
asChild?: boolean;
|
|
12
|
+
}): React.JSX.Element;
|
|
13
|
+
declare const itemMediaVariants: (props?: ({
|
|
14
|
+
variant?: "default" | "image" | "icon" | null | undefined;
|
|
15
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
|
+
declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
|
|
17
|
+
declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
18
|
+
declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
19
|
+
declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
|
|
20
|
+
declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
21
|
+
declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
22
|
+
declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
23
|
+
export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { Slot } from 'radix-ui';
|
|
4
|
+
import { cn } from '../../lib/utils.js';
|
|
5
|
+
import { Separator } from './separator.js';
|
|
6
|
+
|
|
7
|
+
function ItemGroup({ className, ...props }) {
|
|
8
|
+
return /* @__PURE__ */ jsx(
|
|
9
|
+
"div",
|
|
10
|
+
{
|
|
11
|
+
role: "list",
|
|
12
|
+
"data-slot": "item-group",
|
|
13
|
+
className: cn(
|
|
14
|
+
"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
...props
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
function ItemSeparator({
|
|
22
|
+
className,
|
|
23
|
+
...props
|
|
24
|
+
}) {
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
|
+
Separator,
|
|
27
|
+
{
|
|
28
|
+
"data-slot": "item-separator",
|
|
29
|
+
orientation: "horizontal",
|
|
30
|
+
className: cn("my-2", className),
|
|
31
|
+
...props
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
const itemVariants = cva(
|
|
36
|
+
"group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
|
|
37
|
+
{
|
|
38
|
+
variants: {
|
|
39
|
+
variant: {
|
|
40
|
+
default: "border-transparent",
|
|
41
|
+
outline: "border-border",
|
|
42
|
+
muted: "border-transparent bg-muted/50"
|
|
43
|
+
},
|
|
44
|
+
size: {
|
|
45
|
+
default: "gap-3.5 px-4 py-3.5",
|
|
46
|
+
sm: "gap-2.5 px-3 py-2.5",
|
|
47
|
+
xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
defaultVariants: {
|
|
51
|
+
variant: "default",
|
|
52
|
+
size: "default"
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
function Item({
|
|
57
|
+
className,
|
|
58
|
+
variant = "default",
|
|
59
|
+
size = "default",
|
|
60
|
+
asChild = false,
|
|
61
|
+
...props
|
|
62
|
+
}) {
|
|
63
|
+
const Comp = asChild ? Slot.Root : "div";
|
|
64
|
+
return /* @__PURE__ */ jsx(
|
|
65
|
+
Comp,
|
|
66
|
+
{
|
|
67
|
+
"data-slot": "item",
|
|
68
|
+
"data-variant": variant,
|
|
69
|
+
"data-size": size,
|
|
70
|
+
className: cn(itemVariants({ variant, size, className })),
|
|
71
|
+
...props
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
const itemMediaVariants = cva(
|
|
76
|
+
"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
|
|
77
|
+
{
|
|
78
|
+
variants: {
|
|
79
|
+
variant: {
|
|
80
|
+
default: "bg-transparent",
|
|
81
|
+
icon: "[&_svg:not([class*='size-'])]:size-4",
|
|
82
|
+
image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
defaultVariants: {
|
|
86
|
+
variant: "default"
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
function ItemMedia({
|
|
91
|
+
className,
|
|
92
|
+
variant = "default",
|
|
93
|
+
...props
|
|
94
|
+
}) {
|
|
95
|
+
return /* @__PURE__ */ jsx(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
"data-slot": "item-media",
|
|
99
|
+
"data-variant": variant,
|
|
100
|
+
className: cn(itemMediaVariants({ variant, className })),
|
|
101
|
+
...props
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
function ItemContent({ className, ...props }) {
|
|
106
|
+
return /* @__PURE__ */ jsx(
|
|
107
|
+
"div",
|
|
108
|
+
{
|
|
109
|
+
"data-slot": "item-content",
|
|
110
|
+
className: cn(
|
|
111
|
+
"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
...props
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
}
|
|
118
|
+
function ItemTitle({ className, ...props }) {
|
|
119
|
+
return /* @__PURE__ */ jsx(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
"data-slot": "item-title",
|
|
123
|
+
className: cn(
|
|
124
|
+
"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
|
|
125
|
+
className
|
|
126
|
+
),
|
|
127
|
+
...props
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
function ItemDescription({ className, ...props }) {
|
|
132
|
+
return /* @__PURE__ */ jsx(
|
|
133
|
+
"p",
|
|
134
|
+
{
|
|
135
|
+
"data-slot": "item-description",
|
|
136
|
+
className: cn(
|
|
137
|
+
"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
138
|
+
className
|
|
139
|
+
),
|
|
140
|
+
...props
|
|
141
|
+
}
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
function ItemActions({ className, ...props }) {
|
|
145
|
+
return /* @__PURE__ */ jsx(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
"data-slot": "item-actions",
|
|
149
|
+
className: cn("flex items-center gap-2", className),
|
|
150
|
+
...props
|
|
151
|
+
}
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
function ItemHeader({ className, ...props }) {
|
|
155
|
+
return /* @__PURE__ */ jsx(
|
|
156
|
+
"div",
|
|
157
|
+
{
|
|
158
|
+
"data-slot": "item-header",
|
|
159
|
+
className: cn(
|
|
160
|
+
"flex basis-full items-center justify-between gap-2",
|
|
161
|
+
className
|
|
162
|
+
),
|
|
163
|
+
...props
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
function ItemFooter({ className, ...props }) {
|
|
168
|
+
return /* @__PURE__ */ jsx(
|
|
169
|
+
"div",
|
|
170
|
+
{
|
|
171
|
+
"data-slot": "item-footer",
|
|
172
|
+
className: cn(
|
|
173
|
+
"flex basis-full items-center justify-between gap-2",
|
|
174
|
+
className
|
|
175
|
+
),
|
|
176
|
+
...props
|
|
177
|
+
}
|
|
178
|
+
);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
|
|
4
|
+
function Kbd({ className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsx(
|
|
6
|
+
"kbd",
|
|
7
|
+
{
|
|
8
|
+
"data-slot": "kbd",
|
|
9
|
+
className: cn(
|
|
10
|
+
"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
|
|
11
|
+
className
|
|
12
|
+
),
|
|
13
|
+
...props
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
function KbdGroup({ className, ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
"kbd",
|
|
20
|
+
{
|
|
21
|
+
"data-slot": "kbd-group",
|
|
22
|
+
className: cn("inline-flex items-center gap-1", className),
|
|
23
|
+
...props
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { Kbd, KbdGroup };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { Label as Label$1 } from 'radix-ui';
|
|
4
|
+
import { cn } from '../../lib/utils.js';
|
|
5
|
+
|
|
6
|
+
function Label({
|
|
7
|
+
className,
|
|
8
|
+
...props
|
|
9
|
+
}) {
|
|
10
|
+
return /* @__PURE__ */ jsx(
|
|
11
|
+
Label$1.Root,
|
|
12
|
+
{
|
|
13
|
+
"data-slot": "label",
|
|
14
|
+
className: cn(
|
|
15
|
+
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
16
|
+
className
|
|
17
|
+
),
|
|
18
|
+
...props
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export { Label };
|