create-astram-app 0.1.2 → 0.2.0

package/template/frontend/src/components/ui/searchable-select.tsx

@@ -0,0 +1,459 @@
+import * as React from 'react';
+import * as PopperPrimitive from '@radix-ui/react-popper';
+import { Portal } from '@radix-ui/react-portal';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import { Check, ChevronDown, ChevronLeft, ChevronRight, Loader2, Search, X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+/**
+ * SearchableSelect — a searchable + server-paginated dynamic dropdown, the astram3
+ * translation of OCA's SearchableSelect (`oca/src/components/dynamic-form/SearchableSelect.jsx`).
+ * It is the default control for GROWABLE lists (companies / roles / users) whose row count
+ * outgrows a plain <select>: the caller supplies HOW to fetch a page, the component owns the
+ * search box, a discrete PREV/NEXT pager, portal positioning, keyboard nav, and the
+ * loading / empty states.
+ *
+ * Pagination model — PAGE-AT-A-TIME (matches OCA, NOT infinite scroll): a discrete
+ * `◀ Page X of N ▶` pager sits UNDER the option list. Clicking Prev/Next fetches that page
+ * and REPLACES the visible options (never appends). Prev is disabled on page 1; Next is
+ * disabled on the last page. The option LIST is its OWN scroll region (`overflow-y-auto` +
+ * a capped max-height), so the mouse wheel scrolls the CURRENT page's options — the pager is
+ * separate. Search resets to page 1.
+ *
+ * Composition (no new dependency): built from the SAME Radix primitives that
+ * `@radix-ui/react-popover` is itself assembled from — `react-popper`
+ * (anchor + flipping/collision-aware Content), `react-portal` (render to `document.body`
+ * so the panel is NEVER clipped by a modal's `overflow`), and `react-dismissable-layer`
+ * (outside-click + Esc to close). Tokens only → the trigger mirrors `Input`, the panel
+ * mirrors `SelectContent` (light + dark both correct).
+ *
+ * ⛔ No raw UUIDs: the VALUE is a uuid, the LABEL is a name. The trigger shows the
+ * selected option's LABEL — the caller passes `selectedLabel` (the row already knows it),
+ * so the trigger renders a name even before any page is fetched. An option's `value` uuid
+ * is never rendered as visible text.
+ *
+ * `fetchPage` contract — the single seam that makes one component serve every entity:
+ *   fetchPage({ search, page, limit }) =>
+ *     Promise<{ options: Array<{ value: string, label: string }>, total: number, page: number }>
+ * `total` + `limit` give "Page X of N". The component debounces search (~300ms) and always
+ * requests page 1 on open / on a new term.
+ *
+ * For SMALL, non-paginated catalogs (department / branch), pass a `fetchPage` that returns
+ * the full list once (total = length) with `clientFilter`; the panel then filters client-side
+ * by the typed term (single page → the pager stays hidden).
+ */
+
+export interface SearchableOption {
+  value: string;
+  label: string;
+}
+
+export interface FetchPageArgs {
+  search: string;
+  page: number;
+  limit: number;
+}
+
+export interface FetchPageResult {
+  options: SearchableOption[];
+  total: number;
+  page: number;
+}
+
+export interface SearchableSelectProps {
+  /** The selected value (a uuid) or null when nothing is chosen. */
+  value: string | null;
+  /** Called with the newly-picked uuid, or null when cleared. */
+  onChange: (value: string | null) => void;
+  /**
+   * Optional: called with the picked option's LABEL (or null on clear) whenever the
+   * selection changes. Lets a caller persist the display name for its own trigger/state
+   * without re-deriving it — the value is the uuid, this is the name.
+   */
+  onLabelChange?: (label: string | null) => void;
+  /**
+   * The display LABEL for the current `value` (a name — the caller already knows it, e.g.
+   * from the resolved row). Shown on the trigger so no uuid ever surfaces. Optional: if a
+   * matching option is loaded in the panel, its label is used as a fallback.
+   */
+  selectedLabel?: string | null;
+  /** How to fetch a page of options (see the contract above). */
+  fetchPage: (args: FetchPageArgs) => Promise<FetchPageResult>;
+  placeholder?: string;
+  /** Placeholder for the in-panel search box. */
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  /** Mark the trigger invalid (red ring), like an aria-invalid Input. */
+  invalid?: boolean;
+  /** Show an inline "clear" (×) affordance when a value is set. */
+  allowClear?: boolean;
+  /**
+   * Client-filter mode: the panel filters the fetched options locally by the typed term
+   * instead of re-calling `fetchPage`. Use for small, non-paginated catalogs where
+   * `fetchPage` returns the whole list in one page (the pager stays hidden).
+   */
+  clientFilter?: boolean;
+  /** Page size for server pagination (ignored in `clientFilter` mode). Default 20. */
+  pageSize?: number;
+  className?: string;
+  'aria-label'?: string;
+  id?: string;
+}
+
+const DEBOUNCE_MS = 300;
+const DEFAULT_PAGE_SIZE = 20;
+
+export function SearchableSelect({
+  value,
+  onChange,
+  onLabelChange,
+  selectedLabel,
+  fetchPage,
+  placeholder = 'Select…',
+  searchPlaceholder = 'Search…',
+  disabled = false,
+  invalid = false,
+  allowClear = false,
+  clientFilter = false,
+  pageSize = DEFAULT_PAGE_SIZE,
+  className,
+  'aria-label': ariaLabel,
+  id,
+}: SearchableSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState('');
+  const [debounced, setDebounced] = React.useState('');
+  const [options, setOptions] = React.useState<SearchableOption[]>([]);
+  const [total, setTotal] = React.useState(0);
+  const [page, setPage] = React.useState(1);
+  const [loading, setLoading] = React.useState(false);
+  const [active, setActive] = React.useState(0); // keyboard-highlighted index
+
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const reqId = React.useRef(0); // guards against out-of-order fetch resolutions
+
+  // Where to portal the panel. When this select lives INSIDE a Radix Dialog (the routed
+  // Add/Edit modal), portalling to <body> puts the panel OUTSIDE the Dialog's focus scope
+  // (its FocusScope yanks focus back inside → the in-panel search can't hold focus) AND
+  // outside its pointer-events shard (RemoveScroll marks the rest of the body inert). Both
+  // break the panel. So we portal into the Dialog's own content element when there is one —
+  // the panel is `position: fixed`, so the Dialog's `overflow: hidden` does NOT clip it
+  // (fixed descendants escape overflow clipping). Falls back to <body> outside any modal.
+  const [portalContainer, setPortalContainer] = React.useState<HTMLElement | null>(null);
+
+  // Remember the label of the last-fetched option matching `value`, so the trigger keeps a
+  // name even if the caller didn't pass `selectedLabel` (fallback only — caller wins).
+  const [resolvedLabel, setResolvedLabel] = React.useState<string | null>(null);
+
+  // The label shown on the trigger: caller-supplied wins, else a matched loaded option,
+  // else the remembered resolved label. Never the uuid.
+  const displayLabel =
+    (selectedLabel && selectedLabel.trim()) ||
+    options.find((o) => o.value === value)?.label ||
+    resolvedLabel ||
+    '';
+
+  // Debounce the search box → `debounced`.
+  React.useEffect(() => {
+    const t = setTimeout(() => setDebounced(search.trim()), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  // Client-filtered view (only used in clientFilter mode): filter the loaded set locally.
+  const visibleOptions = React.useMemo(() => {
+    if (!clientFilter) return options;
+    const q = debounced.toLowerCase();
+    if (!q) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [clientFilter, options, debounced]);
+
+  // Load a specific page — always REPLACES the visible options (page-at-a-time; no append).
+  const loadPage = React.useCallback(
+    async (targetPage: number, term: string) => {
+      const myReq = ++reqId.current;
+      setLoading(true);
+      try {
+        const res = await fetchPage({ search: term, page: targetPage, limit: pageSize });
+        if (myReq !== reqId.current) return; // a newer request superseded this one
+        const incoming = res.options || [];
+        setTotal(res.total ?? incoming.length);
+        setPage(res.page ?? targetPage);
+        setOptions(incoming);
+        setActive(0);
+        // Cache the label for the current value if it appears in this page.
+        const match = incoming.find((o) => o.value === value);
+        if (match) setResolvedLabel(match.label);
+        // A fresh page: scroll the list region back to the top.
+        if (listRef.current) listRef.current.scrollTop = 0;
+      } catch {
+        if (myReq === reqId.current) {
+          setOptions([]);
+          setTotal(0);
+        }
+      } finally {
+        if (myReq === reqId.current) setLoading(false);
+      }
+    },
+    [fetchPage, pageSize, value],
+  );
+
+  // On open, and whenever the (debounced) search term changes while open, (re)load page 1.
+  // Server mode refetches for the term; clientFilter mode loads the full list once on open
+  // (empty term) and filters the term locally, so it does NOT refetch per keystroke.
+  React.useEffect(() => {
+    if (!open) return;
+    loadPage(1, clientFilter ? '' : debounced);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, clientFilter ? open : debounced, clientFilter]);
+
+  // Focus the search box when the panel opens; reset the search on close.
+  React.useEffect(() => {
+    if (open) {
+      const t = setTimeout(() => searchRef.current?.focus(), 0);
+      return () => clearTimeout(t);
+    }
+    setSearch('');
+    setDebounced('');
+    return undefined;
+  }, [open]);
+
+  // Pagination math. In clientFilter mode there is a single (local) page → no pager.
+  const totalPages = clientFilter ? 1 : Math.max(1, Math.ceil((total || 0) / pageSize));
+  const showPager = !clientFilter && totalPages > 1;
+
+  const goPrev = () => {
+    if (loading || page <= 1) return;
+    loadPage(page - 1, debounced);
+  };
+  const goNext = () => {
+    if (loading || page >= totalPages) return;
+    loadPage(page + 1, debounced);
+  };
+
+  // Open the panel, resolving the portal target from the trigger's DOM position first:
+  // the nearest enclosing Dialog content (so the panel lives inside the modal's focus
+  // scope + pointer-events shard), else <body> outside any modal (see portalContainer).
+  const openPanel = () => {
+    setPortalContainer(
+      triggerRef.current?.closest<HTMLElement>('[data-slot="dialog-content"]') ?? null,
+    );
+    setOpen(true);
+  };
+
+  const pick = (opt: SearchableOption) => {
+    onChange(opt.value);
+    onLabelChange?.(opt.label);
+    setResolvedLabel(opt.label);
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+
+  const clear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(null);
+    onLabelChange?.(null);
+    setResolvedLabel(null);
+  };
+
+  // Keyboard navigation on the search box: ↑/↓ move the active item, Enter selects it,
+  // Esc closes. Type-to-search is the input itself.
+  const onSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const list = visibleOptions;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, Math.max(list.length - 1, 0)));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const opt = list[active];
+      if (opt) pick(opt);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    }
+  };
+
+  // Keep the active item scrolled into view.
+  React.useEffect(() => {
+    if (!open) return;
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-index="${active}"]`);
+    el?.scrollIntoView({ block: 'nearest' });
+  }, [active, open]);
+
+  const showEmpty = !loading && visibleOptions.length === 0;
+
+  return (
+    <PopperPrimitive.Root>
+      <PopperPrimitive.Anchor asChild>
+        <button
+          ref={triggerRef}
+          id={id}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-label={ariaLabel}
+          aria-invalid={invalid || undefined}
+          disabled={disabled}
+          onClick={() => (open ? setOpen(false) : openPanel())}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              openPanel();
+            }
+          }}
+          className={cn(
+            'border-input flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+            className,
+          )}
+        >
+          <span
+            className={cn(
+              'line-clamp-1 text-left',
+              displayLabel ? 'text-foreground' : 'text-muted-foreground',
+            )}
+          >
+            {displayLabel || placeholder}
+          </span>
+          <span className="flex shrink-0 items-center gap-1">
+            {allowClear && value && !disabled && (
+              <X
+                role="button"
+                aria-label="Clear selection"
+                tabIndex={-1}
+                onClick={clear}
+                className="size-4 opacity-50 hover:opacity-100"
+              />
+            )}
+            <ChevronDown className="size-4 opacity-50" />
+          </span>
+        </button>
+      </PopperPrimitive.Anchor>
+
+      {open && (
+        <Portal container={portalContainer ?? undefined}>
+          <DismissableLayer
+            onEscapeKeyDown={() => setOpen(false)}
+            onPointerDownOutside={() => setOpen(false)}
+            onFocusOutside={(e) => e.preventDefault()}
+            asChild
+          >
+            <PopperPrimitive.Content
+              side="bottom"
+              align="start"
+              sideOffset={4}
+              collisionPadding={8}
+              // `data-searchable-select` is the HOOK for the load-bearing pointer-events
+              // fix (see index.css). This panel is portalled to document.body, so when the
+              // dropdown opens INSIDE a Radix Dialog (the routed Add/Edit modal), react-popper's
+              // OUTER positioning wrapper (`[data-radix-popper-content-wrapper]`, which we can't
+              // className) is a body sibling of the Dialog content → Radix Dialog's RemoveScroll
+              // sets `pointer-events: none` on it, which blocks hit-testing to the search box,
+              // the option rows, AND the wheel-scroll over the list. A `pointer-events-auto`
+              // on THIS element alone is not enough — the un-stylable wrapper above it still
+              // swallows the events. index.css re-enables that wrapper by matching
+              // `[data-radix-popper-content-wrapper]:has(> [data-searchable-select])`.
+              data-searchable-select=""
+              className={cn(
+                'pointer-events-auto',
+                'bg-popover text-popover-foreground z-50 flex max-h-[min(22rem,var(--radix-popper-available-height))] w-[var(--radix-popper-anchor-width)] min-w-[10rem] flex-col overflow-hidden rounded-md border shadow-md',
+              )}
+            >
+              {/* Search box */}
+              <div className="flex items-center gap-2 border-b px-2.5">
+                <Search className="size-4 shrink-0 opacity-50" />
+                <input
+                  ref={searchRef}
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  onKeyDown={onSearchKeyDown}
+                  placeholder={searchPlaceholder}
+                  className="h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
+                  aria-label={searchPlaceholder}
+                />
+                {loading && <Loader2 className="size-4 shrink-0 animate-spin opacity-60" />}
+              </div>
+
+              {/* Options list — its OWN scroll region (overflow-y-auto + a capped
+                  max-height) so the mouse wheel scrolls the CURRENT page's options.
+                  `overscroll-contain` keeps the wheel from chaining to the page. Paging
+                  REPLACES this list (page-at-a-time) — it never appends. */}
+              <div
+                ref={listRef}
+                role="listbox"
+                className="max-h-64 min-h-0 flex-1 overflow-y-auto overscroll-contain p-1"
+              >
+                {showEmpty ? (
+                  <div className="px-2 py-6 text-center text-sm text-muted-foreground">
+                    No results
+                  </div>
+                ) : (
+                  visibleOptions.map((opt, i) => {
+                    const selected = opt.value === value;
+                    return (
+                      <div
+                        key={opt.value}
+                        data-index={i}
+                        role="option"
+                        aria-selected={selected}
+                        onClick={() => pick(opt)}
+                        onMouseEnter={() => setActive(i)}
+                        className={cn(
+                          'relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm select-none',
+                          i === active && 'bg-accent text-accent-foreground',
+                        )}
+                      >
+                        <span className="line-clamp-1">{opt.label}</span>
+                        {selected && (
+                          <Check className="absolute right-2 size-4 shrink-0" />
+                        )}
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+
+              {/* Discrete Prev/Next pager (server pagination only, >1 page). Page-at-a-time:
+                  each click REPLACES the list with that page. Prev disabled on page 1, Next
+                  on the last page. Subtle, mono, token-styled — the OCA `.oca-select-pager`. */}
+              {showPager && (
+                <div className="flex items-center justify-between gap-2 border-t px-2 py-1.5">
+                  <button
+                    type="button"
+                    aria-label="Previous page"
+                    disabled={loading || page <= 1}
+                    onClick={goPrev}
+                    className="inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
+                  >
+                    <ChevronLeft className="size-4" />
+                  </button>
+                  <span className="font-mono text-[0.68rem] tracking-[0.04em] text-muted-foreground tabular-nums">
+                    Page {page} of {totalPages}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label="Next page"
+                    disabled={loading || page >= totalPages}
+                    onClick={goNext}
+                    className="inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-40"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              )}
+            </PopperPrimitive.Content>
+          </DismissableLayer>
+        </Portal>
+      )}
+    </PopperPrimitive.Root>
+  );
+}

package/template/frontend/src/components/ui/select.tsx

@@ -0,0 +1,199 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Radix Select — the shadcn/new-york Select set, styled to match this repo's
+ * `Input` and `dialog` primitives. Replaces the native `<select>`s in Phase B.
+ *
+ * The `SelectTrigger` mirrors the `Input` field look (`h-9`, `border-input`,
+ * the same 3px focus ring), and `SelectContent` matches the popover surface
+ * used by `dropdown-menu` / `dialog` (portal-rendered so it's never clipped by
+ * a modal — the OCA SearchableSelect portal behavior). Tokens only → light +
+ * dark (next-themes `.dark`) both correct.
+ *
+ * React 18.3: every Radix-primitive-backed sub-component uses `React.forwardRef`
+ * (mirroring `dialog.tsx`) so Radix's ref-forwarding (Trigger/Content/Item/…)
+ * lands on the underlying primitive and does NOT log "Function components
+ * cannot be given refs".
+ *
+ * NOTE: requires `@radix-ui/react-select` to be installed.
+ */
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+  }
+>(({ className, size = "default", children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    data-slot="select-trigger"
+    data-size={size}
+    className={cn(
+      "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="size-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = "SelectTrigger";
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    data-slot="select-scroll-up-button"
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon className="size-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    data-slot="select-scroll-down-button"
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon className="size-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      data-slot="select-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = "SelectContent";
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    data-slot="select-label"
+    className={cn(
+      "text-muted-foreground px-2 py-1.5 font-mono text-[0.68rem] font-semibold tracking-[0.08em] uppercase",
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    data-slot="select-item"
+    className={cn(
+      "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = "SelectItem";
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    data-slot="select-separator"
+    className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/template/frontend/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };