@exsto/ds 0.0.1-rc.19 → 0.0.1-rc.21

package/dist/ui/src/components/edyn/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_FRAME_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\n/** The number of options up to which a MultiSelect does not show its search field (see `searchFrom`). */\nexport const SEARCH_FROM = 8;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /**\n   * How many options a list must have before it shows its search field: it is there for a list too long to scan, and over a short\n   * one it is a box in the way. Above this many (default 8, the rows a popup shows at once) the field shows; at or under, it\n   * does not. In async mode it always shows, because the field is how the caller is told what to fetch. `0` always shows it.\n   *\n   * Hidden, the field is still in the popup, out of sight and not typable, because it is what Base UI moves the highlight\n   * from: the arrow keys, Home, End and Enter work as ever, and a screen reader still finds it by its label.\n   */\n  searchFrom?: number;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP = cn(\n  'flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n  POPUP_FRAME_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n);\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-control bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none focus-visible:border-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:border-ring dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-control text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {/* Muted grey is 4.2:1 on the highlighted row (6% of the foreground), under the 4.5:1 small text needs, so the count turns to the foreground with its row, as a CommandShortcut does. */}\n      {option.count !== undefined && (\n        <span className=\"text-xs text-muted-foreground tabular-nums group-data-highlighted:text-foreground\">{option.count}</span>\n      )}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"px-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative mx-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */\nconst ExposedFocusGuards = () => {\n  useExposedFocusGuards();\n  return null;\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  searchFrom = SEARCH_FROM,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  // Over a short list the search is a box in the way; the list still counts what was offered, so a chosen option the page lacks\n  // does not hide the field.\n  const searchable = isAsync || items.length > searchFrom;\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <ExposedFocusGuards />\n        <Combobox.Positioner sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n          <Combobox.Popup data-slot=\"multi-select-content\" className={POPUP}>\n            <div className={searchable ? 'flex shrink-0 items-center gap-2 border-b border-border px-3' : 'sr-only'}>\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                readOnly={!searchable}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className={POPUP_LIST_HEIGHT_CLASS}>\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/multi-select/multi-select.tsx"],"sourcesContent":["import { Combobox } from '@base-ui/react/combobox';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@edyn/ui/components/ui/tooltip';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport { POPUP_FRAME_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown, IconSearch } from '@tabler/icons-react';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\n/** An option: `leading` goes before its label (an avatar, a status dot), `count` after it (how many it would show). */\nexport type TMultiSelectOption = { value: string; label: string; count?: number; leading?: ReactNode };\n\n/** Every word the component prints, so a product can translate it. */\nexport interface IMultiSelectLabels {\n  noMatches: string;\n  loading: string;\n  /** Shown when `error` is `true`; a string `error` replaces it. */\n  error: string;\n  retry: string;\n  loadMore: string;\n  loadingMore: string;\n  clear: string;\n  selectedCount: (count: number) => string;\n}\n\nexport const DEFAULT_MULTI_SELECT_LABELS: IMultiSelectLabels = {\n  noMatches: 'No matches.',\n  loading: 'Loading…',\n  error: 'Could not load the options.',\n  retry: 'Try again',\n  loadMore: 'Load more',\n  loadingMore: 'Loading…',\n  clear: 'Clear',\n  selectedCount: (count) => `${count} selected`,\n};\n\n/** Above this many options a list draws only the rows on screen. */\nexport const VIRTUALIZE_FROM = 100;\n\n/** The number of options up to which a MultiSelect does not show its search field (see `searchFrom`). */\nexport const SEARCH_FROM = 8;\n\nconst ITEM_HEIGHT = 32;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IMultiSelectProps\n  extends Omit<\n    ComponentPropsWithoutRef<'button'>,\n    'placeholder' | 'value' | 'defaultValue' | 'id' | 'disabled' | 'className' | 'children' | 'onChange'\n  > {\n  /** The trigger's text with nothing picked, which means no filter (\"All dealer groups\"). */\n  placeholder: string;\n  /** The search field's prompt (\"Search dealer groups…\"). */\n  searchPlaceholder: string;\n  /**\n   * How many options a list must have before it shows its search field: it is there for a list too long to scan, and over a short\n   * one it is a box in the way. Above this many (default 8, the rows a popup shows at once) the field shows; at or under, it\n   * does not. In async mode it always shows, because the field is how the caller is told what to fetch. `0` always shows it.\n   *\n   * Hidden, the field is still in the popup, out of sight and not typable, because it is what Base UI moves the highlight\n   * from: the arrow keys, Home, End and Enter work as ever, and a screen reader still finds it by its label.\n   */\n  searchFrom?: number;\n  /** The options to show now: all of a short fixed list, or in async mode the ones for the typed text. */\n  options: readonly TMultiSelectOption[];\n  value: readonly string[];\n  onValueChange: (value: string[]) => void;\n  /**\n   * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;\n   * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is\n   * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.\n   */\n  summary?: 'selection' | 'label';\n  /** For a Label's htmlFor. */\n  id?: string;\n  'aria-label'?: string;\n  /**\n   * Marks the trigger invalid: the kit's destructive border, and a screen reader says so. For a form that does not use\n   * Field; inside one, its invalid state already does this.\n   */\n  'aria-invalid'?: boolean | 'true' | 'false';\n  /**\n   * The id of the text that explains it (the error). Added to what a Field names already, never replacing it.\n   */\n  'aria-describedby'?: string;\n  /** Shown but not changeable (a read-only form). */\n  disabled?: boolean;\n  /** Layout only (a width); the look is the kit's. */\n  className?: string;\n  /**\n   * Passing this turns on ASYNC MODE, for lists that grow (people, dealer groups) and must\n   * be searched by the API rather than loaded whole and filtered in the browser. The\n   * component then never filters: it reports the typed text (after `searchDelay`) and shows\n   * whatever `options` the caller supplies for it. It is also called with '' each time the\n   * list opens, so the first page is fetched on demand, not at page load.\n   */\n  onSearchChange?: (text: string) => void;\n  /** How long typing must pause before `onSearchChange` is called. Async mode only. */\n  searchDelay?: number;\n  /**\n   * The options behind the chosen values, for the ones not in the current `options`. A\n   * search that no longer returns a chosen value must not make it vanish from the trigger\n   * or the count, so the caller says what it is called. Without a label a value shows as\n   * itself.\n   */\n  selectedOptions?: readonly TMultiSelectOption[];\n  /** The options for the typed text are on their way. The old ones stay until they arrive. */\n  loading?: boolean;\n  /** The request failed: `true` for the default message, or the message itself. */\n  error?: boolean | string;\n  onRetry?: () => void;\n  /** There is another page after `options`. */\n  hasMore?: boolean;\n  onLoadMore?: () => void;\n  /** The next page is on its way. */\n  loadingMore?: boolean;\n  labels?: Partial<IMultiSelectLabels>;\n}\n\n/**\n * The options behind the chosen values, in the order they were chosen. A value with no\n * known option is kept and shown as itself rather than dropped: a selection must never\n * change just because a list did.\n */\nexport const resolveChosen = (\n  value: readonly string[],\n  options: readonly TMultiSelectOption[],\n  selectedOptions: readonly TMultiSelectOption[] = [],\n): TMultiSelectOption[] => {\n  const known = new Map<string, TMultiSelectOption>();\n  for (const option of [...selectedOptions, ...options]) {\n    known.set(option.value, option);\n  }\n  return value.map((entry) => known.get(entry) ?? { value: entry, label: entry });\n};\n\n/** What the trigger says: the placeholder, the one picked, or a count. */\nexport const summarize = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string => {\n  if (chosen.length === 0) {\n    return placeholder;\n  }\n  if (summary === 'label') {\n    return labels.selectedCount(chosen.length);\n  }\n  return chosen.length === 1 ? (chosen[0]?.label ?? '') : labels.selectedCount(chosen.length);\n};\n\n/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */\nexport const fullSelection = (\n  chosen: readonly TMultiSelectOption[],\n  placeholder: string,\n  labels: IMultiSelectLabels,\n  summary: 'selection' | 'label' = 'selection',\n): string =>\n  summary === 'selection' && chosen.length > 0 ? chosen.map((option) => option.label).join(', ') : summarize(chosen, placeholder, labels, summary);\n\nconst POPUP = cn(\n  'flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n  POPUP_FRAME_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  'motion-reduce:animate-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n);\n\nconst TRIGGER =\n  'flex h-8 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-lg border border-control bg-transparent px-2.5 text-sm text-foreground transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive data-popup-open:outline-solid dark:bg-input/30';\n\nconst Option = ({\n  option,\n  index,\n  style,\n  measure,\n  highlighted,\n}: {\n  option: TMultiSelectOption;\n  index: number;\n  style?: CSSProperties;\n  measure?: (node: Element | null) => void;\n  highlighted: boolean;\n}) => {\n  const [cut, setCut] = useState(false);\n  // A callback ref, so measuring starts when the label mounts and stops when it goes; the key on the label below mounts a fresh one\n  // when the text changes, which a resize observer alone would miss at an unchanged width.\n  const measureLabel = useCallback((element: HTMLSpanElement | null) => {\n    if (!element) {\n      return;\n    }\n    const measureCut = (): void => setCut(element.scrollWidth > element.clientWidth);\n    measureCut();\n    if (typeof ResizeObserver === 'undefined') {\n      return;\n    }\n    const observer = new ResizeObserver(measureCut);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <Combobox.Item\n      value={option}\n      index={index}\n      ref={measure}\n      data-index={index}\n      style={style}\n      data-slot=\"multi-select-item\"\n      className={cn(popupItemClass('base-ui'), 'group')}\n    >\n      {/* A checkbox, filled when chosen: a set of toggles reads as one. */}\n      <span\n        data-slot=\"multi-select-item-indicator\"\n        aria-hidden=\"true\"\n        className=\"flex size-4 shrink-0 items-center justify-center rounded-sm border border-control text-primary-foreground transition-colors group-data-[selected]:border-primary group-data-[selected]:bg-primary\"\n      >\n        <IconCheck className=\"size-3 opacity-0 group-data-[selected]:opacity-100\" stroke={3} />\n      </span>\n      {option.leading}\n      {/* The option is the highlighted one under the pointer and under the keyboard alike, so one controlled tooltip serves both: the full label while the text is cut. */}\n      <Tooltip open={highlighted && cut}>\n        <TooltipTrigger\n          key={option.label}\n          data-slot=\"multi-select-item-label\"\n          data-overflowing={cut ? '' : undefined}\n          render={<span ref={measureLabel} className=\"min-w-0 flex-1 truncate\" />}\n        >\n          {option.label}\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{option.label}</TooltipContent>\n      </Tooltip>\n      {/* Muted grey is 4.2:1 on the highlighted row (6% of the foreground), under the 4.5:1 small text needs, so the count turns to the foreground with its row, as a CommandShortcut does. */}\n      {option.count !== undefined && (\n        <span className=\"text-xs text-muted-foreground tabular-nums group-data-highlighted:text-foreground\">{option.count}</span>\n      )}\n    </Combobox.Item>\n  );\n};\n\n// The options on offer, every one drawn, or past VIRTUALIZE_FROM only those on screen. The\n// list is the listbox itself (the options its direct children), sized to the whole list\n// when virtualized; the ScrollArea wraps it.\nconst Options = ({\n  scroller,\n  scrollTo,\n  busy,\n  highlightedValue,\n}: {\n  scroller: RefObject<HTMLDivElement | null>;\n  scrollTo: RefObject<(index: number) => void>;\n  busy: boolean;\n  highlightedValue: string | null;\n}) => {\n  const items = Combobox.useFilteredItems<TMultiSelectOption>();\n  const virtual = items.length > VIRTUALIZE_FROM;\n  // The scroller is an ancestor, so its ref is set only after this list's own effects:\n  // one more render once mounted gives the virtualizer its element.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scroller.current,\n    estimateSize: () => ITEM_HEIGHT,\n    overscan: 12,\n    enabled: virtual && mounted,\n  });\n  useEffect(() => {\n    scrollTo.current = virtual ? (index) => virtualizer.scrollToIndex(index, { align: 'auto' }) : () => undefined;\n  }, [scrollTo, virtual, virtualizer]);\n  if (!virtual) {\n    return (\n      <Combobox.List aria-busy={busy || undefined} className=\"px-1 outline-none\">\n        {items.map((option, index) => (\n          <Option key={option.value} option={option} index={index} highlighted={highlightedValue === option.value} />\n        ))}\n      </Combobox.List>\n    );\n  }\n  return (\n    <Combobox.List\n      data-virtualized=\"\"\n      aria-busy={busy || undefined}\n      className=\"relative mx-1 outline-none\"\n      style={{ height: virtualizer.getTotalSize() }}\n    >\n      {virtualizer.getVirtualItems().map((row) => {\n        const option = items[row.index];\n        return option === undefined ? null : (\n          <Option\n            key={option.value}\n            option={option}\n            index={row.index}\n            highlighted={highlightedValue === option.value}\n            measure={virtualizer.measureElement}\n            style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${row.start}px)` }}\n          />\n        );\n      })}\n    </Combobox.List>\n  );\n};\n\n/** Rendered inside the portal, so it exists only while the list is open: the focus guards around the list are not aria-hidden. */\nconst ExposedFocusGuards = () => {\n  useExposedFocusGuards();\n  return null;\n};\n\n/**\n * A choice of several from a list: a trigger shaped like a Select that says what is picked\n * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox\n * options, with the shared popup list style, the ScrollArea's bar and fades, and virtualization\n * past VIRTUALIZE_FROM options. Nothing chosen means no filter.\n *\n * For a short fixed list pass `options` and nothing else: the component filters them as the\n * user types. For a list that grows, pass `onSearchChange` and it becomes a window onto a\n * server: the caller fetches the options for the typed text, and says when they are loading,\n * failed, or have another page.\n */\nexport const MultiSelect = ({\n  placeholder,\n  searchPlaceholder,\n  searchFrom = SEARCH_FROM,\n  options,\n  value,\n  onValueChange,\n  id,\n  disabled = false,\n  className,\n  onSearchChange,\n  searchDelay = 250,\n  selectedOptions,\n  loading = false,\n  error = false,\n  onRetry,\n  hasMore = false,\n  onLoadMore,\n  loadingMore = false,\n  labels: labelOverrides,\n  summary = 'selection',\n  ...rest\n}: IMultiSelectProps) => {\n  const labels = useMemo(() => ({ ...DEFAULT_MULTI_SELECT_LABELS, ...labelOverrides }), [labelOverrides]);\n  const isAsync = onSearchChange !== undefined;\n  const chosen = useMemo(() => resolveChosen(value, options, selectedOptions), [value, options, selectedOptions]);\n  // Chosen options the current page does not contain stay on offer at the top, so they can\n  // still be unchecked after a search has moved on.\n  const items = useMemo(() => {\n    const offered = new Set(options.map((option) => option.value));\n    return [...chosen.filter((option) => !offered.has(option.value)), ...options];\n  }, [chosen, options]);\n  const refScroller = useRef<HTMLDivElement | null>(null);\n  const refScrollTo = useRef<(index: number) => void>(() => undefined);\n  const refTimer = useRef<number | undefined>(undefined);\n  const refTriggerText = useRef<HTMLSpanElement | null>(null);\n  const refSearch = useRef<HTMLInputElement | null>(null);\n  // The popup and the trigger's tooltip are two hover surfaces on one element, so the tooltip stands down while the popup is open.\n  const [popupOpen, setPopupOpen] = useState(false);\n  // The option under the pointer or the keyboard, whichever moved last, for the tooltip that shows a cut label in full.\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // The text last reported through onSearchChange, and whether the popup is open. Base UI\n  // reports the input as empty when the popup opens and again when it closes; reporting\n  // those would fetch the first page twice on every open, and again while closed.\n  const refReported = useRef<string | undefined>(undefined);\n  const refOpen = useRef(false);\n  // Over a short list the search is a box in the way; the list still counts what was offered, so a chosen option the page lacks\n  // does not hide the field.\n  const searchable = isAsync || items.length > searchFrom;\n  const errorMessage = typeof error === 'string' ? error : labels.error;\n  const failed = error !== false;\n\n  useEffect(() => () => window.clearTimeout(refTimer.current), []);\n\n  // Base UI gives the search field a key handler that closes the popup on Escape and keeps the key from the page, but not\n  // the trigger: with focus back on the trigger and the popup still open (a click that landed while a Sheet slid in,\n  // `focus()`, Shift+Tab) Escape reached the document, where an enclosing Sheet or Dialog closed along with the popup.\n  // So the trigger hands Escape to the search field, the path that already works, and the key goes no further.\n  const closeFromTrigger = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key !== 'Escape' || !popupOpen || refSearch.current === null) {\n      return;\n    }\n    event.stopPropagation();\n    event.preventDefault();\n    refSearch.current.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));\n  };\n\n  return (\n    <Combobox.Root\n      multiple\n      disabled={disabled}\n      items={items}\n      filter={isAsync ? null : undefined}\n      value={chosen}\n      onValueChange={(next: TMultiSelectOption[]) => onValueChange(next.map((option) => option.value))}\n      onInputValueChange={(text) => {\n        if (onSearchChange === undefined || !refOpen.current) {\n          return;\n        }\n        window.clearTimeout(refTimer.current);\n        if (text === refReported.current) {\n          return;\n        }\n        refTimer.current = window.setTimeout(() => {\n          refReported.current = text;\n          onSearchChange(text);\n        }, searchDelay);\n      }}\n      onOpenChange={(open) => {\n        window.clearTimeout(refTimer.current);\n        setPopupOpen(open);\n        if (!open) {\n          setHighlightedValue(null);\n        }\n        refOpen.current = open;\n        refReported.current = open ? '' : undefined;\n        if (open && onSearchChange !== undefined) {\n          onSearchChange('');\n        }\n      }}\n      itemToStringLabel={(option: TMultiSelectOption) => option.label}\n      isItemEqualToValue={(a: TMultiSelectOption, b: TMultiSelectOption) => a.value === b.value}\n      virtualized={items.length > VIRTUALIZE_FROM}\n      onItemHighlighted={(item, details) => {\n        setHighlightedValue(item?.value ?? null);\n        if (details.reason === 'keyboard' && details.index >= 0) {\n          refScrollTo.current(details.index);\n        }\n      }}\n    >\n      {/* A tooltip only when the text is really cut, which is known when it is about to open. */}\n      <Tooltip\n        disabled={popupOpen}\n        onOpenChange={(open, details) => {\n          const element = refTriggerText.current;\n          if (open && !(element && element.scrollWidth > element.clientWidth)) {\n            details.cancel();\n          }\n        }}\n      >\n        <TooltipTrigger\n          data-slot=\"multi-select-trigger\"\n          render={\n            <Combobox.Trigger\n              {...rest}\n              id={id}\n              data-set={chosen.length > 0 ? '' : undefined}\n              onKeyDown={closeFromTrigger}\n              className={cn(TRIGGER, className)}\n            />\n          }\n        >\n          <span ref={refTriggerText} className={cn('min-w-0 flex-1 truncate text-left', chosen.length === 0 && 'text-muted-foreground')}>\n            {summarize(chosen, placeholder, labels, summary)}\n          </span>\n          <IconChevronDown aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>{fullSelection(chosen, placeholder, labels, summary)}</TooltipContent>\n      </Tooltip>\n      <Combobox.Portal>\n        <ExposedFocusGuards />\n        <Combobox.Positioner sideOffset={4} align=\"start\" className={POPUP_LAYER_CLASS}>\n          <Combobox.Popup data-slot=\"multi-select-content\" className={POPUP}>\n            <div className={searchable ? 'flex shrink-0 items-center gap-2 border-b border-border px-3' : 'sr-only'}>\n              <IconSearch aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n              <Combobox.Input\n                ref={refSearch}\n                readOnly={!searchable}\n                placeholder={searchPlaceholder}\n                aria-label={searchPlaceholder.replace(/…$/, '')}\n                className=\"h-10 w-full min-w-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </div>\n            {/* The live region stays mounted and only its words change, which is what makes a\n                screen reader announce them. */}\n            <Combobox.Status data-slot=\"multi-select-status\" className=\"px-3 py-2 text-sm text-muted-foreground empty:p-0\">\n              {failed ? (\n                <span className=\"flex items-center justify-between gap-2 text-destructive\">\n                  {errorMessage}\n                  {onRetry !== undefined && (\n                    <button type=\"button\" onClick={onRetry} className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\">\n                      {labels.retry}\n                    </button>\n                  )}\n                </span>\n              ) : loading ? (\n                labels.loading\n              ) : null}\n            </Combobox.Status>\n            <Combobox.Empty className=\"px-3 py-6 text-center text-sm text-muted-foreground empty:p-0\">\n              {loading || failed ? null : labels.noMatches}\n            </Combobox.Empty>\n            <ScrollArea type=\"always\" fade viewportRef={refScroller} className={POPUP_LIST_HEIGHT_CLASS}>\n              <Options scroller={refScroller} scrollTo={refScrollTo} busy={loading} highlightedValue={highlightedValue} />\n            </ScrollArea>\n            {hasMore && onLoadMore !== undefined && (\n              <div className=\"shrink-0 border-t border-border p-1\">\n                <button\n                  type=\"button\"\n                  disabled={loadingMore}\n                  onClick={onLoadMore}\n                  className=\"h-8 w-full rounded-md px-2 text-sm font-medium text-foreground hover:bg-foreground/6 disabled:pointer-events-none disabled:opacity-50\"\n                >\n                  {loadingMore ? labels.loadingMore : labels.loadMore}\n                </button>\n              </div>\n            )}\n            {chosen.length > 0 && (\n              <div className=\"flex shrink-0 items-center justify-between gap-2 border-t border-border py-1 pr-1 pl-3 text-xs text-muted-foreground\">\n                <span className=\"tabular-nums\">{labels.selectedCount(chosen.length)}</span>\n                <button\n                  type=\"button\"\n                  onClick={() => onValueChange([])}\n                  className=\"rounded-md px-2 py-1 font-medium text-foreground hover:bg-foreground/6\"\n                >\n                  {labels.clear}\n                </button>\n              </div>\n            )}\n          </Combobox.Popup>\n        </Combobox.Positioner>\n      </Combobox.Portal>\n    </Combobox.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js

@@ -194,7 +194,7 @@ var RichTextEditor = ({ value, defaultValue = "", onChange, placeholder, disable
 		"data-invalid": isInvalid ? "" : void 0,
 		"data-disabled": disabled ? "" : void 0,
 		"data-readonly": readOnly ? "" : void 0,
-		className: cn("flex w-full min-w-0 flex-col rounded-lg border border-control bg-transparent text-base transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-input/50 data-disabled:opacity-50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:data-disabled:bg-input/80 dark:data-invalid:ring-destructive/40", className),
+		className: cn("flex w-full min-w-0 flex-col rounded-lg border border-control bg-transparent text-base transition-colors focus-within:outline-solid data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-input/50 data-disabled:opacity-50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:data-disabled:bg-input/80 dark:data-invalid:ring-destructive/40", className),
 		...props,
 		children: [
 			showToolbar ? /* @__PURE__ */ jsx(RichTextToolbar, {

package/dist/ui/src/components/edyn/rich-text-editor/rich-text-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { RICH_TEXT_BODY_CLASS } from '@edyn/ui/components/edyn/rich-text-content/rich-text-content';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type { Editor } from '@tiptap/core';\nimport { EditorContent, useEditor, useEditorState } from '@tiptap/react';\nimport type { SuggestionProps } from '@tiptap/suggestion';\nimport {\n  type ComponentPropsWithoutRef,\n  type Ref,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport { buildExtensions, type IEditorHost } from './extensions';\nimport { MentionList } from './mention-list';\nimport { defaultMentionToText, isDocumentEmpty, serializeDocument } from './serialize';\nimport { isLive, syncEditable, syncValue } from './sync';\nimport { type ILinkRange, RichTextToolbar } from './toolbar';\nimport {\n  DEFAULT_RICH_TEXT_LABELS,\n  type IRichTextEditorHandle,\n  type IRichTextField,\n  type IRichTextLabels,\n  type IRichTextMention,\n  type IRichTextMentionItem,\n} from './types';\n\nconst LINE = 1.5;\n\ninterface ISuggestionState {\n  query: string;\n  rect: (() => DOMRect | null) | null;\n  command: (item: IRichTextMentionItem) => void;\n}\n\nexport interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {\n  /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `\"\"`. */\n  value?: string;\n  /** The HTML to start from when the editor owns its own value. */\n  defaultValue?: string;\n  /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `\"\"` when there is no text. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Shows the content and keeps it selectable and copyable, with no toolbar. */\n  readOnly?: boolean;\n  /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */\n  invalid?: boolean;\n  /**\n   * Lines the box is tall when empty.\n   * @default 6\n   */\n  minRows?: number;\n  /**\n   * Lines it grows to before it scrolls inside.\n   * @default 20\n   */\n  maxRows?: number;\n  /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */\n  maxLength?: number;\n  /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */\n  mention?: IRichTextMention;\n  /** Adds an \"Insert a field\" menu that writes `{{id}}` at the caret. */\n  fields?: IRichTextField[];\n  /**\n   * Whether the formatting toolbar shows.\n   * @default true\n   */\n  toolbar?: boolean;\n  /** Replaces any of the strings the editor shows (the defaults are English). */\n  labels?: Partial<IRichTextLabels>;\n  /** On the editable element, so a form can name it. */\n  id?: string;\n  autoFocus?: boolean;\n  /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */\n  onPasteFiles?: (files: File[]) => void;\n  /** Gives `insertText` and `focus`, for buttons outside the editor. */\n  ref?: Ref<IRichTextEditorHandle>;\n}\n\n/**\n * A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional\n * @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`\n * can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.\n * The server should still sanitise: this is a convenience for the writer, not a security boundary.\n */\nexport const RichTextEditor = ({\n  value,\n  defaultValue = '',\n  onChange,\n  placeholder,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  minRows = 6,\n  maxRows = 20,\n  maxLength,\n  mention,\n  fields,\n  toolbar = true,\n  labels,\n  id,\n  autoFocus = false,\n  onPasteFiles,\n  ref,\n  className,\n  'aria-invalid': ariaInvalid,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: IRichTextEditorProps) => {\n  const isInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';\n  const text = useMemo(() => ({ ...DEFAULT_RICH_TEXT_LABELS, ...labels }), [labels]);\n  const listId = useId();\n  const [suggestion, setSuggestion] = useState<ISuggestionState | null>(null);\n  const [activeOption, setActiveOption] = useState<string | undefined>(undefined);\n  const [linkOpen, setLinkOpen] = useState(false);\n  const refLinkRange = useRef<ILinkRange | null>(null);\n  const refKeys = useRef<((event: KeyboardEvent) => boolean) | null>(null);\n  // What the editor and the parent agree on. It starts as the value the editor is built from, so a controlled value\n  // that has not changed asks for nothing at mount.\n  const refKnown = useRef<string | undefined>(value ?? defaultValue);\n  const refPending = useRef<Array<(live: Editor) => void>>([]);\n  const [, wake] = useReducer((count: number) => count + 1, 0);\n  const editable = !disabled && !readOnly;\n  const showToolbar = toolbar && !readOnly;\n\n  const latest = useRef({ mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar });\n  latest.current = { mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar };\n\n  const host = useMemo<IEditorHost>(\n    () => ({\n      mentionEnabled: () => latest.current.mention !== undefined,\n      maxLength: () => latest.current.maxLength,\n      toText: () => latest.current.mention?.toText ?? defaultMentionToText,\n      onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => {\n        if (props === null) {\n          setActiveOption(undefined);\n        }\n        setSuggestion(props === null ? null : { query: props.query, rect: props.clientRect ?? null, command: props.command });\n      },\n      onSuggestionKey: ({ event }) => refKeys.current?.(event) ?? false,\n    }),\n    [],\n  );\n  const extensions = useMemo(() => buildExtensions(host), [host]);\n\n  const emit = useCallback(\n    (current: Editor): string => {\n      const html = isDocumentEmpty(current.state.doc) ? '' : serializeDocument(current.state.doc, host.toText());\n      refKnown.current = html;\n      return html;\n    },\n    [host],\n  );\n\n  const attributes = useMemo(() => {\n    const entries: Record<string, string | undefined> = {\n      role: 'textbox',\n      'aria-multiline': 'true',\n      'aria-autocomplete': mention ? 'list' : undefined,\n      'aria-controls': suggestion ? listId : undefined,\n      'aria-activedescendant': suggestion ? activeOption : undefined,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': isInvalid ? 'true' : undefined,\n      'aria-readonly': readOnly ? 'true' : undefined,\n      'aria-disabled': disabled ? 'true' : undefined,\n      'aria-placeholder': placeholder,\n      tabindex: readOnly && !disabled ? '0' : undefined,\n      id,\n      'data-slot': 'rich-text-editor-content',\n      class: cn(RICH_TEXT_BODY_CLASS, 'min-h-(--rich-text-min) px-2.5 py-2 outline-none'),\n    };\n    return Object.fromEntries(Object.entries(entries).filter((entry): entry is [string, string] => entry[1] !== undefined));\n  }, [activeOption, ariaDescribedBy, ariaLabel, ariaLabelledBy, disabled, id, isInvalid, listId, mention, placeholder, readOnly, suggestion]);\n\n  const editor = useEditor({\n    extensions,\n    content: value ?? defaultValue,\n    editable,\n    autofocus: autoFocus ? 'end' : false,\n    editorProps: {\n      attributes,\n      handlePaste: (_view, event) => {\n        const data = event.clipboardData;\n        const onlyFiles = data !== null && data.files.length > 0 && data.getData('text/plain') === '' && data.getData('text/html') === '';\n        if (!onlyFiles || !latest.current.onPasteFiles) {\n          return false;\n        }\n        latest.current.onPasteFiles(Array.from(data.files));\n        return true;\n      },\n      handleKeyDown: (view, event) => {\n        if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k' && latest.current.toolbar) {\n          event.preventDefault();\n          refLinkRange.current = { from: view.state.selection.from, to: view.state.selection.to };\n          setLinkOpen(true);\n          return true;\n        }\n        return false;\n      },\n    },\n    onBlur: () => {\n      setSuggestion(null);\n      setActiveOption(undefined);\n    },\n    onUpdate: ({ editor: current }) => {\n      latest.current.onChange?.(emit(current));\n    },\n  });\n\n  // useEditor can replace the editor (it destroys one that was not mounted in time, and in development a second render\n  // makes a second), so readiness is read off the editor in hand: wake up when this one finishes initialising.\n  const ready = isLive(editor);\n  useEffect(() => {\n    editor.on('create', wake);\n    wake();\n    return () => {\n      editor.off('create', wake);\n    };\n  }, [editor]);\n\n  const whenLive = useCallback(\n    (action: (live: Editor) => void) => {\n      if (isLive(editor)) {\n        action(editor);\n      } else {\n        refPending.current.push(action);\n      }\n    },\n    [editor],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      insertText: (text) => {\n        whenLive((live) => {\n          live.chain().focus().insertContent({ type: 'text', text }).run();\n        });\n      },\n      focus: () => {\n        whenLive((live) => {\n          live.commands.focus();\n        });\n      },\n    }),\n    [whenLive],\n  );\n\n  useEffect(() => {\n    if (!ready || !isLive(editor)) {\n      return;\n    }\n    for (const action of refPending.current.splice(0)) {\n      action(editor);\n    }\n  }, [editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncEditable(editor, editable);\n    }\n  }, [editable, editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncValue(editor, value, refKnown);\n    }\n  }, [editor, ready, value]);\n\n  const empty = useEditorState({ editor, selector: ({ editor: current }) => isDocumentEmpty(current.state.doc) });\n\n  const pick = useCallback(\n    (item: IRichTextMentionItem) => {\n      suggestion?.command(item);\n    },\n    [suggestion],\n  );\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      data-invalid={isInvalid ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-readonly={readOnly ? '' : undefined}\n      className={cn(\n        'flex w-full min-w-0 flex-col rounded-lg border border-control bg-transparent text-base transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-input/50 data-disabled:opacity-50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:data-disabled:bg-input/80 dark:data-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    >\n      {showToolbar ? (\n        <RichTextToolbar\n          editor={editor}\n          labels={text}\n          fields={fields}\n          disabled={disabled}\n          linkOpen={linkOpen}\n          linkRange={refLinkRange}\n          onLinkOpenChange={(next) => {\n            if (next && !linkOpen) {\n              refLinkRange.current = { from: editor.state.selection.from, to: editor.state.selection.to };\n            }\n            setLinkOpen(next);\n          }}\n        />\n      ) : null}\n      <ScrollArea\n        className=\"relative\"\n        style={{ maxHeight: `${maxRows * LINE + 1}rem`, ['--rich-text-min' as string]: `${minRows * LINE + 1}rem` }}\n        focusable={false}\n      >\n        {empty && placeholder ? (\n          <p aria-hidden className=\"pointer-events-none absolute start-2.5 top-2 text-muted-foreground\">\n            {placeholder}\n          </p>\n        ) : null}\n        <EditorContent editor={editor} />\n      </ScrollArea>\n      {suggestion && mention ? (\n        <MentionList\n          query={suggestion.query}\n          rect={suggestion.rect}\n          config={mention}\n          labels={text}\n          listId={listId}\n          onPick={pick}\n          keyHandler={refKeys}\n          onActiveChange={setActiveOption}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["import { RICH_TEXT_BODY_CLASS } from '@edyn/ui/components/edyn/rich-text-content/rich-text-content';\nimport { ScrollArea } from '@edyn/ui/components/ui/scroll-area';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type { Editor } from '@tiptap/core';\nimport { EditorContent, useEditor, useEditorState } from '@tiptap/react';\nimport type { SuggestionProps } from '@tiptap/suggestion';\nimport {\n  type ComponentPropsWithoutRef,\n  type Ref,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport { buildExtensions, type IEditorHost } from './extensions';\nimport { MentionList } from './mention-list';\nimport { defaultMentionToText, isDocumentEmpty, serializeDocument } from './serialize';\nimport { isLive, syncEditable, syncValue } from './sync';\nimport { type ILinkRange, RichTextToolbar } from './toolbar';\nimport {\n  DEFAULT_RICH_TEXT_LABELS,\n  type IRichTextEditorHandle,\n  type IRichTextField,\n  type IRichTextLabels,\n  type IRichTextMention,\n  type IRichTextMentionItem,\n} from './types';\n\nconst LINE = 1.5;\n\ninterface ISuggestionState {\n  query: string;\n  rect: (() => DOMRect | null) | null;\n  command: (item: IRichTextMentionItem) => void;\n}\n\nexport interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {\n  /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `\"\"`. */\n  value?: string;\n  /** The HTML to start from when the editor owns its own value. */\n  defaultValue?: string;\n  /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `\"\"` when there is no text. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Shows the content and keeps it selectable and copyable, with no toolbar. */\n  readOnly?: boolean;\n  /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */\n  invalid?: boolean;\n  /**\n   * Lines the box is tall when empty.\n   * @default 6\n   */\n  minRows?: number;\n  /**\n   * Lines it grows to before it scrolls inside.\n   * @default 20\n   */\n  maxRows?: number;\n  /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */\n  maxLength?: number;\n  /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */\n  mention?: IRichTextMention;\n  /** Adds an \"Insert a field\" menu that writes `{{id}}` at the caret. */\n  fields?: IRichTextField[];\n  /**\n   * Whether the formatting toolbar shows.\n   * @default true\n   */\n  toolbar?: boolean;\n  /** Replaces any of the strings the editor shows (the defaults are English). */\n  labels?: Partial<IRichTextLabels>;\n  /** On the editable element, so a form can name it. */\n  id?: string;\n  autoFocus?: boolean;\n  /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */\n  onPasteFiles?: (files: File[]) => void;\n  /** Gives `insertText` and `focus`, for buttons outside the editor. */\n  ref?: Ref<IRichTextEditorHandle>;\n}\n\n/**\n * A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional\n * @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`\n * can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.\n * The server should still sanitise: this is a convenience for the writer, not a security boundary.\n */\nexport const RichTextEditor = ({\n  value,\n  defaultValue = '',\n  onChange,\n  placeholder,\n  disabled = false,\n  readOnly = false,\n  invalid = false,\n  minRows = 6,\n  maxRows = 20,\n  maxLength,\n  mention,\n  fields,\n  toolbar = true,\n  labels,\n  id,\n  autoFocus = false,\n  onPasteFiles,\n  ref,\n  className,\n  'aria-invalid': ariaInvalid,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: IRichTextEditorProps) => {\n  const isInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';\n  const text = useMemo(() => ({ ...DEFAULT_RICH_TEXT_LABELS, ...labels }), [labels]);\n  const listId = useId();\n  const [suggestion, setSuggestion] = useState<ISuggestionState | null>(null);\n  const [activeOption, setActiveOption] = useState<string | undefined>(undefined);\n  const [linkOpen, setLinkOpen] = useState(false);\n  const refLinkRange = useRef<ILinkRange | null>(null);\n  const refKeys = useRef<((event: KeyboardEvent) => boolean) | null>(null);\n  // What the editor and the parent agree on. It starts as the value the editor is built from, so a controlled value\n  // that has not changed asks for nothing at mount.\n  const refKnown = useRef<string | undefined>(value ?? defaultValue);\n  const refPending = useRef<Array<(live: Editor) => void>>([]);\n  const [, wake] = useReducer((count: number) => count + 1, 0);\n  const editable = !disabled && !readOnly;\n  const showToolbar = toolbar && !readOnly;\n\n  const latest = useRef({ mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar });\n  latest.current = { mention, maxLength, onChange, onPasteFiles, toolbar: showToolbar };\n\n  const host = useMemo<IEditorHost>(\n    () => ({\n      mentionEnabled: () => latest.current.mention !== undefined,\n      maxLength: () => latest.current.maxLength,\n      toText: () => latest.current.mention?.toText ?? defaultMentionToText,\n      onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => {\n        if (props === null) {\n          setActiveOption(undefined);\n        }\n        setSuggestion(props === null ? null : { query: props.query, rect: props.clientRect ?? null, command: props.command });\n      },\n      onSuggestionKey: ({ event }) => refKeys.current?.(event) ?? false,\n    }),\n    [],\n  );\n  const extensions = useMemo(() => buildExtensions(host), [host]);\n\n  const emit = useCallback(\n    (current: Editor): string => {\n      const html = isDocumentEmpty(current.state.doc) ? '' : serializeDocument(current.state.doc, host.toText());\n      refKnown.current = html;\n      return html;\n    },\n    [host],\n  );\n\n  const attributes = useMemo(() => {\n    const entries: Record<string, string | undefined> = {\n      role: 'textbox',\n      'aria-multiline': 'true',\n      'aria-autocomplete': mention ? 'list' : undefined,\n      'aria-controls': suggestion ? listId : undefined,\n      'aria-activedescendant': suggestion ? activeOption : undefined,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': isInvalid ? 'true' : undefined,\n      'aria-readonly': readOnly ? 'true' : undefined,\n      'aria-disabled': disabled ? 'true' : undefined,\n      'aria-placeholder': placeholder,\n      tabindex: readOnly && !disabled ? '0' : undefined,\n      id,\n      'data-slot': 'rich-text-editor-content',\n      class: cn(RICH_TEXT_BODY_CLASS, 'min-h-(--rich-text-min) px-2.5 py-2 outline-none'),\n    };\n    return Object.fromEntries(Object.entries(entries).filter((entry): entry is [string, string] => entry[1] !== undefined));\n  }, [activeOption, ariaDescribedBy, ariaLabel, ariaLabelledBy, disabled, id, isInvalid, listId, mention, placeholder, readOnly, suggestion]);\n\n  const editor = useEditor({\n    extensions,\n    content: value ?? defaultValue,\n    editable,\n    autofocus: autoFocus ? 'end' : false,\n    editorProps: {\n      attributes,\n      handlePaste: (_view, event) => {\n        const data = event.clipboardData;\n        const onlyFiles = data !== null && data.files.length > 0 && data.getData('text/plain') === '' && data.getData('text/html') === '';\n        if (!onlyFiles || !latest.current.onPasteFiles) {\n          return false;\n        }\n        latest.current.onPasteFiles(Array.from(data.files));\n        return true;\n      },\n      handleKeyDown: (view, event) => {\n        if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k' && latest.current.toolbar) {\n          event.preventDefault();\n          refLinkRange.current = { from: view.state.selection.from, to: view.state.selection.to };\n          setLinkOpen(true);\n          return true;\n        }\n        return false;\n      },\n    },\n    onBlur: () => {\n      setSuggestion(null);\n      setActiveOption(undefined);\n    },\n    onUpdate: ({ editor: current }) => {\n      latest.current.onChange?.(emit(current));\n    },\n  });\n\n  // useEditor can replace the editor (it destroys one that was not mounted in time, and in development a second render\n  // makes a second), so readiness is read off the editor in hand: wake up when this one finishes initialising.\n  const ready = isLive(editor);\n  useEffect(() => {\n    editor.on('create', wake);\n    wake();\n    return () => {\n      editor.off('create', wake);\n    };\n  }, [editor]);\n\n  const whenLive = useCallback(\n    (action: (live: Editor) => void) => {\n      if (isLive(editor)) {\n        action(editor);\n      } else {\n        refPending.current.push(action);\n      }\n    },\n    [editor],\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      insertText: (text) => {\n        whenLive((live) => {\n          live.chain().focus().insertContent({ type: 'text', text }).run();\n        });\n      },\n      focus: () => {\n        whenLive((live) => {\n          live.commands.focus();\n        });\n      },\n    }),\n    [whenLive],\n  );\n\n  useEffect(() => {\n    if (!ready || !isLive(editor)) {\n      return;\n    }\n    for (const action of refPending.current.splice(0)) {\n      action(editor);\n    }\n  }, [editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncEditable(editor, editable);\n    }\n  }, [editable, editor, ready]);\n\n  useEffect(() => {\n    if (ready) {\n      syncValue(editor, value, refKnown);\n    }\n  }, [editor, ready, value]);\n\n  const empty = useEditorState({ editor, selector: ({ editor: current }) => isDocumentEmpty(current.state.doc) });\n\n  const pick = useCallback(\n    (item: IRichTextMentionItem) => {\n      suggestion?.command(item);\n    },\n    [suggestion],\n  );\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      data-invalid={isInvalid ? '' : undefined}\n      data-disabled={disabled ? '' : undefined}\n      data-readonly={readOnly ? '' : undefined}\n      className={cn(\n        'flex w-full min-w-0 flex-col rounded-lg border border-control bg-transparent text-base transition-colors focus-within:outline-solid data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:bg-input/50 data-disabled:opacity-50 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:data-disabled:bg-input/80 dark:data-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    >\n      {showToolbar ? (\n        <RichTextToolbar\n          editor={editor}\n          labels={text}\n          fields={fields}\n          disabled={disabled}\n          linkOpen={linkOpen}\n          linkRange={refLinkRange}\n          onLinkOpenChange={(next) => {\n            if (next && !linkOpen) {\n              refLinkRange.current = { from: editor.state.selection.from, to: editor.state.selection.to };\n            }\n            setLinkOpen(next);\n          }}\n        />\n      ) : null}\n      <ScrollArea\n        className=\"relative\"\n        style={{ maxHeight: `${maxRows * LINE + 1}rem`, ['--rich-text-min' as string]: `${minRows * LINE + 1}rem` }}\n        focusable={false}\n      >\n        {empty && placeholder ? (\n          <p aria-hidden className=\"pointer-events-none absolute start-2.5 top-2 text-muted-foreground\">\n            {placeholder}\n          </p>\n        ) : null}\n        <EditorContent editor={editor} />\n      </ScrollArea>\n      {suggestion && mention ? (\n        <MentionList\n          query={suggestion.query}\n          rect={suggestion.rect}\n          config={mention}\n          labels={text}\n          listId={listId}\n          onPick={pick}\n          keyHandler={refKeys}\n          onActiveChange={setActiveOption}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,OAAO;;;;;;;AA2Db,IAAa,kBAAkB,EAC7B,OACA,eAAe,IACf,UACA,aACA,WAAW,OACX,WAAW,OACX,UAAU,OACV,UAAU,GACV,UAAU,IACV,WACA,SACA,QACA,UAAU,MACV,QACA,IACA,YAAY,OACZ,cACA,KACA,WACA,gBAAgB,aAChB,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,YACuB;CAC1B,MAAM,YAAY,WAAW,gBAAgB,QAAQ,gBAAgB;CACrE,MAAM,OAAO,eAAe;EAAE,GAAG;EAA0B,GAAG;CAAO,IAAI,CAAC,MAAM,CAAC;CACjF,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,YAAY,iBAAiB,SAAkC,IAAI;CAC1E,MAAM,CAAC,cAAc,mBAAmB,SAA6B,KAAA,CAAS;CAC9E,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,eAAe,OAA0B,IAAI;CACnD,MAAM,UAAU,OAAmD,IAAI;CAGvE,MAAM,WAAW,OAA2B,SAAS,YAAY;CACjE,MAAM,aAAa,OAAsC,CAAC,CAAC;CAC3D,MAAM,GAAG,QAAQ,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAC3D,MAAM,WAAW,CAAC,YAAY,CAAC;CAC/B,MAAM,cAAc,WAAW,CAAC;CAEhC,MAAM,SAAS,OAAO;EAAE;EAAS;EAAW;EAAU;EAAc,SAAS;CAAY,CAAC;CAC1F,OAAO,UAAU;EAAE;EAAS;EAAW;EAAU;EAAc,SAAS;CAAY;CAEpF,MAAM,OAAO,eACJ;EACL,sBAAsB,OAAO,QAAQ,YAAY,KAAA;EACjD,iBAAiB,OAAO,QAAQ;EAChC,cAAc,OAAO,QAAQ,SAAS,UAAU;EAChD,eAAe,UAA8E;GAC3F,IAAI,UAAU,MACZ,gBAAgB,KAAA,CAAS;GAE3B,cAAc,UAAU,OAAO,OAAO;IAAE,OAAO,MAAM;IAAO,MAAM,MAAM,cAAc;IAAM,SAAS,MAAM;GAAQ,CAAC;EACtH;EACA,kBAAkB,EAAE,YAAY,QAAQ,UAAU,KAAK,KAAK;CAC9D,IACA,CAAC,CACH;CACA,MAAM,aAAa,cAAc,gBAAgB,IAAI,GAAG,CAAC,IAAI,CAAC;CAE9D,MAAM,OAAO,aACV,YAA4B;EAC3B,MAAM,OAAO,gBAAgB,QAAQ,MAAM,GAAG,IAAI,KAAK,kBAAkB,QAAQ,MAAM,KAAK,KAAK,OAAO,CAAC;EACzG,SAAS,UAAU;EACnB,OAAO;CACT,GACA,CAAC,IAAI,CACP;CAEA,MAAM,aAAa,cAAc;EAC/B,MAAM,UAA8C;GAClD,MAAM;GACN,kBAAkB;GAClB,qBAAqB,UAAU,SAAS,KAAA;GACxC,iBAAiB,aAAa,SAAS,KAAA;GACvC,yBAAyB,aAAa,eAAe,KAAA;GACrD,cAAc;GACd,mBAAmB;GACnB,oBAAoB;GACpB,gBAAgB,YAAY,SAAS,KAAA;GACrC,iBAAiB,WAAW,SAAS,KAAA;GACrC,iBAAiB,WAAW,SAAS,KAAA;GACrC,oBAAoB;GACpB,UAAU,YAAY,CAAC,WAAW,MAAM,KAAA;GACxC;GACA,aAAa;GACb,OAAO,GAAG,sBAAsB,kDAAkD;EACpF;EACA,OAAO,OAAO,YAAY,OAAO,QAAQ,OAAO,CAAC,CAAC,QAAQ,UAAqC,MAAM,OAAO,KAAA,CAAS,CAAC;CACxH,GAAG;EAAC;EAAc;EAAiB;EAAW;EAAgB;EAAU;EAAI;EAAW;EAAQ;EAAS;EAAa;EAAU;CAAU,CAAC;CAE1I,MAAM,SAAS,UAAU;EACvB;EACA,SAAS,SAAS;EAClB;EACA,WAAW,YAAY,QAAQ;EAC/B,aAAa;GACX;GACA,cAAc,OAAO,UAAU;IAC7B,MAAM,OAAO,MAAM;IAEnB,IAAI,EADc,SAAS,QAAQ,KAAK,MAAM,SAAS,KAAK,KAAK,QAAQ,YAAY,MAAM,MAAM,KAAK,QAAQ,WAAW,MAAM,OAC7G,CAAC,OAAO,QAAQ,cAChC,OAAO;IAET,OAAO,QAAQ,aAAa,MAAM,KAAK,KAAK,KAAK,CAAC;IAClD,OAAO;GACT;GACA,gBAAgB,MAAM,UAAU;IAC9B,KAAK,MAAM,WAAW,MAAM,YAAY,CAAC,MAAM,UAAU,CAAC,MAAM,YAAY,MAAM,IAAI,YAAY,MAAM,OAAO,OAAO,QAAQ,SAAS;KACrI,MAAM,eAAe;KACrB,aAAa,UAAU;MAAE,MAAM,KAAK,MAAM,UAAU;MAAM,IAAI,KAAK,MAAM,UAAU;KAAG;KACtF,YAAY,IAAI;KAChB,OAAO;IACT;IACA,OAAO;GACT;EACF;EACA,cAAc;GACZ,cAAc,IAAI;GAClB,gBAAgB,KAAA,CAAS;EAC3B;EACA,WAAW,EAAE,QAAQ,cAAc;GACjC,OAAO,QAAQ,WAAW,KAAK,OAAO,CAAC;EACzC;CACF,CAAC;CAID,MAAM,QAAQ,OAAO,MAAM;CAC3B,gBAAgB;EACd,OAAO,GAAG,UAAU,IAAI;EACxB,KAAK;EACL,aAAa;GACX,OAAO,IAAI,UAAU,IAAI;EAC3B;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,aACd,WAAmC;EAClC,IAAI,OAAO,MAAM,GACf,OAAO,MAAM;OAEb,WAAW,QAAQ,KAAK,MAAM;CAElC,GACA,CAAC,MAAM,CACT;CAEA,oBACE,YACO;EACL,aAAa,SAAS;GACpB,UAAU,SAAS;IACjB,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,cAAc;KAAE,MAAM;KAAQ;IAAK,CAAC,CAAC,CAAC,IAAI;GACjE,CAAC;EACH;EACA,aAAa;GACX,UAAU,SAAS;IACjB,KAAK,SAAS,MAAM;GACtB,CAAC;EACH;CACF,IACA,CAAC,QAAQ,CACX;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS,CAAC,OAAO,MAAM,GAC1B;EAEF,KAAK,MAAM,UAAU,WAAW,QAAQ,OAAO,CAAC,GAC9C,OAAO,MAAM;CAEjB,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,gBAAgB;EACd,IAAI,OACF,aAAa,QAAQ,QAAQ;CAEjC,GAAG;EAAC;EAAU;EAAQ;CAAK,CAAC;CAE5B,gBAAgB;EACd,IAAI,OACF,UAAU,QAAQ,OAAO,QAAQ;CAErC,GAAG;EAAC;EAAQ;EAAO;CAAK,CAAC;CAEzB,MAAM,QAAQ,eAAe;EAAE;EAAQ,WAAW,EAAE,QAAQ,cAAc,gBAAgB,QAAQ,MAAM,GAAG;CAAE,CAAC;CAE9G,MAAM,OAAO,aACV,SAA+B;EAC9B,YAAY,QAAQ,IAAI;CAC1B,GACA,CAAC,UAAU,CACb;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,YAAY,KAAK,KAAA;EAC/B,iBAAe,WAAW,KAAK,KAAA;EAC/B,iBAAe,WAAW,KAAK,KAAA;EAC/B,WAAW,GACT,mbACA,SACF;EACA,GAAI;EATN,UAAA;GAWG,cACC,oBAAC,iBAAD;IACU;IACR,QAAQ;IACA;IACE;IACA;IACV,WAAW;IACX,mBAAmB,SAAS;KAC1B,IAAI,QAAQ,CAAC,UACX,aAAa,UAAU;MAAE,MAAM,OAAO,MAAM,UAAU;MAAM,IAAI,OAAO,MAAM,UAAU;KAAG;KAE5F,YAAY,IAAI;IAClB;GACD,CAAA,IACC;GACJ,qBAAC,YAAD;IACE,WAAU;IACV,OAAO;KAAE,WAAW,GAAG,UAAU,OAAO,EAAE;MAAO,oBAA8B,GAAG,UAAU,OAAO,EAAE;IAAK;IAC1G,WAAW;IAHb,UAAA,CAKG,SAAS,cACR,oBAAC,KAAD;KAAG,eAAA;KAAY,WAAU;KACtB,UAAA;IACA,CAAA,IACD,MACJ,oBAAC,eAAD,EAAuB,OAAS,CAAA,CACtB;;GACX,cAAc,UACb,oBAAC,aAAD;IACE,OAAO,WAAW;IAClB,MAAM,WAAW;IACjB,QAAQ;IACR,QAAQ;IACA;IACR,QAAQ;IACR,YAAY;IACZ,gBAAgB;GACjB,CAAA,IACC;EACD;;AAET"}

package/dist/ui/src/components/ui/badge/badge.js

@@ -3,15 +3,15 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region ../ui/src/components/ui/badge/badge.tsx
-var badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden border border-transparent text-xs font-medium whitespace-nowrap transition-all motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+var badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden border border-transparent text-xs font-medium whitespace-nowrap transition-all motion-reduce:transition-none has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 			secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-			destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:text-red-300 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-			success: "bg-success-ring/40 text-success focus-visible:ring-success/20 [a]:hover:bg-success-ring/60 dark:bg-success-ring/30",
-			warning: "bg-warning-ring/40 text-warning focus-visible:ring-warning/20 [a]:hover:bg-warning-ring/60 dark:bg-warning-ring/30",
-			info: "bg-info-ring/40 text-info focus-visible:ring-info/20 [a]:hover:bg-info-ring/60 dark:bg-info-ring/30",
+			destructive: "bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-red-300 [a]:hover:bg-destructive/20",
+			success: "bg-success-ring/40 text-success [a]:hover:bg-success-ring/60 dark:bg-success-ring/30",
+			warning: "bg-warning-ring/40 text-warning [a]:hover:bg-warning-ring/60 dark:bg-warning-ring/30",
+			info: "bg-info-ring/40 text-info [a]:hover:bg-info-ring/60 dark:bg-info-ring/30",
 			outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
 			ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
 			link: "text-primary underline-offset-4 hover:underline"

package/dist/ui/src/components/ui/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../../../../../ui/src/components/ui/badge/badge.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nexport const badgeVariants = cva(\n  'group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden border border-transparent text-xs font-medium whitespace-nowrap transition-all motion-reduce:transition-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n        destructive:\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:text-red-300 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\n        success: 'bg-success-ring/40 text-success focus-visible:ring-success/20 [a]:hover:bg-success-ring/60 dark:bg-success-ring/30',\n        warning: 'bg-warning-ring/40 text-warning focus-visible:ring-warning/20 [a]:hover:bg-warning-ring/60 dark:bg-warning-ring/30',\n        info: 'bg-info-ring/40 text-info focus-visible:ring-info/20 [a]:hover:bg-info-ring/60 dark:bg-info-ring/30',\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-5 rounded-4xl px-2 py-0.5',\n        lg: 'h-7 rounded-md px-2 py-1',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const Badge = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) => {\n  return useRender({\n    defaultTagName: 'span',\n    props: mergeProps<'span'>(\n      {\n        className: cn(badgeVariants({ variant, size }), className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'badge',\n      variant,\n      size,\n    },\n  });\n};\n"],"mappings":";;;;;AAKA,IAAa,gBAAgB,IAC3B,4eACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,aACE;GACF,SAAS;GACT,SAAS;GACT,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,IAAa,SAAS,EACpB,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YACwE;CAC3E,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,cAAc;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS,EAC3D,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../../../../../ui/src/components/ui/badge/badge.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nexport const badgeVariants = cva(\n  'group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden border border-transparent text-xs font-medium whitespace-nowrap transition-all motion-reduce:transition-none has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n        destructive: 'bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-red-300 [a]:hover:bg-destructive/20',\n        success: 'bg-success-ring/40 text-success [a]:hover:bg-success-ring/60 dark:bg-success-ring/30',\n        warning: 'bg-warning-ring/40 text-warning [a]:hover:bg-warning-ring/60 dark:bg-warning-ring/30',\n        info: 'bg-info-ring/40 text-info [a]:hover:bg-info-ring/60 dark:bg-info-ring/30',\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-5 rounded-4xl px-2 py-0.5',\n        lg: 'h-7 rounded-md px-2 py-1',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const Badge = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) => {\n  return useRender({\n    defaultTagName: 'span',\n    props: mergeProps<'span'>(\n      {\n        className: cn(badgeVariants({ variant, size }), className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'badge',\n      variant,\n      size,\n    },\n  });\n};\n"],"mappings":";;;;;AAKA,IAAa,gBAAgB,IAC3B,kaACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,WAAW;GACX,aAAa;GACb,SAAS;GACT,SAAS;GACT,MAAM;GACN,SAAS;GACT,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,IAAa,SAAS,EACpB,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YACwE;CAC3E,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,cAAc;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS,EAC3D,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH"}

package/dist/ui/src/components/ui/bubble/bubble.js

@@ -35,7 +35,7 @@ var Bubble = ({ variant = "default", align = "start", className, ...props }) =>
 var BubbleContent = ({ className, render, ...props }) => {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50", className) }, props),
+		props: mergeProps({ className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none ", className) }, props),
 		render,
 		state: { slot: "bubble-content" }
 	});

package/dist/ui/src/components/ui/bubble/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","names":[],"sources":["../../../../../../../ui/src/components/ui/bubble/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nexport const BubbleGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"bubble-group\" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />;\n};\n\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',\n        muted:\n          '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const Bubble = ({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end';\n  }) => {\n  return <div data-slot=\"bubble\" data-variant={variant} data-align={align} className={cn(bubbleVariants({ variant }), className)} {...props} />;\n};\n\nexport const BubbleContent = ({ className, render, ...props }: useRender.ComponentProps<'div'>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50',\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'bubble-content',\n    },\n  });\n};\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n);\n\nexport const BubbleReactions = ({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end';\n  side?: 'top' | 'bottom';\n}) => {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5G;AAEA,IAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,UAAU,EACrB,UAAU,WACV,QAAQ,SACR,WACA,GAAG,YAIG;CACN,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAS,gBAAc;EAAS,cAAY;EAAO,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,iBAAiB,EAAE,WAAW,QAAQ,GAAG,YAA6C;CACjG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,6VACA,SACF,EACF,GACA,KACF;EACA;EACA,OAAO,EACL,MAAM,iBACR;CACF,CAAC;AACH;AAEA,IAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,IAAa,mBAAmB,EAC9B,OAAO,UACP,QAAQ,OACR,WACA,GAAG,YAIC;CACJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"bubble.js","names":[],"sources":["../../../../../../../ui/src/components/ui/bubble/bubble.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nexport const BubbleGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"bubble-group\" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />;\n};\n\nconst bubbleVariants = cva(\n  'group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full',\n  {\n    variants: {\n      variant: {\n        default:\n          '*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80',\n        secondary:\n          '*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]',\n        muted:\n          '*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]',\n        tinted:\n          '*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]',\n        outline:\n          '*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30',\n        ghost:\n          'border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50',\n        destructive:\n          '*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const Bubble = ({\n  variant = 'default',\n  align = 'start',\n  className,\n  ...props\n}: React.ComponentProps<'div'> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: 'start' | 'end';\n  }) => {\n  return <div data-slot=\"bubble\" data-variant={variant} data-align={align} className={cn(bubbleVariants({ variant }), className)} {...props} />;\n};\n\nexport const BubbleContent = ({ className, render, ...props }: useRender.ComponentProps<'div'>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(\n          'w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none ',\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'bubble-content',\n    },\n  });\n};\n\nconst bubbleReactionsVariants = cva(\n  'absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0',\n  {\n    variants: {\n      side: {\n        top: 'top-0 -translate-y-3/4',\n        bottom: 'bottom-0 translate-y-3/4',\n      },\n      align: {\n        start: 'left-3',\n        end: 'right-3',\n      },\n    },\n    defaultVariants: {\n      side: 'bottom',\n      align: 'end',\n    },\n  },\n);\n\nexport const BubbleReactions = ({\n  side = 'bottom',\n  align = 'end',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  align?: 'start' | 'end';\n  side?: 'top' | 'bottom';\n}) => {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5G;AAEA,IAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,UAAU,EACrB,UAAU,WACV,QAAQ,SACR,WACA,GAAG,YAIG;CACN,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAS,gBAAc;EAAS,cAAY;EAAO,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC9I;AAEA,IAAa,iBAAiB,EAAE,WAAW,QAAQ,GAAG,YAA6C;CACjG,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,mPACA,SACF,EACF,GACA,KACF;EACA;EACA,OAAO,EACL,MAAM,iBACR;CACF,CAAC;AACH;AAEA,IAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,CACF;AAEA,IAAa,mBAAmB,EAC9B,OAAO,UACP,QAAQ,OACR,WACA,GAAG,YAIC;CACJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;EAAM,CAAC,GAAG,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/button/button.js

@@ -10,14 +10,14 @@ import { cva } from "class-variance-authority";
 * have no fill to begin with and are given none: a grey box would turn a link into a button.
 */
 var DISABLED_FILL = "disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted";
-var buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,
 			outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,
 			secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,
 			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent",
-			destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,
+			destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20 ${DISABLED_FILL}`,
 			link: "text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline"
 		},
 		size: {

package/dist/ui/src/components/ui/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,gBACJ;AAEF,IAAa,iBAAiB,IAC5B,qoCACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,0DAA0D;GACnE,SAAS,sLAAsL;GAC/L,WAAW,kLAAkL;GAC7L,OACE;GACF,aAAa,+NAA+N;GAC5O,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;AASA,IAAM,gBAAgB,WACpB,eAAe,MAAM,MAAM,OAAO,SAAS,OAAO,OAAQ,OAAO,MAA6B,SAAS;;;;;;;;;;;;;AAczG,IAAM,aAAa;CAAE,cAAc;CAAO,MAAM,KAAA;CAAW,UAAU,KAAA;AAAU;;;;;;;;;;AAW/E,IAAM,sBAAsB;CAAE,GAAG;CAAY,UAAU;CAAI,sBAAsB;AAAG;AAEpF,IAAa,YAAU,EACrB,WACA,UAAU,WACV,OAAO,WACP,GAAG,YAC8D;CACjE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,GAAK,aAAa,MAAM,MAAM,IAAK,MAAM,WAAW,sBAAsB,aAAc,CAAC;EACzF,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../ui/src/components/ui/button/button.tsx"],"sourcesContent":["import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-control bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-control dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,gBACJ;AAEF,IAAa,iBAAiB,IAC5B,2jCACA;CACE,UAAU;EACR,SAAS;GACP,SAAS,0DAA0D;GACnE,SAAS,sLAAsL;GAC/L,WAAW,kLAAkL;GAC7L,OACE;GACF,aAAa,kHAAkH;GAC/H,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;AASA,IAAM,gBAAgB,WACpB,eAAe,MAAM,MAAM,OAAO,SAAS,OAAO,OAAQ,OAAO,MAA6B,SAAS;;;;;;;;;;;;;AAczG,IAAM,aAAa;CAAE,cAAc;CAAO,MAAM,KAAA;CAAW,UAAU,KAAA;AAAU;;;;;;;;;;AAW/E,IAAM,sBAAsB;CAAE,GAAG;CAAY,UAAU;CAAI,sBAAsB;AAAG;AAEpF,IAAa,YAAU,EACrB,WACA,UAAU,WACV,OAAO,WACP,GAAG,YAC8D;CACjE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,GAAK,aAAa,MAAM,MAAM,IAAK,MAAM,WAAW,sBAAsB,aAAc,CAAC;EACzF,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/checkbox/checkbox.js

@@ -6,7 +6,7 @@ import { Checkbox } from "@base-ui/react/checkbox";
 var Checkbox$1 = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
+		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className),
 		...props,
 		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/ui/src/components/ui/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,0oBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../../../../ui/src/components/ui/checkbox/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\n\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconMinus } from '@tabler/icons-react';\n\nexport const Checkbox = ({ className, ...props }: CheckboxPrimitive.Root.Props) => {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-control transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"group/checkbox-indicator grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconCheck className=\"group-data-indeterminate/checkbox-indicator:hidden\" />\n        <IconMinus className=\"hidden group-data-indeterminate/checkbox-indicator:block\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAY,EAAE,WAAW,GAAG,YAA0C;CACjF,OACE,oBAAC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,gkBACA,SACF;EACA,GAAI;EAEJ,UAAA,qBAAC,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,WAAD,EAAW,WAAU,qDAAsD,CAAA,GAC3E,oBAAC,WAAD,EAAW,WAAU,2DAA4D,CAAA,CACtD;;CACP,CAAA;AAE5B"}

package/dist/ui/src/components/ui/item/item.js

@@ -21,7 +21,7 @@ var ItemSeparator = ({ className, ...props }) => {
 		...props
 	});
 };
-var itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
+var itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted", {
 	variants: {
 		variant: {
 			default: "border-transparent",

package/dist/ui/src/components/ui/item/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":[],"sources":["../../../../../../../ui/src/components/ui/item/item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nimport { Separator } from '../separator';\n\nexport const ItemGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: preserve shadcn's polymorphic div API for item groups.\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn('group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-2', className)} {...props} />;\n};\n\nconst itemVariants = cva(\n  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'border-transparent bg-muted/50',\n      },\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const Item = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n};\n\nconst itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const ItemMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) => {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const ItemContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn('flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn('line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ItemActions = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n};\n\nexport const ItemHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-header\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n\nexport const ItemFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-footer\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAQA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OAEE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,mGAAmG,SAAS;EAC1H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAoD;CAChG,OAAO,oBAAC,WAAD;EAAW,aAAU;EAAiB,aAAY;EAAa,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtH;AAEA,IAAM,eAAe,IACnB,8OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,IAAa,QAAQ,EACnB,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YACsE;CACzE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC,EAC1D,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH;AAEA,IAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,aAAa,EAAE,WAAW,UAAU,WAAW,GAAG,YAAkF;CAC/I,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qGAAqG,SAAS;EAC5H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kGAAkG,SAAS;EACzH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAuC;CACrF,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI"}
+{"version":3,"file":"item.js","names":[],"sources":["../../../../../../../ui/src/components/ui/item/item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nimport { Separator } from '../separator';\n\nexport const ItemGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: preserve shadcn's polymorphic div API for item groups.\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn('group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-2', className)} {...props} />;\n};\n\nconst itemVariants = cva(\n  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'border-transparent bg-muted/50',\n      },\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const Item = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n};\n\nconst itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const ItemMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) => {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const ItemContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn('flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn('line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ItemActions = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n};\n\nexport const ItemHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-header\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n\nexport const ItemFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-footer\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAQA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OAEE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,mGAAmG,SAAS;EAC1H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAoD;CAChG,OAAO,oBAAC,WAAD;EAAW,aAAU;EAAiB,aAAY;EAAa,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtH;AAEA,IAAM,eAAe,IACnB,gKACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,IAAa,QAAQ,EACnB,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YACsE;CACzE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC,EAC1D,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH;AAEA,IAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,aAAa,EAAE,WAAW,UAAU,WAAW,GAAG,YAAkF;CAC/I,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qGAAqG,SAAS;EAC5H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kGAAkG,SAAS;EACzH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAuC;CACrF,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI"}

package/dist/ui/src/components/ui/native-select/native-select.js

@@ -10,7 +10,7 @@ var NativeSelect = ({ className, size = "default", ...props }) => {
 		children: [/* @__PURE__ */ jsx("select", {
 			"data-slot": "native-select",
 			"data-size": size,
-			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
 			...props
 		}), /* @__PURE__ */ jsx(IconSelector, {
 			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",

package/dist/ui/src/components/ui/native-select/native-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconSelector } from '@tabler/icons-react';\nimport type * as React from 'react';\n\ntype TNativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {\n  size?: 'sm' | 'default';\n};\n\nexport const NativeSelect = ({ className, size = 'default', ...props }: TNativeSelectProps) => {\n  return (\n    <div\n      className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\n        {...props}\n      />\n      <IconSelector\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n};\n\nexport const NativeSelectOption = ({ className, ...props }: React.ComponentProps<'option'>) => {\n  return <option data-slot=\"native-select-option\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n\nexport const NativeSelectOptGroup = ({ className, ...props }: React.ComponentProps<'optgroup'>) => {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n"],"mappings":";;;;AAQA,IAAa,gBAAgB,EAAE,WAAW,OAAO,WAAW,GAAG,YAAgC;CAC7F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,aAAW;EAHb,UAAA,CAKE,oBAAC,UAAD;GACE,aAAU;GACV,aAAW;GACX,WAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,cAAD;GACE,WAAU;GACV,eAAY;GACZ,aAAU;EACX,CAAA,CACE;;AAET;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA4C;CAC7F,OAAO,oBAAC,UAAD;EAAQ,aAAU;EAAuB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,wBAAwB,EAAE,WAAW,GAAG,YAA8C;CACjG,OAAO,oBAAC,YAAD;EAAU,aAAU;EAAyB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H"}
+{"version":3,"file":"native-select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconSelector } from '@tabler/icons-react';\nimport type * as React from 'react';\n\ntype TNativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {\n  size?: 'sm' | 'default';\n};\n\nexport const NativeSelect = ({ className, size = 'default', ...props }: TNativeSelectProps) => {\n  return (\n    <div\n      className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\n        {...props}\n      />\n      <IconSelector\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n};\n\nexport const NativeSelectOption = ({ className, ...props }: React.ComponentProps<'option'>) => {\n  return <option data-slot=\"native-select-option\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n\nexport const NativeSelectOptGroup = ({ className, ...props }: React.ComponentProps<'optgroup'>) => {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n"],"mappings":";;;;AAQA,IAAa,gBAAgB,EAAE,WAAW,OAAO,WAAW,GAAG,YAAgC;CAC7F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,aAAW;EAHb,UAAA,CAKE,oBAAC,UAAD;GACE,aAAU;GACV,aAAW;GACX,WAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,cAAD;GACE,WAAU;GACV,eAAY;GACZ,aAAU;EACX,CAAA,CACE;;AAET;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA4C;CAC7F,OAAO,oBAAC,UAAD;EAAQ,aAAU;EAAuB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,wBAAwB,EAAE,WAAW,GAAG,YAA8C;CACjG,OAAO,oBAAC,YAAD;EAAU,aAAU;EAAyB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H"}

package/dist/ui/src/components/ui/navigation-menu/navigation-menu.js

@@ -28,7 +28,7 @@ var NavigationMenuItem = ({ className, ...props }) => {
 		...props
 	});
 };
-var navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
+var navigationMenuTriggerStyle = cva("group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted");
 var NavigationMenuTrigger = ({ className, children, ...props }) => {
 	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
 		"data-slot": "navigation-menu-trigger",
@@ -69,7 +69,7 @@ var NavigationMenuPositioner = ({ className, side = "bottom", sideOffset = 8, al
 var NavigationMenuLink = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
 		"data-slot": "navigation-menu-link",
-		className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none motion-reduce:transition-none hover:bg-muted focus:bg-muted focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 };