@eifi1/ui-kit 0.4.0

package/dist/components/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox.tsx"],"sourcesContent":["import { Fragment, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { ChevronDown, X } from \"lucide-react\";\nimport { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useDropdown } from \"./dropdown\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport type { ComboOption } from \"./combobox-core\";\n\n// One look for both combobox flavors below — the suggestion list and its rows\n// must stay pixel-identical between the free-text and the id-keyed variant.\nconst LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900\";\n\n/**\n * \"This focus came from a mouse button that is not the left one\" — for the two\n * fields below, which open their list ON FOCUS.\n *\n * Keksdose live #309 rework: *\"When clicking the mouse back button now while hovering\n * one of the selects it opens the select as long as I am holding the button down and\n * closes select after releasing.\"* A mouse's BACK button focuses whatever it is\n * pressed over, exactly as the left one does — the browser only reserves the\n * NAVIGATION for itself — so a field that opens on focus opened a list for a gesture\n * that means \"go back\", and the release then navigated out from under it. Measured on\n * his own budget: `mousePressed button=back` over the transfer form's account field\n * left `aria-expanded=true`, and the release took the whole add card with it.\n *\n * The press is recorded and read by the focus that the SAME press causes: focus is\n * mousedown's default action, dispatched inside the same task, so the flag is always\n * read before the `setTimeout` below can drop it. And it is always dropped — a press\n * that focuses nothing (the pointer was over a disabled field, the button was\n * released elsewhere) must not leave a latch that swallows the next Tab.\n *\n * Only the OPEN is suppressed, never the navigation: Back still goes back, which is\n * the whole of what the button was pressed for.\n */\nfunction usePrimaryPressOnly() {\n  const auxPress = useRef(false);\n  return {\n    onMouseDown: (e: { button: number }) => {\n      if (e.button === 0) return;\n      auxPress.current = true;\n      setTimeout(() => {\n        auxPress.current = false;\n      }, 0);\n    },\n    /** True while handling the focus a non-primary press just caused. */\n    fromAuxButton: () => auxPress.current,\n  };\n}\n\n/**\n * The desktop suggestion list, PORTALLED and anchored to the field.\n *\n * It used to be an `absolute` `<ul>` inside the field's own wrapper, and that is\n * Keksdose live #295: *\"Category select inside the list is not readable. Some sort\n * of z indexes issue?\"*. It was not z-index — a stacking context can be out-ranked,\n * but `overflow` cannot be argued with. The receipt's line table sits in a card\n * carrying `overflow-clip`, so a list opened from the last visible row was cut off\n * at the card's edge: measured at 256px tall with 150px of it painted.\n *\n * Every other panel in this package already learned this — `DropdownPanel`'s\n * `anchorRef` form, the calculator popover, the tooltip — so this reuses the same\n * hook rather than inventing a second placement. What that buys beyond the clip:\n * the list flips above the field when there is no room below, and it caps its own\n * height against the VISIBLE viewport, which on a phone means the on-screen\n * keyboard (see {@link useAnchoredPanel}).\n *\n * `panelRef` is not optional plumbing. Portalled, the list is no longer a\n * descendant of the wrapper, so {@link useDropdown}'s outside-click test answers\n * \"outside\" for a click on the list itself — the first option a user picked would\n * close the dropdown having picked nothing.\n */\nfunction SuggestionList({\n  anchorRef,\n  panelRef,\n  children,\n}: {\n  anchorRef: RefObject<HTMLElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  children: ReactNode;\n}) {\n  const { rect, top, maxHeight } = useAnchoredPanel(anchorRef, true, { preferredHeight: 256 });\n  if (!rect) return null;\n  return createPortal(\n    <div\n      ref={panelRef}\n      // z-50, not the old z-30: the list is a child of <body> now, so it is\n      // competing with the app's own overlays rather than with its own siblings.\n      className=\"fixed z-50\"\n      style={{ top, left: rect.left, width: rect.width }}\n    >\n      <ul role=\"listbox\" className={LIST_CLASS} style={{ maxHeight }}>\n        {children}\n      </ul>\n    </div>,\n    document.body,\n  );\n}\n\nconst rowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate px-3 py-1.5 text-left text-sm text-slate-900 dark:text-slate-100\",\n    isActive ? \"bg-slate-100 dark:bg-slate-800\" : \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n  );\n\n/**\n * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE\n * styling, chevron and static floating label) but lets the user type a value\n * that isn't in the list — e.g. naming a brand-new payee. Picking from the\n * filtered suggestion list fills the value; typing keeps whatever was entered.\n *\n * Use this instead of an `<Input list=\"…\">` + `<datalist>` so the control is\n * visually and behaviourally consistent with the other dropdowns (feedback\n * #230 — the payee field looked/behaved differently from every other select).\n */\nexport function Combobox({\n  value,\n  onChange,\n  options,\n  label,\n  id,\n  placeholder,\n  className,\n  groupBy,\n  maxSuggestions,\n  searchPlaceholder,\n  closeLabel,\n  createLabel,\n  invalid,\n  optionAdornment,\n  autoFocus,\n  onBlur,\n  onSubmit,\n  \"aria-label\": ariaLabel,\n}: {\n  value: string;\n  onChange: (v: string) => void;\n  /** Suggestion pool (e.g. existing payee names). */\n  options: string[];\n  label?: string;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  /** Required and unanswered — see {@link Input}'s `invalid`. Set on the `<input>`\n   *  itself rather than on the wrapper, which is what let Keksdose's account picker\n   *  delete the `[&_input]:…` copy of {@link FIELD_INVALID} it had been carrying\n   *  because this component had no `invalid` of its own. */\n  invalid?: boolean;\n  /** Heading an option belongs under. Supplying it makes this list read exactly\n   *  like {@link InlineEntityCombobox}'s — one heading per group with its rows\n   *  indented beneath — instead of a flat list (feedback #136 rework: the payee\n   *  field sat next to the newly-grouped category field and no longer matched).\n   *  Omit for a plain list. */\n  groupBy?: (option: string) => string;\n  /**\n   * Something to show at the far end of an option's row — a badge saying what the\n   * option IS, as distinct from what it is called.\n   *\n   * Keksdose's category-name field is the case: its proposals carry per-locale\n   * names, so picking one stores a category that follows the UI language, and\n   * picking a look-alike custom name does not. That difference is invisible in the\n   * label and decides what the row DOES, so the row has to show it. Returning\n   * `null` for an option renders nothing and costs no layout.\n   *\n   * Not rendered in the create row, which by definition names nothing in the pool.\n   */\n  optionAdornment?: (option: string) => ReactNode;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`, open\n   *  the list with it. A click-the-value inline editor needs it: the cell the user\n   *  clicked names the field the caret should land in. {@link InlineEntityCombobox}\n   *  has had it since live #218. */\n  autoFocus?: boolean;\n  /** Focus genuinely LEFT the field. Not fired by picking a row — the rows suppress\n   *  `mousedown`, so the input never blurs — which is what makes it usable as a\n   *  \"close the inline editor\" signal. */\n  onBlur?: () => void;\n  /** Enter pressed with no row highlighted, i.e. \"I mean what I typed\". The list\n   *  closes either way; this is for a caller whose Enter also submits a row editor. */\n  onSubmit?: () => void;\n  \"aria-label\"?: string;\n  /** Rows to offer when the field is empty. 8 on a dropdown, where that is all\n   *  that fits; the phone sheet asks for more because it has a screen. */\n  maxSuggestions?: number;\n  searchPlaceholder?: string;\n  closeLabel?: string;\n  /**\n   * Label for the row that COMMITS a value the list does not contain — e.g.\n   * `(v) => \\`Add \"${v}\" as payee\\``. Supplying it turns the free text into\n   * something you confirm rather than something you leave behind.\n   *\n   * Keksdose live #212: *\"For the payee input have an apply button, when input is\n   * placed like 'add xxx as payee' to confirm. Now it can be put in and closed with\n   * the right top X, which seems not intuitive.\"* On the phone sheet the search box\n   * IS the value, so typing a brand-new name and dismissing the sheet did commit it —\n   * but the only control on offer was the close X, which reads as \"discard\". A named\n   * affordance says what the typing did.\n   *\n   * Omit and the row is not rendered, which is the right default for a list whose\n   * values are all supposed to already exist.\n   */\n  createLabel?: (value: string) => string;\n}) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // `backCloses` is the desktop half of live #309: the phone's list IS a\n  // {@link PickerSheet}, which registers its own history entry, so registering a\n  // second one here would cost two Back presses to dismiss one sheet.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n  const primaryOnly = usePrimaryPressOnly();\n  const [active, setActive] = useState(-1);\n  // A phone opens the list as a full-screen sheet with its own input, the way a\n  // native <select> does — live #200: \"Paid as full screen dialog with input.\n  // Similar to the account select that already appears as full screen.\" The\n  // anchored list stays for pointer devices, where it is the better shape.\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — the inner wrapper, which hugs the input,\n  // not the outer one (a grid item that can be taller than the field).\n  const fieldRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * Is the text in the field a QUERY, or just what was picked last time?\n   *\n   * Keksdose dev#549, filed against the category-name field: *\"Currently it acts kind\n   * of a filter and clicking again does not open anything since the previous text is\n   * still there likely filtering all other options out.\"* A combobox whose filter is\n   * its own value can only ever re-offer the answer it already has — after picking\n   * \"REWE\" the list reopens holding one row, the one you are looking at, and changing\n   * your mind means clearing the field by hand first.\n   *\n   * So the text filters only while it is being TYPED; opening the list, by focus or\n   * by clicking the field again, puts the whole pool back. {@link InlineEntityCombobox}\n   * below has had this since it was written (see its `typedQuery`) and the app's\n   * category-name field grew its own copy to get it — this one, the payee field, was\n   * the one left with the bug.\n   *\n   * Not derived from \"does the text exactly match an option\": a custom value that\n   * happens to collide with one would then behave differently from every other, and\n   * what is being tracked is what the user just did, which is not a property of the\n   * string.\n   */\n  const [typing, setTyping] = useState(false);\n\n  const query = typing ? value.trim().toLowerCase() : \"\";\n  const matches = useMemo(() => {\n    const seen = new Set<string>();\n    const uniq = options.filter((o) => o && !seen.has(o) && seen.add(o));\n    let ranked: string[];\n    const cap = maxSuggestions ?? (isPhone ? 50 : 8);\n    if (!query) {\n      ranked = uniq.slice(0, cap);\n    } else {\n      // Prefix matches first, then substring matches — most relevant on top.\n      const starts = uniq.filter((o) => o.toLowerCase().startsWith(query));\n      const contains = uniq.filter(\n        (o) => !o.toLowerCase().startsWith(query) && o.toLowerCase().includes(query),\n      );\n      ranked = [...starts, ...contains].slice(0, cap);\n    }\n    if (!groupBy) return ranked;\n    // Keep each group contiguous so a heading appears once instead of every time\n    // the ranking interleaves two groups — while preserving \"best match first\":\n    // a Map keeps insertion order, so groups come out ordered by their best-ranked\n    // member and members keep their rank order inside the group.\n    const byGroup = new Map<string, string[]>();\n    for (const o of ranked) {\n      const key = groupBy(o);\n      if (!byGroup.has(key)) byGroup.set(key, []);\n      byGroup.get(key)!.push(o);\n    }\n    return [...byGroup.values()].flat();\n  }, [options, query, groupBy, maxSuggestions, isPhone]);\n\n  const commit = (v: string) => {\n    onChange(v);\n    setOpen(false);\n    setActive(-1);\n    // What is in the field is now an ANSWER, not a query — so reopening offers the\n    // whole pool again rather than a one-row filter of the value just chosen.\n    setTyping(false);\n  };\n\n  // Offered only when the typed text is genuinely NOT in the pool: an exact\n  // (case-insensitive) match is an existing entry the list is already showing, and a\n  // second way to pick it would be noise. Compared against `options`, not `matches` —\n  // `matches` is capped, so a pool of 300 payees would otherwise offer to \"add\" one\n  // that exists but fell off the end of the list.\n  const typed = value.trim();\n  const createRow =\n    createLabel && typed.length > 0 && !options.some((o) => o.toLowerCase() === typed.toLowerCase())\n      ? createLabel(typed)\n      : null;\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      {/* The chevron centers against this inner wrapper, which hugs the input.\n          The outer div can be taller than the input (as a grid item it\n          stretches to the row height, e.g. next to the editor's category cell\n          with its split button), which used to drag a top-1/2 chevron down to\n          the input's bottom edge (feedback #248). */}\n      <div ref={fieldRef} className=\"relative\">\n        <input\n          id={fieldId}\n          value={value}\n          placeholder={placeholder}\n          // The visual label is a floating <span>, not a <label for>, so fall back to\n          // it for the accessible name — otherwise the field announces only what is\n          // typed in it (dev#477, applied to all three entity fields of a transaction\n          // form at once).\n          aria-label={ariaLabel ?? label}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-autocomplete=\"list\"\n          aria-invalid={invalid || undefined}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n          onBlur={onBlur}\n          onMouseDown={primaryOnly.onMouseDown}\n          onFocus={() => {\n            // A back/forward mouse button focuses this field on its way to\n            // navigating; it is not a request to open anything (live #309 rework).\n            if (primaryOnly.fromAuxButton()) return;\n            setOpen(true);\n            setTyping(false);\n            // The sheet carries its own input, so the field behind it must not also\n            // pull up the keyboard and scroll the page under the dialog.\n            if (isPhone) sheetInputRef.current?.focus();\n          }}\n          // A CLICK as well as focus — the other half of dev#549. Picking a suggestion\n          // closes the list without moving focus (the rows suppress `mousedown` on\n          // purpose, so the input never blurred), which means clicking the field again\n          // fires no `focus` event at all and the list stayed shut. \"Does not open\n          // anything\" was literally true.\n          onClick={() => {\n            setOpen(true);\n            setTyping(false);\n          }}\n          // `inputMode=\"none\"` rather than readOnly: the field must not look\n          // uneditable (FIELD_BASE greys a read-only field since dev#468) and must\n          // still take focus — it just has no keyboard of its own, the same trick\n          // the amount field uses for the numpad.\n          inputMode={isPhone ? \"none\" : undefined}\n          onChange={(e) => {\n            onChange(e.target.value);\n            setOpen(true);\n            setActive(-1);\n            setTyping(true);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              setOpen(true);\n              setActive((i) => Math.min(i + 1, matches.length - 1));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              setActive((i) => Math.max(i - 1, 0));\n            } else if (e.key === \"Enter\") {\n              if (open && active >= 0 && active < matches.length) {\n                e.preventDefault();\n                commit(matches[active]);\n              } else {\n                // No row highlighted: the typed text is the answer. `preventDefault`\n                // only when a caller is taking Enter, so a plain form submit is\n                // otherwise left alone.\n                if (onSubmit) e.preventDefault();\n                setOpen(false);\n                onSubmit?.();\n              }\n            } else if (e.key === \"Escape\") {\n              setOpen(false);\n              setActive(-1);\n            }\n          }}\n          className={cn(FIELD_BASE, label !== undefined && FIELD_FLOATING_PAD, \"pr-9\", invalid && FIELD_INVALID)}\n        />\n        <ChevronDown\n          aria-hidden\n          onMouseDown={(e) => {\n            // Toggle on the chevron without stealing focus from the input.\n            e.preventDefault();\n            setOpen((o) => !o);\n          }}\n          className=\"absolute right-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer text-slate-400 dark:text-slate-500\"\n        />\n      </div>\n      {isPhone && (\n        <PickerSheet\n          open={open}\n          onClose={() => setOpen(false)}\n          title={label}\n          // The sheet's input IS the field: this is a free-text control, so what is\n          // typed here is the value (a brand-new payee is just a name nothing\n          // matches), and the list below narrows as it changes.\n          query={value}\n          onQueryChange={(v) => {\n            onChange(v);\n            setTyping(true);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul role=\"listbox\">\n            {createRow && (\n              <li role=\"option\" aria-selected={false}>\n                <button\n                  type=\"button\"\n                  onClick={() => commit(typed)}\n                  className={cn(SHEET_ROW_CLASS, \"font-medium text-teal-700 dark:text-teal-300\")}\n                >\n                  {createRow}\n                </button>\n              </li>\n            )}\n            {matches.map((o) => {\n              const group = groupBy?.(o);\n              const startsGroup =\n                group != null && group !== (matches[matches.indexOf(o) - 1] && groupBy?.(matches[matches.indexOf(o) - 1]));\n              return (\n                <Fragment key={o}>\n                  {startsGroup && (\n                    <li\n                      role=\"presentation\"\n                      className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\"\n                    >\n                      {group}\n                    </li>\n                  )}\n                  <li role=\"option\" aria-selected={o === value}>\n                    <button\n                      type=\"button\"\n                      onClick={() => commit(o)}\n                      className={cn(\n                        SHEET_ROW_CLASS,\n                        optionAdornment && \"flex items-center justify-between gap-2\",\n                      )}\n                    >\n                      {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n                      {optionAdornment?.(o)}\n                    </button>\n                  </li>\n                </Fragment>\n              );\n            })}\n          </ul>\n        </PickerSheet>\n      )}\n      {!isPhone && open && (matches.length > 0 || createRow) && (\n        <SuggestionList anchorRef={fieldRef} panelRef={panelRef}>\n          {createRow && (\n            <li role=\"option\" aria-selected={false}>\n              <button\n                type=\"button\"\n                onMouseDown={(e) => {\n                  // mousedown, like the rows below: the input's blur would otherwise\n                  // close the list before the click landed.\n                  e.preventDefault();\n                  commit(typed);\n                }}\n                className={cn(rowClass(false), \"font-medium text-teal-700 dark:text-teal-300\")}\n              >\n                {createRow}\n              </button>\n            </li>\n          )}\n          {matches.map((o, i) => {\n            const group = groupBy?.(o);\n            // Heading at each group boundary only — `matches` is group-contiguous,\n            // so comparing against the previous row is enough.\n            const startsGroup = group != null && group !== (matches[i - 1] && groupBy?.(matches[i - 1]));\n            return (\n              <Fragment key={o}>\n                {startsGroup && (\n                  <li\n                    role=\"presentation\"\n                    className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400\"\n                  >\n                    {group}\n                  </li>\n                )}\n                <li role=\"option\" aria-selected={i === active}>\n                  <button\n                    type=\"button\"\n                    onMouseDown={(e) => {\n                      // mousedown (not click) so the blur from the input firing first\n                      // doesn't close the list before the selection registers.\n                      e.preventDefault();\n                      commit(o);\n                    }}\n                    onMouseEnter={() => setActive(i)}\n                    className={cn(\n                      rowClass(i === active),\n                      group != null && \"pl-6\",\n                      // A row with a badge is a flex row so the label truncates and the\n                      // badge keeps its width; without one it stays the plain block the\n                      // other lists render, so nothing shifts for callers that pass none.\n                      optionAdornment && \"flex items-center justify-between gap-2\",\n                    )}\n                  >\n                    {optionAdornment ? <span className=\"truncate\">{o}</span> : o}\n                    {optionAdornment?.(o)}\n                  </button>\n                </li>\n              </Fragment>\n            );\n          })}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n\n/**\n * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input\n * with the shared field styling, chevron and inline as-you-type filtering) but\n * the value is an option id, not free text. Built so an entity picker can sit\n * next to a free-text combobox without any visible difference — a button-trigger\n * panel picker ({@link EntityCombobox}) never matches an input field exactly.\n *\n * Text-vs-value reconciliation: the input's text is transient. Picking a row or\n * typing an exact (unique) label commits that option; emptying the text commits\n * a clear; anything else reverts to the selected option's label on blur/Escape.\n *\n * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}\n * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto\n * this component and must not lose its sheet). The sheet carries its OWN query state\n * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a\n * sheet that emptied it to show the full list would read as \"the user cleared the\n * field\" the moment it closed.\n */\nexport function InlineEntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  label,\n  id,\n  placeholder,\n  className,\n  disabled,\n  autoFocus,\n  searchPlaceholder,\n  emptyLabel,\n  closeLabel,\n  clearable,\n  clearLabel,\n  invalid,\n  \"aria-label\": ariaLabel,\n}: {\n  /** Selected option id, or null when nothing is selected. */\n  value: V | null;\n  /** Required and unanswered — see {@link Combobox}'s `invalid`. */\n  invalid?: boolean;\n  /** A picked/typed option emits its id; emptying the field emits `null`. */\n  onChange: (v: V | null) => void;\n  options: ComboOption<V>[];\n  label?: string;\n  id?: string;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  /** Focus on mount, the way `<input autoFocus>` does — and, through `onFocus`\n   *  below, open the list with it. A click-the-value editor needs it: the cell\n   *  the user clicked names the field the editor should land the caret in, and\n   *  without a passthrough this component's fixed prop list puts the `<input>`\n   *  out of a caller's reach entirely (Keksdose feedback live #218). */\n  autoFocus?: boolean;\n  /** Phone sheet only — the anchored list has the field itself to type in. */\n  searchPlaceholder?: string;\n  /** Phone sheet only: a full screen showing nothing has to say why. The anchored\n   *  list simply does not open. */\n  emptyLabel?: string;\n  closeLabel?: string;\n  /** Offer a clear \"×\" in place of the chevron whenever something is selected.\n   *\n   *  Emptying the text already clears (see {@link reconcile}), and on a desktop that\n   *  is the fast way. It is not a way at all on a PHONE: touching the field opens the\n   *  full-screen sheet, which covers the very input the text would have been deleted\n   *  from — so a field that had been answered could not be UNanswered by any gesture\n   *  the screen offered (Keksdose live #236, filed from a phone). The \"×\" is the one\n   *  affordance both shells share, and it clears without opening anything. */\n  clearable?: boolean;\n  clearLabel?: string;\n  \"aria-label\"?: string;\n}) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  // See the twin above: the phone sheet owns its own Back entry (live #309).\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone });\n  const primaryOnly = usePrimaryPressOnly();\n  const [active, setActive] = useState(-1);\n  // null = not editing → the input shows the selected option's label.\n  const [text, setText] = useState<string | null>(null);\n  const sheetInputRef = useRef<HTMLInputElement | null>(null);\n  // The box the portalled list hangs off — see {@link SuggestionList}.\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // The sheet's search box. Starts empty on every open, so a field that already\n  // holds a value still offers the whole list — the shape a native <select> has\n  // on a phone, and what the anchored panel gets from `query` below.\n  const [sheetQuery, setSheetQuery] = useState(\"\");\n\n  const selected = useMemo(\n    () => (value == null ? null : (options.find((o) => o.value === value) ?? null)),\n    [options, value],\n  );\n  const shown = text ?? selected?.label ?? \"\";\n  // Nothing selected has nothing to clear, and the chevron comes back — the field\n  // keeps exactly one trailing control, so the \"×\" never crowds the value it sits on.\n  const showClear = Boolean(clearable && value != null && !disabled);\n\n  // Focusing select-alls the current label; filtering only kicks in once the\n  // text actually differs from it, so an already-filled field still opens on\n  // the FULL list instead of a single-row \"filter\" of its own value.\n  const typedQuery =\n    text !== null && text !== (selected?.label ?? \"\") ? text.trim().toLowerCase() : \"\";\n  const query = isPhone ? sheetQuery.trim().toLowerCase() : typedQuery;\n  const matches = useMemo(() => {\n    let ranked = options;\n    if (query) {\n      const hit = (s: string | undefined) => s?.toLowerCase().includes(query) ?? false;\n      const starts = options.filter((o) => o.label.toLowerCase().startsWith(query));\n      const rest = options.filter(\n        (o) =>\n          !o.label.toLowerCase().startsWith(query) &&\n          (hit(o.label) || hit(o.sublabel) || hit(o.group)),\n      );\n      ranked = [...starts, ...rest];\n    }\n    if (!ranked.some((o) => o.group)) return ranked;\n    // Keep each group contiguous so the headings below appear once instead of\n    // re-appearing every time the ranking interleaves two groups — while preserving\n    // \"best match first\": a Map keeps insertion order, so groups come out ordered by\n    // their best-ranked member and members keep their rank order inside the group.\n    const blocks = new Map<string, ComboOption<V>[]>();\n    for (const o of ranked) {\n      const key = o.group ?? \"\";\n      if (!blocks.has(key)) blocks.set(key, []);\n      blocks.get(key)!.push(o);\n    }\n    return [...blocks.values()].flat();\n  }, [options, query]);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n    setSheetQuery(\"\");\n  };\n  const commit = (o: ComboOption<V>) => {\n    if (o.value !== value) onChange(o.value);\n    setText(null);\n    close();\n  };\n  /** Turn loose text into a decision: empty clears, an exact label match that names\n   *  ONE entity commits, anything else reverts to the selected label.\n   *\n   *  Unique by VALUE, not by row. An option may deliberately appear twice — Keksdose\n   *  repeats recently-used categories in a \"Recent\" group at the top (live #203) — and\n   *  counting rows made every such option uncommittable: two hits, so nothing fired and\n   *  the field reverted to whatever was selected before. Typing a category you had just\n   *  used, then tabbing away, silently discarded it, and the more categories you used\n   *  the more of them stopped working. Two rows naming the same id are not an ambiguity;\n   *  two ids sharing a label are. */\n  const reconcile = () => {\n    if (text !== null) {\n      const q = text.trim();\n      if (!q) {\n        if (value != null) onChange(null);\n      } else {\n        const hits = options.filter((o) => o.label.toLowerCase() === q.toLowerCase());\n        const ids = new Set(hits.map((h) => h.value));\n        if (ids.size === 1 && hits[0].value !== value) onChange(hits[0].value);\n      }\n      setText(null);\n    }\n    close();\n  };\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      {/* Inner wrapper for chevron centering — same reasoning as Combobox above.\n          It is also what the portalled list anchors to. */}\n      <div ref={fieldRef} className=\"relative\">\n        <input\n          id={fieldId}\n          value={shown}\n          placeholder={placeholder}\n          // The visual label is a floating <span>, not a <label for>, so without this\n          // the field has NO accessible name — it announces its value and nothing\n          // else. Just the label, never \"label: value\" the way a trigger button has\n          // to compose it: an input already exposes its value separately.\n          aria-label={ariaLabel ?? (typeof label === \"string\" ? label : undefined)}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-autocomplete=\"list\"\n          aria-invalid={invalid || undefined}\n          autoComplete=\"off\"\n          disabled={disabled}\n          autoFocus={autoFocus}\n          // `inputMode=\"none\"` rather than readOnly, for the same reason Combobox\n          // above gives: the sheet carries the keyboard, and a readOnly field would\n          // take FIELD_BASE's settled look on a field that is perfectly editable.\n          inputMode={isPhone ? \"none\" : undefined}\n          onMouseDown={primaryOnly.onMouseDown}\n          onFocus={(e) => {\n            // See {@link usePrimaryPressOnly}: a back/forward button lands here on\n            // its way to navigating, and neither the list nor the select-all is\n            // anything it asked for (live #309 rework).\n            if (primaryOnly.fromAuxButton()) return;\n            setText(shown);\n            e.currentTarget.select();\n            setOpen(true);\n            // The sheet has its own input; the field behind it must not also pull up\n            // the keyboard and scroll the page under the dialog.\n            if (isPhone) sheetInputRef.current?.focus();\n          }}\n          onBlur={() => {\n            // On a phone the blur is the SHEET taking focus, not the user leaving the\n            // field — reconciling there would close the sheet the instant it opened.\n            if (!isPhone) reconcile();\n          }}\n          onChange={(e) => {\n            setText(e.target.value);\n            setOpen(true);\n            setActive(-1);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              setOpen(true);\n              setActive((i) => Math.min(i + 1, matches.length - 1));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              setActive((i) => Math.max(i - 1, 0));\n            } else if (e.key === \"Enter\") {\n              if (open && active >= 0 && active < matches.length) {\n                e.preventDefault();\n                commit(matches[active]);\n              } else {\n                reconcile();\n              }\n            } else if (e.key === \"Escape\") {\n              setText(null);\n              close();\n            }\n          }}\n          className={cn(FIELD_BASE, label !== undefined && FIELD_FLOATING_PAD, \"pr-9\", invalid && FIELD_INVALID)}\n        />\n        {showClear ? (\n          <button\n            type=\"button\"\n            // Out of the tab order, like the clear on `EntityCombobox`: the keyboard\n            // already clears this field by selecting its text and deleting, and a\n            // second stop between every picker and the next field is a worse trade\n            // than the one gesture it saves.\n            tabIndex={-1}\n            aria-label={clearLabel ?? \"Clear\"}\n            // preventDefault, exactly as the chevron does: without it the press\n            // focuses the input, which on a phone opens the sheet over the field the\n            // press was clearing.\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={() => {\n              setText(null);\n              close();\n              onChange(null);\n            }}\n            className={cn(\n              \"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400\",\n              \"hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\",\n            )}\n          >\n            <X aria-hidden className=\"size-4\" />\n          </button>\n        ) : (\n          <ChevronDown\n            aria-hidden\n            onMouseDown={(e) => {\n              // Toggle on the chevron without stealing focus from the input.\n              e.preventDefault();\n              setOpen((o) => !o);\n            }}\n            className={cn(\n              \"absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500\",\n              disabled ? \"opacity-50\" : \"cursor-pointer\",\n            )}\n          />\n        )}\n      </div>\n      {isPhone && (\n        <PickerSheet\n          open={open}\n          // Closing without choosing keeps the value: `text` was never emptied, so\n          // reconcile has nothing to undo — it just puts the label back.\n          onClose={reconcile}\n          title={label}\n          query={sheetQuery}\n          onQueryChange={(v) => {\n            setSheetQuery(v);\n            setActive(-1);\n          }}\n          searchPlaceholder={searchPlaceholder ?? placeholder}\n          inputRef={sheetInputRef}\n          closeLabel={closeLabel}\n        >\n          <ul role=\"listbox\">\n            {matches.map((o, i) => (\n              // Keyed by group AND value, like combobox-core.tsx: an option may\n              // deliberately appear twice (see `reconcile`), and a bare value key\n              // would collide.\n              <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                {o.group && o.group !== matches[i - 1]?.group && (\n                  <li\n                    role=\"presentation\"\n                    className=\"px-4 pb-0.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\"\n                  >\n                    {o.group}\n                  </li>\n                )}\n                <li role=\"option\" aria-selected={o.value === value}>\n                  <button\n                    type=\"button\"\n                    onClick={() => commit(o)}\n                    className={cn(SHEET_ROW_CLASS, o.value === value && \"font-medium\")}\n                  >\n                    {o.label}\n                  </button>\n                </li>\n              </Fragment>\n            ))}\n            {matches.length === 0 && emptyLabel && (\n              <li className=\"px-4 py-3 text-sm text-slate-500 dark:text-slate-400\">{emptyLabel}</li>\n            )}\n          </ul>\n        </PickerSheet>\n      )}\n      {!isPhone && open && matches.length > 0 && (\n        <SuggestionList anchorRef={fieldRef} panelRef={panelRef}>\n          {matches.map((o, i) => (\n            // A group heading is emitted at each group boundary rather than repeating\n            // the group on every row (feedback #136). `matches` is group-contiguous,\n            // so comparing with the previous row is enough. Fragment key sits here;\n            // the heading and the option carry their own list semantics — keyed by\n            // group AND value, because an option may deliberately appear twice (see\n            // `reconcile`).\n            <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n              {o.group && o.group !== matches[i - 1]?.group && (\n                <li\n                  role=\"presentation\"\n                  className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 first:pt-1 dark:text-slate-400\"\n                >\n                  {o.group}\n                </li>\n              )}\n              <li role=\"option\" aria-selected={o.value === value}>\n                <button\n                  type=\"button\"\n                  onMouseDown={(e) => {\n                    // mousedown (not click) so the input's blur can't close the\n                    // list before the selection registers.\n                    e.preventDefault();\n                    commit(o);\n                  }}\n                  onMouseEnter={() => setActive(i)}\n                  className={cn(\n                    rowClass(i === active),\n                    // Indented under its heading, so the hierarchy is readable at a\n                    // glance instead of inferred from grey trailing text.\n                    o.group && \"pl-6\",\n                    o.value === value && \"font-medium\",\n                  )}\n                >\n                  {o.label}\n                  {o.sublabel && (\n                    <span className=\"ml-2 text-xs text-slate-400 dark:text-slate-500\">\n                      {o.sublabel}\n                    </span>\n                  )}\n                </button>\n              </li>\n            </Fragment>\n          ))}\n        </SuggestionList>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/currency-select.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface CurrencyOption {
+    code: string;
+    name: string;
+    symbol: string;
+    /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
+    country: string;
+}
+declare const CURRENCIES: CurrencyOption[];
+declare function CurrencyFlag({ country, className }: {
+    country: string;
+    className?: string;
+}): react.JSX.Element;
+declare function getCurrency(code: string | null | undefined): CurrencyOption | undefined;
+interface CurrencySelectProps {
+    value: string;
+    onChange: (code: string) => void;
+    placeholder?: string;
+    className?: string;
+    label?: ReactNode;
+    /**
+     * Restrict the pickable currencies to these ISO codes (e.g. only the
+     * currencies actually present in a budget). Order is preserved. Defaults to
+     * the full {@link CURRENCIES} list.
+     */
+    options?: string[];
+    /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the
+     *  native `Select` has worn since feedback #235. Every field-styled control in
+     *  this package carries it now, so a form can mark any of its fields rather than
+     *  only the one that happened to have it first. */
+    invalid?: boolean;
+}
+declare function CurrencySelect({ value, onChange, placeholder, className, label, options, invalid }: CurrencySelectProps): react.JSX.Element;
+
+export { CURRENCIES, CurrencyFlag, type CurrencyOption, CurrencySelect, getCurrency };

package/dist/components/currency-select.js

@@ -0,0 +1,131 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Check } from "lucide-react";
+import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./ui.js";
+import { cn } from "../lib/cn.js";
+import { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
+const CURRENCIES = [
+  { code: "EUR", name: "Euro", symbol: "\u20AC", country: "eu" },
+  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
+  { code: "GBP", name: "British Pound", symbol: "\xA3", country: "gb" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
+  { code: "JPY", name: "Japanese Yen", symbol: "\xA5", country: "jp" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
+  { code: "PLN", name: "Polish Zloty", symbol: "z\u0142", country: "pl" },
+  { code: "CZK", name: "Czech Koruna", symbol: "K\u010D", country: "cz" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "\u043B\u0432", country: "bg" },
+  { code: "TRY", name: "Turkish Lira", symbol: "\u20BA", country: "tr" },
+  { code: "RUB", name: "Russian Ruble", symbol: "\u20BD", country: "ru" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "\xA5", country: "cn" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
+  { code: "INR", name: "Indian Rupee", symbol: "\u20B9", country: "in" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
+  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
+  { code: "ILS", name: "Israeli Shekel", symbol: "\u20AA", country: "il" },
+  { code: "AED", name: "UAE Dirham", symbol: "\u062F.\u0625", country: "ae" }
+];
+function CurrencyFlag({ country, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("fi inline-block w-5 h-[15px] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0", `fi-${country}`, className)
+    }
+  );
+}
+const CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));
+function getCurrency(code) {
+  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : void 0;
+}
+function CurrencySelect({ value, onChange, placeholder, className, label, options, invalid }) {
+  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();
+  const selected = getCurrency(value);
+  const pool = useMemo(() => {
+    if (!options) return CURRENCIES;
+    return options.map((code) => getCurrency(code)).filter((c) => !!c);
+  }, [options]);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return pool;
+    return pool.filter(
+      (c) => c.code.toLowerCase().includes(q) || c.name.toLowerCase().includes(q) || c.symbol.toLowerCase().includes(q)
+    );
+  }, [query, pool]);
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
+    label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-invalid": invalid || void 0,
+        className: cn(FIELD_TRIGGER, "pr-9", label !== void 0 && FIELD_FLOATING_PAD, invalid && FIELD_INVALID),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("flex items-center gap-2 min-w-0", selected ? "text-slate-900 dark:text-slate-100" : "text-slate-400 dark:text-slate-500"), children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CurrencyFlag, { country: selected.country }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: selected.code })
+          ] }) : placeholder ?? "Currency" }),
+          /* @__PURE__ */ jsx(FieldChevron, {})
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      DropdownPanel,
+      {
+        className: "right-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]",
+        empty: filtered.length === 0,
+        header: /* @__PURE__ */ jsx(
+          DropdownSearchHeader,
+          {
+            query,
+            onQueryChange: setQuery,
+            inputRef,
+            placeholder: placeholder ?? "Search currency"
+          }
+        ),
+        children: filtered.map((c) => {
+          const active = c.code === selected?.code;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange(c.code);
+                setOpen(false);
+              },
+              className: cn(
+                "flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800",
+                active && "bg-slate-100 dark:bg-slate-800"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx(CurrencyFlag, { country: c.country }),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono text-slate-500 dark:text-slate-400 w-8 shrink-0", children: c.symbol }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-900 dark:text-slate-100", children: c.code }),
+                  /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400 truncate", children: c.name })
+                ] }),
+                active && /* @__PURE__ */ jsx(Check, { className: "size-4 text-slate-700 dark:text-slate-200 shrink-0" })
+              ]
+            }
+          ) }, c.code);
+        })
+      }
+    )
+  ] });
+}
+export {
+  CURRENCIES,
+  CurrencyFlag,
+  CurrencySelect,
+  getCurrency
+};
+//# sourceMappingURL=currency-select.js.map

package/dist/components/currency-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/currency-select.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\n\nexport interface CurrencyOption {\n  code: string;\n  name: string;\n  symbol: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */\n  country: string;\n}\n\nexport const CURRENCIES: CurrencyOption[] = [\n  { code: \"EUR\", name: \"Euro\", symbol: \"€\", country: \"eu\" },\n  { code: \"USD\", name: \"US Dollar\", symbol: \"$\", country: \"us\" },\n  { code: \"GBP\", name: \"British Pound\", symbol: \"£\", country: \"gb\" },\n  { code: \"CHF\", name: \"Swiss Franc\", symbol: \"CHF\", country: \"ch\" },\n  { code: \"JPY\", name: \"Japanese Yen\", symbol: \"¥\", country: \"jp\" },\n  { code: \"CAD\", name: \"Canadian Dollar\", symbol: \"CA$\", country: \"ca\" },\n  { code: \"AUD\", name: \"Australian Dollar\", symbol: \"A$\", country: \"au\" },\n  { code: \"NZD\", name: \"New Zealand Dollar\", symbol: \"NZ$\", country: \"nz\" },\n  { code: \"SEK\", name: \"Swedish Krona\", symbol: \"kr\", country: \"se\" },\n  { code: \"NOK\", name: \"Norwegian Krone\", symbol: \"kr\", country: \"no\" },\n  { code: \"DKK\", name: \"Danish Krone\", symbol: \"kr\", country: \"dk\" },\n  { code: \"PLN\", name: \"Polish Zloty\", symbol: \"zł\", country: \"pl\" },\n  { code: \"CZK\", name: \"Czech Koruna\", symbol: \"Kč\", country: \"cz\" },\n  { code: \"HUF\", name: \"Hungarian Forint\", symbol: \"Ft\", country: \"hu\" },\n  { code: \"RON\", name: \"Romanian Leu\", symbol: \"lei\", country: \"ro\" },\n  { code: \"BGN\", name: \"Bulgarian Lev\", symbol: \"лв\", country: \"bg\" },\n  { code: \"TRY\", name: \"Turkish Lira\", symbol: \"₺\", country: \"tr\" },\n  { code: \"RUB\", name: \"Russian Ruble\", symbol: \"₽\", country: \"ru\" },\n  { code: \"CNY\", name: \"Chinese Yuan\", symbol: \"¥\", country: \"cn\" },\n  { code: \"HKD\", name: \"Hong Kong Dollar\", symbol: \"HK$\", country: \"hk\" },\n  { code: \"SGD\", name: \"Singapore Dollar\", symbol: \"S$\", country: \"sg\" },\n  { code: \"INR\", name: \"Indian Rupee\", symbol: \"₹\", country: \"in\" },\n  { code: \"BRL\", name: \"Brazilian Real\", symbol: \"R$\", country: \"br\" },\n  { code: \"MXN\", name: \"Mexican Peso\", symbol: \"MX$\", country: \"mx\" },\n  { code: \"ZAR\", name: \"South African Rand\", symbol: \"R\", country: \"za\" },\n  { code: \"ILS\", name: \"Israeli Shekel\", symbol: \"₪\", country: \"il\" },\n  { code: \"AED\", name: \"UAE Dirham\", symbol: \"د.إ\", country: \"ae\" },\n];\n\nexport function CurrencyFlag({ country, className }: { country: string; className?: string }) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\"fi inline-block w-5 h-[15px] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0\", `fi-${country}`, className)}\n    />\n  );\n}\n\nconst CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));\n\nexport function getCurrency(code: string | null | undefined): CurrencyOption | undefined {\n  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;\n}\n\ninterface CurrencySelectProps {\n  value: string;\n  onChange: (code: string) => void;\n  placeholder?: string;\n  className?: string;\n  label?: ReactNode;\n  /**\n   * Restrict the pickable currencies to these ISO codes (e.g. only the\n   * currencies actually present in a budget). Order is preserved. Defaults to\n   * the full {@link CURRENCIES} list.\n   */\n  options?: string[];\n  /** Required and unanswered — {@link FIELD_INVALID}, the same rose border the\n   *  native `Select` has worn since feedback #235. Every field-styled control in\n   *  this package carries it now, so a form can mark any of its fields rather than\n   *  only the one that happened to have it first. */\n  invalid?: boolean;\n}\n\nexport function CurrencySelect({ value, onChange, placeholder, className, label, options, invalid }: CurrencySelectProps) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\n\n  const selected = getCurrency(value);\n  const pool = useMemo(() => {\n    if (!options) return CURRENCIES;\n    // Keep the caller's order; drop codes we don't have a definition for.\n    return options.map((code) => getCurrency(code)).filter((c): c is CurrencyOption => !!c);\n  }, [options]);\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return pool;\n    return pool.filter(\n      (c) =>\n        c.code.toLowerCase().includes(q) ||\n        c.name.toLowerCase().includes(q) ||\n        c.symbol.toLowerCase().includes(q),\n    );\n  }, [query, pool]);\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        aria-invalid={invalid || undefined}\n        className={cn(FIELD_TRIGGER, \"pr-9\", label !== undefined && FIELD_FLOATING_PAD, invalid && FIELD_INVALID)}\n      >\n        {/* The trigger stays COMPACT — flag + code only — so it never clips in a\n            narrow field; the full names live in the (wider) popup (feedback\n            #308). */}\n        <span className={cn(\"flex items-center gap-2 min-w-0\", selected ? \"text-slate-900 dark:text-slate-100\" : \"text-slate-400 dark:text-slate-500\")}>\n          {selected ? (\n            <>\n              <CurrencyFlag country={selected.country} />\n              <span className=\"font-medium\">{selected.code}</span>\n            </>\n          ) : (\n            placeholder ?? \"Currency\"\n          )}\n        </span>\n        <FieldChevron />\n      </button>\n      {open && (\n        <DropdownPanel\n          // At least as wide as the trigger, but grows to fit the full currency\n          // names and caps so it never runs off-screen. RIGHT-aligned so it grows\n          // leftward instead of pushing the page width when there's content to the\n          // right of the field (feedback #308).\n          className=\"right-0 min-w-full w-max max-w-[min(20rem,calc(100vw-2rem))]\"\n          empty={filtered.length === 0}\n          header={\n            <DropdownSearchHeader\n              query={query}\n              onQueryChange={setQuery}\n              inputRef={inputRef}\n              placeholder={placeholder ?? \"Search currency\"}\n            />\n          }\n        >\n          {filtered.map((c) => {\n              const active = c.code === selected?.code;\n              return (\n                <li key={c.code}>\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      onChange(c.code);\n                      setOpen(false);\n                    }}\n                    className={cn(\n                      \"flex w-full items-center justify-between gap-2 px-3 py-2 text-sm text-left hover:bg-slate-50 dark:hover:bg-slate-800\",\n                      active && \"bg-slate-100 dark:bg-slate-800\",\n                    )}\n                  >\n                    <span className=\"flex items-center gap-2 min-w-0\">\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-slate-500 dark:text-slate-400 w-8 shrink-0\">{c.symbol}</span>\n                      <span className=\"font-medium text-slate-900 dark:text-slate-100\">{c.code}</span>\n                      <span className=\"text-slate-500 dark:text-slate-400 truncate\">{c.name}</span>\n                    </span>\n                    {active && <Check className=\"size-4 text-slate-700 dark:text-slate-200 shrink-0\" />}\n                  </button>\n                </li>\n              );\n            })}\n        </DropdownPanel>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-filter-popover.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { a as DataTableColumn, c as FilterValue } from '../data-table-filters-aXyf0Xub.js';
+import { DataTableLabels } from './data-table-labels.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+
+interface FilterPopoverProps<T> {
+    column: DataTableColumn<T>;
+    state: FilterValue;
+    onChange: (next: FilterValue) => void;
+    onClear: () => void;
+    selectOptions: {
+        value: string;
+        label: string;
+    }[];
+    /** BCP-47 locale for the date picker / labels. */
+    locale?: string;
+    labels?: DataTableLabels;
+}
+/**
+ * The contents of a column's filter Popover. Renders the right control set for
+ * the column's filter type — text search, select checklist, date range (presets
+ * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs
+ * toggle — driving the shared {@link FilterValue} state.
+ */
+declare function FilterPopover<T>({ column, state, onChange, onClear, selectOptions, locale, labels, }: FilterPopoverProps<T>): react.JSX.Element | null;
+
+export { FilterPopover };

package/dist/components/data-table-filter-popover.js

@@ -0,0 +1,201 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { MiniCalendar } from "./mini-calendar.js";
+import { dateRangePresets } from "../lib/dates.js";
+import { resolveFilter } from "./data-table-filters.js";
+import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
+function FilterPopover({
+  column,
+  state,
+  onChange,
+  onClear,
+  selectOptions,
+  locale,
+  labels = DEFAULT_DATA_TABLE_LABELS
+}) {
+  const filter = resolveFilter(column);
+  if (!filter) return null;
+  const inputBase = "block w-full rounded border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-700 placeholder:text-slate-400 focus:border-slate-400 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500";
+  const buttonBase = "rounded border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800";
+  const clearRow = /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: onClear, className: cn(buttonBase, "flex items-center gap-1"), children: [
+    /* @__PURE__ */ jsx(X, { className: "size-3" }),
+    " ",
+    labels.clearFilter
+  ] }) });
+  if (filter.type === "text") {
+    const v2 = state.type === "text" ? state : { type: "text", q: "" };
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          autoFocus: true,
+          value: v2.q,
+          onChange: (e) => onChange({ type: "text", q: e.target.value }),
+          placeholder: labels.filterPlaceholder,
+          className: inputBase
+        }
+      ),
+      clearRow
+    ] });
+  }
+  if (filter.type === "select") {
+    const v2 = state.type === "select" ? state : { type: "select", values: [] };
+    const toggle = (val) => {
+      const set = new Set(v2.values);
+      if (set.has(val)) set.delete(val);
+      else set.add(val);
+      onChange({ type: "select", values: Array.from(set) });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-slate-500 dark:text-slate-400", children: [
+        /* @__PURE__ */ jsx("span", { children: labels.selectFilter }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({ type: "select", values: selectOptions.map((o) => o.value) }),
+              className: buttonBase,
+              children: labels.selectAll
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({ type: "select", values: [] }),
+              className: buttonBase,
+              children: labels.selectNone
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("ul", { className: "max-h-56 overflow-y-auto rounded border border-slate-100 dark:border-slate-800", children: [
+        selectOptions.map((o) => {
+          const checked = v2.values.includes(o.value);
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked,
+                onChange: () => toggle(o.value),
+                className: "size-3.5"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: o.label })
+          ] }) }, o.value);
+        }),
+        selectOptions.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-2 py-2 text-sm text-slate-500 dark:text-slate-400", children: "\u2014" })
+      ] }),
+      clearRow
+    ] });
+  }
+  if (filter.type === "date") {
+    const v2 = state.type === "date" ? state : { type: "date", from: "", to: "" };
+    const set = (from, to) => onChange({ type: "date", from, to });
+    const presets = dateRangePresets();
+    const isActivePreset = (p) => v2.from === p.from && v2.to === p.to;
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx("ul", { className: "flex w-28 shrink-0 flex-col gap-0.5 text-xs", children: presets.map((p) => {
+        const active = isActivePreset(p);
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => set(p.from, p.to),
+            className: cn(
+              "block w-full rounded px-2 py-1 text-left transition-colors",
+              active ? "bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-200" : "text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
+            ),
+            children: labels.presets[p.key] ?? p.key
+          }
+        ) }, p.key);
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx(MiniCalendar, { from: v2.from, to: v2.to, locale: locale ?? "en", onSelect: set }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+            labels.dateFrom,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "date",
+                value: v2.from,
+                onChange: (e) => set(e.target.value, v2.to),
+                className: cn("mt-0.5", inputBase)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+            labels.dateTo,
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "date",
+                value: v2.to,
+                onChange: (e) => set(v2.from, e.target.value),
+                className: cn("mt-0.5", inputBase)
+              }
+            )
+          ] })
+        ] }),
+        clearRow
+      ] })
+    ] });
+  }
+  const v = state.type === "number" ? state : { type: "number", min: "", max: "", abs: false };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+        labels.numberMin,
+        " (\u2265)",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            inputMode: "decimal",
+            value: v.min,
+            onChange: (e) => onChange({ type: "number", min: e.target.value, max: v.max, abs: v.abs }),
+            onWheel: (e) => e.currentTarget.blur(),
+            className: cn("mt-0.5", inputBase)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
+        labels.numberMax,
+        " (\u2264)",
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            inputMode: "decimal",
+            value: v.max,
+            onChange: (e) => onChange({ type: "number", min: v.min, max: e.target.value, abs: v.abs }),
+            onWheel: (e) => e.currentTarget.blur(),
+            className: cn("mt-0.5", inputBase)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: v.abs,
+          onChange: (e) => onChange({ type: "number", min: v.min, max: v.max, abs: e.target.checked }),
+          className: "size-3.5"
+        }
+      ),
+      labels.numberAbs
+    ] }),
+    clearRow
+  ] });
+}
+export {
+  FilterPopover
+};
+//# sourceMappingURL=data-table-filter-popover.js.map

package/dist/components/data-table-filter-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. */\n  locale?: string;\n  labels?: DataTableLabels;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale,\n  labels = DEFAULT_DATA_TABLE_LABELS,\n}: FilterPopoverProps<T>) {\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  const inputBase =\n    \"block w-full rounded border border-slate-200 bg-white px-2 py-1.5 text-sm text-slate-700 placeholder:text-slate-400 focus:border-slate-400 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500\";\n  const buttonBase =\n    \"rounded border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          autoFocus\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-slate-500 dark:text-slate-400\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: [] })}\n              className={buttonBase}\n            >\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-slate-100 dark:border-slate-800\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-800\">\n                  <input\n                    type=\"checkbox\"\n                    checked={checked}\n                    onChange={() => toggle(o.value)}\n                    className=\"size-3.5\"\n                  />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && (\n            <li className=\"px-2 py-2 text-sm text-slate-500 dark:text-slate-400\">—</li>\n          )}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    return (\n      <div className=\"flex gap-3\">\n        <ul className=\"flex w-28 shrink-0 flex-col gap-0.5 text-xs\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block w-full rounded px-2 py-1 text-left transition-colors\",\n                    active\n                      ? \"bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-200\"\n                      : \"text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          <MiniCalendar from={v.from} to={v.to} locale={locale ?? \"en\"} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-slate-500 dark:text-slate-400\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-slate-500 dark:text-slate-400\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-slate-500 dark:text-slate-400\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.min}\n            onChange={(e) => onChange({ type: \"number\", min: e.target.value, max: v.max, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-slate-500 dark:text-slate-400\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"number\"\n            inputMode=\"decimal\"\n            value={v.max}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: e.target.value, abs: v.abs })}\n            onWheel={(e) => e.currentTarget.blur()}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}

package/dist/components/data-table-filters.d.ts

@@ -0,0 +1,5 @@
+export { C as ColumnFilter, c as FilterValue, d as decodeFilterValue, e as decodeFilterValueOfType, f as defaultFilterState, g as encodeFilterValue, i as isFilterActive, r as resolveFilter, h as rowMatches } from '../data-table-filters-aXyf0Xub.js';
+import 'react';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './data-table-labels.js';