@codefast/ui 0.3.11 → 0.3.12-canary.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/CHANGELOG.md +15 -0
- package/README.md +4 -0
- package/dist/components/accordion.d.ts +11 -29
- package/dist/components/accordion.d.ts.map +1 -0
- package/dist/components/accordion.js +10 -37
- package/dist/components/alert-dialog.d.ts +25 -60
- package/dist/components/alert-dialog.d.ts.map +1 -0
- package/dist/components/alert-dialog.js +16 -69
- package/dist/components/alert.d.ts +16 -27
- package/dist/components/alert.d.ts.map +1 -0
- package/dist/components/alert.js +22 -30
- package/dist/components/aspect-ratio.d.ts +5 -8
- package/dist/components/aspect-ratio.d.ts.map +1 -0
- package/dist/components/aspect-ratio.js +5 -7
- package/dist/components/avatar.d.ts +7 -17
- package/dist/components/avatar.d.ts.map +1 -0
- package/dist/components/avatar.js +7 -18
- package/dist/components/badge.d.ts +15 -21
- package/dist/components/badge.d.ts.map +1 -0
- package/dist/components/badge.js +23 -20
- package/dist/components/breadcrumb.d.ts +13 -35
- package/dist/components/breadcrumb.d.ts.map +1 -0
- package/dist/components/breadcrumb.js +13 -49
- package/dist/components/button-group.d.ts +15 -29
- package/dist/components/button-group.d.ts.map +1 -0
- package/dist/components/button-group.js +22 -27
- package/dist/components/button.d.ts +26 -35
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +43 -51
- package/dist/components/calendar.d.ts +10 -24
- package/dist/components/calendar.d.ts.map +1 -0
- package/dist/components/calendar.js +75 -92
- package/dist/components/card.d.ts +11 -34
- package/dist/components/card.d.ts.map +1 -0
- package/dist/components/card.js +11 -39
- package/dist/components/carousel.d.ts +25 -55
- package/dist/components/carousel.d.ts.map +1 -0
- package/dist/components/carousel.js +82 -114
- package/dist/components/chart.d.ts +37 -72
- package/dist/components/chart.d.ts.map +1 -0
- package/dist/components/chart.js +161 -150
- package/dist/components/checkbox-cards.d.ts +9 -15
- package/dist/components/checkbox-cards.d.ts.map +1 -0
- package/dist/components/checkbox-cards.js +8 -22
- package/dist/components/checkbox-group.d.ts +9 -16
- package/dist/components/checkbox-group.d.ts.map +1 -0
- package/dist/components/checkbox-group.js +7 -19
- package/dist/components/checkbox.d.ts +5 -9
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +6 -14
- package/dist/components/collapsible.d.ts +7 -14
- package/dist/components/collapsible.d.ts.map +1 -0
- package/dist/components/collapsible.js +7 -15
- package/dist/components/command.d.ts +24 -55
- package/dist/components/command.d.ts.map +1 -0
- package/dist/components/command.js +18 -69
- package/dist/components/context-menu.d.ts +23 -72
- package/dist/components/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu.js +21 -89
- package/dist/components/dialog.d.ts +23 -53
- package/dist/components/dialog.d.ts.map +1 -0
- package/dist/components/dialog.js +20 -72
- package/dist/components/drawer.d.ts +29 -60
- package/dist/components/drawer.d.ts.map +1 -0
- package/dist/components/drawer.js +16 -58
- package/dist/components/dropdown-menu.d.ts +23 -73
- package/dist/components/dropdown-menu.d.ts.map +1 -0
- package/dist/components/dropdown-menu.js +21 -96
- package/dist/components/empty.d.ts +16 -37
- package/dist/components/empty.d.ts.map +1 -0
- package/dist/components/empty.js +24 -44
- package/dist/components/field.d.ts +26 -63
- package/dist/components/field.d.ts.map +1 -0
- package/dist/components/field.js +46 -89
- package/dist/components/form.d.ts +16 -37
- package/dist/components/form.d.ts.map +1 -0
- package/dist/components/form.js +50 -66
- package/dist/components/hover-card.d.ts +8 -21
- package/dist/components/hover-card.d.ts.map +1 -0
- package/dist/components/hover-card.js +8 -23
- package/dist/components/input-group.d.ts +29 -53
- package/dist/components/input-group.d.ts.map +1 -0
- package/dist/components/input-group.js +59 -66
- package/dist/components/input-number.d.ts +8 -28
- package/dist/components/input-number.d.ts.map +1 -0
- package/dist/components/input-number.js +14 -55
- package/dist/components/input-otp.d.ts +11 -24
- package/dist/components/input-otp.d.ts.map +1 -0
- package/dist/components/input-otp.js +13 -34
- package/dist/components/input-password.d.ts +6 -12
- package/dist/components/input-password.d.ts.map +1 -0
- package/dist/components/input-password.js +10 -31
- package/dist/components/input-search.d.ts +9 -18
- package/dist/components/input-search.d.ts.map +1 -0
- package/dist/components/input-search.js +16 -44
- package/dist/components/input.d.ts +5 -10
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +5 -9
- package/dist/components/item.d.ts +33 -69
- package/dist/components/item.d.ts.map +1 -0
- package/dist/components/item.js +47 -90
- package/dist/components/kbd.d.ts +6 -13
- package/dist/components/kbd.d.ts.map +1 -0
- package/dist/components/kbd.js +6 -13
- package/dist/components/label.d.ts +5 -9
- package/dist/components/label.d.ts.map +1 -0
- package/dist/components/label.js +5 -8
- package/dist/components/menubar.d.ts +24 -80
- package/dist/components/menubar.d.ts.map +1 -0
- package/dist/components/menubar.js +23 -99
- package/dist/components/native-select.d.ts +7 -16
- package/dist/components/native-select.d.ts.map +1 -0
- package/dist/components/native-select.js +7 -25
- package/dist/components/navigation-menu.d.ts +13 -36
- package/dist/components/navigation-menu.d.ts.map +1 -0
- package/dist/components/navigation-menu.js +25 -61
- package/dist/components/pagination.d.ts +15 -35
- package/dist/components/pagination.d.ts.map +1 -0
- package/dist/components/pagination.js +13 -55
- package/dist/components/popover.d.ts +9 -24
- package/dist/components/popover.d.ts.map +1 -0
- package/dist/components/popover.js +9 -27
- package/dist/components/progress-circle.d.ts +89 -106
- package/dist/components/progress-circle.d.ts.map +1 -0
- package/dist/components/progress-circle.js +70 -103
- package/dist/components/progress.d.ts +5 -10
- package/dist/components/progress.d.ts.map +1 -0
- package/dist/components/progress.js +7 -13
- package/dist/components/radio-cards.d.ts +5 -10
- package/dist/components/radio-cards.d.ts.map +1 -0
- package/dist/components/radio-cards.js +7 -21
- package/dist/components/radio-group.d.ts +6 -13
- package/dist/components/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group.js +6 -17
- package/dist/components/radio.d.ts +6 -12
- package/dist/components/radio.d.ts.map +1 -0
- package/dist/components/radio.js +5 -10
- package/dist/components/resizable.d.ts +8 -18
- package/dist/components/resizable.d.ts.map +1 -0
- package/dist/components/resizable.js +7 -21
- package/dist/components/scroll-area.d.ts +21 -33
- package/dist/components/scroll-area.d.ts.map +1 -0
- package/dist/components/scroll-area.js +64 -84
- package/dist/components/select.d.ts +17 -50
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +26 -78
- package/dist/components/separator.d.ts +20 -29
- package/dist/components/separator.d.ts.map +1 -0
- package/dist/components/separator.js +27 -36
- package/dist/components/sheet.d.ts +30 -62
- package/dist/components/sheet.d.ts.map +1 -0
- package/dist/components/sheet.js +36 -80
- package/dist/components/sidebar.d.ts +67 -160
- package/dist/components/sidebar.d.ts.map +1 -0
- package/dist/components/sidebar.js +166 -301
- package/dist/components/skeleton.d.ts +5 -9
- package/dist/components/skeleton.d.ts.map +1 -0
- package/dist/components/skeleton.js +5 -8
- package/dist/components/slider.d.ts +5 -13
- package/dist/components/slider.d.ts.map +1 -0
- package/dist/components/slider.js +12 -34
- package/dist/components/sonner.d.ts +8 -10
- package/dist/components/sonner.d.ts.map +1 -0
- package/dist/components/sonner.js +13 -16
- package/dist/components/spinner.d.ts +6 -12
- package/dist/components/spinner.d.ts.map +1 -0
- package/dist/components/spinner.js +20 -33
- package/dist/components/switch.d.ts +5 -9
- package/dist/components/switch.d.ts.map +1 -0
- package/dist/components/switch.js +5 -12
- package/dist/components/table.d.ts +12 -37
- package/dist/components/table.d.ts.map +1 -0
- package/dist/components/table.js +12 -47
- package/dist/components/tabs.d.ts +8 -21
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +8 -23
- package/dist/components/textarea.d.ts +5 -9
- package/dist/components/textarea.d.ts.map +1 -0
- package/dist/components/textarea.js +5 -8
- package/dist/components/toggle-group.d.ts +10 -24
- package/dist/components/toggle-group.d.ts.map +1 -0
- package/dist/components/toggle-group.js +20 -38
- package/dist/components/toggle.d.ts +18 -25
- package/dist/components/toggle.d.ts.map +1 -0
- package/dist/components/toggle.js +24 -29
- package/dist/components/tooltip.d.ts +9 -24
- package/dist/components/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip.js +9 -28
- package/dist/hooks/use-animated-value.d.ts +2 -4
- package/dist/hooks/use-animated-value.d.ts.map +1 -0
- package/dist/hooks/use-animated-value.js +67 -58
- package/dist/hooks/use-copy-to-clipboard.d.ts +6 -11
- package/dist/hooks/use-copy-to-clipboard.d.ts.map +1 -0
- package/dist/hooks/use-copy-to-clipboard.js +42 -39
- package/dist/hooks/use-is-mobile.d.ts +2 -4
- package/dist/hooks/use-is-mobile.d.ts.map +1 -0
- package/dist/hooks/use-is-mobile.js +20 -23
- package/dist/hooks/use-media-query.d.ts +2 -4
- package/dist/hooks/use-media-query.d.ts.map +1 -0
- package/dist/hooks/use-media-query.js +49 -46
- package/dist/hooks/use-mutation-observer.d.ts +3 -6
- package/dist/hooks/use-mutation-observer.d.ts.map +1 -0
- package/dist/hooks/use-mutation-observer.js +33 -34
- package/dist/hooks/use-pagination.d.ts +15 -22
- package/dist/hooks/use-pagination.d.ts.map +1 -0
- package/dist/hooks/use-pagination.js +99 -99
- package/dist/index.d.ts +131 -69
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +68 -69
- package/dist/primitives/checkbox-group.d.ts +84 -105
- package/dist/primitives/checkbox-group.d.ts.map +1 -0
- package/dist/primitives/checkbox-group.js +91 -105
- package/dist/primitives/input-number.d.ts +41 -51
- package/dist/primitives/input-number.d.ts.map +1 -0
- package/dist/primitives/input-number.js +417 -473
- package/dist/primitives/input.d.ts +43 -48
- package/dist/primitives/input.d.ts.map +1 -0
- package/dist/primitives/input.js +67 -66
- package/dist/primitives/progress-circle.d.ts +49 -79
- package/dist/primitives/progress-circle.d.ts.map +1 -0
- package/dist/primitives/progress-circle.js +134 -149
- package/package.json +17 -10
- package/{dist → src}/css/preset.css +1 -1
- /package/{dist → src}/css/amber.css +0 -0
- /package/{dist → src}/css/blue.css +0 -0
- /package/{dist → src}/css/cyan.css +0 -0
- /package/{dist → src}/css/emerald.css +0 -0
- /package/{dist → src}/css/fuchsia.css +0 -0
- /package/{dist → src}/css/gray.css +0 -0
- /package/{dist → src}/css/green.css +0 -0
- /package/{dist → src}/css/indigo.css +0 -0
- /package/{dist → src}/css/lime.css +0 -0
- /package/{dist → src}/css/neutral.css +0 -0
- /package/{dist → src}/css/orange.css +0 -0
- /package/{dist → src}/css/pink.css +0 -0
- /package/{dist → src}/css/purple.css +0 -0
- /package/{dist → src}/css/red.css +0 -0
- /package/{dist → src}/css/rose.css +0 -0
- /package/{dist → src}/css/sky.css +0 -0
- /package/{dist → src}/css/slate.css +0 -0
- /package/{dist → src}/css/stone.css +0 -0
- /package/{dist → src}/css/style.css +0 -0
- /package/{dist → src}/css/teal.css +0 -0
- /package/{dist → src}/css/violet.css +0 -0
- /package/{dist → src}/css/yellow.css +0 -0
- /package/{dist → src}/css/zinc.css +0 -0
package/dist/components/form.js
CHANGED
|
@@ -1,92 +1,76 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "@codefast/tailwind-variants";
|
|
4
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
4
5
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
|
-
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { useId } from "react";
|
|
7
|
-
import { createContextScope } from "@radix-ui/react-context";
|
|
8
7
|
import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
|
|
9
|
-
|
|
8
|
+
import { Label } from "#components/label";
|
|
10
9
|
const Form = FormProvider;
|
|
10
|
+
/* -----------------------------------------------------------------------------
|
|
11
|
+
* Context: FormField
|
|
12
|
+
* -------------------------------------------------------------------------- */
|
|
11
13
|
const FORM_FIELD_NAME = "FormField";
|
|
12
14
|
const [createFormFieldContext, createFormFieldScope] = createContextScope(FORM_FIELD_NAME);
|
|
13
15
|
const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext(FORM_FIELD_NAME);
|
|
14
16
|
function useFormItem(consumerName, scope) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
const { id } = useFormItemContext(consumerName, scope);
|
|
18
|
+
const { name } = useFormFieldContext(consumerName, scope);
|
|
19
|
+
const { getFieldState } = useFormContext();
|
|
20
|
+
const formState = useFormState({ name });
|
|
21
|
+
const fieldState = getFieldState(name, formState);
|
|
22
|
+
return {
|
|
23
|
+
formDescriptionId: `form-item-description-${id}`,
|
|
24
|
+
formItemId: `form-item-${id}`,
|
|
25
|
+
formMessageId: `form-item-message-${id}`,
|
|
26
|
+
id,
|
|
27
|
+
name,
|
|
28
|
+
...fieldState,
|
|
29
|
+
};
|
|
27
30
|
}
|
|
28
31
|
function FormField(formFieldProps) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
name: props.name,
|
|
32
|
-
scope: __scopeFormField,
|
|
33
|
-
children: /* @__PURE__ */ jsx(Controller, { ...props })
|
|
34
|
-
});
|
|
32
|
+
const { __scopeFormField, ...props } = formFieldProps;
|
|
33
|
+
return (_jsx(FormFieldContextProvider, { name: props.name, scope: __scopeFormField, children: _jsx(Controller, { ...props }) }));
|
|
35
34
|
}
|
|
36
|
-
|
|
35
|
+
/* -----------------------------------------------------------------------------
|
|
36
|
+
* Context: FormItem
|
|
37
|
+
* -------------------------------------------------------------------------- */
|
|
38
|
+
const FORM_ITEM_NAME = "FormItem";
|
|
39
|
+
const [FormItemContextProvider, useFormItemContext] = createFormFieldContext(FORM_ITEM_NAME);
|
|
37
40
|
function FormItem({ __scopeFormField, className, ...props }) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
scope: __scopeFormField,
|
|
41
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
42
|
-
className: cn("grid gap-2", className),
|
|
43
|
-
"data-slot": "form-item",
|
|
44
|
-
...props
|
|
45
|
-
})
|
|
46
|
-
});
|
|
41
|
+
const id = useId();
|
|
42
|
+
return (_jsx(FormItemContextProvider, { id: id, scope: __scopeFormField, children: _jsx("div", { className: cn("grid gap-2", className), "data-slot": "form-item", ...props }) }));
|
|
47
43
|
}
|
|
44
|
+
/* -----------------------------------------------------------------------------
|
|
45
|
+
* Component: FormLabel
|
|
46
|
+
* -------------------------------------------------------------------------- */
|
|
48
47
|
const FORM_LABEL_NAME = "FormLabel";
|
|
49
48
|
function FormLabel({ __scopeFormField, ...props }) {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"data-invalid": error ? true : void 0,
|
|
53
|
-
"data-slot": "form-label",
|
|
54
|
-
htmlFor: formItemId,
|
|
55
|
-
...props
|
|
56
|
-
});
|
|
49
|
+
const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
|
|
50
|
+
return (_jsx(Label, { "data-invalid": error ? true : undefined, "data-slot": "form-label", htmlFor: formItemId, ...props }));
|
|
57
51
|
}
|
|
52
|
+
/* -----------------------------------------------------------------------------
|
|
53
|
+
* Component: FormControl
|
|
54
|
+
* -------------------------------------------------------------------------- */
|
|
58
55
|
const FORM_CONTROL_NAME = "FormControl";
|
|
59
56
|
function FormControl({ __scopeFormField, ...props }) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
|
|
63
|
-
"aria-invalid": Boolean(error),
|
|
64
|
-
"data-slot": "form-control",
|
|
65
|
-
id: formItemId,
|
|
66
|
-
...props
|
|
67
|
-
});
|
|
57
|
+
const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(FORM_CONTROL_NAME, __scopeFormField);
|
|
58
|
+
return (_jsx(Slot, { "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId, "aria-invalid": Boolean(error), "data-slot": "form-control", id: formItemId, ...props }));
|
|
68
59
|
}
|
|
69
60
|
function FormDescription({ __scopeFormField, className, ...props }) {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
className: cn("text-xs text-muted-foreground", className),
|
|
73
|
-
"data-slot": "form-description",
|
|
74
|
-
id: formDescriptionId,
|
|
75
|
-
...props
|
|
76
|
-
});
|
|
61
|
+
const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
|
|
62
|
+
return (_jsx("p", { className: cn("text-xs text-muted-foreground", className), "data-slot": "form-description", id: formDescriptionId, ...props }));
|
|
77
63
|
}
|
|
64
|
+
/* -----------------------------------------------------------------------------
|
|
65
|
+
* Component: FormMessage
|
|
66
|
+
* -------------------------------------------------------------------------- */
|
|
78
67
|
const FORM_MESSAGE_NAME = "FormMessage";
|
|
79
68
|
function FormMessage({ __scopeFormField, children, className, ...props }) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
id: formMessageId,
|
|
87
|
-
...props,
|
|
88
|
-
children: body
|
|
89
|
-
});
|
|
69
|
+
const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
|
|
70
|
+
const body = error?.message ?? children;
|
|
71
|
+
if (!body) {
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
return (_jsx("p", { className: cn("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className), "data-slot": "form-message", id: formMessageId, ...props, children: body }));
|
|
90
75
|
}
|
|
91
|
-
|
|
92
|
-
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, createFormFieldScope };
|
|
76
|
+
export { createFormFieldScope, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, };
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
import { ComponentProps, JSX } from "react";
|
|
1
|
+
import type { ComponentProps, JSX } from "react";
|
|
2
2
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
3
|
-
|
|
4
|
-
//#region src/components/hover-card.d.ts
|
|
5
3
|
type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;
|
|
6
|
-
declare function HoverCard({
|
|
7
|
-
...props
|
|
8
|
-
}: HoverCardProps): JSX.Element;
|
|
4
|
+
declare function HoverCard({ ...props }: HoverCardProps): JSX.Element;
|
|
9
5
|
type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;
|
|
10
|
-
declare function HoverCardTrigger({
|
|
11
|
-
...props
|
|
12
|
-
}: HoverCardTriggerProps): JSX.Element;
|
|
6
|
+
declare function HoverCardTrigger({ ...props }: HoverCardTriggerProps): JSX.Element;
|
|
13
7
|
type HoverCardContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;
|
|
14
|
-
declare function HoverCardContent({
|
|
15
|
-
align,
|
|
16
|
-
className,
|
|
17
|
-
sideOffset,
|
|
18
|
-
...props
|
|
19
|
-
}: HoverCardContentProps): JSX.Element;
|
|
8
|
+
declare function HoverCardContent({ align, className, sideOffset, ...props }: HoverCardContentProps): JSX.Element;
|
|
20
9
|
type HoverCardArrowProps = ComponentProps<typeof HoverCardPrimitive.Arrow>;
|
|
21
|
-
declare function HoverCardArrow({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
//#endregion
|
|
26
|
-
export { HoverCard, HoverCardArrow, type HoverCardArrowProps, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps };
|
|
10
|
+
declare function HoverCardArrow({ className, ...props }: HoverCardArrowProps): JSX.Element;
|
|
11
|
+
export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger };
|
|
12
|
+
export type { HoverCardArrowProps, HoverCardContentProps, HoverCardProps, HoverCardTriggerProps };
|
|
13
|
+
//# sourceMappingURL=hover-card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAC;AAMjE,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC;AAErE,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAE5D;AAMD,KAAK,qBAAqB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAE/E,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAE1E;AAMD,KAAK,qBAAqB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAC;AAE/E,iBAAS,gBAAgB,CAAC,EACxB,KAAgB,EAChB,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAerC;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAQjF;AAMD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AACzE,YAAY,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAC"}
|
|
@@ -1,35 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
3
|
import { cn } from "@codefast/tailwind-variants";
|
|
3
|
-
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
5
|
-
//#region src/components/hover-card.tsx
|
|
6
5
|
function HoverCard({ ...props }) {
|
|
7
|
-
|
|
8
|
-
"data-slot": "hover-card",
|
|
9
|
-
...props
|
|
10
|
-
});
|
|
6
|
+
return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
|
|
11
7
|
}
|
|
12
8
|
function HoverCardTrigger({ ...props }) {
|
|
13
|
-
|
|
14
|
-
"data-slot": "hover-card-trigger",
|
|
15
|
-
...props
|
|
16
|
-
});
|
|
9
|
+
return _jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
|
|
17
10
|
}
|
|
18
11
|
function HoverCardContent({ align = "center", className, sideOffset = 4, ...props }) {
|
|
19
|
-
|
|
20
|
-
align,
|
|
21
|
-
className: cn("z-50 min-w-32 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2", className),
|
|
22
|
-
"data-slot": "hover-card-content",
|
|
23
|
-
sideOffset,
|
|
24
|
-
...props
|
|
25
|
-
}) });
|
|
12
|
+
return (_jsx(HoverCardPrimitive.Portal, { children: _jsx(HoverCardPrimitive.Content, { align: align, className: cn("z-50 min-w-32 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 text-popover-foreground shadow-lg ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2", className), "data-slot": "hover-card-content", sideOffset: sideOffset, ...props }) }));
|
|
26
13
|
}
|
|
27
14
|
function HoverCardArrow({ className, ...props }) {
|
|
28
|
-
|
|
29
|
-
className: cn("fill-popover", className),
|
|
30
|
-
"data-slot": "hover-card-arrow",
|
|
31
|
-
...props
|
|
32
|
-
});
|
|
15
|
+
return (_jsx(HoverCardPrimitive.Arrow, { className: cn("fill-popover", className), "data-slot": "hover-card-arrow", ...props }));
|
|
33
16
|
}
|
|
34
|
-
|
|
17
|
+
/* -----------------------------------------------------------------------------
|
|
18
|
+
* Exports
|
|
19
|
+
* -------------------------------------------------------------------------- */
|
|
35
20
|
export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger };
|
|
@@ -1,61 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"inline-end": string;
|
|
15
|
-
"inline-start": string;
|
|
16
|
-
};
|
|
1
|
+
import type { VariantProps } from "@codefast/tailwind-variants";
|
|
2
|
+
import type { ComponentProps, JSX } from "react";
|
|
3
|
+
import type { ButtonProps } from "#components/button";
|
|
4
|
+
import type { InputProps } from "#components/input";
|
|
5
|
+
import type { TextareaProps } from "#components/textarea";
|
|
6
|
+
declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantFunctionType<import("@codefast/tailwind-variants").ConfigurationSchema, Record<string, never>>;
|
|
7
|
+
declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
|
|
8
|
+
align: {
|
|
9
|
+
"block-end": string;
|
|
10
|
+
"block-start": string;
|
|
11
|
+
"inline-end": string;
|
|
12
|
+
"inline-start": string;
|
|
13
|
+
};
|
|
17
14
|
}, Record<string, never>>;
|
|
18
|
-
declare const inputGroupButtonVariants:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
declare const inputGroupButtonVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
|
|
16
|
+
size: {
|
|
17
|
+
"icon-sm": string;
|
|
18
|
+
"icon-xs": string;
|
|
19
|
+
sm: string;
|
|
20
|
+
xs: string;
|
|
21
|
+
};
|
|
25
22
|
}, Record<string, never>>;
|
|
26
23
|
type InputGroupProps = ComponentProps<"div">;
|
|
27
|
-
declare function InputGroup({
|
|
28
|
-
className,
|
|
29
|
-
...props
|
|
30
|
-
}: InputGroupProps): JSX.Element;
|
|
24
|
+
declare function InputGroup({ className, ...props }: InputGroupProps): JSX.Element;
|
|
31
25
|
type InputGroupAddonProps = ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
|
|
32
|
-
declare function InputGroupAddon({
|
|
33
|
-
align,
|
|
34
|
-
className,
|
|
35
|
-
...props
|
|
36
|
-
}: InputGroupAddonProps): JSX.Element;
|
|
26
|
+
declare function InputGroupAddon({ align, className, ...props }: InputGroupAddonProps): JSX.Element;
|
|
37
27
|
type InputGroupButtonProps = Omit<ButtonProps, "size"> & VariantProps<typeof inputGroupButtonVariants>;
|
|
38
|
-
declare function InputGroupButton({
|
|
39
|
-
className,
|
|
40
|
-
size,
|
|
41
|
-
type,
|
|
42
|
-
variant,
|
|
43
|
-
...props
|
|
44
|
-
}: InputGroupButtonProps): JSX.Element;
|
|
28
|
+
declare function InputGroupButton({ className, size, type, variant, ...props }: InputGroupButtonProps): JSX.Element;
|
|
45
29
|
type InputGroupTextProps = ComponentProps<"span">;
|
|
46
|
-
declare function InputGroupText({
|
|
47
|
-
className,
|
|
48
|
-
...props
|
|
49
|
-
}: InputGroupTextProps): JSX.Element;
|
|
30
|
+
declare function InputGroupText({ className, ...props }: InputGroupTextProps): JSX.Element;
|
|
50
31
|
type InputGroupInputProps = InputProps;
|
|
51
|
-
declare function InputGroupInput({
|
|
52
|
-
className,
|
|
53
|
-
...props
|
|
54
|
-
}: InputGroupInputProps): JSX.Element;
|
|
32
|
+
declare function InputGroupInput({ className, ...props }: InputGroupInputProps): JSX.Element;
|
|
55
33
|
type InputGroupTextareaProps = TextareaProps;
|
|
56
|
-
declare function InputGroupTextarea({
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
//#endregion
|
|
61
|
-
export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };
|
|
34
|
+
declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): JSX.Element;
|
|
35
|
+
export { InputGroup, InputGroupAddon, inputGroupAddonVariants, InputGroupButton, inputGroupButtonVariants, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupVariants, };
|
|
36
|
+
export type { InputGroupAddonProps, InputGroupButtonProps, InputGroupInputProps, InputGroupProps, InputGroupTextareaProps, InputGroupTextProps, };
|
|
37
|
+
//# sourceMappingURL=input-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAU1D,QAAA,MAAM,kBAAkB,6IAWtB,CAAC;AAMH,QAAA,MAAM,uBAAuB;;;;;;;yBAiB3B,CAAC;AAMH,QAAA,MAAM,wBAAwB;;;;;;;yBAa5B,CAAC;AAMH,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7C,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CASzE;AAMD,KAAK,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAEjG,iBAAS,eAAe,CAAC,EACvB,KAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAuBpC;AAMD,KAAK,qBAAqB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GACpD,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAEhD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAW,EACX,IAAe,EACf,OAAiB,EACjB,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAWrC;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAElD,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAWjF;AAMD,KAAK,oBAAoB,GAAG,UAAU,CAAC;AAEvC,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAWnF;AAMD,KAAK,uBAAuB,GAAG,aAAa,CAAC;AAE7C,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAWzF;AAMD,OAAO,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,kBAAkB,GACnB,CAAC;AAEF,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,uBAAuB,EACvB,mBAAmB,GACpB,CAAC"}
|
|
@@ -1,84 +1,77 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import { Input } from "./input.js";
|
|
4
|
-
import { Textarea } from "./textarea.js";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
3
|
import { cn, tv } from "@codefast/tailwind-variants";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
import { Button } from "#components/button";
|
|
5
|
+
import { Input } from "#components/input";
|
|
6
|
+
import { Textarea } from "#components/textarea";
|
|
7
|
+
/* -----------------------------------------------------------------------------
|
|
8
|
+
* Variants: InputGroup
|
|
9
|
+
* -------------------------------------------------------------------------- */
|
|
10
|
+
const inputGroupVariants = tv({
|
|
11
|
+
base: cn("group/input-group relative flex w-full items-center rounded-lg border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2", "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3", "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-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40"),
|
|
12
|
+
});
|
|
13
|
+
/* -----------------------------------------------------------------------------
|
|
14
|
+
* Variants: InputGroupAddon
|
|
15
|
+
* -------------------------------------------------------------------------- */
|
|
9
16
|
const inputGroupAddonVariants = tv({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
base: cn("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"),
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
align: "inline-start",
|
|
20
|
+
},
|
|
21
|
+
variants: {
|
|
22
|
+
align: {
|
|
23
|
+
"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
|
|
24
|
+
"block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
|
|
25
|
+
"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
|
|
26
|
+
"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
|
|
27
|
+
},
|
|
28
|
+
},
|
|
18
29
|
});
|
|
30
|
+
/* -----------------------------------------------------------------------------
|
|
31
|
+
* Variants: InputGroupButton
|
|
32
|
+
* -------------------------------------------------------------------------- */
|
|
19
33
|
const inputGroupButtonVariants = tv({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
base: "flex items-center gap-2 text-sm shadow-none [&>svg:not([class*='size-'])]:size-4",
|
|
35
|
+
defaultVariants: {
|
|
36
|
+
size: "xs",
|
|
37
|
+
},
|
|
38
|
+
variants: {
|
|
39
|
+
size: {
|
|
40
|
+
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
41
|
+
"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
|
42
|
+
sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
|
|
43
|
+
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg]:size-3.5",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
28
46
|
});
|
|
29
47
|
function InputGroup({ className, ...props }) {
|
|
30
|
-
|
|
31
|
-
className: inputGroupVariants({ className }),
|
|
32
|
-
"data-slot": "input-group",
|
|
33
|
-
role: "group",
|
|
34
|
-
...props
|
|
35
|
-
});
|
|
48
|
+
return (_jsx("div", { className: inputGroupVariants({ className }), "data-slot": "input-group", role: "group", ...props }));
|
|
36
49
|
}
|
|
37
50
|
function InputGroupAddon({ align = "inline-start", className, ...props }) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
...props
|
|
50
|
-
});
|
|
51
|
+
return (_jsx("div", { className: cn(inputGroupAddonVariants({ align }), className), "data-align": align, "data-slot": "input-group-addon", role: "group", onPointerDown: (event) => {
|
|
52
|
+
if (event.target.closest("button")) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
const control = event.currentTarget.parentElement?.querySelector("input, textarea");
|
|
57
|
+
if (control instanceof HTMLElement) {
|
|
58
|
+
control.focus();
|
|
59
|
+
}
|
|
60
|
+
}, ...props }));
|
|
51
61
|
}
|
|
52
62
|
function InputGroupButton({ className, size = "xs", type = "button", variant = "ghost", ...props }) {
|
|
53
|
-
|
|
54
|
-
className: cn(inputGroupButtonVariants({ size }), className),
|
|
55
|
-
"data-size": size,
|
|
56
|
-
"data-slot": "input-group-button",
|
|
57
|
-
type,
|
|
58
|
-
variant,
|
|
59
|
-
...props
|
|
60
|
-
});
|
|
63
|
+
return (_jsx(Button, { className: cn(inputGroupButtonVariants({ size }), className), "data-size": size, "data-slot": "input-group-button", type: type, variant: variant, ...props }));
|
|
61
64
|
}
|
|
62
65
|
function InputGroupText({ className, ...props }) {
|
|
63
|
-
|
|
64
|
-
className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
|
|
65
|
-
"data-slot": "input-group-text",
|
|
66
|
-
...props
|
|
67
|
-
});
|
|
66
|
+
return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), "data-slot": "input-group-text", ...props }));
|
|
68
67
|
}
|
|
69
68
|
function InputGroupInput({ className, ...props }) {
|
|
70
|
-
|
|
71
|
-
className: cn("flex-1 rounded-none border-0 bg-transparent px-3 py-1 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
|
|
72
|
-
"data-slot": "input-group-control",
|
|
73
|
-
...props
|
|
74
|
-
});
|
|
69
|
+
return (_jsx(Input, { className: cn("flex-1 rounded-none border-0 bg-transparent px-3 py-1 shadow-none focus-visible:ring-0 dark:bg-transparent", className), "data-slot": "input-group-control", ...props }));
|
|
75
70
|
}
|
|
76
71
|
function InputGroupTextarea({ className, ...props }) {
|
|
77
|
-
|
|
78
|
-
className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
|
|
79
|
-
"data-slot": "input-group-control",
|
|
80
|
-
...props
|
|
81
|
-
});
|
|
72
|
+
return (_jsx(Textarea, { className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), "data-slot": "input-group-control", ...props }));
|
|
82
73
|
}
|
|
83
|
-
|
|
84
|
-
|
|
74
|
+
/* -----------------------------------------------------------------------------
|
|
75
|
+
* Exports
|
|
76
|
+
* -------------------------------------------------------------------------- */
|
|
77
|
+
export { InputGroup, InputGroupAddon, inputGroupAddonVariants, InputGroupButton, inputGroupButtonVariants, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupVariants, };
|
|
@@ -1,28 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
className,
|
|
10
|
-
defaultValue,
|
|
11
|
-
disabled,
|
|
12
|
-
formatOptions,
|
|
13
|
-
id,
|
|
14
|
-
loaderPosition,
|
|
15
|
-
loading,
|
|
16
|
-
max,
|
|
17
|
-
min,
|
|
18
|
-
onChange,
|
|
19
|
-
prefix,
|
|
20
|
-
readOnly,
|
|
21
|
-
spinner,
|
|
22
|
-
step,
|
|
23
|
-
suffix,
|
|
24
|
-
value,
|
|
25
|
-
...props
|
|
26
|
-
}: InputNumberProps): JSX.Element;
|
|
27
|
-
//#endregion
|
|
28
|
-
export { InputNumber, type InputNumberProps };
|
|
1
|
+
import type { ComponentProps, JSX } from "react";
|
|
2
|
+
import * as InputNumberPrimitive from "#primitives/input-number";
|
|
3
|
+
interface InputNumberProps extends ComponentProps<typeof InputNumberPrimitive.Field>, ComponentProps<typeof InputNumberPrimitive.Root> {
|
|
4
|
+
}
|
|
5
|
+
declare function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, ...props }: InputNumberProps): JSX.Element;
|
|
6
|
+
export { InputNumber };
|
|
7
|
+
export type { InputNumberProps };
|
|
8
|
+
//# sourceMappingURL=input-number.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-number.d.ts","sourceRoot":"","sources":["../../src/components/input-number.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,KAAK,oBAAoB,MAAM,0BAA0B,CAAC;AAMjE,UAAU,gBACR,SACE,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,EACjD,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;CAAG;AAEvD,iBAAS,WAAW,CAAC,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,EAAE,EACF,cAAc,EACd,OAAO,EACP,GAAG,EACH,GAAG,EACH,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAkEhC;AAMD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,61 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import { Spinner } from "./spinner.js";
|
|
4
|
-
import { DecrementButton as InputNumberDecrementButton, Field as InputNumberField, IncrementButton as InputNumberIncrementButton, InputNumber as InputNumber$1 } from "../primitives/input-number.js";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
3
|
import { cn } from "@codefast/tailwind-variants";
|
|
6
4
|
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
7
|
-
import {
|
|
8
|
-
|
|
5
|
+
import { buttonVariants } from "#components/button";
|
|
6
|
+
import { Spinner } from "#components/spinner";
|
|
7
|
+
import * as InputNumberPrimitive from "#primitives/input-number";
|
|
9
8
|
function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, ...props }) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
formatOptions,
|
|
18
|
-
id,
|
|
19
|
-
loaderPosition,
|
|
20
|
-
loading,
|
|
21
|
-
max,
|
|
22
|
-
min,
|
|
23
|
-
prefix,
|
|
24
|
-
readOnly,
|
|
25
|
-
spinner: spinner ?? /* @__PURE__ */ jsx(Spinner, {}, "spinner"),
|
|
26
|
-
step,
|
|
27
|
-
suffix,
|
|
28
|
-
value,
|
|
29
|
-
onChange,
|
|
30
|
-
children: [/* @__PURE__ */ jsx(InputNumberField, {
|
|
31
|
-
autoCapitalize: "none",
|
|
32
|
-
autoComplete: "off",
|
|
33
|
-
autoCorrect: "off",
|
|
34
|
-
className: "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-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",
|
|
35
|
-
spellCheck: "false",
|
|
36
|
-
...props
|
|
37
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
38
|
-
className: cn("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 order-last ml-auto grid h-full shrink-0 divide-y divide-input border-l border-l-input transition 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"),
|
|
39
|
-
"data-slot": "input-number-buttons",
|
|
40
|
-
children: [/* @__PURE__ */ jsx(InputNumberIncrementButton, {
|
|
41
|
-
"aria-label": "Increment",
|
|
42
|
-
className: buttonVariants({
|
|
43
|
-
className: "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
|
|
44
|
-
variant: "ghost"
|
|
45
|
-
}),
|
|
46
|
-
"data-slot": "input-number-increment-button",
|
|
47
|
-
children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
|
|
48
|
-
}), /* @__PURE__ */ jsx(InputNumberDecrementButton, {
|
|
49
|
-
"aria-label": "Decrement",
|
|
50
|
-
className: buttonVariants({
|
|
51
|
-
className: "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
|
|
52
|
-
variant: "ghost"
|
|
53
|
-
}),
|
|
54
|
-
"data-slot": "input-number-decrement-button",
|
|
55
|
-
children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
56
|
-
})]
|
|
57
|
-
})]
|
|
58
|
-
});
|
|
9
|
+
return (_jsxs(InputNumberPrimitive.Root, { ariaDecrementLabel: ariaDecrementLabel, ariaIncrementLabel: ariaIncrementLabel, className: cn("group peer flex h-9 w-full grow items-center gap-3 rounded-lg border border-input px-3 pr-0 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 has-disabled:opacity-50 has-aria-invalid:border-destructive 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 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>svg]:text-muted-foreground", className), "data-slot": "input-number", defaultValue: defaultValue, disabled: disabled, formatOptions: formatOptions, id: id, loaderPosition: loaderPosition, loading: loading, max: max, min: min, prefix: prefix, readOnly: readOnly, spinner: spinner ?? _jsx(Spinner, {}, "spinner"), step: step, suffix: suffix, value: value, onChange: onChange, children: [_jsx(InputNumberPrimitive.Field, { autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", className: "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-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", spellCheck: "false", ...props }), _jsxs("div", { className: cn("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 order-last ml-auto grid h-full shrink-0 divide-y divide-input border-l border-l-input transition 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"), "data-slot": "input-number-buttons", children: [_jsx(InputNumberPrimitive.IncrementButton, { "aria-label": "Increment", className: buttonVariants({
|
|
10
|
+
className: "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
|
|
11
|
+
variant: "ghost",
|
|
12
|
+
}), "data-slot": "input-number-increment-button", children: _jsx(ChevronUpIcon, {}) }), _jsx(InputNumberPrimitive.DecrementButton, { "aria-label": "Decrement", className: buttonVariants({
|
|
13
|
+
className: "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
|
|
14
|
+
variant: "ghost",
|
|
15
|
+
}), "data-slot": "input-number-decrement-button", children: _jsx(ChevronDownIcon, {}) })] })] }));
|
|
59
16
|
}
|
|
60
|
-
|
|
17
|
+
/* -----------------------------------------------------------------------------
|
|
18
|
+
* Exports
|
|
19
|
+
* -------------------------------------------------------------------------- */
|
|
61
20
|
export { InputNumber };
|