@codefast/ui 0.3.15 → 0.3.16-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 +7 -0
- package/dist/components/accordion.d.mts +30 -0
- package/dist/components/accordion.mjs +15 -0
- package/dist/components/alert-dialog.d.mts +60 -0
- package/dist/components/alert-dialog.mjs +30 -0
- package/dist/components/alert.d.mts +21 -0
- package/dist/components/alert.mjs +12 -0
- package/dist/components/aspect-ratio.d.mts +6 -0
- package/dist/components/aspect-ratio.mjs +3 -0
- package/dist/components/avatar.d.mts +18 -0
- package/dist/components/avatar.mjs +9 -0
- package/dist/components/badge.d.mts +9 -0
- package/dist/components/badge.mjs +6 -0
- package/dist/components/breadcrumb.d.mts +42 -0
- package/dist/components/breadcrumb.mjs +21 -0
- package/dist/components/button-group.d.mts +21 -0
- package/dist/components/button-group.mjs +12 -0
- package/dist/components/button.d.mts +9 -0
- package/dist/components/button.mjs +6 -0
- package/dist/components/calendar.d.mts +12 -0
- package/dist/components/calendar.mjs +6 -0
- package/dist/components/card.d.mts +42 -0
- package/dist/components/card.mjs +21 -0
- package/dist/components/carousel.d.mts +33 -0
- package/dist/components/carousel.mjs +15 -0
- package/dist/components/chart.d.mts +39 -0
- package/dist/components/chart.mjs +18 -0
- package/dist/components/checkbox-cards.d.mts +12 -0
- package/dist/components/checkbox-cards.mjs +6 -0
- package/dist/components/checkbox-group.d.mts +12 -0
- package/dist/components/checkbox-group.mjs +6 -0
- package/dist/components/checkbox.d.mts +6 -0
- package/dist/components/checkbox.mjs +3 -0
- package/dist/components/collapsible.d.mts +18 -0
- package/dist/components/collapsible.mjs +9 -0
- package/dist/components/command.d.mts +60 -0
- package/dist/components/command.mjs +30 -0
- package/dist/components/context-menu.d.mts +90 -0
- package/dist/components/context-menu.mjs +45 -0
- package/dist/components/dialog.d.mts +54 -0
- package/dist/components/dialog.mjs +27 -0
- package/dist/components/drawer.d.mts +54 -0
- package/dist/components/drawer.mjs +27 -0
- package/dist/components/dropdown-menu.d.mts +90 -0
- package/dist/components/dropdown-menu.mjs +45 -0
- package/dist/components/empty.d.mts +39 -0
- package/dist/components/empty.mjs +21 -0
- package/dist/components/field.d.mts +63 -0
- package/dist/components/field.mjs +33 -0
- package/dist/components/form.d.mts +42 -0
- package/dist/components/form.mjs +21 -0
- package/dist/components/hover-card.d.mts +24 -0
- package/dist/components/hover-card.mjs +12 -0
- package/dist/components/input-group.d.mts +45 -0
- package/dist/components/input-group.mjs +27 -0
- package/dist/components/input-number.d.mts +6 -0
- package/dist/components/input-number.mjs +3 -0
- package/dist/components/input-otp.d.mts +24 -0
- package/dist/components/input-otp.mjs +12 -0
- package/dist/components/input-password.d.mts +6 -0
- package/dist/components/input-password.mjs +3 -0
- package/dist/components/input-search.d.mts +6 -0
- package/dist/components/input-search.mjs +3 -0
- package/dist/components/input.d.mts +6 -0
- package/dist/components/input.mjs +3 -0
- package/dist/components/item.d.mts +66 -0
- package/dist/components/item.mjs +36 -0
- package/dist/components/kbd.d.mts +12 -0
- package/dist/components/kbd.mjs +6 -0
- package/dist/components/label.d.mts +6 -0
- package/dist/components/label.mjs +3 -0
- package/dist/components/menubar.d.mts +96 -0
- package/dist/components/menubar.mjs +48 -0
- package/dist/components/native-select.d.mts +18 -0
- package/dist/components/native-select.mjs +9 -0
- package/dist/components/navigation-menu.d.mts +39 -0
- package/dist/components/navigation-menu.mjs +21 -0
- package/dist/components/pagination.d.mts +42 -0
- package/dist/components/pagination.mjs +21 -0
- package/dist/components/popover.d.mts +30 -0
- package/dist/components/popover.mjs +15 -0
- package/dist/components/progress-circle.d.mts +9 -0
- package/dist/components/progress-circle.mjs +6 -0
- package/dist/components/progress.d.mts +6 -0
- package/dist/components/progress.mjs +3 -0
- package/dist/components/radio-cards.d.mts +12 -0
- package/dist/components/radio-cards.mjs +6 -0
- package/dist/components/radio-group.d.mts +12 -0
- package/dist/components/radio-group.mjs +6 -0
- package/dist/components/radio.d.mts +6 -0
- package/dist/components/radio.mjs +3 -0
- package/dist/components/resizable.d.mts +18 -0
- package/dist/components/resizable.mjs +9 -0
- package/dist/components/scroll-area.d.mts +15 -0
- package/dist/components/scroll-area.mjs +9 -0
- package/dist/components/select.d.mts +60 -0
- package/dist/components/select.mjs +30 -0
- package/dist/components/separator.d.mts +15 -0
- package/dist/components/separator.mjs +9 -0
- package/dist/components/sheet.d.mts +57 -0
- package/dist/components/sheet.mjs +30 -0
- package/dist/components/sidebar.d.mts +141 -0
- package/dist/components/sidebar.mjs +72 -0
- package/dist/components/skeleton.d.mts +6 -0
- package/dist/components/skeleton.mjs +3 -0
- package/dist/components/slider.d.mts +6 -0
- package/dist/components/slider.mjs +3 -0
- package/dist/components/sonner.d.mts +6 -0
- package/dist/components/sonner.mjs +3 -0
- package/dist/components/spinner.d.mts +6 -0
- package/dist/components/spinner.mjs +3 -0
- package/dist/components/switch.d.mts +6 -0
- package/dist/components/switch.mjs +3 -0
- package/dist/components/table.d.mts +48 -0
- package/dist/components/table.mjs +24 -0
- package/dist/components/tabs.d.mts +24 -0
- package/dist/components/tabs.mjs +12 -0
- package/dist/components/textarea.d.mts +6 -0
- package/dist/components/textarea.mjs +3 -0
- package/dist/components/toggle-group.d.mts +12 -0
- package/dist/components/toggle-group.mjs +6 -0
- package/dist/components/toggle.d.mts +12 -0
- package/dist/components/toggle.mjs +6 -0
- package/dist/components/tooltip.d.mts +30 -0
- package/dist/components/tooltip.mjs +15 -0
- package/dist/hooks/use-animated-value.d.mts +2 -0
- package/dist/hooks/use-animated-value.mjs +5 -3
- package/dist/hooks/use-copy-to-clipboard.d.mts +2 -0
- package/dist/hooks/use-copy-to-clipboard.mjs +5 -3
- package/dist/hooks/use-is-mobile.d.mts +2 -0
- package/dist/hooks/use-is-mobile.mjs +5 -3
- package/dist/hooks/use-media-query.d.mts +2 -0
- package/dist/hooks/use-media-query.mjs +5 -3
- package/dist/hooks/use-mutation-observer.d.mts +2 -0
- package/dist/hooks/use-mutation-observer.mjs +5 -3
- package/dist/hooks/use-pagination.d.mts +7 -0
- package/dist/hooks/use-pagination.mjs +7 -3
- package/dist/primitives/checkbox-group.d.mts +12 -0
- package/dist/primitives/checkbox-group.mjs +6 -0
- package/dist/primitives/input-number.d.mts +22 -0
- package/dist/primitives/input-number.mjs +12 -0
- package/dist/primitives/input.d.mts +10 -0
- package/dist/primitives/input.mjs +6 -0
- package/dist/primitives/progress-circle.d.mts +30 -0
- package/dist/primitives/progress-circle.mjs +19 -7
- package/package.json +4 -4
|
@@ -1,42 +1,90 @@
|
|
|
1
1
|
import { ComponentProps, JSX } from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/table.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @since 0.3.16-canary.0
|
|
6
|
+
*/
|
|
4
7
|
type TableProps = ComponentProps<"table">;
|
|
8
|
+
/**
|
|
9
|
+
* @since 0.3.16-canary.0
|
|
10
|
+
*/
|
|
5
11
|
declare function Table({
|
|
6
12
|
className,
|
|
7
13
|
...props
|
|
8
14
|
}: TableProps): JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* @since 0.3.16-canary.0
|
|
17
|
+
*/
|
|
9
18
|
type TableHeaderProps = ComponentProps<"thead">;
|
|
19
|
+
/**
|
|
20
|
+
* @since 0.3.16-canary.0
|
|
21
|
+
*/
|
|
10
22
|
declare function TableHeader({
|
|
11
23
|
className,
|
|
12
24
|
...props
|
|
13
25
|
}: TableHeaderProps): JSX.Element;
|
|
26
|
+
/**
|
|
27
|
+
* @since 0.3.16-canary.0
|
|
28
|
+
*/
|
|
14
29
|
type TableBodyProps = ComponentProps<"tbody">;
|
|
30
|
+
/**
|
|
31
|
+
* @since 0.3.16-canary.0
|
|
32
|
+
*/
|
|
15
33
|
declare function TableBody({
|
|
16
34
|
className,
|
|
17
35
|
...props
|
|
18
36
|
}: TableBodyProps): JSX.Element;
|
|
37
|
+
/**
|
|
38
|
+
* @since 0.3.16-canary.0
|
|
39
|
+
*/
|
|
19
40
|
type TableFooterProps = ComponentProps<"tfoot">;
|
|
41
|
+
/**
|
|
42
|
+
* @since 0.3.16-canary.0
|
|
43
|
+
*/
|
|
20
44
|
declare function TableFooter({
|
|
21
45
|
className,
|
|
22
46
|
...props
|
|
23
47
|
}: TableFooterProps): JSX.Element;
|
|
48
|
+
/**
|
|
49
|
+
* @since 0.3.16-canary.0
|
|
50
|
+
*/
|
|
24
51
|
type TableRowProps = ComponentProps<"tr">;
|
|
52
|
+
/**
|
|
53
|
+
* @since 0.3.16-canary.0
|
|
54
|
+
*/
|
|
25
55
|
declare function TableRow({
|
|
26
56
|
className,
|
|
27
57
|
...props
|
|
28
58
|
}: TableRowProps): JSX.Element;
|
|
59
|
+
/**
|
|
60
|
+
* @since 0.3.16-canary.0
|
|
61
|
+
*/
|
|
29
62
|
type TableHeadProps = ComponentProps<"th">;
|
|
63
|
+
/**
|
|
64
|
+
* @since 0.3.16-canary.0
|
|
65
|
+
*/
|
|
30
66
|
declare function TableHead({
|
|
31
67
|
className,
|
|
32
68
|
...props
|
|
33
69
|
}: TableHeadProps): JSX.Element;
|
|
70
|
+
/**
|
|
71
|
+
* @since 0.3.16-canary.0
|
|
72
|
+
*/
|
|
34
73
|
type TableCellProps = ComponentProps<"td">;
|
|
74
|
+
/**
|
|
75
|
+
* @since 0.3.16-canary.0
|
|
76
|
+
*/
|
|
35
77
|
declare function TableCell({
|
|
36
78
|
className,
|
|
37
79
|
...props
|
|
38
80
|
}: TableCellProps): JSX.Element;
|
|
81
|
+
/**
|
|
82
|
+
* @since 0.3.16-canary.0
|
|
83
|
+
*/
|
|
39
84
|
type TableCaptionProps = ComponentProps<"caption">;
|
|
85
|
+
/**
|
|
86
|
+
* @since 0.3.16-canary.0
|
|
87
|
+
*/
|
|
40
88
|
declare function TableCaption({
|
|
41
89
|
className,
|
|
42
90
|
...props
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.mjs";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/table.tsx
|
|
4
|
+
/**
|
|
5
|
+
* @since 0.3.16-canary.0
|
|
6
|
+
*/
|
|
4
7
|
function Table({ className, ...props }) {
|
|
5
8
|
return /* @__PURE__ */ jsx("div", {
|
|
6
9
|
className: cn("relative", "w-full overflow-auto"),
|
|
@@ -12,6 +15,9 @@ function Table({ className, ...props }) {
|
|
|
12
15
|
})
|
|
13
16
|
});
|
|
14
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* @since 0.3.16-canary.0
|
|
20
|
+
*/
|
|
15
21
|
function TableHeader({ className, ...props }) {
|
|
16
22
|
return /* @__PURE__ */ jsx("thead", {
|
|
17
23
|
className: cn("*:border-b", "*:has-aria-expanded:bg-transparent", className),
|
|
@@ -19,6 +25,9 @@ function TableHeader({ className, ...props }) {
|
|
|
19
25
|
...props
|
|
20
26
|
});
|
|
21
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* @since 0.3.16-canary.0
|
|
30
|
+
*/
|
|
22
31
|
function TableBody({ className, ...props }) {
|
|
23
32
|
return /* @__PURE__ */ jsx("tbody", {
|
|
24
33
|
className: cn("*:last-child:border-0", className),
|
|
@@ -26,6 +35,9 @@ function TableBody({ className, ...props }) {
|
|
|
26
35
|
...props
|
|
27
36
|
});
|
|
28
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* @since 0.3.16-canary.0
|
|
40
|
+
*/
|
|
29
41
|
function TableFooter({ className, ...props }) {
|
|
30
42
|
return /* @__PURE__ */ jsx("tfoot", {
|
|
31
43
|
className: cn("bg-muted/50 font-medium", "*:border-t *:border-b-0", "*:has-aria-expanded:bg-transparent", className),
|
|
@@ -33,6 +45,9 @@ function TableFooter({ className, ...props }) {
|
|
|
33
45
|
...props
|
|
34
46
|
});
|
|
35
47
|
}
|
|
48
|
+
/**
|
|
49
|
+
* @since 0.3.16-canary.0
|
|
50
|
+
*/
|
|
36
51
|
function TableRow({ className, ...props }) {
|
|
37
52
|
return /* @__PURE__ */ jsx("tr", {
|
|
38
53
|
className: cn("border-b", "transition-colors", "hover:bg-muted/50", "has-aria-expanded:bg-muted/50", "data-selected:bg-muted", className),
|
|
@@ -40,6 +55,9 @@ function TableRow({ className, ...props }) {
|
|
|
40
55
|
...props
|
|
41
56
|
});
|
|
42
57
|
}
|
|
58
|
+
/**
|
|
59
|
+
* @since 0.3.16-canary.0
|
|
60
|
+
*/
|
|
43
61
|
function TableHead({ className, ...props }) {
|
|
44
62
|
return /* @__PURE__ */ jsx("th", {
|
|
45
63
|
className: cn("p-2", "text-left align-middle font-medium", className),
|
|
@@ -47,6 +65,9 @@ function TableHead({ className, ...props }) {
|
|
|
47
65
|
...props
|
|
48
66
|
});
|
|
49
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* @since 0.3.16-canary.0
|
|
70
|
+
*/
|
|
50
71
|
function TableCell({ className, ...props }) {
|
|
51
72
|
return /* @__PURE__ */ jsx("td", {
|
|
52
73
|
className: cn("p-2", "align-middle", className),
|
|
@@ -54,6 +75,9 @@ function TableCell({ className, ...props }) {
|
|
|
54
75
|
...props
|
|
55
76
|
});
|
|
56
77
|
}
|
|
78
|
+
/**
|
|
79
|
+
* @since 0.3.16-canary.0
|
|
80
|
+
*/
|
|
57
81
|
function TableCaption({ className, ...props }) {
|
|
58
82
|
return /* @__PURE__ */ jsx("caption", {
|
|
59
83
|
className: cn("mt-4", "text-sm text-muted-foreground", className),
|
|
@@ -2,22 +2,46 @@ import { ComponentProps, JSX } from "react";
|
|
|
2
2
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
3
3
|
|
|
4
4
|
//#region src/components/tabs.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* @since 0.3.16-canary.0
|
|
7
|
+
*/
|
|
5
8
|
type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
|
|
9
|
+
/**
|
|
10
|
+
* @since 0.3.16-canary.0
|
|
11
|
+
*/
|
|
6
12
|
declare function Tabs({
|
|
7
13
|
className,
|
|
8
14
|
...props
|
|
9
15
|
}: TabsProps): JSX.Element;
|
|
16
|
+
/**
|
|
17
|
+
* @since 0.3.16-canary.0
|
|
18
|
+
*/
|
|
10
19
|
type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;
|
|
20
|
+
/**
|
|
21
|
+
* @since 0.3.16-canary.0
|
|
22
|
+
*/
|
|
11
23
|
declare function TabsList({
|
|
12
24
|
className,
|
|
13
25
|
...props
|
|
14
26
|
}: TabsListProps): JSX.Element;
|
|
27
|
+
/**
|
|
28
|
+
* @since 0.3.16-canary.0
|
|
29
|
+
*/
|
|
15
30
|
type TabsTriggerProps = ComponentProps<typeof TabsPrimitive.Trigger>;
|
|
31
|
+
/**
|
|
32
|
+
* @since 0.3.16-canary.0
|
|
33
|
+
*/
|
|
16
34
|
declare function TabsTrigger({
|
|
17
35
|
className,
|
|
18
36
|
...props
|
|
19
37
|
}: TabsTriggerProps): JSX.Element;
|
|
38
|
+
/**
|
|
39
|
+
* @since 0.3.16-canary.0
|
|
40
|
+
*/
|
|
20
41
|
type TabsContentProps = ComponentProps<typeof TabsPrimitive.Content>;
|
|
42
|
+
/**
|
|
43
|
+
* @since 0.3.16-canary.0
|
|
44
|
+
*/
|
|
21
45
|
declare function TabsContent({
|
|
22
46
|
className,
|
|
23
47
|
...props
|
package/dist/components/tabs.mjs
CHANGED
|
@@ -3,6 +3,9 @@ import { cn } from "../lib/utils.mjs";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
5
5
|
//#region src/components/tabs.tsx
|
|
6
|
+
/**
|
|
7
|
+
* @since 0.3.16-canary.0
|
|
8
|
+
*/
|
|
6
9
|
function Tabs({ className, ...props }) {
|
|
7
10
|
return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
|
|
8
11
|
className: cn("flex flex-col gap-2", className),
|
|
@@ -10,6 +13,9 @@ function Tabs({ className, ...props }) {
|
|
|
10
13
|
...props
|
|
11
14
|
});
|
|
12
15
|
}
|
|
16
|
+
/**
|
|
17
|
+
* @since 0.3.16-canary.0
|
|
18
|
+
*/
|
|
13
19
|
function TabsList({ className, ...props }) {
|
|
14
20
|
return /* @__PURE__ */ jsx(TabsPrimitive.List, {
|
|
15
21
|
className: cn("inline-flex w-fit items-center justify-center gap-1 px-1 py-1", "rounded-xl", "bg-muted text-muted-foreground", className),
|
|
@@ -17,6 +23,9 @@ function TabsList({ className, ...props }) {
|
|
|
17
23
|
...props
|
|
18
24
|
});
|
|
19
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* @since 0.3.16-canary.0
|
|
28
|
+
*/
|
|
20
29
|
function TabsTrigger({ className, ...props }) {
|
|
21
30
|
return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
|
|
22
31
|
className: cn("inline-flex items-center justify-center gap-1.5", "px-2 py-1.5", "rounded-lg", "text-sm font-medium whitespace-nowrap text-muted-foreground", "transition", "not-dark:outline-hidden", "hover:not-disabled:text-foreground", "focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "dark:focus-visible:-outline-offset-1 dark:focus-visible:outline-ring", "data-active:bg-background data-active:text-foreground data-active:shadow-sm", "dark:data-active:bg-input/50", "dark:focus-visible:data-active:outline-1", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
@@ -24,6 +33,9 @@ function TabsTrigger({ className, ...props }) {
|
|
|
24
33
|
...props
|
|
25
34
|
});
|
|
26
35
|
}
|
|
36
|
+
/**
|
|
37
|
+
* @since 0.3.16-canary.0
|
|
38
|
+
*/
|
|
27
39
|
function TabsContent({ className, ...props }) {
|
|
28
40
|
return /* @__PURE__ */ jsx(TabsPrimitive.Content, {
|
|
29
41
|
className: cn("mt-2", "rounded-xl ring-ring/50 outline-ring", "focus-visible:ring-4 focus-visible:outline-1", className),
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import { ComponentProps, JSX } from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/components/textarea.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* @since 0.3.16-canary.0
|
|
6
|
+
*/
|
|
4
7
|
type TextareaProps = ComponentProps<"textarea">;
|
|
8
|
+
/**
|
|
9
|
+
* @since 0.3.16-canary.0
|
|
10
|
+
*/
|
|
5
11
|
declare function Textarea({
|
|
6
12
|
className,
|
|
7
13
|
...props
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.mjs";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/textarea.tsx
|
|
4
|
+
/**
|
|
5
|
+
* @since 0.3.16-canary.0
|
|
6
|
+
*/
|
|
4
7
|
function Textarea({ className, ...props }) {
|
|
5
8
|
return /* @__PURE__ */ jsx("textarea", {
|
|
6
9
|
className: cn("flex min-h-16 w-full grow px-3 py-2", "rounded-lg border border-input shadow-xs outline-hidden", "text-base", "transition", "placeholder:text-muted-foreground", "hover:not-disabled:not-focus-visible:border-ring/60", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:opacity-50", "aria-invalid:border-destructive", "focus-within:aria-invalid:ring-destructive/20", "hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:aria-invalid:ring-destructive/40", className),
|
|
@@ -7,9 +7,15 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
|
7
7
|
type ScopedProps<P> = P & {
|
|
8
8
|
__scopeToggleGroup?: Scope;
|
|
9
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* @since 0.3.16-canary.0
|
|
12
|
+
*/
|
|
10
13
|
type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariants & {
|
|
11
14
|
spacing?: number;
|
|
12
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* @since 0.3.16-canary.0
|
|
18
|
+
*/
|
|
13
19
|
declare function ToggleGroup({
|
|
14
20
|
__scopeToggleGroup,
|
|
15
21
|
children,
|
|
@@ -19,7 +25,13 @@ declare function ToggleGroup({
|
|
|
19
25
|
variant,
|
|
20
26
|
...props
|
|
21
27
|
}: ScopedProps<ToggleGroupProps>): JSX.Element;
|
|
28
|
+
/**
|
|
29
|
+
* @since 0.3.16-canary.0
|
|
30
|
+
*/
|
|
22
31
|
type ToggleGroupItemProps = ScopedProps<ComponentProps<typeof ToggleGroupPrimitive.Item>>;
|
|
32
|
+
/**
|
|
33
|
+
* @since 0.3.16-canary.0
|
|
34
|
+
*/
|
|
23
35
|
declare function ToggleGroupItem({
|
|
24
36
|
__scopeToggleGroup,
|
|
25
37
|
children,
|
|
@@ -10,6 +10,9 @@ const TOGGLE_GROUP_NAME = "ToggleGroup";
|
|
|
10
10
|
const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [createToggleGroupScope]);
|
|
11
11
|
const useToggleGroupScope = createToggleGroupScope();
|
|
12
12
|
const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
|
|
13
|
+
/**
|
|
14
|
+
* @since 0.3.16-canary.0
|
|
15
|
+
*/
|
|
13
16
|
function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing = 0, variant, ...props }) {
|
|
14
17
|
const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
|
|
15
18
|
return /* @__PURE__ */ jsx(ToggleGroupProvider, {
|
|
@@ -31,6 +34,9 @@ function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing =
|
|
|
31
34
|
});
|
|
32
35
|
}
|
|
33
36
|
const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
|
|
37
|
+
/**
|
|
38
|
+
* @since 0.3.16-canary.0
|
|
39
|
+
*/
|
|
34
40
|
function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props }) {
|
|
35
41
|
const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
|
|
36
42
|
const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
|
|
@@ -4,6 +4,9 @@ import { ComponentProps, JSX } from "react";
|
|
|
4
4
|
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
5
5
|
|
|
6
6
|
//#region src/components/toggle.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* @since 0.3.16-canary.0
|
|
9
|
+
*/
|
|
7
10
|
declare const toggleVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
|
|
8
11
|
size: {
|
|
9
12
|
default: string[];
|
|
@@ -15,8 +18,17 @@ declare const toggleVariants: _$_codefast_tailwind_variants0.VariantFunctionType
|
|
|
15
18
|
outline: string[];
|
|
16
19
|
};
|
|
17
20
|
}, Record<string, never>>;
|
|
21
|
+
/**
|
|
22
|
+
* @since 0.3.16-canary.0
|
|
23
|
+
*/
|
|
18
24
|
type ToggleVariants = VariantProps<typeof toggleVariants>;
|
|
25
|
+
/**
|
|
26
|
+
* @since 0.3.16-canary.0
|
|
27
|
+
*/
|
|
19
28
|
interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
|
|
29
|
+
/**
|
|
30
|
+
* @since 0.3.16-canary.0
|
|
31
|
+
*/
|
|
20
32
|
declare function Toggle({
|
|
21
33
|
children,
|
|
22
34
|
className,
|
|
@@ -3,6 +3,9 @@ import { tv } from "../lib/utils.mjs";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
5
5
|
//#region src/components/toggle.tsx
|
|
6
|
+
/**
|
|
7
|
+
* @since 0.3.16-canary.0
|
|
8
|
+
*/
|
|
6
9
|
const toggleVariants = tv({
|
|
7
10
|
base: [
|
|
8
11
|
"inline-flex items-center justify-center gap-2",
|
|
@@ -37,6 +40,9 @@ const toggleVariants = tv({
|
|
|
37
40
|
variant: "default"
|
|
38
41
|
}
|
|
39
42
|
});
|
|
43
|
+
/**
|
|
44
|
+
* @since 0.3.16-canary.0
|
|
45
|
+
*/
|
|
40
46
|
function Toggle({ children, className, size, variant, ...props }) {
|
|
41
47
|
return /* @__PURE__ */ jsx(TogglePrimitive.Root, {
|
|
42
48
|
className: toggleVariants({
|
|
@@ -2,26 +2,56 @@ import { ComponentProps, JSX } from "react";
|
|
|
2
2
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
3
3
|
|
|
4
4
|
//#region src/components/tooltip.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* @since 0.3.16-canary.0
|
|
7
|
+
*/
|
|
5
8
|
type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
|
|
9
|
+
/**
|
|
10
|
+
* @since 0.3.16-canary.0
|
|
11
|
+
*/
|
|
6
12
|
declare function TooltipProvider({
|
|
7
13
|
...props
|
|
8
14
|
}: TooltipProviderProps): JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* @since 0.3.16-canary.0
|
|
17
|
+
*/
|
|
9
18
|
type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
|
|
19
|
+
/**
|
|
20
|
+
* @since 0.3.16-canary.0
|
|
21
|
+
*/
|
|
10
22
|
declare function Tooltip({
|
|
11
23
|
...props
|
|
12
24
|
}: TooltipProps): JSX.Element;
|
|
25
|
+
/**
|
|
26
|
+
* @since 0.3.16-canary.0
|
|
27
|
+
*/
|
|
13
28
|
type TooltipTriggerProps = ComponentProps<typeof TooltipPrimitive.Trigger>;
|
|
29
|
+
/**
|
|
30
|
+
* @since 0.3.16-canary.0
|
|
31
|
+
*/
|
|
14
32
|
declare function TooltipTrigger({
|
|
15
33
|
...props
|
|
16
34
|
}: TooltipTriggerProps): JSX.Element;
|
|
35
|
+
/**
|
|
36
|
+
* @since 0.3.16-canary.0
|
|
37
|
+
*/
|
|
17
38
|
type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;
|
|
39
|
+
/**
|
|
40
|
+
* @since 0.3.16-canary.0
|
|
41
|
+
*/
|
|
18
42
|
declare function TooltipContent({
|
|
19
43
|
children,
|
|
20
44
|
className,
|
|
21
45
|
sideOffset,
|
|
22
46
|
...props
|
|
23
47
|
}: TooltipContentProps): JSX.Element;
|
|
48
|
+
/**
|
|
49
|
+
* @since 0.3.16-canary.0
|
|
50
|
+
*/
|
|
24
51
|
type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
|
|
52
|
+
/**
|
|
53
|
+
* @since 0.3.16-canary.0
|
|
54
|
+
*/
|
|
25
55
|
declare function TooltipArrow({
|
|
26
56
|
className,
|
|
27
57
|
...props
|
|
@@ -3,24 +3,36 @@ import { cn } from "../lib/utils.mjs";
|
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
5
5
|
//#region src/components/tooltip.tsx
|
|
6
|
+
/**
|
|
7
|
+
* @since 0.3.16-canary.0
|
|
8
|
+
*/
|
|
6
9
|
function TooltipProvider({ ...props }) {
|
|
7
10
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
|
|
8
11
|
"data-slot": "tooltip-provider",
|
|
9
12
|
...props
|
|
10
13
|
});
|
|
11
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* @since 0.3.16-canary.0
|
|
17
|
+
*/
|
|
12
18
|
function Tooltip({ ...props }) {
|
|
13
19
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
|
|
14
20
|
"data-slot": "tooltip",
|
|
15
21
|
...props
|
|
16
22
|
});
|
|
17
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* @since 0.3.16-canary.0
|
|
26
|
+
*/
|
|
18
27
|
function TooltipTrigger({ ...props }) {
|
|
19
28
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
|
|
20
29
|
"data-slot": "tooltip-trigger",
|
|
21
30
|
...props
|
|
22
31
|
});
|
|
23
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* @since 0.3.16-canary.0
|
|
35
|
+
*/
|
|
24
36
|
function TooltipContent({ children, className, sideOffset = 4, ...props }) {
|
|
25
37
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
|
|
26
38
|
className: cn("z-50", "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5", "rounded-md", "bg-primary text-xs text-balance text-primary-foreground", "ease-ui data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2", "data-[state=delayed-open]:data-side-right:slide-in-from-left-2", "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2", "data-[state=delayed-open]:data-side-left:slide-in-from-right-2", "data-closed:animate-out 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", "origin-(--radix-tooltip-content-transform-origin)", className),
|
|
@@ -31,6 +43,9 @@ function TooltipContent({ children, className, sideOffset = 4, ...props }) {
|
|
|
31
43
|
children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
|
|
32
44
|
}) });
|
|
33
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* @since 0.3.16-canary.0
|
|
48
|
+
*/
|
|
34
49
|
function TooltipArrow({ className, ...props }) {
|
|
35
50
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
|
|
36
51
|
className: cn("fill-primary", className),
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
* const value = useAnimatedValue(75, 1000, true);
|
|
16
16
|
* return <div>{value}%</div>;
|
|
17
17
|
* ```
|
|
18
|
+
*
|
|
19
|
+
* @since 0.3.16-canary.0
|
|
18
20
|
*/
|
|
19
21
|
declare function useAnimatedValue(targetValue: null | number, duration: number, animate?: boolean): number;
|
|
20
22
|
//#endregion
|
|
@@ -3,20 +3,22 @@ import { useEffect, useRef, useState } from "react";
|
|
|
3
3
|
//#region src/hooks/use-animated-value.ts
|
|
4
4
|
/**
|
|
5
5
|
* Produce a smoothly animated numeric value in response to changes.
|
|
6
|
-
*
|
|
6
|
+
*
|
|
7
7
|
* Applies a time-based easing (easeOutQuad) between the current and target values
|
|
8
8
|
* over the specified duration. When disabled, the value updates immediately.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
10
|
* @param targetValue - Target number to animate toward; null resolves to 0.
|
|
11
11
|
* @param duration - Animation duration in milliseconds.
|
|
12
12
|
* @param animate - When false, bypasses animation and sets the value directly.
|
|
13
13
|
* @returns The current (rounded) animated value.
|
|
14
|
-
*
|
|
14
|
+
*
|
|
15
15
|
* @example
|
|
16
16
|
* ```tsx
|
|
17
17
|
* const value = useAnimatedValue(75, 1000, true);
|
|
18
18
|
* return <div>{value}%</div>;
|
|
19
19
|
* ```
|
|
20
|
+
*
|
|
21
|
+
* @since 0.3.16-canary.0
|
|
20
22
|
*/
|
|
21
23
|
function useAnimatedValue(targetValue, duration, animate) {
|
|
22
24
|
const actualTargetValue = targetValue ?? 0;
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
* const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500 });
|
|
16
16
|
* <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
|
|
17
17
|
* ```
|
|
18
|
+
*
|
|
19
|
+
* @since 0.3.16-canary.0
|
|
18
20
|
*/
|
|
19
21
|
declare function useCopyToClipboard({
|
|
20
22
|
onCopy,
|
|
@@ -3,20 +3,22 @@ import { useState } from "react";
|
|
|
3
3
|
//#region src/hooks/use-copy-to-clipboard.ts
|
|
4
4
|
/**
|
|
5
5
|
* Provide clipboard copy capability with a transient copied state.
|
|
6
|
-
*
|
|
6
|
+
*
|
|
7
7
|
* Internally uses the Clipboard API when available and sets a temporary
|
|
8
8
|
* `isCopied` flag for UI feedback. A custom callback may be invoked upon copy.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
10
|
* @param options - Configuration options.
|
|
11
11
|
* - onCopy: Callback invoked after a successful copy.
|
|
12
12
|
* - timeout: Duration in milliseconds to keep `isCopied` true. Defaults to 2000.
|
|
13
13
|
* @returns An object with a `copyToClipboard` function and an `isCopied` flag.
|
|
14
|
-
*
|
|
14
|
+
*
|
|
15
15
|
* @example
|
|
16
16
|
* ```tsx
|
|
17
17
|
* const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1500 });
|
|
18
18
|
* <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
|
|
19
19
|
* ```
|
|
20
|
+
*
|
|
21
|
+
* @since 0.3.16-canary.0
|
|
20
22
|
*/
|
|
21
23
|
function useCopyToClipboard({ onCopy, timeout = 2e3 } = {}) {
|
|
22
24
|
const [isCopied, setIsCopied] = useState(false);
|
|
@@ -3,14 +3,14 @@ import { useMediaQuery } from "./use-media-query.mjs";
|
|
|
3
3
|
//#region src/hooks/use-is-mobile.ts
|
|
4
4
|
/**
|
|
5
5
|
* Determine whether the current viewport should be treated as mobile.
|
|
6
|
-
*
|
|
6
|
+
*
|
|
7
7
|
* Uses {@link useMediaQuery} to evaluate a max-width media query derived from the
|
|
8
8
|
* provided breakpoint. By default, widths below 768px are considered mobile.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
10
|
* @param mobileBreakpoint - Pixel width used as the mobile breakpoint. Values strictly
|
|
11
11
|
* less than this breakpoint are treated as mobile. Defaults to 768.
|
|
12
12
|
* @returns true when the viewport width is less than the given breakpoint; otherwise false.
|
|
13
|
-
*
|
|
13
|
+
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```tsx
|
|
16
16
|
* const isMobile = useIsMobile();
|
|
@@ -18,6 +18,8 @@ import { useMediaQuery } from "./use-media-query.mjs";
|
|
|
18
18
|
* // Render compact layout
|
|
19
19
|
* }
|
|
20
20
|
* ```
|
|
21
|
+
*
|
|
22
|
+
* @since 0.3.16-canary.0
|
|
21
23
|
*/
|
|
22
24
|
function useIsMobile(mobileBreakpoint = 768) {
|
|
23
25
|
return useMediaQuery(`(max-width: ${(mobileBreakpoint - 1).toString()}px)`);
|
|
@@ -3,17 +3,19 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
//#region src/hooks/use-media-query.ts
|
|
4
4
|
/**
|
|
5
5
|
* Subscribe to a CSS media query and receive its match state.
|
|
6
|
-
*
|
|
6
|
+
*
|
|
7
7
|
* Evaluates the query immediately (when supported) and updates on changes
|
|
8
8
|
* via an event listener.
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
10
|
* @param query - A valid media query string (e.g., "(max-width: 768px)").
|
|
11
11
|
* @returns true when the media query currently matches; otherwise false.
|
|
12
|
-
*
|
|
12
|
+
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
15
|
* const isNarrow = useMediaQuery("(max-width: 768px)");
|
|
16
16
|
* ```
|
|
17
|
+
*
|
|
18
|
+
* @since 0.3.16-canary.0
|
|
17
19
|
*/
|
|
18
20
|
function useMediaQuery(query) {
|
|
19
21
|
/**
|
|
@@ -13,6 +13,8 @@ import { RefObject } from "react";
|
|
|
13
13
|
* @returns void
|
|
14
14
|
*
|
|
15
15
|
* @see [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
|
|
16
|
+
*
|
|
17
|
+
* @since 0.3.16-canary.0
|
|
16
18
|
*/
|
|
17
19
|
declare function useMutationObserver(ref: RefObject<HTMLElement | null>, callback: MutationCallback, options?: MutationObserverInit): void;
|
|
18
20
|
//#endregion
|
|
@@ -12,16 +12,18 @@ const defaultOptions = {
|
|
|
12
12
|
};
|
|
13
13
|
/**
|
|
14
14
|
* Observe DOM mutations on a referenced element and invoke a callback.
|
|
15
|
-
*
|
|
15
|
+
*
|
|
16
16
|
* Attaches a MutationObserver to the provided element reference with the given
|
|
17
17
|
* options and calls the callback whenever mutations occur.
|
|
18
|
-
*
|
|
18
|
+
*
|
|
19
19
|
* @param ref - Ref to the target HTMLElement to observe.
|
|
20
20
|
* @param callback - Mutation callback invoked with observed records.
|
|
21
21
|
* @param options - Observer configuration. Defaults watch attributes, characterData, childList, subtree.
|
|
22
22
|
* @returns void
|
|
23
|
-
*
|
|
23
|
+
*
|
|
24
24
|
* @see [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
|
|
25
|
+
*
|
|
26
|
+
* @since 0.3.16-canary.0
|
|
25
27
|
*/
|
|
26
28
|
function useMutationObserver(ref, callback, options = defaultOptions) {
|
|
27
29
|
useEffect(() => {
|