@payglocal_ui/flux-ui 0.2.6 → 0.3.0

package/src/format-datetime.ts

@@ -0,0 +1,170 @@
+/**
+ * The app-wide date and time format.
+ *
+ * Every timestamp a PayGlocal dashboard shows a user goes through here, so a
+ * transaction row, a settlement detail page, an audit log line and a chart
+ * tooltip all read the same: `27 Jul '26, 09:49 AM`.
+ *
+ * Nothing here goes through `toLocaleDateString` / `toLocaleTimeString`. That
+ * is deliberate: Intl output varies with the machine's locale, so the same
+ * record would read differently for an operator in Bengaluru and a merchant in
+ * Frankfurt, and a screenshot in a support ticket would not match what the
+ * agent sees. These build the string from fixed tables instead.
+ *
+ * Times are rendered in the **viewer's own timezone**, which is what every
+ * `Date` getter below returns. That is the right default for an operations
+ * console — "did this settle before close of business *here*" is the question
+ * being asked — but it does mean two people in different zones see different
+ * clock times for one event, so anywhere that matters should label the zone.
+ */
+
+const MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+] as const;
+
+const DAYS_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const;
+
+/** What an absent or unparseable value renders as, everywhere. */
+export const EMPTY_DATE = "—";
+
+/**
+ * Parses the shapes PayGlocal APIs actually send, in the order they are most
+ * likely to appear:
+ *
+ * - `DD/MM/YYYY HH:mm:ss` — the transactions search response's
+ *   `formattedCreationDateTime`. Tried **first**, because `new Date()` reads
+ *   `03/07/2026` as *March 7th* under US parsing rules, silently swapping the
+ *   day and month for the first twelve days of every month.
+ * - epoch milliseconds, as a number **or a string** — several endpoints send
+ *   `"1771329858260"`. The string form needs `Number()` first: the `Date`
+ *   constructor reads a string as a date *format*, not a count of
+ *   milliseconds, so `new Date("1771329858260")` is an Invalid Date.
+ * - ISO 8601 — `settlementDate`, and most newer endpoints.
+ */
+export function parseApiDate(value: string | number | Date | null | undefined): Date | null {
+  if (value === null || value === undefined || value === "") return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+
+  if (typeof value === "number") {
+    const fromMillis = new Date(value);
+    return Number.isNaN(fromMillis.getTime()) ? null : fromMillis;
+  }
+
+  const raw = value.trim();
+
+  const slashed = raw.match(
+    /^(\d{2})\/(\d{2})\/(\d{4})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/
+  );
+  if (slashed) {
+    const [, dd, mm, yyyy, hh = "0", min = "0", ss = "0"] = slashed;
+    const parsed = new Date(
+      Number(yyyy),
+      Number(mm) - 1,
+      Number(dd),
+      Number(hh),
+      Number(min),
+      Number(ss)
+    );
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+
+  // A string of digits is epoch millis, not a date format.
+  if (/^\d+$/.test(raw)) {
+    const parsed = new Date(Number(raw));
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+
+  const parsed = new Date(raw);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+/** `09:49 AM` — 12-hour, zero-padded, uppercase meridiem. */
+export function formatTime(date: Date): string {
+  const hours24 = date.getHours();
+  const hours12 = hours24 % 12 || 12;
+  const meridiem = hours24 >= 12 ? "PM" : "AM";
+  return `${String(hours12).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")} ${meridiem}`;
+}
+
+/** `27 Jul '26` — the date half, on its own. */
+export function formatDateOnly(date: Date): string {
+  const yy = String(date.getFullYear() % 100).padStart(2, "0");
+  return `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]} '${yy}`;
+}
+
+/** `27 Jul '26, 09:49 AM` — the canonical form. */
+export function formatDateTime(date: Date): string {
+  return `${formatDateOnly(date)}, ${formatTime(date)}`;
+}
+
+/**
+ * Any API value → `27 Jul '26, 09:49 AM`.
+ *
+ * This is the one to reach for in a column renderer or a detail field: it takes
+ * whatever shape the endpoint sends, and returns the em dash rather than
+ * "Invalid Date" when there is nothing to show.
+ *
+ * `fallback` is what an absent or unparseable value renders as. It defaults to
+ * the em dash; pass `""` where the timestamp sits inside a sentence that should
+ * simply omit it rather than show a placeholder.
+ */
+export function formatTimestamp(
+  value: string | number | Date | null | undefined,
+  fallback: string = EMPTY_DATE
+): string {
+  const date = parseApiDate(value);
+  return date ? formatDateTime(date) : fallback;
+}
+
+/** Any API value → `27 Jul '26`, with no time of day. */
+export function formatDateStamp(
+  value: string | number | Date | null | undefined,
+  fallback: string = EMPTY_DATE
+): string {
+  const date = parseApiDate(value);
+  return date ? formatDateOnly(date) : fallback;
+}
+
+/** Any API value → `09:49 AM`, with no date. */
+export function formatTimeStamp(
+  value: string | number | Date | null | undefined,
+  fallback: string = EMPTY_DATE
+): string {
+  const date = parseApiDate(value);
+  return date ? formatTime(date) : fallback;
+}
+
+/**
+ * `Mon, 27 Jul` — weekday and date, no year. For a date close enough to the
+ * present that naming the day of the week reads better than a bare calendar
+ * date, such as a "next settlement" line.
+ */
+export function formatWeekdayDate(
+  value: string | number | Date | null | undefined,
+  fallback: string = EMPTY_DATE
+): string {
+  const date = parseApiDate(value);
+  if (!date) return fallback;
+  return `${DAYS_SHORT[date.getDay()]}, ${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`;
+}
+
+/** `Jan 2026` — a month key (`YYYY-MM`) as a label. */
+export function formatMonthLabel(monthKey: string): string {
+  const [year, month] = monthKey.split("-");
+  const name = MONTHS_SHORT[Number(month) - 1];
+  if (!year || !name) return monthKey;
+  return `${name} ${year}`;
+}
+
+export { MONTHS_SHORT, DAYS_SHORT };

package/src/index.ts

@@ -209,6 +209,8 @@ export type {
 
 // Tabs & Accordion
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { UnderlineTabs, SegmentedTabs } from "./tab-presets";
+export type { UnderlineTab, SegmentedTabOption } from "./tab-presets";
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./accordion";
 
 // Messaging & Feedback
@@ -232,8 +234,34 @@ export type { ProgressProps, ProgressTrackerStep, ProgressTrackerProps } from ".
 export { Shimmer, StatCardSkeleton, TableRowSkeleton, ChartSkeleton } from "./skeleton";
 
 // Data display
-export { DataTable } from "./data-table";
-export type { Column, DataTableDensity, DataTableExpandable, DataTableFooterSummary, DataTableHeaderStyle } from "./data-table";
+export { DataTable, frozenColumn } from "./data-table";
+export type {
+  Column,
+  DataTableDensity,
+  DataTableExpandable,
+  DataTableFooterSummary,
+  DataTableHeaderStyle,
+  DataTablePagination,
+  DataTableSorting,
+  DataTableSortState,
+  SortOrder,
+} from "./data-table";
+export { DataTableCard, TableToolbarActions } from "./data-table-card";
+export { DataCardList } from "./data-card-list";
+export type { DataCardListProps } from "./data-card-list";
+export { CopyableCell } from "./copyable-cell";
+export type { CopyableCellProps } from "./copyable-cell";
+export { RotatingSearchInput } from "./rotating-search-input";
+export type { RotatingSearchInputProps } from "./rotating-search-input";
+export type { DataTableCardProps } from "./data-table-card";
+export { ColumnManager, useColumnPreferences, applyColumnPreferences } from "./column-manager";
+export type {
+  ColumnManagerProps,
+  ColumnPreferences,
+  ManagedColumn,
+  UseColumnPreferencesOptions,
+  UseColumnPreferencesResult,
+} from "./column-manager";
 export { EmptyState } from "./empty-state";
 export { PageHeader } from "./page-header";
 export { Code, CodeBlock } from "./code";
@@ -331,3 +359,68 @@ export type { ProgressIndicatorProps } from "./progress-indicator";
 // Utility
 export { VisuallyHidden } from "./visually-hidden";
 export type { VisuallyHiddenProps } from "./visually-hidden";
+
+// Filters
+export {
+  FilterChipGroup,
+  useFilterChipState,
+  FilterChipShell,
+  FilterChipClearButton,
+  FilterChipLabelTrigger,
+  FilterChipActions,
+  FilterChip,
+  SelectFilterChip,
+  SingleSelectFilterChip,
+  DateRangeFilterChip,
+  NumberRangeFilterChip,
+  TextFilterChip,
+  MonthRangeFilterChip,
+  EMPTY_RELATIVE_RANGE,
+  hasRelativeRange,
+  relativeRangeToMillis,
+  AddFilterMenu,
+  FilterToolbar,
+  ToolbarButton,
+} from "./filter-chips";
+
+// The calendar-based date chip, for a filter people reach for by looking
+// rather than by typing two dates.
+export { CalendarDateFilterChip } from "./calendar-date-chip";
+export type {
+  CalendarDateValue,
+  CalendarDatePreset,
+  CalendarDateFilterChipProps,
+  CalendarRange,
+  DatePickMode,
+} from "./calendar-date-chip";
+export type {
+  FilterChipOption,
+  FilterChipControl,
+  SelectFilterChipProps,
+  SingleSelectFilterChipProps,
+  DateRangeValue,
+  DateRangeFilterChipProps,
+  NumberRangeValue,
+  NumberRangeFilterChipProps,
+  TextFilterChipProps,
+  RelativeRangeValue,
+  MonthRange,
+  AddFilterDefinition,
+  AddFilterMenuProps,
+} from "./filter-chips";
+
+// Date & time formatting (the app-wide "27 Jul '26, 09:49 AM" form)
+export {
+  parseApiDate,
+  formatTime,
+  formatDateOnly,
+  formatDateTime,
+  formatTimestamp,
+  formatDateStamp,
+  formatMonthLabel,
+  formatTimeStamp,
+  formatWeekdayDate,
+  EMPTY_DATE,
+  MONTHS_SHORT,
+  DAYS_SHORT,
+} from "./format-datetime";

package/src/popover.tsx

@@ -11,21 +11,30 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-[120] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
-        "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));
+>(
+  (
+    { className, align = "center", sideOffset = 6, collisionPadding = 12, ...props },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        // Keep a gutter between the popover and the viewport edge, so a
+        // content-bounded panel (see `--radix-popover-content-available-height`
+        // below) stops short of the fold rather than sitting flush against it.
+        collisionPadding={collisionPadding}
+        className={cn(
+          "z-[120] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+          "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+);
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/rotating-search-input.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { Search } from "lucide-react";
+import { Input } from "./input";
+import { cn } from "./utils";
+
+/** Height of one word slot, in px. The carousel translates by multiples of it. */
+const WORD_HEIGHT = 20;
+
+export interface RotatingSearchInputProps {
+  /** Controlled value. Omit to let the field own it. */
+  value?: string;
+  /** Fires on the debounced value, not on every keystroke. */
+  onSearch: (value: string) => void;
+  /** The hints to cycle through: "Amount", "Transaction ID", "Email". */
+  words: string[];
+  /** Debounce before `onSearch` fires. Default 300ms. */
+  debounceDelay?: number;
+  className?: string;
+  /** Screen-reader name for the field. */
+  ariaLabel?: string;
+}
+
+/**
+ * The table search box: one field whose placeholder cycles through what it can
+ * actually match — "Search by Amount", then "Transaction ID", then "Email".
+ *
+ * That rotation is the whole point. A single grid search usually spans half a
+ * dozen fields, and a static "Search" placeholder tells the user none of them,
+ * so they guess at what is searchable and conclude the box is broken when their
+ * guess misses. Naming the fields in turn costs no space and answers it.
+ *
+ * `onSearch` is debounced, so a search that hits the network fires once the
+ * user pauses rather than once per keystroke.
+ */
+export function RotatingSearchInput({
+  value,
+  onSearch,
+  words,
+  debounceDelay = 300,
+  className,
+  ariaLabel = "Search",
+}: RotatingSearchInputProps) {
+  const [internalValue, setInternalValue] = useState(value ?? "");
+  const [index, setIndex] = useState(0);
+  const [withTransition, setWithTransition] = useState(true);
+
+  /**
+   * The latest handler, read at fire time. Without this the debounce closes
+   * over the handler it was created with, so a search firing after a re-render
+   * would call a stale one — and these handlers close over filter state.
+   */
+  const latestOnSearch = useRef(onSearch);
+  useEffect(() => {
+    latestOnSearch.current = onSearch;
+  }, [onSearch]);
+
+  const debouncedRef = useRef<{ (val: string): void; cancel(): void } | null>(null);
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    const debounced = (val: string) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => latestOnSearch.current(val), debounceDelay);
+    };
+    debounced.cancel = () => {
+      if (timeout) clearTimeout(timeout);
+    };
+    debouncedRef.current = debounced;
+    // Cancel on unmount, or a search fires into a component that is gone.
+    return () => debounced.cancel();
+  }, [debounceDelay]);
+
+  // Mirror a controlled value. Deferred a tick so a parent that resets the
+  // query while a debounce is in flight does not fight the field mid-keystroke.
+  useEffect(() => {
+    if (value === undefined) return;
+    const timer = setTimeout(() => setInternalValue(value), 0);
+    return () => clearTimeout(timer);
+  }, [value]);
+
+  /**
+   * The first word again at the end, so the last-to-first step slides forward
+   * like every other one instead of rewinding the whole list. The jump back to
+   * the real first word then happens with the transition off, where it cannot
+   * be seen.
+   */
+  const extendedWords = useMemo(
+    () => (words.length === 0 ? [] : [...words, words[0]]),
+    [words]
+  );
+
+  // A new word list restarts the carousel rather than leaving the index
+  // pointing into a list that no longer has that many entries.
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setWithTransition(false);
+      setIndex(0);
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [words.length]);
+
+  useEffect(() => {
+    if (words.length === 0) return;
+    const id = setInterval(() => {
+      setWithTransition(true);
+      setIndex((prev) => prev + 1);
+    }, 2500);
+    return () => clearInterval(id);
+  }, [words.length]);
+
+  // Landed on the duplicated first word: let it rest, then snap back to the
+  // real one with the transition off.
+  useEffect(() => {
+    if (index !== words.length) return;
+    const timer = setTimeout(() => {
+      setWithTransition(false);
+      setIndex(0);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [index, words.length]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInternalValue(e.target.value);
+    debouncedRef.current?.(e.target.value);
+  };
+
+  return (
+    <div className={cn("relative", className)}>
+      {/* The rotating hint is an overlay, not the input's own `placeholder`,
+          because a placeholder cannot animate. It is pointer-events-none so it
+          never eats a click meant for the field, and it is dropped entirely
+          once there is a value to avoid sitting behind the user's text. */}
+      {!internalValue && words.length > 0 && (
+        <div className="pointer-events-none absolute left-8 top-1/2 z-10 flex h-5 -translate-y-1/2 items-start gap-1 overflow-hidden text-xs text-muted-foreground">
+          <span className="h-5 shrink-0 leading-5">Search by</span>
+          <div
+            style={{
+              transform: `translateY(-${index * WORD_HEIGHT}px)`,
+              transition: withTransition ? "transform 2s cubic-bezier(0.4, 0, 0.2, 1)" : "none",
+            }}
+          >
+            {extendedWords.map((word, i) => (
+              <div key={`${word}-${i}`} className="h-5 leading-5">
+                {word}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+
+      <Input
+        type="text"
+        aria-label={ariaLabel}
+        value={internalValue}
+        placeholder=""
+        onChange={handleChange}
+        className="!h-8 min-h-0 bg-muted/50 pl-8 text-xs"
+      />
+    </div>
+  );
+}

package/src/tab-presets.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Tabs, TabsList, TabsTrigger } from "./tabs";
+import { cn } from "./utils";
+
+/**
+ * Two presets over the `Tabs` primitives, for the two jobs a tab row actually
+ * does. They are separate components on purpose, so a page can show both
+ * without the reader having to work out which row governs what:
+ *
+ * - {@link UnderlineTabs} is the **page-level** bar that segments a view into
+ *   sections — full-width, one sliding indicator, the thing a URL usually
+ *   follows.
+ * - {@link SegmentedTabs} is the **compact scoping strip** for a required
+ *   single choice that qualifies the content beside it: which status a list is
+ *   filtered by, which period a summary describes.
+ *
+ * Neither is a filter chip. A chip is for an *optional* filter that can be
+ * cleared; both of these always have exactly one option selected, so neither
+ * ever renders a clear affordance.
+ */
+
+export interface UnderlineTab {
+  value: string;
+  /**
+   * A plain string for an ordinary tab; a node when the tab carries an
+   * annotation beside its name, such as a status badge showing the state of
+   * the section behind it.
+   */
+  label: ReactNode;
+}
+
+/**
+ * Page-level tab bar with a single shared indicator that slides between tabs,
+ * rather than each tab drawing its own underline.
+ *
+ * The indicator's position and width are measured from the DOM: text tabs have
+ * different widths, so this cannot be derived from props or state. It sits
+ * flush on the row's own bottom border instead of floating below the label.
+ *
+ * `actions` renders flush right on the same row, tabs staying left-aligned,
+ * which is where a page puts its primary CTA.
+ */
+export function UnderlineTabs({
+  tabs,
+  value,
+  onValueChange,
+  actions,
+  className,
+}: {
+  tabs: readonly UnderlineTab[];
+  value: string;
+  onValueChange: (value: string) => void;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+  const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);
+
+  useEffect(() => {
+    const measure = () => {
+      const el = tabRefs.current[value];
+      if (el) setIndicator({ left: el.offsetLeft, width: el.offsetWidth });
+    };
+    // Deferred into a rAF / resize callback rather than called in the effect
+    // body: it reads post-layout geometry, which is not derivable from render.
+    const raf = requestAnimationFrame(measure);
+    window.addEventListener("resize", measure);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", measure);
+    };
+  }, [value]);
+
+  return (
+    <Tabs value={value} onValueChange={onValueChange} className={className}>
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        {/* `relative` here rather than on the row, so the indicator measures
+            against the tab strip itself and is unaffected by `actions`. */}
+        <TabsList className="relative h-auto justify-start gap-5 rounded-none border-0 bg-transparent p-0">
+          {tabs.map((tab) => (
+            <TabsTrigger
+              key={tab.value}
+              ref={(el) => {
+                tabRefs.current[tab.value] = el;
+              }}
+              value={tab.value}
+              className="h-auto rounded-none px-0 py-2.5 text-[13px] font-medium text-muted-foreground shadow-none data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none"
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+          <span
+            aria-hidden
+            className="absolute bottom-0 h-0.5 bg-primary transition-all duration-200 ease-out"
+            style={{
+              left: indicator?.left ?? 0,
+              width: indicator?.width ?? 0,
+              opacity: indicator ? 1 : 0,
+            }}
+          />
+        </TabsList>
+
+        {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      </div>
+    </Tabs>
+  );
+}
+
+export interface SegmentedTabOption<T extends string = string> {
+  value: T;
+  label: string;
+}
+
+/**
+ * The compact strip that scopes the content beside it.
+ *
+ * Plain underlined triggers, not the `Tabs` pill look: no container
+ * background, border or padding — a gap row of triggers, each just an
+ * underline and a colour change when active. Still Radix `Tabs` underneath, so
+ * keyboard navigation and `aria-selected` come free; only the classes differ.
+ *
+ * With `collapseToSelect`, the strip becomes a `Select` below `md`. Both
+ * controls drive the same state, so resizing mid-session can never leave the
+ * two disagreeing about which option is chosen.
+ */
+export function SegmentedTabs<T extends string>({
+  options,
+  value,
+  onValueChange,
+  label = "Options",
+  collapseToSelect = true,
+  className,
+}: {
+  options: readonly SegmentedTabOption<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  /** Accessible name for both controls. */
+  label?: string;
+  /**
+   * Swap to a `Select` below `md`. Leave on for a strip that would otherwise
+   * crowd a narrow screen; turn it off where the row already has the room and
+   * a dropdown would read as a different control appearing.
+   */
+  collapseToSelect?: boolean;
+  className?: string;
+}) {
+  return (
+    <>
+      <Tabs
+        value={value}
+        onValueChange={(next) => onValueChange(next as T)}
+        className={cn(collapseToSelect && "hidden md:block", className)}
+      >
+        <TabsList
+          aria-label={label}
+          className="h-auto gap-4 rounded-none border-0 bg-transparent p-0"
+        >
+          {options.map((option) => (
+            <TabsTrigger
+              key={option.value}
+              value={option.value}
+              className="h-auto rounded-none border-b-2 border-transparent px-0 py-1 text-[13px] font-medium text-muted-foreground shadow-none data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none"
+            >
+              {option.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      {collapseToSelect ? (
+        <Select value={value} onValueChange={(next) => onValueChange(next as T)}>
+          <SelectTrigger className="h-8 w-[9.5rem] md:hidden" aria-label={label}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : null}
+    </>
+  );
+}