@ngrok/mantle 0.22.2 → 0.23.1
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/dist/alert.d.ts +20 -10
- package/dist/alert.js.map +1 -1
- package/dist/checkbox.d.ts +14 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/{chunk-3TQR32Q5.js → chunk-7FIV4E5C.js} +2 -2
- package/dist/chunk-UXH22BMO.js +2 -0
- package/dist/chunk-UXH22BMO.js.map +1 -0
- package/dist/combobox.d.ts +5 -3
- package/dist/combobox.js +1 -1
- package/dist/dropdown-menu.d.ts +5 -2
- package/dist/dropdown-menu.js +1 -1
- package/dist/input.d.ts +2 -2
- package/dist/pagination.d.ts +1 -2
- package/dist/pagination.js +1 -1
- package/dist/popover.js +1 -1
- package/dist/popover.js.map +1 -1
- package/dist/progress.d.ts +20 -1
- package/dist/progress.js.map +1 -1
- package/dist/sandboxed-on-click.d.ts +66 -0
- package/dist/sandboxed-on-click.js +2 -0
- package/dist/sandboxed-on-click.js.map +1 -0
- package/dist/select.d.ts +6 -3
- package/dist/select.js +1 -1
- package/dist/separator.d.ts +60 -4
- package/dist/separator.js +1 -1
- package/dist/sheet.d.ts +13 -2
- package/dist/sheet.js +1 -1
- package/dist/sheet.js.map +1 -1
- package/dist/switch.d.ts +16 -2
- package/dist/switch.js +1 -1
- package/dist/switch.js.map +1 -1
- package/dist/text-area.d.ts +25 -10
- package/dist/text-area.js +1 -1
- package/dist/text-area.js.map +1 -1
- package/dist/{types-Cs5ck3Vt.d.ts → types-DehRoXC5.d.ts} +4 -18
- package/package.json +14 -10
- package/dist/chunk-R4XXPIT2.js +0 -2
- package/dist/chunk-R4XXPIT2.js.map +0 -1
- /package/dist/{chunk-3TQR32Q5.js.map → chunk-7FIV4E5C.js.map} +0 -0
package/dist/alert.d.ts
CHANGED
|
@@ -15,7 +15,10 @@ type AlertProps = ComponentProps<"div"> & {
|
|
|
15
15
|
/**
|
|
16
16
|
* Displays a callout for user attention. Root container for all Alert sub-components.
|
|
17
17
|
*
|
|
18
|
+
* @see https://mantle.ngrok.com/components/alert#api-alert
|
|
19
|
+
*
|
|
18
20
|
* @example
|
|
21
|
+
* ```tsx
|
|
19
22
|
* <Alert priority="info">
|
|
20
23
|
* <AlertIcon />
|
|
21
24
|
* <AlertContent>
|
|
@@ -25,8 +28,7 @@ type AlertProps = ComponentProps<"div"> & {
|
|
|
25
28
|
* </AlertDescription>
|
|
26
29
|
* </AlertContent>
|
|
27
30
|
* </Alert>
|
|
28
|
-
|
|
29
|
-
* @see https://mantle.ngrok.com/components/alert#api-alert
|
|
31
|
+
*```
|
|
30
32
|
*/
|
|
31
33
|
declare const Alert: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
32
34
|
type AlertIconProps = Omit<SvgAttributes, "children"> & {
|
|
@@ -40,7 +42,10 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
|
|
|
40
42
|
*
|
|
41
43
|
* The default rendered icon be overridden with a custom icon using the `svg` prop.
|
|
42
44
|
*
|
|
45
|
+
* @see https://mantle.ngrok.com/components/alert#api-alert-icon
|
|
46
|
+
*
|
|
43
47
|
* @example
|
|
48
|
+
* ```tsx
|
|
44
49
|
* <Alert priority="info">
|
|
45
50
|
* <AlertIcon />
|
|
46
51
|
* <AlertContent>
|
|
@@ -50,14 +55,16 @@ type AlertIconProps = Omit<SvgAttributes, "children"> & {
|
|
|
50
55
|
* </AlertDescription>
|
|
51
56
|
* </AlertContent>
|
|
52
57
|
* </Alert>
|
|
53
|
-
*
|
|
54
|
-
* @see https://mantle.ngrok.com/components/alert#api-alert-icon
|
|
58
|
+
* ```
|
|
55
59
|
*/
|
|
56
60
|
declare const AlertIcon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
57
61
|
/**
|
|
58
62
|
* The container for the content slot of an alert. Place the title and description as direct children.
|
|
59
63
|
*
|
|
64
|
+
* @see https://mantle.ngrok.com/components/alert#api-alert-content
|
|
65
|
+
*
|
|
60
66
|
* @example
|
|
67
|
+
* ```tsx
|
|
61
68
|
* <Alert priority="info">
|
|
62
69
|
* <AlertIcon />
|
|
63
70
|
* <AlertContent>
|
|
@@ -67,14 +74,16 @@ declare const AlertIcon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "r
|
|
|
67
74
|
* </AlertDescription>
|
|
68
75
|
* </AlertContent>
|
|
69
76
|
* </Alert>
|
|
70
|
-
|
|
71
|
-
* @see https://mantle.ngrok.com/components/alert#api-alert-content
|
|
77
|
+
*```
|
|
72
78
|
*/
|
|
73
79
|
declare const AlertContent: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
74
80
|
/**
|
|
75
81
|
* The title of an alert. Default renders as an h5 element, use asChild to render something else.
|
|
76
82
|
*
|
|
83
|
+
* @see https://mantle.ngrok.com/components/alert#api-alert-title
|
|
84
|
+
*
|
|
77
85
|
* @example
|
|
86
|
+
* ```tsx
|
|
78
87
|
* <Alert priority="info">
|
|
79
88
|
* <AlertIcon />
|
|
80
89
|
* <AlertContent>
|
|
@@ -84,15 +93,17 @@ declare const AlertContent: react.ForwardRefExoticComponent<Omit<react.DetailedH
|
|
|
84
93
|
* </AlertDescription>
|
|
85
94
|
* </AlertContent>
|
|
86
95
|
* </Alert>
|
|
87
|
-
|
|
88
|
-
* @see https://mantle.ngrok.com/components/alert#api-alert-title
|
|
96
|
+
*```
|
|
89
97
|
*/
|
|
90
98
|
declare const AlertTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
|
|
91
99
|
type AlertDescriptionProps = ComponentProps<"p"> & WithAsChild;
|
|
92
100
|
/**
|
|
93
101
|
* The optional description of an alert. Default renders as an p element, use asChild to render something else.
|
|
94
102
|
*
|
|
103
|
+
* @see https://mantle.ngrok.com/components/alert#api-alert-description
|
|
104
|
+
*
|
|
95
105
|
* @example
|
|
106
|
+
* ```tsx
|
|
96
107
|
* <Alert priority="info">
|
|
97
108
|
* <AlertIcon />
|
|
98
109
|
* <AlertContent>
|
|
@@ -102,8 +113,7 @@ type AlertDescriptionProps = ComponentProps<"p"> & WithAsChild;
|
|
|
102
113
|
* </AlertDescription>
|
|
103
114
|
* </AlertContent>
|
|
104
115
|
* </Alert>
|
|
105
|
-
*
|
|
106
|
-
* @see https://mantle.ngrok.com/components/alert#api-alert-description
|
|
116
|
+
* ```
|
|
107
117
|
*/
|
|
108
118
|
declare const AlertDescription: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
109
119
|
|
package/dist/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Info } from \"@phosphor-icons/react/Info\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tHTMLAttributes,\n\tReactNode,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-accent-500/50 bg-accent-500/10 text-accent-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t},\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @example\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n
|
|
1
|
+
{"version":3,"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircle } from \"@phosphor-icons/react/CheckCircle\";\nimport { Info } from \"@phosphor-icons/react/Info\";\nimport { Warning } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamond } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tHTMLAttributes,\n\tReactNode,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"border-danger-500/50 bg-danger-500/10 text-danger-700\",\n\t\t\t\tinfo: \"border-accent-500/50 bg-accent-500/10 text-accent-700\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess: \"border-success-500/50 bg-success-500/10 text-success-700\",\n\t\t\t\twarning: \"border-warning-500/50 bg-warning-500/10 text-warning-700\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t},\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(\n\t\t\t() => ({ priority }),\n\t\t\t[priority],\n\t\t);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(alertVariants({ priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nAlert.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <Warning />,\n\tinfo: <Info />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircle />,\n\twarning: <WarningDiamond />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-icon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst AlertIcon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-5\", className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAlertIcon.displayName = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-content\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst AlertContent = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div ref={ref} className={cx(\"min-w-0 flex-1\", className)} {...props} />\n\t),\n);\nAlertContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-title\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n *```\n */\nconst AlertTitle = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The optional description of an alert. Default renders as an p element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#api-alert-description\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n * <AlertIcon />\n * <AlertContent>\n * <AlertTitle>Alert Title</AlertTitle>\n * <AlertDescription>\n * Alert description text.\n * </AlertDescription>\n * </AlertContent>\n * </Alert>\n * ```\n */\nconst AlertDescription = forwardRef<ComponentRef<\"p\">, AlertDescriptionProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-sm\", className)} {...props} />\n\t\t);\n\t},\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport {\n\t//,\n\tAlert,\n\tAlertContent,\n\tAlertDescription,\n\tAlertIcon,\n\tAlertTitle,\n};\n"],"mappings":"gFAAA,OAAS,eAAAA,MAAmB,oCAC5B,OAAS,QAAAC,MAAY,6BACrB,OAAS,WAAAC,MAAe,gCACxB,OAAS,kBAAAC,MAAsB,uCAC/B,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BAOpB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,EAAY,WAAAC,MAAe,QAC/D,OAAOC,MAAe,iBAkFlB,cAAAC,MAAA,oBA9DJ,IAAMC,EAAeC,EAAwC,IAAI,EAEjE,SAASC,GAAkB,CAC1B,IAAMC,EAAUC,EAAWJ,CAAY,EACvC,OAAAK,EAAUF,EAAS,oDAAoD,EAChEA,CACR,CAEA,IAAMG,EAAgBC,EACrB,+DACA,CACC,SAAU,CAKT,SAAU,CACT,OAAQ,wDACR,KAAM,wDAEN,QAAS,2DACT,QAAS,0DACV,CACD,CACD,CACD,EA4BMC,EAAQC,EACb,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC3C,IAAMV,EAA6BW,EAClC,KAAO,CAAE,SAAAH,CAAS,GAClB,CAACA,CAAQ,CACV,EAEA,OACCI,EAACf,EAAa,SAAb,CAAsB,MAAOG,EAC7B,SAAAY,EAAC,OACA,IAAKF,EACL,UAAWG,EAAGV,EAAc,CAAE,SAAAK,CAAS,CAAC,EAAGD,CAAS,EACnD,GAAGE,EACL,EACD,CAEF,CACD,EACAJ,EAAM,YAAc,QAYpB,IAAMS,EAAe,CACpB,OAAQF,EAACG,EAAA,EAAQ,EACjB,KAAMH,EAACI,EAAA,EAAK,EAEZ,QAASJ,EAACK,EAAA,EAAY,EACtB,QAASL,EAACM,EAAA,EAAe,CAC1B,EAsBMC,EAAYb,EACjB,CAAC,CAAE,UAAAC,EAAW,IAAAa,EAAK,GAAGX,CAAM,EAAGC,IAAQ,CACtC,IAAMW,EAAMtB,EAAgB,EACtBuB,EAAcR,EAAaO,EAAI,QAAQ,EAE7C,OACCT,EAACW,EAAA,CACA,IAAKb,EACL,UAAWG,EAAG,SAAUN,CAAS,EACjC,IAAKa,GAAOE,EACX,GAAGb,EACL,CAEF,CACD,EACAU,EAAU,YAAc,YAoBxB,IAAMK,EAAelB,EACpB,CAAC,CAAE,UAAAC,EAAW,GAAGE,CAAM,EAAGC,IACzBE,EAAC,OAAI,IAAKF,EAAK,UAAWG,EAAG,iBAAkBN,CAAS,EAAI,GAAGE,EAAO,CAExE,EACAe,EAAa,YAAc,eAsB3B,IAAMC,EAAanB,EAClB,CAAC,CAAE,QAAAoB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAIzCE,EAHiBc,EAAUC,EAAO,KAGjC,CACA,IAAKjB,EACL,UAAWG,EAAG,cAAeN,CAAS,EACrC,GAAGE,EACL,CAGH,EACAgB,EAAW,YAAc,aAsBzB,IAAMG,EAAmBtB,EACxB,CAAC,CAAE,QAAAoB,EAAU,GAAO,UAAAnB,EAAW,GAAGE,CAAM,EAAGC,IAIzCE,EAHiBc,EAAUC,EAAO,IAGjC,CAAU,IAAKjB,EAAK,UAAWG,EAAG,UAAWN,CAAS,EAAI,GAAGE,EAAO,CAGxE,EACAmB,EAAiB,YAAc","names":["CheckCircle","Info","Warning","WarningDiamond","Slot","cva","createContext","forwardRef","useContext","useMemo","invariant","jsx","AlertContext","createContext","useAlertContext","context","useContext","invariant","alertVariants","cva","Alert","forwardRef","className","priority","props","ref","useMemo","jsx","cx","defaultIcons","Warning","Info","CheckCircle","WarningDiamond","AlertIcon","svg","ctx","defaultIcon","SvgOnly","AlertContent","AlertTitle","asChild","Slot","AlertDescription"]}
|
package/dist/checkbox.d.ts
CHANGED
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { W as WithValidation } from './types-
|
|
2
|
+
import { W as WithValidation } from './types-DehRoXC5.js';
|
|
3
3
|
|
|
4
4
|
type CheckedState = boolean | "indeterminate";
|
|
5
5
|
/**
|
|
6
6
|
* A form control that allows the user to toggle between checked and not checked.
|
|
7
|
+
* Supports indeterminate state.
|
|
8
|
+
*
|
|
9
|
+
* @see https://mantle.ngrok.com/components/checkbox#api
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <form>
|
|
14
|
+
* <Label htmlFor="terms" className="flex items-center gap-2">
|
|
15
|
+
* <Checkbox name="terms" id="terms" />
|
|
16
|
+
* Accept terms and conditions
|
|
17
|
+
* </Label>
|
|
18
|
+
* </form>
|
|
19
|
+
* ```
|
|
7
20
|
*/
|
|
8
21
|
declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "checked" | "defaultChecked"> & WithValidation & {
|
|
9
22
|
/**
|
package/dist/checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (\n\tchecked: CheckedState | undefined,\n): checked is \"indeterminate\" => checked === \"indeterminate\";\n\ntype Props = Omit<\n\tComponentPropsWithoutRef<\"input\">,\n\t\"type\" | \"checked\" | \"defaultChecked\"\n> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-none\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={\n\t\t\t\t\tisIndeterminate(defaultChecked) ? undefined : defaultChecked\n\t\t\t\t}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"oEAAA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,
|
|
1
|
+
{"version":3,"sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/index.js\";\nimport type { WithValidation } from \"../input/index.js\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\nconst isIndeterminate = (\n\tchecked: CheckedState | undefined,\n): checked is \"indeterminate\" => checked === \"indeterminate\";\n\ntype Props = Omit<\n\tComponentPropsWithoutRef<\"input\">,\n\t\"type\" | \"checked\" | \"defaultChecked\"\n> &\n\tWithValidation & {\n\t\t/**\n\t\t * The controlled checked state of the checkbox. Must be used in conjunction with onChange.\n\t\t */\n\t\tchecked?: CheckedState;\n\t\t/**\n\t\t * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n\t\t */\n\t\tdefaultChecked?: CheckedState;\n\t};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n * Supports indeterminate state.\n *\n * @see https://mantle.ngrok.com/components/checkbox#api\n *\n * @example\n * ```tsx\n * <form>\n * <Label htmlFor=\"terms\" className=\"flex items-center gap-2\">\n * <Checkbox name=\"terms\" id=\"terms\" />\n * Accept terms and conditions\n * </Label>\n * </form>\n * ```\n */\nconst Checkbox = forwardRef<ComponentRef<\"input\">, Props>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tclassName,\n\t\t\tchecked: _checked,\n\t\t\tdefaultChecked: _defaultChecked,\n\t\t\tdefaultValue = \"on\",\n\t\t\tonClick,\n\t\t\treadOnly,\n\t\t\tvalidation: _validation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\t\tconst [defaultChecked] = useState(_defaultChecked);\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(_checked);\n\t\t\t}\n\t\t}, [_checked]);\n\n\t\tuseEffect(() => {\n\t\t\tif (innerRef.current) {\n\t\t\t\tinnerRef.current.indeterminate = isIndeterminate(defaultChecked);\n\t\t\t}\n\t\t}, [defaultChecked]);\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-checked={isIndeterminate(_checked) ? \"mixed\" : _checked}\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"border-form bg-form shrink-0 cursor-pointer select-none appearance-none rounded border disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"bg-center bg-no-repeat focus:outline-none\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-none focus-visible:ring-4\",\n\t\t\t\t\t\"checked:border-accent-500 checked:bg-accent-500 checked:bg-checked-icon\",\n\t\t\t\t\t\"indeterminate:border-accent-500 indeterminate:bg-accent-500 indeterminate:bg-indeterminate-icon\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:checked:bg-success-500 data-validation-success:indeterminate:bg-success-500 focus-visible:data-validation-success:border-success-600 focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:checked:bg-warning-500 data-validation-warning:indeterminate:bg-warning-500 focus-visible:data-validation-warning:border-warning-600 focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:checked:bg-danger-500 data-validation-error:indeterminate:bg-danger-500 focus-visible:data-validation-error:border-danger-600 focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"where:block where:size-4 where:p-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tchecked={isIndeterminate(_checked) ? undefined : _checked}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tdefaultChecked={\n\t\t\t\t\tisIndeterminate(defaultChecked) ? undefined : defaultChecked\n\t\t\t\t}\n\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tref={composeRefs(innerRef, ref)}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport {\n\t//,\n\tCheckbox,\n};\n"],"mappings":"oEAAA,OAAOA,MAAU,OACjB,OAAS,cAAAC,EAAY,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAgFrD,cAAAC,MAAA,oBAzEH,IAAMC,EACLC,GACgCA,IAAY,gBAiCvCC,EAAWC,EAChB,CACC,CACC,eAAgBC,EAChB,UAAAC,EACA,QAASC,EACT,eAAgBC,EAChB,aAAAC,EAAe,KACf,QAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAA8B,IAAI,EAC7C,CAACC,CAAc,EAAIC,EAASV,CAAe,EAE3CW,EADYd,GAAgB,MAAQA,IAAiB,QAExD,QACA,OAAOO,GAAgB,WACtBA,EAAY,EACZA,EACEQ,EAAcf,GAAgBc,IAAe,QAEnD,OAAAE,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBM,CAAQ,EAE3D,EAAG,CAACA,CAAQ,CAAC,EAEbc,EAAU,IAAM,CACXN,EAAS,UACZA,EAAS,QAAQ,cAAgBd,EAAgBgB,CAAc,EAEjE,EAAG,CAACA,CAAc,CAAC,EAGlBjB,EAAC,SACA,eAAcC,EAAgBM,CAAQ,EAAI,QAAUA,EACpD,eAAca,EACd,UAAWE,EACV,qIACA,4CACA,kHACA,0EACA,kGACA,mQACA,mQACA,oPACA,qCACAhB,CACD,EACA,QAASL,EAAgBM,CAAQ,EAAI,OAAYA,EACjD,kBAAiBY,GAAc,OAC/B,eACClB,EAAgBgB,CAAc,EAAI,OAAYA,EAE/C,aAAcR,EACd,QAAUc,GAAU,CACnB,GAAIZ,EAAU,CACbY,EAAM,eAAe,EACrB,MACD,CACAb,IAAUa,CAAK,CAChB,EACA,SAAUZ,EACV,IAAKa,EAAYT,EAAUD,CAAG,EAC9B,KAAK,WACJ,GAAGD,EACL,CAEF,CACD,EACAV,EAAS,YAAc","names":["clsx","forwardRef","useEffect","useRef","useState","jsx","isIndeterminate","checked","Checkbox","forwardRef","_ariaInvalid","className","_checked","_defaultChecked","defaultValue","onClick","readOnly","_validation","props","ref","innerRef","useRef","defaultChecked","useState","validation","ariaInvalid","useEffect","clsx","event","composeRefs"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as S}from"./chunk-MF2QITTY.js";import{b as g}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as S}from"./chunk-MF2QITTY.js";import{b as g}from"./chunk-UXH22BMO.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CaretDown as P}from"@phosphor-icons/react/CaretDown";import{CaretUp as R}from"@phosphor-icons/react/CaretUp";import{Check as I}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as N,forwardRef as n,useContext as T}from"react";import{jsx as i,jsxs as u}from"react/jsx-runtime";var h=N({}),B=n(({"aria-invalid":o,children:a,id:t,validation:l,onBlur:s,onChange:d,...p},c)=>i(e.Root,{...p,onValueChange:d,children:i(h.Provider,{value:{"aria-invalid":o,id:t,validation:l,onBlur:s,ref:c},children:a})}));B.displayName="Select";var F=e.Group,G=e.Value,W=n(({"aria-invalid":o,className:a,children:t,id:l,validation:s,...d},p)=>{let c=T(h),m=c["aria-invalid"]??o,x=m!=null&&m!=="false",f=c.validation??s,v=x?"error":typeof f=="function"?f():f,C=m??v==="error",w=c.id??l;return u(e.Trigger,{"aria-invalid":C,className:r("h-9 text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":v||void 0,id:w,ref:S(p,c.ref),...d,children:[t,i(e.Icon,{asChild:!0,children:i(P,{className:"size-4 shrink-0",weight:"bold"})})]})});W.displayName="SelectTrigger";var y=n(({className:o,...a},t)=>i(e.ScrollUpButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(R,{className:"size-4 shrink-0",weight:"bold"})}));y.displayName="SelectScrollUpButton";var b=n(({className:o,...a},t)=>i(e.ScrollDownButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(P,{className:"size-4 shrink-0",weight:"bold"})}));b.displayName="SelectScrollDownButton";var L=n(({className:o,children:a,position:t="popper",width:l="trigger",...s},d)=>i(e.Portal,{children:u(e.Content,{ref:d,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",t==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:t,...s,children:[i(y,{}),i(e.Viewport,{className:r("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),i(b,{})]})}));L.displayName="SelectContent";var k=n(({className:o,...a},t)=>i(e.Label,{ref:t,className:r("px-2 py-1.5 text-sm font-semibold",o),...a}));k.displayName="SelectLabel";var V=n(({className:o,children:a,...t},l)=>u(e.Item,{ref:l,className:r("relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none","focus:bg-popover-hover","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-filled-accent data-state-checked:text-on-filled","focus:data-state-checked:bg-filled-accent",o),...t,children:[i(e.ItemText,{children:a}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(I,{className:"size-4 shrink-0",weight:"bold"})})]}));V.displayName="SelectItem";var E=n(({className:o,...a},t)=>i(g,{ref:t,className:r("-mx-1 my-1 h-px w-auto",o),...a}));E.displayName="SelectSeparator";export{B as a,F as b,G as c,W as d,L as e,k as f,V as g,E as h};
|
|
2
|
+
//# sourceMappingURL=chunk-7FIV4E5C.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as i}from"./chunk-AZ56JGNY.js";import{Slot as s}from"@radix-ui/react-slot";import{createContext as u,forwardRef as f,useContext as C}from"react";import{jsx as p}from"react/jsx-runtime";var g=["horizontal","vertical"],l=u({}),P=({className:t,children:a,asChild:e,...o})=>{let n=e?s:"div";return p(l.Provider,{value:{orientation:"horizontal"},children:p(n,{"data-horizontal-separator-group":!0,className:i("group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0",t),...o,children:a})})},x=f(({asChild:t=!1,children:a,className:e,orientation:o,semantic:n=!1,...c},m)=>{let d=t?s:"div",r=C(l).orientation??(y(o)?o:"horizontal"),h=n?{"aria-orientation":r==="vertical"?r:void 0,role:"separator"}:{role:"none"};return p(d,{className:i("separator","dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20",r==="horizontal"?"h-px w-full group-data-[horizontal-separator-group]:flex-1":"h-full w-px",e),"data-orientation":r,"data-separator":!0,...h,ref:m,...t?{children:a}:{},...c})});x.displayName="Separator";function y(t){return typeof t=="string"&&g.includes(t)}export{P as a,x as b};
|
|
2
|
+
//# sourceMappingURL=chunk-UXH22BMO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/separator/separator.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\nconst orientations = [\"horizontal\", \"vertical\"] as const;\ntype Orientation = (typeof orientations)[number];\n\ntype SeparatorGroupContextShape = {\n\torientation?: Orientation;\n};\n\nconst SeparatorGroupContext = createContext<SeparatorGroupContextShape>({});\n\n/**\n * A container to layout a group of horizontal separators and other children.\n * Overrides all children `Separator`s to be `orientation=\"horizontal\"`.\n *\n * @see https://mantle.ngrok.com/components/separator#api-horizontal-separator-group\n *\n * @example\n * ```tsx\n * <HorizontalSeparatorGroup>\n * <Separator />\n * <h3>ngrok mantle</h3>\n * <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n * <h3>ngrok mantle</h3>\n * <Separator />\n * </HorizontalSeparatorGroup>\n *\n * <HorizontalSeparatorGroup>\n * <Separator />\n * <h3>ngrok mantle</h3>\n * </HorizontalSeparatorGroup>\n * ```\n */\nconst HorizontalSeparatorGroup = ({\n\tclassName,\n\tchildren,\n\tasChild,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & WithAsChild) => {\n\tconst Comp = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<SeparatorGroupContext.Provider value={{ orientation: \"horizontal\" }}>\n\t\t\t<Comp\n\t\t\t\tdata-horizontal-separator-group\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group flex items-center gap-2 [&_*:not([data-separator])]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</SeparatorGroupContext.Provider>\n\t);\n};\n\ntype SeparatorProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Either `horizontal` or `vertical`.\n\t\t *\n\t\t * @default \"horizontal\"\n\t\t */\n\t\torientation?: Orientation;\n\t\t/**\n\t\t * If `true`, the separator will be rendered with all accessibility-related attributes and role=\"separator\".\n\t\t * If `false`, the separator is purely decorative and all accessibility-related attributes\n\t\t * are updated so that that the rendered element is removed from the accessibility tree.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsemantic?: boolean;\n\t};\n\n/**\n * Visually or semantically separates content.\n *\n * @see https://mantle.ngrok.com/components/separator#api-separator\n *\n * @example\n * ```tsx\n * <Separator className=\"my-4\" />\n *\n * <Separator className=\"my-4\" semantic />\n *\n * <div className=\"flex h-5 items-center gap-4 text-sm\">\n * Blog\n * <Separator orientation=\"vertical\" />\n * Docs\n * <Separator orientation=\"vertical\" />\n * Source\n * </div>\n * ```\n */\nconst Separator = forwardRef<ComponentRef<\"div\">, SeparatorProps>(\n\t(\n\t\t{\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\torientation: propOrientation,\n\t\t\tsemantic = false,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst ctx = useContext(SeparatorGroupContext);\n\t\t// Prefer the orientation from the context if it's set, else fallback to the prop and then to \"horizontal\".\n\t\tconst orientation =\n\t\t\tctx.orientation ??\n\t\t\t(isOrientation(propOrientation) ? propOrientation : \"horizontal\");\n\t\t// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n\t\tconst ariaOrientation =\n\t\t\torientation === \"vertical\" ? orientation : undefined;\n\t\tconst semanticProps = semantic\n\t\t\t? { \"aria-orientation\": ariaOrientation, role: \"separator\" }\n\t\t\t: { role: \"none\" };\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"separator\",\n\t\t\t\t\t\"dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"h-px w-full group-data-[horizontal-separator-group]:flex-1\"\n\t\t\t\t\t\t: \"h-full w-px\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-orientation={orientation}\n\t\t\t\tdata-separator\n\t\t\t\t{...semanticProps}\n\t\t\t\tref={ref}\n\t\t\t\t{...(asChild ? { children } : {})} // only pass children if asChild is true\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nSeparator.displayName = \"Separator\";\n\nexport {\n\t//,\n\tHorizontalSeparatorGroup,\n\tSeparator,\n};\n\nfunction isOrientation(value: unknown): value is Orientation {\n\treturn (\n\t\ttypeof value === \"string\" && orientations.includes(value as Orientation)\n\t);\n}\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QAgDnD,cAAAC,MAAA,oBA5CH,IAAMC,EAAe,CAAC,aAAc,UAAU,EAOxCC,EAAwBC,EAA0C,CAAC,CAAC,EA2BpEC,EAA2B,CAAC,CACjC,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACJ,IAAoD,CACnD,IAAMC,EAAOF,EAAUG,EAAO,MAE9B,OACCV,EAACE,EAAsB,SAAtB,CAA+B,MAAO,CAAE,YAAa,YAAa,EAClE,SAAAF,EAACS,EAAA,CACA,kCAA+B,GAC/B,UAAWE,EACV,qEACAN,CACD,EACC,GAAGG,EAEH,SAAAF,EACF,EACD,CAEF,EAwCMM,EAAYC,EACjB,CACC,CACC,QAAAN,EAAU,GACV,SAAAD,EACA,UAAAD,EACA,YAAaS,EACb,SAAAC,EAAW,GACX,GAAGP,CACJ,EACAQ,IACI,CACJ,IAAMC,EAAYV,EAAUG,EAAO,MAG7BQ,EAFMC,EAAWjB,CAAqB,EAGvC,cACHkB,EAAcN,CAAe,EAAIA,EAAkB,cAI/CO,EAAgBN,EACnB,CAAE,mBAFJG,IAAgB,WAAaA,EAAc,OAEF,KAAM,WAAY,EACzD,CAAE,KAAM,MAAO,EAElB,OACClB,EAACiB,EAAA,CACA,UAAWN,EACV,YACA,wFACAO,IAAgB,aACb,6DACA,cACHb,CACD,EACA,mBAAkBa,EAClB,iBAAc,GACb,GAAGG,EACJ,IAAKL,EACJ,GAAIT,EAAU,CAAE,SAAAD,CAAS,EAAI,CAAC,EAC9B,GAAGE,EACL,CAEF,CACD,EACAI,EAAU,YAAc,YAQxB,SAASU,EAAcC,EAAsC,CAC5D,OACC,OAAOA,GAAU,UAAYC,EAAa,SAASD,CAAoB,CAEzE","names":["Slot","createContext","forwardRef","useContext","jsx","orientations","SeparatorGroupContext","createContext","HorizontalSeparatorGroup","className","children","asChild","props","Comp","Slot","cx","Separator","forwardRef","propOrientation","semantic","ref","Component","orientation","useContext","isOrientation","semanticProps","isOrientation","value","orientations"]}
|
package/dist/combobox.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import * as _radix_ui_react_separator from '@radix-ui/react-separator';
|
|
2
1
|
import * as react from 'react';
|
|
3
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
3
|
import * as Primitive from '@ariakit/react';
|
|
5
4
|
import { W as WithAsChild } from './as-child-Cvu56SuO.js';
|
|
6
|
-
import { W as WithValidation } from './types-
|
|
5
|
+
import { W as WithValidation } from './types-DehRoXC5.js';
|
|
7
6
|
|
|
8
7
|
type ComboboxProps = Primitive.ComboboxProviderProps;
|
|
9
8
|
/**
|
|
@@ -151,6 +150,9 @@ declare const ComboboxItemValue: react.ForwardRefExoticComponent<Omit<ComboboxIt
|
|
|
151
150
|
* </ComboboxContent>
|
|
152
151
|
* </Combobox>
|
|
153
152
|
*/
|
|
154
|
-
declare const ComboboxSeparator: react.ForwardRefExoticComponent<Omit<Omit<
|
|
153
|
+
declare const ComboboxSeparator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
|
|
154
|
+
orientation?: "horizontal" | "vertical";
|
|
155
|
+
semantic?: boolean;
|
|
156
|
+
}, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
155
157
|
|
|
156
158
|
export { Combobox, ComboboxContent, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxItemValue, ComboboxSeparator };
|
package/dist/combobox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as f}from"./chunk-
|
|
1
|
+
import{b as f}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-AZ56JGNY.js";import*as t from"@ariakit/react";import{Slot as l}from"@radix-ui/react-slot";import{createContext as h,forwardRef as s}from"react";import{jsx as r}from"react/jsx-runtime";var I=({children:o,...e})=>r(t.ComboboxProvider,{...e,children:o}),C=s(({"aria-invalid":o,autoComplete:e="list",autoSelect:i="always",className:m,validation:a,...n},b)=>{let p=o!=null&&o!=="false"?"error":typeof a=="function"?a():a;return r(t.Combobox,{"aria-invalid":o??p==="error",autoComplete:e,autoSelect:i,className:d("pointer-coarse:text-base h-9 text-sm","bg-form relative block w-full rounded-md border px-3 py-2 border-form text-strong","placeholder:text-placeholder","aria-disabled:opacity-50","hover:border-neutral-400","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger","autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--blue-50))] autofill:bg-blue-50 autofill:[-webkit-text-fill-color:hsl(var(--text-strong))]",m),"data-validation":p||void 0,ref:b,...n})});C.displayName="ComboboxInput";var c=s(({asChild:o=!1,children:e,className:i,sameWidth:m=!0,unmountOnHide:a=!0,...n},b)=>r(t.ComboboxPopover,{className:d("border-popover bg-popover relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md p-1 my-1",i),ref:b,render:o?({ref:u,...p})=>r(l,{ref:u,...p}):void 0,sameWidth:m,unmountOnHide:a,...n,children:e}));c.displayName="ComboboxContent";var w=h(void 0),v=s(({asChild:o=!1,children:e,className:i,focusOnHover:m=!0,setValueOnClick:a=!0,value:n,...b},u)=>r(w.Provider,{value:n,children:r(t.ComboboxItem,{className:d("cursor-pointer rounded px-2 py-1.5 text-sm flex min-w-0 gap-2 items-center","data-active-item:bg-popover-hover","aria-disabled:opacity-50",i),focusOnHover:m,ref:u,render:o?({ref:p,...x})=>r(l,{ref:p,...x}):void 0,value:n,...b,children:e})}));v.displayName="ComboboxItem";var P=s(({asChild:o=!1,children:e,className:i,...m},a)=>r(t.ComboboxGroup,{className:d("",i),ref:a,render:o?({ref:n,...b})=>r(l,{ref:n,...b}):void 0,...m,children:e}));P.displayName="ComboboxGroup";var y=s(({asChild:o=!1,children:e,className:i,...m},a)=>r(t.ComboboxGroupLabel,{className:d("text-muted px-2 py-1 text-xs font-medium",i),ref:a,render:o?({ref:n,...b})=>r(l,{ref:n,...b}):void 0,...m,children:e}));y.displayName="ComboboxGroupLabel";var G=s(({asChild:o=!1,className:e,...i},m)=>r(t.ComboboxItemValue,{className:d("data-[user-value]:*:font-bold flex-1 shrink-0 text-strong font-normal",e),ref:m,render:o?({ref:a,...n})=>r(l,{ref:a,...n}):void 0,...i})),g=s(({className:o,...e},i)=>r(f,{ref:i,className:d("-mx-1.25 my-1 w-auto",o),...e}));g.displayName="ComboboxSeparator";export{I as Combobox,c as ComboboxContent,P as ComboboxGroup,y as ComboboxGroupLabel,C as ComboboxInput,v as ComboboxItem,G as ComboboxItemValue,g as ComboboxSeparator};
|
|
2
2
|
//# sourceMappingURL=combobox.js.map
|
package/dist/dropdown-menu.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { W as WithAsChild } from './as-child-Cvu56SuO.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
5
5
|
|
|
@@ -30,7 +30,10 @@ declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<Dropdo
|
|
|
30
30
|
declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
31
31
|
inset?: boolean;
|
|
32
32
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
33
|
-
declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<Omit<
|
|
33
|
+
declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild & {
|
|
34
|
+
orientation?: "horizontal" | "vertical";
|
|
35
|
+
semantic?: boolean;
|
|
36
|
+
}, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
34
37
|
declare const DropdownMenuShortcut: {
|
|
35
38
|
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
|
|
36
39
|
displayName: string;
|
package/dist/dropdown-menu.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as l}from"./chunk-
|
|
1
|
+
import{b as l}from"./chunk-UXH22BMO.js";import{a}from"./chunk-AZ56JGNY.js";import{CaretRight as C}from"@phosphor-icons/react/CaretRight";import{Check as c}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as n,jsxs as m}from"react/jsx-runtime";var y=e.Root,R=e.Trigger,k=e.Group,s=e.Portal,I=e.Sub,S=e.RadioGroup,w=d(({className:o,inset:t,children:r,...i},p)=>m(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-none","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",t&&"pl-8",o),ref:p,...i,children:[r,n("span",{className:"absolute right-2 flex items-center",children:n(C,{className:"size-4 shrink-0",weight:"bold"})})]}));w.displayName="DropdownMenuSubTrigger";var f=d(({className:o,loop:t=!0,...r},i)=>n(s,{children:n(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",o),loop:t,ref:i,...r})}));f.displayName="DropdownMenuSubContent";var g=d(({className:o,onClick:t,loop:r=!0,width:i,...p},x)=>n(s,{children:n(e.Content,{ref:x,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-none","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",o),loop:r,onClick:u=>{u.stopPropagation(),t?.(u)},...p})}));g.displayName="DropdownMenuContent";var h=d(({className:o,inset:t,...r},i)=>n(e.Item,{ref:i,className:a("focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-none transition-colors","[&>svg]:size-5 [&_svg]:shrink-0",t&&"pl-8",o),...r}));h.displayName="DropdownMenuItem";var M=d(({className:o,children:t,checked:r,...i},p)=>m(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",o),checked:r,...i,children:[n("span",{className:"absolute right-2 flex items-center",children:n(e.ItemIndicator,{children:n(c,{className:"size-5 shrink-0 sm:size-4",weight:"bold"})})}),t]}));M.displayName="DropdownMenuCheckboxItem";var v=d(({className:o,children:t,...r},i)=>m(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",o),ref:i,...r,children:[n("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:n(e.ItemIndicator,{children:n(c,{className:"size-4 shrink-0",weight:"bold"})})}),t]}));v.displayName="DropdownMenuRadioItem";var D=d(({className:o,inset:t,...r},i)=>n(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",t&&"pl-8",o),...r}));D.displayName="DropdownMenuLabel";var b=d(({className:o,...t},r)=>n(l,{ref:r,className:a("-mx-1.25 my-1 w-auto",o),...t}));b.displayName="DropdownMenuSeparator";var P=({className:o,...t})=>n("span",{className:a("ml-auto text-xs tracking-widest opacity-60",o),...t});P.displayName="DropdownMenuShortcut";export{y as DropdownMenu,M as DropdownMenuCheckboxItem,g as DropdownMenuContent,k as DropdownMenuGroup,h as DropdownMenuItem,D as DropdownMenuLabel,s as DropdownMenuPortal,S as DropdownMenuRadioGroup,v as DropdownMenuRadioItem,b as DropdownMenuSeparator,P as DropdownMenuShortcut,I as DropdownMenuSub,f as DropdownMenuSubContent,w as DropdownMenuSubTrigger,R as DropdownMenuTrigger};
|
|
2
2
|
//# sourceMappingURL=dropdown-menu.js.map
|
package/dist/input.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { InputHTMLAttributes, PropsWithChildren } from 'react';
|
|
3
|
-
import { a as WithAutoComplete, b as WithInputType, W as WithValidation } from './types-
|
|
4
|
-
export { A as AutoComplete, I as InputType, V as Validation } from './types-
|
|
3
|
+
import { a as WithAutoComplete, b as WithInputType, W as WithValidation } from './types-DehRoXC5.js';
|
|
4
|
+
export { A as AutoComplete, I as InputType, V as Validation } from './types-DehRoXC5.js';
|
|
5
5
|
|
|
6
6
|
type BaseProps = WithAutoComplete & WithInputType & WithValidation;
|
|
7
7
|
/**
|
package/dist/pagination.d.ts
CHANGED
|
@@ -8,9 +8,8 @@ import 'class-variance-authority/types';
|
|
|
8
8
|
import './variant-props-oDo2u-We.js';
|
|
9
9
|
import 'class-variance-authority';
|
|
10
10
|
import './deep-non-nullable-SmpSvoSd.js';
|
|
11
|
-
import '@radix-ui/react-separator';
|
|
12
11
|
import '@radix-ui/react-select';
|
|
13
|
-
import './types-
|
|
12
|
+
import './types-DehRoXC5.js';
|
|
14
13
|
|
|
15
14
|
type CursorPaginationProps = ComponentProps<"div"> & {
|
|
16
15
|
/**
|
package/dist/pagination.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as b,c as v,d as x,e as y,g as h}from"./chunk-
|
|
1
|
+
import{a as b,c as v,d as x,e as y,g as h}from"./chunk-7FIV4E5C.js";import"./chunk-MF2QITTY.js";import{b as z}from"./chunk-UXH22BMO.js";import{a as d}from"./chunk-7XIZZ4HQ.js";import{a as l}from"./chunk-ESJ3HLYJ.js";import"./chunk-PJLA4NRO.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-DJGIRPRQ.js";import"./chunk-HDPLH5HC.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CaretLeft as k}from"@phosphor-icons/react/dist/icons/CaretLeft";import{CaretRight as A}from"@phosphor-icons/react/dist/icons/CaretRight";import{Slot as E}from"@radix-ui/react-slot";import{createContext as F,forwardRef as m,useContext as N,useState as W}from"react";import P from"tiny-invariant";import{jsx as s,jsxs as f}from"react/jsx-runtime";var c=F(void 0),O=m(({className:n,children:e,defaultPageSize:a,...t},i)=>{let[o,r]=W(a);return s(c.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:r},children:s("div",{className:p("inline-flex items-center justify-between gap-2",n),ref:i,...t,children:e})})});O.displayName="CursorPagination";var T=m(({hasNextPage:n,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>f(d,{appearance:"panel",ref:o,...i,children:[s(l,{appearance:"ghost",disabled:!e,icon:s(k,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(z,{orientation:"vertical",className:"min-h-5"}),s(l,{appearance:"ghost",disabled:!n,icon:s(A,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));T.displayName="CursorButtons";var $=[5,10,20,50,100],B=m(({className:n,pageSizes:e=$,onChangePageSize:a,...t},i)=>{let o=N(c);return P(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),P(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),P(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),f(b,{defaultValue:`${o.pageSize}`,onChange:r=>{let g=Number.parseInt(r,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(x,{ref:i,className:p("w-auto min-w-36",n),value:o.pageSize,...t,children:s(v,{})}),s(y,{width:"trigger",children:e.map(r=>f(h,{value:`${r}`,children:[r," per page"]},r))})]})});B.displayName="CursorPageSizeSelect";function D({asChild:n=!1,className:e,...a}){let t=N(c);return P(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),f(n?E:"span",{className:p("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}import{useEffect as V,useState as w}from"react";function H({listSize:n,pageSize:e}){let[a,t]=w(1),[i,o]=w(e);V(()=>{o(e),t(1)},[e]),V(()=>{t(1)},[n]);let r=Math.ceil(n/i),g=(a-1)*i,S=a>1,C=a<r;function M(u){let j=Math.max(1,Math.min(u,r));t(j)}function R(){C&&t(u=>Math.min(u+1,r))}function G(){S&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function L(){t(r)}function U(){t(1)}return{currentPage:a,goToFirstPage:U,goToLastPage:L,goToPage:M,hasNextPage:C,hasPreviousPage:S,nextPage:R,offset:g,pageSize:i,previousPage:G,setPageSize:I,totalPages:r}}function q(n,e){return n.slice(e.offset,e.offset+e.pageSize)}export{T as CursorButtons,B as CursorPageSizeSelect,D as CursorPageSizeValue,O as CursorPagination,q as getOffsetPaginatedSlice,H as useOffsetPagination};
|
|
2
2
|
//# sourceMappingURL=pagination.js.map
|
package/dist/popover.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as t}from"./chunk-AZ56JGNY.js";import*as o from"@radix-ui/react-popover";import{forwardRef as c}from"react";import{jsx as r}from"react/jsx-runtime";var i=o.Root;i.displayName="Popover";var p=o.Trigger;p.displayName="PopoverTrigger";var a=o.Anchor;a.displayName="PopoverAnchor";var n=o.Close;n.displayName="PopoverClose";var m=c(({align:P="center",className:s,onClick:d,sideOffset:v=4,...f},l)=>r(o.Portal,{children:r(o.Content,{align:P,className:t("text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none",s),onClick:e=>{e.stopPropagation(),d?.(e)},ref:l,sideOffset:v,...f})}));m.displayName="PopoverContent";export{i as Popover,a as PopoverAnchor,n as PopoverClose,m as PopoverContent,p as PopoverTrigger};
|
|
2
2
|
//# sourceMappingURL=popover.js.map
|
package/dist/popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A popover is a floating overlay that appears above other elements on the page.\n * Displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Popover = PopoverPrimitive.Root;\nPopover.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\n/**\n * The content to render inside the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({
|
|
1
|
+
{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A popover is a floating overlay that appears above other elements on the page.\n * Displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst Popover = PopoverPrimitive.Root;\nPopover.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\n/**\n * The content to render inside the popover.\n *\n * @preview This component is in `preview` mode which means the API is not stable and may change.\n * There may also be bugs! Please file an issue if you find any! <3\n *\n * https://github.com/ngrok-oss/mantle/issues\n */\nconst PopoverContent = forwardRef<\n\tComponentRef<typeof PopoverPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 w-72 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverTrigger,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QA0ExB,cAAAC,MAAA,oBA5DH,IAAMC,EAA2B,OACjCA,EAAQ,YAAc,UAUtB,IAAMC,EAAkC,UACxCA,EAAe,YAAc,iBAU7B,IAAMC,EAAiC,SACvCA,EAAc,YAAc,gBAU5B,IAAMC,EAAgC,QACtCA,EAAa,YAAc,eAU3B,IAAMC,EAAiBC,EAItB,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAZ,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWM,EACV,waACAL,CACD,EACA,QAAUM,GAAU,CAKnBA,EAAM,gBAAgB,EACtBL,IAAUK,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAN,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","align","className","onClick","sideOffset","props","ref","cx","event"]}
|
package/dist/progress.d.ts
CHANGED
|
@@ -33,22 +33,41 @@ type Props = SvgAttributes & {
|
|
|
33
33
|
value?: ValueType | undefined;
|
|
34
34
|
};
|
|
35
35
|
/**
|
|
36
|
-
* A simple circular progress bar.
|
|
36
|
+
* A simple circular progress bar which shows the completion progress of a task.
|
|
37
|
+
*
|
|
38
|
+
* The indicator color is inherited via `currentColor`. Override the default
|
|
39
|
+
* (`accent-600`) by setting the `ProgressDonutIndicator`'s text color.
|
|
40
|
+
*
|
|
41
|
+
* @see https://mantle.ngrok.com/components/progress#api-progress-donut
|
|
37
42
|
*
|
|
38
43
|
* @example
|
|
44
|
+
* ```tsx
|
|
39
45
|
* <ProgressDonut value={60}>
|
|
40
46
|
* <ProgressDonutIndicator />
|
|
41
47
|
* </ProgressDonut>
|
|
48
|
+
*
|
|
49
|
+
* <ProgressDonut value={60}>
|
|
50
|
+
* <ProgressDonutIndicator color="text-danger-600" />
|
|
51
|
+
* </ProgressDonut>
|
|
52
|
+
* ```
|
|
42
53
|
*/
|
|
43
54
|
declare const ProgressDonut: ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, ...props }: Props) => react_jsx_runtime.JSX.Element;
|
|
44
55
|
type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
|
|
45
56
|
/**
|
|
46
57
|
* The indicator for the circular progress bar.
|
|
47
58
|
*
|
|
59
|
+
* @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator
|
|
60
|
+
*
|
|
48
61
|
* @example
|
|
62
|
+
* ```tsx
|
|
49
63
|
* <ProgressDonut value={60}>
|
|
50
64
|
* <ProgressDonutIndicator />
|
|
51
65
|
* </ProgressDonut>
|
|
66
|
+
*
|
|
67
|
+
* <ProgressDonut value={60}>
|
|
68
|
+
* <ProgressDonutIndicator color="text-danger-600" />
|
|
69
|
+
* </ProgressDonut>
|
|
70
|
+
* ```
|
|
52
71
|
*/
|
|
53
72
|
declare const ProgressDonutIndicator: ({ className, ...props }: ProgressDonutIndicatorProps) => react_jsx_runtime.JSX.Element;
|
|
54
73
|
|
package/dist/progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/progress/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\ntype ValueType = number | \"indeterminate\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * A simple circular progress bar.\n *\n * @example\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator />\n * </ProgressDonut>\n */\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" &&\n\t\t\t\t\t\t\"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @example\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator />\n * </ProgressDonut>\n */\nconst ProgressDonutIndicator = ({\n\tclassName,\n\t...props\n}: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n */\nexport function deriveStrokeWidthPx(\n\tstrokeWidth: number | string | undefined | null,\n): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","clsx","cx","indeterminateTailPercent","ProgressDonutIndicator","gradientId","useId","useContext","percentage","clamp","value","min","max","deriveStrokeWidthPx","strokeWidth","stroke","isNumber","isValidValueNumber","isValidMaxNumber","calcRadius","strokeWidthPx"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/progress/progress-donut.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\ntype ValueType = number | \"indeterminate\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonutIndicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator />\n * </ProgressDonut>\n *\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator color=\"text-danger-600\" />\n * </ProgressDonut>\n * ```\n */\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" &&\n\t\t\t\t\t\t\"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator />\n * </ProgressDonut>\n *\n * <ProgressDonut value={60}>\n * <ProgressDonutIndicator color=\"text-danger-600\" />\n * </ProgressDonut>\n * ```\n */\nconst ProgressDonutIndicator = ({\n\tclassName,\n\t...props\n}: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n */\nexport function deriveStrokeWidthPx(\n\tstrokeWidth: number | string | undefined | null,\n): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","clsx","cx","indeterminateTailPercent","ProgressDonutIndicator","gradientId","useId","useContext","percentage","clamp","value","min","max","deriveStrokeWidthPx","strokeWidth","stroke","isNumber","isValidValueNumber","isValidMaxNumber","calcRadius","strokeWidthPx"]}
|