@cloudflare/kumo 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +90 -0
- package/ai/component-registry.json +52 -3
- package/ai/component-registry.md +291 -2
- package/ai/schemas.ts +11 -2
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +24 -5
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/catalog.js +1 -1
- package/dist/{checkbox-CWANiedi.js → checkbox-Dt8iSNOg.js} +3 -3
- package/dist/{checkbox-CWANiedi.js.map → checkbox-Dt8iSNOg.js.map} +1 -1
- package/dist/clipboard-text-Bw5rKPXz.js +185 -0
- package/dist/clipboard-text-Bw5rKPXz.js.map +1 -0
- package/dist/{combobox-C9koouxM.js → combobox-BIC-YZ2L.js} +41 -41
- package/dist/combobox-BIC-YZ2L.js.map +1 -0
- package/dist/command-line/cli.js +88 -30
- package/dist/command-line/commands/add.js +88 -30
- package/dist/{command-palette-TGXgr6Vq.js → command-palette-D3MNR7w9.js} +31 -31
- package/dist/{command-palette-TGXgr6Vq.js.map → command-palette-D3MNR7w9.js.map} +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/date-picker.js +6 -0
- package/dist/components/date-picker.js.map +1 -0
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/date-picker-M6uNX5Ca.js +2921 -0
- package/dist/date-picker-M6uNX5Ca.js.map +1 -0
- package/dist/{dialog-CpCeOqSZ.js → dialog-toS9krNF.js} +17 -17
- package/dist/dialog-toS9krNF.js.map +1 -0
- package/dist/{dropdown-DFeFcKfn.js → dropdown-BquiYKKC.js} +38 -38
- package/dist/dropdown-BquiYKKC.js.map +1 -0
- package/dist/{field-Dt-XuSaQ.js → field-DCq04TgZ.js} +3 -3
- package/dist/{field-Dt-XuSaQ.js.map → field-DCq04TgZ.js.map} +1 -1
- package/dist/index.js +51 -49
- package/dist/index.js.map +1 -1
- package/dist/{input-GZAWBXYX.js → input-CCR8NGG7.js} +3 -3
- package/dist/{input-GZAWBXYX.js.map → input-CCR8NGG7.js.map} +1 -1
- package/dist/{input-area-CS1-ceY4.js → input-area-DU2Yvp_t.js} +3 -3
- package/dist/{input-area-CS1-ceY4.js.map → input-area-DU2Yvp_t.js.map} +1 -1
- package/dist/{input-group-COo-wz5O.js → input-group-C365-qBq.js} +2 -2
- package/dist/{input-group-COo-wz5O.js.map → input-group-C365-qBq.js.map} +1 -1
- package/dist/{label-ChZ2Pp5p.js → label-zjtV7oXa.js} +2 -2
- package/dist/{label-ChZ2Pp5p.js.map → label-zjtV7oXa.js.map} +1 -1
- package/dist/{link-Mj2WM1AS.js → link-C8pUZ4Q-.js} +8 -8
- package/dist/{link-Mj2WM1AS.js.map → link-C8pUZ4Q-.js.map} +1 -1
- package/dist/{menubar-CbXWXQYR.js → menubar-D7WvAf6x.js} +6 -6
- package/dist/menubar-D7WvAf6x.js.map +1 -0
- package/dist/{meter-Bu5f3mAc.js → meter-jQGKS1z4.js} +4 -4
- package/dist/{meter-Bu5f3mAc.js.map → meter-jQGKS1z4.js.map} +1 -1
- package/dist/{pagination-Cf-yRO-n.js → pagination-BN80iKY6.js} +2 -2
- package/dist/{pagination-Cf-yRO-n.js.map → pagination-BN80iKY6.js.map} +1 -1
- package/dist/{popover-D7yeRosi.js → popover-syU1104E.js} +4 -4
- package/dist/{popover-D7yeRosi.js.map → popover-syU1104E.js.map} +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/{radio-CKn09bGo.js → radio-CWMtSx65.js} +8 -8
- package/dist/{radio-CKn09bGo.js.map → radio-CWMtSx65.js.map} +1 -1
- package/dist/{schemas-H10xB2M_.js → schemas-DbIwo0ET.js} +251 -239
- package/dist/{schemas-H10xB2M_.js.map → schemas-DbIwo0ET.js.map} +1 -1
- package/dist/{select-DvpgiOau.js → select-G6JqBVkg.js} +37 -37
- package/dist/{select-DvpgiOau.js.map → select-G6JqBVkg.js.map} +1 -1
- package/dist/{sensitive-input-BuYT6U6C.js → sensitive-input-DNFpycoy.js} +4 -4
- package/dist/{sensitive-input-BuYT6U6C.js.map → sensitive-input-DNFpycoy.js.map} +1 -1
- package/dist/src/command-line/utils/transformer.d.ts +8 -4
- package/dist/src/command-line/utils/transformer.d.ts.map +1 -1
- package/dist/src/components/clipboard-text/clipboard-text.d.ts +23 -0
- package/dist/src/components/clipboard-text/clipboard-text.d.ts.map +1 -1
- package/dist/src/components/date-picker/date-picker.d.ts +65 -0
- package/dist/src/components/date-picker/date-picker.d.ts.map +1 -0
- package/dist/src/components/date-picker/index.d.ts +4 -0
- package/dist/src/components/date-picker/index.d.ts.map +1 -0
- package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +0 -4
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/kumo.css +541 -0
- package/dist/{switch-Tu34uFoa.js → switch-CmsZ4z-g.js} +9 -9
- package/dist/{switch-Tu34uFoa.js.map → switch-CmsZ4z-g.js.map} +1 -1
- package/dist/{table-DtUrZ2Rj.js → table-Dc0AGcLV.js} +2 -2
- package/dist/{table-DtUrZ2Rj.js.map → table-Dc0AGcLV.js.map} +1 -1
- package/dist/{tabs-B7THfqHW.js → tabs-BpD1iUiz.js} +2 -2
- package/dist/{tabs-B7THfqHW.js.map → tabs-BpD1iUiz.js.map} +1 -1
- package/dist/{toast-Du4y8qng.js → toast-BrR0pjLE.js} +8 -8
- package/dist/{toast-Du4y8qng.js.map → toast-BrR0pjLE.js.map} +1 -1
- package/dist/{tooltip-BxV1H6AV.js → tooltip-daVJYtXY.js} +2 -2
- package/dist/{tooltip-BxV1H6AV.js.map → tooltip-daVJYtXY.js.map} +1 -1
- package/dist/{vendor-base-ui-CQ6wEonS.js → vendor-base-ui-9w7J6BvW.js} +7246 -7245
- package/dist/{vendor-base-ui-CQ6wEonS.js.map → vendor-base-ui-9w7J6BvW.js.map} +1 -1
- package/package.json +6 -1
- package/scripts/component-registry/discovery.ts +1 -7
- package/dist/clipboard-text-B32_yb2r.js +0 -108
- package/dist/clipboard-text-B32_yb2r.js.map +0 -1
- package/dist/combobox-C9koouxM.js.map +0 -1
- package/dist/dialog-CpCeOqSZ.js.map +0 -1
- package/dist/dropdown-DFeFcKfn.js.map +0 -1
- package/dist/menubar-CbXWXQYR.js.map +0 -1
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/blocks/delete-resource/delete-resource.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from \"react\";\nimport {\n Dialog,\n DialogRoot,\n DialogTitle,\n DialogClose,\n} from \"../../components/dialog\";\nimport { Input } from \"../../components/input\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\nimport {\n CheckIcon,\n CopyIcon,\n WarningCircleIcon,\n XIcon,\n} from \"@phosphor-icons/react\";\nimport { Banner } from \"../../components/banner\";\n\nexport const KUMO_DELETE_RESOURCE_VARIANTS = {\n size: {\n sm: {\n classes: \"\",\n description: \"Small dialog for simple delete confirmations\",\n },\n base: {\n classes: \"\",\n description: \"Default delete confirmation dialog size\",\n },\n },\n} as const;\n\nexport const KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoDeleteResourceSize =\n keyof typeof KUMO_DELETE_RESOURCE_VARIANTS.size;\n\nexport interface KumoDeleteResourceVariantsProps {\n size?: KumoDeleteResourceSize;\n}\n\nexport interface DeleteResourceProps extends KumoDeleteResourceVariantsProps {\n /** Whether the dialog is open */\n open: boolean;\n /** Callback when open state changes */\n onOpenChange: (open: boolean) => void;\n /** The type of resource being deleted (e.g., \"Zone\", \"Worker\", \"KV Namespace\") */\n resourceType: string;\n /** The name of the specific resource being deleted */\n resourceName: string;\n /** Callback when delete is confirmed */\n onDelete: () => void | Promise<void>;\n /** Whether the delete action is in progress */\n isDeleting?: boolean;\n /** Whether the confirmation input should be case-sensitive (default: true) */\n caseSensitive?: boolean;\n /** Custom delete button text (defaults to \"Delete {resourceType}\") */\n deleteButtonText?: string;\n /** Additional className for the dialog */\n className?: string;\n /** Error message to display if the delete action fails */\n errorMessage?: string;\n}\n\nexport function DeleteResource({\n open,\n onOpenChange,\n resourceType,\n resourceName,\n onDelete,\n isDeleting = false,\n caseSensitive = true,\n deleteButtonText,\n size = KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS.size,\n errorMessage,\n className,\n}: DeleteResourceProps) {\n const [confirmationInput, setConfirmationInput] = useState(\"\");\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n if (!open) {\n setConfirmationInput(\"\");\n setCopied(false);\n }\n }, [open]);\n\n const normalizeForComparison = useCallback(\n (str: string) => (caseSensitive ? str : str.toLowerCase()),\n [caseSensitive],\n );\n\n const isConfirmed =\n normalizeForComparison(confirmationInput) ===\n normalizeForComparison(resourceName);\n\n const handleDelete = useCallback(async () => {\n if (!isConfirmed || isDeleting) return;\n await onDelete();\n }, [isConfirmed, isDeleting, onDelete]);\n\n const handleCopy = useCallback(async () => {\n await navigator.clipboard.writeText(resourceName);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n }, [resourceName]);\n\n return (\n <DialogRoot open={open} onOpenChange={onOpenChange}>\n <Dialog size={size} className={cn(\"p-0\", className)}>\n <div className=\"flex items-center justify-between border-b border-kumo-line px-6 py-4\">\n <DialogTitle className=\"text-lg font-semibold\">\n Delete {resourceName}\n </DialogTitle>\n <DialogClose\n render={(props) => (\n <Button\n {...props}\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n aria-label=\"Close\"\n disabled={isDeleting}\n >\n <XIcon size={18} />\n </Button>\n )}\n />\n </div>\n\n <div className=\"flex flex-col p-6 gap-4\">\n <div className=\"flex flex-col gap-2\">\n {errorMessage && (\n <Banner icon={<WarningCircleIcon />} variant=\"error\">\n {errorMessage}\n </Banner>\n )}\n <p className=\"text-base text-kumo-subtle max-w-prose text-pretty\">\n This action cannot be undone. This will permanently delete the{\" \"}\n <span className=\"font-medium text-kumo-default\">\n {resourceName}\n </span>{\" \"}\n {resourceType.toLowerCase()}.\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div className=\"flex items-center gap-1.5 text-base\">\n <span>\n Type{\" \"}\n <button\n className=\"font-mono text-sm inline font-semibold bg-kumo-tint hover:bg-kumo-fill rounded-md px-2 py-1 group hover:cursor-pointer\"\n onClick={handleCopy}\n aria-label={`Copy ${resourceName} to clipboard`}\n >\n {resourceName}\n\n {copied ? (\n <CheckIcon\n size={12}\n weight=\"bold\"\n className=\"inline ml-1.5\"\n />\n ) : (\n <CopyIcon\n size={12}\n weight=\"bold\"\n className=\"inline text-kumo-subtle group-hover:text-kumo-default ml-1.5\"\n />\n )}\n </button>{\" \"}\n to confirm:\n </span>\n </div>\n <Input\n placeholder={resourceName}\n value={confirmationInput}\n onChange={(e) => setConfirmationInput(e.target.value)}\n disabled={isDeleting}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck={false}\n aria-label={`Type ${resourceName} to confirm deletion`}\n className=\"w-full\"\n />\n </div>\n </div>\n\n <div className=\"flex justify-end gap-3 border-t border-kumo-line px-6 py-4\">\n <DialogClose\n render={(props) => (\n <Button {...props} variant=\"secondary\" disabled={isDeleting}>\n Cancel\n </Button>\n )}\n />\n <Button\n variant=\"destructive\"\n onClick={handleDelete}\n disabled={!isConfirmed || isDeleting}\n loading={isDeleting}\n >\n {deleteButtonText || `Delete ${resourceType}`}\n </Button>\n </div>\n </Dialog>\n </DialogRoot>\n );\n}\n\nDeleteResource.displayName = \"DeleteResource\";\n"],"names":["KUMO_DELETE_RESOURCE_VARIANTS","KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS","DeleteResource","open","onOpenChange","resourceType","resourceName","onDelete","isDeleting","caseSensitive","deleteButtonText","size","errorMessage","className","confirmationInput","setConfirmationInput","useState","copied","setCopied","useEffect","normalizeForComparison","useCallback","str","isConfirmed","handleDelete","handleCopy","jsx","DialogRoot","jsxs","Dialog","cn","DialogTitle","DialogClose","props","Button","XIcon","Banner","WarningCircleIcon","CheckIcon","CopyIcon","Input","e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/blocks/delete-resource/delete-resource.tsx"],"sourcesContent":["import { useState, useCallback, useEffect } from \"react\";\nimport {\n Dialog,\n DialogRoot,\n DialogTitle,\n DialogClose,\n} from \"../../components/dialog\";\nimport { Input } from \"../../components/input\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\nimport {\n CheckIcon,\n CopyIcon,\n WarningCircleIcon,\n XIcon,\n} from \"@phosphor-icons/react\";\nimport { Banner } from \"../../components/banner\";\n\nexport const KUMO_DELETE_RESOURCE_VARIANTS = {\n size: {\n sm: {\n classes: \"\",\n description: \"Small dialog for simple delete confirmations\",\n },\n base: {\n classes: \"\",\n description: \"Default delete confirmation dialog size\",\n },\n },\n} as const;\n\nexport const KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoDeleteResourceSize =\n keyof typeof KUMO_DELETE_RESOURCE_VARIANTS.size;\n\nexport interface KumoDeleteResourceVariantsProps {\n size?: KumoDeleteResourceSize;\n}\n\nexport interface DeleteResourceProps extends KumoDeleteResourceVariantsProps {\n /** Whether the dialog is open */\n open: boolean;\n /** Callback when open state changes */\n onOpenChange: (open: boolean) => void;\n /** The type of resource being deleted (e.g., \"Zone\", \"Worker\", \"KV Namespace\") */\n resourceType: string;\n /** The name of the specific resource being deleted */\n resourceName: string;\n /** Callback when delete is confirmed */\n onDelete: () => void | Promise<void>;\n /** Whether the delete action is in progress */\n isDeleting?: boolean;\n /** Whether the confirmation input should be case-sensitive (default: true) */\n caseSensitive?: boolean;\n /** Custom delete button text (defaults to \"Delete {resourceType}\") */\n deleteButtonText?: string;\n /** Additional className for the dialog */\n className?: string;\n /** Error message to display if the delete action fails */\n errorMessage?: string;\n}\n\nexport function DeleteResource({\n open,\n onOpenChange,\n resourceType,\n resourceName,\n onDelete,\n isDeleting = false,\n caseSensitive = true,\n deleteButtonText,\n size = KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS.size,\n errorMessage,\n className,\n}: DeleteResourceProps) {\n const [confirmationInput, setConfirmationInput] = useState(\"\");\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n if (!open) {\n setConfirmationInput(\"\");\n setCopied(false);\n }\n }, [open]);\n\n const normalizeForComparison = useCallback(\n (str: string) => (caseSensitive ? str : str.toLowerCase()),\n [caseSensitive],\n );\n\n const isConfirmed =\n normalizeForComparison(confirmationInput) ===\n normalizeForComparison(resourceName);\n\n const handleDelete = useCallback(async () => {\n if (!isConfirmed || isDeleting) return;\n await onDelete();\n }, [isConfirmed, isDeleting, onDelete]);\n\n const handleCopy = useCallback(async () => {\n await navigator.clipboard.writeText(resourceName);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n }, [resourceName]);\n\n return (\n <DialogRoot open={open} onOpenChange={onOpenChange}>\n <Dialog size={size} className={cn(\"p-0\", className)}>\n <div className=\"flex items-center justify-between border-b border-kumo-line px-6 py-4\">\n <DialogTitle className=\"text-lg font-semibold\">\n Delete {resourceName}\n </DialogTitle>\n <DialogClose\n render={(props) => (\n <Button\n {...props}\n variant=\"ghost\"\n shape=\"square\"\n size=\"sm\"\n aria-label=\"Close\"\n disabled={isDeleting}\n >\n <XIcon size={18} />\n </Button>\n )}\n />\n </div>\n\n <div className=\"flex flex-col p-6 gap-4\">\n <div className=\"flex flex-col gap-2\">\n {errorMessage && (\n <Banner icon={<WarningCircleIcon />} variant=\"error\">\n {errorMessage}\n </Banner>\n )}\n <p className=\"text-base text-kumo-subtle max-w-prose text-pretty\">\n This action cannot be undone. This will permanently delete the{\" \"}\n <span className=\"font-medium text-kumo-default\">\n {resourceName}\n </span>{\" \"}\n {resourceType.toLowerCase()}.\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <div className=\"flex items-center gap-1.5 text-base\">\n <span>\n Type{\" \"}\n <button\n className=\"font-mono text-sm inline font-semibold bg-kumo-tint hover:bg-kumo-fill rounded-md px-2 py-1 group hover:cursor-pointer\"\n onClick={handleCopy}\n aria-label={`Copy ${resourceName} to clipboard`}\n >\n {resourceName}\n\n {copied ? (\n <CheckIcon\n size={12}\n weight=\"bold\"\n className=\"inline ml-1.5\"\n />\n ) : (\n <CopyIcon\n size={12}\n weight=\"bold\"\n className=\"inline text-kumo-subtle group-hover:text-kumo-default ml-1.5\"\n />\n )}\n </button>{\" \"}\n to confirm:\n </span>\n </div>\n <Input\n placeholder={resourceName}\n value={confirmationInput}\n onChange={(e) => setConfirmationInput(e.target.value)}\n disabled={isDeleting}\n autoComplete=\"off\"\n autoCorrect=\"off\"\n autoCapitalize=\"off\"\n spellCheck={false}\n aria-label={`Type ${resourceName} to confirm deletion`}\n className=\"w-full\"\n />\n </div>\n </div>\n\n <div className=\"flex justify-end gap-3 border-t border-kumo-line px-6 py-4\">\n <DialogClose\n render={(props) => (\n <Button {...props} variant=\"secondary\" disabled={isDeleting}>\n Cancel\n </Button>\n )}\n />\n <Button\n variant=\"destructive\"\n onClick={handleDelete}\n disabled={!isConfirmed || isDeleting}\n loading={isDeleting}\n >\n {deleteButtonText || `Delete ${resourceType}`}\n </Button>\n </div>\n </Dialog>\n </DialogRoot>\n );\n}\n\nDeleteResource.displayName = \"DeleteResource\";\n"],"names":["KUMO_DELETE_RESOURCE_VARIANTS","KUMO_DELETE_RESOURCE_DEFAULT_VARIANTS","DeleteResource","open","onOpenChange","resourceType","resourceName","onDelete","isDeleting","caseSensitive","deleteButtonText","size","errorMessage","className","confirmationInput","setConfirmationInput","useState","copied","setCopied","useEffect","normalizeForComparison","useCallback","str","isConfirmed","handleDelete","handleCopy","jsx","DialogRoot","jsxs","Dialog","cn","DialogTitle","DialogClose","props","Button","XIcon","Banner","WarningCircleIcon","CheckIcon","CopyIcon","Input","e"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx as l } from "react/jsx-runtime";
|
|
3
3
|
import { c as p } from "./cn-Bhsu1vx2.js";
|
|
4
4
|
import { forwardRef as I } from "react";
|
|
5
|
-
import { F as k } from "./field-
|
|
6
|
-
import { I as v } from "./vendor-base-ui-
|
|
5
|
+
import { F as k } from "./field-DCq04TgZ.js";
|
|
6
|
+
import { I as v } from "./vendor-base-ui-9w7J6BvW.js";
|
|
7
7
|
const u = {
|
|
8
8
|
size: {
|
|
9
9
|
xs: {
|
|
@@ -106,4 +106,4 @@ export {
|
|
|
106
106
|
u as K,
|
|
107
107
|
N as i
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=input-
|
|
109
|
+
//# sourceMappingURL=input-CCR8NGG7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-
|
|
1
|
+
{"version":3,"file":"input-CCR8NGG7.js","sources":["../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles\n \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
-
import { i as C } from "./input-
|
|
3
|
+
import { i as C } from "./input-CCR8NGG7.js";
|
|
4
4
|
import { c as b } from "./cn-Bhsu1vx2.js";
|
|
5
5
|
import * as I from "react";
|
|
6
6
|
import { useCallback as y } from "react";
|
|
7
|
-
import { F as N } from "./field-
|
|
7
|
+
import { F as N } from "./field-DCq04TgZ.js";
|
|
8
8
|
const c = I.forwardRef(
|
|
9
9
|
(l, m) => {
|
|
10
10
|
const {
|
|
@@ -56,4 +56,4 @@ export {
|
|
|
56
56
|
c as I,
|
|
57
57
|
j as T
|
|
58
58
|
};
|
|
59
|
-
//# sourceMappingURL=input-area-
|
|
59
|
+
//# sourceMappingURL=input-area-DU2Yvp_t.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-area-
|
|
1
|
+
{"version":3,"file":"input-area-DU2Yvp_t.js","sources":["../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n (props, ref) => {\n const {\n className,\n onValueChange,\n size = \"base\",\n variant = \"default\",\n onChange,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n onValueChange?.(event.target.value);\n },\n [onChange, onValueChange],\n );\n\n const textarea = (\n <textarea\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always come with size, but it does not apply for textarea\n className,\n )}\n onChange={handleChange}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <KumoField\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {textarea}\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return textarea;\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n onValueChange?: (value: string) => void;\n variant?: \"default\" | \"error\";\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n // Then other custom props\n children?: React.ReactNode;\n className?: string;\n /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the textarea */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textarea","jsx","cn","inputVariants","KumoField","Textarea"],"mappings":";;;;;;;AAMO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACTC,EAAc,EAAE,MAAAf,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,UACrD;AAAA;AAAA,UACAH;AAAA,QAAA;AAAA,QAEF,UAAUW;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAKR,WAAIJ,IAEA,gBAAAU;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAM;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAlB,EAAU,cAAc;AAGjB,MAAMuB,IAAWvB;"}
|
|
@@ -3,7 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
|
|
|
3
3
|
import * as d from "react";
|
|
4
4
|
import { useContext as l } from "react";
|
|
5
5
|
import { c as s } from "./cn-Bhsu1vx2.js";
|
|
6
|
-
import { i as m, I as p } from "./input-
|
|
6
|
+
import { i as m, I as p } from "./input-CCR8NGG7.js";
|
|
7
7
|
import { B as x } from "./button-Bh96oxRL.js";
|
|
8
8
|
const I = {
|
|
9
9
|
focusMode: "container"
|
|
@@ -108,4 +108,4 @@ const U = Object.assign(v, {
|
|
|
108
108
|
export {
|
|
109
109
|
U as I
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=input-group-
|
|
111
|
+
//# sourceMappingURL=input-group-C365-qBq.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group-
|
|
1
|
+
{"version":3,"file":"input-group-C365-qBq.js","sources":["../src/components/input/input-group.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n Input as InputExternal,\n type InputProps,\n inputVariants,\n} from \"./input\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n focusMode: {\n container: {\n classes: \"\",\n description: \"Focus indicator on container (default behavior)\",\n },\n individual: {\n classes: \"\",\n description: \"Focus indicators on individual elements\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n focusMode: \"container\",\n} as const;\n\nexport type KumoInputGroupFocusMode =\n keyof typeof KUMO_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface KumoInputGroupVariantsProps {\n focusMode?: KumoInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends KumoInputGroupVariantsProps {\n className?: string;\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | undefined;\n}\n\ninterface InputGroupContextValue extends InputGroupRootProps {\n inputId: string;\n descriptionId: string;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(\n null,\n);\n\nfunction Root({\n size,\n children,\n className,\n focusMode = KUMO_INPUT_GROUP_DEFAULT_VARIANTS.focusMode,\n}: PropsWithChildren<InputGroupRootProps>) {\n const inputId = React.useId();\n const descriptionId = React.useId();\n const contextValue = React.useMemo(\n () => ({ size, inputId, descriptionId, focusMode }),\n [size, inputId, descriptionId, focusMode],\n );\n\n const isIndividualFocus = focusMode === \"individual\";\n\n return (\n <InputGroupContext.Provider value={contextValue}>\n <div\n className={cn(\n inputVariants({ size, parentFocusIndicator: !isIndividualFocus }),\n \"flex w-full gap-0 border-0 px-0\",\n isIndividualFocus\n ? \"overflow-visible\"\n : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring\",\n className,\n )}\n >\n {children}\n </div>\n </InputGroupContext.Provider>\n );\n}\n\nfunction Label({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <label\n htmlFor={context?.inputId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </label>\n );\n}\n\nfunction Input(props: InputProps) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <InputExternal\n id={context?.inputId}\n aria-describedby={context?.descriptionId}\n size={context?.size}\n {...props}\n className={cn(\n \"flex h-full items-center rounded-none border-0 bg-kumo-base font-sans\",\n \"grow px-2\",\n isIndividualFocus\n ? \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\"\n : \"focus:border-kumo-fill\",\n props.className,\n )}\n />\n );\n}\n\nfunction Description({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <span\n id={context?.descriptionId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </span>\n );\n}\n\nfunction Button({\n children,\n className,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <ButtonExternal\n {...props}\n size={context?.size}\n className={cn(\n \"h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n isIndividualFocus &&\n \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\",\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n}\n\nexport const InputGroup = Object.assign(Root, {\n Label,\n Input,\n Button,\n Description,\n});\n"],"names":["KUMO_INPUT_GROUP_DEFAULT_VARIANTS","InputGroupContext","React","Root","size","children","className","focusMode","inputId","descriptionId","contextValue","isIndividualFocus","jsx","cn","inputVariants","Label","context","useContext","Input","props","InputExternal","Description","Button","ButtonExternal","InputGroup"],"mappings":";;;;;;;AAuBO,MAAMA,IAAoC;AAAA,EAC/C,WAAW;AACb,GAmBMC,IAAoBC,EAAM;AAAA,EAC9B;AACF;AAEA,SAASC,EAAK;AAAA,EACZ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAYP,EAAkC;AAChD,GAA2C;AACzC,QAAMQ,IAAUN,EAAM,MAAA,GAChBO,IAAgBP,EAAM,MAAA,GACtBQ,IAAeR,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAE,GAAM,SAAAI,GAAS,eAAAC,GAAe,WAAAF,EAAA;AAAA,IACvC,CAACH,GAAMI,GAASC,GAAeF,CAAS;AAAA,EAAA,GAGpCI,IAAoBJ,MAAc;AAExC,SACE,gBAAAK,EAACX,EAAkB,UAAlB,EAA2B,OAAOS,GACjC,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAc,EAAE,MAAAV,GAAM,sBAAsB,CAACO,GAAmB;AAAA,QAChE;AAAA,QACAA,IACI,qBACA;AAAA,QACJL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASU,EAAM,EAAE,UAAAV,KAAmC;AAClD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASI,GAAS;AAAA,MAClB,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASa,EAAMC,GAAmB;AAChC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,IAAIJ,GAAS;AAAA,MACb,oBAAkBA,GAAS;AAAA,MAC3B,MAAMA,GAAS;AAAA,MACd,GAAGG;AAAA,MACJ,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACAF,IACI,6GACA;AAAA,QACJQ,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAASE,EAAY,EAAE,UAAAhB,KAAmC;AACxD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAII,GAAS;AAAA,MACb,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASiB,EAAO;AAAA,EACd,UAAAjB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGa;AACL,GAAmC;AACjC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACW;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,MAAMH,GAAS;AAAA,MACf,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,QACFL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMmB,IAAa,OAAO,OAAOrB,GAAM;AAAA,EAC5C,OAAAY;AAAA,EACA,OAAAG;AAAA,EACA,QAAAI;AAAA,EACA,aAAAD;AACF,CAAC;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as e, jsxs as m, Fragment as f } from "react/jsx-runtime";
|
|
3
3
|
import { Info as u } from "@phosphor-icons/react";
|
|
4
4
|
import { c as n } from "./cn-Bhsu1vx2.js";
|
|
5
|
-
import { T as p } from "./tooltip-
|
|
5
|
+
import { T as p } from "./tooltip-daVJYtXY.js";
|
|
6
6
|
const N = {
|
|
7
7
|
// Label currently has no variant options but structure is ready for future additions
|
|
8
8
|
}, _ = {};
|
|
@@ -55,4 +55,4 @@ export {
|
|
|
55
55
|
_ as b,
|
|
56
56
|
b as l
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=label-
|
|
58
|
+
//# sourceMappingURL=label-zjtV7oXa.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-
|
|
1
|
+
{"version":3,"file":"label-zjtV7oXa.js","sources":["../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n return cn(\n // Base styles - when used standalone, apply text styling\n // When used inside Field, the parent FieldBase.Label provides these styles\n \"text-base font-medium text-kumo-default\",\n );\n}\n\nexport function labelContentVariants() {\n return cn(\n // Content wrapper styles - always applied\n \"inline-flex items-center gap-1\",\n );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n /** The label content — can be a string or any React node. */\n children: ReactNode;\n /** When `true`, shows gray \"(optional)\" text after the label. */\n showOptional?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n tooltip?: ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The id of the form element this label is associated with */\n htmlFor?: string;\n /**\n * When true, only renders the inline content (indicators, tooltip) without\n * the outer label element with font styling. Useful when composed inside another\n * label element that already provides the text styling.\n * @default false\n */\n asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n * <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n children,\n showOptional = false,\n tooltip,\n className,\n htmlFor,\n asContent = false,\n}: LabelProps) {\n const content = (\n <>\n {children}\n {showOptional && (\n <span className=\"font-normal text-kumo-strong\">(optional)</span>\n )}\n {tooltip && (\n <Tooltip content={tooltip}>\n <Info\n className=\"size-4 cursor-help text-kumo-strong\"\n aria-label=\"More information\"\n />\n </Tooltip>\n )}\n </>\n );\n\n // When used as content inside another styled element, just render inline\n if (asContent) {\n return (\n <span className={cn(labelContentVariants(), className)}>{content}</span>\n );\n }\n\n // When used standalone, render as <label> for accessibility\n return (\n <label\n htmlFor={htmlFor}\n className={cn(labelVariants(), labelContentVariants(), className)}\n >\n {content}\n </label>\n );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Info"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAChB,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAW;AAAA,MAAA;AAAA,IAAA,EACb,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIN,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
|
|
@@ -3,7 +3,7 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as u } from "react";
|
|
4
4
|
import { c as t } from "./cn-Bhsu1vx2.js";
|
|
5
5
|
import { u as f } from "./link-provider-DPBGo-0n.js";
|
|
6
|
-
import {
|
|
6
|
+
import { bg as k, bh as L } from "./vendor-base-ui-9w7J6BvW.js";
|
|
7
7
|
const r = (n) => /* @__PURE__ */ d(
|
|
8
8
|
"svg",
|
|
9
9
|
{
|
|
@@ -24,7 +24,7 @@ const r = (n) => /* @__PURE__ */ d(
|
|
|
24
24
|
}
|
|
25
25
|
);
|
|
26
26
|
r.displayName = "Link.ExternalIcon";
|
|
27
|
-
const
|
|
27
|
+
const h = {
|
|
28
28
|
variant: {
|
|
29
29
|
inline: {
|
|
30
30
|
classes: "text-primary underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors",
|
|
@@ -39,13 +39,13 @@ const x = {
|
|
|
39
39
|
description: "Link without underline decoration"
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
},
|
|
42
|
+
}, x = {
|
|
43
43
|
variant: "inline"
|
|
44
44
|
};
|
|
45
45
|
function C({
|
|
46
|
-
variant: n =
|
|
46
|
+
variant: n = x.variant
|
|
47
47
|
} = {}) {
|
|
48
|
-
return t(
|
|
48
|
+
return t(h.variant[n].classes);
|
|
49
49
|
}
|
|
50
50
|
const i = u(function({ className: o, variant: s = "inline", render: a, ...l }, c) {
|
|
51
51
|
const m = f(), p = {
|
|
@@ -65,9 +65,9 @@ const V = Object.assign(i, {
|
|
|
65
65
|
ExternalIcon: r
|
|
66
66
|
});
|
|
67
67
|
export {
|
|
68
|
-
|
|
68
|
+
h as K,
|
|
69
69
|
V as L,
|
|
70
|
-
|
|
70
|
+
x as a,
|
|
71
71
|
C as l
|
|
72
72
|
};
|
|
73
|
-
//# sourceMappingURL=link-
|
|
73
|
+
//# sourceMappingURL=link-C8pUZ4Q-.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-
|
|
1
|
+
{"version":3,"file":"link-C8pUZ4Q-.js","sources":["../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n useLinkComponent,\n type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"link-external-icon\"\n {...props}\n >\n <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n variant: {\n inline: {\n classes:\n \"text-primary underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Inline text link that flows with content\",\n },\n current: {\n classes:\n \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Link that inherits color from parent text\",\n },\n plain: {\n classes: \"text-primary hover:text-primary/70 transition-colors\",\n description: \"Link without underline decoration\",\n },\n },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n /**\n * Visual style of the link.\n * - `\"inline\"` — Inline text link that flows with content\n * - `\"current\"` — Link that inherits color from parent text\n * - `\"plain\"` — Link without underline decoration\n * @default \"inline\"\n */\n variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n LinkComponentProps &\n KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n * Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n { className, variant = \"inline\", render, ...props },\n ref,\n) {\n const LinkComponent = useLinkComponent();\n\n const defaultProps: useRender.ElementProps<\"a\"> = {\n className: cn(\n linkVariants({ variant }),\n \"group/link inline-flex items-center gap-[0.1875em]\",\n ),\n };\n\n const element = useRender({\n render: render ?? <LinkComponent />,\n ref,\n props: mergeProps<\"a\">(defaultProps, props, { className }),\n });\n\n return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as c } from "react/jsx-runtime";
|
|
3
|
-
import { T as
|
|
3
|
+
import { T as g } from "./tooltip-daVJYtXY.js";
|
|
4
4
|
import { c as h } from "./cn-Bhsu1vx2.js";
|
|
5
|
-
import { IconContext as
|
|
5
|
+
import { IconContext as w } from "@phosphor-icons/react";
|
|
6
6
|
import { useRef as p, useEffect as y } from "react";
|
|
7
7
|
const E = ({
|
|
8
8
|
menuRef: e,
|
|
@@ -45,17 +45,17 @@ const E = ({
|
|
|
45
45
|
isActive: n,
|
|
46
46
|
onClick: t,
|
|
47
47
|
tooltip: r
|
|
48
|
-
}) => /* @__PURE__ */ c(
|
|
48
|
+
}) => /* @__PURE__ */ c(g, { content: r, asChild: !0, children: /* @__PURE__ */ c(
|
|
49
49
|
"button",
|
|
50
50
|
{
|
|
51
51
|
className: h(
|
|
52
|
-
"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]",
|
|
52
|
+
"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]",
|
|
53
53
|
{
|
|
54
54
|
"z-20 bg-kumo-base shadow-xs transition-colors": n === o
|
|
55
55
|
}
|
|
56
56
|
),
|
|
57
57
|
onClick: t,
|
|
58
|
-
children: /* @__PURE__ */ c(
|
|
58
|
+
children: /* @__PURE__ */ c(w.Provider, { value: { size: 18 }, children: e })
|
|
59
59
|
}
|
|
60
60
|
) }), I = ({
|
|
61
61
|
className: e,
|
|
@@ -89,4 +89,4 @@ export {
|
|
|
89
89
|
I as M,
|
|
90
90
|
E as u
|
|
91
91
|
};
|
|
92
|
-
//# sourceMappingURL=menubar-
|
|
92
|
+
//# sourceMappingURL=menubar-D7WvAf6x.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menubar-D7WvAf6x.js","sources":["../src/components/menubar/use-menu-navigation.ts","../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n menuRef: React.RefObject<HTMLElement | null>;\n direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n menuRef,\n direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n const activeElementRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!menuRef.current) return;\n\n const focusableElements = Array.from(\n menuRef.current.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n ),\n ) as HTMLElement[];\n\n if (focusableElements.length === 0) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!activeElementRef.current) return;\n\n const currentIndex = focusableElements.indexOf(activeElementRef.current);\n let nextIndex = currentIndex;\n\n const isHorizontal = direction === \"horizontal\";\n const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n if (e.key === forwardKey) {\n e.preventDefault();\n nextIndex = (currentIndex + 1) % focusableElements.length;\n } else if (e.key === backwardKey) {\n e.preventDefault();\n nextIndex =\n (currentIndex - 1 + focusableElements.length) %\n focusableElements.length;\n } else {\n return;\n }\n\n const nextElement = focusableElements[nextIndex];\n activeElementRef.current = nextElement;\n nextElement.focus();\n };\n\n const addKeyListener = () =>\n document.addEventListener(\"keydown\", handleKeyDown);\n const removeKeyListener = () =>\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n const handleFocusIn = () => {\n activeElementRef.current = document.activeElement as HTMLElement;\n addKeyListener();\n };\n\n const handleFocusOut = () => {\n activeElementRef.current = null;\n removeKeyListener();\n };\n\n menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n return () => {\n menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n removeKeyListener();\n };\n }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n icon: React.ReactNode;\n /** Unique identifier for the option (used when `optionIds` is true) */\n id?: number | string;\n /** Currently active value from the parent MenuBar */\n isActive?: number | boolean | string | undefined;\n /** Callback when this option is clicked */\n onClick: () => void;\n /** Tooltip text shown on hover */\n tooltip: string;\n};\n\nconst MenuOption = ({\n icon,\n id,\n isActive,\n onClick,\n tooltip,\n}: MenuOptionProps) => {\n return (\n <Tooltip content={tooltip} asChild>\n <button\n className={cn(\n \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-10 focus:outline-none focus-visible:z-10 focus-visible:inset-ring-[0.5]\",\n {\n \"z-20 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n },\n )}\n onClick={onClick}\n >\n <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n {icon}\n </IconContext.Provider>\n </button>\n </Tooltip>\n );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n * isActive={activeIndex}\n * options={[\n * { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n * { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n * ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The currently active option value — matched against option index or `id`. */\n isActive: number | boolean | string | undefined;\n /** Array of menu option configurations. */\n options: MenuOptionProps[];\n /** When true, each option's `id` field is used for matching instead of its array index. */\n optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n * isActive={0}\n * options={[\n * { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n * { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n * ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n className,\n isActive,\n options,\n optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n const menuRef = useRef<HTMLElement | null>(null);\n\n useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n return (\n <nav\n className={cn(\n \"flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n className,\n )}\n ref={menuRef}\n >\n {options.map((option, index) => (\n <MenuOption\n key={index}\n {...option}\n isActive={isActive}\n id={optionIds ? option.id : index}\n />\n ))}\n </nav>\n );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as r, jsx as e, Fragment as d } from "react/jsx-runtime";
|
|
3
3
|
import { c as t } from "./cn-Bhsu1vx2.js";
|
|
4
|
-
import {
|
|
5
|
-
function
|
|
4
|
+
import { aK as c, aL as f, aM as x, aN as b, aO as h } from "./vendor-base-ui-9w7J6BvW.js";
|
|
5
|
+
function p({
|
|
6
6
|
value: l,
|
|
7
7
|
customValue: a,
|
|
8
8
|
label: s,
|
|
@@ -46,6 +46,6 @@ function N({
|
|
|
46
46
|
);
|
|
47
47
|
}
|
|
48
48
|
export {
|
|
49
|
-
|
|
49
|
+
p as M
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=meter-
|
|
51
|
+
//# sourceMappingURL=meter-jQGKS1z4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meter-
|
|
1
|
+
{"version":3,"file":"meter-jQGKS1z4.js","sources":["../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex w-full flex-col gap-2\",\n );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n customValue?: string;\n /** Label text displayed above the meter track. */\n label: string;\n /**\n * Whether to display the percentage value next to the label.\n * @default true\n */\n showValue?: boolean;\n /** Additional CSS classes for the track (background bar). */\n trackClassName?: string;\n /** Additional CSS classes for the indicator (filled bar). */\n indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n value,\n customValue,\n label,\n showValue = true,\n className,\n trackClassName,\n indicatorClassName,\n ...props\n}: MeterProps) {\n return (\n <BaseMeter.Root\n value={value}\n {...props}\n className={cn(\"flex w-full flex-col gap-2\", className)}\n >\n <div className=\"flex items-center justify-between gap-4\">\n <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n {label}\n </BaseMeter.Label>\n {customValue ? (\n <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n {customValue}\n </span>\n ) : (\n <>\n {showValue && (\n <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n )}\n </>\n )}\n </div>\n <BaseMeter.Track\n className={cn(\n \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n trackClassName,\n )}\n >\n <BaseMeter.Indicator\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n indicatorClassName,\n )}\n />\n </BaseMeter.Track>\n </BaseMeter.Root>\n );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as n } from "react/jsx-runtime";
|
|
3
3
|
import { useState as N, useEffect as x, useMemo as b } from "react";
|
|
4
|
-
import { I as s } from "./input-group-
|
|
4
|
+
import { I as s } from "./input-group-C365-qBq.js";
|
|
5
5
|
import { CaretDoubleLeftIcon as v, CaretLeftIcon as I, CaretRightIcon as M, CaretDoubleRightIcon as g } from "@phosphor-icons/react";
|
|
6
6
|
const w = {
|
|
7
7
|
controls: "full"
|
|
@@ -97,4 +97,4 @@ function z({
|
|
|
97
97
|
export {
|
|
98
98
|
z as P
|
|
99
99
|
};
|
|
100
|
-
//# sourceMappingURL=pagination-
|
|
100
|
+
//# sourceMappingURL=pagination-BN80iKY6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-
|
|
1
|
+
{"version":3,"file":"pagination-BN80iKY6.js","sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n/**\n * Pagination component props.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} controls=\"simple\" />\n * ```\n */\nexport interface PaginationProps extends KumoPaginationVariantsProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Method to provide custom pagination text */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => React.ReactNode;\n}\n\n/**\n * Page navigation controls with page count display.\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport function Pagination({\n page = 1,\n perPage,\n totalCount,\n setPage,\n text,\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: PaginationProps) {\n const [editingPage, setEditingPage] = useState<number>(1);\n\n // Value of the input as its being modified to display in the input, eventually syncs with `pagination.page`\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return `Showing ${pageShowingRange} of ${totalCount}`;\n }\n return null;\n };\n\n return (\n <div className=\"flex items-center justify-between gap-2\">\n <div className=\"grow text-sm text-kumo-strong\">{getPaginationText()}</div>\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n"],"names":["KUMO_PAGINATION_DEFAULT_VARIANTS","Pagination","page","perPage","totalCount","setPage","text","controls","editingPage","setEditingPage","useState","useEffect","pageShowingRange","useMemo","lower","upper","maxPage","jsxs","jsx","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","value","number","nextPage","CaretRightIcon","CaretDoubleRightIcon"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o, jsxs as i } from "react/jsx-runtime";
|
|
3
3
|
import { c as s } from "./cn-Bhsu1vx2.js";
|
|
4
|
-
import {
|
|
4
|
+
import { b4 as u, b5 as P, b6 as f, b7 as b, b8 as h, b9 as C, ba as x, bb as N, bc as y } from "./vendor-base-ui-9w7J6BvW.js";
|
|
5
5
|
const A = {
|
|
6
6
|
side: {
|
|
7
7
|
top: {
|
|
@@ -54,14 +54,14 @@ function l({
|
|
|
54
54
|
className: v
|
|
55
55
|
}) {
|
|
56
56
|
return /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(
|
|
57
|
-
|
|
57
|
+
b,
|
|
58
58
|
{
|
|
59
59
|
align: a,
|
|
60
60
|
alignOffset: g,
|
|
61
61
|
side: t,
|
|
62
62
|
sideOffset: r,
|
|
63
63
|
children: /* @__PURE__ */ i(
|
|
64
|
-
|
|
64
|
+
h,
|
|
65
65
|
{
|
|
66
66
|
className: s(
|
|
67
67
|
"flex origin-(--transform-origin) flex-col rounded-lg bg-kumo-base px-4 py-3 text-sm text-kumo-default",
|
|
@@ -175,4 +175,4 @@ export {
|
|
|
175
175
|
m as f,
|
|
176
176
|
L as g
|
|
177
177
|
};
|
|
178
|
-
//# sourceMappingURL=popover-
|
|
178
|
+
//# sourceMappingURL=popover-syU1104E.js.map
|