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

package/dist/combobox-parts-BZVXwbG7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox-parts-BZVXwbG7.cjs","names":["cn","buttonVariants","isIconButtonSize","controlTriggerOpenState","fieldTriggerErrorBorder","cva","menuItemClass","menuPopupClass","menuPositionerClass","menuSearchClasses","menuEmptyClass","menuItemCheckClass","BaseCombobox","cn","ChevronDown","isIconButtonSize","_Fragment","iconSizeClasses","ChevronsUpDown","X","passwordManagerOptOutProps","Search","usePopupAnchor","usePortalContainer","FLOATING_POSITION_METHOD","ScrollArea","ScrollAreaViewport","Check","menuLabelClass","menuSeparatorClass","React"],"sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox-parts.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants, isIconButtonSize } from '../Button/Button';\nimport type { ButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { fieldTriggerErrorBorder, fieldTriggerStyle, fieldTriggerWidthStyle } from '@/ds/primitives/form-element';\nimport {\n  menuItemCheckClass,\n  menuItemClass,\n  menuPopupClass,\n  menuPositionerClass,\n  menuSearchClasses,\n  menuEmptyClass,\n} from '@/ds/primitives/menu-item';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the Button's size/shape recipe,\n * mirroring `SelectTrigger`: `default` (the Input's overlay surface — the\n * default here too) and `ghost` (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: ButtonSize;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    visualVariant === 'default' && fieldTriggerStyle,\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`). Icon sizes are a fixed square\n    // showing only the chevron, so they keep Button's centering.\n    !isIconButtonSize(size) && cn(fieldTriggerWidthStyle, 'justify-between'),\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-muted-foreground',\n    fieldTriggerErrorBorder,\n    className,\n  );\n}\n\n/** Options are shared menu items, which already grow to fit a second line. */\nexport const comboboxItemClass = cva(menuItemClass, {\n  variants: {\n    multiple: {\n      false: '',\n      true: '',\n    },\n  },\n  defaultVariants: {\n    multiple: false,\n  },\n});\n\nexport const comboboxStyles = {\n  /** @deprecated A `Field` lays out the combobox and its error. */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — decorative icon token shared by every field. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 text-muted-foreground',\n\n  /** Placeholder text color */\n  placeholder: 'text-muted-foreground',\n\n  /**\n   * Popup container — shared menu popup, but the search row sits edge-to-edge\n   * above the list, so padding/scrolling move to the list itself.\n   */\n  popup: cn(menuPopupClass, 'max-h-none overflow-hidden p-0'),\n\n  /** Positioner */\n  positioner: cn(menuPositionerClass, 'pointer-events-auto'),\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: menuSearchClasses.container,\n\n  /** Search icon */\n  searchIcon: menuSearchClasses.icon,\n\n  /** Search input */\n  searchInput: cn(menuSearchClasses.input, 'disabled:cursor-not-allowed disabled:opacity-50'),\n\n  /** Empty state */\n  empty: cn(menuEmptyClass, 'empty:hidden'),\n\n  /** Options list */\n  // `empty:p-0` — Empty renders outside the List, so an empty List must not leave its padding behind.\n  list: 'p-1 empty:p-0',\n\n  /** Scroll container around the List. */\n  listScroller: 'max-h-dropdown overflow-y-auto overflow-x-hidden',\n\n  /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, shown only when item is selected. */\n  checkContainer: cn(menuItemCheckClass, 'ml-0'),\n\n  /** Check icon (single select) */\n  checkIcon: 'size-full',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-caption text-muted-foreground truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** @deprecated A `FieldError` colors the error. */\n  error: 'text-body-sm text-destructive-foreground',\n} as const;\n","// Composable Combobox parts: shadcn's structure and names (https://ui.shadcn.com/docs/components/combobox),\n// built on Base UI like theirs, styled with our design system. The root is `ComboboxRoot` because\n// `Combobox` is the options-driven component in combobox.tsx.\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronDown, ChevronsUpDown, Search, X } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport { isIconButtonSize } from '@/ds/components/Button/Button';\nimport type { ButtonSize, TextButtonSize } from '@/ds/components/Button/Button';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { iconSizeClasses } from '@/ds/icons/icon-size-classes';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { menuLabelClass, menuSeparatorClass } from '@/ds/primitives/menu-item';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { usePopupAnchor } from '@/ds/primitives/popup-anchor';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport type { PortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\n/**\n * Root. Same props as Base UI's `Combobox.Root` (`items`, `value`, `onValueChange`, `multiple`,\n * `autoHighlight`, `filter`, ...). Pick one of three shapes:\n * - Search in the field: `ComboboxInput` + `ComboboxContent`.\n * - Multiple, chips in the field: `ComboboxChips` (chips + `ComboboxChipsInput`) + `ComboboxContent`.\n * - Compact trigger, search in the popup: `ComboboxTrigger` + `ComboboxContent` starting with\n *   `ComboboxSearch`. For small triggers (an icon, a ghost button in a toolbar).\n */\nfunction ComboboxRoot<Value, Multiple extends boolean | undefined = false>(\n  props: BaseCombobox.Root.Props<Value, Multiple>,\n) {\n  return <BaseCombobox.Root {...props} />;\n}\n\n/**\n * The field surface: today's trigger look, focus shown while the input inside has focus. The\n * chevron ends every field, at the same padding as today's Combobox trigger.\n */\nconst fieldClass = (size: TextButtonSize = 'md') =>\n  cn(\n    comboboxTriggerClass({ variant: 'default', size }),\n    // The Button recipe brightens icons on hover; a field's chevron stays muted.\n    'cursor-text gap-2 focus-within:[--surface-rim:var(--field-rim-focus)] not-disabled:hover:[&_svg]:text-muted-foreground',\n    // Disabled like other form elements (muted text, not-allowed cursor), keyed off the input.\n    'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-field-disabled has-[input:disabled]:[&_*]:cursor-not-allowed has-[input:disabled]:[&_*]:text-muted-foreground',\n    // The input inside carries `aria-invalid`; the field shows it like other invalid fields.\n    'has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)]',\n  );\n\n/**\n * Text starts 0.9em in (the Button recipe's padding, shared with Select and today's Combobox).\n * The chevron is a 22px circle; its arrow's ink sits 6.33px inside the circle's edge (3px circle\n * inset + 3.33px icon inset), so the end padding puts that ink 0.9em from the end, like the text.\n */\nconst fieldPx = '0.9em';\n\n/** Inline so it wins over the Button recipe's `px` (same layer, later in the sheet). */\nconst fieldStyle: React.CSSProperties = {\n  paddingInlineStart: fieldPx,\n  paddingInlineEnd: `calc(${fieldPx} - 6.33px)`,\n};\n\n/**\n * Chips sit 4px from the field's edge on top, bottom and left: 3px visible inside the 1px rim,\n * the same 3px as the gap between chips. A chip is the field height minus that padding (22px).\n */\nconst chipsFieldStyle: React.CSSProperties = {\n  // Longhands only: a `padding` shorthand here would also reset the chevron's end padding.\n  paddingBlock: '4px',\n  paddingInlineStart: '4px',\n  paddingInlineEnd: fieldStyle.paddingInlineEnd,\n};\n\n// `w-0` + `flex-1`: an input's default width (about 20 characters) would otherwise set the field's\n// minimum width, so it couldn't shrink into a narrow column.\nconst inputClass =\n  'h-full w-0 min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground';\n\n/** Caret at the end of the value instead of selecting it, the way a text field behaves. */\nfunction moveCaretToEnd(event: React.FocusEvent<HTMLInputElement>) {\n  const input = event.currentTarget;\n  // Deferred one frame so it runs after the click places the caret; clicking the label lands here too.\n  requestAnimationFrame(() => input.setSelectionRange(input.value.length, input.value.length));\n}\n\n/**\n * The selected value, for a compact `ComboboxTrigger` or a custom display. `children` can be a\n * function of the value; `placeholder` shows while nothing is selected.\n */\nfunction ComboboxValue(props: BaseCombobox.Value.Props) {\n  return <BaseCombobox.Value data-slot=\"combobox-value\" {...props} />;\n}\n\n/** The round chevron button that ends ComboboxInput and ComboboxChips. */\nfunction ComboboxFieldTrigger() {\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-field-trigger\"\n      aria-label=\"Show options\"\n      // A round button target: the circle fills on hover, the chevron keeps its color.\n      className=\"flex size-5.5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground not-data-disabled:hover:bg-fill\"\n    >\n      {/* Sized like Select's chevron: outside the icon rung, so it keeps Lucide's default stroke\n          (1.33px at 16px) instead of the rung's 1px. */}\n      <ChevronDown className=\"size-4\" />\n    </BaseCombobox.Trigger>\n  );\n}\n\ntype ComboboxTriggerProps = Omit<BaseCombobox.Trigger.Props, 'className'> & {\n  className?: string;\n  /** The Button-recipe look, like Select: `default` (field surface), `outline` or `ghost`. */\n  variant?: ComboboxVariant;\n  /** Icon sizes (`icon-*`) show only `icon` (or the chevron); `children` stay as accessible text. */\n  size?: ButtonSize;\n  /** Shown before the value, or alone at icon sizes (e.g. a filter icon), replacing the chevron there. */\n  icon?: React.ReactNode;\n  showChevron?: boolean;\n};\n\n/**\n * A compact trigger that opens the list, with the search inside the popup (`ComboboxSearch`). For\n * small triggers such as an icon or a ghost button; a form field uses ComboboxInput instead.\n * `children` is what the trigger shows, usually `<ComboboxValue placeholder=\"…\" />`.\n */\nfunction ComboboxTrigger({\n  className,\n  children,\n  variant = 'default',\n  size = 'md',\n  icon,\n  showChevron = !(icon && isIconButtonSize(size)),\n  ...props\n}: ComboboxTriggerProps) {\n  const iconOnly = isIconButtonSize(size);\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-trigger\"\n      data-shape={iconOnly ? 'icon' : undefined}\n      className={comboboxTriggerClass({ variant, size, className })}\n      {...props}\n    >\n      {isIconButtonSize(size) ? (\n        <>\n          {icon}\n          <span className=\"sr-only\">{children}</span>\n        </>\n      ) : (\n        <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n          {/* Nested past Button's `[&>svg]` sizing, so sized here to the same rung. */}\n          {icon && <span className={cn('flex shrink-0', iconSizeClasses[size])}>{icon}</span>}\n          <span className=\"truncate\">{children}</span>\n        </span>\n      )}\n      {/* Wrapped so the svg escapes Button's `[&>svg]` adornments, like today's Combobox chevron. */}\n      {showChevron ? (\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={cn(comboboxStyles.chevron, iconOnly && 'ml-0')} />\n        </span>\n      ) : null}\n    </BaseCombobox.Trigger>\n  );\n}\n\n/** An × that clears the value. ComboboxInput renders it with `showClear`. */\nfunction ComboboxClear({ className, ...props }: BaseCombobox.Clear.Props) {\n  return (\n    <BaseCombobox.Clear\n      data-slot=\"combobox-clear\"\n      aria-label=\"Clear\"\n      className={cn(\n        'flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <X className=\"size-3.5\" />\n    </BaseCombobox.Clear>\n  );\n}\n\ntype ComboboxInputProps = Omit<BaseCombobox.Input.Props, 'size'> & {\n  /** The field height, from the control sizes. `md` by default. */\n  size?: TextButtonSize;\n  /** Shown before the text, e.g. the selected item's icon. */\n  start?: React.ReactNode;\n  /** The chevron button at the end. On by default. */\n  showTrigger?: boolean;\n  /** An × before the chevron that clears the value. */\n  showClear?: boolean;\n};\n\n/**\n * The field you type in to filter, showing the selected value while it's closed. `children` render\n * inside the field before the chevron (e.g. a muted \"4 items\" detail). The list opens at the\n * field's width. Inside a `Field`, the label and errors link to it.\n */\nfunction ComboboxInput({\n  className,\n  children,\n  showTrigger = true,\n  showClear = false,\n  size,\n  start,\n  onFocus,\n  ...props\n}: ComboboxInputProps) {\n  return (\n    <BaseCombobox.InputGroup data-slot=\"combobox-input\" className={cn(fieldClass(size), className)} style={fieldStyle}>\n      {start ? <span className=\"flex shrink-0 items-center\">{start}</span> : null}\n      <BaseCombobox.Input\n        onFocus={event => {\n          moveCaretToEnd(event);\n          onFocus?.(event);\n        }}\n        className={inputClass}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n      {children ? <span className=\"flex shrink-0 items-center gap-2 text-muted-foreground\">{children}</span> : null}\n      {showClear ? <ComboboxClear /> : null}\n      {showTrigger ? <ComboboxFieldTrigger /> : null}\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/**\n * The search row at the top of the popup, for a compact `ComboboxTrigger`. The same row as today's\n * Combobox: a search icon, a borderless input and a hairline under it.\n */\nfunction ComboboxSearch({ className, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <div data-slot=\"combobox-search\" className={comboboxStyles.searchContainer}>\n      <Search className={comboboxStyles.searchIcon} />\n      <BaseCombobox.Input\n        className={cn(comboboxStyles.searchInput, className)}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n    </div>\n  );\n}\n\ntype ComboboxContentProps = BaseCombobox.Popup.Props &\n  Pick<BaseCombobox.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {\n    /** Where the popup portals to. Defaults to the nearest dialog or drawer, so it stays interactive there. */\n    container?: PortalContainer;\n  };\n\n/**\n * The popup. Under a field (ComboboxInput or ComboboxChips) it opens at the field's width; under a\n * compact ComboboxTrigger it takes the trigger's width, at least 11rem. Either way the width never\n * follows the filtered items, so it holds still while you type; long labels truncate.\n */\nfunction ComboboxContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'start',\n  alignOffset = 0,\n  anchor,\n  container,\n  ...props\n}: ComboboxContentProps) {\n  const popupAnchor = usePopupAnchor();\n  const resolvedContainer = usePortalContainer(container);\n  return (\n    <BaseCombobox.Portal container={resolvedContainer}>\n      <BaseCombobox.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        // Base UI anchors to the field (the InputGroup of ComboboxInput or ComboboxChips), or to the\n        // trigger when the input is in the popup; a crumb switcher anchors to the whole crumb.\n        anchor={anchor ?? popupAnchor}\n        positionMethod={FLOATING_POSITION_METHOD}\n        className={comboboxStyles.positioner}\n      >\n        <BaseCombobox.Popup\n          data-slot=\"combobox-content\"\n          // With the popup's `min-w-[max(11rem,var(--anchor-width))]`: the anchor's width, at least 11rem.\n          className={cn(comboboxStyles.popup, 'w-(--anchor-width)', className)}\n          {...props}\n        />\n      </BaseCombobox.Positioner>\n    </BaseCombobox.Portal>\n  );\n}\n\n/** The scrolling list. Children: a render function per item (or per group), like Base UI's List. */\nfunction ComboboxList({ className, ...props }: BaseCombobox.List.Props) {\n  return (\n    <ScrollArea maxHeight=\"var(--spacing-dropdown)\">\n      <ScrollAreaViewport className=\"scroll-py-8\">\n        <BaseCombobox.List data-slot=\"combobox-list\" className={cn(comboboxStyles.list, className)} {...props} />\n      </ScrollAreaViewport>\n    </ScrollArea>\n  );\n}\n\n/** One option. A check shows on the right while it's selected. */\nfunction ComboboxItem({ className, children, ref, ...props }: BaseCombobox.Item.Props) {\n  return (\n    <BaseCombobox.Item ref={ref} data-slot=\"combobox-item\" className={cn(comboboxItemClass({}), className)} {...props}>\n      <span className=\"flex min-w-0 flex-1 items-center gap-2\">{children}</span>\n      <span className={comboboxStyles.checkContainer}>\n        <BaseCombobox.ItemIndicator>\n          <Check className={comboboxStyles.checkIcon} />\n        </BaseCombobox.ItemIndicator>\n      </span>\n    </BaseCombobox.Item>\n  );\n}\n\n/** Title over a description inside an item (shadcn's Item / ItemTitle / ItemDescription). */\nfunction ComboboxItemContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span data-slot=\"combobox-item-content\" className={cn('flex min-w-0 flex-col gap-0.5', className)} {...props} />\n  );\n}\n\nfunction ComboboxItemTitle({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span data-slot=\"combobox-item-title\" className={cn('truncate', className)} {...props} />;\n}\n\n/** Muted, up to two lines. */\nfunction ComboboxItemDescription({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-description\"\n      // `whitespace-normal`: the item recipe's `[&>span]:truncate` makes its content `nowrap`, which\n      // would cut the description off mid-word on one line instead of clamping it at two.\n      className={cn('line-clamp-2 text-caption whitespace-normal text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted text at the end of an item, e.g. its kind (\"Agent\"). */\nfunction ComboboxItemEnd({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-end\"\n      className={cn('ml-auto shrink-0 text-caption text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** A section of items. Pass the section's `items`; render them with ComboboxCollection. */\nfunction ComboboxGroup(props: BaseCombobox.Group.Props) {\n  return <BaseCombobox.Group data-slot=\"combobox-group\" {...props} />;\n}\n\n/** A group's heading, styled like menu section labels. */\nfunction ComboboxLabel({ className, ...props }: BaseCombobox.GroupLabel.Props) {\n  return <BaseCombobox.GroupLabel data-slot=\"combobox-label\" className={cn(menuLabelClass, className)} {...props} />;\n}\n\n/** Renders a group's filtered items, one render function call per item. */\nfunction ComboboxCollection(props: BaseCombobox.Collection.Props) {\n  return <BaseCombobox.Collection data-slot=\"combobox-collection\" {...props} />;\n}\n\n/** Shows its children only when the filter matches nothing. */\nfunction ComboboxEmpty({ className, ...props }: BaseCombobox.Empty.Props) {\n  return <BaseCombobox.Empty data-slot=\"combobox-empty\" className={cn(comboboxStyles.empty, className)} {...props} />;\n}\n\nfunction ComboboxSeparator({ className, ...props }: BaseCombobox.Separator.Props) {\n  return (\n    <BaseCombobox.Separator data-slot=\"combobox-separator\" className={cn(menuSeparatorClass, className)} {...props} />\n  );\n}\n\n/**\n * Multi-select field: chips for the picked items, then ComboboxChipsInput. The chips and input wrap\n * inside their own area so the chevron keeps its place on the first row. While the field is one\n * line it keeps the pill shape of every other field; once chips wrap it takes the Textarea corner.\n */\nfunction ComboboxChips({ className, children, 'aria-label': ariaLabel, ...props }: BaseCombobox.InputGroup.Props) {\n  // On the inner chips area, so a caller's `ref` reaches the field without merging refs.\n  const chipsRef = React.useRef<HTMLDivElement>(null);\n  const [multiline, setMultiline] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const field = chipsRef.current?.parentElement;\n    // No observer (e.g. jsdom in tests): the field keeps its one-row shape.\n    if (!field || typeof ResizeObserver === 'undefined') return;\n    // One row is the control height (the field's `min-height`); anything taller means the chips wrapped.\n    // The 1px slack absorbs subpixel rounding.\n    const rowHeight = parseFloat(getComputedStyle(field).minHeight) || 0;\n    const observer = new ResizeObserver(() => setMultiline(field.offsetHeight > rowHeight + 1));\n    observer.observe(field);\n    return () => observer.disconnect();\n  }, []);\n\n  // Chips inside an InputGroup, like Base UI's multi-select example: the popup anchors to the group.\n  return (\n    <BaseCombobox.InputGroup\n      data-slot=\"combobox-chips\"\n      data-multiline={multiline ? '' : undefined}\n      style={chipsFieldStyle}\n      className={cn(\n        fieldClass(),\n        'h-auto min-h-control-md items-start data-multiline:rounded-xl',\n        // The chips field keeps its resting look: no open tint, no placeholder color. InputGroup sets those\n        // attributes, which the trigger recipe styles.\n        'data-[placeholder]:text-foreground data-[popup-open]:[--surface-tint:transparent]',\n        className,\n      )}\n      {...props}\n    >\n      {/* The label names the chips toolbar, as it did when Chips was the outer element. */}\n      <BaseCombobox.Chips ref={chipsRef} aria-label={ariaLabel} className=\"flex min-w-0 flex-1 flex-wrap gap-[3px]\">\n        {children}\n      </BaseCombobox.Chips>\n      {/* Same height as a chip, so the chevron centers on the first row. */}\n      <span className=\"flex h-5.5 shrink-0 items-center\">\n        <ComboboxFieldTrigger />\n      </span>\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/** One picked item inside ComboboxChips. The × (or Backspace in the input) removes it. */\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: BaseCombobox.Chip.Props & { showRemove?: boolean }) {\n  return (\n    <BaseCombobox.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        // 8px from the left edge to the text, 6px from the text to the ×'s ink, 8px from the ink to\n        // the right edge. Text in the controls' role (`text-label`), like the field value.\n        'flex h-5.5 items-center rounded-full bg-fill pl-2 text-label text-foreground',\n        !showRemove && 'pr-2',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove ? (\n        <BaseCombobox.ChipRemove\n          data-slot=\"combobox-chip-remove\"\n          aria-label={typeof children === 'string' ? `Remove ${children}` : 'Remove'}\n          // The whole right end is the hit area: full height, from the gap to the chip's edge. The ×'s\n          // ink sits 2.5px inside its 12px icon, so 3.5px / 5.5px padding put it 6px / 8px out.\n          className=\"flex h-full cursor-pointer items-center rounded-r-full pr-[5.5px] pl-[3.5px] text-muted-foreground not-data-disabled:hover:text-foreground\"\n        >\n          {/* Inline so the button's color wins over the field's `[&_svg]` icon colors. */}\n          <X className=\"size-3\" style={{ color: 'inherit' }} />\n        </BaseCombobox.ChipRemove>\n      ) : null}\n    </BaseCombobox.Chip>\n  );\n}\n\n/** The text input after the chips in ComboboxChips. */\nfunction ComboboxChipsInput({ className, onFocus, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <BaseCombobox.Input\n      data-slot=\"combobox-chip-input\"\n      onFocus={event => {\n        moveCaretToEnd(event);\n        onFocus?.(event);\n      }}\n      className={cn(\n        inputClass,\n        // Text lines up with other fields' text when there are no chips; 4px after a chip otherwise.\n        // Not `first:`: Base UI inserts a hidden Dismiss element before the input while open.\n        'h-5.5 w-0 min-w-12 flex-1 pl-[calc(0.9em_-_4px)] [[data-slot=combobox-chip]~&]:pl-1',\n        className,\n      )}\n      {...passwordManagerOptOutProps}\n      {...props}\n    />\n  );\n}\n\nexport type { ComboboxTriggerProps, ComboboxInputProps, ComboboxContentProps };\n\nexport {\n  ComboboxRoot,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxSearch,\n  ComboboxValue,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxItemContent,\n  ComboboxItemTitle,\n  ComboboxItemDescription,\n  ComboboxItemEnd,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n};\n"],"mappings":"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"}

package/dist/combobox-parts-W7KRQUsV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox-parts-W7KRQUsV.js","names":["BaseCombobox","_Fragment","React"],"sources":["../src/ds/components/Combobox/combobox-styles.ts","../src/ds/components/Combobox/combobox-parts.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { buttonVariants, isIconButtonSize } from '../Button/Button';\nimport type { ButtonSize } from '../Button/Button';\nimport { controlTriggerOpenState } from '@/ds/primitives/control-size';\nimport type { ControlTriggerVisualVariant } from '@/ds/primitives/control-size';\nimport { fieldTriggerErrorBorder, fieldTriggerStyle, fieldTriggerWidthStyle } from '@/ds/primitives/form-element';\nimport {\n  menuItemCheckClass,\n  menuItemClass,\n  menuPopupClass,\n  menuPositionerClass,\n  menuSearchClasses,\n  menuEmptyClass,\n} from '@/ds/primitives/menu-item';\nimport { cn } from '@/lib/utils';\n\n/**\n * A combobox is a form field, so it reuses the Button's size/shape recipe,\n * mirroring `SelectTrigger`: `default` (the Input's overlay surface — the\n * default here too) and `ghost` (borderless, for breadcrumbs/inline pickers). Only the high-emphasis `primary`\n * look is intentionally NOT offered (a field is not a call-to-action).\n */\nexport type ComboboxVisualVariant = ControlTriggerVisualVariant;\nexport type ComboboxLegacyVariant = 'link';\nexport type ComboboxVariant = ComboboxVisualVariant | ComboboxLegacyVariant;\n\nfunction normalizeComboboxVariant(variant: ComboboxVariant): ComboboxVisualVariant {\n  return variant === 'link' ? 'ghost' : variant;\n}\n\n/**\n * Single source of truth for both the single- and multi-select combobox\n * triggers. A combobox = a button + a trailing chevron, so it reuses the Button\n * recipe (variant colors, size = height/text/padding/radius, unified border\n * focus, disabled) and layers only the combobox-specific extras — exactly like\n * `SelectTrigger`.\n */\nexport function comboboxTriggerClass({\n  variant,\n  size,\n  className,\n}: {\n  variant: ComboboxVariant;\n  size: ButtonSize;\n  className?: string;\n}): string {\n  const visualVariant = normalizeComboboxVariant(variant);\n\n  return cn(\n    buttonVariants({ variant: visualVariant, size }),\n    visualVariant === 'default' && fieldTriggerStyle,\n    // Fill the field and push the value left / chevron right (Button's base\n    // centers its content with `justify-center`). Icon sizes are a fixed square\n    // showing only the chevron, so they keep Button's centering.\n    !isIconButtonSize(size) && cn(fieldTriggerWidthStyle, 'justify-between'),\n    // Read as \"active\" while the popup is open, per variant (see map above).\n    controlTriggerOpenState[visualVariant],\n    'data-[placeholder]:text-muted-foreground',\n    fieldTriggerErrorBorder,\n    className,\n  );\n}\n\n/** Options are shared menu items, which already grow to fit a second line. */\nexport const comboboxItemClass = cva(menuItemClass, {\n  variants: {\n    multiple: {\n      false: '',\n      true: '',\n    },\n  },\n  defaultVariants: {\n    multiple: false,\n  },\n});\n\nexport const comboboxStyles = {\n  /** @deprecated A `Field` lays out the combobox and its error. */\n  root: 'flex flex-col gap-1.5',\n\n  /** Chevron icon in trigger — decorative icon token shared by every field. */\n  chevron: 'ml-2 h-4 w-4 shrink-0 text-muted-foreground',\n\n  /** Placeholder text color */\n  placeholder: 'text-muted-foreground',\n\n  /**\n   * Popup container — shared menu popup, but the search row sits edge-to-edge\n   * above the list, so padding/scrolling move to the list itself.\n   */\n  popup: cn(menuPopupClass, 'max-h-none overflow-hidden p-0'),\n\n  /** Positioner */\n  positioner: cn(menuPositionerClass, 'pointer-events-auto'),\n\n  /** Search input container — borderless top section, hairline divider below. */\n  searchContainer: menuSearchClasses.container,\n\n  /** Search icon */\n  searchIcon: menuSearchClasses.icon,\n\n  /** Search input */\n  searchInput: cn(menuSearchClasses.input, 'disabled:cursor-not-allowed disabled:opacity-50'),\n\n  /** Empty state */\n  empty: cn(menuEmptyClass, 'empty:hidden'),\n\n  /** Options list */\n  // `empty:p-0` — Empty renders outside the List, so an empty List must not leave its padding behind.\n  list: 'p-1 empty:p-0',\n\n  /** Scroll container around the List. */\n  listScroller: 'max-h-dropdown overflow-y-auto overflow-x-hidden',\n\n  /** Option item base — rounded-lg sits concentrically inside rounded-xl + p-1. */\n  item: comboboxItemClass({ multiple: false }),\n\n  /** Multi-select item — same item rhythm with a right-aligned selected check. */\n  itemMulti: comboboxItemClass({ multiple: true }),\n\n  /** Right-aligned slot grouping end content + selection check. */\n  itemRightSlot: 'ml-auto flex items-center gap-2 shrink-0',\n\n  /** Check indicator container — inline, shown only when item is selected. */\n  checkContainer: cn(menuItemCheckClass, 'ml-0'),\n\n  /** Check icon (single select) */\n  checkIcon: 'size-full',\n\n  /** Option label/description wrapper */\n  optionText: 'flex flex-col gap-0.5 min-w-0',\n\n  /** Option label */\n  optionLabel: 'truncate',\n\n  /** Option description */\n  optionDescription: 'text-caption text-muted-foreground truncate',\n\n  /** Option end slot — `ml-auto` makes it push right inside flex containers (used by multi-select). */\n  optionEnd: 'ml-auto flex items-center shrink-0',\n\n  /** @deprecated A `FieldError` colors the error. */\n  error: 'text-body-sm text-destructive-foreground',\n} as const;\n","// Composable Combobox parts: shadcn's structure and names (https://ui.shadcn.com/docs/components/combobox),\n// built on Base UI like theirs, styled with our design system. The root is `ComboboxRoot` because\n// `Combobox` is the options-driven component in combobox.tsx.\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronDown, ChevronsUpDown, Search, X } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport { isIconButtonSize } from '@/ds/components/Button/Button';\nimport type { ButtonSize, TextButtonSize } from '@/ds/components/Button/Button';\nimport { ScrollArea, ScrollAreaViewport } from '@/ds/components/ScrollArea';\nimport { iconSizeClasses } from '@/ds/icons/icon-size-classes';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { menuLabelClass, menuSeparatorClass } from '@/ds/primitives/menu-item';\nimport { passwordManagerOptOutProps } from '@/ds/primitives/password-manager-autofill';\nimport { usePopupAnchor } from '@/ds/primitives/popup-anchor';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport type { PortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\n/**\n * Root. Same props as Base UI's `Combobox.Root` (`items`, `value`, `onValueChange`, `multiple`,\n * `autoHighlight`, `filter`, ...). Pick one of three shapes:\n * - Search in the field: `ComboboxInput` + `ComboboxContent`.\n * - Multiple, chips in the field: `ComboboxChips` (chips + `ComboboxChipsInput`) + `ComboboxContent`.\n * - Compact trigger, search in the popup: `ComboboxTrigger` + `ComboboxContent` starting with\n *   `ComboboxSearch`. For small triggers (an icon, a ghost button in a toolbar).\n */\nfunction ComboboxRoot<Value, Multiple extends boolean | undefined = false>(\n  props: BaseCombobox.Root.Props<Value, Multiple>,\n) {\n  return <BaseCombobox.Root {...props} />;\n}\n\n/**\n * The field surface: today's trigger look, focus shown while the input inside has focus. The\n * chevron ends every field, at the same padding as today's Combobox trigger.\n */\nconst fieldClass = (size: TextButtonSize = 'md') =>\n  cn(\n    comboboxTriggerClass({ variant: 'default', size }),\n    // The Button recipe brightens icons on hover; a field's chevron stays muted.\n    'cursor-text gap-2 focus-within:[--surface-rim:var(--field-rim-focus)] not-disabled:hover:[&_svg]:text-muted-foreground',\n    // Disabled like other form elements (muted text, not-allowed cursor), keyed off the input.\n    'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-field-disabled has-[input:disabled]:[&_*]:cursor-not-allowed has-[input:disabled]:[&_*]:text-muted-foreground',\n    // The input inside carries `aria-invalid`; the field shows it like other invalid fields.\n    'has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)]',\n  );\n\n/**\n * Text starts 0.9em in (the Button recipe's padding, shared with Select and today's Combobox).\n * The chevron is a 22px circle; its arrow's ink sits 6.33px inside the circle's edge (3px circle\n * inset + 3.33px icon inset), so the end padding puts that ink 0.9em from the end, like the text.\n */\nconst fieldPx = '0.9em';\n\n/** Inline so it wins over the Button recipe's `px` (same layer, later in the sheet). */\nconst fieldStyle: React.CSSProperties = {\n  paddingInlineStart: fieldPx,\n  paddingInlineEnd: `calc(${fieldPx} - 6.33px)`,\n};\n\n/**\n * Chips sit 4px from the field's edge on top, bottom and left: 3px visible inside the 1px rim,\n * the same 3px as the gap between chips. A chip is the field height minus that padding (22px).\n */\nconst chipsFieldStyle: React.CSSProperties = {\n  // Longhands only: a `padding` shorthand here would also reset the chevron's end padding.\n  paddingBlock: '4px',\n  paddingInlineStart: '4px',\n  paddingInlineEnd: fieldStyle.paddingInlineEnd,\n};\n\n// `w-0` + `flex-1`: an input's default width (about 20 characters) would otherwise set the field's\n// minimum width, so it couldn't shrink into a narrow column.\nconst inputClass =\n  'h-full w-0 min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground';\n\n/** Caret at the end of the value instead of selecting it, the way a text field behaves. */\nfunction moveCaretToEnd(event: React.FocusEvent<HTMLInputElement>) {\n  const input = event.currentTarget;\n  // Deferred one frame so it runs after the click places the caret; clicking the label lands here too.\n  requestAnimationFrame(() => input.setSelectionRange(input.value.length, input.value.length));\n}\n\n/**\n * The selected value, for a compact `ComboboxTrigger` or a custom display. `children` can be a\n * function of the value; `placeholder` shows while nothing is selected.\n */\nfunction ComboboxValue(props: BaseCombobox.Value.Props) {\n  return <BaseCombobox.Value data-slot=\"combobox-value\" {...props} />;\n}\n\n/** The round chevron button that ends ComboboxInput and ComboboxChips. */\nfunction ComboboxFieldTrigger() {\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-field-trigger\"\n      aria-label=\"Show options\"\n      // A round button target: the circle fills on hover, the chevron keeps its color.\n      className=\"flex size-5.5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground not-data-disabled:hover:bg-fill\"\n    >\n      {/* Sized like Select's chevron: outside the icon rung, so it keeps Lucide's default stroke\n          (1.33px at 16px) instead of the rung's 1px. */}\n      <ChevronDown className=\"size-4\" />\n    </BaseCombobox.Trigger>\n  );\n}\n\ntype ComboboxTriggerProps = Omit<BaseCombobox.Trigger.Props, 'className'> & {\n  className?: string;\n  /** The Button-recipe look, like Select: `default` (field surface), `outline` or `ghost`. */\n  variant?: ComboboxVariant;\n  /** Icon sizes (`icon-*`) show only `icon` (or the chevron); `children` stay as accessible text. */\n  size?: ButtonSize;\n  /** Shown before the value, or alone at icon sizes (e.g. a filter icon), replacing the chevron there. */\n  icon?: React.ReactNode;\n  showChevron?: boolean;\n};\n\n/**\n * A compact trigger that opens the list, with the search inside the popup (`ComboboxSearch`). For\n * small triggers such as an icon or a ghost button; a form field uses ComboboxInput instead.\n * `children` is what the trigger shows, usually `<ComboboxValue placeholder=\"…\" />`.\n */\nfunction ComboboxTrigger({\n  className,\n  children,\n  variant = 'default',\n  size = 'md',\n  icon,\n  showChevron = !(icon && isIconButtonSize(size)),\n  ...props\n}: ComboboxTriggerProps) {\n  const iconOnly = isIconButtonSize(size);\n  return (\n    <BaseCombobox.Trigger\n      data-slot=\"combobox-trigger\"\n      data-shape={iconOnly ? 'icon' : undefined}\n      className={comboboxTriggerClass({ variant, size, className })}\n      {...props}\n    >\n      {isIconButtonSize(size) ? (\n        <>\n          {icon}\n          <span className=\"sr-only\">{children}</span>\n        </>\n      ) : (\n        <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n          {/* Nested past Button's `[&>svg]` sizing, so sized here to the same rung. */}\n          {icon && <span className={cn('flex shrink-0', iconSizeClasses[size])}>{icon}</span>}\n          <span className=\"truncate\">{children}</span>\n        </span>\n      )}\n      {/* Wrapped so the svg escapes Button's `[&>svg]` adornments, like today's Combobox chevron. */}\n      {showChevron ? (\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={cn(comboboxStyles.chevron, iconOnly && 'ml-0')} />\n        </span>\n      ) : null}\n    </BaseCombobox.Trigger>\n  );\n}\n\n/** An × that clears the value. ComboboxInput renders it with `showClear`. */\nfunction ComboboxClear({ className, ...props }: BaseCombobox.Clear.Props) {\n  return (\n    <BaseCombobox.Clear\n      data-slot=\"combobox-clear\"\n      aria-label=\"Clear\"\n      className={cn(\n        'flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <X className=\"size-3.5\" />\n    </BaseCombobox.Clear>\n  );\n}\n\ntype ComboboxInputProps = Omit<BaseCombobox.Input.Props, 'size'> & {\n  /** The field height, from the control sizes. `md` by default. */\n  size?: TextButtonSize;\n  /** Shown before the text, e.g. the selected item's icon. */\n  start?: React.ReactNode;\n  /** The chevron button at the end. On by default. */\n  showTrigger?: boolean;\n  /** An × before the chevron that clears the value. */\n  showClear?: boolean;\n};\n\n/**\n * The field you type in to filter, showing the selected value while it's closed. `children` render\n * inside the field before the chevron (e.g. a muted \"4 items\" detail). The list opens at the\n * field's width. Inside a `Field`, the label and errors link to it.\n */\nfunction ComboboxInput({\n  className,\n  children,\n  showTrigger = true,\n  showClear = false,\n  size,\n  start,\n  onFocus,\n  ...props\n}: ComboboxInputProps) {\n  return (\n    <BaseCombobox.InputGroup data-slot=\"combobox-input\" className={cn(fieldClass(size), className)} style={fieldStyle}>\n      {start ? <span className=\"flex shrink-0 items-center\">{start}</span> : null}\n      <BaseCombobox.Input\n        onFocus={event => {\n          moveCaretToEnd(event);\n          onFocus?.(event);\n        }}\n        className={inputClass}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n      {children ? <span className=\"flex shrink-0 items-center gap-2 text-muted-foreground\">{children}</span> : null}\n      {showClear ? <ComboboxClear /> : null}\n      {showTrigger ? <ComboboxFieldTrigger /> : null}\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/**\n * The search row at the top of the popup, for a compact `ComboboxTrigger`. The same row as today's\n * Combobox: a search icon, a borderless input and a hairline under it.\n */\nfunction ComboboxSearch({ className, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <div data-slot=\"combobox-search\" className={comboboxStyles.searchContainer}>\n      <Search className={comboboxStyles.searchIcon} />\n      <BaseCombobox.Input\n        className={cn(comboboxStyles.searchInput, className)}\n        {...passwordManagerOptOutProps}\n        {...props}\n      />\n    </div>\n  );\n}\n\ntype ComboboxContentProps = BaseCombobox.Popup.Props &\n  Pick<BaseCombobox.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {\n    /** Where the popup portals to. Defaults to the nearest dialog or drawer, so it stays interactive there. */\n    container?: PortalContainer;\n  };\n\n/**\n * The popup. Under a field (ComboboxInput or ComboboxChips) it opens at the field's width; under a\n * compact ComboboxTrigger it takes the trigger's width, at least 11rem. Either way the width never\n * follows the filtered items, so it holds still while you type; long labels truncate.\n */\nfunction ComboboxContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'start',\n  alignOffset = 0,\n  anchor,\n  container,\n  ...props\n}: ComboboxContentProps) {\n  const popupAnchor = usePopupAnchor();\n  const resolvedContainer = usePortalContainer(container);\n  return (\n    <BaseCombobox.Portal container={resolvedContainer}>\n      <BaseCombobox.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        // Base UI anchors to the field (the InputGroup of ComboboxInput or ComboboxChips), or to the\n        // trigger when the input is in the popup; a crumb switcher anchors to the whole crumb.\n        anchor={anchor ?? popupAnchor}\n        positionMethod={FLOATING_POSITION_METHOD}\n        className={comboboxStyles.positioner}\n      >\n        <BaseCombobox.Popup\n          data-slot=\"combobox-content\"\n          // With the popup's `min-w-[max(11rem,var(--anchor-width))]`: the anchor's width, at least 11rem.\n          className={cn(comboboxStyles.popup, 'w-(--anchor-width)', className)}\n          {...props}\n        />\n      </BaseCombobox.Positioner>\n    </BaseCombobox.Portal>\n  );\n}\n\n/** The scrolling list. Children: a render function per item (or per group), like Base UI's List. */\nfunction ComboboxList({ className, ...props }: BaseCombobox.List.Props) {\n  return (\n    <ScrollArea maxHeight=\"var(--spacing-dropdown)\">\n      <ScrollAreaViewport className=\"scroll-py-8\">\n        <BaseCombobox.List data-slot=\"combobox-list\" className={cn(comboboxStyles.list, className)} {...props} />\n      </ScrollAreaViewport>\n    </ScrollArea>\n  );\n}\n\n/** One option. A check shows on the right while it's selected. */\nfunction ComboboxItem({ className, children, ref, ...props }: BaseCombobox.Item.Props) {\n  return (\n    <BaseCombobox.Item ref={ref} data-slot=\"combobox-item\" className={cn(comboboxItemClass({}), className)} {...props}>\n      <span className=\"flex min-w-0 flex-1 items-center gap-2\">{children}</span>\n      <span className={comboboxStyles.checkContainer}>\n        <BaseCombobox.ItemIndicator>\n          <Check className={comboboxStyles.checkIcon} />\n        </BaseCombobox.ItemIndicator>\n      </span>\n    </BaseCombobox.Item>\n  );\n}\n\n/** Title over a description inside an item (shadcn's Item / ItemTitle / ItemDescription). */\nfunction ComboboxItemContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span data-slot=\"combobox-item-content\" className={cn('flex min-w-0 flex-col gap-0.5', className)} {...props} />\n  );\n}\n\nfunction ComboboxItemTitle({ className, ...props }: React.ComponentProps<'span'>) {\n  return <span data-slot=\"combobox-item-title\" className={cn('truncate', className)} {...props} />;\n}\n\n/** Muted, up to two lines. */\nfunction ComboboxItemDescription({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-description\"\n      // `whitespace-normal`: the item recipe's `[&>span]:truncate` makes its content `nowrap`, which\n      // would cut the description off mid-word on one line instead of clamping it at two.\n      className={cn('line-clamp-2 text-caption whitespace-normal text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted text at the end of an item, e.g. its kind (\"Agent\"). */\nfunction ComboboxItemEnd({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"combobox-item-end\"\n      className={cn('ml-auto shrink-0 text-caption text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\n/** A section of items. Pass the section's `items`; render them with ComboboxCollection. */\nfunction ComboboxGroup(props: BaseCombobox.Group.Props) {\n  return <BaseCombobox.Group data-slot=\"combobox-group\" {...props} />;\n}\n\n/** A group's heading, styled like menu section labels. */\nfunction ComboboxLabel({ className, ...props }: BaseCombobox.GroupLabel.Props) {\n  return <BaseCombobox.GroupLabel data-slot=\"combobox-label\" className={cn(menuLabelClass, className)} {...props} />;\n}\n\n/** Renders a group's filtered items, one render function call per item. */\nfunction ComboboxCollection(props: BaseCombobox.Collection.Props) {\n  return <BaseCombobox.Collection data-slot=\"combobox-collection\" {...props} />;\n}\n\n/** Shows its children only when the filter matches nothing. */\nfunction ComboboxEmpty({ className, ...props }: BaseCombobox.Empty.Props) {\n  return <BaseCombobox.Empty data-slot=\"combobox-empty\" className={cn(comboboxStyles.empty, className)} {...props} />;\n}\n\nfunction ComboboxSeparator({ className, ...props }: BaseCombobox.Separator.Props) {\n  return (\n    <BaseCombobox.Separator data-slot=\"combobox-separator\" className={cn(menuSeparatorClass, className)} {...props} />\n  );\n}\n\n/**\n * Multi-select field: chips for the picked items, then ComboboxChipsInput. The chips and input wrap\n * inside their own area so the chevron keeps its place on the first row. While the field is one\n * line it keeps the pill shape of every other field; once chips wrap it takes the Textarea corner.\n */\nfunction ComboboxChips({ className, children, 'aria-label': ariaLabel, ...props }: BaseCombobox.InputGroup.Props) {\n  // On the inner chips area, so a caller's `ref` reaches the field without merging refs.\n  const chipsRef = React.useRef<HTMLDivElement>(null);\n  const [multiline, setMultiline] = React.useState(false);\n\n  React.useLayoutEffect(() => {\n    const field = chipsRef.current?.parentElement;\n    // No observer (e.g. jsdom in tests): the field keeps its one-row shape.\n    if (!field || typeof ResizeObserver === 'undefined') return;\n    // One row is the control height (the field's `min-height`); anything taller means the chips wrapped.\n    // The 1px slack absorbs subpixel rounding.\n    const rowHeight = parseFloat(getComputedStyle(field).minHeight) || 0;\n    const observer = new ResizeObserver(() => setMultiline(field.offsetHeight > rowHeight + 1));\n    observer.observe(field);\n    return () => observer.disconnect();\n  }, []);\n\n  // Chips inside an InputGroup, like Base UI's multi-select example: the popup anchors to the group.\n  return (\n    <BaseCombobox.InputGroup\n      data-slot=\"combobox-chips\"\n      data-multiline={multiline ? '' : undefined}\n      style={chipsFieldStyle}\n      className={cn(\n        fieldClass(),\n        'h-auto min-h-control-md items-start data-multiline:rounded-xl',\n        // The chips field keeps its resting look: no open tint, no placeholder color. InputGroup sets those\n        // attributes, which the trigger recipe styles.\n        'data-[placeholder]:text-foreground data-[popup-open]:[--surface-tint:transparent]',\n        className,\n      )}\n      {...props}\n    >\n      {/* The label names the chips toolbar, as it did when Chips was the outer element. */}\n      <BaseCombobox.Chips ref={chipsRef} aria-label={ariaLabel} className=\"flex min-w-0 flex-1 flex-wrap gap-[3px]\">\n        {children}\n      </BaseCombobox.Chips>\n      {/* Same height as a chip, so the chevron centers on the first row. */}\n      <span className=\"flex h-5.5 shrink-0 items-center\">\n        <ComboboxFieldTrigger />\n      </span>\n    </BaseCombobox.InputGroup>\n  );\n}\n\n/** One picked item inside ComboboxChips. The × (or Backspace in the input) removes it. */\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: BaseCombobox.Chip.Props & { showRemove?: boolean }) {\n  return (\n    <BaseCombobox.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        // 8px from the left edge to the text, 6px from the text to the ×'s ink, 8px from the ink to\n        // the right edge. Text in the controls' role (`text-label`), like the field value.\n        'flex h-5.5 items-center rounded-full bg-fill pl-2 text-label text-foreground',\n        !showRemove && 'pr-2',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove ? (\n        <BaseCombobox.ChipRemove\n          data-slot=\"combobox-chip-remove\"\n          aria-label={typeof children === 'string' ? `Remove ${children}` : 'Remove'}\n          // The whole right end is the hit area: full height, from the gap to the chip's edge. The ×'s\n          // ink sits 2.5px inside its 12px icon, so 3.5px / 5.5px padding put it 6px / 8px out.\n          className=\"flex h-full cursor-pointer items-center rounded-r-full pr-[5.5px] pl-[3.5px] text-muted-foreground not-data-disabled:hover:text-foreground\"\n        >\n          {/* Inline so the button's color wins over the field's `[&_svg]` icon colors. */}\n          <X className=\"size-3\" style={{ color: 'inherit' }} />\n        </BaseCombobox.ChipRemove>\n      ) : null}\n    </BaseCombobox.Chip>\n  );\n}\n\n/** The text input after the chips in ComboboxChips. */\nfunction ComboboxChipsInput({ className, onFocus, ...props }: BaseCombobox.Input.Props) {\n  return (\n    <BaseCombobox.Input\n      data-slot=\"combobox-chip-input\"\n      onFocus={event => {\n        moveCaretToEnd(event);\n        onFocus?.(event);\n      }}\n      className={cn(\n        inputClass,\n        // Text lines up with other fields' text when there are no chips; 4px after a chip otherwise.\n        // Not `first:`: Base UI inserts a hidden Dismiss element before the input while open.\n        'h-5.5 w-0 min-w-12 flex-1 pl-[calc(0.9em_-_4px)] [[data-slot=combobox-chip]~&]:pl-1',\n        className,\n      )}\n      {...passwordManagerOptOutProps}\n      {...props}\n    />\n  );\n}\n\nexport type { ComboboxTriggerProps, ComboboxInputProps, ComboboxContentProps };\n\nexport {\n  ComboboxRoot,\n  ComboboxInput,\n  ComboboxTrigger,\n  ComboboxSearch,\n  ComboboxValue,\n  ComboboxClear,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxItemContent,\n  ComboboxItemTitle,\n  ComboboxItemDescription,\n  ComboboxItemEnd,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n};\n"],"mappings":"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"}

package/dist/components/ButtonsGroup.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonsGroup.cjs.js","names":["React","ControlSizeContext","cn"],"sources":["../../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport * as React from 'react';\n\nimport { ControlSizeContext } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  /**\n   * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a\n   * segment off the group's rung, so a group can never render with a step in it.\n   */\n  size?: ControlSize;\n};\n\n/** Joins related actions into one pill. To pick one of several options, use `SegmentedControl` instead. */\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', size = 'md', ...props }, ref) => {\n    return (\n      <ControlSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          data-size={size}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ControlSizeContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\n// No size of its own: a text segment only exists inside a group, and the group sets the\n// height. `text-label` is the type role at every rung (see `controlSizeClasses`), so the\n// box grows and the type does not.\nconst buttonsGroupTextClassName = cn(\n  'inline-flex items-center justify-center border border-border bg-card text-foreground select-none',\n  'shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap',\n  '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div ref={ref} data-slot=\"buttons-group-text\" className={cn(buttonsGroupTextClassName, className)} {...props} />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"mappings":";;;;;;;;;AAmBA,IAAa,eAAeA,MAAM,YAC/B,EAAE,UAAU,WAAW,cAAc,cAAc,OAAO,MAAM,GAAG,SAAS,QAAQ;CACnF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gCAAAA,mBAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACO;GACL,MAAK;GACL,aAAU;GACV,oBAAkB;GAClB,aAAW;GACX,WAAWC,cAAAA,GAAG,4BAA4B,gBAAgB,aAAa,aAAa,YAAY,SAAS;GACzG,GAAI;GAEH;EACE,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,aAAa,cAAc;AAK3B,IAAM,4BAA4BA,cAAAA,GAChC,oGACA,2EACA,yCACF;AAIA,IAAa,mBAAmBF,MAAM,YACnC,EAAE,WAAW,GAAG,SAAS,QAAQ;CAChC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAU;EAAK,aAAU;EAAqB,WAAWE,cAAAA,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnH,CACF;AACA,iBAAiB,cAAc"}

package/dist/components/ButtonsGroup.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonsGroup.es.js","names":["React"],"sources":["../../src/ds/components/ButtonsGroup/buttons-group.tsx"],"sourcesContent":["import './buttons-group.css';\nimport * as React from 'react';\n\nimport { ControlSizeContext } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport { cn } from '@/lib/utils';\n\ntype Orientation = 'horizontal' | 'vertical';\n\nexport type ButtonsGroupProps = React.ComponentPropsWithoutRef<'div'> & {\n  orientation?: Orientation;\n  /**\n   * The rung every segment sits on. The group owns it: a child's own `size` cannot lift a\n   * segment off the group's rung, so a group can never render with a step in it.\n   */\n  size?: ControlSize;\n};\n\n/** Joins related actions into one pill. To pick one of several options, use `SegmentedControl` instead. */\nexport const ButtonsGroup = React.forwardRef<HTMLDivElement, ButtonsGroupProps>(\n  ({ children, className, orientation = 'horizontal', size = 'md', ...props }, ref) => {\n    return (\n      <ControlSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          role=\"group\"\n          data-slot=\"buttons-group\"\n          data-orientation={orientation}\n          data-size={size}\n          className={cn('flex w-fit items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </ControlSizeContext.Provider>\n    );\n  },\n);\nButtonsGroup.displayName = 'ButtonsGroup';\n\n// No size of its own: a text segment only exists inside a group, and the group sets the\n// height. `text-label` is the type role at every rung (see `controlSizeClasses`), so the\n// box grows and the type does not.\nconst buttonsGroupTextClassName = cn(\n  'inline-flex items-center justify-center border border-border bg-card text-foreground select-none',\n  'shrink-0 gap-[.75em] rounded-full px-[1em] text-label whitespace-nowrap',\n  '[&>svg]:size-[1.1em] [&>svg]:opacity-50',\n);\n\nexport type ButtonsGroupTextProps = React.ComponentPropsWithoutRef<'div'>;\n\nexport const ButtonsGroupText = React.forwardRef<HTMLDivElement, ButtonsGroupTextProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div ref={ref} data-slot=\"buttons-group-text\" className={cn(buttonsGroupTextClassName, className)} {...props} />\n    );\n  },\n);\nButtonsGroupText.displayName = 'ButtonsGroupText';\n"],"mappings":";;;;;;AAmBA,IAAa,eAAeA,QAAM,YAC/B,EAAE,UAAU,WAAW,cAAc,cAAc,OAAO,MAAM,GAAG,SAAS,QAAQ;CACnF,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,oBAAC,OAAD;GACO;GACL,MAAK;GACL,aAAU;GACV,oBAAkB;GAClB,aAAW;GACX,WAAW,GAAG,4BAA4B,gBAAgB,aAAa,aAAa,YAAY,SAAS;GACzG,GAAI;GAEH;EACE,CAAA;CACsB,CAAA;AAEjC,CACF;AACA,aAAa,cAAc;AAK3B,IAAM,4BAA4B,GAChC,oGACA,2EACA,yCACF;AAIA,IAAa,mBAAmBA,QAAM,YACnC,EAAE,WAAW,GAAG,SAAS,QAAQ;CAChC,OACE,oBAAC,OAAD;EAAU;EAAK,aAAU;EAAqB,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnH,CACF;AACA,iBAAiB,cAAc"}

package/dist/domains/traces/components/trace-time-range-chip.cjs.js

@@ -1,90 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../utils-uDc1ofX1.cjs");
-const require_trace_filters = require("../../../trace-filters-BNEZ31HX.cjs");
-const require_DateTimeRangePicker = require("../../../DateTimeRangePicker-HmPOHwAQ.cjs");
-const require_filter_bar_chip = require("../../../filter-bar-chip-BUyMf8XQ.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-let lucide_react = require("lucide-react");
-// src/domains/traces/components/trace-time-range-chip.tsx
-var TRACE_TIME_RANGE_FIELD_ID = "timeRange";
-/**
-* Synthetic FilterBar field backing the always-present time-range chip. Hidden from the
-* input's field step (the chip cannot be added twice) but registered so the chip resolves
-* its label and takes part in keyboard navigation.
-*/
-var TRACE_TIME_RANGE_FIELD = {
-	id: TRACE_TIME_RANGE_FIELD_ID,
-	label: "Time",
-	icon: require_trace_filters.traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),
-	color: require_trace_filters.traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),
-	type: "text",
-	operators: ["is"],
-	hidden: true
-};
-var TRACE_TIME_RANGE_ITEM = {
-	id: TRACE_TIME_RANGE_FIELD_ID,
-	fieldId: TRACE_TIME_RANGE_FIELD_ID,
-	operatorId: "is",
-	value: ""
-};
-var isSegment = (target) => target instanceof HTMLElement && target.hasAttribute("data-filter-bar-segment");
-/**
-* The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always
-* present and non-removable; the value segment opens the regular DateTimeRangePicker
-* menu/popover. With `defaultPreset`, a trailing × resets the range to it.
-*/
-function TraceTimeRangeChip({ defaultPreset, onReset, ...props }) {
-	const ctx = require_filter_bar_chip.useFilterBarContext();
-	const canReset = defaultPreset !== void 0 && props.preset !== defaultPreset;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_filter_bar_chip.FilterBarChip, {
-		item: TRACE_TIME_RANGE_ITEM,
-		removable: false,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: require_utils.cn(require_filter_bar_chip.segmentClass, "text-foreground"),
-				style: require_filter_bar_chip.fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_bar_chip.FilterBarFieldLabel, { field: TRACE_TIME_RANGE_FIELD })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "contents",
-				onKeyDown: (event) => {
-					if (!isSegment(event.target)) event.stopPropagation();
-				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DateTimeRangePicker.DateTimeRangePicker, {
-					...props,
-					renderTrigger: ({ label, disabled }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "value", el),
-						"data-filter-bar-segment": "",
-						disabled,
-						"aria-label": `Value: ${label}`,
-						title: label,
-						className: require_filter_bar_chip.editableSegmentClass,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate",
-							children: label
-						})
-					})
-				})
-			}),
-			canReset && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				"data-filter-bar-segment": "",
-				tabIndex: -1,
-				ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "remove", el),
-				disabled: props.disabled,
-				"aria-label": "Reset time range",
-				title: "Reset time range",
-				className: require_filter_bar_chip.removeSegmentClass,
-				onClick: () => onReset ? onReset() : props.onPresetChange?.(defaultPreset),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "size-[1.1em]" })
-			})
-		]
-	});
-}
-exports.TRACE_TIME_RANGE_FIELD = TRACE_TIME_RANGE_FIELD;
-exports.TRACE_TIME_RANGE_FIELD_ID = TRACE_TIME_RANGE_FIELD_ID;
-exports.TRACE_TIME_RANGE_ITEM = TRACE_TIME_RANGE_ITEM;
-exports.TraceTimeRangeChip = TraceTimeRangeChip;
-
-//# sourceMappingURL=trace-time-range-chip.cjs.js.map

package/dist/domains/traces/components/trace-time-range-chip.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"trace-time-range-chip.cjs.js","names":["traceFilterFieldIcon","traceFilterFieldColor","useFilterBarContext","FilterBarChip","cn","segmentClass","fieldSegmentAccentStyle","FilterBarFieldLabel","DateTimeRangePicker","editableSegmentClass","removeSegmentClass","XIcon"],"sources":["../../../../src/domains/traces/components/trace-time-range-chip.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { XIcon } from 'lucide-react';\nimport type { KeyboardEvent } from 'react';\nimport { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters';\nimport type { DateRangePreset, DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker';\nimport {\n  FilterBarChip,\n  FilterBarFieldLabel,\n  editableSegmentClass,\n  fieldSegmentAccentStyle,\n  removeSegmentClass,\n  segmentClass,\n} from '@/ds/components/FilterBar/filter-bar-chip';\nimport { useFilterBarContext } from '@/ds/components/FilterBar/filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from '@/ds/components/FilterBar/types';\nimport { cn } from '@/lib/utils';\n\nexport const TRACE_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic FilterBar field backing the always-present time-range chip. Hidden from the\n * input's field step (the chip cannot be added twice) but registered so the chip resolves\n * its label and takes part in keyboard navigation.\n */\nexport const TRACE_TIME_RANGE_FIELD: FilterBarField = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),\n  color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const TRACE_TIME_RANGE_ITEM: FilterBarItem = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  fieldId: TRACE_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type TraceTimeRangeChipProps = Pick<\n  DateTimeRangePickerProps,\n  | 'preset'\n  | 'onPresetChange'\n  | 'dateFrom'\n  | 'dateTo'\n  | 'onDateChange'\n  | 'onDateRangeChange'\n  | 'disabled'\n  | 'maxRangeMs'\n  | 'minDate'\n  | 'presets'\n> & {\n  /** Shows a × that switches back to this preset whenever another range is selected. */\n  defaultPreset?: DateRangePreset;\n  /** Replaces what the × does, e.g. to undo a histogram zoom before falling back to `defaultPreset`. */\n  onReset?: () => void;\n};\n\nconst isSegment = (target: EventTarget | null) =>\n  target instanceof HTMLElement && target.hasAttribute('data-filter-bar-segment');\n\n/**\n * The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always\n * present and non-removable; the value segment opens the regular DateTimeRangePicker\n * menu/popover. With `defaultPreset`, a trailing × resets the range to it.\n */\nexport function TraceTimeRangeChip({ defaultPreset, onReset, ...props }: TraceTimeRangeChipProps) {\n  const ctx = useFilterBarContext();\n  const canReset = defaultPreset !== undefined && props.preset !== defaultPreset;\n  return (\n    <FilterBarChip item={TRACE_TIME_RANGE_ITEM} removable={false}>\n      <span className={cn(segmentClass, 'text-foreground')} style={fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD)}>\n        <FilterBarFieldLabel field={TRACE_TIME_RANGE_FIELD} />\n      </span>\n      {/* The picker popup is portaled but bubbles React events through here — keep its\n          keystrokes from reaching the chip's arrow-key navigation. */}\n      <div\n        className=\"contents\"\n        onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {\n          if (!isSegment(event.target)) event.stopPropagation();\n        }}\n      >\n        <DateTimeRangePicker\n          {...props}\n          renderTrigger={({ label, disabled }) => (\n            <button\n              type=\"button\"\n              ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'value', el)}\n              data-filter-bar-segment=\"\"\n              disabled={disabled}\n              aria-label={`Value: ${label}`}\n              title={label}\n              className={editableSegmentClass}\n            >\n              <span className=\"truncate\">{label}</span>\n            </button>\n          )}\n        />\n      </div>\n      {canReset && (\n        <button\n          type=\"button\"\n          data-filter-bar-segment=\"\"\n          tabIndex={-1}\n          ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'remove', el)}\n          disabled={props.disabled}\n          aria-label=\"Reset time range\"\n          title=\"Reset time range\"\n          className={removeSegmentClass}\n          onClick={() => (onReset ? onReset() : props.onPresetChange?.(defaultPreset))}\n        >\n          <XIcon className=\"size-[1.1em]\" />\n        </button>\n      )}\n    </FilterBarChip>\n  );\n}\n"],"mappings":";;;;;;;;AAkBA,IAAa,4BAA4B;;;;;;AAOzC,IAAa,yBAAyC;CACpD,IAAI;CACJ,OAAO;CACP,MAAMA,sBAAAA,qBAAqB,yBAAyB;CACpD,OAAOC,sBAAAA,sBAAsB,yBAAyB;CACtD,MAAM;CACN,WAAW,CAAC,IAAI;CAChB,QAAQ;AACV;AAEA,IAAa,wBAAuC;CAClD,IAAI;CACJ,SAAS;CACT,YAAY;CACZ,OAAO;AACT;AAqBA,IAAM,aAAa,WACjB,kBAAkB,eAAe,OAAO,aAAa,yBAAyB;;;;;;AAOhF,SAAgB,mBAAmB,EAAE,eAAe,SAAS,GAAG,SAAkC;CAChG,MAAM,MAAMC,wBAAAA,oBAAoB;CAChC,MAAM,WAAW,kBAAkB,KAAA,KAAa,MAAM,WAAW;CACjE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,wBAAAA,eAAD;EAAe,MAAM;EAAuB,WAAW;EAAvD,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAWC,cAAAA,GAAGC,wBAAAA,cAAc,iBAAiB;IAAG,OAAOC,wBAAAA,wBAAwB,sBAAsB;IACzG,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,qBAAD,EAAqB,OAAO,uBAAyB,CAAA;GACjD,CAAA;GAGN,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IACV,YAAY,UAAyC;KACnD,IAAI,CAAC,UAAU,MAAM,MAAM,GAAG,MAAM,gBAAgB;IACtD;IAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD;KACE,GAAI;KACJ,gBAAgB,EAAE,OAAO,eACvB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;MACE,MAAK;MACL,MAAK,OAAM,IAAI,gBAAgB,sBAAsB,IAAI,SAAS,EAAE;MACpE,2BAAwB;MACd;MACV,cAAY,UAAU;MACtB,OAAO;MACP,WAAWC,wBAAAA;MAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;OAAM,WAAU;OAAY,UAAA;MAAY,CAAA;KAClC,CAAA;IAEX,CAAA;GACE,CAAA;GACJ,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IACE,MAAK;IACL,2BAAwB;IACxB,UAAU;IACV,MAAK,OAAM,IAAI,gBAAgB,sBAAsB,IAAI,UAAU,EAAE;IACrE,UAAU,MAAM;IAChB,cAAW;IACX,OAAM;IACN,WAAWC,wBAAAA;IACX,eAAgB,UAAU,QAAQ,IAAI,MAAM,iBAAiB,aAAa;IAE1E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,EAAO,WAAU,eAAgB,CAAA;GAC3B,CAAA;EAEG;;AAEnB"}

package/dist/domains/traces/components/trace-time-range-chip.d.ts

@@ -1 +0,0 @@
-export * from '../../../src/domains/traces/components/trace-time-range-chip';

package/dist/domains/traces/components/trace-time-range-chip.es.js

@@ -1,86 +0,0 @@
-import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { Q as traceFilterFieldIcon, Z as traceFilterFieldColor } from "../../../trace-filters-BJaebsxJ.js";
-import { t as DateTimeRangePicker } from "../../../DateTimeRangePicker-C_Lie_2P.js";
-import { b as useFilterBarContext, f as removeSegmentClass, l as editableSegmentClass, o as FilterBarFieldLabel, p as segmentClass, t as FilterBarChip, u as fieldSegmentAccentStyle } from "../../../filter-bar-chip-7O02P9Vk.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { XIcon } from "lucide-react";
-// src/domains/traces/components/trace-time-range-chip.tsx
-var TRACE_TIME_RANGE_FIELD_ID = "timeRange";
-/**
-* Synthetic FilterBar field backing the always-present time-range chip. Hidden from the
-* input's field step (the chip cannot be added twice) but registered so the chip resolves
-* its label and takes part in keyboard navigation.
-*/
-var TRACE_TIME_RANGE_FIELD = {
-	id: TRACE_TIME_RANGE_FIELD_ID,
-	label: "Time",
-	icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),
-	color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),
-	type: "text",
-	operators: ["is"],
-	hidden: true
-};
-var TRACE_TIME_RANGE_ITEM = {
-	id: TRACE_TIME_RANGE_FIELD_ID,
-	fieldId: TRACE_TIME_RANGE_FIELD_ID,
-	operatorId: "is",
-	value: ""
-};
-var isSegment = (target) => target instanceof HTMLElement && target.hasAttribute("data-filter-bar-segment");
-/**
-* The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always
-* present and non-removable; the value segment opens the regular DateTimeRangePicker
-* menu/popover. With `defaultPreset`, a trailing × resets the range to it.
-*/
-function TraceTimeRangeChip({ defaultPreset, onReset, ...props }) {
-	const ctx = useFilterBarContext();
-	const canReset = defaultPreset !== void 0 && props.preset !== defaultPreset;
-	return /* @__PURE__ */ jsxs(FilterBarChip, {
-		item: TRACE_TIME_RANGE_ITEM,
-		removable: false,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: cn(segmentClass, "text-foreground"),
-				style: fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD),
-				children: /* @__PURE__ */ jsx(FilterBarFieldLabel, { field: TRACE_TIME_RANGE_FIELD })
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "contents",
-				onKeyDown: (event) => {
-					if (!isSegment(event.target)) event.stopPropagation();
-				},
-				children: /* @__PURE__ */ jsx(DateTimeRangePicker, {
-					...props,
-					renderTrigger: ({ label, disabled }) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "value", el),
-						"data-filter-bar-segment": "",
-						disabled,
-						"aria-label": `Value: ${label}`,
-						title: label,
-						className: editableSegmentClass,
-						children: /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: label
-						})
-					})
-				})
-			}),
-			canReset && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"data-filter-bar-segment": "",
-				tabIndex: -1,
-				ref: (el) => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, "remove", el),
-				disabled: props.disabled,
-				"aria-label": "Reset time range",
-				title: "Reset time range",
-				className: removeSegmentClass,
-				onClick: () => onReset ? onReset() : props.onPresetChange?.(defaultPreset),
-				children: /* @__PURE__ */ jsx(XIcon, { className: "size-[1.1em]" })
-			})
-		]
-	});
-}
-export { TRACE_TIME_RANGE_FIELD, TRACE_TIME_RANGE_FIELD_ID, TRACE_TIME_RANGE_ITEM, TraceTimeRangeChip };
-
-//# sourceMappingURL=trace-time-range-chip.es.js.map

package/dist/domains/traces/components/trace-time-range-chip.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"trace-time-range-chip.es.js","names":[],"sources":["../../../../src/domains/traces/components/trace-time-range-chip.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { XIcon } from 'lucide-react';\nimport type { KeyboardEvent } from 'react';\nimport { traceFilterFieldColor, traceFilterFieldIcon } from '../trace-filters';\nimport type { DateRangePreset, DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker';\nimport {\n  FilterBarChip,\n  FilterBarFieldLabel,\n  editableSegmentClass,\n  fieldSegmentAccentStyle,\n  removeSegmentClass,\n  segmentClass,\n} from '@/ds/components/FilterBar/filter-bar-chip';\nimport { useFilterBarContext } from '@/ds/components/FilterBar/filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from '@/ds/components/FilterBar/types';\nimport { cn } from '@/lib/utils';\n\nexport const TRACE_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic FilterBar field backing the always-present time-range chip. Hidden from the\n * input's field step (the chip cannot be added twice) but registered so the chip resolves\n * its label and takes part in keyboard navigation.\n */\nexport const TRACE_TIME_RANGE_FIELD: FilterBarField = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: traceFilterFieldIcon(TRACE_TIME_RANGE_FIELD_ID),\n  color: traceFilterFieldColor(TRACE_TIME_RANGE_FIELD_ID),\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const TRACE_TIME_RANGE_ITEM: FilterBarItem = {\n  id: TRACE_TIME_RANGE_FIELD_ID,\n  fieldId: TRACE_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type TraceTimeRangeChipProps = Pick<\n  DateTimeRangePickerProps,\n  | 'preset'\n  | 'onPresetChange'\n  | 'dateFrom'\n  | 'dateTo'\n  | 'onDateChange'\n  | 'onDateRangeChange'\n  | 'disabled'\n  | 'maxRangeMs'\n  | 'minDate'\n  | 'presets'\n> & {\n  /** Shows a × that switches back to this preset whenever another range is selected. */\n  defaultPreset?: DateRangePreset;\n  /** Replaces what the × does, e.g. to undo a histogram zoom before falling back to `defaultPreset`. */\n  onReset?: () => void;\n};\n\nconst isSegment = (target: EventTarget | null) =>\n  target instanceof HTMLElement && target.hasAttribute('data-filter-bar-segment');\n\n/**\n * The trace list's date range rendered as a FilterBar chip: `Time <preset>`. Always\n * present and non-removable; the value segment opens the regular DateTimeRangePicker\n * menu/popover. With `defaultPreset`, a trailing × resets the range to it.\n */\nexport function TraceTimeRangeChip({ defaultPreset, onReset, ...props }: TraceTimeRangeChipProps) {\n  const ctx = useFilterBarContext();\n  const canReset = defaultPreset !== undefined && props.preset !== defaultPreset;\n  return (\n    <FilterBarChip item={TRACE_TIME_RANGE_ITEM} removable={false}>\n      <span className={cn(segmentClass, 'text-foreground')} style={fieldSegmentAccentStyle(TRACE_TIME_RANGE_FIELD)}>\n        <FilterBarFieldLabel field={TRACE_TIME_RANGE_FIELD} />\n      </span>\n      {/* The picker popup is portaled but bubbles React events through here — keep its\n          keystrokes from reaching the chip's arrow-key navigation. */}\n      <div\n        className=\"contents\"\n        onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {\n          if (!isSegment(event.target)) event.stopPropagation();\n        }}\n      >\n        <DateTimeRangePicker\n          {...props}\n          renderTrigger={({ label, disabled }) => (\n            <button\n              type=\"button\"\n              ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'value', el)}\n              data-filter-bar-segment=\"\"\n              disabled={disabled}\n              aria-label={`Value: ${label}`}\n              title={label}\n              className={editableSegmentClass}\n            >\n              <span className=\"truncate\">{label}</span>\n            </button>\n          )}\n        />\n      </div>\n      {canReset && (\n        <button\n          type=\"button\"\n          data-filter-bar-segment=\"\"\n          tabIndex={-1}\n          ref={el => ctx.registerSegment(TRACE_TIME_RANGE_ITEM.id, 'remove', el)}\n          disabled={props.disabled}\n          aria-label=\"Reset time range\"\n          title=\"Reset time range\"\n          className={removeSegmentClass}\n          onClick={() => (onReset ? onReset() : props.onPresetChange?.(defaultPreset))}\n        >\n          <XIcon className=\"size-[1.1em]\" />\n        </button>\n      )}\n    </FilterBarChip>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,IAAa,4BAA4B;;;;;;AAOzC,IAAa,yBAAyC;CACpD,IAAI;CACJ,OAAO;CACP,MAAM,qBAAqB,yBAAyB;CACpD,OAAO,sBAAsB,yBAAyB;CACtD,MAAM;CACN,WAAW,CAAC,IAAI;CAChB,QAAQ;AACV;AAEA,IAAa,wBAAuC;CAClD,IAAI;CACJ,SAAS;CACT,YAAY;CACZ,OAAO;AACT;AAqBA,IAAM,aAAa,WACjB,kBAAkB,eAAe,OAAO,aAAa,yBAAyB;;;;;;AAOhF,SAAgB,mBAAmB,EAAE,eAAe,SAAS,GAAG,SAAkC;CAChG,MAAM,MAAM,oBAAoB;CAChC,MAAM,WAAW,kBAAkB,KAAA,KAAa,MAAM,WAAW;CACjE,OACE,qBAAC,eAAD;EAAe,MAAM;EAAuB,WAAW;EAAvD,UAAA;GACE,oBAAC,QAAD;IAAM,WAAW,GAAG,cAAc,iBAAiB;IAAG,OAAO,wBAAwB,sBAAsB;IACzG,UAAA,oBAAC,qBAAD,EAAqB,OAAO,uBAAyB,CAAA;GACjD,CAAA;GAGN,oBAAC,OAAD;IACE,WAAU;IACV,YAAY,UAAyC;KACnD,IAAI,CAAC,UAAU,MAAM,MAAM,GAAG,MAAM,gBAAgB;IACtD;IAEA,UAAA,oBAAC,qBAAD;KACE,GAAI;KACJ,gBAAgB,EAAE,OAAO,eACvB,oBAAC,UAAD;MACE,MAAK;MACL,MAAK,OAAM,IAAI,gBAAgB,sBAAsB,IAAI,SAAS,EAAE;MACpE,2BAAwB;MACd;MACV,cAAY,UAAU;MACtB,OAAO;MACP,WAAW;MAEX,UAAA,oBAAC,QAAD;OAAM,WAAU;OAAY,UAAA;MAAY,CAAA;KAClC,CAAA;IAEX,CAAA;GACE,CAAA;GACJ,YACC,oBAAC,UAAD;IACE,MAAK;IACL,2BAAwB;IACxB,UAAU;IACV,MAAK,OAAM,IAAI,gBAAgB,sBAAsB,IAAI,UAAU,EAAE;IACrE,UAAU,MAAM;IAChB,cAAW;IACX,OAAM;IACN,WAAW;IACX,eAAgB,UAAU,QAAQ,IAAI,MAAM,iBAAiB,aAAa;IAE1E,UAAA,oBAAC,OAAD,EAAO,WAAU,eAAgB,CAAA;GAC3B,CAAA;EAEG;;AAEnB"}