@mastra/playground-ui 35.0.0 → 35.1.0-alpha.1

package/dist/combobox-DvRTz5eL.js

@@ -0,0 +1,223 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { ChevronsUpDown, Search, Check } from 'lucide-react';
+import * as React from 'react';
+import { c as cva } from './index-CsyK0ihk.js';
+import { b as buttonVariants } from './Button-DoOEJwa_.js';
+import { b as controlTriggerOpenState } from './control-size-BdDLgGX4.js';
+import { t as transitions } from './transitions-tFfqxz40.js';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { u as usePortalContainer } from './portal-container-BlQ6JKob.js';
+
+function normalizeComboboxVariant(variant) {
+  return variant === "link" ? "ghost" : variant;
+}
+function comboboxTriggerClass({
+  variant,
+  size,
+  error,
+  className
+}) {
+  const visualVariant = normalizeComboboxVariant(variant);
+  return cn(
+    buttonVariants({ variant: visualVariant, size }),
+    // Fill the field and push the value left / chevron right (Button's base
+    // centers its content with `justify-center`).
+    "w-full min-w-32 justify-between",
+    // Read as "active" while the popup is open, per variant (see map above).
+    controlTriggerOpenState[visualVariant],
+    "data-[placeholder]:text-neutral3",
+    error && "border-error hover:border-error focus-visible:border-error",
+    className
+  );
+}
+const comboboxItemClass = cva(
+  cn(
+    "relative flex cursor-pointer select-none items-center rounded-md",
+    "py-1.5 min-h-8",
+    "text-ui-smd leading-ui-sm text-neutral4",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors,
+    "data-highlighted:bg-surface4 data-highlighted:text-neutral6",
+    "data-selected:text-neutral6"
+  ),
+  {
+    variants: {
+      multiple: {
+        false: "gap-2 pl-2.5 pr-2",
+        true: "gap-2 pl-2.5 pr-2"
+      }
+    },
+    defaultVariants: {
+      multiple: false
+    }
+  }
+);
+const comboboxStyles = {
+  /** Root wrapper */
+  root: "flex flex-col gap-1.5",
+  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */
+  chevron: "ml-2 h-4 w-4 shrink-0 opacity-60",
+  /** Placeholder text color */
+  placeholder: "text-neutral3",
+  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */
+  popup: cn(
+    "min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4",
+    "shadow-dialog",
+    "origin-(--transform-origin)",
+    "transition-[transform,scale,opacity] duration-150 ease-out",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0"
+  ),
+  /** Positioner */
+  positioner: "z-50 pointer-events-auto",
+  /** Search input container — borderless top section, hairline divider below. */
+  searchContainer: cn("flex items-center border-b border-border1 px-2.5 py-1.5", transitions.colors),
+  /** Search icon */
+  searchIcon: cn("mr-2 h-3.5 w-3.5 shrink-0 text-neutral3", transitions.colors),
+  /** Search input */
+  searchInput: cn(
+    "flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6",
+    "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+    "outline-none focus:outline-none focus-visible:outline-none",
+    transitions.colors
+  ),
+  /** Empty state */
+  empty: "not-empty:block hidden py-4 text-center text-ui-smd text-neutral3",
+  /** Options list */
+  list: "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1",
+  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */
+  item: comboboxItemClass({ multiple: false }),
+  /** Multi-select item — same item rhythm with a right-aligned selected check. */
+  itemMulti: comboboxItemClass({ multiple: true }),
+  /** Right-aligned slot grouping end content + selection check. */
+  itemRightSlot: "ml-auto flex items-center gap-2 shrink-0",
+  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */
+  checkContainer: "flex h-4 w-4 shrink-0 items-center justify-center text-neutral6",
+  /** Check icon (single select) */
+  checkIcon: "h-3.5 w-3.5",
+  /** Option label/description wrapper */
+  optionText: "flex flex-col gap-0.5 min-w-0",
+  /** Option label */
+  optionLabel: "truncate",
+  /** Option description */
+  optionDescription: "text-ui-sm text-neutral3 truncate",
+  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */
+  optionEnd: "ml-auto flex items-center shrink-0",
+  /** Error message */
+  error: "text-ui-sm text-accent2"
+};
+
+const EMPTY_VALUES = [];
+const EMPTY_OPTIONS = [];
+function isMultipleCombobox(props) {
+  return props.multiple === true;
+}
+function ComboboxOptionText({ option }) {
+  return /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionText, children: [
+    /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+    option.description && /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+  ] });
+}
+function Combobox(props) {
+  const {
+    options,
+    placeholder = isMultipleCombobox(props) ? "Select options..." : "Select option...",
+    searchPlaceholder = "Search...",
+    emptyText = "No option found.",
+    className,
+    disabled = false,
+    variant = "default",
+    size = "md",
+    open,
+    onOpenChange,
+    container,
+    error
+  } = props;
+  const multiple = isMultipleCombobox(props);
+  const selectedValues = multiple ? props.value ?? EMPTY_VALUES : EMPTY_VALUES;
+  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedOption = multiple ? null : options.find((option) => option.value === props.value) ?? null;
+  const selectedOptions = multiple ? options.filter((option) => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;
+  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+  const resolvedContainer = usePortalContainer(container);
+  const comboboxContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Combobox$1.Trigger, { className: comboboxTriggerClass({ variant, size, error: Boolean(error), className }), children: [
+      multiple ? /* @__PURE__ */ jsx("span", { className: cn("truncate", selectedOptions.length === 0 && comboboxStyles.placeholder), children: triggerText }) : (
+        // Keep truncation off the outer wrapper so start adornments are not clipped.
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+          selectedOption?.start,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: /* @__PURE__ */ jsx(Combobox$1.Value, { placeholder }) })
+        ] })
+      ),
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: comboboxStyles.chevron }) })
+    ] }),
+    /* @__PURE__ */ jsx(Combobox$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: comboboxStyles.popup, children: [
+      /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
+        /* @__PURE__ */ jsx(Search, { className: comboboxStyles.searchIcon }),
+        /* @__PURE__ */ jsx(Combobox$1.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
+      ] }),
+      /* @__PURE__ */ jsx(Combobox$1.Empty, { className: comboboxStyles.empty, children: emptyText }),
+      /* @__PURE__ */ jsx(Combobox$1.List, { className: comboboxStyles.list, children: (option) => {
+        const isSelected = selectedValueSet.has(option.value);
+        return /* @__PURE__ */ jsx(Combobox$1.Item, { value: option, className: comboboxItemClass({ multiple }), children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          option.start,
+          /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+          /* @__PURE__ */ jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+            option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+            /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: isSelected ? /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) : null })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          option.start,
+          /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+          /* @__PURE__ */ jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+            option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+            /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) }) })
+          ] })
+        ] }) }, option.value);
+      } })
+    ] }) }) })
+  ] });
+  if (multiple) {
+    return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+      /* @__PURE__ */ jsx(
+        Combobox$1.Root,
+        {
+          multiple: true,
+          autoHighlight: true,
+          items: options,
+          value: selectedOptions,
+          onValueChange: (items) => props.onValueChange?.((items ?? []).map((item) => item.value)),
+          disabled,
+          open,
+          onOpenChange,
+          children: comboboxContent
+        }
+      ),
+      error && /* @__PURE__ */ jsx("span", { className: comboboxStyles.error, children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+    /* @__PURE__ */ jsx(
+      Combobox$1.Root,
+      {
+        autoHighlight: true,
+        items: options,
+        value: selectedOption,
+        onValueChange: (item) => {
+          if (item) {
+            props.onValueChange?.(item.value);
+          }
+        },
+        disabled,
+        open,
+        onOpenChange,
+        children: comboboxContent
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { className: comboboxStyles.error, children: error })
+  ] });
+}
+
+export { Combobox as C, comboboxStyles as c };
+//# sourceMappingURL=combobox-DvRTz5eL.js.map

package/dist/combobox-DvRTz5eL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-DvRTz5eL.js","sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants } from '../Button/Button';\nimport type { TextButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the same button looks as everywhere,\n * mirroring `SelectTrigger`: `default` (the Button's filled default surface —\n * the default here too), `outline` (bordered, transparent) and `ghost`\n * (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  error,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: TextButtonSize;\n  error?: boolean;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`).\n    'w-full min-w-32 justify-between',\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-neutral3',\n    error && 'border-error hover:border-error focus-visible:border-error',\n    className,\n  );\n}\n\nexport const comboboxItemClass = cva(\n  cn(\n    'relative flex cursor-pointer select-none items-center rounded-md',\n    'py-1.5 min-h-8',\n    'text-ui-smd leading-ui-sm text-neutral4',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n    'data-highlighted:bg-surface4 data-highlighted:text-neutral6',\n    'data-selected:text-neutral6',\n  ),\n  {\n    variants: {\n      multiple: {\n        false: 'gap-2 pl-2.5 pr-2',\n        true: 'gap-2 pl-2.5 pr-2',\n      },\n    },\n    defaultVariants: {\n      multiple: false,\n    },\n  },\n);\n\nexport const comboboxStyles = {\n  /** Root wrapper */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — inherits the variant's text color via currentColor. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 opacity-60',\n\n  /** Placeholder text color */\n  placeholder: 'text-neutral3',\n\n  /** Popup container — concentric with rounded-xl + p-1 (8px items inside 12px container). */\n  popup: cn(\n    'min-w-(--anchor-width) w-max max-w-(--available-width) rounded-xl border border-border1 bg-surface3 text-neutral4',\n    'shadow-dialog',\n    'origin-(--transform-origin)',\n    'transition-[transform,scale,opacity] duration-150 ease-out',\n    'data-starting-style:scale-95 data-starting-style:opacity-0',\n    'data-ending-style:scale-95 data-ending-style:opacity-0',\n  ),\n\n  /** Positioner */\n  positioner: 'z-50 pointer-events-auto',\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: cn('flex items-center border-b border-border1 px-2.5 py-1.5', transitions.colors),\n\n  /** Search icon */\n  searchIcon: cn('mr-2 h-3.5 w-3.5 shrink-0 text-neutral3', transitions.colors),\n\n  /** Search input */\n  searchInput: cn(\n    'flex h-7 w-full rounded-md bg-transparent py-1 text-ui-smd leading-ui-sm text-neutral6',\n    'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n    'outline-none focus:outline-none focus-visible:outline-none',\n    transitions.colors,\n  ),\n\n  /** Empty state */\n  empty: 'not-empty:block hidden py-4 text-center text-ui-smd text-neutral3',\n\n  /** Options list */\n  list: 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden p-1',\n\n  /** Option item base — rounded-md sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, fixed 16x16, shown only when item is selected. */\n  checkContainer: 'flex h-4 w-4 shrink-0 items-center justify-center text-neutral6',\n\n  /** Check icon (single select) */\n  checkIcon: 'h-3.5 w-3.5',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-ui-sm text-neutral3 truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** Error message */\n  error: 'text-ui-sm text-accent2',\n} as const;\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxVariant } from './combobox-styles';\n\nexport type ComboboxOption = {\n  label: string;\n  value: string;\n  description?: string;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n};\n\ntype ComboboxSharedProps = {\n  options: ComboboxOption[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  size?: TextButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n};\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n  multiple: true;\n  value?: readonly string[];\n  onValueChange?: (value: string[]) => void;\n};\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nconst EMPTY_VALUES: string[] = [];\nconst EMPTY_OPTIONS: ComboboxOption[] = [];\n\nfunction isMultipleCombobox(props: ComboboxProps): props is ComboboxMultipleProps {\n  return props.multiple === true;\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className={comboboxStyles.optionText}>\n      <span className={comboboxStyles.optionLabel}>{option.label}</span>\n      {option.description && <span className={comboboxStyles.optionDescription}>{option.description}</span>}\n    </span>\n  );\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    placeholder = isMultipleCombobox(props) ? 'Select options...' : 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No option found.',\n    className,\n    disabled = false,\n    variant = 'default',\n    size = 'md',\n    open,\n    onOpenChange,\n    container,\n    error,\n  } = props;\n  const multiple = isMultipleCombobox(props);\n  const selectedValues = multiple ? (props.value ?? EMPTY_VALUES) : EMPTY_VALUES;\n  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);\n  const selectedOption = multiple ? null : (options.find(option => option.value === props.value) ?? null);\n  const selectedOptions = multiple ? options.filter(option => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n  // Default to the nearest SideDialog/Drawer popup so the list stays\n  // interactive inside a modal drawer; an explicit `container` still wins.\n  const resolvedContainer = usePortalContainer(container);\n\n  const comboboxContent = (\n    <>\n      <BaseCombobox.Trigger className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}>\n        {multiple ? (\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n        ) : (\n          // Keep truncation off the outer wrapper so start adornments are not clipped.\n          <span className=\"flex items-center gap-2 min-w-0 flex-1\">\n            {selectedOption?.start}\n            <span className=\"truncate\">\n              <BaseCombobox.Value placeholder={placeholder} />\n            </span>\n          </span>\n        )}\n        {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n            escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={comboboxStyles.chevron} />\n        </span>\n      </BaseCombobox.Trigger>\n\n      <BaseCombobox.Portal container={resolvedContainer}>\n        <BaseCombobox.Positioner align=\"start\" sideOffset={4} className={comboboxStyles.positioner}>\n          <BaseCombobox.Popup className={comboboxStyles.popup}>\n            <div className={comboboxStyles.searchContainer}>\n              <Search className={comboboxStyles.searchIcon} />\n              <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n            </div>\n            <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n            <BaseCombobox.List className={comboboxStyles.list}>\n              {(option: ComboboxOption) => {\n                const isSelected = selectedValueSet.has(option.value);\n\n                return (\n                  <BaseCombobox.Item key={option.value} value={option} className={comboboxItemClass({ multiple })}>\n                    {multiple ? (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            {isSelected ? <Check className={comboboxStyles.checkIcon} /> : null}\n                          </span>\n                        </span>\n                      </>\n                    ) : (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            <BaseCombobox.ItemIndicator>\n                              <Check className={comboboxStyles.checkIcon} />\n                            </BaseCombobox.ItemIndicator>\n                          </span>\n                        </span>\n                      </>\n                    )}\n                  </BaseCombobox.Item>\n                );\n              }}\n            </BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </>\n  );\n\n  if (multiple) {\n    return (\n      <div className={comboboxStyles.root}>\n        <BaseCombobox.Root\n          multiple\n          autoHighlight\n          items={options}\n          value={selectedOptions}\n          onValueChange={items => props.onValueChange?.((items ?? []).map(item => item.value))}\n          disabled={disabled}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          {comboboxContent}\n        </BaseCombobox.Root>\n        {error && <span className={comboboxStyles.error}>{error}</span>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        autoHighlight\n        items={options}\n        value={selectedOption}\n        onValueChange={item => {\n          if (item) {\n            props.onValueChange?.(item.value);\n          }\n        }}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        {comboboxContent}\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["BaseCombobox"],"mappings":"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"}

package/dist/{command-DPEUOKZw.js → command-CkFCH229.js}

@@ -2,7 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Command as Command$1 } from 'cmdk';
 import { Search } from 'lucide-react';
 import * as React from 'react';
-import { D as Dialog, c as DialogContent, i as DialogTitle, d as DialogDescription } from './dialog-CSSfcjSX.js';
+import { D as Dialog, c as DialogContent, i as DialogTitle, d as DialogDescription } from './dialog-DTLHod4X.js';
+import { S as ScrollArea } from './scroll-area-DjZ6nTm5.js';
 import { t as transitions } from './transitions-tFfqxz40.js';
 import { c as cn } from './utils-CzYGxqbG.js';
 
@@ -19,6 +20,10 @@ const CommandDialog = ({
   children,
   title = "Command Palette",
   description = "Search for commands and actions",
+  contentClassName,
+  commandClassName,
+  showOverlay = false,
+  overlayClassName,
   ...props
 }) => {
   const filter = React.useCallback((value, search) => {
@@ -29,55 +34,93 @@ const CommandDialog = ({
     return matches ? 1 : 0;
   }, []);
   const handleKeyDown = React.useCallback((e) => {
+    if (e.key === "Escape") return;
     e.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(DialogContent, { className: "overflow-hidden p-0", children: [
-    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
-    /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
-    /* @__PURE__ */ jsx(
-      Command,
-      {
-        filter,
-        onKeyDown: handleKeyDown,
-        className: cn(
-          "**:[[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-neutral3",
-          "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2",
-          "[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5",
-          "**:[[cmdk-input]]:h-12",
-          "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3",
-          "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
-        ),
-        children
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showOverlay,
+      overlayClassName,
+      className: cn("overflow-hidden p-0", contentClassName),
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
+        /* @__PURE__ */ jsx(
+          Command,
+          {
+            filter,
+            onKeyDown: handleKeyDown,
+            className: cn(
+              "**:[[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-neutral3",
+              "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2",
+              "[&_[data-slot=command-input-wrapper]_svg]:h-5 [&_[data-slot=command-input-wrapper]_svg]:w-5",
+              "**:[[cmdk-input]]:h-12",
+              "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3",
+              "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+              commandClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  ) });
 };
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center border-b border-border1 px-3", transitions.colors), "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx(Search, { className: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors) }),
-  /* @__PURE__ */ jsx(
-    Command$1.Input,
+const CommandInput = React.forwardRef(
+  ({ className, rightSlot, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
     {
-      ref,
-      className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6",
-        "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
-        "outline-none focus:outline-none focus-visible:outline-none",
-        transitions.colors,
-        className
-      ),
-      ...props
+      "data-slot": "command-input-wrapper",
+      className: cn("flex items-center border-b border-border1 px-3", transitions.colors, wrapperClassName),
+      children: [
+        /* @__PURE__ */ jsx(Search, { className: cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.colors) }),
+        /* @__PURE__ */ jsx(
+          Command$1.Input,
+          {
+            ref,
+            className: cn(
+              "flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6",
+              "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+              "outline-none focus:outline-none focus-visible:outline-none",
+              transitions.colors,
+              className
+            ),
+            ...props
+          }
+        ),
+        rightSlot && /* @__PURE__ */ jsx("div", { "data-slot": "command-input-right-slot", className: "ml-2 flex shrink-0 items-center text-neutral3", children: rightSlot })
+      ]
     }
   )
-] }));
+);
 CommandInput.displayName = Command$1.Input.displayName;
-const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.List,
-  {
-    ref,
-    className: cn("max-h-dropdown-max-height overflow-y-auto overflow-x-hidden", className),
-    ...props
+const CommandList = React.forwardRef(
+  ({ className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props }, ref) => {
+    const list = /* @__PURE__ */ jsx(
+      Command$1.List,
+      {
+        ref,
+        className: cn(
+          "outline-none focus:outline-none focus-visible:outline-none",
+          scrollArea ? "overflow-visible" : "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden",
+          className
+        ),
+        ...props
+      }
+    );
+    if (!scrollArea) return list;
+    return /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        className: cn("min-h-0", scrollAreaClassName),
+        viewPortClassName: scrollAreaViewportClassName,
+        mask: scrollAreaMask,
+        children: list
+      }
+    );
   }
-));
+);
 CommandList.displayName = Command$1.List.displayName;
 const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-6 text-center text-ui-smd text-neutral3", ...props }));
 CommandEmpty.displayName = Command$1.Empty.displayName;
@@ -119,4 +162,4 @@ const CommandShortcut = ({ className, ...props }) => {
 CommandShortcut.displayName = "CommandShortcut";
 
 export { Command as C, CommandDialog as a, CommandEmpty as b, CommandGroup as c, CommandInput as d, CommandItem as e, CommandList as f, CommandSeparator as g, CommandShortcut as h };
-//# sourceMappingURL=command-DPEUOKZw.js.map
+//# sourceMappingURL=command-CkFCH229.js.map

package/dist/command-CkFCH229.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-CkFCH229.js","sources":["../src/ds/components/Command/command.tsx"],"sourcesContent":["import { Command as CommandPrimitive } from 'cmdk';\nimport { Search } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ds/components/Dialog';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport type { ScrollAreaMask } from '@/ds/components/ScrollArea';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn('flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface3 text-neutral4', className)}\n    {...props}\n  />\n));\nCommand.displayName = CommandPrimitive.displayName;\n\ntype CommandDialogProps = Omit<React.ComponentPropsWithoutRef<typeof Dialog>, 'children'> & {\n  children?: React.ReactNode;\n  title?: string;\n  description?: string;\n  contentClassName?: string;\n  commandClassName?: string;\n  showOverlay?: boolean;\n  overlayClassName?: string;\n};\n\nconst CommandDialog = ({\n  children,\n  title = 'Command Palette',\n  description = 'Search for commands and actions',\n  contentClassName,\n  commandClassName,\n  showOverlay = false,\n  overlayClassName,\n  ...props\n}: CommandDialogProps) => {\n  // Custom filter that preserves DOM order by returning 1 for all matches\n  // This prevents cmdk from reordering items by match score\n  const filter = React.useCallback((value: string, search: string) => {\n    const normalizedValue = value.toLowerCase();\n    const normalizedSearch = search.toLowerCase();\n    const searchTerms = normalizedSearch.split(/\\s+/).filter(Boolean);\n\n    // All search terms must be found in the value\n    const matches = searchTerms.every(term => normalizedValue.includes(term));\n    return matches ? 1 : 0;\n  }, []);\n\n  // Stop propagation to prevent keyboard events from reaching\n  // global document-level listeners (e.g., table keyboard nav)\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') return;\n\n    e.stopPropagation();\n  }, []);\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        showOverlay={showOverlay}\n        overlayClassName={overlayClassName}\n        className={cn('overflow-hidden p-0', contentClassName)}\n      >\n        <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command\n          filter={filter}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            '**:[[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-neutral3',\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2',\n            '[&_[data-slot=command-input-wrapper]_svg]:h-5 [&_[data-slot=command-input-wrapper]_svg]:w-5',\n            '**:[[cmdk-input]]:h-12',\n            '**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3',\n            '[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',\n            commandClassName,\n          )}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\ntype CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {\n  rightSlot?: React.ReactNode;\n  wrapperClassName?: string;\n};\n\nconst CommandInput = React.forwardRef<React.ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(\n  ({ className, rightSlot, wrapperClassName, ...props }, ref) => (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className={cn('flex items-center border-b border-border1 px-3', transitions.colors, wrapperClassName)}\n    >\n      <Search className={cn('mr-2 h-4 w-4 shrink-0 text-neutral3', transitions.colors)} />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6',\n          'placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50',\n          'outline-none focus:outline-none focus-visible:outline-none',\n          transitions.colors,\n          className,\n        )}\n        {...props}\n      />\n      {rightSlot && (\n        <div data-slot=\"command-input-right-slot\" className=\"ml-2 flex shrink-0 items-center text-neutral3\">\n          {rightSlot}\n        </div>\n      )}\n    </div>\n  ),\n);\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {\n  scrollArea?: boolean;\n  scrollAreaClassName?: string;\n  scrollAreaViewportClassName?: string;\n  scrollAreaMask?: ScrollAreaMask;\n};\n\nconst CommandList = React.forwardRef<React.ElementRef<typeof CommandPrimitive.List>, CommandListProps>(\n  (\n    { className, scrollArea = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props },\n    ref,\n  ) => {\n    const list = (\n      <CommandPrimitive.List\n        ref={ref}\n        className={cn(\n          'outline-none focus:outline-none focus-visible:outline-none',\n          scrollArea ? 'overflow-visible' : 'max-h-dropdown-max-height overflow-y-auto overflow-x-hidden',\n          className,\n        )}\n        {...props}\n      />\n    );\n\n    if (!scrollArea) return list;\n\n    return (\n      <ScrollArea\n        className={cn('min-h-0', scrollAreaClassName)}\n        viewPortClassName={scrollAreaViewportClassName}\n        mask={scrollAreaMask}\n      >\n        {list}\n      </ScrollArea>\n    );\n  },\n);\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-ui-smd text-neutral3\" {...props} />\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      'overflow-hidden p-1 text-neutral4',\n      '**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:pt-1.5 **:[[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-ui-xs [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-neutral3',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border1', className)} {...props} />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      'relative flex cursor-pointer select-none items-center gap-2.5 rounded-lg px-2 py-1.5 text-ui-smd leading-ui-sm text-neutral4',\n      'outline-none focus:outline-none focus-visible:outline-none',\n      transitions.colors,\n      'data-[selected=true]:bg-surface4 data-[selected=true]:text-neutral6',\n      'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-neutral3 data-[selected=true]:[&_svg]:text-neutral6',\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={cn('ml-auto text-ui-xs tabular-nums tracking-wider text-neutral3', className)} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandSeparator,\n  CommandShortcut,\n};\n"],"names":["CommandPrimitive"],"mappings":"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"}

package/dist/{command-D0tQ1Lpz.cjs → command-EI7t_0WS.cjs}

@@ -4,7 +4,8 @@ const jsxRuntime = require('react/jsx-runtime');
 const cmdk = require('cmdk');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const dialog = require('./dialog-46zkb32X.cjs');
+const dialog = require('./dialog-C0gOGKEK.cjs');
+const scrollArea = require('./scroll-area-BtcyzOxO.cjs');
 const transitions = require('./transitions-DpczSjmD.cjs');
 const utils = require('./utils-vA5sWo9W.cjs');
 
@@ -40,6 +41,10 @@ const CommandDialog = ({
   children,
   title = "Command Palette",
   description = "Search for commands and actions",
+  contentClassName,
+  commandClassName,
+  showOverlay = false,
+  overlayClassName,
   ...props
 }) => {
   const filter = React__namespace.useCallback((value, search) => {
@@ -50,55 +55,93 @@ const CommandDialog = ({
     return matches ? 1 : 0;
   }, []);
   const handleKeyDown = React__namespace.useCallback((e) => {
+    if (e.key === "Escape") return;
     e.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "overflow-hidden p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { className: "sr-only", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Command,
-      {
-        filter,
-        onKeyDown: handleKeyDown,
-        className: utils.cn(
-          "**:[[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-neutral3",
-          "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2",
-          "[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5",
-          "**:[[cmdk-input]]:h-12",
-          "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3",
-          "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
-        ),
-        children
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    dialog.DialogContent,
+    {
+      showOverlay,
+      overlayClassName,
+      className: utils.cn("overflow-hidden p-0", contentClassName),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { className: "sr-only", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Command,
+          {
+            filter,
+            onKeyDown: handleKeyDown,
+            className: utils.cn(
+              "**:[[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-neutral3",
+              "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2",
+              "[&_[data-slot=command-input-wrapper]_svg]:h-5 [&_[data-slot=command-input-wrapper]_svg]:w-5",
+              "**:[[cmdk-input]]:h-12",
+              "**:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3",
+              "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+              commandClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  ) });
 };
-const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center border-b border-border1 px-3", transitions.transitions.colors), "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: utils.cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.transitions.colors) }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Input,
+const CommandInput = React__namespace.forwardRef(
+  ({ className, rightSlot, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      ref,
-      className: utils.cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6",
-        "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
-        "outline-none focus:outline-none focus-visible:outline-none",
-        transitions.transitions.colors,
-        className
-      ),
-      ...props
+      "data-slot": "command-input-wrapper",
+      className: utils.cn("flex items-center border-b border-border1 px-3", transitions.transitions.colors, wrapperClassName),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: utils.cn("mr-2 h-4 w-4 shrink-0 text-neutral3", transitions.transitions.colors) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          cmdk.Command.Input,
+          {
+            ref,
+            className: utils.cn(
+              "flex h-10 min-w-0 flex-1 rounded-md bg-transparent py-3 text-ui-smd leading-ui-sm text-neutral6",
+              "placeholder:text-neutral3 disabled:cursor-not-allowed disabled:opacity-50",
+              "outline-none focus:outline-none focus-visible:outline-none",
+              transitions.transitions.colors,
+              className
+            ),
+            ...props
+          }
+        ),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "command-input-right-slot", className: "ml-2 flex shrink-0 items-center text-neutral3", children: rightSlot })
+      ]
     }
   )
-] }));
+);
 CommandInput.displayName = cmdk.Command.Input.displayName;
-const CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  cmdk.Command.List,
-  {
-    ref,
-    className: utils.cn("max-h-dropdown-max-height overflow-y-auto overflow-x-hidden", className),
-    ...props
+const CommandList = React__namespace.forwardRef(
+  ({ className, scrollArea: scrollArea$1 = false, scrollAreaClassName, scrollAreaViewportClassName, scrollAreaMask, ...props }, ref) => {
+    const list = /* @__PURE__ */ jsxRuntime.jsx(
+      cmdk.Command.List,
+      {
+        ref,
+        className: utils.cn(
+          "outline-none focus:outline-none focus-visible:outline-none",
+          scrollArea$1 ? "overflow-visible" : "max-h-dropdown-max-height overflow-y-auto overflow-x-hidden",
+          className
+        ),
+        ...props
+      }
+    );
+    if (!scrollArea$1) return list;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      scrollArea.ScrollArea,
+      {
+        className: utils.cn("min-h-0", scrollAreaClassName),
+        viewPortClassName: scrollAreaViewportClassName,
+        mask: scrollAreaMask,
+        children: list
+      }
+    );
   }
-));
+);
 CommandList.displayName = cmdk.Command.List.displayName;
 const CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { ref, className: "py-6 text-center text-ui-smd text-neutral3", ...props }));
 CommandEmpty.displayName = cmdk.Command.Empty.displayName;
@@ -148,4 +191,4 @@ exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;
 exports.CommandShortcut = CommandShortcut;
-//# sourceMappingURL=command-D0tQ1Lpz.cjs.map
+//# sourceMappingURL=command-EI7t_0WS.cjs.map