npm - @flanksource/clicky-ui - Versions diffs - 0.3.21 → 0.3.23 - Mend

@flanksource/clicky-ui 0.3.21 → 0.3.23

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.

Files changed (1627) hide show

package/dist/components/MdxEditorToolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean \| T \| undefined, defaultValue = true): boolean {\n return value === undefined ? defaultValue : value !== false;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] \| undefined {\n if (!diffMode) return undefined;\n if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n return [...diffMode.viewModes];\n }\n return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n const toolbarOptions: Array<ConditionalContentsOption \| FallbackOption> = [\n ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n ? [\n {\n when: (editor: EditorInFocus \| null) => editor?.editorType === \"codeblock\",\n contents: () => <ChangeCodeMirrorLanguage />,\n },\n ]\n : []),\n {\n fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n },\n ];\n return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const {\n BlockTypeSelect,\n BoldItalicUnderlineToggles,\n CodeToggle,\n CreateLink,\n DiffSourceToggleWrapper,\n InsertAdmonition,\n InsertCodeBlock,\n InsertFrontmatter,\n InsertImage,\n InsertTable,\n InsertThematicBreak,\n ListsToggle,\n Separator,\n UndoRedo,\n } = mdx;\n const controls = (\n <>\n <UndoRedo />\n <Separator />\n <BoldItalicUnderlineToggles />\n <CodeToggle />\n {isEnabled(options.headings) && (\n <>\n <Separator />\n <BlockTypeSelect />\n </>\n )}\n {isEnabled(options.lists) && <ListsToggle />}\n {isEnabled(options.links) && (\n <>\n <Separator />\n <CreateLink />\n </>\n )}\n {isEnabled(options.images) && <InsertImage />}\n {(isEnabled(options.tables) \|\| isEnabled(options.thematicBreak) \|\| isEnabled(options.codeBlocks)) && <Separator />}\n {isEnabled(options.tables) && <InsertTable />}\n {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n {(isEnabled(options.frontmatter) \|\| isEnabled(options.admonitions)) && <Separator />}\n {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n {isEnabled(options.admonitions) && <InsertAdmonition />}\n </>\n );\n\n const viewOptions = diffViewOptions(options.diffMode);\n if (!viewOptions) return controls;\n return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":"~~;AAKA~~,SAAS,UAA4B,OAAgC,eAAe,MAAe;AACjG,SAAO,UAAU,SAAY,eAAe,UAAU;AACxD;AAEA,SAAS,gBAAgB,UAAsE;;AAC7F,MAAI,CAAC,SAAU,QAAO;AACtB,MAAI,OAAO,aAAa,cAAY,cAAS,cAAT,mBAAoB,SAAQ;AAC9D,WAAO,CAAC,GAAG,SAAS,SAAS;AAAA,EAC/B;AACA,SAAO,CAAC,aAAa,UAAU,MAAM;AACvC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,qBAAqB,yBAAA,IAA6B;AAC1D,QAAM,iBAAoE;AAAA,IACxE,GAAI,UAAU,QAAQ,UAAU,KAAK,UAAU,QAAQ,UAAU,IAC7D;AAAA,MACE;AAAA,QACE,MAAM,CAAC,YAAiC,iCAAQ,gBAAe;AAAA,QAC/D,UAAU,MAAM,oBAAC,0BAAA,CAAA,CAAyB;AAAA,MAAA;AAAA,IAC5C,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,UAAU,MAAM,oBAAC,wBAAA,EAAuB,KAAU,QAAA,CAAkB;AAAA,IAAA;AAAA,EACtE;AAEF,SAAO,oBAAC,qBAAA,EAAoB,SAAS,eAAA,CAAgB;AACvD;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAGG;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,QAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAS;AAAA,wBACT,WAAA,EAAU;AAAA,wBACV,4BAAA,EAA2B;AAAA,wBAC3B,YAAA,EAAW;AAAA,IACX,UAAU,QAAQ,QAAQ,KACzB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,iBAAA,CAAA,CAAgB;AAAA,IAAA,GACnB;AAAA,IAED,UAAU,QAAQ,KAAK,yBAAM,aAAA,CAAA,CAAY;AAAA,IACzC,UAAU,QAAQ,KAAK,KACtB,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,WAAA,EAAU;AAAA,0BACV,YAAA,CAAA,CAAW;AAAA,IAAA,GACd;AAAA,IAED,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,KACzC,UAAU,QAAQ,MAAM,KAAK,UAAU,QAAQ,aAAa,KAAK,UAAU,QAAQ,UAAU,0BAAO,WAAA,CAAA,CAAU;AAAA,IAC/G,UAAU,QAAQ,MAAM,yBAAM,aAAA,CAAA,CAAY;AAAA,IAC1C,UAAU,QAAQ,aAAa,yBAAM,qBAAA,CAAA,CAAoB;AAAA,IACzD,UAAU,QAAQ,UAAU,yBAAM,iBAAA,CAAA,CAAgB;AAAA,KACjD,UAAU,QAAQ,WAAW,KAAK,UAAU,QAAQ,WAAW,~~MAAM~~,~~oBAAC~~,WAAA,EAAU;AAAA,~~IACjF~~,UAAU,QAAQ,WAAW,yBAAM,mBAAA,CAAA,CAAkB;AAAA,IACrD,UAAU,QAAQ,WAAW,yBAAM,kBAAA,CAAA,CAAiB;AAAA,EAAA,~~GACvD~~;AAGF,QAAM,cAAc,gBAAgB,QAAQ,QAAQ;AACpD,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,oBAAC,yBAAA,EAAwB,SAAS,aAAc,UAAA,UAAS;AAClE;"}
1	+ {"version":3,"file":"MdxEditorToolbar.js","sources":["../../src/components/MdxEditorToolbar.tsx"],"sourcesContent":["import type { ConditionalContentsOption, EditorInFocus, FallbackOption, ViewMode } from \"@mdxeditor/editor\";\nimport { calloutToolbarButton } from \"./mdx-editor-callout\";\nimport type { MdxEditorPluginOptions } from \"./mdx-editor-options\";\n\ntype MdxEditorModule = typeof import(\"@mdxeditor/editor\");\n\nfunction isEnabled<T extends object>(value: boolean \| T \| undefined, defaultValue = true): boolean {\n return value === undefined ? defaultValue : value !== false;\n}\n\nfunction optionObject<T extends object>(value: boolean \| T \| undefined): T \| undefined {\n return typeof value === \"object\" && value !== null ? value : undefined;\n}\n\nfunction diffViewOptions(diffMode: MdxEditorPluginOptions[\"diffMode\"]): ViewMode[] \| undefined {\n if (!diffMode) return undefined;\n if (typeof diffMode === \"object\" && diffMode.viewModes?.length) {\n return [...diffMode.viewModes];\n }\n return [\"rich-text\", \"source\", \"diff\"];\n}\n\nexport function MdxEditorToolbar({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const { ConditionalContents, ChangeCodeMirrorLanguage } = mdx;\n const toolbarOptions: Array<ConditionalContentsOption \| FallbackOption> = [\n ...(isEnabled(options.codeBlocks) && isEnabled(options.codeMirror)\n ? [\n {\n when: (editor: EditorInFocus \| null) => editor?.editorType === \"codeblock\",\n contents: () => <ChangeCodeMirrorLanguage />,\n },\n ]\n : []),\n {\n fallback: () => <DefaultToolbarContents mdx={mdx} options={options} />,\n },\n ];\n return <ConditionalContents options={toolbarOptions} />;\n}\n\nfunction DefaultToolbarContents({\n mdx,\n options,\n}: {\n mdx: MdxEditorModule;\n options: MdxEditorPluginOptions;\n}) {\n const {\n BlockTypeSelect,\n BoldItalicUnderlineToggles,\n CodeToggle,\n CreateLink,\n DiffSourceToggleWrapper,\n InsertAdmonition,\n InsertCodeBlock,\n InsertFrontmatter,\n InsertImage,\n InsertTable,\n InsertThematicBreak,\n ListsToggle,\n Separator,\n UndoRedo,\n } = mdx;\n const InsertCallout = calloutToolbarButton(mdx, optionObject(options.callouts) ?? {});\n const extra = typeof options.toolbar === \"object\" ? options.toolbar.extra : undefined;\n const controls = (\n <>\n <UndoRedo />\n <Separator />\n <BoldItalicUnderlineToggles />\n <CodeToggle />\n {isEnabled(options.headings) && (\n <>\n <Separator />\n <BlockTypeSelect />\n </>\n )}\n {isEnabled(options.lists) && <ListsToggle />}\n {isEnabled(options.links) && (\n <>\n <Separator />\n <CreateLink />\n </>\n )}\n {isEnabled(options.images) && <InsertImage />}\n {(isEnabled(options.tables) \|\| isEnabled(options.thematicBreak) \|\| isEnabled(options.codeBlocks)) && <Separator />}\n {isEnabled(options.tables) && <InsertTable />}\n {isEnabled(options.thematicBreak) && <InsertThematicBreak />}\n {isEnabled(options.codeBlocks) && <InsertCodeBlock />}\n {(isEnabled(options.frontmatter) \|\| isEnabled(options.admonitions) \|\| isEnabled(options.callouts, false)) && (\n <Separator />\n )}\n {isEnabled(options.frontmatter) && <InsertFrontmatter />}\n {isEnabled(options.admonitions) && <InsertAdmonition />}\n {isEnabled(options.callouts, false) && <InsertCallout />}\n {extra}\n </>\n );\n\n const viewOptions = diffViewOptions(options.diffMode);\n if (!viewOptions) return controls;\n return <DiffSourceToggleWrapper options={viewOptions}>{controls}</DiffSourceToggleWrapper>;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/MultiSelect.cjs CHANGED Viewed

@@ -65,7 +65,9 @@ function MultiSelect({
         className: utils.cn(
           "w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal",
           triggerClassName,
-          value.length === 0 && "text-muted-foreground"
+          // Empty means the trigger is showing its placeholder, so it reads at
+          // placeholder weight rather than at helper-text weight.
+          value.length === 0 && "text-placeholder"
         ),
         ...getReferenceProps(),
         children: [

package/dist/components/MultiSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n /** Stable option value written into the selected value array. /\n value: string;\n /* Visible option label in the menu and trigger summary. /\n label: ReactNode;\n /* Prevents selecting this option while still showing it in the menu. /\n disabled?: boolean;\n /* Optional browser tooltip for truncated or explanatory labels. /\n title?: string;\n};\n\nexport type MultiSelectProps = {\n /* Available options, rendered in the order provided. /\n options: MultiSelectOption[];\n /* Controlled selected option values. /\n value: string[];\n /* Called with the complete next value array after each toggle. /\n onChange: (next: string[]) => void;\n /* Trigger text when nothing is selected. Also labels the menu. /\n placeholder?: string;\n /* Accessible name for the trigger. Use when the field is labelled\n * elsewhere so the trigger doesn't have to borrow `placeholder` for its\n * name (which would force a synthesized placeholder). /\n ariaLabel?: string;\n /* Disables opening and changing selections. /\n disabled?: boolean;\n /* Classes applied to the root wrapper. /\n className?: string;\n /* Classes applied to the trigger button. /\n triggerClassName?: string;\n /* Classes applied to the popover menu. */\n menuClassName?: string;\n};\n\nexport function MultiSelect({\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n ariaLabel,\n disabled,\n className,\n triggerClassName,\n menuClassName,\n}: MultiSelectProps) {\n const [open, setOpen] = useState(false);\n\n // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n // scroll-container ancestors, matching Combobox/DropdownMenu.\n const floatingZ = useFloatingZIndex();\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n whileElementsMounted: autoUpdate,\n middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n });\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { escapeKey: false }),\n useRole(context, { role: \"menu\" }),\n ]);\n useEscapeLayer(open, () => {\n setOpen(false);\n if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n });\n\n const selected = useMemo(() => {\n const selectedOptions = options.filter((option) => value.includes(option.value));\n const labels = selectedOptions\n .map((option) => option.label)\n .filter((label): label is string => typeof label === \"string\");\n\n if (selectedOptions.length === 0) return placeholder;\n if (labels.length === 0) return `${selectedOptions.length} selected`;\n if (labels.length <= 2) return labels.join(\", \");\n return `${labels.length} selected`;\n }, [options, placeholder, value]);\n\n function toggleOption(nextValue: string) {\n if (value.includes(nextValue)) {\n onChange(value.filter((current) => current !== nextValue));\n return;\n }\n onChange([...value, nextValue]);\n }\n\n // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n // onto its neighbour.\n return (\n <div className={cn(\"inline-flex min-w-0\", className)}>\n <Button\n ref={refs.setReference as Ref<HTMLButtonElement>}\n type=\"button\"\n variant=\"outline\"\n disabled={disabled}\n aria-label={ariaLabel ?? `${placeholder} filter`}\n className={cn(\n \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n triggerClassName,\n value.length === 0 && \"text-muted-foreground\",\n )}\n {...getReferenceProps()}\n >\n <span className=\"truncate\">{selected}</span>\n <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n </Button>\n {open && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n role=\"menu\"\n aria-label={placeholder}\n style={{ ...floatingStyles, zIndex: floatingZ }}\n className={cn(\n \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n menuClassName,\n )}\n {...getFloatingProps()}\n >\n <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n <span>{placeholder}</span>\n <button\n type=\"button\"\n className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n onClick={() => onChange([])}\n disabled={value.length === 0}\n >\n Clear all\n </button>\n </div>\n <div className=\"max-h-64 overflow-auto\">\n {options.map((option) => {\n const checked = value.includes(option.value);\n return (\n <label\n key={option.value}\n className={cn(\n \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <input\n type=\"checkbox\"\n role=\"menuitemcheckbox\"\n className=\"size-4 rounded border border-input\"\n checked={checked}\n disabled={option.disabled}\n onChange={() => toggleOption(option.value)}\n />\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </label>\n );\n })}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
1	+ {"version":3,"file":"MultiSelect.cjs","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n /** Stable option value written into the selected value array. /\n value: string;\n /* Visible option label in the menu and trigger summary. /\n label: ReactNode;\n /* Prevents selecting this option while still showing it in the menu. /\n disabled?: boolean;\n /* Optional browser tooltip for truncated or explanatory labels. /\n title?: string;\n};\n\nexport type MultiSelectProps = {\n /* Available options, rendered in the order provided. /\n options: MultiSelectOption[];\n /* Controlled selected option values. /\n value: string[];\n /* Called with the complete next value array after each toggle. /\n onChange: (next: string[]) => void;\n /* Trigger text when nothing is selected. Also labels the menu. /\n placeholder?: string;\n /* Accessible name for the trigger. Use when the field is labelled\n * elsewhere so the trigger doesn't have to borrow `placeholder` for its\n * name (which would force a synthesized placeholder). /\n ariaLabel?: string;\n /* Disables opening and changing selections. /\n disabled?: boolean;\n /* Classes applied to the root wrapper. /\n className?: string;\n /* Classes applied to the trigger button. /\n triggerClassName?: string;\n /* Classes applied to the popover menu. */\n menuClassName?: string;\n};\n\nexport function MultiSelect({\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n ariaLabel,\n disabled,\n className,\n triggerClassName,\n menuClassName,\n}: MultiSelectProps) {\n const [open, setOpen] = useState(false);\n\n // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n // scroll-container ancestors, matching Combobox/DropdownMenu.\n const floatingZ = useFloatingZIndex();\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n whileElementsMounted: autoUpdate,\n middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n });\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { escapeKey: false }),\n useRole(context, { role: \"menu\" }),\n ]);\n useEscapeLayer(open, () => {\n setOpen(false);\n if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n });\n\n const selected = useMemo(() => {\n const selectedOptions = options.filter((option) => value.includes(option.value));\n const labels = selectedOptions\n .map((option) => option.label)\n .filter((label): label is string => typeof label === \"string\");\n\n if (selectedOptions.length === 0) return placeholder;\n if (labels.length === 0) return `${selectedOptions.length} selected`;\n if (labels.length <= 2) return labels.join(\", \");\n return `${labels.length} selected`;\n }, [options, placeholder, value]);\n\n function toggleOption(nextValue: string) {\n if (value.includes(nextValue)) {\n onChange(value.filter((current) => current !== nextValue));\n return;\n }\n onChange([...value, nextValue]);\n }\n\n // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n // onto its neighbour.\n return (\n <div className={cn(\"inline-flex min-w-0\", className)}>\n <Button\n ref={refs.setReference as Ref<HTMLButtonElement>}\n type=\"button\"\n variant=\"outline\"\n disabled={disabled}\n aria-label={ariaLabel ?? `${placeholder} filter`}\n className={cn(\n \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n triggerClassName,\n // Empty means the trigger is showing its placeholder, so it reads at\n // placeholder weight rather than at helper-text weight.\n value.length === 0 && \"text-placeholder\",\n )}\n {...getReferenceProps()}\n >\n <span className=\"truncate\">{selected}</span>\n <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n </Button>\n {open && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n role=\"menu\"\n aria-label={placeholder}\n style={{ ...floatingStyles, zIndex: floatingZ }}\n className={cn(\n \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n menuClassName,\n )}\n {...getFloatingProps()}\n >\n <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n <span>{placeholder}</span>\n <button\n type=\"button\"\n className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n onClick={() => onChange([])}\n disabled={value.length === 0}\n >\n Clear all\n </button>\n </div>\n <div className=\"max-h-64 overflow-auto\">\n {options.map((option) => {\n const checked = value.includes(option.value);\n return (\n <label\n key={option.value}\n className={cn(\n \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <input\n type=\"checkbox\"\n role=\"menuitemcheckbox\"\n className=\"size-4 rounded border border-input\"\n checked={checked}\n disabled={option.disabled}\n onChange={() => toggleOption(option.value)}\n />\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </label>\n );\n })}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n}\n"],"names":["useState","useFloatingZIndex","useFloating","autoUpdate","offset","flip","shift","useInteractions","useClick","useDismiss","useRole","useEscapeLayer","useMemo","cn","jsxs","Button","jsx","Icon","UiChevronUp","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

package/dist/components/MultiSelect.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,~~2CAuHlB~~"}
1	+ {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAoBpE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,KAAK,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,yDAAyD;IACzD,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,mEAAmE;IACnE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;8DAE0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,gBAAgB,2CAyHlB"}

package/dist/components/MultiSelect.js CHANGED Viewed

@@ -63,7 +63,9 @@ function MultiSelect({
         className: cn(
           "w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal",
           triggerClassName,
-          value.length === 0 && "text-muted-foreground"
+          // Empty means the trigger is showing its placeholder, so it reads at
+          // placeholder weight rather than at helper-text weight.
+          value.length === 0 && "text-placeholder"
         ),
         ...getReferenceProps(),
         children: [

package/dist/components/MultiSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n /** Stable option value written into the selected value array. /\n value: string;\n /* Visible option label in the menu and trigger summary. /\n label: ReactNode;\n /* Prevents selecting this option while still showing it in the menu. /\n disabled?: boolean;\n /* Optional browser tooltip for truncated or explanatory labels. /\n title?: string;\n};\n\nexport type MultiSelectProps = {\n /* Available options, rendered in the order provided. /\n options: MultiSelectOption[];\n /* Controlled selected option values. /\n value: string[];\n /* Called with the complete next value array after each toggle. /\n onChange: (next: string[]) => void;\n /* Trigger text when nothing is selected. Also labels the menu. /\n placeholder?: string;\n /* Accessible name for the trigger. Use when the field is labelled\n * elsewhere so the trigger doesn't have to borrow `placeholder` for its\n * name (which would force a synthesized placeholder). /\n ariaLabel?: string;\n /* Disables opening and changing selections. /\n disabled?: boolean;\n /* Classes applied to the root wrapper. /\n className?: string;\n /* Classes applied to the trigger button. /\n triggerClassName?: string;\n /* Classes applied to the popover menu. */\n menuClassName?: string;\n};\n\nexport function MultiSelect({\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n ariaLabel,\n disabled,\n className,\n triggerClassName,\n menuClassName,\n}: MultiSelectProps) {\n const [open, setOpen] = useState(false);\n\n // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n // scroll-container ancestors, matching Combobox/DropdownMenu.\n const floatingZ = useFloatingZIndex();\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n whileElementsMounted: autoUpdate,\n middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n });\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { escapeKey: false }),\n useRole(context, { role: \"menu\" }),\n ]);\n useEscapeLayer(open, () => {\n setOpen(false);\n if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n });\n\n const selected = useMemo(() => {\n const selectedOptions = options.filter((option) => value.includes(option.value));\n const labels = selectedOptions\n .map((option) => option.label)\n .filter((label): label is string => typeof label === \"string\");\n\n if (selectedOptions.length === 0) return placeholder;\n if (labels.length === 0) return `${selectedOptions.length} selected`;\n if (labels.length <= 2) return labels.join(\", \");\n return `${labels.length} selected`;\n }, [options, placeholder, value]);\n\n function toggleOption(nextValue: string) {\n if (value.includes(nextValue)) {\n onChange(value.filter((current) => current !== nextValue));\n return;\n }\n onChange([...value, nextValue]);\n }\n\n // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n // onto its neighbour.\n return (\n <div className={cn(\"inline-flex min-w-0\", className)}>\n <Button\n ref={refs.setReference as Ref<HTMLButtonElement>}\n type=\"button\"\n variant=\"outline\"\n disabled={disabled}\n aria-label={ariaLabel ?? `${placeholder} filter`}\n className={cn(\n \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n triggerClassName,\n value.length === 0 && \"text-~~muted-foreground~~\",\n )}\n {...getReferenceProps()}\n >\n <span className=\"truncate\">{selected}</span>\n <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n </Button>\n {open && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n role=\"menu\"\n aria-label={placeholder}\n style={{ ...floatingStyles, zIndex: floatingZ }}\n className={cn(\n \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n menuClassName,\n )}\n {...getFloatingProps()}\n >\n <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n <span>{placeholder}</span>\n <button\n type=\"button\"\n className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n onClick={() => onChange([])}\n disabled={value.length === 0}\n >\n Clear all\n </button>\n </div>\n <div className=\"max-h-64 overflow-auto\">\n {options.map((option) => {\n const checked = value.includes(option.value);\n return (\n <label\n key={option.value}\n className={cn(\n \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <input\n type=\"checkbox\"\n role=\"menuitemcheckbox\"\n className=\"size-4 rounded border border-input\"\n checked={checked}\n disabled={option.disabled}\n onChange={() => toggleOption(option.value)}\n />\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </label>\n );\n })}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;AAsDO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAItC,QAAM,YAAY,kBAAA;AAClB,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAAY;AAAA,IACpD;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,EAAE,SAAS,EAAA,CAAG,GAAG,MAAM,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,EAAA,CACpE;AACD,QAAM,EAAE,mBAAmB,iBAAA,IAAqB,gBAAgB;AAAA,IAC9D,SAAS,OAAO;AAAA,IAChB,WAAW,SAAS,EAAE,WAAW,OAAO;AAAA,IACxC,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAAA,EAAA,CAClC;AACD,iBAAe,MAAM,MAAM;AACzB,YAAQ,KAAK;AACb,QAAI,KAAK,aAAa,mBAAmB,YAAa,MAAK,aAAa,QAAQ,MAAA;AAAA,EAClF,CAAC;AAED,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,kBAAkB,QAAQ,OAAO,CAAC,WAAW,MAAM,SAAS,OAAO,KAAK,CAAC;AAC/E,UAAM,SAAS,gBACZ,IAAI,CAAC,WAAW,OAAO,KAAK,EAC5B,OAAO,CAAC,UAA2B,OAAO,UAAU,QAAQ;AAE/D,QAAI,gBAAgB,WAAW,EAAG,QAAO;AACzC,QAAI,OAAO,WAAW,EAAG,QAAO,GAAG,gBAAgB,MAAM;AACzD,QAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,WAAO,GAAG,OAAO,MAAM;AAAA,EACzB,GAAG,CAAC,SAAS,aAAa,KAAK,CAAC;AAEhC,WAAS,aAAa,WAAmB;AACvC,QAAI,MAAM,SAAS,SAAS,GAAG;AAC7B,eAAS,MAAM,OAAO,CAAC,YAAY,YAAY,SAAS,CAAC;AACzD;AAAA,IACF;AACA,aAAS,CAAC,GAAG,OAAO,SAAS,CAAC;AAAA,EAChC;AAKA,8BACG,OAAA,EAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR;AAAA,QACA,cAAY,aAAa,GAAG,WAAW;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,~~UACA~~,MAAM,WAAW,KAAK;AAAA,QAAA;AAAA,QAEvB,GAAG,kBAAA;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,UAAS;AAAA,8BACpC,MAAA,EAAK,MAAM,OAAO,cAAc,eAAe,WAAU,iCAAA,CAAiC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE5F,QACC,oBAAC,gBAAA,EACC,8BAAC,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,OAAO,EAAE,GAAG,gBAAgB,QAAQ,UAAA;AAAA,QACpC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG,iBAAA;AAAA,QAER,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,gIACb,UAAA;AAAA,YAAA,oBAAC,UAAM,UAAA,YAAA,CAAY;AAAA,YACnB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM,SAAS,EAAE;AAAA,gBAC1B,UAAU,MAAM,WAAW;AAAA,gBAC5B,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,GACF;AAAA,8BACC,OAAA,EAAI,WAAU,0BACZ,UAAA,QAAQ,IAAI,CAAC,WAAW;AACvB,kBAAM,UAAU,MAAM,SAAS,OAAO,KAAK;AAC3C,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAW;AAAA,kBACT;AAAA,kBACA,OAAO,YAAY;AAAA,gBAAA;AAAA,gBAGrB,UAAA;AAAA,kBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV;AAAA,sBACA,UAAU,OAAO;AAAA,sBACjB,UAAU,MAAM,aAAa,OAAO,KAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAE3C,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAO,MAAA,CAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAd5C,OAAO;AAAA,YAAA;AAAA,UAiBlB,CAAC,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
1	+ {"version":3,"file":"MultiSelect.js","sources":["../../src/components/MultiSelect.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode, type Ref } from \"react\";\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"../overlay/modalStack\";\n\nexport type MultiSelectOption = {\n /** Stable option value written into the selected value array. /\n value: string;\n /* Visible option label in the menu and trigger summary. /\n label: ReactNode;\n /* Prevents selecting this option while still showing it in the menu. /\n disabled?: boolean;\n /* Optional browser tooltip for truncated or explanatory labels. /\n title?: string;\n};\n\nexport type MultiSelectProps = {\n /* Available options, rendered in the order provided. /\n options: MultiSelectOption[];\n /* Controlled selected option values. /\n value: string[];\n /* Called with the complete next value array after each toggle. /\n onChange: (next: string[]) => void;\n /* Trigger text when nothing is selected. Also labels the menu. /\n placeholder?: string;\n /* Accessible name for the trigger. Use when the field is labelled\n * elsewhere so the trigger doesn't have to borrow `placeholder` for its\n * name (which would force a synthesized placeholder). /\n ariaLabel?: string;\n /* Disables opening and changing selections. /\n disabled?: boolean;\n /* Classes applied to the root wrapper. /\n className?: string;\n /* Classes applied to the trigger button. /\n triggerClassName?: string;\n /* Classes applied to the popover menu. */\n menuClassName?: string;\n};\n\nexport function MultiSelect({\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n ariaLabel,\n disabled,\n className,\n triggerClassName,\n menuClassName,\n}: MultiSelectProps) {\n const [open, setOpen] = useState(false);\n\n // Portaled (floating-ui) so the menu escapes `overflow` clipping from\n // scroll-container ancestors, matching Combobox/DropdownMenu.\n const floatingZ = useFloatingZIndex();\n const { refs, floatingStyles, context } = useFloating({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n whileElementsMounted: autoUpdate,\n middleware: [offset(6), flip({ padding: 8 }), shift({ padding: 8 })],\n });\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, { escapeKey: false }),\n useRole(context, { role: \"menu\" }),\n ]);\n useEscapeLayer(open, () => {\n setOpen(false);\n if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n });\n\n const selected = useMemo(() => {\n const selectedOptions = options.filter((option) => value.includes(option.value));\n const labels = selectedOptions\n .map((option) => option.label)\n .filter((label): label is string => typeof label === \"string\");\n\n if (selectedOptions.length === 0) return placeholder;\n if (labels.length === 0) return `${selectedOptions.length} selected`;\n if (labels.length <= 2) return labels.join(\", \");\n return `${labels.length} selected`;\n }, [options, placeholder, value]);\n\n function toggleOption(nextValue: string) {\n if (value.includes(nextValue)) {\n onChange(value.filter((current) => current !== nextValue));\n return;\n }\n onChange([...value, nextValue]);\n }\n\n // `min-w-0` here, and a shrinkable trigger below, let the summary ellipsize\n // inside a width-capped flex parent (a FilterBar chip) rather than overflow\n // onto its neighbour.\n return (\n <div className={cn(\"inline-flex min-w-0\", className)}>\n <Button\n ref={refs.setReference as Ref<HTMLButtonElement>}\n type=\"button\"\n variant=\"outline\"\n disabled={disabled}\n aria-label={ariaLabel ?? `${placeholder} filter`}\n className={cn(\n \"w-fit max-w-[15rem] min-w-0 justify-between gap-3 text-left font-normal\",\n triggerClassName,\n // Empty means the trigger is showing its placeholder, so it reads at\n // placeholder weight rather than at helper-text weight.\n value.length === 0 && \"text-placeholder\",\n )}\n {...getReferenceProps()}\n >\n <span className=\"truncate\">{selected}</span>\n <Icon icon={open ? UiChevronUp : UiChevronDown} className=\"shrink-0 text-muted-foreground\" />\n </Button>\n {open && (\n <FloatingPortal>\n <FloatingFocusManager context={context} modal={false}>\n <div\n ref={refs.setFloating}\n role=\"menu\"\n aria-label={placeholder}\n style={{ ...floatingStyles, zIndex: floatingZ }}\n className={cn(\n \"min-w-[14rem] max-w-[20rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n menuClassName,\n )}\n {...getFloatingProps()}\n >\n <div className=\"mb-1 flex items-center justify-between gap-2 px-2 py-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\">\n <span>{placeholder}</span>\n <button\n type=\"button\"\n className=\"text-[10px] text-primary disabled:text-muted-foreground\"\n onClick={() => onChange([])}\n disabled={value.length === 0}\n >\n Clear all\n </button>\n </div>\n <div className=\"max-h-64 overflow-auto\">\n {options.map((option) => {\n const checked = value.includes(option.value);\n return (\n <label\n key={option.value}\n className={cn(\n \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent\",\n option.disabled && \"cursor-not-allowed opacity-50\",\n )}\n >\n <input\n type=\"checkbox\"\n role=\"menuitemcheckbox\"\n className=\"size-4 rounded border border-input\"\n checked={checked}\n disabled={option.disabled}\n onChange={() => toggleOption(option.value)}\n />\n <span className=\"min-w-0 truncate\">{option.label}</span>\n </label>\n );\n })}\n </div>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/NamespacePicker.cjs CHANGED Viewed

@@ -40,6 +40,7 @@ function NamespacePicker({
       options,
       value,
       onChange,
+      ariaLabel: "Namespace",
       allowCustomValue: true,
       loading,
       invalid,

package/dist/components/NamespacePicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NamespacePicker.cjs","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n /** Controlled selected namespace (or \"\" when cleared). /\n value: string;\n onChange: (value: string) => void;\n /* Async getter the component calls once to load namespace names. /\n loadNamespaces: () => Promise<string[]>;\n /\n When true, a non-empty value absent from the loaded set (once loading\n * settles) is flagged invalid. The value is still shown; freeform entry is\n * marked, not rejected.\n */\n strict?: boolean;\n placeholder?: string;\n className?: string;\n};\n\nexport function NamespacePicker({\n value,\n onChange,\n loadNamespaces,\n strict = false,\n placeholder = \"Select namespace…\",\n className,\n}: NamespacePickerProps) {\n const [namespaces, setNamespaces] = useState<string[]>([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n setLoading(true);\n loadNamespaces()\n .then((res) => {\n if (!cancelled) setNamespaces(res);\n })\n .finally(() => {\n if (!cancelled) setLoading(false);\n });\n return () => {\n cancelled = true;\n };\n }, [loadNamespaces]);\n\n const options = useMemo<ComboboxOption[]>(() => {\n const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n // Pin a current value not present in the loaded set so the selection stays\n // visible (e.g. a namespace the user lacks list permission for).\n if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n return opts;\n }, [namespaces, value]);\n\n const invalid = useMemo(\n () => strict && !!value && !loading && !namespaces.includes(value),\n [strict, value, loading, namespaces],\n );\n\n return (\n <Combobox\n options={options}\n value={value}\n onChange={onChange}\n allowCustomValue\n loading={loading}\n invalid={invalid}\n placeholder={placeholder}\n {...(className ? { className } : {})}\n />\n );\n}\n"],"names":["useState","useEffect","useMemo","jsx","Combobox"],"mappings":";;;;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAUC,MAAAA,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAUA,MAAAA;AAAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;;"}
1	+ {"version":3,"file":"NamespacePicker.cjs","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n /** Controlled selected namespace (or \"\" when cleared). /\n value: string;\n onChange: (value: string) => void;\n /* Async getter the component calls once to load namespace names. /\n loadNamespaces: () => Promise<string[]>;\n /\n When true, a non-empty value absent from the loaded set (once loading\n * settles) is flagged invalid. The value is still shown; freeform entry is\n * marked, not rejected.\n */\n strict?: boolean;\n placeholder?: string;\n className?: string;\n};\n\nexport function NamespacePicker({\n value,\n onChange,\n loadNamespaces,\n strict = false,\n placeholder = \"Select namespace…\",\n className,\n}: NamespacePickerProps) {\n const [namespaces, setNamespaces] = useState<string[]>([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n setLoading(true);\n loadNamespaces()\n .then((res) => {\n if (!cancelled) setNamespaces(res);\n })\n .finally(() => {\n if (!cancelled) setLoading(false);\n });\n return () => {\n cancelled = true;\n };\n }, [loadNamespaces]);\n\n const options = useMemo<ComboboxOption[]>(() => {\n const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n // Pin a current value not present in the loaded set so the selection stays\n // visible (e.g. a namespace the user lacks list permission for).\n if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n return opts;\n }, [namespaces, value]);\n\n const invalid = useMemo(\n () => strict && !!value && !loading && !namespaces.includes(value),\n [strict, value, loading, namespaces],\n );\n\n return (\n <Combobox\n options={options}\n value={value}\n onChange={onChange}\n ariaLabel=\"Namespace\"\n allowCustomValue\n loading={loading}\n invalid={invalid}\n placeholder={placeholder}\n {...(className ? { className } : {})}\n />\n );\n}\n"],"names":["useState","useEffect","useMemo","jsx","Combobox"],"mappings":";;;;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAUC,MAAAA,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAUA,MAAAA;AAAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;;"}

package/dist/components/NamespacePicker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NamespacePicker.d.ts","sourceRoot":"","sources":["../../src/components/NamespacePicker.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAc,EACd,WAAiC,EACjC,SAAS,GACV,EAAE,oBAAoB,~~2CA4CtB~~"}
1	+ {"version":3,"file":"NamespacePicker.d.ts","sourceRoot":"","sources":["../../src/components/NamespacePicker.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,oBAAoB,GAAG;IACjC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,MAAc,EACd,WAAiC,EACjC,SAAS,GACV,EAAE,oBAAoB,2CA6CtB"}

package/dist/components/NamespacePicker.js CHANGED Viewed

@@ -38,6 +38,7 @@ function NamespacePicker({
       options,
       value,
       onChange,
+      ariaLabel: "Namespace",
       allowCustomValue: true,
       loading,
       invalid,

package/dist/components/NamespacePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NamespacePicker.js","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n /** Controlled selected namespace (or \"\" when cleared). /\n value: string;\n onChange: (value: string) => void;\n /* Async getter the component calls once to load namespace names. /\n loadNamespaces: () => Promise<string[]>;\n /\n When true, a non-empty value absent from the loaded set (once loading\n * settles) is flagged invalid. The value is still shown; freeform entry is\n * marked, not rejected.\n */\n strict?: boolean;\n placeholder?: string;\n className?: string;\n};\n\nexport function NamespacePicker({\n value,\n onChange,\n loadNamespaces,\n strict = false,\n placeholder = \"Select namespace…\",\n className,\n}: NamespacePickerProps) {\n const [namespaces, setNamespaces] = useState<string[]>([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n setLoading(true);\n loadNamespaces()\n .then((res) => {\n if (!cancelled) setNamespaces(res);\n })\n .finally(() => {\n if (!cancelled) setLoading(false);\n });\n return () => {\n cancelled = true;\n };\n }, [loadNamespaces]);\n\n const options = useMemo<ComboboxOption[]>(() => {\n const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n // Pin a current value not present in the loaded set so the selection stays\n // visible (e.g. a namespace the user lacks list permission for).\n if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n return opts;\n }, [namespaces, value]);\n\n const invalid = useMemo(\n () => strict && !!value && !loading && !namespaces.includes(value),\n [strict, value, loading, namespaces],\n );\n\n return (\n <Combobox\n options={options}\n value={value}\n onChange={onChange}\n allowCustomValue\n loading={loading}\n invalid={invalid}\n placeholder={placeholder}\n {...(className ? { className } : {})}\n />\n );\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAU,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAU;AAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;"}
1	+ {"version":3,"file":"NamespacePicker.js","sources":["../../src/components/NamespacePicker.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\n\n// NamespacePicker selects a Kubernetes namespace. It is presentational: it\n// fetches nothing — the consumer supplies an async `loadNamespaces` getter (e.g.\n// backed by `/api/v1/namespaces`). The selected namespace is the value other\n// form widgets (secret/workload pickers) read to scope their own lookups.\n\nexport type NamespacePickerProps = {\n /** Controlled selected namespace (or \"\" when cleared). /\n value: string;\n onChange: (value: string) => void;\n /* Async getter the component calls once to load namespace names. /\n loadNamespaces: () => Promise<string[]>;\n /\n When true, a non-empty value absent from the loaded set (once loading\n * settles) is flagged invalid. The value is still shown; freeform entry is\n * marked, not rejected.\n */\n strict?: boolean;\n placeholder?: string;\n className?: string;\n};\n\nexport function NamespacePicker({\n value,\n onChange,\n loadNamespaces,\n strict = false,\n placeholder = \"Select namespace…\",\n className,\n}: NamespacePickerProps) {\n const [namespaces, setNamespaces] = useState<string[]>([]);\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n setLoading(true);\n loadNamespaces()\n .then((res) => {\n if (!cancelled) setNamespaces(res);\n })\n .finally(() => {\n if (!cancelled) setLoading(false);\n });\n return () => {\n cancelled = true;\n };\n }, [loadNamespaces]);\n\n const options = useMemo<ComboboxOption[]>(() => {\n const opts = namespaces.map((ns) => ({ value: ns, label: ns }));\n // Pin a current value not present in the loaded set so the selection stays\n // visible (e.g. a namespace the user lacks list permission for).\n if (value && !namespaces.includes(value)) return [{ value, label: value }, ...opts];\n return opts;\n }, [namespaces, value]);\n\n const invalid = useMemo(\n () => strict && !!value && !loading && !namespaces.includes(value),\n [strict, value, loading, namespaces],\n );\n\n return (\n <Combobox\n options={options}\n value={value}\n onChange={onChange}\n ariaLabel=\"Namespace\"\n allowCustomValue\n loading={loading}\n invalid={invalid}\n placeholder={placeholder}\n {...(className ? { className } : {})}\n />\n );\n}\n"],"names":[],"mappings":";;;AAwBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd;AACF,GAAyB;AACvB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAmB,CAAA,CAAE;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,mBAAA,EACG,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,UAAW,eAAc,GAAG;AAAA,IACnC,CAAC,EACA,QAAQ,MAAM;AACb,UAAI,CAAC,UAAW,YAAW,KAAK;AAAA,IAClC,CAAC;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,UAAU,QAA0B,MAAM;AAC9C,UAAM,OAAO,WAAW,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,OAAO,GAAA,EAAK;AAG9D,QAAI,SAAS,CAAC,WAAW,SAAS,KAAK,EAAG,QAAO,CAAC,EAAE,OAAO,OAAO,MAAA,GAAS,GAAG,IAAI;AAClF,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,KAAK,CAAC;AAEtB,QAAM,UAAU;AAAA,IACd,MAAM,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,WAAW,SAAS,KAAK;AAAA,IACjE,CAAC,QAAQ,OAAO,SAAS,UAAU;AAAA,EAAA;AAGrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC;AAAA,EAAA;AAGxC;"}

package/dist/components/SplitButton.cjs CHANGED Viewed

@@ -17,6 +17,7 @@ function SplitButton({
   size = "default",
   loading = false,
   disabled = false,
+  primaryDisabled = false,
   align = "right",
   title,
   className,
@@ -30,7 +31,7 @@ function SplitButton({
         variant,
         size,
         loading,
-        disabled,
+        disabled: disabled || primaryDisabled,
         onClick,
         className,
         children: [
@@ -47,7 +48,7 @@ function SplitButton({
         variant,
         size,
         loading,
-        disabled,
+        disabled: disabled || primaryDisabled,
         onClick,
         className: "rounded-r-none",
         children: [

package/dist/components/SplitButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.cjs","sources":["../../src/components/SplitButton.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\n\nexport type SplitButtonProps = {\n /** Content of the primary action button. /\n label: ReactNode;\n /* Primary action handler. /\n onClick: () => void;\n /* Secondary actions listed in the dropdown menu. /\n items: DropdownMenuItem[];\n /* Icon shown before the primary label. /\n icon?: string \| StaticIconComponent;\n /* Variant forwarded to both halves. /\n variant?: ButtonProps[\"variant\"];\n /* Size forwarded to both halves. /\n size?: ButtonProps[\"size\"];\n /* Show a spinner and disable the primary half while pending. /\n loading?: boolean;\n /* Disable both halves. /\n disabled?: boolean;\n /* Horizontal alignment of the menu relative to the trigger. /\n align?: \"left\" \| \"right\";\n /* Browser tooltip / accessible label for the chevron trigger. /\n title?: string;\n /* Classes applied to the wrapper. /\n className?: string;\n /* Classes applied to the floating menu. */\n menuClassName?: string;\n};\n\nexport function SplitButton({\n label,\n onClick,\n items,\n icon,\n variant = \"default\",\n size = \"default\",\n loading = false,\n disabled = false,\n align = \"right\",\n title,\n className,\n menuClassName,\n}: SplitButtonProps) {\n const [open, setOpen] = useState(false);\n\n if (items.length === 0) {\n return (\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled}\n onClick={onClick}\n className={className}\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n );\n }\n\n return (\n <div className={cn(\"inline-flex items-stretch\", className)}>\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled}\n onClick={onClick}\n className=\"rounded-r-none\"\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n <DropdownMenu\n items={items}\n align={align}\n className=\"items-stretch\"\n {...(menuClassName ? { menuClassName } : {})}\n onOpenChange={setOpen}\n trigger={\n <Button\n variant={variant}\n size={size === \"default\" ? \"icon\" : size}\n disabled={disabled}\n title={title}\n aria-label={title ?? \"Open menu\"}\n className={cn(\n \"h-auto self-stretch rounded-l-none border-l border-l-current/25 px-2\",\n size !== \"icon\" && \"w-8\",\n )}\n >\n <Icon icon={open ? UiChevronUp : UiChevronDown} />\n </Button>\n }\n />\n </div>\n );\n}\n"],"names":["useState","jsxs","Button","jsx","Icon","cn","DropdownMenu","UiChevronUp","UiChevronDown"],"mappings":";;;;;;;;;;~~AAkCO~~,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AAEtC,MAAI,MAAM,WAAW,GAAG;AACtB,WACEC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,~~QACA~~;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,UAAA,QAAQC,2BAAAA,IAACC,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAAJ,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,~~QACA~~;AAAA,QACA,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQC,2BAAAA,IAACC,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHD,2BAAAA;AAAAA,MAACG,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,QACzC,cAAc;AAAA,QACd,SACEH,2BAAAA;AAAAA,UAACD,OAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM,SAAS,YAAY,SAAS;AAAA,YACpC;AAAA,YACA;AAAA,YACA,cAAY,SAAS;AAAA,YACrB,WAAWG,MAAAA;AAAAA,cACT;AAAA,cACA,SAAS,UAAU;AAAA,YAAA;AAAA,YAGrB,UAAAF,2BAAAA,IAACC,WAAA,EAAK,MAAM,OAAOG,YAAAA,cAAcC,4BAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAClD;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;;"}
1	+ {"version":3,"file":"SplitButton.cjs","sources":["../../src/components/SplitButton.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\n\nexport type SplitButtonProps = {\n /** Content of the primary action button. /\n label: ReactNode;\n /* Primary action handler. /\n onClick: () => void;\n /* Secondary actions listed in the dropdown menu. /\n items: DropdownMenuItem[];\n /* Icon shown before the primary label. /\n icon?: string \| StaticIconComponent;\n /* Variant forwarded to both halves. /\n variant?: ButtonProps[\"variant\"];\n /* Size forwarded to both halves. /\n size?: ButtonProps[\"size\"];\n /* Show a spinner and disable the primary half while pending. /\n loading?: boolean;\n /* Disable both halves. /\n disabled?: boolean;\n /\n Disable only the primary action, leaving the menu reachable — for when the\n * default action does not apply but the secondary ones still do.\n /\n primaryDisabled?: boolean;\n /* Horizontal alignment of the menu relative to the trigger. /\n align?: \"left\" \| \"right\";\n /* Browser tooltip / accessible label for the chevron trigger. /\n title?: string;\n /* Classes applied to the wrapper. /\n className?: string;\n /* Classes applied to the floating menu. */\n menuClassName?: string;\n};\n\nexport function SplitButton({\n label,\n onClick,\n items,\n icon,\n variant = \"default\",\n size = \"default\",\n loading = false,\n disabled = false,\n primaryDisabled = false,\n align = \"right\",\n title,\n className,\n menuClassName,\n}: SplitButtonProps) {\n const [open, setOpen] = useState(false);\n\n if (items.length === 0) {\n return (\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled \|\| primaryDisabled}\n onClick={onClick}\n className={className}\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n );\n }\n\n return (\n <div className={cn(\"inline-flex items-stretch\", className)}>\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled \|\| primaryDisabled}\n onClick={onClick}\n className=\"rounded-r-none\"\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n <DropdownMenu\n items={items}\n align={align}\n className=\"items-stretch\"\n {...(menuClassName ? { menuClassName } : {})}\n onOpenChange={setOpen}\n trigger={\n <Button\n variant={variant}\n size={size === \"default\" ? \"icon\" : size}\n disabled={disabled}\n title={title}\n aria-label={title ?? \"Open menu\"}\n className={cn(\n \"h-auto self-stretch rounded-l-none border-l border-l-current/25 px-2\",\n size !== \"icon\" && \"w-8\",\n )}\n >\n <Icon icon={open ? UiChevronUp : UiChevronDown} />\n </Button>\n }\n />\n </div>\n );\n}\n"],"names":["useState","jsxs","Button","jsx","Icon","cn","DropdownMenu","UiChevronUp","UiChevronDown"],"mappings":";;;;;;;;;;AAuCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AAEtC,MAAI,MAAM,WAAW,GAAG;AACtB,WACEC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,UAAA,QAAQC,2BAAAA,IAACC,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,yCACG,OAAA,EAAI,WAAWC,MAAAA,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAAJ,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQC,2BAAAA,IAACC,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHD,2BAAAA;AAAAA,MAACG,aAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,QACzC,cAAc;AAAA,QACd,SACEH,2BAAAA;AAAAA,UAACD,OAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM,SAAS,YAAY,SAAS;AAAA,YACpC;AAAA,YACA;AAAA,YACA,cAAY,SAAS;AAAA,YACrB,WAAWG,MAAAA;AAAAA,cACT;AAAA,cACA,SAAS,UAAU;AAAA,YAAA;AAAA,YAGrB,UAAAF,2BAAAA,IAACC,WAAA,EAAK,MAAM,OAAOG,YAAAA,cAAcC,4BAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAClD;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;;"}

package/dist/components/SplitButton.d.ts CHANGED Viewed

@@ -19,6 +19,11 @@ export type SplitButtonProps = {
     loading?: boolean;
     /** Disable both halves. */
     disabled?: boolean;
+    /**
+     * Disable only the primary action, leaving the menu reachable — for when the
+     * default action does not apply but the secondary ones still do.
+     */
+    primaryDisabled?: boolean;
     /** Horizontal alignment of the menu relative to the trigger. */
     align?: "left" | "right";
     /** Browser tooltip / accessible label for the chevron trigger. */
@@ -28,5 +33,5 @@ export type SplitButtonProps = {
     /** Classes applied to the floating menu. */
     menuClassName?: string;
 };
-export declare function SplitButton({ label, onClick, items, icon, variant, size, loading, disabled, align, title, className, menuClassName, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitButton({ label, onClick, items, icon, variant, size, loading, disabled, primaryDisabled, align, title, className, menuClassName, }: SplitButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SplitButton.d.ts.map

package/dist/components/SplitButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/components/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,KAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,gBAAgB,2CAwDlB"}
1	+ {"version":3,"file":"SplitButton.d.ts","sourceRoot":"","sources":["../../src/components/SplitButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qDAAqD;IACrD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,qCAAqC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,eAAuB,EACvB,KAAe,EACf,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,gBAAgB,2CAwDlB"}

package/dist/components/SplitButton.js CHANGED Viewed

@@ -15,6 +15,7 @@ function SplitButton({
   size = "default",
   loading = false,
   disabled = false,
+  primaryDisabled = false,
   align = "right",
   title,
   className,
@@ -28,7 +29,7 @@ function SplitButton({
         variant,
         size,
         loading,
-        disabled,
+        disabled: disabled || primaryDisabled,
         onClick,
         className,
         children: [
@@ -45,7 +46,7 @@ function SplitButton({
         variant,
         size,
         loading,
-        disabled,
+        disabled: disabled || primaryDisabled,
         onClick,
         className: "rounded-r-none",
         children: [

package/dist/components/SplitButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton.js","sources":["../../src/components/SplitButton.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\n\nexport type SplitButtonProps = {\n /** Content of the primary action button. /\n label: ReactNode;\n /* Primary action handler. /\n onClick: () => void;\n /* Secondary actions listed in the dropdown menu. /\n items: DropdownMenuItem[];\n /* Icon shown before the primary label. /\n icon?: string \| StaticIconComponent;\n /* Variant forwarded to both halves. /\n variant?: ButtonProps[\"variant\"];\n /* Size forwarded to both halves. /\n size?: ButtonProps[\"size\"];\n /* Show a spinner and disable the primary half while pending. /\n loading?: boolean;\n /* Disable both halves. /\n disabled?: boolean;\n /* Horizontal alignment of the menu relative to the trigger. /\n align?: \"left\" \| \"right\";\n /* Browser tooltip / accessible label for the chevron trigger. /\n title?: string;\n /* Classes applied to the wrapper. /\n className?: string;\n /* Classes applied to the floating menu. */\n menuClassName?: string;\n};\n\nexport function SplitButton({\n label,\n onClick,\n items,\n icon,\n variant = \"default\",\n size = \"default\",\n loading = false,\n disabled = false,\n align = \"right\",\n title,\n className,\n menuClassName,\n}: SplitButtonProps) {\n const [open, setOpen] = useState(false);\n\n if (items.length === 0) {\n return (\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled}\n onClick={onClick}\n className={className}\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n );\n }\n\n return (\n <div className={cn(\"inline-flex items-stretch\", className)}>\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled}\n onClick={onClick}\n className=\"rounded-r-none\"\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n <DropdownMenu\n items={items}\n align={align}\n className=\"items-stretch\"\n {...(menuClassName ? { menuClassName } : {})}\n onOpenChange={setOpen}\n trigger={\n <Button\n variant={variant}\n size={size === \"default\" ? \"icon\" : size}\n disabled={disabled}\n title={title}\n aria-label={title ?? \"Open menu\"}\n className={cn(\n \"h-auto self-stretch rounded-l-none border-l border-l-current/25 px-2\",\n size !== \"icon\" && \"w-8\",\n )}\n >\n <Icon icon={open ? UiChevronUp : UiChevronDown} />\n </Button>\n }\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;~~AAkCO~~,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM,WAAW,GAAG;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,~~QACA~~;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,8BACG,OAAA,EAAI,WAAW,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,~~QACA~~;AAAA,QACA,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,QACzC,cAAc;AAAA,QACd,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM,SAAS,YAAY,SAAS;AAAA,YACpC;AAAA,YACA;AAAA,YACA,cAAY,SAAS;AAAA,YACrB,WAAW;AAAA,cACT;AAAA,cACA,SAAS,UAAU;AAAA,YAAA;AAAA,YAGrB,UAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,cAAc,cAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAClD;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}
1	+ {"version":3,"file":"SplitButton.js","sources":["../../src/components/SplitButton.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronUp } from \"../icons\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\n\nexport type SplitButtonProps = {\n /** Content of the primary action button. /\n label: ReactNode;\n /* Primary action handler. /\n onClick: () => void;\n /* Secondary actions listed in the dropdown menu. /\n items: DropdownMenuItem[];\n /* Icon shown before the primary label. /\n icon?: string \| StaticIconComponent;\n /* Variant forwarded to both halves. /\n variant?: ButtonProps[\"variant\"];\n /* Size forwarded to both halves. /\n size?: ButtonProps[\"size\"];\n /* Show a spinner and disable the primary half while pending. /\n loading?: boolean;\n /* Disable both halves. /\n disabled?: boolean;\n /\n Disable only the primary action, leaving the menu reachable — for when the\n * default action does not apply but the secondary ones still do.\n /\n primaryDisabled?: boolean;\n /* Horizontal alignment of the menu relative to the trigger. /\n align?: \"left\" \| \"right\";\n /* Browser tooltip / accessible label for the chevron trigger. /\n title?: string;\n /* Classes applied to the wrapper. /\n className?: string;\n /* Classes applied to the floating menu. */\n menuClassName?: string;\n};\n\nexport function SplitButton({\n label,\n onClick,\n items,\n icon,\n variant = \"default\",\n size = \"default\",\n loading = false,\n disabled = false,\n primaryDisabled = false,\n align = \"right\",\n title,\n className,\n menuClassName,\n}: SplitButtonProps) {\n const [open, setOpen] = useState(false);\n\n if (items.length === 0) {\n return (\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled \|\| primaryDisabled}\n onClick={onClick}\n className={className}\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n );\n }\n\n return (\n <div className={cn(\"inline-flex items-stretch\", className)}>\n <Button\n variant={variant}\n size={size}\n loading={loading}\n disabled={disabled \|\| primaryDisabled}\n onClick={onClick}\n className=\"rounded-r-none\"\n >\n {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n {label}\n </Button>\n <DropdownMenu\n items={items}\n align={align}\n className=\"items-stretch\"\n {...(menuClassName ? { menuClassName } : {})}\n onOpenChange={setOpen}\n trigger={\n <Button\n variant={variant}\n size={size === \"default\" ? \"icon\" : size}\n disabled={disabled}\n title={title}\n aria-label={title ?? \"Open menu\"}\n className={cn(\n \"h-auto self-stretch rounded-l-none border-l border-l-current/25 px-2\",\n size !== \"icon\" && \"w-8\",\n )}\n >\n <Icon icon={open ? UiChevronUp : UiChevronDown} />\n </Button>\n }\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAuCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM,WAAW,GAAG;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB;AAAA,QACA;AAAA,QAEC,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,8BACG,OAAA,EAAI,WAAW,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB;AAAA,QACA,WAAU;AAAA,QAET,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACT,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,QACzC,cAAc;AAAA,QACd,SACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,MAAM,SAAS,YAAY,SAAS;AAAA,YACpC;AAAA,YACA;AAAA,YACA,cAAY,SAAS;AAAA,YACrB,WAAW;AAAA,cACT;AAAA,cACA,SAAS,UAAU;AAAA,YAAA;AAAA,YAGrB,UAAA,oBAAC,MAAA,EAAK,MAAM,OAAO,cAAc,cAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAClD;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}

package/dist/components/WorkloadPicker.cjs CHANGED Viewed

@@ -4,25 +4,55 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Combobox = require("./Combobox.cjs");
+const NamespacePicker = require("./NamespacePicker.cjs");
 const workloadPickerUtils = require("./workload-picker-utils.cjs");
 function WorkloadPicker({
   value,
   onChange,
   loadWorkloads,
   namespace,
+  allowNamespaceSelection = false,
+  loadNamespaces,
+  onNamespaceChange,
   kinds = workloadPickerUtils.ALL_WORKLOAD_KINDS,
   strict = false,
   allowCustomValue = true,
+  collapseSingleOption = false,
+  disabled = false,
   placeholder = "Select workload / service…",
   className
 }) {
+  const initialNamespace = value ? workloadPickerUtils.parseWorkloadKey(value).namespace : void 0;
+  const [selectedNamespace, setSelectedNamespace] = react.useState(
+    initialNamespace ?? namespace ?? ""
+  );
   const [byKind, setByKind] = react.useState({});
   const [loading, setLoading] = react.useState(false);
+  const defaultNamespaceRef = react.useRef(namespace);
+  const effectiveNamespace = allowNamespaceSelection ? selectedNamespace || void 0 : namespace;
+  react.useEffect(() => {
+    if (!allowNamespaceSelection || !value) return;
+    const valueNamespace = workloadPickerUtils.parseWorkloadKey(value).namespace;
+    if (valueNamespace) setSelectedNamespace(valueNamespace);
+  }, [allowNamespaceSelection, value]);
+  react.useEffect(() => {
+    if (!allowNamespaceSelection || defaultNamespaceRef.current === namespace) {
+      return;
+    }
+    defaultNamespaceRef.current = namespace;
+    if (!value) setSelectedNamespace(namespace ?? "");
+  }, [allowNamespaceSelection, namespace, value]);
   const kindsKey = kinds.join(",");
   react.useEffect(() => {
+    if (allowNamespaceSelection && !effectiveNamespace) {
+      setByKind({});
+      setLoading(false);
+      return;
+    }
     let cancelled = false;
     setLoading(true);
-    loadWorkloads(kinds).then((res) => {
+    const request = effectiveNamespace ? loadWorkloads(kinds, effectiveNamespace) : loadWorkloads(kinds);
+    request.then((res) => {
       if (!cancelled) setByKind(res);
     }).finally(() => {
       if (!cancelled) setLoading(false);
@@ -30,41 +60,97 @@ function WorkloadPicker({
     return () => {
       cancelled = true;
     };
-  }, [loadWorkloads, kindsKey]);
+  }, [allowNamespaceSelection, effectiveNamespace, loadWorkloads, kindsKey]);
+  const workloadValue = value && workloadPickerUtils.parseWorkloadKey(value).name ? value : "";
   const options = react.useMemo(
-    () => workloadPickerUtils.buildWorkloadOptions(namespace, byKind, kinds, value),
-    [namespace, byKind, kinds, value]
+    () => workloadPickerUtils.buildWorkloadOptions(effectiveNamespace, byKind, kinds, workloadValue),
+    [effectiveNamespace, byKind, kinds, workloadValue]
   );
   const invalid = react.useMemo(() => {
-    if (!strict || !value || loading) return false;
-    const { keys, names } = workloadPickerUtils.loadedWorkloads(namespace, byKind, kinds);
-    return !keys.has(value) && !names.has(value);
-  }, [strict, value, loading, namespace, byKind, kinds]);
-  const selectedKind = workloadPickerUtils.kindForValue(kinds, value);
+    if (!strict || !workloadValue || loading) return false;
+    const { keys, names } = workloadPickerUtils.loadedWorkloads(effectiveNamespace, byKind, kinds);
+    return !keys.has(workloadValue) && !names.has(workloadValue);
+  }, [strict, workloadValue, loading, effectiveNamespace, byKind, kinds]);
+  const selectedKind = workloadPickerUtils.kindForValue(kinds, workloadValue);
   const leadMeta = workloadPickerUtils.WORKLOAD_META[selectedKind];
   const LeadIcon = leadMeta.Icon;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      LeadIcon,
-      {
-        className: "h-4 w-4 shrink-0 text-muted-foreground",
-        title: leadMeta.label,
-        "aria-label": leadMeta.label
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Combobox.Combobox,
-      {
-        options,
-        value,
-        onChange,
-        allowCustomValue,
-        loading,
-        invalid,
-        placeholder
-      }
-    ) })
-  ] });
+  const soleOption = collapseSingleOption && !loading && options.length === 1 && (!workloadValue || workloadValue === options[0].value) ? options[0] : void 0;
+  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex items-center gap-2",
+        allowNamespaceSelection ? "min-w-0 flex-1" : className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LeadIcon,
+          {
+            className: "h-4 w-4 shrink-0 text-muted-foreground",
+            title: leadMeta.label,
+            "aria-label": leadMeta.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: soleOption ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "block truncate text-sm text-foreground",
+            title: soleOption.label,
+            "aria-label": "Workload",
+            children: soleOption.label
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Combobox.Combobox,
+          {
+            options,
+            value: workloadValue,
+            onChange: (next) => onChange(
+              next || (allowNamespaceSelection ? workloadPickerUtils.namespaceKey(effectiveNamespace) : "")
+            ),
+            ariaLabel: "Workload",
+            allowCustomValue,
+            loading,
+            invalid,
+            disabled,
+            placeholder
+          }
+        ) })
+      ]
+    }
+  );
+  if (!allowNamespaceSelection) return control;
+  if (!loadNamespaces) {
+    throw new Error(
+      "WorkloadPicker namespace selection requires loadNamespaces"
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "flex w-full min-w-0 flex-nowrap items-center gap-density-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NamespacePicker.NamespacePicker,
+          {
+            className: "min-w-0 shrink grow-0 basis-28",
+            value: selectedNamespace,
+            onChange: (nextNamespace) => {
+              setSelectedNamespace(nextNamespace);
+              setByKind({});
+              onNamespaceChange == null ? void 0 : onNamespaceChange(nextNamespace || void 0);
+              onChange(workloadPickerUtils.namespaceKey(nextNamespace));
+            },
+            loadNamespaces,
+            strict: true
+          }
+        ),
+        control
+      ]
+    }
+  );
 }
 exports.WorkloadPicker = WorkloadPicker;
 //# sourceMappingURL=WorkloadPicker.cjs.map