npm - @cloudflare/kumo - Versions diffs - 2.3.0 → 2.4.0 - Mend

@cloudflare/kumo 2.3.0 → 2.4.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.

Files changed (229) hide show

package/dist/chunks/{command-palette-jrq7p16tff6n46nj.js → command-palette-fqhyacp33fhyf696.js} RENAMED Viewed

@@ -2,11 +2,11 @@
 import { jsx as e, jsxs as g, Fragment as E } from "react/jsx-runtime";
 import { forwardRef as K, useContext as N, createContext as w, useCallback as b, useRef as T } from "react";
 import { CaretRightIcon as M, ArrowSquareOutIcon as H, ArrowRightIcon as _, MagnifyingGlassIcon as F } from "@phosphor-icons/react";
-import { L as G } from "./layer-card-gegkqhkjy65l1ueo.js";
+import { L as G } from "./layer-card-er4flkcxmzfug8jw.js";
 import { L as j } from "./loader-g8a6j76ue5nq0lr8.js";
 import { c as m } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as U } from "./portal-provider-hwmkdmkpvct0cb76.js";
-import { a9 as q, ab as O, ae as V, bv as v, ad as $, ac as z, af as B, bw as J, aq as Q, aw as W, ax as X, ay as Y } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
+import { aa as z, ac as O, af as V, bw as v, ae as $, ad as q, ag as B, bx as J, ar as Q, ax as W, ay as X, az as Y } from "./vendor-base-ui-knphx7dts1vm1x37.js";
 const C = w({});
 function I({
   open: t,
@@ -122,7 +122,7 @@ function ee({
   className: n,
   ...a
 }) {
-  return /* @__PURE__ */ e(z, { className: m("space-y-0.5", n), ...a, children: t });
+  return /* @__PURE__ */ e(q, { className: m("space-y-0.5", n), ...a, children: t });
 }
 function te({
   children: t,
@@ -363,7 +363,7 @@ function ue({
 }) {
   return /* @__PURE__ */ e(O, { className: m("space-y-3", n), children: t });
 }
-const de = q, Ne = {}, we = {}, ve = {
+const de = z, Ne = {}, we = {}, ve = {
   /** Modal dialog wrapper - use with Panel for content that can swap */
   Dialog: I,
   /** Dialog + Panel combined - for simple single-view command palettes */
@@ -400,4 +400,4 @@ export {
   Ne as K,
   we as a
 };
-//# sourceMappingURL=command-palette-jrq7p16tff6n46nj.js.map
+//# sourceMappingURL=command-palette-fqhyacp33fhyf696.js.map

package/dist/chunks/{command-palette-jrq7p16tff6n46nj.js.map → command-palette-fqhyacp33fhyf696.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"command-palette-jrq7p16tff6n46nj.js","sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import {\n useRef,\n useCallback,\n createContext,\n useContext,\n forwardRef,\n type CSSProperties,\n} from \"react\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n MagnifyingGlassIcon,\n ArrowRightIcon,\n ArrowSquareOutIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\n\nimport { LayerCard } from \"../layer-card\";\nimport { Loader } from \"../loader\";\nimport { cn } from \"../../utils\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport type {\n HighlightRange,\n CommandPaletteRootProps,\n CommandPaletteInputProps,\n CommandPaletteListProps,\n CommandPaletteGroupProps,\n CommandPaletteGroupLabelProps,\n CommandPaletteItemProps,\n CommandPaletteEmptyProps,\n CommandPaletteLoadingProps,\n CommandPaletteFooterProps,\n CommandPaletteResultItemProps,\n} from \"./types\";\n\n/*\n CommandPalette - A composable command palette component for Kumo\n \n Uses @base-ui/react/autocomplete primitives for accessible command palette functionality.\n \n Keyboard navigation is built-in:\n * - Arrow keys (up/down) move highlight between items\n * - Enter selects the highlighted item (calls onSelect with newTab: false)\n * - Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux) selects with newTab: true\n * - First item is auto-highlighted when results change\n * - Escape closes the dialog\n \n Usage:\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * onSelect={(item, { newTab }) => handleSelect(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap(g => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <Autocomplete.List>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <Autocomplete.Collection>\n * {(item) => (\n * <CommandPalette.Item value={item} onClick={(e) => handleSelect(item, e.metaKey \|\| e.ctrlKey)}>\n * {item.title}\n * </CommandPalette.Item>\n * )}\n * </Autocomplete.Collection>\n * </CommandPalette.Group>\n * )}\n * </Autocomplete.List>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer />\n * </CommandPalette.Root>\n * ```\n /\n\n/\n Dialog context for passing close handler to children\n /\ninterface DialogContextValue {\n onClose?: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({});\n\n/\n Props for the Dialog component\n /\ninterface DialogProps {\n /* Whether the dialog is open /\n open: boolean;\n /* Callback when the open state changes /\n onOpenChange: (open: boolean) => void;\n /\n Optional callback when backdrop is clicked.\n * Receives the mouse event for position tracking (e.g., for ripple effects).\n * If not provided, backdrop click calls onOpenChange(false).\n /\n onBackdropClick?: (e: React.MouseEvent) => void;\n /* Child content - typically one or more Panel components /\n children: React.ReactNode;\n /\n Container element for the portal. Use this to render the command palette inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n /\n container?: PortalContainer;\n}\n\n/\n Dialog component - Modal wrapper for command palette content.\n \n Use this when you need a dialog that can swap between different Panel contents\n * without re-mounting (e.g., drill-down navigation).\n \n @example\n * ```tsx\n * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>\n * {showDrillDown ? (\n * <ZonePicker />\n * ) : (\n * <CommandPalette.Panel items={results} ...>\n * ...\n * </CommandPalette.Panel>\n * )}\n * </CommandPalette.Dialog>\n * ```\n /\nfunction Dialog({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n container: containerProp,\n}: DialogProps) {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (onBackdropClick) {\n onBackdropClick(e);\n } else {\n onOpenChange(false);\n }\n };\n\n const handleClose = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n return (\n <DialogBase.Root open={open} onOpenChange={onOpenChange} modal>\n <DialogBase.Portal container={container}>\n <DialogBase.Backdrop\n className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\"\n onClick={handleBackdropClick}\n />\n <LayerCard\n render={<DialogBase.Popup />}\n className={cn(\n \"fixed top-[10vh] left-1/2 w-full max-w-2xl -translate-x-1/2\",\n \"overflow-hidden rounded-lg\",\n \"duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n )}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n } as CSSProperties\n }\n >\n <DialogContext.Provider value={{ onClose: handleClose }}>\n {children}\n </DialogContext.Provider>\n </LayerCard>\n </DialogBase.Portal>\n </DialogBase.Root>\n );\n}\n\n/\n Root component - Dialog + Panel combined for simple use cases.\n \n For cases where you need to swap content inside the dialog without\n * re-mounting (e.g., drill-down navigation), use Dialog + Panel separately.\n \n Keyboard navigation is always enabled:\n * - Arrow keys (up/down) move highlight\n * - Enter selects highlighted item\n * - Cmd/Ctrl+Enter selects with newTab: true\n * - First item is auto-highlighted when results change\n /\nfunction Root<TGroup, TItem = TGroup>({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter,\n onSelect,\n getSelectableItems,\n container,\n}: CommandPaletteRootProps<TGroup, TItem>) {\n return (\n <Dialog\n open={open}\n onOpenChange={onOpenChange}\n onBackdropClick={onBackdropClick}\n container={container}\n >\n <Panel\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={onItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n open={open}\n onSelect={onSelect}\n getSelectableItems={getSelectableItems}\n >\n {children}\n </Panel>\n </Dialog>\n );\n}\n\n/\n InputHeader component - Internal styled container for search input.\n /\nfunction InputHeader({\n children,\n leading,\n trailing,\n}: {\n children: React.ReactNode;\n leading?: React.ReactNode;\n trailing?: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-center gap-3 bg-kumo-base px-4 py-3 focus-within:ring-2 focus-within:ring-kumo-brand\">\n {leading ?? (\n <MagnifyingGlassIcon\n className=\"h-4 w-4 text-kumo-subtle\"\n weight=\"bold\"\n />\n )}\n {children}\n {trailing}\n </div>\n );\n}\n\n/\n List component - Scrollable results container\n \n Wrapper div with proper styling, contains Autocomplete.List internally.\n * Supports ref forwarding for scroll control.\n /\nconst List = forwardRef<\n HTMLDivElement,\n CommandPaletteListProps & { className?: string }\n>(function List({ children, className }, ref) {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 scroll-py-2 ring-1 ring-kumo-hairline\",\n className,\n )}\n >\n {children}\n </div>\n );\n});\n\nList.displayName = \"CommandPalette.List\";\n\n/\n Group component - Category grouping\n \n Re-export of Autocomplete.Group with default styling.\n /\nfunction Group({\n children,\n className,\n ...props\n}: CommandPaletteGroupProps & {\n className?: string;\n items?: unknown[];\n}) {\n return (\n <Autocomplete.Group className={cn(\"space-y-0.5\", className)} {...props}>\n {children}\n </Autocomplete.Group>\n );\n}\n\n/\n GroupLabel component - Section header text\n \n Re-export of Autocomplete.GroupLabel with styling matching SectionHeader.\n /\nfunction GroupLabel({\n children,\n className,\n}: CommandPaletteGroupLabelProps & { className?: string }) {\n return (\n <Autocomplete.GroupLabel\n className={cn(\n \"mb-2 px-2 pt-1 text-xs font-semibold text-kumo-subtle\",\n className,\n )}\n >\n {children}\n </Autocomplete.GroupLabel>\n );\n}\n\n/\n Item component - Individual result item\n \n Re-export of Autocomplete.Item with styling matching SearchResultItem.\n * Note: Use onClick for selection handling, matching the existing CommandPalette pattern.\n /\nfunction Item<T>({\n value,\n disabled,\n children,\n className,\n onClick,\n}: CommandPaletteItemProps<T> & {\n className?: string;\n}) {\n return (\n <Autocomplete.Item\n value={value}\n disabled={disabled}\n onClick={onClick}\n className={cn(\n \"group flex w-full items-center gap-3 px-2 py-1.5 text-left text-base transition-colors\",\n \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n \"rounded-lg\",\n disabled && \"cursor-default opacity-50\",\n className,\n )}\n >\n {children}\n </Autocomplete.Item>\n );\n}\n\n/\n Empty component - Empty state when no results\n \n Re-export of Autocomplete.Empty with default styling.\n /\nfunction Empty({ children }: CommandPaletteEmptyProps) {\n return (\n <Autocomplete.Empty>\n <div className=\"p-8 text-center\">\n <p className=\"text-kumo-subtle\">{children ?? \"No results found\"}</p>\n </div>\n </Autocomplete.Empty>\n );\n}\n\n/\n Loading component - Loading spinner state\n \n Centered loading spinner using Kumo Loader.\n /\nfunction Loading({ children }: CommandPaletteLoadingProps) {\n return (\n <div className=\"flex items-center justify-center p-8\">\n {children ?? <Loader size={24} />}\n </div>\n );\n}\n\n/\n Footer component - Styled container for keyboard hints or other footer content.\n \n Children are required - this is just a styled container.\n * Consumers should provide their own keyboard hints with proper i18n.\n /\nfunction Footer({ children }: CommandPaletteFooterProps) {\n return (\n <div className=\"flex items-center justify-between rounded-b-lg bg-kumo-elevated px-4 py-3 text-xs text-kumo-subtle\">\n {children}\n </div>\n );\n}\n\n/\n HighlightedText - Renders text with highlighted portions based on match indices.\n * Highlighted text is shown with a background color to indicate matches.\n /\nfunction HighlightedText({\n text,\n highlights,\n className,\n}: {\n text: string;\n highlights?: HighlightRange[];\n className?: string;\n}) {\n if (!highlights \|\| highlights.length === 0) {\n return <span className={className}>{text}</span>;\n }\n\n // Sort highlights by start index and merge overlapping ranges\n const sortedHighlights = [...highlights].sort((a, b) => a[0] - b[0]);\n const mergedHighlights: HighlightRange[] = [];\n\n for (const range of sortedHighlights) {\n const last = mergedHighlights[mergedHighlights.length - 1];\n if (last && range[0] <= last[1] + 1) {\n // Merge overlapping or adjacent ranges\n last[1] = Math.max(last[1], range[1]);\n } else {\n mergedHighlights.push([...range]);\n }\n }\n\n const parts: React.ReactNode[] = [];\n let lastIndex = 0;\n\n mergedHighlights.forEach((range, i) => {\n const [start, end] = range;\n\n // Add non-highlighted text before this match\n if (start > lastIndex) {\n parts.push(<span key={`text-${i}`}>{text.slice(lastIndex, start)}</span>);\n }\n\n // Add highlighted text (end index is inclusive)\n parts.push(\n <mark\n key={`highlight-${i}`}\n className=\"rounded-sm bg-kumo-warning/50 text-kumo-default\"\n >\n {text.slice(start, end + 1)}\n </mark>,\n );\n\n lastIndex = end + 1;\n });\n\n // Add remaining non-highlighted text\n if (lastIndex < text.length) {\n parts.push(<span key=\"text-end\">{text.slice(lastIndex)}</span>);\n }\n\n return <span className={className}>{parts}</span>;\n}\n\n/\n ResultItem - Rich item component with breadcrumbs, highlights, icons, and external indicators.\n \n Use this for search result items that need breadcrumb navigation, text highlighting,\n * or external link indicators. For simple items, use Item instead.\n /\nfunction ResultItem<T>({\n title,\n breadcrumbs,\n titleHighlights,\n breadcrumbHighlights,\n description,\n icon,\n value,\n onClick,\n showArrow = true,\n external = false,\n nonInteractive = false,\n}: CommandPaletteResultItemProps<T>) {\n return (\n <Autocomplete.Item\n value={value}\n onClick={nonInteractive ? undefined : (e: React.MouseEvent) => onClick(e)}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors\",\n nonInteractive\n ? \"cursor-default\"\n : \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n )}\n >\n {icon && (\n <div className=\"flex flex-shrink-0 items-center text-kumo-subtle\">\n {icon}\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex items-center gap-2 truncate\">\n {breadcrumbs?.map((crumb, index) => (\n <span key={index} className=\"flex items-center gap-2\">\n <HighlightedText\n text={crumb}\n highlights={breadcrumbHighlights?.[index]}\n className=\"text-base text-kumo-default\"\n />\n <CaretRightIcon\n className=\"h-3 w-3 flex-shrink-0 text-kumo-subtle\"\n weight=\"bold\"\n />\n </span>\n ))}\n <HighlightedText\n text={title}\n highlights={titleHighlights}\n className=\"text-base text-kumo-default\"\n />\n {external && (\n <ArrowSquareOutIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle\" />\n )}\n {description && (\n <>\n <span className=\"text-kumo-subtle\">—</span>\n <span className=\"truncate text-sm text-kumo-subtle\">\n {description}\n </span>\n </>\n )}\n </div>\n </div>\n {showArrow && !external && !nonInteractive && (\n <ArrowRightIcon className=\"h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100\" />\n )}\n </Autocomplete.Item>\n );\n}\n\n/\n Container component - Internal styled wrapper.\n /\nfunction Container({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n <div\n className={cn(\n \"flex max-h-[60vh] flex-col overflow-hidden rounded-lg bg-kumo-elevated\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\n/\n Panel context for passing handlers from Panel to children\n /\ninterface PanelContextValue {\n onInputKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst PanelContext = createContext<PanelContextValue>({});\n\n/\n Props for the Panel component\n /\ninterface PanelProps<TGroup, TItem = TGroup> {\n /* Child components (Input, List, Footer, etc.) /\n children: React.ReactNode;\n /* Items for the autocomplete /\n items: TGroup[];\n /* Controlled input value /\n value?: string;\n /* Callback when input value changes /\n onValueChange?: (value: string) => void;\n /* Callback when an item is highlighted /\n onItemHighlighted?: (\n item: TGroup \| undefined,\n details: { reason: string; event: Event; index: number },\n ) => void;\n /* Convert item to string for accessibility /\n itemToStringValue?: (item: TGroup) => string;\n /* Custom filter function /\n filter?: (item: TGroup, query: string) => boolean;\n /* Whether the panel is active/open (for autocomplete state) /\n open?: boolean;\n /* Optional className for the container /\n className?: string;\n /\n Callback when an item is selected via Cmd/Ctrl+Enter.\n * Requires getSelectableItems to be provided.\n /\n onSelect?: (item: TItem, options: { newTab: boolean }) => void;\n /\n Function to get flat list of selectable items from groups.\n * Required when items are grouped and onSelect is used.\n /\n getSelectableItems?: (items: TGroup[]) => TItem[];\n}\n\n/\n Panel component - Command palette without dialog wrapper.\n \n Use this when you need to render command palette content inside an existing dialog\n * (e.g., for drill-down navigation where the dialog stays open but content changes).\n \n Combines Container + Autocomplete functionality with a clean API.\n \n @example\n * ```tsx\n * <DialogRoot open={open} onOpenChange={setOpen}>\n * <Dialog>\n * <CommandPalette.Panel\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => <CommandPalette.ResultItem ... />}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>...</CommandPalette.Footer>\n * </CommandPalette.Panel>\n * </Dialog>\n * </DialogRoot>\n * ```\n /\nconst defaultFilter = () => true;\n\nfunction Panel<TGroup, TItem = TGroup>({\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter = defaultFilter,\n open = true,\n className,\n onSelect,\n getSelectableItems,\n}: PanelProps<TGroup, TItem>) {\n const highlightedIndexRef = useRef<number>(-1);\n\n const handleItemHighlighted = useCallback(\n (\n item: TGroup \| undefined,\n details: { reason: string; event: Event; index: number },\n ) => {\n highlightedIndexRef.current = details.index;\n onItemHighlighted?.(item, details);\n },\n [onItemHighlighted],\n );\n\n // Handle Cmd/Ctrl+Enter for new tab selection\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const isEnter = e.key === \"Enter\";\n const withModifier = e.metaKey \|\| e.ctrlKey;\n\n if (isEnter && withModifier && onSelect && getSelectableItems) {\n const selectableItems = getSelectableItems(items);\n const highlightedItem = selectableItems[highlightedIndexRef.current];\n\n if (highlightedItem !== undefined) {\n e.preventDefault();\n onSelect(highlightedItem, { newTab: true });\n }\n }\n },\n [items, onSelect, getSelectableItems],\n );\n\n return (\n <Container className={className}>\n <Autocomplete.Root\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={handleItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n autoHighlight=\"always\"\n keepHighlight\n open={open}\n >\n <PanelContext.Provider value={{ onInputKeyDown: handleInputKeyDown }}>\n {children}\n </PanelContext.Provider>\n </Autocomplete.Root>\n </Container>\n );\n}\n\n/\n PanelInput component - Input that works inside Panel.\n \n Similar to Input but designed for use with Panel instead of Root.\n * Automatically wires up Cmd/Ctrl+Enter handling from Panel.\n /\nfunction PanelInput({\n autoFocus = true,\n placeholder,\n className,\n onKeyDown: onKeyDownProp,\n leading,\n trailing,\n ...props\n}: CommandPaletteInputProps) {\n const { onInputKeyDown } = useContext(PanelContext);\n const { onClose } = useContext(DialogContext);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // Let consumer handle first (e.g., for custom Escape/Backspace behavior)\n onKeyDownProp?.(e);\n if (e.defaultPrevented) return;\n\n // Handle Escape to close the dialog\n if (e.key === \"Escape\" && onClose) {\n e.preventDefault();\n onClose();\n return;\n }\n onInputKeyDown?.(e);\n },\n [onInputKeyDown, onKeyDownProp, onClose],\n );\n\n return (\n <InputHeader leading={leading} trailing={trailing}>\n <Autocomplete.Input\n placeholder={placeholder}\n className={cn(\n \"flex-1 border-none bg-transparent text-base kumo-input-placeholder\",\n \"outline-none\",\n className,\n )}\n onKeyDown={handleKeyDown}\n // oxlint-disable-next-line no-autofocus -- Command palette input should autofocus for keyboard-driven UX\n autoFocus={autoFocus}\n {...props}\n />\n </InputHeader>\n );\n}\n\n/\n Render prop iterators - wrap base-ui primitives with cleaner names.\n /\n\n/\n Results component - Render prop iterator for groups.\n \n Wraps Autocomplete.List with default spacing between groups.\n /\nfunction Results({\n children,\n className,\n}: React.ComponentProps<typeof Autocomplete.List> & { className?: string }) {\n return (\n <Autocomplete.List className={cn(\"space-y-3\", className)}>\n {children}\n </Autocomplete.List>\n );\n}\n\nconst Items = Autocomplete.Collection;\n\n/* CommandPalette variant definitions (no user-facing variants; structure reserved for future use). /\nexport const KUMO_COMMAND_PALETTE_VARIANTS = {} as const;\n\nexport const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;\n\n/\n CommandPalette — accessible command palette / spotlight search overlay.\n \n Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`),\n * `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`,\n * `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.\n \n Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.\n \n @example\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={query}\n * onValueChange={setQuery}\n * itemToStringValue={(g) => g.label}\n * onSelect={(item, { newTab }) => navigate(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap((g) => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search…\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => (\n * <CommandPalette.ResultItem title={item.title} value={item} onClick={…} />\n * )}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>…keyboard hints…</CommandPalette.Footer>\n * </CommandPalette.Root>\n * ```\n /\nexport const CommandPalette = {\n /* Modal dialog wrapper - use with Panel for content that can swap /\n Dialog,\n /* Dialog + Panel combined - for simple single-view command palettes /\n Root,\n /* Autocomplete panel without dialog - use inside Dialog for swappable content /\n Panel,\n /* Input for use inside Panel /\n Input: PanelInput,\n /* Scrollable results container /\n List,\n /* Category grouping /\n Group,\n /* Section header text /\n GroupLabel,\n /* Basic item /\n Item,\n /* Rich item with breadcrumbs, highlights, icons /\n ResultItem,\n /* Text with highlighted portions /\n HighlightedText,\n /* Empty state /\n Empty,\n /* Loading state /\n Loading,\n /* Footer for keyboard hints /\n Footer,\n /* Render prop iterator for groups /\n Results,\n /* Render prop iterator for items within a group */\n Items,\n};\n"],"names":["DialogContext","createContext","Dialog","open","onOpenChange","onBackdropClick","children","containerProp","contextContainer","usePortalContainer","container","handleBackdropClick","e","handleClose","useCallback","jsx","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","LayerCard","DialogBase.Popup","cn","Root","items","value","onValueChange","onItemHighlighted","itemToStringValue","filter","onSelect","getSelectableItems","Panel","InputHeader","leading","trailing","MagnifyingGlassIcon","List","forwardRef","className","ref","Group","props","Autocomplete.Group","GroupLabel","Autocomplete.GroupLabel","Item","disabled","onClick","Autocomplete.Item","Empty","Autocomplete.Empty","Loading","Loader","Footer","HighlightedText","text","highlights","sortedHighlights","a","b","mergedHighlights","range","last","parts","lastIndex","i","start","end","ResultItem","title","breadcrumbs","titleHighlights","breadcrumbHighlights","description","icon","showArrow","external","nonInteractive","crumb","index","CaretRightIcon","ArrowSquareOutIcon","Fragment","ArrowRightIcon","Container","PanelContext","defaultFilter","highlightedIndexRef","useRef","handleItemHighlighted","item","details","handleInputKeyDown","isEnter","withModifier","highlightedItem","Autocomplete.Root","PanelInput","autoFocus","placeholder","onKeyDownProp","onInputKeyDown","useContext","onClose","handleKeyDown","Autocomplete.Input","Results","Autocomplete.List","Items","Autocomplete.Collection","KUMO_COMMAND_PALETTE_VARIANTS","KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS","CommandPalette"],"mappings":"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"}
1	+ {"version":3,"file":"command-palette-fqhyacp33fhyf696.js","sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import {\n useRef,\n useCallback,\n createContext,\n useContext,\n forwardRef,\n type CSSProperties,\n} from \"react\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n MagnifyingGlassIcon,\n ArrowRightIcon,\n ArrowSquareOutIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\n\nimport { LayerCard } from \"../layer-card\";\nimport { Loader } from \"../loader\";\nimport { cn } from \"../../utils\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport type {\n HighlightRange,\n CommandPaletteRootProps,\n CommandPaletteInputProps,\n CommandPaletteListProps,\n CommandPaletteGroupProps,\n CommandPaletteGroupLabelProps,\n CommandPaletteItemProps,\n CommandPaletteEmptyProps,\n CommandPaletteLoadingProps,\n CommandPaletteFooterProps,\n CommandPaletteResultItemProps,\n} from \"./types\";\n\n/*\n CommandPalette - A composable command palette component for Kumo\n \n Uses @base-ui/react/autocomplete primitives for accessible command palette functionality.\n \n Keyboard navigation is built-in:\n * - Arrow keys (up/down) move highlight between items\n * - Enter selects the highlighted item (calls onSelect with newTab: false)\n * - Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux) selects with newTab: true\n * - First item is auto-highlighted when results change\n * - Escape closes the dialog\n \n Usage:\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * onSelect={(item, { newTab }) => handleSelect(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap(g => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <Autocomplete.List>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <Autocomplete.Collection>\n * {(item) => (\n * <CommandPalette.Item value={item} onClick={(e) => handleSelect(item, e.metaKey \|\| e.ctrlKey)}>\n * {item.title}\n * </CommandPalette.Item>\n * )}\n * </Autocomplete.Collection>\n * </CommandPalette.Group>\n * )}\n * </Autocomplete.List>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer />\n * </CommandPalette.Root>\n * ```\n /\n\n/\n Dialog context for passing close handler to children\n /\ninterface DialogContextValue {\n onClose?: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({});\n\n/\n Props for the Dialog component\n /\ninterface DialogProps {\n /* Whether the dialog is open /\n open: boolean;\n /* Callback when the open state changes /\n onOpenChange: (open: boolean) => void;\n /\n Optional callback when backdrop is clicked.\n * Receives the mouse event for position tracking (e.g., for ripple effects).\n * If not provided, backdrop click calls onOpenChange(false).\n /\n onBackdropClick?: (e: React.MouseEvent) => void;\n /* Child content - typically one or more Panel components /\n children: React.ReactNode;\n /\n Container element for the portal. Use this to render the command palette inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n /\n container?: PortalContainer;\n}\n\n/\n Dialog component - Modal wrapper for command palette content.\n \n Use this when you need a dialog that can swap between different Panel contents\n * without re-mounting (e.g., drill-down navigation).\n \n @example\n * ```tsx\n * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>\n * {showDrillDown ? (\n * <ZonePicker />\n * ) : (\n * <CommandPalette.Panel items={results} ...>\n * ...\n * </CommandPalette.Panel>\n * )}\n * </CommandPalette.Dialog>\n * ```\n /\nfunction Dialog({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n container: containerProp,\n}: DialogProps) {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (onBackdropClick) {\n onBackdropClick(e);\n } else {\n onOpenChange(false);\n }\n };\n\n const handleClose = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n return (\n <DialogBase.Root open={open} onOpenChange={onOpenChange} modal>\n <DialogBase.Portal container={container}>\n <DialogBase.Backdrop\n className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\"\n onClick={handleBackdropClick}\n />\n <LayerCard\n render={<DialogBase.Popup />}\n className={cn(\n \"fixed top-[10vh] left-1/2 w-full max-w-2xl -translate-x-1/2\",\n \"overflow-hidden rounded-lg\",\n \"duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n )}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n } as CSSProperties\n }\n >\n <DialogContext.Provider value={{ onClose: handleClose }}>\n {children}\n </DialogContext.Provider>\n </LayerCard>\n </DialogBase.Portal>\n </DialogBase.Root>\n );\n}\n\n/\n Root component - Dialog + Panel combined for simple use cases.\n \n For cases where you need to swap content inside the dialog without\n * re-mounting (e.g., drill-down navigation), use Dialog + Panel separately.\n \n Keyboard navigation is always enabled:\n * - Arrow keys (up/down) move highlight\n * - Enter selects highlighted item\n * - Cmd/Ctrl+Enter selects with newTab: true\n * - First item is auto-highlighted when results change\n /\nfunction Root<TGroup, TItem = TGroup>({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter,\n onSelect,\n getSelectableItems,\n container,\n}: CommandPaletteRootProps<TGroup, TItem>) {\n return (\n <Dialog\n open={open}\n onOpenChange={onOpenChange}\n onBackdropClick={onBackdropClick}\n container={container}\n >\n <Panel\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={onItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n open={open}\n onSelect={onSelect}\n getSelectableItems={getSelectableItems}\n >\n {children}\n </Panel>\n </Dialog>\n );\n}\n\n/\n InputHeader component - Internal styled container for search input.\n /\nfunction InputHeader({\n children,\n leading,\n trailing,\n}: {\n children: React.ReactNode;\n leading?: React.ReactNode;\n trailing?: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-center gap-3 bg-kumo-base px-4 py-3 focus-within:ring-2 focus-within:ring-kumo-brand\">\n {leading ?? (\n <MagnifyingGlassIcon\n className=\"h-4 w-4 text-kumo-subtle\"\n weight=\"bold\"\n />\n )}\n {children}\n {trailing}\n </div>\n );\n}\n\n/\n List component - Scrollable results container\n \n Wrapper div with proper styling, contains Autocomplete.List internally.\n * Supports ref forwarding for scroll control.\n /\nconst List = forwardRef<\n HTMLDivElement,\n CommandPaletteListProps & { className?: string }\n>(function List({ children, className }, ref) {\n return (\n <div\n ref={ref}\n className={cn(\n \"relative min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 scroll-py-2 ring-1 ring-kumo-hairline\",\n className,\n )}\n >\n {children}\n </div>\n );\n});\n\nList.displayName = \"CommandPalette.List\";\n\n/\n Group component - Category grouping\n \n Re-export of Autocomplete.Group with default styling.\n /\nfunction Group({\n children,\n className,\n ...props\n}: CommandPaletteGroupProps & {\n className?: string;\n items?: unknown[];\n}) {\n return (\n <Autocomplete.Group className={cn(\"space-y-0.5\", className)} {...props}>\n {children}\n </Autocomplete.Group>\n );\n}\n\n/\n GroupLabel component - Section header text\n \n Re-export of Autocomplete.GroupLabel with styling matching SectionHeader.\n /\nfunction GroupLabel({\n children,\n className,\n}: CommandPaletteGroupLabelProps & { className?: string }) {\n return (\n <Autocomplete.GroupLabel\n className={cn(\n \"mb-2 px-2 pt-1 text-xs font-semibold text-kumo-subtle\",\n className,\n )}\n >\n {children}\n </Autocomplete.GroupLabel>\n );\n}\n\n/\n Item component - Individual result item\n \n Re-export of Autocomplete.Item with styling matching SearchResultItem.\n * Note: Use onClick for selection handling, matching the existing CommandPalette pattern.\n /\nfunction Item<T>({\n value,\n disabled,\n children,\n className,\n onClick,\n}: CommandPaletteItemProps<T> & {\n className?: string;\n}) {\n return (\n <Autocomplete.Item\n value={value}\n disabled={disabled}\n onClick={onClick}\n className={cn(\n \"group flex w-full items-center gap-3 px-2 py-1.5 text-left text-base transition-colors\",\n \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n \"rounded-lg\",\n disabled && \"cursor-default opacity-50\",\n className,\n )}\n >\n {children}\n </Autocomplete.Item>\n );\n}\n\n/\n Empty component - Empty state when no results\n \n Re-export of Autocomplete.Empty with default styling.\n /\nfunction Empty({ children }: CommandPaletteEmptyProps) {\n return (\n <Autocomplete.Empty>\n <div className=\"p-8 text-center\">\n <p className=\"text-kumo-subtle\">{children ?? \"No results found\"}</p>\n </div>\n </Autocomplete.Empty>\n );\n}\n\n/\n Loading component - Loading spinner state\n \n Centered loading spinner using Kumo Loader.\n /\nfunction Loading({ children }: CommandPaletteLoadingProps) {\n return (\n <div className=\"flex items-center justify-center p-8\">\n {children ?? <Loader size={24} />}\n </div>\n );\n}\n\n/\n Footer component - Styled container for keyboard hints or other footer content.\n \n Children are required - this is just a styled container.\n * Consumers should provide their own keyboard hints with proper i18n.\n /\nfunction Footer({ children }: CommandPaletteFooterProps) {\n return (\n <div className=\"flex items-center justify-between rounded-b-lg bg-kumo-elevated px-4 py-3 text-xs text-kumo-subtle\">\n {children}\n </div>\n );\n}\n\n/\n HighlightedText - Renders text with highlighted portions based on match indices.\n * Highlighted text is shown with a background color to indicate matches.\n /\nfunction HighlightedText({\n text,\n highlights,\n className,\n}: {\n text: string;\n highlights?: HighlightRange[];\n className?: string;\n}) {\n if (!highlights \|\| highlights.length === 0) {\n return <span className={className}>{text}</span>;\n }\n\n // Sort highlights by start index and merge overlapping ranges\n const sortedHighlights = [...highlights].sort((a, b) => a[0] - b[0]);\n const mergedHighlights: HighlightRange[] = [];\n\n for (const range of sortedHighlights) {\n const last = mergedHighlights[mergedHighlights.length - 1];\n if (last && range[0] <= last[1] + 1) {\n // Merge overlapping or adjacent ranges\n last[1] = Math.max(last[1], range[1]);\n } else {\n mergedHighlights.push([...range]);\n }\n }\n\n const parts: React.ReactNode[] = [];\n let lastIndex = 0;\n\n mergedHighlights.forEach((range, i) => {\n const [start, end] = range;\n\n // Add non-highlighted text before this match\n if (start > lastIndex) {\n parts.push(<span key={`text-${i}`}>{text.slice(lastIndex, start)}</span>);\n }\n\n // Add highlighted text (end index is inclusive)\n parts.push(\n <mark\n key={`highlight-${i}`}\n className=\"rounded-sm bg-kumo-warning/50 text-kumo-default\"\n >\n {text.slice(start, end + 1)}\n </mark>,\n );\n\n lastIndex = end + 1;\n });\n\n // Add remaining non-highlighted text\n if (lastIndex < text.length) {\n parts.push(<span key=\"text-end\">{text.slice(lastIndex)}</span>);\n }\n\n return <span className={className}>{parts}</span>;\n}\n\n/\n ResultItem - Rich item component with breadcrumbs, highlights, icons, and external indicators.\n \n Use this for search result items that need breadcrumb navigation, text highlighting,\n * or external link indicators. For simple items, use Item instead.\n /\nfunction ResultItem<T>({\n title,\n breadcrumbs,\n titleHighlights,\n breadcrumbHighlights,\n description,\n icon,\n value,\n onClick,\n showArrow = true,\n external = false,\n nonInteractive = false,\n}: CommandPaletteResultItemProps<T>) {\n return (\n <Autocomplete.Item\n value={value}\n onClick={nonInteractive ? undefined : (e: React.MouseEvent) => onClick(e)}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors\",\n nonInteractive\n ? \"cursor-default\"\n : \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n )}\n >\n {icon && (\n <div className=\"flex flex-shrink-0 items-center text-kumo-subtle\">\n {icon}\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex items-center gap-2 truncate\">\n {breadcrumbs?.map((crumb, index) => (\n <span key={index} className=\"flex items-center gap-2\">\n <HighlightedText\n text={crumb}\n highlights={breadcrumbHighlights?.[index]}\n className=\"text-base text-kumo-default\"\n />\n <CaretRightIcon\n className=\"h-3 w-3 flex-shrink-0 text-kumo-subtle\"\n weight=\"bold\"\n />\n </span>\n ))}\n <HighlightedText\n text={title}\n highlights={titleHighlights}\n className=\"text-base text-kumo-default\"\n />\n {external && (\n <ArrowSquareOutIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle\" />\n )}\n {description && (\n <>\n <span className=\"text-kumo-subtle\">—</span>\n <span className=\"truncate text-sm text-kumo-subtle\">\n {description}\n </span>\n </>\n )}\n </div>\n </div>\n {showArrow && !external && !nonInteractive && (\n <ArrowRightIcon className=\"h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100\" />\n )}\n </Autocomplete.Item>\n );\n}\n\n/\n Container component - Internal styled wrapper.\n /\nfunction Container({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n <div\n className={cn(\n \"flex max-h-[60vh] flex-col overflow-hidden rounded-lg bg-kumo-elevated\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\n/\n Panel context for passing handlers from Panel to children\n /\ninterface PanelContextValue {\n onInputKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst PanelContext = createContext<PanelContextValue>({});\n\n/\n Props for the Panel component\n /\ninterface PanelProps<TGroup, TItem = TGroup> {\n /* Child components (Input, List, Footer, etc.) /\n children: React.ReactNode;\n /* Items for the autocomplete /\n items: TGroup[];\n /* Controlled input value /\n value?: string;\n /* Callback when input value changes /\n onValueChange?: (value: string) => void;\n /* Callback when an item is highlighted /\n onItemHighlighted?: (\n item: TGroup \| undefined,\n details: { reason: string; event: Event; index: number },\n ) => void;\n /* Convert item to string for accessibility /\n itemToStringValue?: (item: TGroup) => string;\n /* Custom filter function /\n filter?: (item: TGroup, query: string) => boolean;\n /* Whether the panel is active/open (for autocomplete state) /\n open?: boolean;\n /* Optional className for the container /\n className?: string;\n /\n Callback when an item is selected via Cmd/Ctrl+Enter.\n * Requires getSelectableItems to be provided.\n /\n onSelect?: (item: TItem, options: { newTab: boolean }) => void;\n /\n Function to get flat list of selectable items from groups.\n * Required when items are grouped and onSelect is used.\n /\n getSelectableItems?: (items: TGroup[]) => TItem[];\n}\n\n/\n Panel component - Command palette without dialog wrapper.\n \n Use this when you need to render command palette content inside an existing dialog\n * (e.g., for drill-down navigation where the dialog stays open but content changes).\n \n Combines Container + Autocomplete functionality with a clean API.\n \n @example\n * ```tsx\n * <DialogRoot open={open} onOpenChange={setOpen}>\n * <Dialog>\n * <CommandPalette.Panel\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => <CommandPalette.ResultItem ... />}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>...</CommandPalette.Footer>\n * </CommandPalette.Panel>\n * </Dialog>\n * </DialogRoot>\n * ```\n /\nconst defaultFilter = () => true;\n\nfunction Panel<TGroup, TItem = TGroup>({\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter = defaultFilter,\n open = true,\n className,\n onSelect,\n getSelectableItems,\n}: PanelProps<TGroup, TItem>) {\n const highlightedIndexRef = useRef<number>(-1);\n\n const handleItemHighlighted = useCallback(\n (\n item: TGroup \| undefined,\n details: { reason: string; event: Event; index: number },\n ) => {\n highlightedIndexRef.current = details.index;\n onItemHighlighted?.(item, details);\n },\n [onItemHighlighted],\n );\n\n // Handle Cmd/Ctrl+Enter for new tab selection\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const isEnter = e.key === \"Enter\";\n const withModifier = e.metaKey \|\| e.ctrlKey;\n\n if (isEnter && withModifier && onSelect && getSelectableItems) {\n const selectableItems = getSelectableItems(items);\n const highlightedItem = selectableItems[highlightedIndexRef.current];\n\n if (highlightedItem !== undefined) {\n e.preventDefault();\n onSelect(highlightedItem, { newTab: true });\n }\n }\n },\n [items, onSelect, getSelectableItems],\n );\n\n return (\n <Container className={className}>\n <Autocomplete.Root\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={handleItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n autoHighlight=\"always\"\n keepHighlight\n open={open}\n >\n <PanelContext.Provider value={{ onInputKeyDown: handleInputKeyDown }}>\n {children}\n </PanelContext.Provider>\n </Autocomplete.Root>\n </Container>\n );\n}\n\n/\n PanelInput component - Input that works inside Panel.\n \n Similar to Input but designed for use with Panel instead of Root.\n * Automatically wires up Cmd/Ctrl+Enter handling from Panel.\n /\nfunction PanelInput({\n autoFocus = true,\n placeholder,\n className,\n onKeyDown: onKeyDownProp,\n leading,\n trailing,\n ...props\n}: CommandPaletteInputProps) {\n const { onInputKeyDown } = useContext(PanelContext);\n const { onClose } = useContext(DialogContext);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // Let consumer handle first (e.g., for custom Escape/Backspace behavior)\n onKeyDownProp?.(e);\n if (e.defaultPrevented) return;\n\n // Handle Escape to close the dialog\n if (e.key === \"Escape\" && onClose) {\n e.preventDefault();\n onClose();\n return;\n }\n onInputKeyDown?.(e);\n },\n [onInputKeyDown, onKeyDownProp, onClose],\n );\n\n return (\n <InputHeader leading={leading} trailing={trailing}>\n <Autocomplete.Input\n placeholder={placeholder}\n className={cn(\n \"flex-1 border-none bg-transparent text-base kumo-input-placeholder\",\n \"outline-none\",\n className,\n )}\n onKeyDown={handleKeyDown}\n // oxlint-disable-next-line no-autofocus -- Command palette input should autofocus for keyboard-driven UX\n autoFocus={autoFocus}\n {...props}\n />\n </InputHeader>\n );\n}\n\n/\n Render prop iterators - wrap base-ui primitives with cleaner names.\n /\n\n/\n Results component - Render prop iterator for groups.\n \n Wraps Autocomplete.List with default spacing between groups.\n /\nfunction Results({\n children,\n className,\n}: React.ComponentProps<typeof Autocomplete.List> & { className?: string }) {\n return (\n <Autocomplete.List className={cn(\"space-y-3\", className)}>\n {children}\n </Autocomplete.List>\n );\n}\n\nconst Items = Autocomplete.Collection;\n\n/* CommandPalette variant definitions (no user-facing variants; structure reserved for future use). /\nexport const KUMO_COMMAND_PALETTE_VARIANTS = {} as const;\n\nexport const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;\n\n/\n CommandPalette — accessible command palette / spotlight search overlay.\n \n Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`),\n * `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`,\n * `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.\n \n Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.\n \n @example\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={query}\n * onValueChange={setQuery}\n * itemToStringValue={(g) => g.label}\n * onSelect={(item, { newTab }) => navigate(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap((g) => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search…\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => (\n * <CommandPalette.ResultItem title={item.title} value={item} onClick={…} />\n * )}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>…keyboard hints…</CommandPalette.Footer>\n * </CommandPalette.Root>\n * ```\n /\nexport const CommandPalette = {\n /* Modal dialog wrapper - use with Panel for content that can swap /\n Dialog,\n /* Dialog + Panel combined - for simple single-view command palettes /\n Root,\n /* Autocomplete panel without dialog - use inside Dialog for swappable content /\n Panel,\n /* Input for use inside Panel /\n Input: PanelInput,\n /* Scrollable results container /\n List,\n /* Category grouping /\n Group,\n /* Section header text /\n GroupLabel,\n /* Basic item /\n Item,\n /* Rich item with breadcrumbs, highlights, icons /\n ResultItem,\n /* Text with highlighted portions /\n HighlightedText,\n /* Empty state /\n Empty,\n /* Loading state /\n Loading,\n /* Footer for keyboard hints /\n Footer,\n /* Render prop iterator for groups /\n Results,\n /* Render prop iterator for items within a group */\n Items,\n};\n"],"names":["DialogContext","createContext","Dialog","open","onOpenChange","onBackdropClick","children","containerProp","contextContainer","usePortalContainer","container","handleBackdropClick","e","handleClose","useCallback","jsx","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","LayerCard","DialogBase.Popup","cn","Root","items","value","onValueChange","onItemHighlighted","itemToStringValue","filter","onSelect","getSelectableItems","Panel","InputHeader","leading","trailing","MagnifyingGlassIcon","List","forwardRef","className","ref","Group","props","Autocomplete.Group","GroupLabel","Autocomplete.GroupLabel","Item","disabled","onClick","Autocomplete.Item","Empty","Autocomplete.Empty","Loading","Loader","Footer","HighlightedText","text","highlights","sortedHighlights","a","b","mergedHighlights","range","last","parts","lastIndex","i","start","end","ResultItem","title","breadcrumbs","titleHighlights","breadcrumbHighlights","description","icon","showArrow","external","nonInteractive","crumb","index","CaretRightIcon","ArrowSquareOutIcon","Fragment","ArrowRightIcon","Container","PanelContext","defaultFilter","highlightedIndexRef","useRef","handleItemHighlighted","item","details","handleInputKeyDown","isEnter","withModifier","highlightedItem","Autocomplete.Root","PanelInput","autoFocus","placeholder","onKeyDownProp","onInputKeyDown","useContext","onClose","handleKeyDown","Autocomplete.Input","Results","Autocomplete.List","Items","Autocomplete.Collection","KUMO_COMMAND_PALETTE_VARIANTS","KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS","CommandPalette"],"mappings":"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"}

package/dist/chunks/{dialog-gndju3sqg1lmpb3f.js → dialog-my9fioafdstq50mi.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as e, jsxs as C } from "react/jsx-runtime";
-import { createContext as P, useContext as h } from "react";
-import { L as b } from "./layer-card-gegkqhkjy65l1ueo.js";
+import { jsx as e, jsxs as B } from "react/jsx-runtime";
+import { createContext as C, useContext as P } from "react";
+import { L as h } from "./layer-card-er4flkcxmzfug8jw.js";
 import { c as x } from "./cn-ct4n7r74mh8y0f48.js";
-import { r as A } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
-import { u as N } from "./portal-provider-hwmkdmkpvct0cb76.js";
-import { ap as R, aq as k, ar as z, as as L, at as d, au as m, av as p, aw as u, ax as D, ay as f } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
+import { r as b } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+import { u as A } from "./portal-provider-hwmkdmkpvct0cb76.js";
+import { aq as N, ar as R, as as z, at as L, au as d, av as m, aw as p, ax as u, ay as D, az as f } from "./vendor-base-ui-knphx7dts1vm1x37.js";
 const O = {
   size: {
     base: {
@@ -25,35 +25,35 @@ const O = {
       description: "Extra large dialog for detailed views"
     }
   }
-}, l = {
+}, s = {
   size: "base",
   role: "dialog"
-}, g = P("dialog");
-function s() {
-  return h(g);
+}, g = C("dialog");
+function l() {
+  return P(g);
 }
 function _({
-  size: a = l.size
+  size: a = s.size
 } = {}) {
   return x(
     // Base styles
     "shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
     // Apply size from KUMO_DIALOG_VARIANTS
-    A(O.size, a, l.size).classes
+    b(O.size, a, s.size).classes
   );
 }
 function $({
   className: a,
   children: o,
   style: i,
-  size: t = l.size,
+  size: t = s.size,
   container: n
 }) {
-  const r = s(), c = N();
-  return /* @__PURE__ */ C(r === "alertdialog" ? u : u, { container: n ?? c ?? void 0, children: [
+  const r = l(), c = A();
+  return /* @__PURE__ */ B(r === "alertdialog" ? u : u, { container: n ?? c ?? void 0, children: [
     /* @__PURE__ */ e(r === "alertdialog" ? D : D, { className: "fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
     /* @__PURE__ */ e(
-      b,
+      h,
       {
         render: /* @__PURE__ */ e(r === "alertdialog" ? f : f, {}),
         className: x(_({ size: t }), a),
@@ -71,48 +71,64 @@ function $({
 function y(a) {
   if (a.role === "alertdialog") {
     const { children: n, role: r, ...c } = a;
-    return /* @__PURE__ */ e(g.Provider, { value: r, children: /* @__PURE__ */ e(R, { ...c, children: n }) });
+    return /* @__PURE__ */ e(g.Provider, { value: r, children: /* @__PURE__ */ e(N, { ...c, children: n }) });
   }
   const {
     children: o,
-    role: i = l.role,
+    role: i = s.role,
     ...t
   } = a;
-  return /* @__PURE__ */ e(g.Provider, { value: i, children: /* @__PURE__ */ e(k, { ...t, children: o }) });
+  return /* @__PURE__ */ e(g.Provider, { value: i, children: /* @__PURE__ */ e(R, { ...t, children: o }) });
 }
 y.displayName = "Dialog.Root";
 function w({ children: a, ...o }) {
-  return s() === "alertdialog" ? /* @__PURE__ */ e(z, { ...o, children: a }) : /* @__PURE__ */ e(L, { ...o, children: a });
+  return l() === "alertdialog" ? /* @__PURE__ */ e(
+    z,
+    {
+      "data-kumo-component": "Dialog",
+      "data-kumo-part": "trigger",
+      ...o,
+      children: a
+    }
+  ) : /* @__PURE__ */ e(
+    L,
+    {
+      "data-kumo-component": "Dialog",
+      "data-kumo-part": "trigger",
+      ...o,
+      children: a
+    }
+  );
 }
 w.displayName = "Dialog.Trigger";
 function T({ className: a, ...o }) {
-  const t = s() === "alertdialog" ? d : d;
+  const t = l() === "alertdialog" ? d : d;
   return /* @__PURE__ */ e(t, { className: a, ...o });
 }
 T.displayName = "Dialog.Title";
-function v({ className: a, ...o }) {
-  const t = s() === "alertdialog" ? m : m;
+function k({ className: a, ...o }) {
+  const t = l() === "alertdialog" ? m : m;
   return /* @__PURE__ */ e(t, { className: a, ...o });
 }
-v.displayName = "Dialog.Description";
-function B({ children: a, ...o }) {
-  const t = s() === "alertdialog" ? p : p;
-  return /* @__PURE__ */ e(t, { ...o, children: a });
+k.displayName = "Dialog.Description";
+function v({ children: a, ...o }) {
+  const t = l() === "alertdialog" ? p : p;
+  return /* @__PURE__ */ e(t, { "data-kumo-component": "Dialog", "data-kumo-part": "close", ...o, children: a });
 }
-B.displayName = "Dialog.Close";
+v.displayName = "Dialog.Close";
 const H = Object.assign($, {
   Root: y,
   Trigger: w,
   Title: T,
-  Description: v,
-  Close: B
+  Description: k,
+  Close: v
 });
 export {
   H as D,
   y as a,
   w as b,
   T as c,
-  v as d,
-  B as e
+  k as d,
+  v as e
 };
-//# sourceMappingURL=dialog-gndju3sqg1lmpb3f.js.map
+//# sourceMappingURL=dialog-my9fioafdstq50mi.js.map

package/dist/chunks/{dialog-gndju3sqg1lmpb3f.js.map → dialog-my9fioafdstq50mi.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog-gndju3sqg1lmpb3f.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { LayerCard } from \"../layer-card\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. /\nexport const KUMO_DIALOG_VARIANTS = {\n size: {\n base: {\n classes: \"sm:min-w-96\",\n description: \"Default dialog width\",\n },\n sm: {\n classes: \"min-w-72\",\n description: \"Small dialog for simple confirmations\",\n },\n lg: {\n classes: \"min-w-[32rem]\",\n description: \"Large dialog for complex content\",\n },\n xl: {\n classes: \"min-w-[48rem]\",\n description: \"Extra large dialog for detailed views\",\n },\n },\n role: {\n dialog: {\n classes: \"\",\n description: \"Standard dialog for general-purpose modals\",\n },\n alertdialog: {\n classes: \"\",\n description:\n \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n },\n },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n size: \"base\",\n role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n dimensions: {\n sm: {\n width: 350,\n titleSize: 20,\n descSize: 16,\n padding: 16,\n gap: 8,\n buttonSize: \"sm\",\n },\n base: {\n width: 384,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n lg: {\n width: 512,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n xl: {\n width: 768,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n },\n baseTokens: {\n background: \"color-surface\",\n text: \"text-color-surface\",\n borderRadius: 12,\n shadow: \"shadow-m\",\n },\n backdrop: {\n background: \"color-surface-secondary\",\n opacity: 0.8,\n },\n header: {\n title: { fontWeight: 600, color: \"text-color-surface\" },\n closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n },\n description: {\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n buttons: {\n primary: { background: \"color-primary\", text: \"white\" },\n secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n /\n Dialog width.\n * - `\"sm\"` — Small (min 288px) for simple confirmations\n * - `\"base\"` — Default (min 384px)\n * - `\"lg\"` — Large (min 512px) for complex content\n * - `\"xl\"` — Extra large (min 768px) for detailed views\n * @default \"base\"\n /\n size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n // Apply size from KUMO_DIALOG_VARIANTS\n resolveVariant(KUMO_DIALOG_VARIANTS.size, size, KUMO_DIALOG_DEFAULT_VARIANTS.size).classes,\n );\n}\n\n/\n Dialog component props — the modal content panel.\n \n @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <Dialog.Description>Are you sure?</Dialog.Description>\n * <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n /\nexport type DialogProps = KumoDialogVariantsProps & {\n /* Additional CSS classes merged via `cn()`. /\n className?: string;\n /* Dialog content (typically Title, Description, Close, and action buttons). /\n children: ReactNode;\n /* Inline styles. /\n style?: CSSProperties;\n /\n Container element for the portal. Use this to render the dialog inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n /\n container?: PortalContainer;\n};\n\n/\n Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n \n @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Item</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n \n @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n * <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Project?</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n /\nfunction DialogContent({\n className,\n children,\n style,\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n container: containerProp,\n}: DialogProps) {\n const role = useDialogRole();\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n const BasePortal =\n role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n const BaseBackdrop =\n role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n const BasePopup =\n role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n return (\n <BasePortal container={container}>\n <BaseBackdrop className=\"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <LayerCard\n render={<BasePopup />}\n className={cn(dialogVariants({ size }), className)}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n \"--tw-shadow\":\n \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </LayerCard>\n </BasePortal>\n );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\ntype BaseAlertDialogRootProps = ComponentPropsWithoutRef<\n typeof AlertDialogBase.Root\n>;\n\ntype StandardDialogRootProps = BaseDialogRootProps & {\n /\n The ARIA role for the dialog.\n * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n \n Use `role=\"alertdialog\"` for:\n * - Destructive actions (delete, discard, remove)\n * - Confirmation dialogs requiring explicit user acknowledgment\n * - Actions that cannot be undone\n \n @default \"dialog\"\n */\n role?: \"dialog\";\n};\n\ntype AlertDialogRootProps = BaseAlertDialogRootProps & {\n role: \"alertdialog\";\n};\n\nexport type DialogRootProps = StandardDialogRootProps \| AlertDialogRootProps;\n\nfunction DialogRoot(props: DialogRootProps) {\n if (props.role === \"alertdialog\") {\n const { children, role, ...rootProps } = props;\n\n return (\n <DialogRoleContext.Provider value={role}>\n <AlertDialogBase.Root {...rootProps}>{children}</AlertDialogBase.Root>\n </DialogRoleContext.Provider>\n );\n }\n\n const {\n children,\n role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n ...rootProps\n } = props;\n\n return (\n <DialogRoleContext.Provider value={role}>\n <DialogBase.Root {...rootProps}>{children}</DialogBase.Root>\n </DialogRoleContext.Provider>\n );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n typeof DialogBase.Trigger\n>;\ntype BaseAlertDialogTriggerProps = ComponentPropsWithoutRef<\n typeof AlertDialogBase.Trigger\n>;\n\nexport type DialogTriggerProps =\n \| BaseDialogTriggerProps\n \| BaseAlertDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n const role = useDialogRole();\n\n if (role === \"alertdialog\") {\n return (\n <AlertDialogBase.Trigger {...(props as BaseAlertDialogTriggerProps)}>\n {children}\n </AlertDialogBase.Trigger>\n );\n }\n\n return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n const role = useDialogRole();\n const BaseTitle =\n role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n const role = useDialogRole();\n const BaseDescription =\n role === \"alertdialog\"\n ? AlertDialogBase.Description\n : DialogBase.Description;\n return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n const role = useDialogRole();\n const BaseClose =\n role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n return <BaseClose {...props}>{children}</BaseClose>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n});\n\nexport {\n Dialog,\n DialogRoot,\n DialogTrigger,\n DialogTitle,\n DialogDescription,\n DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","resolveVariant","DialogContent","className","children","style","containerProp","role","contextContainer","usePortalContainer","jsxs","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","LayerCard","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","rootProps","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}
1	+ {"version":3,"file":"dialog-my9fioafdstq50mi.js","sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n} from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { AlertDialog as AlertDialogBase } from \"@base-ui/react/alert-dialog\";\nimport { LayerCard } from \"../layer-card\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. /\nexport const KUMO_DIALOG_VARIANTS = {\n size: {\n base: {\n classes: \"sm:min-w-96\",\n description: \"Default dialog width\",\n },\n sm: {\n classes: \"min-w-72\",\n description: \"Small dialog for simple confirmations\",\n },\n lg: {\n classes: \"min-w-[32rem]\",\n description: \"Large dialog for complex content\",\n },\n xl: {\n classes: \"min-w-[48rem]\",\n description: \"Extra large dialog for detailed views\",\n },\n },\n role: {\n dialog: {\n classes: \"\",\n description: \"Standard dialog for general-purpose modals\",\n },\n alertdialog: {\n classes: \"\",\n description:\n \"Alert dialog for confirmation flows requiring explicit user acknowledgment\",\n },\n },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n size: \"base\",\n role: \"dialog\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n dimensions: {\n sm: {\n width: 350,\n titleSize: 20,\n descSize: 16,\n padding: 16,\n gap: 8,\n buttonSize: \"sm\",\n },\n base: {\n width: 384,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n lg: {\n width: 512,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n xl: {\n width: 768,\n titleSize: 20,\n descSize: 16,\n padding: 24,\n gap: 16,\n buttonSize: \"base\",\n },\n },\n baseTokens: {\n background: \"color-surface\",\n text: \"text-color-surface\",\n borderRadius: 12,\n shadow: \"shadow-m\",\n },\n backdrop: {\n background: \"color-surface-secondary\",\n opacity: 0.8,\n },\n header: {\n title: { fontWeight: 600, color: \"text-color-surface\" },\n closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n },\n description: {\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n buttons: {\n primary: { background: \"color-primary\", text: \"white\" },\n secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\nexport type KumoDialogRole = keyof typeof KUMO_DIALOG_VARIANTS.role;\n\nexport interface KumoDialogVariantsProps {\n /\n Dialog width.\n * - `\"sm\"` — Small (min 288px) for simple confirmations\n * - `\"base\"` — Default (min 384px)\n * - `\"lg\"` — Large (min 512px) for complex content\n * - `\"xl\"` — Extra large (min 768px) for detailed views\n * @default \"base\"\n /\n size?: KumoDialogSize;\n}\n\n// ============================================================================\n// Dialog Role Context\n// ============================================================================\n\nconst DialogRoleContext = createContext<KumoDialogRole>(\"dialog\");\n\nfunction useDialogRole() {\n return useContext(DialogRoleContext);\n}\n\nexport function dialogVariants({\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n return cn(\n // Base styles\n \"shadow-m ring ring-kumo-line fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n // Apply size from KUMO_DIALOG_VARIANTS\n resolveVariant(KUMO_DIALOG_VARIANTS.size, size, KUMO_DIALOG_DEFAULT_VARIANTS.size).classes,\n );\n}\n\n/\n Dialog component props — the modal content panel.\n \n @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Confirm Action</Dialog.Title>\n * <Dialog.Description>Are you sure?</Dialog.Description>\n * <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n /\nexport type DialogProps = KumoDialogVariantsProps & {\n /* Additional CSS classes merged via `cn()`. /\n className?: string;\n /* Dialog content (typically Title, Description, Close, and action buttons). /\n children: ReactNode;\n /* Inline styles. /\n style?: CSSProperties;\n /\n Container element for the portal. Use this to render the dialog inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n /\n container?: PortalContainer;\n};\n\n/\n Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n \n @example\n * ```tsx\n * <Dialog.Root>\n * <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Item</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n \n @example Alert Dialog for destructive actions\n * ```tsx\n * <Dialog.Root role=\"alertdialog\">\n * <Dialog.Trigger render={(p) => <Button variant=\"destructive\" {...p}>Delete Project</Button>} />\n * <Dialog className=\"p-8\">\n * <Dialog.Title>Delete Project?</Dialog.Title>\n * <Dialog.Description>This action cannot be undone.</Dialog.Description>\n * <Dialog.Close render={(p) => <Button variant=\"secondary\" {...p}>Cancel</Button>} />\n * <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n * </Dialog>\n * </Dialog.Root>\n * ```\n /\nfunction DialogContent({\n className,\n children,\n style,\n size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n container: containerProp,\n}: DialogProps) {\n const role = useDialogRole();\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n const BasePortal =\n role === \"alertdialog\" ? AlertDialogBase.Portal : DialogBase.Portal;\n const BaseBackdrop =\n role === \"alertdialog\" ? AlertDialogBase.Backdrop : DialogBase.Backdrop;\n const BasePopup =\n role === \"alertdialog\" ? AlertDialogBase.Popup : DialogBase.Popup;\n\n return (\n <BasePortal container={container}>\n <BaseBackdrop className=\"fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n <LayerCard\n render={<BasePopup />}\n className={cn(dialogVariants({ size }), className)}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n \"--tw-shadow\":\n \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </LayerCard>\n </BasePortal>\n );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\ntype BaseAlertDialogRootProps = ComponentPropsWithoutRef<\n typeof AlertDialogBase.Root\n>;\n\ntype StandardDialogRootProps = BaseDialogRootProps & {\n /\n The ARIA role for the dialog.\n * - `\"dialog\"` — Standard dialog for general-purpose modals. Dismissible via outside click by default.\n * - `\"alertdialog\"` — Alert dialog for destructive or confirmation flows. Not dismissible via outside click.\n \n Use `role=\"alertdialog\"` for:\n * - Destructive actions (delete, discard, remove)\n * - Confirmation dialogs requiring explicit user acknowledgment\n * - Actions that cannot be undone\n \n @default \"dialog\"\n */\n role?: \"dialog\";\n};\n\ntype AlertDialogRootProps = BaseAlertDialogRootProps & {\n role: \"alertdialog\";\n};\n\nexport type DialogRootProps = StandardDialogRootProps \| AlertDialogRootProps;\n\nfunction DialogRoot(props: DialogRootProps) {\n if (props.role === \"alertdialog\") {\n const { children, role, ...rootProps } = props;\n\n return (\n <DialogRoleContext.Provider value={role}>\n <AlertDialogBase.Root {...rootProps}>{children}</AlertDialogBase.Root>\n </DialogRoleContext.Provider>\n );\n }\n\n const {\n children,\n role = KUMO_DIALOG_DEFAULT_VARIANTS.role,\n ...rootProps\n } = props;\n\n return (\n <DialogRoleContext.Provider value={role}>\n <DialogBase.Root {...rootProps}>{children}</DialogBase.Root>\n </DialogRoleContext.Provider>\n );\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n typeof DialogBase.Trigger\n>;\ntype BaseAlertDialogTriggerProps = ComponentPropsWithoutRef<\n typeof AlertDialogBase.Trigger\n>;\n\nexport type DialogTriggerProps =\n \| BaseDialogTriggerProps\n \| BaseAlertDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n const role = useDialogRole();\n\n if (role === \"alertdialog\") {\n return (\n <AlertDialogBase.Trigger\n data-kumo-component=\"Dialog\"\n data-kumo-part=\"trigger\"\n {...(props as BaseAlertDialogTriggerProps)}\n >\n {children}\n </AlertDialogBase.Trigger>\n );\n }\n\n return (\n <DialogBase.Trigger\n data-kumo-component=\"Dialog\"\n data-kumo-part=\"trigger\"\n {...props}\n >\n {children}\n </DialogBase.Trigger>\n );\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n const role = useDialogRole();\n const BaseTitle =\n role === \"alertdialog\" ? AlertDialogBase.Title : DialogBase.Title;\n return <BaseTitle className={className} {...props} />;\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n const role = useDialogRole();\n const BaseDescription =\n role === \"alertdialog\"\n ? AlertDialogBase.Description\n : DialogBase.Description;\n return <BaseDescription className={className} {...props} />;\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n const role = useDialogRole();\n const BaseClose =\n role === \"alertdialog\" ? AlertDialogBase.Close : DialogBase.Close;\n return (\n <BaseClose data-kumo-component=\"Dialog\" data-kumo-part=\"close\" {...props}>\n {children}\n </BaseClose>\n );\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Title: DialogTitle,\n Description: DialogDescription,\n Close: DialogClose,\n});\n\nexport {\n Dialog,\n DialogRoot,\n DialogTrigger,\n DialogTitle,\n DialogDescription,\n DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","DialogRoleContext","createContext","useDialogRole","useContext","dialogVariants","size","cn","resolveVariant","DialogContent","className","children","style","containerProp","role","contextContainer","usePortalContainer","jsxs","AlertDialogBase.Portal","DialogBase.Portal","jsx","AlertDialogBase.Backdrop","DialogBase.Backdrop","LayerCard","AlertDialogBase.Popup","DialogBase.Popup","DialogRoot","props","rootProps","AlertDialogBase.Root","DialogBase.Root","DialogTrigger","AlertDialogBase.Trigger","DialogBase.Trigger","DialogTitle","BaseTitle","AlertDialogBase.Title","DialogBase.Title","DialogDescription","BaseDescription","AlertDialogBase.Description","DialogBase.Description","DialogClose","BaseClose","AlertDialogBase.Close","DialogBase.Close","Dialog"],"mappings":"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"}