@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4
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 +26 -0
- package/dist/components/accordion.d.mts +37 -0
- package/dist/components/accordion.mjs +53 -0
- package/dist/components/alert-dialog.d.mts +74 -0
- package/dist/components/alert-dialog.mjs +92 -0
- package/dist/components/alert.d.mts +30 -0
- package/dist/components/alert.mjs +49 -0
- package/dist/components/aspect-ratio.d.mts +10 -0
- package/dist/components/aspect-ratio.mjs +12 -0
- package/dist/components/avatar.d.mts +21 -0
- package/dist/components/avatar.mjs +28 -0
- package/dist/components/badge.d.mts +24 -0
- package/dist/components/badge.mjs +56 -0
- package/dist/components/breadcrumb.d.mts +44 -0
- package/dist/components/breadcrumb.mjs +67 -0
- package/dist/components/button-group.d.mts +34 -0
- package/dist/components/button-group.mjs +53 -0
- package/dist/components/button.d.mts +38 -0
- package/dist/components/button.mjs +99 -0
- package/dist/components/calendar.d.mts +27 -0
- package/dist/components/calendar.mjs +114 -0
- package/dist/components/card.d.mts +41 -0
- package/dist/components/card.mjs +55 -0
- package/dist/components/carousel.d.mts +68 -0
- package/dist/components/carousel.mjs +135 -0
- package/dist/components/chart.d.mts +93 -0
- package/dist/components/chart.mjs +189 -0
- package/dist/components/checkbox-cards.d.mts +17 -0
- package/dist/components/checkbox-cards.mjs +30 -0
- package/dist/components/checkbox-group.d.mts +16 -0
- package/dist/components/checkbox-group.mjs +27 -0
- package/dist/components/checkbox.d.mts +11 -0
- package/dist/components/checkbox.mjs +20 -0
- package/dist/components/collapsible.d.mts +18 -0
- package/dist/components/collapsible.mjs +24 -0
- package/dist/components/command.d.mts +57 -0
- package/dist/components/command.mjs +92 -0
- package/dist/components/context-menu.d.mts +91 -0
- package/dist/components/context-menu.mjs +122 -0
- package/dist/components/dialog.d.mts +65 -0
- package/dist/components/dialog.mjs +93 -0
- package/dist/components/drawer.d.mts +65 -0
- package/dist/components/drawer.mjs +78 -0
- package/dist/components/dropdown-menu.d.mts +92 -0
- package/dist/components/dropdown-menu.mjs +129 -0
- package/dist/components/empty.d.mts +44 -0
- package/dist/components/empty.mjs +64 -0
- package/dist/components/field.d.mts +79 -0
- package/dist/components/field.mjs +132 -0
- package/dist/components/form.d.mts +48 -0
- package/dist/components/form.mjs +92 -0
- package/dist/components/hover-card.d.mts +26 -0
- package/dist/components/hover-card.mjs +35 -0
- package/dist/components/input-group.d.mts +61 -0
- package/dist/components/input-group.mjs +142 -0
- package/dist/components/input-number.d.mts +28 -0
- package/dist/components/input-number.mjs +61 -0
- package/dist/components/input-otp.d.mts +29 -0
- package/dist/components/input-otp.mjs +48 -0
- package/dist/components/input-password.d.mts +13 -0
- package/dist/components/input-password.mjs +38 -0
- package/dist/components/input-search.d.mts +20 -0
- package/dist/components/input-search.mjs +50 -0
- package/dist/components/input.d.mts +11 -0
- package/dist/components/input.mjs +14 -0
- package/dist/components/item.d.mts +82 -0
- package/dist/components/item.mjs +137 -0
- package/dist/components/kbd.d.mts +15 -0
- package/dist/components/kbd.mjs +19 -0
- package/dist/components/label.d.mts +11 -0
- package/dist/components/label.mjs +14 -0
- package/dist/components/menubar.d.mts +100 -0
- package/dist/components/menubar.mjs +133 -0
- package/dist/components/native-select.d.mts +19 -0
- package/dist/components/native-select.mjs +34 -0
- package/dist/components/navigation-menu.d.mts +44 -0
- package/dist/components/navigation-menu.mjs +79 -0
- package/dist/components/pagination.d.mts +46 -0
- package/dist/components/pagination.mjs +71 -0
- package/dist/components/popover.d.mts +30 -0
- package/dist/components/popover.mjs +41 -0
- package/dist/components/progress-circle.d.mts +124 -0
- package/dist/components/progress-circle.mjs +120 -0
- package/dist/components/progress.d.mts +12 -0
- package/dist/components/progress.mjs +19 -0
- package/dist/components/{radio-cards.d.ts → radio-cards.d.mts} +10 -5
- package/dist/components/radio-cards.mjs +29 -0
- package/dist/components/radio-group.d.mts +16 -0
- package/dist/components/radio-group.mjs +25 -0
- package/dist/components/radio.d.mts +14 -0
- package/dist/components/radio.mjs +16 -0
- package/dist/components/resizable.d.mts +23 -0
- package/dist/components/resizable.mjs +32 -0
- package/dist/components/scroll-area.d.mts +40 -0
- package/dist/components/scroll-area.mjs +101 -0
- package/dist/components/select.d.mts +62 -0
- package/dist/components/select.mjs +101 -0
- package/dist/components/separator.d.mts +32 -0
- package/dist/components/separator.mjs +45 -0
- package/dist/components/sheet.d.mts +75 -0
- package/dist/components/sheet.mjs +134 -0
- package/dist/components/sidebar.d.mts +195 -0
- package/dist/components/sidebar.mjs +375 -0
- package/dist/components/skeleton.d.mts +10 -0
- package/dist/components/skeleton.mjs +12 -0
- package/dist/components/slider.d.mts +15 -0
- package/dist/components/slider.mjs +40 -0
- package/dist/components/sonner.d.mts +10 -0
- package/dist/components/sonner.mjs +21 -0
- package/dist/components/spinner.d.mts +14 -0
- package/dist/components/spinner.mjs +40 -0
- package/dist/components/switch.d.mts +11 -0
- package/dist/components/switch.mjs +18 -0
- package/dist/components/table.d.mts +45 -0
- package/dist/components/table.mjs +65 -0
- package/dist/components/tabs.d.mts +26 -0
- package/dist/components/tabs.mjs +35 -0
- package/dist/components/textarea.d.mts +10 -0
- package/dist/components/textarea.mjs +12 -0
- package/dist/components/toggle-group.d.mts +30 -0
- package/dist/components/toggle-group.mjs +53 -0
- package/dist/components/toggle.d.mts +28 -0
- package/dist/components/toggle.mjs +53 -0
- package/dist/components/tooltip.d.mts +30 -0
- package/dist/components/tooltip.mjs +42 -0
- package/dist/hooks/{use-animated-value.d.ts → use-animated-value.d.mts} +4 -2
- package/dist/hooks/use-animated-value.mjs +62 -0
- package/dist/hooks/{use-copy-to-clipboard.d.ts → use-copy-to-clipboard.d.mts} +11 -6
- package/dist/hooks/use-copy-to-clipboard.mjs +43 -0
- package/dist/hooks/{use-is-mobile.d.ts → use-is-mobile.d.mts} +4 -2
- package/dist/hooks/use-is-mobile.mjs +26 -0
- package/dist/hooks/{use-media-query.d.ts → use-media-query.d.mts} +4 -2
- package/dist/hooks/use-media-query.mjs +50 -0
- package/dist/hooks/{use-mutation-observer.d.ts → use-mutation-observer.d.mts} +6 -3
- package/dist/hooks/use-mutation-observer.mjs +41 -0
- package/dist/hooks/use-pagination.d.mts +44 -0
- package/dist/hooks/use-pagination.mjs +107 -0
- package/dist/index.d.mts +69 -0
- package/dist/index.mjs +69 -0
- package/dist/lib/utils.d.mts +13 -0
- package/dist/lib/utils.mjs +10 -0
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/clsx.d.mts +6 -0
- package/dist/primitives/checkbox-group.d.mts +144 -0
- package/dist/primitives/checkbox-group.mjs +126 -0
- package/dist/primitives/input-number.d.mts +73 -0
- package/dist/primitives/input-number.mjs +514 -0
- package/dist/primitives/input.d.mts +72 -0
- package/dist/primitives/input.mjs +75 -0
- package/dist/primitives/progress-circle.d.mts +146 -0
- package/dist/primitives/progress-circle.mjs +178 -0
- package/package.json +164 -170
- package/dist/components/accordion.d.ts +0 -19
- package/dist/components/accordion.d.ts.map +0 -1
- package/dist/components/accordion.js +0 -26
- package/dist/components/alert-dialog.d.ts +0 -39
- package/dist/components/alert-dialog.d.ts.map +0 -1
- package/dist/components/alert-dialog.js +0 -39
- package/dist/components/alert.d.ts +0 -19
- package/dist/components/alert.d.ts.map +0 -1
- package/dist/components/alert.js +0 -41
- package/dist/components/aspect-ratio.d.ts +0 -7
- package/dist/components/aspect-ratio.d.ts.map +0 -1
- package/dist/components/aspect-ratio.js +0 -10
- package/dist/components/avatar.d.ts +0 -11
- package/dist/components/avatar.d.ts.map +0 -1
- package/dist/components/avatar.js +0 -17
- package/dist/components/badge.d.ts +0 -18
- package/dist/components/badge.d.ts.map +0 -1
- package/dist/components/badge.js +0 -59
- package/dist/components/breadcrumb.d.ts +0 -22
- package/dist/components/breadcrumb.d.ts.map +0 -1
- package/dist/components/breadcrumb.js +0 -31
- package/dist/components/button-group.d.ts +0 -20
- package/dist/components/button-group.d.ts.map +0 -1
- package/dist/components/button-group.js +0 -48
- package/dist/components/button.d.ts +0 -29
- package/dist/components/button.d.ts.map +0 -1
- package/dist/components/button.js +0 -92
- package/dist/components/calendar.d.ts +0 -13
- package/dist/components/calendar.d.ts.map +0 -1
- package/dist/components/calendar.js +0 -104
- package/dist/components/card.d.ts +0 -18
- package/dist/components/card.d.ts.map +0 -1
- package/dist/components/card.js +0 -27
- package/dist/components/carousel.d.ts +0 -38
- package/dist/components/carousel.d.ts.map +0 -1
- package/dist/components/carousel.js +0 -103
- package/dist/components/chart.d.ts +0 -58
- package/dist/components/chart.d.ts.map +0 -1
- package/dist/components/chart.js +0 -198
- package/dist/components/checkbox-cards.d.ts +0 -11
- package/dist/components/checkbox-cards.d.ts.map +0 -1
- package/dist/components/checkbox-cards.js +0 -16
- package/dist/components/checkbox-group.d.ts +0 -9
- package/dist/components/checkbox-group.d.ts.map +0 -1
- package/dist/components/checkbox-group.js +0 -15
- package/dist/components/checkbox.d.ts +0 -7
- package/dist/components/checkbox.d.ts.map +0 -1
- package/dist/components/checkbox.js +0 -12
- package/dist/components/collapsible.d.ts +0 -11
- package/dist/components/collapsible.d.ts.map +0 -1
- package/dist/components/collapsible.js +0 -16
- package/dist/components/command.d.ts +0 -26
- package/dist/components/command.d.ts.map +0 -1
- package/dist/components/command.js +0 -41
- package/dist/components/context-menu.d.ts +0 -42
- package/dist/components/context-menu.d.ts.map +0 -1
- package/dist/components/context-menu.js +0 -54
- package/dist/components/dialog.d.ts +0 -35
- package/dist/components/dialog.d.ts.map +0 -1
- package/dist/components/dialog.js +0 -41
- package/dist/components/drawer.d.ts +0 -34
- package/dist/components/drawer.d.ts.map +0 -1
- package/dist/components/drawer.js +0 -36
- package/dist/components/dropdown-menu.d.ts +0 -42
- package/dist/components/dropdown-menu.d.ts.map +0 -1
- package/dist/components/dropdown-menu.js +0 -54
- package/dist/components/empty.d.ts +0 -23
- package/dist/components/empty.d.ts.map +0 -1
- package/dist/components/empty.js +0 -47
- package/dist/components/field.d.ts +0 -42
- package/dist/components/field.d.ts.map +0 -1
- package/dist/components/field.js +0 -85
- package/dist/components/form.d.ts +0 -27
- package/dist/components/form.d.ts.map +0 -1
- package/dist/components/form.js +0 -76
- package/dist/components/hover-card.d.ts +0 -13
- package/dist/components/hover-card.d.ts.map +0 -1
- package/dist/components/hover-card.js +0 -20
- package/dist/components/input-group.d.ts +0 -37
- package/dist/components/input-group.d.ts.map +0 -1
- package/dist/components/input-group.js +0 -127
- package/dist/components/input-number.d.ts +0 -8
- package/dist/components/input-number.d.ts.map +0 -1
- package/dist/components/input-number.js +0 -20
- package/dist/components/input-otp.d.ts +0 -16
- package/dist/components/input-otp.d.ts.map +0 -1
- package/dist/components/input-otp.js +0 -25
- package/dist/components/input-password.d.ts +0 -7
- package/dist/components/input-password.d.ts.map +0 -1
- package/dist/components/input-password.js +0 -17
- package/dist/components/input-search.d.ts +0 -11
- package/dist/components/input-search.d.ts.map +0 -1
- package/dist/components/input-search.js +0 -22
- package/dist/components/input.d.ts +0 -6
- package/dist/components/input.d.ts.map +0 -1
- package/dist/components/input.js +0 -10
- package/dist/components/item.d.ts +0 -46
- package/dist/components/item.d.ts.map +0 -1
- package/dist/components/item.js +0 -94
- package/dist/components/kbd.d.ts +0 -8
- package/dist/components/kbd.d.ts.map +0 -1
- package/dist/components/kbd.js +0 -12
- package/dist/components/label.d.ts +0 -7
- package/dist/components/label.d.ts.map +0 -1
- package/dist/components/label.js +0 -11
- package/dist/components/menubar.d.ts +0 -44
- package/dist/components/menubar.d.ts.map +0 -1
- package/dist/components/menubar.js +0 -57
- package/dist/components/native-select.d.ts +0 -10
- package/dist/components/native-select.d.ts.map +0 -1
- package/dist/components/native-select.js +0 -16
- package/dist/components/navigation-menu.d.ts +0 -21
- package/dist/components/navigation-menu.d.ts.map +0 -1
- package/dist/components/navigation-menu.js +0 -43
- package/dist/components/pagination.d.ts +0 -26
- package/dist/components/pagination.d.ts.map +0 -1
- package/dist/components/pagination.js +0 -29
- package/dist/components/popover.d.ts +0 -15
- package/dist/components/popover.d.ts.map +0 -1
- package/dist/components/popover.js +0 -23
- package/dist/components/progress-circle.d.ts +0 -107
- package/dist/components/progress-circle.d.ts.map +0 -1
- package/dist/components/progress-circle.js +0 -83
- package/dist/components/progress.d.ts +0 -7
- package/dist/components/progress.d.ts.map +0 -1
- package/dist/components/progress.js +0 -13
- package/dist/components/radio-cards.d.ts.map +0 -1
- package/dist/components/radio-cards.js +0 -15
- package/dist/components/radio-group.d.ts +0 -9
- package/dist/components/radio-group.d.ts.map +0 -1
- package/dist/components/radio-group.js +0 -14
- package/dist/components/radio.d.ts +0 -8
- package/dist/components/radio.d.ts.map +0 -1
- package/dist/components/radio.js +0 -11
- package/dist/components/resizable.d.ts +0 -13
- package/dist/components/resizable.d.ts.map +0 -1
- package/dist/components/resizable.js +0 -18
- package/dist/components/scroll-area.d.ts +0 -28
- package/dist/components/scroll-area.d.ts.map +0 -1
- package/dist/components/scroll-area.js +0 -77
- package/dist/components/select.d.ts +0 -29
- package/dist/components/select.d.ts.map +0 -1
- package/dist/components/select.js +0 -49
- package/dist/components/separator.d.ts +0 -23
- package/dist/components/separator.d.ts.map +0 -1
- package/dist/components/separator.js +0 -36
- package/dist/components/sheet.d.ts +0 -43
- package/dist/components/sheet.d.ts.map +0 -1
- package/dist/components/sheet.js +0 -90
- package/dist/components/sidebar.d.ts +0 -102
- package/dist/components/sidebar.d.ts.map +0 -1
- package/dist/components/sidebar.js +0 -241
- package/dist/components/skeleton.d.ts +0 -6
- package/dist/components/skeleton.d.ts.map +0 -1
- package/dist/components/skeleton.js +0 -9
- package/dist/components/slider.d.ts +0 -7
- package/dist/components/slider.d.ts.map +0 -1
- package/dist/components/slider.js +0 -18
- package/dist/components/sonner.d.ts +0 -8
- package/dist/components/sonner.d.ts.map +0 -1
- package/dist/components/sonner.js +0 -18
- package/dist/components/spinner.d.ts +0 -8
- package/dist/components/spinner.d.ts.map +0 -1
- package/dist/components/spinner.js +0 -27
- package/dist/components/switch.d.ts +0 -7
- package/dist/components/switch.d.ts.map +0 -1
- package/dist/components/switch.js +0 -11
- package/dist/components/table.d.ts +0 -20
- package/dist/components/table.d.ts.map +0 -1
- package/dist/components/table.js +0 -30
- package/dist/components/tabs.d.ts +0 -13
- package/dist/components/tabs.d.ts.map +0 -1
- package/dist/components/tabs.js +0 -20
- package/dist/components/textarea.d.ts +0 -6
- package/dist/components/textarea.d.ts.map +0 -1
- package/dist/components/textarea.js +0 -9
- package/dist/components/toggle-group.d.ts +0 -16
- package/dist/components/toggle-group.d.ts.map +0 -1
- package/dist/components/toggle-group.js +0 -35
- package/dist/components/toggle.d.ts +0 -21
- package/dist/components/toggle.d.ts.map +0 -1
- package/dist/components/toggle.js +0 -49
- package/dist/components/tooltip.d.ts +0 -15
- package/dist/components/tooltip.d.ts.map +0 -1
- package/dist/components/tooltip.js +0 -23
- package/dist/hooks/use-animated-value.d.ts.map +0 -1
- package/dist/hooks/use-animated-value.js +0 -71
- package/dist/hooks/use-copy-to-clipboard.d.ts.map +0 -1
- package/dist/hooks/use-copy-to-clipboard.js +0 -46
- package/dist/hooks/use-is-mobile.d.ts.map +0 -1
- package/dist/hooks/use-is-mobile.js +0 -23
- package/dist/hooks/use-media-query.d.ts.map +0 -1
- package/dist/hooks/use-media-query.js +0 -53
- package/dist/hooks/use-mutation-observer.d.ts.map +0 -1
- package/dist/hooks/use-mutation-observer.js +0 -40
- package/dist/hooks/use-pagination.d.ts +0 -37
- package/dist/hooks/use-pagination.d.ts.map +0 -1
- package/dist/hooks/use-pagination.js +0 -107
- package/dist/index.d.ts +0 -131
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -68
- package/dist/lib/utils.d.ts +0 -10
- package/dist/lib/utils.d.ts.map +0 -1
- package/dist/lib/utils.js +0 -10
- package/dist/primitives/checkbox-group.d.ts +0 -123
- package/dist/primitives/checkbox-group.d.ts.map +0 -1
- package/dist/primitives/checkbox-group.js +0 -112
- package/dist/primitives/input-number.d.ts +0 -63
- package/dist/primitives/input-number.d.ts.map +0 -1
- package/dist/primitives/input-number.js +0 -458
- package/dist/primitives/input.d.ts +0 -67
- package/dist/primitives/input.d.ts.map +0 -1
- package/dist/primitives/input.js +0 -76
- package/dist/primitives/progress-circle.d.ts +0 -116
- package/dist/primitives/progress-circle.d.ts.map +0 -1
- package/dist/primitives/progress-circle.js +0 -163
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import type { Scope } from "@radix-ui/react-context";
|
|
2
|
-
import type { ComponentProps, JSX, PropsWithChildren, ReactNode } from "react";
|
|
3
|
-
/**
|
|
4
|
-
* Type for adding scope to component props
|
|
5
|
-
*/
|
|
6
|
-
type ScopedProps<P> = P & {
|
|
7
|
-
/**
|
|
8
|
-
* Scope for the Input component context
|
|
9
|
-
*/
|
|
10
|
-
__scopeInput?: Scope;
|
|
11
|
-
};
|
|
12
|
-
declare const createInputScope: import("@radix-ui/react-context").CreateScope;
|
|
13
|
-
/**
|
|
14
|
-
* Props for styling and appearance of the Input component
|
|
15
|
-
*/
|
|
16
|
-
interface InputVisualProps {
|
|
17
|
-
/**
|
|
18
|
-
* CSS class name for the input container
|
|
19
|
-
*/
|
|
20
|
-
className?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Element to display before the input
|
|
23
|
-
*/
|
|
24
|
-
prefix?: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* Custom spinner element for loading state
|
|
27
|
-
*/
|
|
28
|
-
spinner?: ReactNode;
|
|
29
|
-
/**
|
|
30
|
-
* Element to display after the input
|
|
31
|
-
*/
|
|
32
|
-
suffix?: ReactNode;
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Props for the behavior and state of the Input component
|
|
36
|
-
*/
|
|
37
|
-
interface InputBehaviorProps {
|
|
38
|
-
/**
|
|
39
|
-
* Whether the input is disabled
|
|
40
|
-
*/
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Position of the loading spinner - either before or after the input
|
|
44
|
-
*/
|
|
45
|
-
loaderPosition?: "prefix" | "suffix";
|
|
46
|
-
/**
|
|
47
|
-
* Whether the input is in the loading state
|
|
48
|
-
*/
|
|
49
|
-
loading?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Whether the input is in read-only mode
|
|
52
|
-
*/
|
|
53
|
-
readOnly?: boolean;
|
|
54
|
-
}
|
|
55
|
-
/**
|
|
56
|
-
* Combined props for the Input component
|
|
57
|
-
*/
|
|
58
|
-
type InputProps = PropsWithChildren<InputBehaviorProps & InputVisualProps>;
|
|
59
|
-
declare function Input(inputProps: ScopedProps<InputProps>): JSX.Element;
|
|
60
|
-
/**
|
|
61
|
-
* Props for the InputField component
|
|
62
|
-
*/
|
|
63
|
-
type InputFieldProps = ComponentProps<"input">;
|
|
64
|
-
declare function InputField({ __scopeInput, ...props }: ScopedProps<InputFieldProps>): JSX.Element;
|
|
65
|
-
export { createInputScope, InputField as Field, Input, InputField, Input as Root };
|
|
66
|
-
export type { InputFieldProps, InputProps };
|
|
67
|
-
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/primitives/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EACV,cAAc,EACd,GAAG,EAEH,iBAAiB,EACjB,SAAS,EAEV,MAAM,OAAO,CAAC;AAYf;;GAEG;AACH,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,CAAC;AAEF,QAAA,MAA2B,gBAAgB,+CAAkC,CAAC;AAwB9E;;GAEG;AACH,UAAU,gBAAgB;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,kBAAkB;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAErC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,KAAK,UAAU,GAAG,iBAAiB,CAAC,kBAAkB,GAAG,gBAAgB,CAAC,CAAC;AAE3E,iBAAS,KAAK,CAAC,UAAU,EAAE,WAAW,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAwF/D;AAQD;;GAEG;AACH,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AAE/C,iBAAS,UAAU,CAAC,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC,OAAO,CAczF;AAMD,OAAO,EAAE,gBAAgB,EAAE,UAAU,IAAI,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEnF,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/primitives/input.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
3
|
-
import { createContextScope } from "@radix-ui/react-context";
|
|
4
|
-
import { useRef } from "react";
|
|
5
|
-
/* -----------------------------------------------------------------------------
|
|
6
|
-
* Component: Input
|
|
7
|
-
* -------------------------------------------------------------------------- */
|
|
8
|
-
const INPUT_NAME = "Input";
|
|
9
|
-
const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
|
|
10
|
-
const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
|
|
11
|
-
function Input(inputProps) {
|
|
12
|
-
const { __scopeInput, children, disabled, loaderPosition = "prefix", loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
|
|
13
|
-
/**
|
|
14
|
-
* Reference to the input element
|
|
15
|
-
*/
|
|
16
|
-
const inputRef = useRef(null);
|
|
17
|
-
/**
|
|
18
|
-
* Handles pointer down events on the input container
|
|
19
|
-
* Focuses the input element when clicking on the container
|
|
20
|
-
*
|
|
21
|
-
* @param event - The pointer event object
|
|
22
|
-
*/
|
|
23
|
-
const handlePointerDown = (event) => {
|
|
24
|
-
const target = event.target;
|
|
25
|
-
// Skip handling when clicking directly on input, links, buttons, or other interactive elements
|
|
26
|
-
// This prevents interference with native input/link/button behavior
|
|
27
|
-
if (target.tagName.toLowerCase() === "input" || target.closest("input, a, button")) {
|
|
28
|
-
event.stopPropagation();
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
const inputElement = inputRef.current;
|
|
32
|
-
if (!inputElement) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
// Key solution: If input already has focus, only prevent default behavior
|
|
36
|
-
// This prevents the focus from being lost when clicking on the container padding
|
|
37
|
-
// and eliminates the flickering effect
|
|
38
|
-
if (document.activeElement === inputElement) {
|
|
39
|
-
event.preventDefault();
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
// Only attempt to focus the input if it's not already focused
|
|
43
|
-
requestAnimationFrame(() => {
|
|
44
|
-
// Special handling for file inputs - trigger the file selection dialog
|
|
45
|
-
if (inputElement.type === "file") {
|
|
46
|
-
inputElement.click();
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
// Only focus the input if it doesn't already have focus
|
|
50
|
-
// This avoids unnecessary re-focusing which can cause UI flickers
|
|
51
|
-
if (document.activeElement !== inputElement) {
|
|
52
|
-
inputElement.focus();
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
};
|
|
56
|
-
return (_jsx(InputContextProvider, { disabled: disabled, inputRef: inputRef, readOnly: readOnly, scope: __scopeInput, children: _jsxs("div", { "data-disabled": disabled, "data-readonly": readOnly, role: "presentation", onPointerDown: handlePointerDown, ...props, children: [loading && loaderPosition === "prefix" ? spinner : prefix, children, loading && loaderPosition === "suffix" ? spinner : suffix] }) }));
|
|
57
|
-
}
|
|
58
|
-
/* -----------------------------------------------------------------------------
|
|
59
|
-
* Component: InputField
|
|
60
|
-
* -------------------------------------------------------------------------- */
|
|
61
|
-
const INPUT_FIELD_NAME = "InputField";
|
|
62
|
-
function InputField({ __scopeInput, ...props }) {
|
|
63
|
-
/**
|
|
64
|
-
* Context values from parent Input component
|
|
65
|
-
*/
|
|
66
|
-
const { disabled, inputRef, readOnly } = useInputContext(INPUT_FIELD_NAME, __scopeInput);
|
|
67
|
-
/**
|
|
68
|
-
* Combined ref that syncs with the parent's inputRef
|
|
69
|
-
*/
|
|
70
|
-
const composedInputRef = useComposedRefs(inputRef);
|
|
71
|
-
return (_jsx("input", { ref: composedInputRef, disabled: disabled, readOnly: readOnly, type: "text", ...props }));
|
|
72
|
-
}
|
|
73
|
-
/* -----------------------------------------------------------------------------
|
|
74
|
-
* Exports
|
|
75
|
-
* -------------------------------------------------------------------------- */
|
|
76
|
-
export { createInputScope, InputField as Field, Input, InputField, Input as Root };
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import type { Scope } from "@radix-ui/react-context";
|
|
2
|
-
import type { ComponentProps, ReactNode } from "react";
|
|
3
|
-
type ScopedProps<P> = P & {
|
|
4
|
-
__scopeProgressCircle?: Scope;
|
|
5
|
-
};
|
|
6
|
-
/**
|
|
7
|
-
* Defines color thresholds based on progress values
|
|
8
|
-
*/
|
|
9
|
-
interface Threshold {
|
|
10
|
-
/**
|
|
11
|
-
* Background color to be applied
|
|
12
|
-
*/
|
|
13
|
-
background: string;
|
|
14
|
-
/**
|
|
15
|
-
* Foreground color to be applied
|
|
16
|
-
*/
|
|
17
|
-
color: string;
|
|
18
|
-
/**
|
|
19
|
-
* The value at which this threshold becomes active
|
|
20
|
-
*/
|
|
21
|
-
value: number;
|
|
22
|
-
}
|
|
23
|
-
declare const createProgressCircleScope: import("@radix-ui/react-context").CreateScope;
|
|
24
|
-
interface ProgressCircleProviderProps {
|
|
25
|
-
/** React children to be rendered inside the progress circle */
|
|
26
|
-
children: ReactNode;
|
|
27
|
-
/** Custom function to format the numeric value for display */
|
|
28
|
-
formatValue?: (value: number) => string;
|
|
29
|
-
/** Unique identifier for the progress circle component */
|
|
30
|
-
id?: string;
|
|
31
|
-
/** Maximum value of the progress (defaults to 100) */
|
|
32
|
-
max?: number;
|
|
33
|
-
/** Minimum value of the progress (defaults to 0) */
|
|
34
|
-
min?: number;
|
|
35
|
-
/** Size of the progress circle in pixels */
|
|
36
|
-
size?: number;
|
|
37
|
-
/** Starting angle of the progress circle in degrees (0 = top) */
|
|
38
|
-
startAngle?: number;
|
|
39
|
-
/** Width of the progress circle's stroke in pixels */
|
|
40
|
-
strokeWidth?: number;
|
|
41
|
-
/** Array of threshold configurations for different value ranges */
|
|
42
|
-
thresholds?: Threshold[];
|
|
43
|
-
/** Current progress value (null for indeterminate state) */
|
|
44
|
-
value?: null | number;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Provides context for the ProgressCircle component
|
|
48
|
-
*
|
|
49
|
-
* Manages calculations for rendering the circular progress indicator,
|
|
50
|
-
* including value clamping, sizing, thresholds, and indeterminate state.
|
|
51
|
-
*
|
|
52
|
-
* @example
|
|
53
|
-
* ```tsx
|
|
54
|
-
* <ProgressCircleProvider
|
|
55
|
-
* value={75}
|
|
56
|
-
* min={0}
|
|
57
|
-
* max={100}
|
|
58
|
-
* size={64}
|
|
59
|
-
* thresholds={[
|
|
60
|
-
* { value: 30, color: 'red', background: 'pink' },
|
|
61
|
-
* { value: 70, color: 'yellow', background: 'lightyellow' },
|
|
62
|
-
* { value: 100, color: 'green', background: 'lightgreen' }
|
|
63
|
-
* ]}
|
|
64
|
-
* >
|
|
65
|
-
* <ProgressCircleSVG>
|
|
66
|
-
* <ProgressCircleIndicator />
|
|
67
|
-
* <ProgressCircleTrack />
|
|
68
|
-
* </ProgressCircleSVG>
|
|
69
|
-
* <ProgressCircleValue />
|
|
70
|
-
* </ProgressCircleProvider>
|
|
71
|
-
* ```
|
|
72
|
-
*/
|
|
73
|
-
declare function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max, min, size, startAngle, strokeWidth, thresholds, value }: ScopedProps<ProgressCircleProviderProps>): ReactNode;
|
|
74
|
-
type ProgressCircleProps = ComponentProps<"div">;
|
|
75
|
-
/**
|
|
76
|
-
* Root component for the progress circle
|
|
77
|
-
*
|
|
78
|
-
* Serves as a wrapper for other progress circle components.
|
|
79
|
-
*/
|
|
80
|
-
declare function ProgressCircle({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleProps>): ReactNode;
|
|
81
|
-
type ProgressCircleSVGProps = ComponentProps<"svg">;
|
|
82
|
-
/**
|
|
83
|
-
* SVG container for the progress circle
|
|
84
|
-
*
|
|
85
|
-
* Renders the SVG with accessibility attributes and supports indeterminate state.
|
|
86
|
-
*/
|
|
87
|
-
declare function ProgressCircleSVG({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleSVGProps>): ReactNode;
|
|
88
|
-
type ProgressCircleTrackProps = ComponentProps<"circle">;
|
|
89
|
-
/**
|
|
90
|
-
* Background circle for the progress indicator
|
|
91
|
-
*
|
|
92
|
-
* Renders the static track of the progress circle.
|
|
93
|
-
*/
|
|
94
|
-
declare function ProgressCircleTrack({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleTrackProps>): ReactNode;
|
|
95
|
-
type ProgressCircleIndicatorProps = ComponentProps<"circle">;
|
|
96
|
-
/**
|
|
97
|
-
* Foreground circle showing progress
|
|
98
|
-
*
|
|
99
|
-
* Renders the dynamic progress indicator with stroke dash properties.
|
|
100
|
-
*/
|
|
101
|
-
declare function ProgressCircleIndicator({ __scopeProgressCircle, ...props }: ScopedProps<ProgressCircleIndicatorProps>): ReactNode;
|
|
102
|
-
interface ProgressCircleValueProps extends Omit<ComponentProps<"div">, "children"> {
|
|
103
|
-
children?: ((context: {
|
|
104
|
-
value: number | undefined;
|
|
105
|
-
valueText: string;
|
|
106
|
-
}) => ReactNode) | ReactNode;
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* Displays the current progress value
|
|
110
|
-
*
|
|
111
|
-
* Supports custom content or default value text rendering.
|
|
112
|
-
*/
|
|
113
|
-
declare function ProgressCircleValue({ __scopeProgressCircle, children, ...props }: ScopedProps<ProgressCircleValueProps>): ReactNode;
|
|
114
|
-
export { createProgressCircleScope, ProgressCircleIndicator as Indicator, ProgressCircle, ProgressCircleIndicator, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue, ProgressCircleProvider as Provider, ProgressCircle as Root, ProgressCircleSVG as SVG, ProgressCircleTrack as Track, ProgressCircleValue as Value, };
|
|
115
|
-
export type { ProgressCircleIndicatorProps, ProgressCircleProps, ProgressCircleProviderProps, ProgressCircleSVGProps, ProgressCircleTrackProps, ProgressCircleValueProps, };
|
|
116
|
-
//# sourceMappingURL=progress-circle.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"progress-circle.d.ts","sourceRoot":"","sources":["../../src/primitives/progress-circle.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContextScope } from "@radix-ui/react-context";
|
|
4
|
-
import { useId, useMemo } from "react";
|
|
5
|
-
/* -----------------------------------------------------------------------------
|
|
6
|
-
* Context: ProgressCircleProvider
|
|
7
|
-
* --------------------------------------------------------------------------- */
|
|
8
|
-
const PROGRESS_CIRCLE_PROVIDER_NAME = "ProgressCircleProvider";
|
|
9
|
-
const [createProgressCircleContext, createProgressCircleScope] = createContextScope(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
10
|
-
const [ProgressCircleContextProvider, useProgressCircleContext] = createProgressCircleContext(PROGRESS_CIRCLE_PROVIDER_NAME);
|
|
11
|
-
/**
|
|
12
|
-
* Provides context for the ProgressCircle component
|
|
13
|
-
*
|
|
14
|
-
* Manages calculations for rendering the circular progress indicator,
|
|
15
|
-
* including value clamping, sizing, thresholds, and indeterminate state.
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* <ProgressCircleProvider
|
|
20
|
-
* value={75}
|
|
21
|
-
* min={0}
|
|
22
|
-
* max={100}
|
|
23
|
-
* size={64}
|
|
24
|
-
* thresholds={[
|
|
25
|
-
* { value: 30, color: 'red', background: 'pink' },
|
|
26
|
-
* { value: 70, color: 'yellow', background: 'lightyellow' },
|
|
27
|
-
* { value: 100, color: 'green', background: 'lightgreen' }
|
|
28
|
-
* ]}
|
|
29
|
-
* >
|
|
30
|
-
* <ProgressCircleSVG>
|
|
31
|
-
* <ProgressCircleIndicator />
|
|
32
|
-
* <ProgressCircleTrack />
|
|
33
|
-
* </ProgressCircleSVG>
|
|
34
|
-
* <ProgressCircleValue />
|
|
35
|
-
* </ProgressCircleProvider>
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max = 100, min = 0, size = 48, startAngle = -90, strokeWidth = 4, thresholds, value, }) {
|
|
39
|
-
const uniqueId = useId();
|
|
40
|
-
const id = propertyId ?? uniqueId;
|
|
41
|
-
// Ensure size and stroke width are non-negative
|
|
42
|
-
const validSize = Math.max(0, size);
|
|
43
|
-
const validStrokeWidth = Math.max(0, strokeWidth);
|
|
44
|
-
const validStartAngle = startAngle % 360;
|
|
45
|
-
// Validate min and max, swap if min > max
|
|
46
|
-
let validMin = min;
|
|
47
|
-
let validMax = max;
|
|
48
|
-
if (validMin > validMax) {
|
|
49
|
-
[validMin, validMax] = [validMax, validMin];
|
|
50
|
-
}
|
|
51
|
-
// Handle indeterminate state
|
|
52
|
-
const isIndeterminate = value === null || value === undefined;
|
|
53
|
-
const clampedValue = isIndeterminate ? undefined : clamp(validMin, validMax, value);
|
|
54
|
-
const range = validMax - validMin;
|
|
55
|
-
const percentage = clampedValue !== undefined && range > 0 ? ((clampedValue - validMin) / range) * 100 : 0;
|
|
56
|
-
const valueText = clampedValue !== undefined && formatValue
|
|
57
|
-
? formatValue(clampedValue)
|
|
58
|
-
: `${Math.round(percentage).toString()}%`;
|
|
59
|
-
// Sort thresholds by value
|
|
60
|
-
const sortedThresholds = useMemo(() => thresholds && thresholds.length > 0
|
|
61
|
-
? [...thresholds].toSorted((a, b) => a.value - b.value)
|
|
62
|
-
: [], [thresholds]);
|
|
63
|
-
// Determine an active threshold based on a clamped value
|
|
64
|
-
const threshold = useMemo(() => {
|
|
65
|
-
if (clampedValue === undefined) {
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
for (const sortedThreshold of sortedThresholds) {
|
|
69
|
-
if (clampedValue <= sortedThreshold.value) {
|
|
70
|
-
return sortedThreshold;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
return sortedThresholds.at(-1);
|
|
74
|
-
}, [sortedThresholds, clampedValue]);
|
|
75
|
-
// Calculate circle properties
|
|
76
|
-
const center = validSize / 2;
|
|
77
|
-
const radius = Math.max(0, center - validStrokeWidth / 2);
|
|
78
|
-
const circumference = 2 * Math.PI * radius;
|
|
79
|
-
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
|
80
|
-
const rotationTransform = `rotate(${validStartAngle.toString()}, 0, 0)`;
|
|
81
|
-
return (_jsx(ProgressCircleContextProvider, { center: center, circumference: circumference, clampedValue: clampedValue, id: id, max: validMax, min: validMin, radius: radius, rotationTransform: rotationTransform, scope: __scopeProgressCircle, size: validSize, strokeDashoffset: strokeDashoffset, strokeWidth: validStrokeWidth, threshold: threshold, value: value ?? 0, valueText: valueText, children: children }));
|
|
82
|
-
}
|
|
83
|
-
/**
|
|
84
|
-
* Root component for the progress circle
|
|
85
|
-
*
|
|
86
|
-
* Serves as a wrapper for other progress circle components.
|
|
87
|
-
*/
|
|
88
|
-
function ProgressCircle({ __scopeProgressCircle, ...props }) {
|
|
89
|
-
return _jsx("div", { ...props });
|
|
90
|
-
}
|
|
91
|
-
/* -----------------------------------------------------------------------------
|
|
92
|
-
* Component: ProgressCircleSVG
|
|
93
|
-
* --------------------------------------------------------------------------- */
|
|
94
|
-
const PROGRESS_CIRCLE_SVG_NAME = "ProgressCircleSVG";
|
|
95
|
-
/**
|
|
96
|
-
* SVG container for the progress circle
|
|
97
|
-
*
|
|
98
|
-
* Renders the SVG with accessibility attributes and supports indeterminate state.
|
|
99
|
-
*/
|
|
100
|
-
function ProgressCircleSVG({ __scopeProgressCircle, ...props }) {
|
|
101
|
-
const { clampedValue, id, max, min, size, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_SVG_NAME, __scopeProgressCircle);
|
|
102
|
-
return (_jsx("svg", { "aria-label": "Progress", "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": clampedValue, "aria-valuetext": clampedValue === undefined ? undefined : valueText, height: size, id: id, role: "progressbar", viewBox: `0 0 ${size.toString()} ${size.toString()}`, width: size, ...props }));
|
|
103
|
-
}
|
|
104
|
-
/* -----------------------------------------------------------------------------
|
|
105
|
-
* Component: ProgressCircleTrack
|
|
106
|
-
* --------------------------------------------------------------------------- */
|
|
107
|
-
const PROGRESS_CIRCLE_TRACK_NAME = "ProgressCircleTrack";
|
|
108
|
-
/**
|
|
109
|
-
* Background circle for the progress indicator
|
|
110
|
-
*
|
|
111
|
-
* Renders the static track of the progress circle.
|
|
112
|
-
*/
|
|
113
|
-
function ProgressCircleTrack({ __scopeProgressCircle, ...props }) {
|
|
114
|
-
const { center, radius, strokeWidth, threshold } = useProgressCircleContext(PROGRESS_CIRCLE_TRACK_NAME, __scopeProgressCircle);
|
|
115
|
-
return (_jsx("circle", { cx: center, cy: center, fill: "transparent", r: radius, stroke: threshold?.background ?? "currentColor", strokeWidth: strokeWidth, ...props }));
|
|
116
|
-
}
|
|
117
|
-
/* -----------------------------------------------------------------------------
|
|
118
|
-
* Component: ProgressCircleIndicator
|
|
119
|
-
* --------------------------------------------------------------------------- */
|
|
120
|
-
const PROGRESS_CIRCLE_INDICATOR_NAME = "ProgressCircleIndicator";
|
|
121
|
-
/**
|
|
122
|
-
* Foreground circle showing progress
|
|
123
|
-
*
|
|
124
|
-
* Renders the dynamic progress indicator with stroke dash properties.
|
|
125
|
-
*/
|
|
126
|
-
function ProgressCircleIndicator({ __scopeProgressCircle, ...props }) {
|
|
127
|
-
const { center, circumference, radius, rotationTransform, strokeDashoffset, strokeWidth, threshold, } = useProgressCircleContext(PROGRESS_CIRCLE_INDICATOR_NAME, __scopeProgressCircle);
|
|
128
|
-
return (_jsx("circle", { cx: center, cy: center, fill: "transparent", r: radius, stroke: threshold?.color ?? "currentColor", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, strokeLinecap: "round", strokeWidth: strokeWidth, transform: rotationTransform, ...props }));
|
|
129
|
-
}
|
|
130
|
-
/* -----------------------------------------------------------------------------
|
|
131
|
-
* Component: ProgressCircleValue
|
|
132
|
-
* --------------------------------------------------------------------------- */
|
|
133
|
-
const PROGRESS_CIRCLE_VALUE_NAME = "ProgressCircleValue";
|
|
134
|
-
/**
|
|
135
|
-
* Displays the current progress value
|
|
136
|
-
*
|
|
137
|
-
* Supports custom content or default value text rendering.
|
|
138
|
-
*/
|
|
139
|
-
function ProgressCircleValue({ __scopeProgressCircle, children, ...props }) {
|
|
140
|
-
const { clampedValue, valueText } = useProgressCircleContext(PROGRESS_CIRCLE_VALUE_NAME, __scopeProgressCircle);
|
|
141
|
-
if (typeof children === "function") {
|
|
142
|
-
return children({ value: clampedValue, valueText });
|
|
143
|
-
}
|
|
144
|
-
return _jsx("div", { ...props, children: children ?? valueText });
|
|
145
|
-
}
|
|
146
|
-
/* -----------------------------------------------------------------------------
|
|
147
|
-
* Helpers
|
|
148
|
-
* -------------------------------------------------------------------------- */
|
|
149
|
-
/**
|
|
150
|
-
* Clamps a value within a specified min/max range
|
|
151
|
-
*
|
|
152
|
-
* @param min - Minimum value
|
|
153
|
-
* @param max - Maximum value
|
|
154
|
-
* @param value - Value to clamp
|
|
155
|
-
* @returns Clamped value
|
|
156
|
-
*/
|
|
157
|
-
function clamp(min, max, value) {
|
|
158
|
-
return Math.min(max, Math.max(min, value));
|
|
159
|
-
}
|
|
160
|
-
/* -----------------------------------------------------------------------------
|
|
161
|
-
* Exports
|
|
162
|
-
* -------------------------------------------------------------------------- */
|
|
163
|
-
export { createProgressCircleScope, ProgressCircleIndicator as Indicator, ProgressCircle, ProgressCircleIndicator, ProgressCircleProvider, ProgressCircleSVG, ProgressCircleTrack, ProgressCircleValue, ProgressCircleProvider as Provider, ProgressCircle as Root, ProgressCircleSVG as SVG, ProgressCircleTrack as Track, ProgressCircleValue as Value, };
|