@codefast/ui 0.3.16-canary.1 → 0.3.16-canary.3
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/CHANGELOG.md +30 -0
- package/README.md +1 -1
- package/dist/components/accordion.mjs +2 -2
- package/dist/components/alert-dialog.d.mts +1 -1
- package/dist/components/alert-dialog.mjs +4 -4
- package/dist/components/alert.d.mts +3 -13
- package/dist/components/alert.mjs +3 -23
- package/dist/components/badge.d.mts +3 -15
- package/dist/components/badge.mjs +2 -44
- package/dist/components/breadcrumb.mjs +1 -1
- package/dist/components/button-group.d.mts +3 -13
- package/dist/components/button-group.mjs +3 -24
- package/dist/components/button.d.mts +3 -25
- package/dist/components/button.mjs +2 -72
- package/dist/components/calendar.mjs +2 -1
- package/dist/components/carousel.d.mts +1 -2
- package/dist/components/chart.d.mts +2 -4
- package/dist/components/checkbox.mjs +2 -2
- package/dist/components/context-menu.mjs +2 -2
- package/dist/components/dialog.d.mts +1 -1
- package/dist/components/dialog.mjs +4 -4
- package/dist/components/drawer.d.mts +1 -1
- package/dist/components/drawer.mjs +2 -2
- package/dist/components/dropdown-menu.mjs +2 -2
- package/dist/components/empty.d.mts +3 -13
- package/dist/components/empty.mjs +3 -18
- package/dist/components/field.d.mts +3 -14
- package/dist/components/field.mjs +3 -32
- package/dist/components/form.d.mts +2 -4
- package/dist/components/hover-card.mjs +1 -1
- package/dist/components/input-group.d.mts +4 -31
- package/dist/components/input-group.mjs +3 -90
- package/dist/components/input-number.mjs +4 -4
- package/dist/components/input-otp.mjs +2 -2
- package/dist/components/input.mjs +1 -1
- package/dist/components/item.d.mts +4 -29
- package/dist/components/item.mjs +3 -56
- package/dist/components/menubar.mjs +2 -2
- package/dist/components/native-select.mjs +1 -1
- package/dist/components/navigation-menu.d.mts +1 -6
- package/dist/components/navigation-menu.mjs +8 -15
- package/dist/components/pagination.d.mts +1 -1
- package/dist/components/pagination.mjs +1 -1
- package/dist/components/popover.mjs +1 -1
- package/dist/components/progress-circle.d.mts +3 -47
- package/dist/components/progress-circle.mjs +2 -47
- package/dist/components/progress.mjs +1 -1
- package/dist/components/radio-group.mjs +1 -1
- package/dist/components/radio.mjs +1 -1
- package/dist/components/scroll-area.d.mts +3 -19
- package/dist/components/scroll-area.mjs +4 -61
- package/dist/components/select.d.mts +1 -1
- package/dist/components/select.mjs +3 -3
- package/dist/components/separator.d.mts +3 -18
- package/dist/components/separator.mjs +3 -23
- package/dist/components/sheet.d.mts +6 -18
- package/dist/components/sheet.mjs +6 -49
- package/dist/components/sidebar.d.mts +4 -19
- package/dist/components/sidebar.mjs +10 -46
- package/dist/components/skeleton.mjs +1 -1
- package/dist/components/slider.mjs +1 -1
- package/dist/components/spinner.mjs +1 -1
- package/dist/components/switch.mjs +2 -2
- package/dist/components/table.mjs +1 -1
- package/dist/components/tabs.mjs +1 -1
- package/dist/components/textarea.mjs +1 -1
- package/dist/components/toggle-group.d.mts +3 -2
- package/dist/components/toggle-group.mjs +1 -1
- package/dist/components/toggle.d.mts +2 -21
- package/dist/components/toggle.mjs +2 -39
- package/dist/components/tooltip.mjs +1 -1
- package/dist/index.d.mts +31 -16
- package/dist/index.mjs +30 -15
- package/dist/lib/utils.d.mts +1 -12
- package/dist/lib/utils.mjs +1 -9
- package/dist/primitives/checkbox-group.d.mts +1 -2
- package/dist/primitives/input-number.d.mts +1 -2
- package/dist/primitives/input.d.mts +1 -2
- package/dist/primitives/progress-circle.d.mts +1 -2
- package/dist/variants/alert.d.mts +18 -0
- package/dist/variants/alert.mjs +25 -0
- package/dist/variants/badge.d.mts +20 -0
- package/dist/variants/badge.mjs +46 -0
- package/dist/variants/button-group.d.mts +18 -0
- package/dist/variants/button-group.mjs +26 -0
- package/dist/variants/button.d.mts +30 -0
- package/dist/variants/button.mjs +76 -0
- package/dist/variants/empty.d.mts +18 -0
- package/dist/variants/empty.mjs +20 -0
- package/dist/variants/field.d.mts +19 -0
- package/dist/variants/field.mjs +34 -0
- package/dist/variants/input-group.d.mts +43 -0
- package/dist/variants/input-group.mjs +93 -0
- package/dist/variants/item.d.mts +37 -0
- package/dist/variants/item.mjs +60 -0
- package/dist/variants/navigation-menu.d.mts +13 -0
- package/dist/variants/navigation-menu.mjs +12 -0
- package/dist/variants/progress-circle.d.mts +52 -0
- package/dist/variants/progress-circle.mjs +49 -0
- package/dist/variants/scroll-area.d.mts +24 -0
- package/dist/variants/scroll-area.mjs +63 -0
- package/dist/variants/separator.d.mts +23 -0
- package/dist/variants/separator.mjs +25 -0
- package/dist/variants/sheet.d.mts +20 -0
- package/dist/variants/sheet.mjs +50 -0
- package/dist/variants/sidebar.d.mts +23 -0
- package/dist/variants/sidebar.mjs +42 -0
- package/dist/variants/toggle.d.mts +23 -0
- package/dist/variants/toggle.mjs +43 -0
- package/package.json +169 -21
- package/src/components/accordion.tsx +156 -0
- package/src/components/alert-dialog.tsx +314 -0
- package/src/components/alert.tsx +86 -0
- package/src/components/aspect-ratio.tsx +28 -0
- package/src/components/avatar.tsx +84 -0
- package/src/components/badge.tsx +38 -0
- package/src/components/breadcrumb.tsx +197 -0
- package/src/components/button-group.tsx +107 -0
- package/src/components/button.tsx +66 -0
- package/src/components/calendar.tsx +277 -0
- package/src/components/card.tsx +175 -0
- package/src/components/carousel.tsx +367 -0
- package/src/components/chart.tsx +587 -0
- package/src/components/checkbox-cards.tsx +92 -0
- package/src/components/checkbox-group.tsx +83 -0
- package/src/components/checkbox.tsx +65 -0
- package/src/components/collapsible.tsx +60 -0
- package/src/components/command.tsx +311 -0
- package/src/components/context-menu.tsx +489 -0
- package/src/components/dialog.tsx +295 -0
- package/src/components/drawer.tsx +271 -0
- package/src/components/dropdown-menu.tsx +498 -0
- package/src/components/empty.tsx +169 -0
- package/src/components/field.tsx +362 -0
- package/src/components/form.tsx +300 -0
- package/src/components/hover-card.tsx +116 -0
- package/src/components/input-group.tsx +224 -0
- package/src/components/input-number.tsx +161 -0
- package/src/components/input-otp.tsx +151 -0
- package/src/components/input-password.tsx +74 -0
- package/src/components/input-search.tsx +98 -0
- package/src/components/input.tsx +52 -0
- package/src/components/item.tsx +280 -0
- package/src/components/kbd.tsx +59 -0
- package/src/components/label.tsx +44 -0
- package/src/components/menubar.tsx +531 -0
- package/src/components/native-select.tsx +96 -0
- package/src/components/navigation-menu.tsx +295 -0
- package/src/components/pagination.tsx +204 -0
- package/src/components/popover.tsx +139 -0
- package/src/components/progress-circle.tsx +203 -0
- package/src/components/progress.tsx +54 -0
- package/src/components/radio-cards.tsx +85 -0
- package/src/components/radio-group.tsx +79 -0
- package/src/components/radio.tsx +61 -0
- package/src/components/resizable.tsx +99 -0
- package/src/components/scroll-area.tsx +115 -0
- package/src/components/select.tsx +319 -0
- package/src/components/separator.tsx +74 -0
- package/src/components/sheet.tsx +278 -0
- package/src/components/sidebar.tsx +1056 -0
- package/src/components/skeleton.tsx +37 -0
- package/src/components/slider.tsx +95 -0
- package/src/components/sonner.tsx +47 -0
- package/src/components/spinner.tsx +75 -0
- package/src/components/switch.tsx +66 -0
- package/src/components/table.tsx +200 -0
- package/src/components/tabs.tsx +128 -0
- package/src/components/textarea.tsx +49 -0
- package/src/components/toggle-group.tsx +141 -0
- package/src/components/toggle.tsx +39 -0
- package/src/components/tooltip.tsx +141 -0
- package/src/css/amber.css +59 -22
- package/src/css/blue.css +59 -22
- package/src/css/cyan.css +59 -22
- package/src/css/emerald.css +59 -22
- package/src/css/fuchsia.css +59 -22
- package/src/css/gray.css +59 -22
- package/src/css/green.css +59 -22
- package/src/css/indigo.css +59 -22
- package/src/css/lime.css +59 -22
- package/src/css/neutral.css +59 -22
- package/src/css/orange.css +59 -22
- package/src/css/pink.css +59 -22
- package/src/css/preset.css +32 -13
- package/src/css/purple.css +59 -22
- package/src/css/red.css +59 -22
- package/src/css/rose.css +59 -22
- package/src/css/sky.css +59 -22
- package/src/css/slate.css +59 -22
- package/src/css/stone.css +59 -22
- package/src/css/teal.css +59 -22
- package/src/css/violet.css +59 -22
- package/src/css/yellow.css +59 -22
- package/src/css/zinc.css +59 -22
- package/src/hooks/use-animated-value.ts +97 -0
- package/src/hooks/use-copy-to-clipboard.ts +63 -0
- package/src/hooks/use-is-mobile.ts +27 -0
- package/src/hooks/use-media-query.ts +71 -0
- package/src/hooks/use-mutation-observer.ts +54 -0
- package/src/hooks/use-pagination.ts +166 -0
- package/src/index.ts +720 -0
- package/src/lib/utils.ts +5 -0
- package/src/primitives/checkbox-group.tsx +360 -0
- package/src/primitives/input-number.tsx +1013 -0
- package/src/primitives/input.tsx +243 -0
- package/src/primitives/progress-circle.tsx +537 -0
- package/src/variants/alert.ts +45 -0
- package/src/variants/badge.ts +66 -0
- package/src/variants/button-group.ts +49 -0
- package/src/variants/button.ts +93 -0
- package/src/variants/empty.ts +43 -0
- package/src/variants/field.ts +50 -0
- package/src/variants/input-group.ts +132 -0
- package/src/variants/item.ts +90 -0
- package/src/variants/navigation-menu.ts +32 -0
- package/src/variants/progress-circle.ts +47 -0
- package/src/variants/scroll-area.ts +79 -0
- package/src/variants/separator.ts +41 -0
- package/src/variants/sheet.ts +70 -0
- package/src/variants/sidebar.ts +61 -0
- package/src/variants/toggle.ts +59 -0
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/clsx.d.mts +0 -6
|
@@ -68,7 +68,7 @@ function DropdownMenuSubContent({ className, ...props }) {
|
|
|
68
68
|
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
|
|
69
69
|
"data-slot": "dropdown-menu-portal",
|
|
70
70
|
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
71
|
-
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-
|
|
71
|
+
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-dropdown-menu-content-transform-origin)", className),
|
|
72
72
|
"data-slot": "dropdown-menu-sub-content",
|
|
73
73
|
...props
|
|
74
74
|
})
|
|
@@ -81,7 +81,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
|
81
81
|
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, {
|
|
82
82
|
"data-slot": "dropdown-menu-portal",
|
|
83
83
|
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
84
|
-
className: cn("z-50", "max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-
|
|
84
|
+
className: cn("z-50", "max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-dropdown-menu-content-transform-origin)", className),
|
|
85
85
|
"data-slot": "dropdown-menu-content",
|
|
86
86
|
sideOffset,
|
|
87
87
|
...props
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
1
|
+
import { EmptyMediaVariants } from "../variants/empty.mjs";
|
|
3
2
|
import { ComponentProps, JSX } from "react";
|
|
4
3
|
|
|
5
4
|
//#region src/components/empty.d.ts
|
|
6
|
-
/**
|
|
7
|
-
* @since 0.3.16-canary.0
|
|
8
|
-
*/
|
|
9
|
-
declare const emptyMediaVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
10
|
-
variant: {
|
|
11
|
-
default: string;
|
|
12
|
-
icon: string[];
|
|
13
|
-
};
|
|
14
|
-
}, Record<string, never>>;
|
|
15
5
|
/**
|
|
16
6
|
* @since 0.3.16-canary.0
|
|
17
7
|
*/
|
|
@@ -37,7 +27,7 @@ declare function EmptyHeader({
|
|
|
37
27
|
/**
|
|
38
28
|
* @since 0.3.16-canary.0
|
|
39
29
|
*/
|
|
40
|
-
type EmptyMediaProps = ComponentProps<"div"> &
|
|
30
|
+
type EmptyMediaProps = ComponentProps<"div"> & EmptyMediaVariants;
|
|
41
31
|
/**
|
|
42
32
|
* @since 0.3.16-canary.0
|
|
43
33
|
*/
|
|
@@ -80,4 +70,4 @@ declare function EmptyContent({
|
|
|
80
70
|
...props
|
|
81
71
|
}: EmptyContentProps): JSX.Element;
|
|
82
72
|
//#endregion
|
|
83
|
-
export { Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps
|
|
73
|
+
export { Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps };
|
|
@@ -1,25 +1,10 @@
|
|
|
1
|
-
import { cn
|
|
1
|
+
import { cn } from "../lib/utils.mjs";
|
|
2
|
+
import { emptyMediaVariants } from "../variants/empty.mjs";
|
|
2
3
|
import { jsx } from "react/jsx-runtime";
|
|
3
4
|
//#region src/components/empty.tsx
|
|
4
5
|
/**
|
|
5
6
|
* @since 0.3.16-canary.0
|
|
6
7
|
*/
|
|
7
|
-
const emptyMediaVariants = tv({
|
|
8
|
-
base: ["mb-2 flex shrink-0 items-center justify-center", "[&_svg]:pointer-events-none [&_svg]:shrink-0"],
|
|
9
|
-
defaultVariants: { variant: "default" },
|
|
10
|
-
variants: { variant: {
|
|
11
|
-
default: "bg-transparent",
|
|
12
|
-
icon: [
|
|
13
|
-
"flex size-10 shrink-0 items-center justify-center",
|
|
14
|
-
"rounded-xl",
|
|
15
|
-
"bg-muted text-foreground",
|
|
16
|
-
"[&_svg:not([class*='size-'])]:size-6"
|
|
17
|
-
]
|
|
18
|
-
} }
|
|
19
|
-
});
|
|
20
|
-
/**
|
|
21
|
-
* @since 0.3.16-canary.0
|
|
22
|
-
*/
|
|
23
8
|
function Empty({ className, ...props }) {
|
|
24
9
|
return /* @__PURE__ */ jsx("div", {
|
|
25
10
|
className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 p-6", "rounded-xl border-dashed", "text-center text-balance", "md:p-12", className),
|
|
@@ -82,4 +67,4 @@ function EmptyContent({ className, ...props }) {
|
|
|
82
67
|
});
|
|
83
68
|
}
|
|
84
69
|
//#endregion
|
|
85
|
-
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle
|
|
70
|
+
export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FieldVariants } from "../variants/field.mjs";
|
|
2
2
|
import { Label } from "./label.mjs";
|
|
3
|
-
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
4
3
|
import { ComponentProps, JSX } from "react";
|
|
5
4
|
|
|
6
5
|
//#region src/components/field.d.ts
|
|
7
|
-
/**
|
|
8
|
-
* @since 0.3.16-canary.0
|
|
9
|
-
*/
|
|
10
|
-
declare const fieldVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
11
|
-
orientation: {
|
|
12
|
-
horizontal: string[];
|
|
13
|
-
responsive: string[];
|
|
14
|
-
vertical: string[];
|
|
15
|
-
};
|
|
16
|
-
}, Record<string, never>>;
|
|
17
6
|
/**
|
|
18
7
|
* @since 0.3.16-canary.0
|
|
19
8
|
*/
|
|
@@ -53,7 +42,7 @@ declare function FieldGroup({
|
|
|
53
42
|
/**
|
|
54
43
|
* @since 0.3.16-canary.0
|
|
55
44
|
*/
|
|
56
|
-
type FieldProps = ComponentProps<"div"> &
|
|
45
|
+
type FieldProps = ComponentProps<"div"> & FieldVariants;
|
|
57
46
|
/**
|
|
58
47
|
* @since 0.3.16-canary.0
|
|
59
48
|
*/
|
|
@@ -139,4 +128,4 @@ declare function FieldError({
|
|
|
139
128
|
...props
|
|
140
129
|
}: FieldErrorProps): JSX.Element | null;
|
|
141
130
|
//#endregion
|
|
142
|
-
export { Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps
|
|
131
|
+
export { Field, FieldContent, type FieldContentProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, FieldTitle, type FieldTitleProps };
|
|
@@ -1,43 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
3
|
import { Separator } from "./separator.mjs";
|
|
4
4
|
import { Label } from "./label.mjs";
|
|
5
|
+
import { fieldVariants } from "../variants/field.mjs";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { useMemo } from "react";
|
|
7
8
|
//#region src/components/field.tsx
|
|
8
9
|
/**
|
|
9
10
|
* @since 0.3.16-canary.0
|
|
10
11
|
*/
|
|
11
|
-
const fieldVariants = tv({
|
|
12
|
-
base: ["group/field flex w-full gap-3", "data-[invalid=true]:text-destructive"],
|
|
13
|
-
defaultVariants: { orientation: "vertical" },
|
|
14
|
-
variants: { orientation: {
|
|
15
|
-
horizontal: [
|
|
16
|
-
"flex-row items-center",
|
|
17
|
-
"has-[>[data-slot=field-content]]:items-start",
|
|
18
|
-
"[&>[data-slot=field-label]]:flex-auto",
|
|
19
|
-
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
20
|
-
],
|
|
21
|
-
responsive: [
|
|
22
|
-
"flex-col",
|
|
23
|
-
"@md/field-group:flex-row @md/field-group:items-center",
|
|
24
|
-
"@md/field-group:has-[>[data-slot=field-content]]:items-start",
|
|
25
|
-
"[&>*]:w-full",
|
|
26
|
-
"@md/field-group:[&>*]:w-auto",
|
|
27
|
-
"[&>.sr-only]:w-auto",
|
|
28
|
-
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
|
29
|
-
"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
|
|
30
|
-
],
|
|
31
|
-
vertical: [
|
|
32
|
-
"flex-col",
|
|
33
|
-
"[&>*]:w-full",
|
|
34
|
-
"[&>.sr-only]:w-auto"
|
|
35
|
-
]
|
|
36
|
-
} }
|
|
37
|
-
});
|
|
38
|
-
/**
|
|
39
|
-
* @since 0.3.16-canary.0
|
|
40
|
-
*/
|
|
41
12
|
function FieldSet({ className, ...props }) {
|
|
42
13
|
return /* @__PURE__ */ jsx("fieldset", {
|
|
43
14
|
className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3", "has-[>[data-slot=radio-group]]:gap-3", className),
|
|
@@ -162,4 +133,4 @@ function FieldError({ children, className, errors, ...props }) {
|
|
|
162
133
|
});
|
|
163
134
|
}
|
|
164
135
|
//#endregion
|
|
165
|
-
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle
|
|
136
|
+
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { Slot } from "@radix-ui/react-slot";
|
|
2
2
|
import { ComponentProps, JSX, ReactNode } from "react";
|
|
3
|
-
import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
|
|
4
3
|
import { Scope } from "@radix-ui/react-context";
|
|
5
4
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
6
|
-
import * as _$react_hook_form0 from "react-hook-form";
|
|
7
5
|
import { ControllerProps, FieldPath, FieldValues, FormProvider } from "react-hook-form";
|
|
8
6
|
|
|
9
7
|
//#region src/components/form.d.ts
|
|
@@ -14,11 +12,11 @@ type FormProps = ComponentProps<typeof FormProvider>;
|
|
|
14
12
|
/**
|
|
15
13
|
* @since 0.3.16-canary.0
|
|
16
14
|
*/
|
|
17
|
-
declare const Form:
|
|
15
|
+
declare const Form: typeof FormProvider;
|
|
18
16
|
type ScopedProps<P> = P & {
|
|
19
17
|
__scopeFormField?: Scope;
|
|
20
18
|
};
|
|
21
|
-
declare const createFormFieldScope:
|
|
19
|
+
declare const createFormFieldScope: import("@radix-ui/react-context").CreateScope;
|
|
22
20
|
/**
|
|
23
21
|
* @since 0.3.16-canary.0
|
|
24
22
|
*/
|
|
@@ -27,7 +27,7 @@ function HoverCardTrigger({ ...props }) {
|
|
|
27
27
|
function HoverCardContent({ align = "center", className, sideOffset = 4, ...props }) {
|
|
28
28
|
return /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
|
|
29
29
|
align,
|
|
30
|
-
className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-
|
|
30
|
+
className: cn("z-50", "min-w-32 p-4", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-hover-card-content-transform-origin)", className),
|
|
31
31
|
"data-slot": "hover-card-content",
|
|
32
32
|
sideOffset,
|
|
33
33
|
...props
|
|
@@ -1,37 +1,10 @@
|
|
|
1
|
-
import { VariantProps } from "../lib/utils.mjs";
|
|
2
1
|
import { ButtonProps } from "./button.mjs";
|
|
2
|
+
import { InputGroupAddonVariants, InputGroupButtonVariants } from "../variants/input-group.mjs";
|
|
3
3
|
import { InputProps } from "./input.mjs";
|
|
4
4
|
import { TextareaProps } from "./textarea.mjs";
|
|
5
|
-
import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
|
|
6
5
|
import { ComponentProps, JSX } from "react";
|
|
7
6
|
|
|
8
7
|
//#region src/components/input-group.d.ts
|
|
9
|
-
/**
|
|
10
|
-
* @since 0.3.16-canary.0
|
|
11
|
-
*/
|
|
12
|
-
declare const inputGroupVariants: _$_codefast_tailwind_variants0.VariantFunctionType<_$_codefast_tailwind_variants0.ConfigurationSchema, Record<string, never>>;
|
|
13
|
-
/**
|
|
14
|
-
* @since 0.3.16-canary.0
|
|
15
|
-
*/
|
|
16
|
-
declare const inputGroupAddonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
17
|
-
align: {
|
|
18
|
-
"block-end": string[];
|
|
19
|
-
"block-start": string[];
|
|
20
|
-
"inline-end": string[];
|
|
21
|
-
"inline-start": string[];
|
|
22
|
-
};
|
|
23
|
-
}, Record<string, never>>;
|
|
24
|
-
/**
|
|
25
|
-
* @since 0.3.16-canary.0
|
|
26
|
-
*/
|
|
27
|
-
declare const inputGroupButtonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
28
|
-
size: {
|
|
29
|
-
"icon-sm": string[];
|
|
30
|
-
"icon-xs": string[];
|
|
31
|
-
sm: string[];
|
|
32
|
-
xs: string[];
|
|
33
|
-
};
|
|
34
|
-
}, Record<string, never>>;
|
|
35
8
|
/**
|
|
36
9
|
* @since 0.3.16-canary.0
|
|
37
10
|
*/
|
|
@@ -46,7 +19,7 @@ declare function InputGroup({
|
|
|
46
19
|
/**
|
|
47
20
|
* @since 0.3.16-canary.0
|
|
48
21
|
*/
|
|
49
|
-
type InputGroupAddonProps = ComponentProps<"div"> &
|
|
22
|
+
type InputGroupAddonProps = ComponentProps<"div"> & InputGroupAddonVariants;
|
|
50
23
|
/**
|
|
51
24
|
* @since 0.3.16-canary.0
|
|
52
25
|
*/
|
|
@@ -58,7 +31,7 @@ declare function InputGroupAddon({
|
|
|
58
31
|
/**
|
|
59
32
|
* @since 0.3.16-canary.0
|
|
60
33
|
*/
|
|
61
|
-
type InputGroupButtonProps = Omit<ButtonProps, "size"> &
|
|
34
|
+
type InputGroupButtonProps = Omit<ButtonProps, "size"> & InputGroupButtonVariants;
|
|
62
35
|
/**
|
|
63
36
|
* @since 0.3.16-canary.0
|
|
64
37
|
*/
|
|
@@ -103,4 +76,4 @@ declare function InputGroupTextarea({
|
|
|
103
76
|
...props
|
|
104
77
|
}: InputGroupTextareaProps): JSX.Element;
|
|
105
78
|
//#endregion
|
|
106
|
-
export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps
|
|
79
|
+
export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps };
|
|
@@ -1,101 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn
|
|
2
|
+
import { cn } from "../lib/utils.mjs";
|
|
3
3
|
import { Button } from "./button.mjs";
|
|
4
4
|
import { Input } from "./input.mjs";
|
|
5
|
+
import { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants } from "../variants/input-group.mjs";
|
|
5
6
|
import { Textarea } from "./textarea.mjs";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
8
|
//#region src/components/input-group.tsx
|
|
8
9
|
/**
|
|
9
10
|
* @since 0.3.16-canary.0
|
|
10
11
|
*/
|
|
11
|
-
const inputGroupVariants = tv({ base: [
|
|
12
|
-
"group/input-group relative flex h-9 w-full min-w-0 items-center",
|
|
13
|
-
"rounded-lg border border-input shadow-xs outline-none",
|
|
14
|
-
"transition-[color,box-shadow]",
|
|
15
|
-
"dark:bg-input/30",
|
|
16
|
-
"has-[>textarea]:h-auto",
|
|
17
|
-
"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
|
|
18
|
-
"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
|
|
19
|
-
"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",
|
|
20
|
-
"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20",
|
|
21
|
-
"dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
|
|
22
|
-
"has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
|
|
23
|
-
"has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
|
|
24
|
-
"has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2",
|
|
25
|
-
"has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2"
|
|
26
|
-
] });
|
|
27
|
-
/**
|
|
28
|
-
* @since 0.3.16-canary.0
|
|
29
|
-
*/
|
|
30
|
-
const inputGroupAddonVariants = tv({
|
|
31
|
-
base: [
|
|
32
|
-
"flex h-auto items-center justify-center gap-2 py-1.5",
|
|
33
|
-
"text-sm font-medium text-muted-foreground",
|
|
34
|
-
"cursor-text select-none",
|
|
35
|
-
"group-data-disabled/input-group:opacity-50",
|
|
36
|
-
"[&>kbd]:rounded-[calc(var(--radius)-5px)]",
|
|
37
|
-
"[&>svg:not([class*='size-'])]:size-4"
|
|
38
|
-
],
|
|
39
|
-
defaultVariants: { align: "inline-start" },
|
|
40
|
-
variants: { align: {
|
|
41
|
-
"block-end": [
|
|
42
|
-
"order-last w-full justify-start px-3 pb-3",
|
|
43
|
-
"group-has-[>input]/input-group:pb-2.5",
|
|
44
|
-
"[.border-t]:pt-3"
|
|
45
|
-
],
|
|
46
|
-
"block-start": [
|
|
47
|
-
"order-first w-full justify-start px-3 pt-3",
|
|
48
|
-
"group-has-[>input]/input-group:pt-2.5",
|
|
49
|
-
"[.border-b]:pb-3"
|
|
50
|
-
],
|
|
51
|
-
"inline-end": [
|
|
52
|
-
"order-last",
|
|
53
|
-
"pr-3",
|
|
54
|
-
"has-[>button]:mr-[-0.45rem]",
|
|
55
|
-
"has-[>kbd]:mr-[-0.35rem]"
|
|
56
|
-
],
|
|
57
|
-
"inline-start": [
|
|
58
|
-
"order-first",
|
|
59
|
-
"pl-3",
|
|
60
|
-
"has-[>button]:ml-[-0.45rem]",
|
|
61
|
-
"has-[>kbd]:ml-[-0.35rem]"
|
|
62
|
-
]
|
|
63
|
-
} }
|
|
64
|
-
});
|
|
65
|
-
/**
|
|
66
|
-
* @since 0.3.16-canary.0
|
|
67
|
-
*/
|
|
68
|
-
const inputGroupButtonVariants = tv({
|
|
69
|
-
base: [
|
|
70
|
-
"flex items-center gap-2",
|
|
71
|
-
"shadow-none",
|
|
72
|
-
"text-sm",
|
|
73
|
-
"[&>svg:not([class*='size-'])]:size-4"
|
|
74
|
-
],
|
|
75
|
-
defaultVariants: { size: "xs" },
|
|
76
|
-
variants: { size: {
|
|
77
|
-
"icon-sm": ["size-8 p-0", "has-[>svg]:p-0"],
|
|
78
|
-
"icon-xs": [
|
|
79
|
-
"size-6 p-0",
|
|
80
|
-
"rounded-[calc(var(--radius)-5px)]",
|
|
81
|
-
"has-[>svg]:p-0"
|
|
82
|
-
],
|
|
83
|
-
sm: [
|
|
84
|
-
"h-8 gap-1.5 px-2.5",
|
|
85
|
-
"rounded-md",
|
|
86
|
-
"has-[>svg]:px-2.5"
|
|
87
|
-
],
|
|
88
|
-
xs: [
|
|
89
|
-
"h-6 gap-1 px-2",
|
|
90
|
-
"rounded-[calc(var(--radius)-5px)]",
|
|
91
|
-
"has-[>svg]:px-2",
|
|
92
|
-
"[&>svg]:size-3.5"
|
|
93
|
-
]
|
|
94
|
-
} }
|
|
95
|
-
});
|
|
96
|
-
/**
|
|
97
|
-
* @since 0.3.16-canary.0
|
|
98
|
-
*/
|
|
99
12
|
function InputGroup({ className, ...props }) {
|
|
100
13
|
return /* @__PURE__ */ jsx("div", {
|
|
101
14
|
className: inputGroupVariants({ className }),
|
|
@@ -166,4 +79,4 @@ function InputGroupTextarea({ className, ...props }) {
|
|
|
166
79
|
});
|
|
167
80
|
}
|
|
168
81
|
//#endregion
|
|
169
|
-
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea
|
|
82
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn } from "../lib/utils.mjs";
|
|
3
|
-
import { buttonVariants } from "
|
|
3
|
+
import { buttonVariants } from "../variants/button.mjs";
|
|
4
4
|
import { Spinner } from "./spinner.mjs";
|
|
5
5
|
import { DecrementButton as InputNumberDecrementButton, Field as InputNumberField, IncrementButton as InputNumberIncrementButton, InputNumber as InputNumber$1 } from "../primitives/input-number.mjs";
|
|
6
6
|
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
@@ -13,7 +13,7 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
|
|
|
13
13
|
return /* @__PURE__ */ jsxs(InputNumber$1, {
|
|
14
14
|
ariaDecrementLabel,
|
|
15
15
|
ariaIncrementLabel,
|
|
16
|
-
className: cn("group peer flex h-9 w-full grow items-center gap-3 px-3 pr-0", "rounded-lg border border-input", "text-base", "transition", "not-has-disabled:shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "hover:not-has-disabled:not-focus-within:border-ring/60", "focus-within:has-aria-invalid:ring-destructive/20", "hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:has-aria-invalid:ring-destructive/40", "has-disabled:opacity-50", "has-aria-invalid:border-destructive", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&>svg]:text-muted-foreground", className),
|
|
16
|
+
className: cn("group peer flex h-9 w-full grow items-center gap-3 px-3 pr-0", "rounded-lg border border-input", "text-base", "transition", "motion-reduce:transition-none", "not-has-disabled:shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "hover:not-has-disabled:not-focus-within:border-ring/60", "focus-within:has-aria-invalid:ring-destructive/20", "hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:has-aria-invalid:ring-destructive/40", "has-disabled:opacity-50", "has-aria-invalid:border-destructive", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&>svg]:text-muted-foreground", className),
|
|
17
17
|
"data-slot": "input-number",
|
|
18
18
|
defaultValue,
|
|
19
19
|
disabled,
|
|
@@ -34,11 +34,11 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
|
|
|
34
34
|
autoCapitalize: "none",
|
|
35
35
|
autoComplete: "off",
|
|
36
36
|
autoCorrect: "off",
|
|
37
|
-
className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-md border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "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-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:aria-invalid:ring-destructive/40"),
|
|
37
|
+
className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-md border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "motion-reduce:transition-none", "selection:bg-primary selection:text-primary-foreground", "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-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:aria-invalid:ring-destructive/40"),
|
|
38
38
|
spellCheck: "false",
|
|
39
39
|
...props
|
|
40
40
|
}), /* @__PURE__ */ jsxs("div", {
|
|
41
|
-
className: cn("order-last ml-auto grid h-full shrink-0", "divide-y divide-input border-l border-l-input", "transition", "group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60", "group-focus-within:divide-ring group-focus-within:border-l-ring", "group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive", "group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60", "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0", "group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20", "dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40"),
|
|
41
|
+
className: cn("order-last ml-auto grid h-full shrink-0", "divide-y divide-input border-l border-l-input", "transition", "motion-reduce:transition-none", "group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60", "group-focus-within:divide-ring group-focus-within:border-l-ring", "group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive", "group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60", "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0", "group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20", "dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40"),
|
|
42
42
|
"data-slot": "input-number-buttons",
|
|
43
43
|
children: [/* @__PURE__ */ jsx(InputNumberIncrementButton, {
|
|
44
44
|
"aria-label": "Increment",
|
|
@@ -36,13 +36,13 @@ function InputOTPSlot({ className, index, ...props }) {
|
|
|
36
36
|
if (slot === void 0) throw new Error(`InputOTPSlot: no slot at index ${index}`);
|
|
37
37
|
const { char, hasFakeCaret, isActive } = slot;
|
|
38
38
|
return /* @__PURE__ */ jsxs("div", {
|
|
39
|
-
className: cn("relative flex size-9 items-center justify-center", "border border-input outline-hidden", "text-sm", "transition-all", "not-has-disabled:shadow-xs", "first:rounded-l-lg", "last:rounded-r-lg", "aria-invalid:border-destructive", "dark:bg-input/30", "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50", "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20", "dark:data-active:aria-invalid:ring-destructive/40", className),
|
|
39
|
+
className: cn("relative flex size-9 items-center justify-center", "border border-input outline-hidden", "text-sm", "transition-all", "motion-reduce:transition-none", "not-has-disabled:shadow-xs", "first:rounded-l-lg", "last:rounded-r-lg", "aria-invalid:border-destructive", "dark:bg-input/30", "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50", "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20", "dark:data-active:aria-invalid:ring-destructive/40", className),
|
|
40
40
|
"data-active": isActive,
|
|
41
41
|
"data-slot": "input-otp-slot",
|
|
42
42
|
...props,
|
|
43
43
|
children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
|
|
44
44
|
className: cn("absolute inset-0 flex items-center justify-center", "pointer-events-none"),
|
|
45
|
-
children: /* @__PURE__ */ jsx("div", { className: cn("h-4 w-px", "bg-foreground", "animate-caret-blink", "animation-duration-1000") })
|
|
45
|
+
children: /* @__PURE__ */ jsx("div", { className: cn("h-4 w-px", "bg-foreground", "animate-caret-blink", "animation-duration-1000", "motion-reduce:animate-none motion-reduce:duration-0") })
|
|
46
46
|
}) : null]
|
|
47
47
|
});
|
|
48
48
|
}
|
|
@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
*/
|
|
8
8
|
function Input({ className, type, ...props }) {
|
|
9
9
|
return /* @__PURE__ */ jsx("input", {
|
|
10
|
-
className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "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", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "md:text-sm", "dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
|
|
10
|
+
className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow] duration-150 ease-snappy", "motion-reduce:transition-none motion-reduce:duration-0", "selection:bg-primary selection:text-primary-foreground", "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", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "md:text-sm", "dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
|
|
11
11
|
"data-slot": "input",
|
|
12
12
|
type,
|
|
13
13
|
...props
|
|
@@ -1,33 +1,8 @@
|
|
|
1
|
-
import { VariantProps } from "../lib/utils.mjs";
|
|
2
1
|
import { Separator } from "./separator.mjs";
|
|
3
|
-
import
|
|
2
|
+
import { ItemMediaVariants, ItemVariants } from "../variants/item.mjs";
|
|
4
3
|
import { ComponentProps, JSX } from "react";
|
|
5
4
|
|
|
6
5
|
//#region src/components/item.d.ts
|
|
7
|
-
/**
|
|
8
|
-
* @since 0.3.16-canary.0
|
|
9
|
-
*/
|
|
10
|
-
declare const itemVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
11
|
-
size: {
|
|
12
|
-
default: string[];
|
|
13
|
-
sm: string[];
|
|
14
|
-
};
|
|
15
|
-
variant: {
|
|
16
|
-
default: string;
|
|
17
|
-
muted: string;
|
|
18
|
-
outline: string;
|
|
19
|
-
};
|
|
20
|
-
}, Record<string, never>>;
|
|
21
|
-
/**
|
|
22
|
-
* @since 0.3.16-canary.0
|
|
23
|
-
*/
|
|
24
|
-
declare const itemMediaVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
25
|
-
variant: {
|
|
26
|
-
default: string;
|
|
27
|
-
icon: string[];
|
|
28
|
-
image: string[];
|
|
29
|
-
};
|
|
30
|
-
}, Record<string, never>>;
|
|
31
6
|
/**
|
|
32
7
|
* @since 0.3.16-canary.0
|
|
33
8
|
*/
|
|
@@ -53,7 +28,7 @@ declare function ItemSeparator({
|
|
|
53
28
|
/**
|
|
54
29
|
* @since 0.3.16-canary.0
|
|
55
30
|
*/
|
|
56
|
-
type ItemProps = ComponentProps<"div"> &
|
|
31
|
+
type ItemProps = ComponentProps<"div"> & ItemVariants & {
|
|
57
32
|
asChild?: boolean;
|
|
58
33
|
};
|
|
59
34
|
/**
|
|
@@ -69,7 +44,7 @@ declare function Item({
|
|
|
69
44
|
/**
|
|
70
45
|
* @since 0.3.16-canary.0
|
|
71
46
|
*/
|
|
72
|
-
type ItemMediaProps = ComponentProps<"div"> &
|
|
47
|
+
type ItemMediaProps = ComponentProps<"div"> & ItemMediaVariants;
|
|
73
48
|
/**
|
|
74
49
|
* @since 0.3.16-canary.0
|
|
75
50
|
*/
|
|
@@ -145,4 +120,4 @@ declare function ItemFooter({
|
|
|
145
120
|
...props
|
|
146
121
|
}: ItemFooterProps): JSX.Element;
|
|
147
122
|
//#endregion
|
|
148
|
-
export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps
|
|
123
|
+
export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps };
|
package/dist/components/item.mjs
CHANGED
|
@@ -1,65 +1,12 @@
|
|
|
1
|
-
import { cn
|
|
1
|
+
import { cn } from "../lib/utils.mjs";
|
|
2
2
|
import { Separator } from "./separator.mjs";
|
|
3
|
+
import { itemMediaVariants, itemVariants } from "../variants/item.mjs";
|
|
3
4
|
import { Slot } from "@radix-ui/react-slot";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/item.tsx
|
|
6
7
|
/**
|
|
7
8
|
* @since 0.3.16-canary.0
|
|
8
9
|
*/
|
|
9
|
-
const itemVariants = tv({
|
|
10
|
-
base: [
|
|
11
|
-
"group/item flex flex-wrap items-center",
|
|
12
|
-
"rounded-lg border border-transparent outline-hidden",
|
|
13
|
-
"text-sm",
|
|
14
|
-
"transition-colors duration-100",
|
|
15
|
-
"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
16
|
-
"[a]:transition-colors",
|
|
17
|
-
"[a]:hover:bg-accent/50"
|
|
18
|
-
],
|
|
19
|
-
defaultVariants: {
|
|
20
|
-
size: "default",
|
|
21
|
-
variant: "default"
|
|
22
|
-
},
|
|
23
|
-
variants: {
|
|
24
|
-
size: {
|
|
25
|
-
default: ["gap-4", "p-4"],
|
|
26
|
-
sm: ["gap-2.5", "px-4 py-3"]
|
|
27
|
-
},
|
|
28
|
-
variant: {
|
|
29
|
-
default: "bg-transparent",
|
|
30
|
-
muted: "bg-muted/50",
|
|
31
|
-
outline: "border-border"
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
/**
|
|
36
|
-
* @since 0.3.16-canary.0
|
|
37
|
-
*/
|
|
38
|
-
const itemMediaVariants = tv({
|
|
39
|
-
base: [
|
|
40
|
-
"flex shrink-0 items-center justify-center gap-2",
|
|
41
|
-
"group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start",
|
|
42
|
-
"[&_svg]:pointer-events-none"
|
|
43
|
-
],
|
|
44
|
-
defaultVariants: { variant: "default" },
|
|
45
|
-
variants: { variant: {
|
|
46
|
-
default: "bg-transparent",
|
|
47
|
-
icon: [
|
|
48
|
-
"size-8 shrink-0",
|
|
49
|
-
"rounded-md border",
|
|
50
|
-
"bg-muted",
|
|
51
|
-
"[&_svg:not([class*='size-'])]:size-4"
|
|
52
|
-
],
|
|
53
|
-
image: [
|
|
54
|
-
"size-10 shrink-0 overflow-hidden",
|
|
55
|
-
"rounded-md",
|
|
56
|
-
"[&_img]:size-full [&_img]:object-cover"
|
|
57
|
-
]
|
|
58
|
-
} }
|
|
59
|
-
});
|
|
60
|
-
/**
|
|
61
|
-
* @since 0.3.16-canary.0
|
|
62
|
-
*/
|
|
63
10
|
function ItemGroup({ className, ...props }) {
|
|
64
11
|
return /* @__PURE__ */ jsx("div", {
|
|
65
12
|
className: cn("group/item-group flex flex-col", className),
|
|
@@ -170,4 +117,4 @@ function ItemFooter({ className, ...props }) {
|
|
|
170
117
|
});
|
|
171
118
|
}
|
|
172
119
|
//#endregion
|
|
173
|
-
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle
|
|
120
|
+
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
|
|
@@ -77,7 +77,7 @@ function MenubarSubTrigger({ children, className, inset, ...props }) {
|
|
|
77
77
|
*/
|
|
78
78
|
function MenubarSubContent({ className, ...props }) {
|
|
79
79
|
return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
|
|
80
|
-
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-
|
|
80
|
+
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:duration-150 data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-menubar-content-transform-origin)", className),
|
|
81
81
|
"data-slot": "menubar-sub-content",
|
|
82
82
|
...props
|
|
83
83
|
}) });
|
|
@@ -89,7 +89,7 @@ function MenubarContent({ align = "start", alignOffset = -4, className, sideOffs
|
|
|
89
89
|
return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
|
|
90
90
|
align,
|
|
91
91
|
alignOffset,
|
|
92
|
-
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-
|
|
92
|
+
className: cn("z-50", "min-w-32 overflow-hidden p-1", "rounded-lg border", "bg-popover text-popover-foreground shadow-lg", "ease-snappy data-open:animate-in data-open:duration-200 data-open:fade-in-0 data-open:zoom-in-95", "data-open:data-side-top:slide-in-from-bottom-2", "data-open:data-side-right:slide-in-from-left-2", "data-open:data-side-bottom:slide-in-from-top-2", "data-open:data-side-left:slide-in-from-right-2", "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0", "origin-(--radix-menubar-content-transform-origin)", className),
|
|
93
93
|
"data-slot": "menubar-content",
|
|
94
94
|
sideOffset,
|
|
95
95
|
...props
|
|
@@ -10,7 +10,7 @@ function NativeSelect({ className, ...props }) {
|
|
|
10
10
|
className: cn("group/native-select relative", "w-fit", "has-[select:disabled]:opacity-50"),
|
|
11
11
|
"data-slot": "native-select-wrapper",
|
|
12
12
|
children: [/* @__PURE__ */ jsx("select", {
|
|
13
|
-
className: cn("h-9 w-full min-w-0 px-3 py-2 pr-9", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-sm", "appearance-none transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "placeholder:text-muted-foreground", "disabled:pointer-events-none disabled:cursor-not-allowed", "dark:bg-input/30", "dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
|
|
13
|
+
className: cn("h-9 w-full min-w-0 px-3 py-2 pr-9", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-sm", "appearance-none transition-[color,box-shadow]", "motion-reduce:transition-none", "selection:bg-primary selection:text-primary-foreground", "placeholder:text-muted-foreground", "disabled:pointer-events-none disabled:cursor-not-allowed", "dark:bg-input/30", "dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
|
|
14
14
|
"data-slot": "native-select",
|
|
15
15
|
...props
|
|
16
16
|
}), /* @__PURE__ */ jsx(ChevronDownIcon, {
|