@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/schedule.tsx

@@ -0,0 +1,332 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { CalendarBlank, CaretDown, Check, Clock, Repeat } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { LiquidGlass } from "./liquid-glass";
+
+export type PickerFieldSize = ControlSize;
+
+export type PickerFieldProps = {
+  items: { value: string; label: ReactNode }[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string | null) => void;
+  /** Leading 16px icon; the Time field uses a clock. */
+  icon?: ReactNode;
+  /**
+   * `solid` (default) is the opaque surface field with a default border, `glass` the veil field,
+   * `inset` the 4% ink field inside the schedule card.
+   */
+  surface?: "solid" | "glass" | "inset";
+  /** Field size: `sm` 32px, `md` 40px (default), `lg` 48px; scales width, icon and menu rows. */
+  size?: PickerFieldSize;
+  "aria-label"?: string;
+  className?: string;
+};
+
+/** The Figma widths (144/160/176px) are the maximum: the field shrinks with a narrow card instead of pushing past it. */
+const triggerSizeClass: Record<PickerFieldSize, string> = {
+  sm: "h-8 w-36 max-w-full gap-1.5 px-3",
+  md: "h-10 w-40 max-w-full gap-2 px-3.5",
+  lg: "h-12 w-44 max-w-full gap-2.5 px-5",
+};
+
+const triggerIconSizeClass: Record<PickerFieldSize, string> = {
+  sm: "[&>svg]:size-4",
+  md: "[&>svg]:size-4",
+  lg: "[&>svg]:size-5",
+};
+
+/** The same text rungs as `Input` and `Select` (14/16/18), so a picker and a field line up in a form row. */
+const valueSizeClass: Record<PickerFieldSize, string> = {
+  sm: "text-body-sm",
+  md: "text-body-md",
+  lg: "text-body-lg",
+};
+
+const caretSizeClass: Record<PickerFieldSize, string> = {
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5",
+};
+
+const popupSizeClass: Record<PickerFieldSize, string> = {
+  sm: "p-1",
+  md: "p-1.5",
+  lg: "p-2",
+};
+
+/** The same popup rows as `Select`, so the two pickers share one list style. */
+const itemSizeClass: Record<PickerFieldSize, string> = {
+  sm: "h-8 gap-2 px-2.5 text-label-sm",
+  md: "h-10 gap-2.5 px-3 text-label-md",
+  lg: "h-12 gap-3 px-4 text-label-lg",
+};
+
+const itemIndicatorSizeClass: Record<PickerFieldSize, string> = {
+  sm: "[&_svg]:size-4",
+  md: "[&_svg]:size-4",
+  lg: "[&_svg]:size-5",
+};
+
+/** Figma `Time field` (Routine schedule 110:765): a 160px picker on the same 32/40/48px and 14/16/18 text rungs as `Input`. */
+export function PickerField({
+  items,
+  icon,
+  surface = "solid",
+  size = "md",
+  className,
+  "aria-label": ariaLabel,
+  onValueChange,
+  ...props
+}: PickerFieldProps) {
+  return (
+    <BaseSelect.Root items={items} onValueChange={(next) => onValueChange?.(next)} {...props}>
+      <BaseSelect.Trigger
+        aria-label={ariaLabel}
+        className={cn(
+          "relative flex max-w-full min-w-0 cursor-pointer items-center rounded-md text-left motion-colors",
+          "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-text-brand",
+          triggerSizeClass[size],
+          surface === "glass"
+            ? "group veil-field"
+            : surface === "inset"
+              ? "group bg-overlay-ink-4"
+              : "group border border-border-default bg-bg-surface",
+          className,
+        )}
+      >
+        <span className={cn("relative flex shrink-0 text-text-secondary", triggerIconSizeClass[size])}>
+          {icon ?? <Clock />}
+        </span>
+        <BaseSelect.Value className={cn("relative min-w-0 flex-1 truncate text-text-primary", valueSizeClass[size])} />
+        <CaretDown
+          aria-hidden
+          className={cn(
+            "relative shrink-0 text-text-secondary transition-transform duration-200 ease-out-quint group-data-popup-open:rotate-180",
+            caretSizeClass[size],
+          )}
+        />
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner sideOffset={8} alignItemWithTrigger={false} className="z-50 outline-none">
+          <BaseSelect.Popup
+            className={cn(
+              "relative max-h-72 max-w-[calc(100vw-2rem)] min-w-(--anchor-width) motion-popup overflow-y-auto rounded-xl outline-none",
+              surface === "solid" ? "border border-border-default bg-bg-surface shadow-popover" : "veil-overlay",
+              popupSizeClass[size],
+            )}
+          >
+            <BaseSelect.List className="relative flex flex-col gap-0.5">
+              {items.map((item) => (
+                <BaseSelect.Item
+                  key={item.value}
+                  value={item.value}
+                  className={cn(
+                    "flex cursor-pointer items-center rounded-md text-text-primary motion-colors outline-none select-none data-highlighted:bg-overlay-ink-6 data-selected:bg-overlay-ink-6",
+                    itemSizeClass[size],
+                  )}
+                >
+                  <BaseSelect.ItemText className="min-w-0 flex-1">{item.label}</BaseSelect.ItemText>
+                  <BaseSelect.ItemIndicator className={cn("flex shrink-0", itemIndicatorSizeClass[size])}>
+                    <Check className="animate-pop-in" />
+                  </BaseSelect.ItemIndicator>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}
+
+export type WeekdayPickerSize = ControlSize;
+
+export type WeekdayPickerProps = {
+  /** One entry per day, in display order. */
+  days: { value: string; label: string; name: string }[];
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** Day circle size: `sm` 32px, `md` 36px (default), `lg` 44px. */
+  size?: WeekdayPickerSize;
+  "aria-label"?: string;
+  className?: string;
+};
+
+const weekdayGroupSizeClass: Record<WeekdayPickerSize, string> = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2",
+};
+
+/** The Figma day circle (32/36/44px) never shrinks; the group wraps instead, so the targets keep their size. */
+const weekdayToggleSizeClass: Record<WeekdayPickerSize, string> = {
+  sm: "size-8 text-label-sm",
+  md: "size-9 text-label-md",
+  lg: "size-11 text-label-lg",
+};
+
+/** Figma `Weekday picker` (110:765): 36px round toggles, ink when on and 6% ink when off. */
+export function WeekdayPicker({
+  days,
+  value,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  className,
+  ...props
+}: WeekdayPickerProps) {
+  return (
+    <ToggleGroup
+      multiple
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={(next) => onValueChange?.(next)}
+      aria-label={props["aria-label"] ?? "Days"}
+      className={cn("flex flex-wrap items-center", weekdayGroupSizeClass[size], className)}
+    >
+      {days.map((day) => (
+        <Toggle
+          key={day.value}
+          value={day.value}
+          aria-label={day.name}
+          className={cn(
+            "flex shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-overlay-ink-6 text-text-secondary",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+            "data-pressed:bg-interactive-primary data-pressed:text-interactive-on-primary",
+            weekdayToggleSizeClass[size],
+          )}
+        >
+          {day.label}
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export type ScheduleCardProps = {
+  title: ReactNode;
+  /** The "Next run" line at the bottom. */
+  nextRun?: ReactNode;
+  children: ReactNode;
+  /** Card size: `sm` 340px, `md` 380px (default), `lg` 420px; scales padding, gaps and text. */
+  size?: ControlSize;
+  /** `solid` (default) is an opaque surface card with a default border; `glass` is the thick glass card. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/** The Figma card widths (340/380/420px) are the maximum: on a narrow screen the card folds to the column width. */
+const cardSizeClass: Record<ControlSize, string> = {
+  sm: "w-full max-w-85 gap-3 p-4",
+  md: "w-full max-w-95 gap-4 p-5",
+  lg: "w-full max-w-105 gap-4 p-5",
+};
+
+const cardHeaderSizeClass: Record<ControlSize, string> = {
+  sm: "gap-2",
+  md: "gap-2.5",
+  lg: "gap-3",
+};
+
+const cardIconSizeClass: Record<ControlSize, string> = {
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5",
+};
+
+const cardTitleSizeClass: Record<ControlSize, string> = {
+  sm: "text-label-md",
+  md: "text-label-lg",
+  lg: "text-label-lg",
+};
+
+const nextRunSizeClass: Record<ControlSize, string> = {
+  sm: "gap-1.5 px-2.5 py-2 text-label-md",
+  md: "gap-2 px-3 py-2 text-label-md",
+  lg: "gap-2.5 px-3.5 py-3 text-label-lg",
+};
+
+const nextRunIconSizeClass: Record<ControlSize, string> = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+};
+
+/** Figma `Routine schedule card` (110:765): a 380px card, 20px padding, 16px gaps, solid or thick glass. */
+export function ScheduleCard({
+  title,
+  nextRun,
+  children,
+  size = "md",
+  surface = "solid",
+  className,
+}: ScheduleCardProps) {
+  return (
+    <section
+      className={cn(
+        "relative flex flex-col items-stretch overflow-clip rounded-xl",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        cardSizeClass[size],
+        className,
+      )}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <div className={cn("relative flex items-center", cardHeaderSizeClass[size])}>
+        <Repeat aria-hidden className={cn("shrink-0 text-text-primary", cardIconSizeClass[size])} />
+        <h3 className={cn("min-w-0 flex-1 text-text-primary", cardTitleSizeClass[size])}>{title}</h3>
+      </div>
+      {children}
+      {nextRun && (
+        <div
+          className={cn(
+            "relative flex items-center rounded-md bg-accent-sky-500-16 text-text-primary",
+            nextRunSizeClass[size],
+          )}
+        >
+          <CalendarBlank aria-hidden className={cn("shrink-0", nextRunIconSizeClass[size])} />
+          {nextRun}
+        </div>
+      )}
+    </section>
+  );
+}
+
+/** A captioned block inside the schedule card, such as "Repeat" or "Days"; the caption-to-control gap is `Field`'s. */
+const sectionSizeClass: Record<ControlSize, string> = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-2",
+};
+
+const sectionLabelSizeClass: Record<ControlSize, string> = {
+  sm: "text-caption",
+  md: "text-caption",
+  lg: "text-label-sm",
+};
+
+export function ScheduleSection({
+  label,
+  children,
+  /** Matches the size of the controls inside the section. */
+  size = "md",
+  className,
+}: {
+  label: ReactNode;
+  children: ReactNode;
+  size?: ControlSize;
+  className?: string;
+}) {
+  return (
+    <div className={cn("relative flex min-w-0 flex-col", sectionSizeClass[size], className)}>
+      <span className={cn("text-text-secondary", sectionLabelSizeClass[size])}>{label}</span>
+      {children}
+    </div>
+  );
+}

package/src/components/segmented-control.tsx

@@ -0,0 +1,136 @@
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { type ReactNode, useRef } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { useActiveIndicator } from "../hooks/use-active-indicator";
+import { LiquidGlass } from "./liquid-glass";
+
+/** `tab` keeps Paper's page-tab rung beside the three control sizes. */
+export type SegmentedControlSize = ControlSize | "tab";
+export type SegmentedControlSurface = "solid" | "glass" | "inset" | "inset-faint" | "subtle";
+
+export type SegmentedControlProps = {
+  items: { value: string; label: ReactNode; disabled?: boolean }[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /**
+   * `md`: Segmented control (62:379), 36px track, 30px segments, 16px padding.
+   * `sm`: one rung down, a 32px track with 26px segments and 10px padding.
+   * `lg`: Segmented filter (88:723), 44px track, 36px segments.
+   * `tab`: Paper page tabs (Projects Active/Archived), 4px track padding and gap, 32px segments with 14px padding.
+   */
+  size?: SegmentedControlSize;
+  /**
+   * `solid` (default) is the opaque surface track with a default border and a 10% ink selection.
+   * `glass` is regular glass. `inset` is the 5% ink track inside the routine card,
+   * `inset-faint` the 4% ink track inside the header filter. `subtle` is the bg-subtle page-tab tray whose
+   * selection is a plain white pill.
+   */
+  surface?: SegmentedControlSurface;
+  /** Segments share the width equally instead of hugging their labels. */
+  fill?: boolean;
+  "aria-label"?: string;
+  className?: string;
+};
+
+const trackClass: Record<SegmentedControlSize, string> = {
+  sm: "p-[3px]",
+  md: "h-9 p-[3px]",
+  lg: "h-11 p-1",
+  tab: "gap-1 p-1",
+};
+
+const segmentClass: Record<SegmentedControlSize, string> = {
+  sm: "h-6.5 px-2.5 text-label-sm",
+  md: "h-7.5 px-4 text-label-md",
+  lg: "h-9 px-4 text-label-lg",
+  tab: "h-8 px-3.5 text-label-md",
+};
+
+const surfaceClass: Record<SegmentedControlSurface, string> = {
+  solid: "border border-border-default bg-bg-surface",
+  glass: "overflow-clip bg-glass-regular",
+  inset: "bg-overlay-ink-5",
+  "inset-faint": "bg-overlay-ink-4",
+  subtle: "bg-bg-subtle",
+};
+
+/**
+ * Single-choice segmented control. The selection is one pill that slides to the
+ * pressed segment. On the glass track it is a glass pill over the glass track,
+ * thick fill and a 0 1 3 8% shadow, the iOS tab bar selection; dark mode keeps a
+ * 10% fill. On the solid and inset tracks it is 10% ink. The pill is the same on
+ * every rung, as in `Tabs`.
+ */
+export function SegmentedControl({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  surface = "solid",
+  fill = size === "md",
+  className,
+  ...props
+}: SegmentedControlProps) {
+  const track = useRef<HTMLDivElement>(null);
+  const { rect, animate } = useActiveIndicator(track, "[data-pressed]");
+  return (
+    <ToggleGroup
+      ref={track}
+      value={value === undefined ? undefined : [value]}
+      defaultValue={defaultValue === undefined ? undefined : [defaultValue]}
+      onValueChange={(next) => {
+        if (next[0] !== undefined) onValueChange?.(next[0]);
+      }}
+      className={cn(
+        // Segments keep the padding their rung gives them; when the set is wider
+        // than the container the track scrolls instead of spilling the pills.
+        "relative flex max-w-full min-w-0 items-center gap-0.5 rounded-full",
+        trackClass[size],
+        surfaceClass[surface],
+        "overflow-x-auto overflow-y-clip",
+        className,
+      )}
+      aria-label={props["aria-label"]}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <span
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute overflow-clip rounded-full",
+          surface === "glass"
+            ? "bg-glass-thick shadow-[0_1px_3px_rgba(0,0,0,0.08)] dark:bg-overlay-ink-10"
+            : surface === "subtle"
+              ? "bg-bg-default dark:bg-overlay-ink-10"
+              : "bg-overlay-ink-10",
+          animate && "motion-indicator",
+        )}
+        style={rect ? { ...rect, opacity: 1 } : { opacity: 0 }}
+      >
+        {surface === "glass" && <LiquidGlass />}
+      </span>
+      {items.map((item) => (
+        <Toggle
+          key={item.value}
+          value={item.value}
+          disabled={item.disabled}
+          className={cn(
+            "relative flex min-w-0 cursor-pointer items-center justify-center rounded-full whitespace-nowrap text-text-secondary motion-colors",
+            "hover:text-text-primary data-disabled:cursor-not-allowed data-disabled:opacity-40 data-pressed:text-text-primary",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+            segmentClass[size],
+            // Filled segments share the track; hugging segments keep the padding their
+            // rung gives them and let the track scroll when the set is wider than the row.
+            fill ? "flex-1" : "shrink-0",
+          )}
+        >
+          <span className="text-trim">{item.label}</span>
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  );
+}

package/src/components/select.tsx

@@ -0,0 +1,154 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { CaretDown, Check } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { fieldBoxClass, fieldSizeClass, fieldTextClass, type InputSurface } from "./input";
+import { inputGroupSegmentClass, useInputGroup } from "./input-group";
+
+export type SelectSize = ControlSize;
+export type SelectItemData = {
+  value: string;
+  label: ReactNode;
+  /** Shorter text for the trigger once chosen, such as `+82` for "+82 South Korea". */
+  selectedLabel?: ReactNode;
+  disabled?: boolean;
+};
+
+export type SelectProps = Omit<ComponentProps<typeof BaseSelect.Root>, "items" | "children"> & {
+  items: SelectItemData[];
+  placeholder?: ReactNode;
+  size?: SelectSize;
+  surface?: InputSurface;
+  invalid?: boolean;
+  /**
+   * `chip` is the Paper filter chip: a 32px bg-subtle pill, 12px padding, 13/18 medium, sized to its label.
+   * `segment` is the tinted prefix or suffix of an `InputGroup`; it takes the group's size and disabled state.
+   */
+  variant?: "field" | "chip" | "segment";
+  showIndicator?: boolean;
+  className?: string;
+  "aria-label"?: string;
+};
+
+const itemClass: Record<SelectSize, string> = {
+  sm: "h-8 gap-2 px-2.5 text-label-sm",
+  md: "h-10 gap-2.5 px-3 text-label-md",
+  lg: "h-12 gap-3 px-4 text-label-lg",
+};
+
+const itemIconClass: Record<SelectSize, string> = {
+  sm: "[&_svg]:size-4",
+  md: "[&_svg]:size-4",
+  lg: "[&_svg]:size-5",
+};
+
+/** The field box rings on `:focus-within` (`fieldBoxClass.base`); a chip or segment is the focused element itself, so it carries its own `focus-visible` ring. */
+const triggerFocusClass = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand";
+
+/**
+ * Figma `Select` (58:162) trigger with the `Select list` (88:495) popup: a field with the
+ * same text rung as `Input` (14/16/18) and a 16/20px caret; the surface never changes the
+ * text size. The popup is the veil (`veil-overlay`), 20px radius, 40px rows; the chosen row
+ * is 6% ink with a check. `variant="chip"` keeps its single 32px chip size;
+ * `variant="segment"` follows its `InputGroup`.
+ */
+export function Select({
+  items,
+  placeholder = "Select",
+  size: ownSize = "md",
+  surface = "solid",
+  invalid,
+  variant = "field",
+  showIndicator = true,
+  disabled,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: SelectProps) {
+  const group = useInputGroup();
+  const segment = variant === "segment";
+  const field = variant === "field";
+  const size = segment && group ? group.size : ownSize;
+  const popupSurface = segment && group ? group.surface : surface;
+  return (
+    <BaseSelect.Root items={items} disabled={disabled ?? (segment ? group?.disabled : undefined)} {...props}>
+      <BaseSelect.Trigger
+        aria-label={ariaLabel}
+        aria-invalid={invalid || undefined}
+        data-invalid={invalid ? "" : undefined}
+        className={cn(
+          field
+            ? cn(
+                fieldBoxClass.base,
+                fieldBoxClass[surface],
+                fieldSizeClass[size],
+                "w-60 max-w-full",
+                surface !== "glass" && "hover:not-data-disabled:not-data-invalid:border-border-strong",
+              )
+            : segment
+              ? cn(inputGroupSegmentClass[size], "text-left data-disabled:text-text-disabled", triggerFocusClass)
+              : cn(
+                  "relative inline-flex h-8 items-center gap-1 rounded-full bg-bg-subtle px-3 text-label-md hover:not-data-disabled:bg-overlay-ink-8",
+                  triggerFocusClass,
+                ),
+          "group cursor-pointer text-left motion-colors data-disabled:cursor-not-allowed",
+          className,
+        )}
+      >
+        <BaseSelect.Value
+          className={cn(
+            "relative min-w-0 truncate data-placeholder:text-text-placeholder",
+            segment ? "" : "flex-1 text-text-primary group-data-disabled:text-text-disabled",
+            field ? fieldTextClass[size] : "",
+          )}
+        >
+          {(value: string | null) => {
+            const item = items.find((entry) => entry.value === value);
+            return item ? (item.selectedLabel ?? item.label) : placeholder;
+          }}
+        </BaseSelect.Value>
+        {showIndicator ? (
+          <BaseSelect.Icon
+            className={cn(
+              "relative flex shrink-0 text-text-secondary transition-transform duration-200 ease-out-quint group-data-popup-open:rotate-180",
+              variant === "chip" && "[&_svg]:size-4",
+            )}
+          >
+            <CaretDown />
+          </BaseSelect.Icon>
+        ) : null}
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false} className="z-50 outline-none">
+          <BaseSelect.Popup
+            className={cn(
+              "relative max-w-[calc(100vw-2rem)] min-w-(--anchor-width) motion-popup overflow-clip rounded-xl p-1.5 outline-none",
+              popupSurface === "glass" ? "veil-overlay" : "border border-border-default bg-bg-surface shadow-popover",
+            )}
+          >
+            <BaseSelect.List className="relative flex flex-col gap-0.5">
+              {items.map((item) => (
+                <BaseSelect.Item
+                  key={item.value}
+                  value={item.value}
+                  disabled={item.disabled}
+                  className={cn(
+                    "flex cursor-pointer items-center rounded-md text-text-primary motion-colors outline-none select-none data-disabled:cursor-not-allowed data-disabled:opacity-40 data-highlighted:bg-overlay-ink-6 data-selected:bg-overlay-ink-6",
+                    itemClass[size],
+                  )}
+                >
+                  <BaseSelect.ItemText className="min-w-0 flex-1">{item.label}</BaseSelect.ItemText>
+                  <BaseSelect.ItemIndicator className={cn("flex shrink-0 text-text-primary", itemIconClass[size])}>
+                    <Check />
+                  </BaseSelect.ItemIndicator>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}