@mastra/playground-ui 67.0.0 → 68.0.0-alpha.1

package/dist/{observability-saved-views-CwCii7hh.cjs → observability-saved-views-BAzxxoAr.cjs}

@@ -1,11 +1,11 @@
 const require_utils = require("./utils-uDc1ofX1.cjs");
-const require_Button = require("./Button-YQRflC47.cjs");
+const require_Button = require("./Button-DLcMcuUL.cjs");
 const require_Txt = require("./Txt-BnoSqxKE.cjs");
 const require_input = require("./input-2hRXcZIu.cjs");
 const require_dropdown_menu = require("./dropdown-menu-BETTTPBB.cjs");
 const require_components_Field = require("./components/Field.cjs.js");
 const require_popover = require("./popover-BJqa6Hz6.cjs");
-const require_combobox_parts = require("./combobox-parts-BZVXwbG7.cjs");
+const require_combobox_parts = require("./combobox-parts-ScKcYjMR.cjs");
 const require_domains_observability_saved_views_saved_views_source = require("./domains/observability/saved-views/saved-views-source.cjs.js");
 const require_domains_observability_saved_views_use_hosted_saved_views = require("./domains/observability/saved-views/use-hosted-saved-views.cjs.js");
 const require_domains_observability_components_observability_header_slot = require("./domains/observability/components/observability-header-slot.cjs.js");
@@ -20,7 +20,7 @@ var DEFAULT_ITEM_VALUE = "";
 * actions, and save / reset once the page differs from the view. Driven by the same controller
 * as `SavedViewTabs`.
 */
-function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, "aria-label": ariaLabel = "Views", className }) {
+function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, canCreate = true, "aria-label": ariaLabel = "Views", className }) {
 	const anchorRef = (0, react.useRef)(null);
 	const [renaming, setRenaming] = (0, react.useState)(false);
 	const { draft, activeView } = views;
@@ -101,7 +101,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 							} })
 						]
 					})]
-				}), activeView && !creating && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, {
+				}), activeView && !creating && (editable || canCreate) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dropdown_menu.DropdownMenu.Trigger, {
 					variant: "ghost",
 					size: "icon-sm",
 					tooltip: "View actions",
@@ -114,7 +114,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 							onClick: () => setRenaming(true),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TextCursorInputIcon, { "aria-hidden": true }), "Rename"]
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
+						canCreate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dropdown_menu.DropdownMenu.Item, {
 							onClick: () => views.duplicate(activeView.id),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CopyIcon, { "aria-hidden": true }), "Duplicate"]
 						}),
@@ -126,7 +126,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 					]
 				})] })]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
+			canCreate && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.Popover, {
 				open: creating,
 				onOpenChange: (open) => {
 					if (open) views.create(newViewSettings);
@@ -265,13 +265,14 @@ function ObservabilitySavedViews(props) {
 		...context
 	});
 }
-function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit }) {
+function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit, canCreate = true }) {
 	const headerSlot = require_domains_observability_components_observability_header_slot.useObservabilityHeaderSlot();
 	const views = require_domains_observability_saved_views_use_hosted_saved_views.useHostedSavedViews({
 		page,
 		source,
 		queryKeyScope,
 		canEdit,
+		canCreate,
 		searchParams,
 		setSearchParams,
 		columns,
@@ -288,6 +289,7 @@ function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, def
 		} },
 		describeView: (view) => view.settings.record?.scope === "org" ? "Shared" : void 0,
 		canEdit: (view) => !canEdit || !view.settings.record || canEdit(view.settings.record),
+		canCreate,
 		className
 	});
 	return headerSlot ? (0, react_dom.createPortal)(picker, headerSlot) : picker;
@@ -299,4 +301,4 @@ Object.defineProperty(exports, "ObservabilitySavedViews", {
 	}
 });
 
-//# sourceMappingURL=observability-saved-views-CwCii7hh.cjs.map
+//# sourceMappingURL=observability-saved-views-BAzxxoAr.cjs.map

package/dist/observability-saved-views-BAzxxoAr.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-saved-views-BAzxxoAr.cjs","names":["useRef","useState","cn","Txt","Button","ComboboxRoot","ComboboxTrigger","LayersIcon","ComboboxContent","ComboboxSearch","ComboboxEmpty","ComboboxList","ComboboxItem","ComboboxItemEnd","DropdownMenu","EllipsisIcon","TextCursorInputIcon","CopyIcon","_Fragment","Trash2Icon","Popover","PopoverTrigger","LayersPlusIcon","PopoverContent","Field","Input","FieldError","useSavedViewsSource","useObservabilityHeaderSlot","useHostedSavedViews","createPortal"],"sources":["../src/ds/components/SavedViews/saved-view-picker.tsx","../src/domains/observability/saved-views/observability-saved-views.tsx"],"sourcesContent":["import { CopyIcon, EllipsisIcon, LayersIcon, LayersPlusIcon, TextCursorInputIcon, Trash2Icon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { FormEvent, ReactNode, RefObject } from 'react';\nimport { MAX_SAVED_VIEW_NAME_CHARS } from './saved-view-schema';\nimport type { SavedView } from './saved-view-schema';\nimport type { SavedViewsController } from './use-saved-views';\nimport { Button } from '@/ds/components/Button/Button';\nimport {\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxItemEnd,\n  ComboboxList,\n  ComboboxRoot,\n  ComboboxSearch,\n  ComboboxTrigger,\n} from '@/ds/components/Combobox/combobox-parts';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type SavedViewPickerProps<TSettings> = {\n  views: SavedViewsController<TSettings>;\n  /** Names the page's unfiltered state, e.g. \"All traces\". */\n  defaultLabel: string;\n  newViewSettings: NoInfer<TSettings>;\n  /** Muted text after a view in the list, e.g. \"Shared\". */\n  describeView?: (view: SavedView<TSettings>) => ReactNode;\n  /** Whether a view can be renamed, deleted or overwritten. Others can still be applied and duplicated. */\n  canEdit?: (view: SavedView<TSettings>) => boolean;\n  /** Whether new views can be saved here (save as new view, duplicate). Defaults to true. */\n  canCreate?: boolean;\n  'aria-label'?: string;\n  className?: string;\n};\n\ntype PickerItem = { value: string; label: string; viewId: string | undefined };\n\nconst DEFAULT_ITEM_VALUE = '';\n\n/**\n * A compact saved-views control for a page header: a searchable view picker, the active view's\n * actions, and save / reset once the page differs from the view. Driven by the same controller\n * as `SavedViewTabs`.\n */\nexport function SavedViewPicker<TSettings>({\n  views,\n  defaultLabel,\n  newViewSettings,\n  describeView,\n  canEdit = () => true,\n  canCreate = true,\n  'aria-label': ariaLabel = 'Views',\n  className,\n}: SavedViewPickerProps<TSettings>) {\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [renaming, setRenaming] = useState(false);\n  const { draft, activeView } = views;\n  const creating = draft !== undefined && draft.viewId === undefined;\n  const activeUnsaved = !creating && draft?.viewId !== undefined && views.unsaved;\n  const editable = activeView !== undefined && canEdit(activeView);\n\n  const items: PickerItem[] = [\n    { value: DEFAULT_ITEM_VALUE, label: defaultLabel, viewId: undefined },\n    ...views.views.map(view => ({ value: view.id, label: view.name, viewId: view.id })),\n  ];\n  const selected = items.find(item => item.viewId === activeView?.id) ?? items[0];\n  const viewsById = new Map(views.views.map(view => [view.id, view]));\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex min-w-0 flex-wrap items-center justify-end gap-1.5', className)}\n    >\n      {views.error && !creating && !renaming && (\n        <Txt role=\"alert\" variant=\"caption\" className=\"min-w-0 truncate text-destructive-foreground\">\n          {views.error}\n        </Txt>\n      )}\n      {activeUnsaved && (\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={views.pending} onClick={views.discard}>\n            Reset\n          </Button>\n          {editable && (\n            <Button type=\"button\" variant=\"default\" size=\"sm\" disabled={views.pending} onClick={views.save}>\n              Save changes\n            </Button>\n          )}\n        </div>\n      )}\n      <div ref={anchorRef} className=\"flex min-w-0 items-center gap-0.5\">\n        <ComboboxRoot\n          items={items}\n          value={selected}\n          onValueChange={(item: PickerItem | null) => {\n            if (item) views.select(item.viewId);\n          }}\n          isItemEqualToValue={(item: PickerItem, value: PickerItem) => item.value === value.value}\n          autoHighlight\n        >\n          <ComboboxTrigger\n            size=\"sm\"\n            icon={<LayersIcon />}\n            aria-label={`View: ${selected?.label}${activeUnsaved ? ', unsaved changes' : ''}`}\n            className=\"max-w-60\"\n          >\n            {selected?.label}\n            {activeUnsaved && (\n              <span className=\"ml-1.5 inline-block size-1.5 rounded-full bg-warning-indicator align-middle\" />\n            )}\n          </ComboboxTrigger>\n          <ComboboxContent align=\"end\">\n            <ComboboxSearch placeholder=\"Search views…\" />\n            <ComboboxEmpty>No views found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item: PickerItem) => {\n                const view = item.viewId ? viewsById.get(item.viewId) : undefined;\n                return (\n                  <ComboboxItem key={item.value} value={item}>\n                    <span className=\"truncate\">{item.label}</span>\n                    {view && describeView && <ComboboxItemEnd>{describeView(view)}</ComboboxItemEnd>}\n                  </ComboboxItem>\n                );\n              }}\n            </ComboboxList>\n          </ComboboxContent>\n        </ComboboxRoot>\n        {activeView && !creating && (editable || canCreate) && (\n          <DropdownMenu>\n            <DropdownMenu.Trigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"View actions\" className=\"shrink-0\">\n              <EllipsisIcon />\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"end\">\n              {editable && (\n                <DropdownMenu.Item onClick={() => setRenaming(true)}>\n                  <TextCursorInputIcon aria-hidden />\n                  Rename\n                </DropdownMenu.Item>\n              )}\n              {canCreate && (\n                <DropdownMenu.Item onClick={() => views.duplicate(activeView.id)}>\n                  <CopyIcon aria-hidden />\n                  Duplicate\n                </DropdownMenu.Item>\n              )}\n              {editable && (\n                <>\n                  <DropdownMenu.Separator />\n                  <DropdownMenu.Item variant=\"destructive\" onClick={() => views.remove(activeView.id)}>\n                    <Trash2Icon aria-hidden />\n                    Delete view\n                  </DropdownMenu.Item>\n                </>\n              )}\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        )}\n      </div>\n      {canCreate && (\n        <Popover\n          open={creating}\n          onOpenChange={open => {\n            if (open) views.create(newViewSettings);\n            else views.discard();\n          }}\n        >\n          <PopoverTrigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"Save as new view\" className=\"shrink-0\">\n            <LayersPlusIcon />\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-72\">\n            {creating && (\n              <ViewNameForm\n                title=\"Save as new view\"\n                initialName={draft.name}\n                submitLabel=\"Save view\"\n                error={views.error}\n                pending={views.pending}\n                onNameChange={name => views.change({ name })}\n                onSubmit={() => views.save()}\n                onCancel={views.discard}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n      {activeView && (\n        <RenamePopover\n          open={renaming}\n          anchorRef={anchorRef}\n          name={activeView.name}\n          error={views.error}\n          pending={views.pending}\n          onClose={() => setRenaming(false)}\n          onRename={name => views.rename(activeView.id, name)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction RenamePopover({\n  open,\n  anchorRef,\n  name,\n  error,\n  pending,\n  onClose,\n  onRename,\n}: {\n  open: boolean;\n  anchorRef: RefObject<HTMLDivElement | null>;\n  name: string;\n  error: string | undefined;\n  pending: boolean | undefined;\n  onClose: () => void;\n  onRename: (name: string) => boolean | Promise<boolean>;\n}) {\n  // The name that last failed to save: its error shows until the user types something else.\n  const [failedName, setFailedName] = useState<string>();\n  const [typedName, setTypedName] = useState(name);\n  const close = () => {\n    setFailedName(undefined);\n    setTypedName(name);\n    onClose();\n  };\n  return (\n    <Popover open={open} onOpenChange={next => !next && close()}>\n      <PopoverContent anchor={anchorRef} align=\"end\" className=\"w-72\">\n        {open && (\n          <ViewNameForm\n            title=\"Rename view\"\n            initialName={name}\n            submitLabel=\"Rename\"\n            error={failedName !== undefined && failedName === typedName ? error : undefined}\n            pending={pending}\n            onNameChange={setTypedName}\n            onSubmit={async next => {\n              if (await onRename(next)) close();\n              else setFailedName(next);\n            }}\n            onCancel={close}\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction ViewNameForm({\n  title,\n  initialName,\n  submitLabel,\n  error,\n  pending,\n  onNameChange,\n  onSubmit,\n  onCancel,\n}: {\n  title: string;\n  initialName: string;\n  submitLabel: string;\n  error?: string;\n  pending?: boolean;\n  onNameChange?: (name: string) => void;\n  onSubmit: (name: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [name, setName] = useState(initialName);\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    if (name.trim()) void onSubmit(name);\n  };\n  return (\n    <form className=\"flex flex-col gap-3\" onSubmit={submit}>\n      <Txt as=\"h2\" variant=\"label\">\n        {title}\n      </Txt>\n      <Field invalid={error !== undefined}>\n        <Input\n          aria-label=\"View name\"\n          size=\"sm\"\n          autoFocus\n          onFocus={event => event.currentTarget.select()}\n          maxLength={MAX_SAVED_VIEW_NAME_CHARS}\n          value={name}\n          onChange={event => {\n            setName(event.target.value);\n            onNameChange?.(event.target.value);\n          }}\n        />\n        <FieldError>{error}</FieldError>\n      </Field>\n      <div className=\"flex justify-end gap-1.5\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" variant=\"default\" size=\"sm\" disabled={pending || !name.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n","import type { SavedViewPage } from '@mastra/core/storage';\nimport { createPortal } from 'react-dom';\nimport { useSavedViewsSource } from './saved-views-source';\nimport type { SavedViewsContextValue } from './saved-views-source';\nimport { useHostedSavedViews } from './use-hosted-saved-views';\nimport type { SavedViewColumnsControl } from './use-hosted-saved-views';\nimport { useObservabilityHeaderSlot } from '@/domains/observability/components/observability-header-slot';\nimport { SavedViewPicker } from '@/ds/components/SavedViews/saved-view-picker';\nimport type { SetURLSearchParamsLike } from '@/lib/sort/use-url-sort';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_LABELS: Record<SavedViewPage, string> = {\n  traces: 'All traces',\n  spans: 'All spans',\n  threads: 'All threads',\n  logs: 'All logs',\n};\n\nexport type ObservabilitySavedViewsProps = {\n  page: SavedViewPage;\n  searchParams: URLSearchParams;\n  setSearchParams: SetURLSearchParamsLike;\n  /** The page's column picker (traces, spans, threads), so views save and restore columns. */\n  columns?: SavedViewColumnsControl;\n  /**\n   * The range the page shows when the URL names none, when the host's differs from the page's own\n   * (the same value passed to `useObservabilityListFilters`).\n   */\n  defaultDatePreset?: string;\n  className?: string;\n};\n\n/**\n * The saved views of an observability page: a searchable view picker with save and reset actions.\n * Inside the shared traces / spans / threads header it moves into that header's row. Renders nothing\n * unless a `SavedViewsProvider` above it supplies where views are stored.\n */\nexport function ObservabilitySavedViews(props: ObservabilitySavedViewsProps) {\n  const context = useSavedViewsSource();\n  if (!context) return null;\n  return <HostedSavedViewsBar {...props} {...context} />;\n}\n\nfunction HostedSavedViewsBar({\n  page,\n  searchParams,\n  setSearchParams,\n  columns,\n  defaultDatePreset,\n  className,\n  source,\n  queryKeyScope,\n  canEdit,\n  canCreate = true,\n}: ObservabilitySavedViewsProps & SavedViewsContextValue) {\n  const headerSlot = useObservabilityHeaderSlot();\n  const views = useHostedSavedViews({\n    page,\n    source,\n    queryKeyScope,\n    canEdit,\n    canCreate,\n    searchParams,\n    setSearchParams,\n    columns,\n    defaultDatePreset,\n  });\n\n  const picker = (\n    <SavedViewPicker\n      views={views}\n      defaultLabel={DEFAULT_LABELS[page]}\n      aria-label=\"Saved views\"\n      newViewSettings={{ state: { schemaVersion: 1, page, filters: [] } }}\n      describeView={view => (view.settings.record?.scope === 'org' ? 'Shared' : undefined)}\n      canEdit={view => !canEdit || !view.settings.record || canEdit(view.settings.record)}\n      canCreate={canCreate}\n      className={className}\n    />\n  );\n  return headerSlot ? createPortal(picker, headerSlot) : picker;\n}\n"],"mappings":"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"}

package/dist/{observability-saved-views-Bo5kLN20.js → observability-saved-views-BBam8Fr5.js}

@@ -1,11 +1,11 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { t as Button } from "./Button-Bw1e3ONi.js";
+import { t as Button } from "./Button-CLXTbAY8.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
 import { t as Input } from "./input-0l1uzOBZ.js";
 import { t as DropdownMenu } from "./dropdown-menu-B4jY3J9e.js";
 import { Field, FieldError } from "./components/Field.es.js";
 import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "./popover-CzHvTPk2.js";
-import { _ as ComboboxRoot, b as ComboboxTrigger, g as ComboboxList, o as ComboboxContent, p as ComboboxItemEnd, s as ComboboxEmpty, u as ComboboxItem, v as ComboboxSearch } from "./combobox-parts-W7KRQUsV.js";
+import { _ as ComboboxRoot, b as ComboboxTrigger, g as ComboboxList, o as ComboboxContent, p as ComboboxItemEnd, s as ComboboxEmpty, u as ComboboxItem, v as ComboboxSearch } from "./combobox-parts-C1CugUAU.js";
 import { useSavedViewsSource } from "./domains/observability/saved-views/saved-views-source.es.js";
 import { useHostedSavedViews } from "./domains/observability/saved-views/use-hosted-saved-views.es.js";
 import { useObservabilityHeaderSlot } from "./domains/observability/components/observability-header-slot.es.js";
@@ -20,7 +20,7 @@ var DEFAULT_ITEM_VALUE = "";
 * actions, and save / reset once the page differs from the view. Driven by the same controller
 * as `SavedViewTabs`.
 */
-function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, "aria-label": ariaLabel = "Views", className }) {
+function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, canEdit = () => true, canCreate = true, "aria-label": ariaLabel = "Views", className }) {
 	const anchorRef = useRef(null);
 	const [renaming, setRenaming] = useState(false);
 	const { draft, activeView } = views;
@@ -101,7 +101,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 							} })
 						]
 					})]
-				}), activeView && !creating && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+				}), activeView && !creating && (editable || canCreate) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
 					variant: "ghost",
 					size: "icon-sm",
 					tooltip: "View actions",
@@ -114,7 +114,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 							onClick: () => setRenaming(true),
 							children: [/* @__PURE__ */ jsx(TextCursorInputIcon, { "aria-hidden": true }), "Rename"]
 						}),
-						/* @__PURE__ */ jsxs(DropdownMenu.Item, {
+						canCreate && /* @__PURE__ */ jsxs(DropdownMenu.Item, {
 							onClick: () => views.duplicate(activeView.id),
 							children: [/* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": true }), "Duplicate"]
 						}),
@@ -126,7 +126,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 					]
 				})] })]
 			}),
-			/* @__PURE__ */ jsxs(Popover, {
+			canCreate && /* @__PURE__ */ jsxs(Popover, {
 				open: creating,
 				onOpenChange: (open) => {
 					if (open) views.create(newViewSettings);
@@ -265,13 +265,14 @@ function ObservabilitySavedViews(props) {
 		...context
 	});
 }
-function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit }) {
+function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, defaultDatePreset, className, source, queryKeyScope, canEdit, canCreate = true }) {
 	const headerSlot = useObservabilityHeaderSlot();
 	const views = useHostedSavedViews({
 		page,
 		source,
 		queryKeyScope,
 		canEdit,
+		canCreate,
 		searchParams,
 		setSearchParams,
 		columns,
@@ -288,10 +289,11 @@ function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, def
 		} },
 		describeView: (view) => view.settings.record?.scope === "org" ? "Shared" : void 0,
 		canEdit: (view) => !canEdit || !view.settings.record || canEdit(view.settings.record),
+		canCreate,
 		className
 	});
 	return headerSlot ? createPortal(picker, headerSlot) : picker;
 }
 export { ObservabilitySavedViews as t };
 
-//# sourceMappingURL=observability-saved-views-Bo5kLN20.js.map
+//# sourceMappingURL=observability-saved-views-BBam8Fr5.js.map

package/dist/observability-saved-views-BBam8Fr5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observability-saved-views-BBam8Fr5.js","names":["_Fragment"],"sources":["../src/ds/components/SavedViews/saved-view-picker.tsx","../src/domains/observability/saved-views/observability-saved-views.tsx"],"sourcesContent":["import { CopyIcon, EllipsisIcon, LayersIcon, LayersPlusIcon, TextCursorInputIcon, Trash2Icon } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport type { FormEvent, ReactNode, RefObject } from 'react';\nimport { MAX_SAVED_VIEW_NAME_CHARS } from './saved-view-schema';\nimport type { SavedView } from './saved-view-schema';\nimport type { SavedViewsController } from './use-saved-views';\nimport { Button } from '@/ds/components/Button/Button';\nimport {\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxItemEnd,\n  ComboboxList,\n  ComboboxRoot,\n  ComboboxSearch,\n  ComboboxTrigger,\n} from '@/ds/components/Combobox/combobox-parts';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/ds/components/Popover';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nexport type SavedViewPickerProps<TSettings> = {\n  views: SavedViewsController<TSettings>;\n  /** Names the page's unfiltered state, e.g. \"All traces\". */\n  defaultLabel: string;\n  newViewSettings: NoInfer<TSettings>;\n  /** Muted text after a view in the list, e.g. \"Shared\". */\n  describeView?: (view: SavedView<TSettings>) => ReactNode;\n  /** Whether a view can be renamed, deleted or overwritten. Others can still be applied and duplicated. */\n  canEdit?: (view: SavedView<TSettings>) => boolean;\n  /** Whether new views can be saved here (save as new view, duplicate). Defaults to true. */\n  canCreate?: boolean;\n  'aria-label'?: string;\n  className?: string;\n};\n\ntype PickerItem = { value: string; label: string; viewId: string | undefined };\n\nconst DEFAULT_ITEM_VALUE = '';\n\n/**\n * A compact saved-views control for a page header: a searchable view picker, the active view's\n * actions, and save / reset once the page differs from the view. Driven by the same controller\n * as `SavedViewTabs`.\n */\nexport function SavedViewPicker<TSettings>({\n  views,\n  defaultLabel,\n  newViewSettings,\n  describeView,\n  canEdit = () => true,\n  canCreate = true,\n  'aria-label': ariaLabel = 'Views',\n  className,\n}: SavedViewPickerProps<TSettings>) {\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [renaming, setRenaming] = useState(false);\n  const { draft, activeView } = views;\n  const creating = draft !== undefined && draft.viewId === undefined;\n  const activeUnsaved = !creating && draft?.viewId !== undefined && views.unsaved;\n  const editable = activeView !== undefined && canEdit(activeView);\n\n  const items: PickerItem[] = [\n    { value: DEFAULT_ITEM_VALUE, label: defaultLabel, viewId: undefined },\n    ...views.views.map(view => ({ value: view.id, label: view.name, viewId: view.id })),\n  ];\n  const selected = items.find(item => item.viewId === activeView?.id) ?? items[0];\n  const viewsById = new Map(views.views.map(view => [view.id, view]));\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      className={cn('flex min-w-0 flex-wrap items-center justify-end gap-1.5', className)}\n    >\n      {views.error && !creating && !renaming && (\n        <Txt role=\"alert\" variant=\"caption\" className=\"min-w-0 truncate text-destructive-foreground\">\n          {views.error}\n        </Txt>\n      )}\n      {activeUnsaved && (\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" disabled={views.pending} onClick={views.discard}>\n            Reset\n          </Button>\n          {editable && (\n            <Button type=\"button\" variant=\"default\" size=\"sm\" disabled={views.pending} onClick={views.save}>\n              Save changes\n            </Button>\n          )}\n        </div>\n      )}\n      <div ref={anchorRef} className=\"flex min-w-0 items-center gap-0.5\">\n        <ComboboxRoot\n          items={items}\n          value={selected}\n          onValueChange={(item: PickerItem | null) => {\n            if (item) views.select(item.viewId);\n          }}\n          isItemEqualToValue={(item: PickerItem, value: PickerItem) => item.value === value.value}\n          autoHighlight\n        >\n          <ComboboxTrigger\n            size=\"sm\"\n            icon={<LayersIcon />}\n            aria-label={`View: ${selected?.label}${activeUnsaved ? ', unsaved changes' : ''}`}\n            className=\"max-w-60\"\n          >\n            {selected?.label}\n            {activeUnsaved && (\n              <span className=\"ml-1.5 inline-block size-1.5 rounded-full bg-warning-indicator align-middle\" />\n            )}\n          </ComboboxTrigger>\n          <ComboboxContent align=\"end\">\n            <ComboboxSearch placeholder=\"Search views…\" />\n            <ComboboxEmpty>No views found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item: PickerItem) => {\n                const view = item.viewId ? viewsById.get(item.viewId) : undefined;\n                return (\n                  <ComboboxItem key={item.value} value={item}>\n                    <span className=\"truncate\">{item.label}</span>\n                    {view && describeView && <ComboboxItemEnd>{describeView(view)}</ComboboxItemEnd>}\n                  </ComboboxItem>\n                );\n              }}\n            </ComboboxList>\n          </ComboboxContent>\n        </ComboboxRoot>\n        {activeView && !creating && (editable || canCreate) && (\n          <DropdownMenu>\n            <DropdownMenu.Trigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"View actions\" className=\"shrink-0\">\n              <EllipsisIcon />\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content align=\"end\">\n              {editable && (\n                <DropdownMenu.Item onClick={() => setRenaming(true)}>\n                  <TextCursorInputIcon aria-hidden />\n                  Rename\n                </DropdownMenu.Item>\n              )}\n              {canCreate && (\n                <DropdownMenu.Item onClick={() => views.duplicate(activeView.id)}>\n                  <CopyIcon aria-hidden />\n                  Duplicate\n                </DropdownMenu.Item>\n              )}\n              {editable && (\n                <>\n                  <DropdownMenu.Separator />\n                  <DropdownMenu.Item variant=\"destructive\" onClick={() => views.remove(activeView.id)}>\n                    <Trash2Icon aria-hidden />\n                    Delete view\n                  </DropdownMenu.Item>\n                </>\n              )}\n            </DropdownMenu.Content>\n          </DropdownMenu>\n        )}\n      </div>\n      {canCreate && (\n        <Popover\n          open={creating}\n          onOpenChange={open => {\n            if (open) views.create(newViewSettings);\n            else views.discard();\n          }}\n        >\n          <PopoverTrigger variant=\"ghost\" size=\"icon-sm\" tooltip=\"Save as new view\" className=\"shrink-0\">\n            <LayersPlusIcon />\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-72\">\n            {creating && (\n              <ViewNameForm\n                title=\"Save as new view\"\n                initialName={draft.name}\n                submitLabel=\"Save view\"\n                error={views.error}\n                pending={views.pending}\n                onNameChange={name => views.change({ name })}\n                onSubmit={() => views.save()}\n                onCancel={views.discard}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n      {activeView && (\n        <RenamePopover\n          open={renaming}\n          anchorRef={anchorRef}\n          name={activeView.name}\n          error={views.error}\n          pending={views.pending}\n          onClose={() => setRenaming(false)}\n          onRename={name => views.rename(activeView.id, name)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction RenamePopover({\n  open,\n  anchorRef,\n  name,\n  error,\n  pending,\n  onClose,\n  onRename,\n}: {\n  open: boolean;\n  anchorRef: RefObject<HTMLDivElement | null>;\n  name: string;\n  error: string | undefined;\n  pending: boolean | undefined;\n  onClose: () => void;\n  onRename: (name: string) => boolean | Promise<boolean>;\n}) {\n  // The name that last failed to save: its error shows until the user types something else.\n  const [failedName, setFailedName] = useState<string>();\n  const [typedName, setTypedName] = useState(name);\n  const close = () => {\n    setFailedName(undefined);\n    setTypedName(name);\n    onClose();\n  };\n  return (\n    <Popover open={open} onOpenChange={next => !next && close()}>\n      <PopoverContent anchor={anchorRef} align=\"end\" className=\"w-72\">\n        {open && (\n          <ViewNameForm\n            title=\"Rename view\"\n            initialName={name}\n            submitLabel=\"Rename\"\n            error={failedName !== undefined && failedName === typedName ? error : undefined}\n            pending={pending}\n            onNameChange={setTypedName}\n            onSubmit={async next => {\n              if (await onRename(next)) close();\n              else setFailedName(next);\n            }}\n            onCancel={close}\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction ViewNameForm({\n  title,\n  initialName,\n  submitLabel,\n  error,\n  pending,\n  onNameChange,\n  onSubmit,\n  onCancel,\n}: {\n  title: string;\n  initialName: string;\n  submitLabel: string;\n  error?: string;\n  pending?: boolean;\n  onNameChange?: (name: string) => void;\n  onSubmit: (name: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [name, setName] = useState(initialName);\n  const submit = (event: FormEvent) => {\n    event.preventDefault();\n    if (name.trim()) void onSubmit(name);\n  };\n  return (\n    <form className=\"flex flex-col gap-3\" onSubmit={submit}>\n      <Txt as=\"h2\" variant=\"label\">\n        {title}\n      </Txt>\n      <Field invalid={error !== undefined}>\n        <Input\n          aria-label=\"View name\"\n          size=\"sm\"\n          autoFocus\n          onFocus={event => event.currentTarget.select()}\n          maxLength={MAX_SAVED_VIEW_NAME_CHARS}\n          value={name}\n          onChange={event => {\n            setName(event.target.value);\n            onNameChange?.(event.target.value);\n          }}\n        />\n        <FieldError>{error}</FieldError>\n      </Field>\n      <div className=\"flex justify-end gap-1.5\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" variant=\"default\" size=\"sm\" disabled={pending || !name.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n","import type { SavedViewPage } from '@mastra/core/storage';\nimport { createPortal } from 'react-dom';\nimport { useSavedViewsSource } from './saved-views-source';\nimport type { SavedViewsContextValue } from './saved-views-source';\nimport { useHostedSavedViews } from './use-hosted-saved-views';\nimport type { SavedViewColumnsControl } from './use-hosted-saved-views';\nimport { useObservabilityHeaderSlot } from '@/domains/observability/components/observability-header-slot';\nimport { SavedViewPicker } from '@/ds/components/SavedViews/saved-view-picker';\nimport type { SetURLSearchParamsLike } from '@/lib/sort/use-url-sort';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_LABELS: Record<SavedViewPage, string> = {\n  traces: 'All traces',\n  spans: 'All spans',\n  threads: 'All threads',\n  logs: 'All logs',\n};\n\nexport type ObservabilitySavedViewsProps = {\n  page: SavedViewPage;\n  searchParams: URLSearchParams;\n  setSearchParams: SetURLSearchParamsLike;\n  /** The page's column picker (traces, spans, threads), so views save and restore columns. */\n  columns?: SavedViewColumnsControl;\n  /**\n   * The range the page shows when the URL names none, when the host's differs from the page's own\n   * (the same value passed to `useObservabilityListFilters`).\n   */\n  defaultDatePreset?: string;\n  className?: string;\n};\n\n/**\n * The saved views of an observability page: a searchable view picker with save and reset actions.\n * Inside the shared traces / spans / threads header it moves into that header's row. Renders nothing\n * unless a `SavedViewsProvider` above it supplies where views are stored.\n */\nexport function ObservabilitySavedViews(props: ObservabilitySavedViewsProps) {\n  const context = useSavedViewsSource();\n  if (!context) return null;\n  return <HostedSavedViewsBar {...props} {...context} />;\n}\n\nfunction HostedSavedViewsBar({\n  page,\n  searchParams,\n  setSearchParams,\n  columns,\n  defaultDatePreset,\n  className,\n  source,\n  queryKeyScope,\n  canEdit,\n  canCreate = true,\n}: ObservabilitySavedViewsProps & SavedViewsContextValue) {\n  const headerSlot = useObservabilityHeaderSlot();\n  const views = useHostedSavedViews({\n    page,\n    source,\n    queryKeyScope,\n    canEdit,\n    canCreate,\n    searchParams,\n    setSearchParams,\n    columns,\n    defaultDatePreset,\n  });\n\n  const picker = (\n    <SavedViewPicker\n      views={views}\n      defaultLabel={DEFAULT_LABELS[page]}\n      aria-label=\"Saved views\"\n      newViewSettings={{ state: { schemaVersion: 1, page, filters: [] } }}\n      describeView={view => (view.settings.record?.scope === 'org' ? 'Shared' : undefined)}\n      canEdit={view => !canEdit || !view.settings.record || canEdit(view.settings.record)}\n      canCreate={canCreate}\n      className={className}\n    />\n  );\n  return headerSlot ? createPortal(picker, headerSlot) : picker;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyCA,IAAM,qBAAqB;;;;;;AAO3B,SAAgB,gBAA2B,EACzC,OACA,cACA,iBACA,cACA,gBAAgB,MAChB,YAAY,MACZ,cAAc,YAAY,SAC1B,aACkC;CAClC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,EAAE,OAAO,eAAe;CAC9B,MAAM,WAAW,UAAU,KAAA,KAAa,MAAM,WAAW,KAAA;CACzD,MAAM,gBAAgB,CAAC,YAAY,OAAO,WAAW,KAAA,KAAa,MAAM;CACxE,MAAM,WAAW,eAAe,KAAA,KAAa,QAAQ,UAAU;CAE/D,MAAM,QAAsB,CAC1B;EAAE,OAAO;EAAoB,OAAO;EAAc,QAAQ,KAAA;CAAU,GACpE,GAAG,MAAM,MAAM,KAAI,UAAS;EAAE,OAAO,KAAK;EAAI,OAAO,KAAK;EAAM,QAAQ,KAAK;CAAG,EAAE,CACpF;CACA,MAAM,WAAW,MAAM,MAAK,SAAQ,KAAK,WAAW,YAAY,EAAE,KAAK,MAAM;CAC7E,MAAM,YAAY,IAAI,IAAI,MAAM,MAAM,KAAI,SAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAElE,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW,GAAG,2DAA2D,SAAS;EAHpF,UAAA;GAKG,MAAM,SAAS,CAAC,YAAY,CAAC,YAC5B,oBAAC,KAAD;IAAK,MAAK;IAAQ,SAAQ;IAAU,WAAU;IAC3C,UAAA,MAAM;GACJ,CAAA;GAEN,iBACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAS,UAAA;IAEzF,CAAA,GACP,YACC,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,MAAM;KAAS,SAAS,MAAM;KAAM,UAAA;IAExF,CAAA,CAEP;;GAEP,qBAAC,OAAD;IAAK,KAAK;IAAW,WAAU;IAA/B,UAAA,CACE,qBAAC,cAAD;KACS;KACP,OAAO;KACP,gBAAgB,SAA4B;MAC1C,IAAI,MAAM,MAAM,OAAO,KAAK,MAAM;KACpC;KACA,qBAAqB,MAAkB,UAAsB,KAAK,UAAU,MAAM;KAClF,eAAA;KAPF,UAAA,CASE,qBAAC,iBAAD;MACE,MAAK;MACL,MAAM,oBAAC,YAAD,CAAa,CAAA;MACnB,cAAY,SAAS,UAAU,QAAQ,gBAAgB,sBAAsB;MAC7E,WAAU;MAJZ,UAAA,CAMG,UAAU,OACV,iBACC,oBAAC,QAAD,EAAM,WAAU,8EAA+E,CAAA,CAElF;KACjB,CAAA,GAAA,qBAAC,iBAAD;MAAiB,OAAM;MAAvB,UAAA;OACE,oBAAC,gBAAD,EAAgB,aAAY,gBAAiB,CAAA;OAC7C,oBAAC,eAAD,EAAA,UAAe,kBAA8B,CAAA;OAC7C,oBAAC,cAAD,EAAA,WACI,SAAqB;QACrB,MAAM,OAAO,KAAK,SAAS,UAAU,IAAI,KAAK,MAAM,IAAI,KAAA;QACxD,OACE,qBAAC,cAAD;SAA+B,OAAO;SAAtC,UAAA,CACE,oBAAC,QAAD;UAAM,WAAU;UAAY,UAAA,KAAK;SAAY,CAAA,GAC5C,QAAQ,gBAAgB,oBAAC,iBAAD,EAAA,UAAkB,aAAa,IAAI,EAAmB,CAAA,CACnE;QAHK,GAAA,KAAK,KAGV;OAElB,EACY,CAAA;MACC;KACL,CAAA,CAAA;IACb,CAAA,GAAA,cAAc,CAAC,aAAa,YAAY,cACvC,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd;KAAsB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAe,WAAU;KACpF,UAAA,oBAAC,cAAD,CAAe,CAAA;IACK,CAAA,GACtB,qBAAC,aAAa,SAAd;KAAsB,OAAM;KAA5B,UAAA;MACG,YACC,qBAAC,aAAa,MAAd;OAAmB,eAAe,YAAY,IAAI;OAAlD,UAAA,CACE,oBAAC,qBAAD,EAAqB,eAAA,KAAa,CAAA,GAAC,QAElB;;MAEpB,aACC,qBAAC,aAAa,MAAd;OAAmB,eAAe,MAAM,UAAU,WAAW,EAAE;OAA/D,UAAA,CACE,oBAAC,UAAD,EAAU,eAAA,KAAa,CAAA,GAAC,WAEP;;MAEpB,YACC,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAa,WAAd,CAAyB,CAAA,GACzB,qBAAC,aAAa,MAAd;OAAmB,SAAQ;OAAc,eAAe,MAAM,OAAO,WAAW,EAAE;OAAlF,UAAA,CACE,oBAAC,YAAD,EAAY,eAAA,KAAa,CAAA,GAAC,aAET;MACnB,CAAA,CAAA,EAAA,CAAA;KAEgB;IACV,CAAA,CAAA,EAAA,CAAA,CAEb;;GACJ,aACC,qBAAC,SAAD;IACE,MAAM;IACN,eAAc,SAAQ;KACpB,IAAI,MAAM,MAAM,OAAO,eAAe;UACjC,MAAM,QAAQ;IACrB;IALF,UAAA,CAOE,oBAAC,gBAAD;KAAgB,SAAQ;KAAQ,MAAK;KAAU,SAAQ;KAAmB,WAAU;KAClF,UAAA,oBAAC,gBAAD,CAAiB,CAAA;IACH,CAAA,GAChB,oBAAC,gBAAD;KAAgB,OAAM;KAAM,WAAU;KACnC,UAAA,YACC,oBAAC,cAAD;MACE,OAAM;MACN,aAAa,MAAM;MACnB,aAAY;MACZ,OAAO,MAAM;MACb,SAAS,MAAM;MACf,eAAc,SAAQ,MAAM,OAAO,EAAE,KAAK,CAAC;MAC3C,gBAAgB,MAAM,KAAK;MAC3B,UAAU,MAAM;KACjB,CAAA;IAEW,CAAA,CACT;;GAEV,cACC,oBAAC,eAAD;IACE,MAAM;IACK;IACX,MAAM,WAAW;IACjB,OAAO,MAAM;IACb,SAAS,MAAM;IACf,eAAe,YAAY,KAAK;IAChC,WAAU,SAAQ,MAAM,OAAO,WAAW,IAAI,IAAI;GACnD,CAAA;EAEA;;AAET;AAEA,SAAS,cAAc,EACrB,MACA,WACA,MACA,OACA,SACA,SACA,YASC;CAED,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,IAAI;CAC/C,MAAM,cAAc;EAClB,cAAc,KAAA,CAAS;EACvB,aAAa,IAAI;EACjB,QAAQ;CACV;CACA,OACE,oBAAC,SAAD;EAAe;EAAM,eAAc,SAAQ,CAAC,QAAQ,MAAM;EACxD,UAAA,oBAAC,gBAAD;GAAgB,QAAQ;GAAW,OAAM;GAAM,WAAU;GACtD,UAAA,QACC,oBAAC,cAAD;IACE,OAAM;IACN,aAAa;IACb,aAAY;IACZ,OAAO,eAAe,KAAA,KAAa,eAAe,YAAY,QAAQ,KAAA;IAC7D;IACT,cAAc;IACd,UAAU,OAAM,SAAQ;KACtB,IAAI,MAAM,SAAS,IAAI,GAAG,MAAM;UAC3B,cAAc,IAAI;IACzB;IACA,UAAU;GACX,CAAA;EAEW,CAAA;CACT,CAAA;AAEb;AAEA,SAAS,aAAa,EACpB,OACA,aACA,aACA,OACA,SACA,cACA,UACA,YAUC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,MAAM,UAAU,UAAqB;EACnC,MAAM,eAAe;EACrB,IAAI,KAAK,KAAK,GAAG,SAAc,IAAI;CACrC;CACA,OACE,qBAAC,QAAD;EAAM,WAAU;EAAsB,UAAU;EAAhD,UAAA;GACE,oBAAC,KAAD;IAAK,IAAG;IAAK,SAAQ;IAClB,UAAA;GACE,CAAA;GACL,qBAAC,OAAD;IAAO,SAAS,UAAU,KAAA;IAA1B,UAAA,CACE,oBAAC,OAAD;KACE,cAAW;KACX,MAAK;KACL,WAAA;KACA,UAAS,UAAS,MAAM,cAAc,OAAO;KAC7C,WAAA;KACA,OAAO;KACP,WAAU,UAAS;MACjB,QAAQ,MAAM,OAAO,KAAK;MAC1B,eAAe,MAAM,OAAO,KAAK;KACnC;IACD,CAAA,GACD,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,CAC1B;;GACP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAQ,MAAK;KAAK,SAAS;KAAU,UAAA;IAE3D,CAAA,GACR,oBAAC,QAAD;KAAQ,MAAK;KAAS,SAAQ;KAAU,MAAK;KAAK,UAAU,WAAW,CAAC,KAAK,KAAK;KAC/E,UAAA;IACK,CAAA,CACL;;EACD;;AAEV;;ACxSA,IAAM,iBAAgD;CACpD,QAAQ;CACR,OAAO;CACP,SAAS;CACT,MAAM;AACR;;;;;;AAqBA,SAAgB,wBAAwB,OAAqC;CAC3E,MAAM,UAAU,oBAAoB;CACpC,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,oBAAC,qBAAD;EAAqB,GAAI;EAAO,GAAI;CAAU,CAAA;AACvD;AAEA,SAAS,oBAAoB,EAC3B,MACA,cACA,iBACA,SACA,mBACA,WACA,QACA,eACA,SACA,YAAY,QAC4C;CACxD,MAAM,aAAa,2BAA2B;CAC9C,MAAM,QAAQ,oBAAoB;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SACJ,oBAAC,iBAAD;EACS;EACP,cAAc,eAAe;EAC7B,cAAW;EACX,iBAAiB,EAAE,OAAO;GAAE,eAAe;GAAG;GAAM,SAAS,CAAC;EAAE,EAAE;EAClE,eAAc,SAAS,KAAK,SAAS,QAAQ,UAAU,QAAQ,WAAW,KAAA;EAC1E,UAAS,SAAQ,CAAC,WAAW,CAAC,KAAK,SAAS,UAAU,QAAQ,KAAK,SAAS,MAAM;EACvE;EACA;CACZ,CAAA;CAEH,OAAO,aAAa,aAAa,QAAQ,UAAU,IAAI;AACzD"}

package/dist/primitives/control-icon.cjs.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/ds/primitives/control-icon.ts
+var controlIconState = require("../utils-uDc1ofX1.cjs").cn("[--control-icon:var(--control-icon-rest)] [&_svg]:text-(color:--control-icon)", "not-disabled:hover:[--control-icon:var(--control-icon-hover)] aria-disabled:[--control-icon:var(--control-icon-rest)]", "data-[shape=icon]:[--control-icon-hover:var(--foreground)]");
+/** The same for a bare-glyph control that is not a Button (a chip's ×). */
+var controlIconOnly = "[--control-icon-hover:var(--foreground)]";
+exports.controlIconOnly = controlIconOnly;
+exports.controlIconState = controlIconState;
+
+//# sourceMappingURL=control-icon.cjs.js.map

package/dist/primitives/control-icon.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-icon.cjs.js","names":["cn"],"sources":["../../src/ds/primitives/control-icon.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\n// The one rule for the icons inside an interactive control (a Button, a field, a chip segment,\n// a menu row): `--control-icon-rest` at rest, `--control-icon-hover` while hovered, back to rest\n// when disabled. A control only ever chooses the two colours (theme.css sets the defaults),\n// never its own hover rule, so every control answers hover the same way by construction.\n// An icon on a neutral surface steps back with a colour token rather than opacity: opacity dims\n// against whatever sits behind the control, so the same glyph would clear contrast on one\n// surface and fail on another.\nexport const controlIconState = cn(\n  '[--control-icon:var(--control-icon-rest)] [&_svg]:text-(color:--control-icon)',\n  'not-disabled:hover:[--control-icon:var(--control-icon-hover)] aria-disabled:[--control-icon:var(--control-icon-rest)]',\n  // An icon-only Button's glyph is its label, so it brightens like a label does.\n  'data-[shape=icon]:[--control-icon-hover:var(--foreground)]',\n);\n\n/** The same for a bare-glyph control that is not a Button (a chip's ×). */\nexport const controlIconOnly = '[--control-icon-hover:var(--foreground)]';\n"],"mappings":";;AASA,IAAa,mB,+BAAmBA,CAAAA,CAAAA,GAC9B,iFACA,yHAEA,4DACF;;AAGA,IAAa,kBAAkB"}

package/dist/primitives/control-icon.d.ts

@@ -0,0 +1 @@
+export * from '../src/ds/primitives/control-icon';

package/dist/primitives/control-icon.es.js

@@ -0,0 +1,8 @@
+import { t as cn } from "../utils-DQx8TpNT.js";
+// src/ds/primitives/control-icon.ts
+var controlIconState = cn("[--control-icon:var(--control-icon-rest)] [&_svg]:text-(color:--control-icon)", "not-disabled:hover:[--control-icon:var(--control-icon-hover)] aria-disabled:[--control-icon:var(--control-icon-rest)]", "data-[shape=icon]:[--control-icon-hover:var(--foreground)]");
+/** The same for a bare-glyph control that is not a Button (a chip's ×). */
+var controlIconOnly = "[--control-icon-hover:var(--foreground)]";
+export { controlIconOnly, controlIconState };
+
+//# sourceMappingURL=control-icon.es.js.map

package/dist/primitives/control-icon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-icon.es.js","names":[],"sources":["../../src/ds/primitives/control-icon.ts"],"sourcesContent":["import { cn } from '@/lib/utils';\n\n// The one rule for the icons inside an interactive control (a Button, a field, a chip segment,\n// a menu row): `--control-icon-rest` at rest, `--control-icon-hover` while hovered, back to rest\n// when disabled. A control only ever chooses the two colours (theme.css sets the defaults),\n// never its own hover rule, so every control answers hover the same way by construction.\n// An icon on a neutral surface steps back with a colour token rather than opacity: opacity dims\n// against whatever sits behind the control, so the same glyph would clear contrast on one\n// surface and fail on another.\nexport const controlIconState = cn(\n  '[--control-icon:var(--control-icon-rest)] [&_svg]:text-(color:--control-icon)',\n  'not-disabled:hover:[--control-icon:var(--control-icon-hover)] aria-disabled:[--control-icon:var(--control-icon-rest)]',\n  // An icon-only Button's glyph is its label, so it brightens like a label does.\n  'data-[shape=icon]:[--control-icon-hover:var(--foreground)]',\n);\n\n/** The same for a bare-glyph control that is not a Button (a chip's ×). */\nexport const controlIconOnly = '[--control-icon-hover:var(--foreground)]';\n"],"mappings":";;AASA,IAAa,mBAAmB,GAC9B,iFACA,yHAEA,4DACF;;AAGA,IAAa,kBAAkB"}

package/dist/primitives/control-size.cjs.js

@@ -14,6 +14,11 @@ var controlSizeClasses = {
 	md: "h-control-md text-label",
 	lg: "h-control-lg text-label"
 };
+var controlSpacing = {
+	sm: "[--control-px:.9em] [--control-gap:0.3125rem]",
+	md: "[--control-px:.9em] [--control-gap:0.375rem]",
+	lg: "[--control-px:1em] [--control-gap:0.375rem]"
+};
 var controlTriggerOpenState = {
 	default: "data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground",
 	ghost: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground"
@@ -24,6 +29,7 @@ function controlTriggerOpenStateFor(variant) {
 exports.ControlSizeContext = ControlSizeContext;
 exports.controlHeight = controlHeight;
 exports.controlSizeClasses = controlSizeClasses;
+exports.controlSpacing = controlSpacing;
 exports.controlTriggerOpenState = controlTriggerOpenState;
 exports.controlTriggerOpenStateFor = controlTriggerOpenStateFor;
 

package/dist/primitives/control-size.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.cjs.js","names":["React"],"sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"mappings":";;;;;AAeA,IAAa,qBAAqBA,MAAM,cAAuC,KAAA,CAAS;AAIxF,IAAa,gBAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAeA,IAAa,qBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAQA,IAAa,0BAAuE;CAClF,SAAS;CACT,OAAO;AACT;AAIA,SAAgB,2BAA2B,SAAwD;CACjG,OAAO,YAAY,aAAa,YAAY,UAAU,wBAAwB,WAAW,KAAA;AAC3F"}
+{"version":3,"file":"control-size.cjs.js","names":["React"],"sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\n// Inner spacing per rung, as custom properties so every pill-shaped control reads the same two\n// numbers: `--control-px`, the inset from a pill's end to its label (a glyph side takes 2px less,\n// since a glyph draws inside its box), and `--control-gap`, between an icon and its label. Button,\n// a FilterBar chip and an InputGroup set them from here; nothing restates the values.\nexport const controlSpacing: Record<ControlSize, string> = {\n  sm: '[--control-px:.9em] [--control-gap:0.3125rem]',\n  md: '[--control-px:.9em] [--control-gap:0.375rem]',\n  lg: '[--control-px:1em] [--control-gap:0.375rem]',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"mappings":";;;;;AAeA,IAAa,qBAAqBA,MAAM,cAAuC,KAAA,CAAS;AAIxF,IAAa,gBAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAeA,IAAa,qBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAMA,IAAa,iBAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAQA,IAAa,0BAAuE;CAClF,SAAS;CACT,OAAO;AACT;AAIA,SAAgB,2BAA2B,SAAwD;CACjG,OAAO,YAAY,aAAa,YAAY,UAAU,wBAAwB,WAAW,KAAA;AAC3F"}

package/dist/primitives/control-size.es.js

@@ -11,6 +11,11 @@ var controlSizeClasses = {
 	md: "h-control-md text-label",
 	lg: "h-control-lg text-label"
 };
+var controlSpacing = {
+	sm: "[--control-px:.9em] [--control-gap:0.3125rem]",
+	md: "[--control-px:.9em] [--control-gap:0.375rem]",
+	lg: "[--control-px:1em] [--control-gap:0.375rem]"
+};
 var controlTriggerOpenState = {
 	default: "data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground",
 	ghost: "data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground"
@@ -18,6 +23,6 @@ var controlTriggerOpenState = {
 function controlTriggerOpenStateFor(variant) {
 	return variant === "default" || variant === "ghost" ? controlTriggerOpenState[variant] : void 0;
 }
-export { ControlSizeContext, controlHeight, controlSizeClasses, controlTriggerOpenState, controlTriggerOpenStateFor };
+export { ControlSizeContext, controlHeight, controlSizeClasses, controlSpacing, controlTriggerOpenState, controlTriggerOpenStateFor };
 
 //# sourceMappingURL=control-size.es.js.map

package/dist/primitives/control-size.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-size.es.js","names":["React"],"sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"mappings":";;AAeA,IAAa,qBAAqBA,QAAM,cAAuC,KAAA,CAAS;AAIxF,IAAa,gBAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAeA,IAAa,qBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAQA,IAAa,0BAAuE;CAClF,SAAS;CACT,OAAO;AACT;AAIA,SAAgB,2BAA2B,SAAwD;CACjG,OAAO,YAAY,aAAa,YAAY,UAAU,wBAAwB,WAAW,KAAA;AAC3F"}
+{"version":3,"file":"control-size.es.js","names":["React"],"sources":["../../src/ds/primitives/control-size.ts"],"sourcesContent":["import * as React from 'react';\n\n// Shared size rhythm for interactive controls (Button, Input, Select trigger,\n// InputGroup, and other form-shaped triggers). These height + text-size classes\n// are the single source of truth so controls line up pixel-for-pixel when placed\n// in the same row or composed inside a ButtonsGroup / InputGroup. Horizontal\n// padding stays per-component (a button hugs its label tighter than an input\n// hugs its text), so it deliberately lives in each component, not here.\n\nexport type ControlSize = 'sm' | 'md' | 'lg';\n\n// The rung a wrapper imposes on the controls inside it (ButtonsGroup). A control's box is\n// forced by the wrapper's stylesheet, which reaches segments a provider cannot name — Base\n// UI renders a trigger as its own child. This carries what a stylesheet cannot reach\n// instead: the type role and adornment scale a field keys off its own `data-size`.\nexport const ControlSizeContext = React.createContext<ControlSize | undefined>(undefined);\n\n// Height only — for square/icon controls and wrappers that own height on the\n// border-box while their inner control inherits it.\nexport const controlHeight: Record<ControlSize, string> = {\n  sm: 'h-control-sm',\n  md: 'h-control-md',\n  lg: 'h-control-lg',\n};\n\n// Controls centre their label with flex, not with the line box, so `text-box-trim`\n// is inert here: it trims line boxes in a block container, and a control's label is\n// an anonymous flex item. Measured centring error is at most 0.6px, so the em box\n// and its paired leading token carry this. Revisit only if a label moves to a\n// block-level wrapper.\n\n// Height + text role. Heights: sm 28px / md 30px / lg 32px. `md` is the default\n// everywhere, and a control's label is a label at every height — the box grows, the\n// type does not, which is why all three share `text-label` (13px/500, measured from\n// Linear, whose buttons are 13px regardless of height). The 20px rung is gone: a\n// control that small cannot hold a 13px label, and the pages here carry few enough\n// items that they never needed it.\n// The role carries the weight, so no control adds `font-medium` on top.\nexport const controlSizeClasses: Record<ControlSize, string> = {\n  sm: 'h-control-sm text-label',\n  md: 'h-control-md text-label',\n  lg: 'h-control-lg text-label',\n};\n\n// Inner spacing per rung, as custom properties so every pill-shaped control reads the same two\n// numbers: `--control-px`, the inset from a pill's end to its label (a glyph side takes 2px less,\n// since a glyph draws inside its box), and `--control-gap`, between an icon and its label. Button,\n// a FilterBar chip and an InputGroup set them from here; nothing restates the values.\nexport const controlSpacing: Record<ControlSize, string> = {\n  sm: '[--control-px:.9em] [--control-gap:0.3125rem]',\n  md: '[--control-px:.9em] [--control-gap:0.375rem]',\n  lg: '[--control-px:1em] [--control-gap:0.375rem]',\n};\n\nexport type ControlTriggerVisualVariant = 'default' | 'ghost';\n\n// Open (\"popup-open\") state per variant. `default` washes through `--surface-tint`, the\n// layer its raised material expresses every other state in: its fill is a pinned card\n// colour, and swapping that would drop the control out of the material it shares with a\n// field. `ghost` has no material to wash, so it takes a fill rung.\nexport const controlTriggerOpenState: Record<ControlTriggerVisualVariant, string> = {\n  default: 'data-[popup-open]:[--surface-tint:var(--fill)] data-[popup-open]:text-foreground',\n  ghost: 'data-[popup-open]:bg-fill-subtle data-[popup-open]:text-foreground',\n};\n\n// Open-state classes for a trigger rendered with any Button variant; only the\n// form-style variants have one (a `primary`/`destructive` trigger keeps its look).\nexport function controlTriggerOpenStateFor(variant: string | null | undefined): string | undefined {\n  return variant === 'default' || variant === 'ghost' ? controlTriggerOpenState[variant] : undefined;\n}\n"],"mappings":";;AAeA,IAAa,qBAAqBA,QAAM,cAAuC,KAAA,CAAS;AAIxF,IAAa,gBAA6C;CACxD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAeA,IAAa,qBAAkD;CAC7D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAMA,IAAa,iBAA8C;CACzD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAQA,IAAa,0BAAuE;CAClF,SAAS;CACT,OAAO;AACT;AAIA,SAAgB,2BAA2B,SAAwD;CACjG,OAAO,YAAY,aAAa,YAAY,UAAU,wBAAwB,WAAW,KAAA;AAC3F"}

package/dist/primitives/menu-item.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_raised_surface = require("./raised-surface.cjs.js");
-const require_Button = require("../Button-YQRflC47.cjs");
+const require_Button = require("../Button-DLcMcuUL.cjs");
 // src/ds/primitives/menu-item.ts
-var MENU_ITEM_OVERRIDES = require_utils.cn("flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none", "[--menu-icon-color:var(--placeholder)] [&>svg]:text-(color:--menu-icon-color)", "h-auto min-h-control-md py-1", "transition-none", "focus-visible:border-transparent", "not-disabled:hover:bg-transparent not-disabled:active:bg-transparent", "not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill", "not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80", "not-disabled:hover:[--menu-icon-color:var(--muted-foreground)] data-highlighted:[--menu-icon-color:var(--muted-foreground)]", "data-selected:[--menu-icon-color:var(--muted-foreground)] data-[popup-open]:[--menu-icon-color:var(--muted-foreground)]", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", "[&>span]:truncate", "has-[>svg]:px-2");
+var MENU_ITEM_OVERRIDES = require_utils.cn("flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none", "[--control-icon-hover:var(--muted-foreground)] [--control-icon-rest:var(--placeholder)]", "h-auto min-h-control-md py-1", "transition-none", "focus-visible:border-transparent", "not-disabled:hover:bg-transparent not-disabled:active:bg-transparent", "not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill", "not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80", "data-highlighted:[--control-icon:var(--control-icon-hover)] data-selected:[--control-icon:var(--control-icon-hover)] data-[popup-open]:[--control-icon:var(--control-icon-hover)]", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", "[&>span]:truncate", "has-[>svg]:px-2");
 var menuItemClass = require_utils.cn(require_Button.buttonVariants({
 	variant: "ghost",
 	size: "md"
@@ -13,7 +13,7 @@ var menuItemDestructiveClass = require_utils.cn(require_Button.buttonVariants({
 	size: "md"
 }), MENU_ITEM_OVERRIDES, "text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground", "data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground", "not-disabled:data-highlighted:bg-destructive-subtle");
 var menuItemButtonClass = require_utils.cn(menuItemClass, "not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground");
-var menuItemTrailingIconClass = require_utils.cn("ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--menu-icon-color) [&>svg]:size-full");
+var menuItemTrailingIconClass = require_utils.cn("ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--control-icon) [&>svg]:size-full");
 var menuItemCheckClass = require_utils.cn(menuItemTrailingIconClass, "text-muted-foreground");
 var menuItemHintClass = "ml-auto min-w-0 truncate pl-4 text-muted-foreground";
 var menuItemInsetClass = "pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]";

package/dist/primitives/menu-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.cjs.js","names":["cn","buttonVariants","overlaySurfaceStyle"],"sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter). An item shares ghost/md Button interaction\n// states, with its own reading typography and insets. `rounded-lg` lets stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none',\n  // Leading icons and trailing chevrons share a tone that follows pointer,\n  // keyboard, and held-open submenu states together with the label.\n  '[--menu-icon-color:var(--placeholder)] [&>svg]:text-(color:--menu-icon-color)',\n  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\n  // Rows in a list switch instantly: no colour fade inherited from Button.\n  'transition-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // The library's highlight (`data-highlighted`, which follows both the pointer and the\n  // arrow keys) paints the row, not `:hover`: a hovered row and a keyboard-highlighted\n  // one would otherwise both light up. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them. The fill switches instantly, like every hover.\n  'not-disabled:hover:bg-transparent not-disabled:active:bg-transparent',\n  // `not-disabled:` matches the override's specificity, so the highlight wins over it.\n  'not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill',\n  'not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80',\n  'not-disabled:hover:[--menu-icon-color:var(--muted-foreground)] data-highlighted:[--menu-icon-color:var(--muted-foreground)]',\n  'data-selected:[--menu-icon-color:var(--muted-foreground)] data-[popup-open]:[--menu-icon-color:var(--muted-foreground)]',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n  // Button pulls iconed labels toward its pill edge. A menu uses the same inset\n  // with or without an icon, so labels and submenu values follow a stable grid.\n  'has-[>svg]:px-2',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground',\n  'data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground',\n  'not-disabled:data-highlighted:bg-destructive-subtle',\n);\n\n// For rows that are plain buttons moved through with roving focus (no library\n// highlight): the row lights up on hover and on focus.\nexport const menuItemButtonClass = cn(menuItemClass, 'not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground');\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, so the Button recipe's `[&>svg]` adornment padding never treats it as a leading icon.\nexport const menuItemTrailingIconClass = cn(\n  'ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--menu-icon-color) [&>svg]:size-full',\n);\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-muted-foreground');\n\nexport const menuItemHintClass = 'ml-auto min-w-0 truncate pl-4 text-muted-foreground';\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  // `scrollbar-inset-xl` keeps a ScrollArea's scrollbar ends clear of the `rounded-xl` corners.\n  cn('rounded-xl p-1 font-body text-menu text-muted-foreground outline-none scrollbar-inset-xl', overlaySurfaceStyle),\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\n// Section labels use the same side inset as rows, including their transparent border.\nexport const menuLabelClass =\n  'px-[calc(var(--spacing)*2+1px)] pt-1.5 pb-1 text-caption tracking-normal text-muted-foreground';\n\nexport const menuLabelInsetClass = menuItemInsetClass;\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto pl-4 text-caption tracking-normal text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-control-md items-center gap-2 px-2 py-0.5 text-menu text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container: 'flex items-center gap-2 border-b border-border px-2 py-0.5 text-menu focus-within:bg-fill-subtle',\n  /** Fixed popup header: include the scroll body's inset so search and option icons align. */\n  header:\n    'flex items-center gap-2 border-b border-border px-[calc(var(--spacing)*3+1px)] py-1 text-menu focus-within:bg-fill-subtle',\n  icon: 'size-icon-md shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-menu text-muted-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"mappings":";;;;;AAYA,IAAM,sBAAsBA,cAAAA,GAC1B,yGAGA,iFAIA,gCAEA,mBAEA,oCAKA,wEAEA,gFACA,mJACA,+HACA,2HACA,+FACA,qBAGA,iBACF;AAEA,IAAa,gBAAgBA,cAAAA,GAAGC,eAAAA,eAAe;CAAE,SAAS;CAAS,MAAM;AAAK,CAAC,GAAG,mBAAmB;AAErG,IAAa,2BAA2BD,cAAAA,GACtCC,eAAAA,eAAe;CAAE,SAAS;CAAqB,MAAM;AAAK,CAAC,GAC3D,qBACA,kHACA,wIACA,qDACF;AAIA,IAAa,sBAAsBD,cAAAA,GAAG,eAAe,gEAAgE;AAIrH,IAAa,4BAA4BA,cAAAA,GACvC,iHACF;AAEA,IAAa,qBAAqBA,cAAAA,GAAG,2BAA2B,uBAAuB;AAEvF,IAAa,oBAAoB;AAGjC,IAAa,qBAAqB;AAElC,IAAa,mBAAmB;AAGhC,IAAa,sBAAsB;AAInC,IAAa,iBAAiBA,cAAAA,GAC5B,qEACA,0EACA,sEAEAA,cAAAA,GAAG,4FAA4FE,kCAAAA,mBAAmB,GAClH,oJACA,6JACF;AAGA,IAAa,iBACX;AAEF,IAAa,sBAAsB;AAEnC,IAAa,qBAAqB;AAElC,IAAa,oBAAoB;;AAGjC,IAAa,iBACX;AAEF,IAAa,oBAAoB;CAI/B,WAAW;;CAEX,QACE;CACF,MAAM;CACN,OACE;AACJ"}
+{"version":3,"file":"menu-item.cjs.js","names":["cn","buttonVariants","overlaySurfaceStyle"],"sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter). An item shares ghost/md Button interaction\n// states, with its own reading typography and insets. `rounded-lg` lets stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none',\n  // Leading icons and trailing chevrons take the shared control icon rule (ghost Button's\n  // `controlIconState`), one step quieter than in a toolbar, and also follow the keyboard\n  // highlight and a held-open submenu, which a menu row has and a Button does not.\n  '[--control-icon-hover:var(--muted-foreground)] [--control-icon-rest:var(--placeholder)]',\n  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\n  // Rows in a list switch instantly: no colour fade inherited from Button.\n  'transition-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // The library's highlight (`data-highlighted`, which follows both the pointer and the\n  // arrow keys) paints the row, not `:hover`: a hovered row and a keyboard-highlighted\n  // one would otherwise both light up. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them. The fill switches instantly, like every hover.\n  'not-disabled:hover:bg-transparent not-disabled:active:bg-transparent',\n  // `not-disabled:` matches the override's specificity, so the highlight wins over it.\n  'not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill',\n  'not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80',\n  'data-highlighted:[--control-icon:var(--control-icon-hover)] data-selected:[--control-icon:var(--control-icon-hover)] data-[popup-open]:[--control-icon:var(--control-icon-hover)]',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n  // Button pulls iconed labels toward its pill edge. A menu uses the same inset\n  // with or without an icon, so labels and submenu values follow a stable grid.\n  'has-[>svg]:px-2',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground',\n  'data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground',\n  'not-disabled:data-highlighted:bg-destructive-subtle',\n);\n\n// For rows that are plain buttons moved through with roving focus (no library\n// highlight): the row lights up on hover and on focus.\nexport const menuItemButtonClass = cn(menuItemClass, 'not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground');\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, so the Button recipe's `[&>svg]` adornment padding never treats it as a leading icon.\nexport const menuItemTrailingIconClass = cn(\n  'ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--control-icon) [&>svg]:size-full',\n);\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-muted-foreground');\n\nexport const menuItemHintClass = 'ml-auto min-w-0 truncate pl-4 text-muted-foreground';\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  // `scrollbar-inset-xl` keeps a ScrollArea's scrollbar ends clear of the `rounded-xl` corners.\n  cn('rounded-xl p-1 font-body text-menu text-muted-foreground outline-none scrollbar-inset-xl', overlaySurfaceStyle),\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\n// Section labels use the same side inset as rows, including their transparent border.\nexport const menuLabelClass =\n  'px-[calc(var(--spacing)*2+1px)] pt-1.5 pb-1 text-caption tracking-normal text-muted-foreground';\n\nexport const menuLabelInsetClass = menuItemInsetClass;\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto pl-4 text-caption tracking-normal text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-control-md items-center gap-2 px-2 py-0.5 text-menu text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container: 'flex items-center gap-2 border-b border-border px-2 py-0.5 text-menu focus-within:bg-fill-subtle',\n  /** Fixed popup header: include the scroll body's inset so search and option icons align. */\n  header:\n    'flex items-center gap-2 border-b border-border px-[calc(var(--spacing)*3+1px)] py-1 text-menu focus-within:bg-fill-subtle',\n  icon: 'size-icon-md shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-menu text-muted-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"mappings":";;;;;AAYA,IAAM,sBAAsBA,cAAAA,GAC1B,yGAIA,2FAIA,gCAEA,mBAEA,oCAKA,wEAEA,gFACA,mJACA,qLACA,+FACA,qBAGA,iBACF;AAEA,IAAa,gBAAgBA,cAAAA,GAAGC,eAAAA,eAAe;CAAE,SAAS;CAAS,MAAM;AAAK,CAAC,GAAG,mBAAmB;AAErG,IAAa,2BAA2BD,cAAAA,GACtCC,eAAAA,eAAe;CAAE,SAAS;CAAqB,MAAM;AAAK,CAAC,GAC3D,qBACA,kHACA,wIACA,qDACF;AAIA,IAAa,sBAAsBD,cAAAA,GAAG,eAAe,gEAAgE;AAIrH,IAAa,4BAA4BA,cAAAA,GACvC,8GACF;AAEA,IAAa,qBAAqBA,cAAAA,GAAG,2BAA2B,uBAAuB;AAEvF,IAAa,oBAAoB;AAGjC,IAAa,qBAAqB;AAElC,IAAa,mBAAmB;AAGhC,IAAa,sBAAsB;AAInC,IAAa,iBAAiBA,cAAAA,GAC5B,qEACA,0EACA,sEAEAA,cAAAA,GAAG,4FAA4FE,kCAAAA,mBAAmB,GAClH,oJACA,6JACF;AAGA,IAAa,iBACX;AAEF,IAAa,sBAAsB;AAEnC,IAAa,qBAAqB;AAElC,IAAa,oBAAoB;;AAGjC,IAAa,iBACX;AAEF,IAAa,oBAAoB;CAI/B,WAAW;;CAEX,QACE;CACF,MAAM;CACN,OACE;AACJ"}

package/dist/primitives/menu-item.es.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { overlaySurfaceStyle } from "./raised-surface.es.js";
-import { r as buttonVariants } from "../Button-Bw1e3ONi.js";
+import { o as buttonVariants } from "../Button-CLXTbAY8.js";
 // src/ds/primitives/menu-item.ts
-var MENU_ITEM_OVERRIDES = cn("flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none", "[--menu-icon-color:var(--placeholder)] [&>svg]:text-(color:--menu-icon-color)", "h-auto min-h-control-md py-1", "transition-none", "focus-visible:border-transparent", "not-disabled:hover:bg-transparent not-disabled:active:bg-transparent", "not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill", "not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80", "not-disabled:hover:[--menu-icon-color:var(--muted-foreground)] data-highlighted:[--menu-icon-color:var(--muted-foreground)]", "data-selected:[--menu-icon-color:var(--muted-foreground)] data-[popup-open]:[--menu-icon-color:var(--muted-foreground)]", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", "[&>span]:truncate", "has-[>svg]:px-2");
+var MENU_ITEM_OVERRIDES = cn("flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none", "[--control-icon-hover:var(--muted-foreground)] [--control-icon-rest:var(--placeholder)]", "h-auto min-h-control-md py-1", "transition-none", "focus-visible:border-transparent", "not-disabled:hover:bg-transparent not-disabled:active:bg-transparent", "not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill", "not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80", "data-highlighted:[--control-icon:var(--control-icon-hover)] data-selected:[--control-icon:var(--control-icon-hover)] data-[popup-open]:[--control-icon:var(--control-icon-hover)]", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", "[&>span]:truncate", "has-[>svg]:px-2");
 var menuItemClass = cn(buttonVariants({
 	variant: "ghost",
 	size: "md"
@@ -12,7 +12,7 @@ var menuItemDestructiveClass = cn(buttonVariants({
 	size: "md"
 }), MENU_ITEM_OVERRIDES, "text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground", "data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground", "not-disabled:data-highlighted:bg-destructive-subtle");
 var menuItemButtonClass = cn(menuItemClass, "not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground");
-var menuItemTrailingIconClass = cn("ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--menu-icon-color) [&>svg]:size-full");
+var menuItemTrailingIconClass = cn("ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--control-icon) [&>svg]:size-full");
 var menuItemCheckClass = cn(menuItemTrailingIconClass, "text-muted-foreground");
 var menuItemHintClass = "ml-auto min-w-0 truncate pl-4 text-muted-foreground";
 var menuItemInsetClass = "pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]";

package/dist/primitives/menu-item.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.es.js","names":[],"sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter). An item shares ghost/md Button interaction\n// states, with its own reading typography and insets. `rounded-lg` lets stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none',\n  // Leading icons and trailing chevrons share a tone that follows pointer,\n  // keyboard, and held-open submenu states together with the label.\n  '[--menu-icon-color:var(--placeholder)] [&>svg]:text-(color:--menu-icon-color)',\n  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\n  // Rows in a list switch instantly: no colour fade inherited from Button.\n  'transition-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // The library's highlight (`data-highlighted`, which follows both the pointer and the\n  // arrow keys) paints the row, not `:hover`: a hovered row and a keyboard-highlighted\n  // one would otherwise both light up. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them. The fill switches instantly, like every hover.\n  'not-disabled:hover:bg-transparent not-disabled:active:bg-transparent',\n  // `not-disabled:` matches the override's specificity, so the highlight wins over it.\n  'not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill',\n  'not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80',\n  'not-disabled:hover:[--menu-icon-color:var(--muted-foreground)] data-highlighted:[--menu-icon-color:var(--muted-foreground)]',\n  'data-selected:[--menu-icon-color:var(--muted-foreground)] data-[popup-open]:[--menu-icon-color:var(--muted-foreground)]',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n  // Button pulls iconed labels toward its pill edge. A menu uses the same inset\n  // with or without an icon, so labels and submenu values follow a stable grid.\n  'has-[>svg]:px-2',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground',\n  'data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground',\n  'not-disabled:data-highlighted:bg-destructive-subtle',\n);\n\n// For rows that are plain buttons moved through with roving focus (no library\n// highlight): the row lights up on hover and on focus.\nexport const menuItemButtonClass = cn(menuItemClass, 'not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground');\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, so the Button recipe's `[&>svg]` adornment padding never treats it as a leading icon.\nexport const menuItemTrailingIconClass = cn(\n  'ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--menu-icon-color) [&>svg]:size-full',\n);\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-muted-foreground');\n\nexport const menuItemHintClass = 'ml-auto min-w-0 truncate pl-4 text-muted-foreground';\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  // `scrollbar-inset-xl` keeps a ScrollArea's scrollbar ends clear of the `rounded-xl` corners.\n  cn('rounded-xl p-1 font-body text-menu text-muted-foreground outline-none scrollbar-inset-xl', overlaySurfaceStyle),\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\n// Section labels use the same side inset as rows, including their transparent border.\nexport const menuLabelClass =\n  'px-[calc(var(--spacing)*2+1px)] pt-1.5 pb-1 text-caption tracking-normal text-muted-foreground';\n\nexport const menuLabelInsetClass = menuItemInsetClass;\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto pl-4 text-caption tracking-normal text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-control-md items-center gap-2 px-2 py-0.5 text-menu text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container: 'flex items-center gap-2 border-b border-border px-2 py-0.5 text-menu focus-within:bg-fill-subtle',\n  /** Fixed popup header: include the scroll body's inset so search and option icons align. */\n  header:\n    'flex items-center gap-2 border-b border-border px-[calc(var(--spacing)*3+1px)] py-1 text-menu focus-within:bg-fill-subtle',\n  icon: 'size-icon-md shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-menu text-muted-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"mappings":";;;;AAYA,IAAM,sBAAsB,GAC1B,yGAGA,iFAIA,gCAEA,mBAEA,oCAKA,wEAEA,gFACA,mJACA,+HACA,2HACA,+FACA,qBAGA,iBACF;AAEA,IAAa,gBAAgB,GAAG,eAAe;CAAE,SAAS;CAAS,MAAM;AAAK,CAAC,GAAG,mBAAmB;AAErG,IAAa,2BAA2B,GACtC,eAAe;CAAE,SAAS;CAAqB,MAAM;AAAK,CAAC,GAC3D,qBACA,kHACA,wIACA,qDACF;AAIA,IAAa,sBAAsB,GAAG,eAAe,gEAAgE;AAIrH,IAAa,4BAA4B,GACvC,iHACF;AAEA,IAAa,qBAAqB,GAAG,2BAA2B,uBAAuB;AAEvF,IAAa,oBAAoB;AAGjC,IAAa,qBAAqB;AAElC,IAAa,mBAAmB;AAGhC,IAAa,sBAAsB;AAInC,IAAa,iBAAiB,GAC5B,qEACA,0EACA,sEAEA,GAAG,4FAA4F,mBAAmB,GAClH,oJACA,6JACF;AAGA,IAAa,iBACX;AAEF,IAAa,sBAAsB;AAEnC,IAAa,qBAAqB;AAElC,IAAa,oBAAoB;;AAGjC,IAAa,iBACX;AAEF,IAAa,oBAAoB;CAI/B,WAAW;;CAEX,QACE;CACF,MAAM;CACN,OACE;AACJ"}
+{"version":3,"file":"menu-item.es.js","names":[],"sources":["../../src/ds/primitives/menu-item.ts"],"sourcesContent":["import { buttonVariants } from '@/ds/components/Button/Button';\nimport { overlaySurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\n// Shared recipe for items rendered inside floating menus (DropdownMenu, ContextMenu,\n// Select, Combobox, PropertyFilter). An item shares ghost/md Button interaction\n// states, with its own reading typography and insets. `rounded-lg` lets stacked items sit\n// concentrically inside a `rounded-xl p-1` popup. Base UI drives keyboard/pointer\n// highlight via `data-highlighted`, which `:hover` alone does not cover.\n// `flex` (not Button's `inline-flex`): popups size to their content (`w-max`), and\n// inline-level items would be measured side by side on one line, stretching the popup\n// to the full available width instead of the widest item.\nconst MENU_ITEM_OVERRIDES = cn(\n  'flex w-full justify-start gap-2 rounded-lg px-2 text-left text-menu text-muted-foreground select-none',\n  // Leading icons and trailing chevrons take the shared control icon rule (ghost Button's\n  // `controlIconState`), one step quieter than in a toolbar, and also follow the keyboard\n  // highlight and a held-open submenu, which a menu row has and a Button does not.\n  '[--control-icon-hover:var(--muted-foreground)] [--control-icon-rest:var(--placeholder)]',\n  // An item may carry a second line (a name over its description). The Button\n  // height becomes the floor so single-line rows keep the control rhythm and a\n  // taller item grows instead of overflowing into its neighbour.\n  'h-auto min-h-control-md py-1',\n  // Rows in a list switch instantly: no colour fade inherited from Button.\n  'transition-none',\n  // Button brightens its border on focus-visible; inside a menu the highlight is the focus cue.\n  'focus-visible:border-transparent',\n  // The library's highlight (`data-highlighted`, which follows both the pointer and the\n  // arrow keys) paints the row, not `:hover`: a hovered row and a keyboard-highlighted\n  // one would otherwise both light up. Same modifiers as Button's ghost fills so\n  // tailwind-merge drops them. The fill switches instantly, like every hover.\n  'not-disabled:hover:bg-transparent not-disabled:active:bg-transparent',\n  // `not-disabled:` matches the override's specificity, so the highlight wins over it.\n  'not-disabled:data-highlighted:bg-fill not-disabled:data-[popup-open]:bg-fill',\n  'not-disabled:hover:text-foreground/80 data-highlighted:text-foreground/80 data-selected:text-foreground/80 data-[popup-open]:text-foreground/80',\n  'data-highlighted:[--control-icon:var(--control-icon-hover)] data-selected:[--control-icon:var(--control-icon-hover)] data-[popup-open]:[--control-icon:var(--control-icon-hover)]',\n  'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',\n  '[&>span]:truncate',\n  // Button pulls iconed labels toward its pill edge. A menu uses the same inset\n  // with or without an icon, so labels and submenu values follow a stable grid.\n  'has-[>svg]:px-2',\n);\n\nexport const menuItemClass = cn(buttonVariants({ variant: 'ghost', size: 'md' }), MENU_ITEM_OVERRIDES);\n\nexport const menuItemDestructiveClass = cn(\n  buttonVariants({ variant: 'destructive-ghost', size: 'md' }),\n  MENU_ITEM_OVERRIDES,\n  'text-destructive-foreground not-disabled:hover:text-destructive-foreground [&>svg]:text-destructive-foreground',\n  'data-highlighted:text-destructive-foreground data-selected:text-destructive-foreground data-[popup-open]:text-destructive-foreground',\n  'not-disabled:data-highlighted:bg-destructive-subtle',\n);\n\n// For rows that are plain buttons moved through with roving focus (no library\n// highlight): the row lights up on hover and on focus.\nexport const menuItemButtonClass = cn(menuItemClass, 'not-disabled:hover:bg-fill focus:bg-fill focus:text-foreground');\n\n// Trailing indicator (check / submenu chevron) — applied to a wrapper element, not the\n// svg itself, so the Button recipe's `[&>svg]` adornment padding never treats it as a leading icon.\nexport const menuItemTrailingIconClass = cn(\n  'ml-auto flex size-icon-sm shrink-0 items-center justify-center text-(color:--control-icon) [&>svg]:size-full',\n);\n\nexport const menuItemCheckClass = cn(menuItemTrailingIconClass, 'text-muted-foreground');\n\nexport const menuItemHintClass = 'ml-auto min-w-0 truncate pl-4 text-muted-foreground';\n\n// Left padding matching icon width + gap, for items aligned with iconed siblings.\nexport const menuItemInsetClass = 'pl-[calc(var(--spacing-icon-md)+var(--spacing)*4+1px)]';\n\nexport const MENU_SIDE_OFFSET = 4;\n\n// A hidden anchor makes Floating UI fall back to the top-left corner, so the popup goes with it.\nexport const menuPositionerClass = 'z-50 outline-none data-[anchor-hidden]:hidden';\n\n// Width: at least the anchor (or 11rem), otherwise as wide as the widest item, never\n// wider than the space Floating UI reports. Shared by every menu-like popup.\nexport const menuPopupClass = cn(\n  'z-50 max-h-[min(var(--spacing-dropdown),var(--available-height))]',\n  'w-max max-w-(--available-width) min-w-[max(11rem,var(--anchor-width))]',\n  'origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto',\n  // `scrollbar-inset-xl` keeps a ScrollArea's scrollbar ends clear of the `rounded-xl` corners.\n  cn('rounded-xl p-1 font-body text-menu text-muted-foreground outline-none scrollbar-inset-xl', overlaySurfaceStyle),\n  'data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',\n);\n\n// Section labels use the same side inset as rows, including their transparent border.\nexport const menuLabelClass =\n  'px-[calc(var(--spacing)*2+1px)] pt-1.5 pb-1 text-caption tracking-normal text-muted-foreground';\n\nexport const menuLabelInsetClass = menuItemInsetClass;\n\nexport const menuSeparatorClass = '-mx-1 my-1 h-px bg-border';\n\nexport const menuShortcutClass = 'ml-auto pl-4 text-caption tracking-normal text-muted-foreground tabular-nums';\n\n/** Non-interactive row (empty / loading) on the same size grid as an item. */\nexport const menuEmptyClass =\n  'flex h-control-md items-center gap-2 px-2 py-0.5 text-menu text-muted-foreground box-content';\n\nexport const menuSearchClasses = {\n  // The input is a full control rung and the row adds `py-0.5` on top, so the search\n  // row sits one notch taller than an item: the divider does not crowd the first\n  // option while the text stays on the item grid.\n  container: 'flex items-center gap-2 border-b border-border px-2 py-0.5 text-menu focus-within:bg-fill-subtle',\n  /** Fixed popup header: include the scroll body's inset so search and option icons align. */\n  header:\n    'flex items-center gap-2 border-b border-border px-[calc(var(--spacing)*3+1px)] py-1 text-menu focus-within:bg-fill-subtle',\n  icon: 'size-icon-md shrink-0 text-muted-foreground',\n  input:\n    'h-control-md w-full bg-transparent text-menu text-muted-foreground outline-hidden placeholder:text-muted-foreground',\n};\n"],"mappings":";;;;AAYA,IAAM,sBAAsB,GAC1B,yGAIA,2FAIA,gCAEA,mBAEA,oCAKA,wEAEA,gFACA,mJACA,qLACA,+FACA,qBAGA,iBACF;AAEA,IAAa,gBAAgB,GAAG,eAAe;CAAE,SAAS;CAAS,MAAM;AAAK,CAAC,GAAG,mBAAmB;AAErG,IAAa,2BAA2B,GACtC,eAAe;CAAE,SAAS;CAAqB,MAAM;AAAK,CAAC,GAC3D,qBACA,kHACA,wIACA,qDACF;AAIA,IAAa,sBAAsB,GAAG,eAAe,gEAAgE;AAIrH,IAAa,4BAA4B,GACvC,8GACF;AAEA,IAAa,qBAAqB,GAAG,2BAA2B,uBAAuB;AAEvF,IAAa,oBAAoB;AAGjC,IAAa,qBAAqB;AAElC,IAAa,mBAAmB;AAGhC,IAAa,sBAAsB;AAInC,IAAa,iBAAiB,GAC5B,qEACA,0EACA,sEAEA,GAAG,4FAA4F,mBAAmB,GAClH,oJACA,6JACF;AAGA,IAAa,iBACX;AAEF,IAAa,sBAAsB;AAEnC,IAAa,qBAAqB;AAElC,IAAa,oBAAoB;;AAGjC,IAAa,iBACX;AAEF,IAAa,oBAAoB;CAI/B,WAAW;;CAEX,QACE;CACF,MAAM;CACN,OACE;AACJ"}

package/dist/primitives/trigger-button.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../rolldown-runtime-CmQyd0Gu.cjs");
 const require_utils = require("../utils-uDc1ofX1.cjs");
 const require_primitives_control_size = require("./control-size.cjs.js");
-const require_Button = require("../Button-YQRflC47.cjs");
+const require_Button = require("../Button-DLcMcuUL.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/primitives/trigger-button.es.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../utils-DQx8TpNT.js";
 import { controlTriggerOpenStateFor } from "./control-size.es.js";
-import { t as Button } from "../Button-Bw1e3ONi.js";
+import { t as Button } from "../Button-CLXTbAY8.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 // src/ds/primitives/trigger-button.tsx