@rynx-ai/ui 0.1.9

package/src/components/interaction-question.tsx

@@ -0,0 +1,364 @@
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+import { cn } from "../lib/utils.js";
+
+export interface InteractionQuestionOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export type InteractionQuestionField =
+  | {
+      id: string;
+      type: "text";
+      label: string;
+      description?: string;
+      required?: boolean;
+      secret?: boolean;
+      multiline?: boolean;
+      placeholder?: string;
+    }
+  | {
+      id: string;
+      type: "select";
+      label: string;
+      description?: string;
+      required?: boolean;
+      multiple?: boolean;
+      allowOther?: boolean;
+      options: InteractionQuestionOption[];
+    };
+
+export type InteractionQuestionAnswer = string | string[];
+
+export interface InteractionQuestionProps {
+  idPrefix: string;
+  fields: readonly InteractionQuestionField[];
+  activeFieldId?: string;
+  answers: Record<string, InteractionQuestionAnswer>;
+  otherValues: Record<string, string>;
+  otherSelections: Record<string, boolean>;
+  errors?: Record<string, string | undefined>;
+  disabled?: boolean;
+  onNavigate: (fieldId: string) => void;
+  onAnswerChange: (fieldId: string, answer: InteractionQuestionAnswer) => void;
+  onOtherValueChange: (fieldId: string, value: string) => void;
+  onOtherSelectionChange: (fieldId: string, selected: boolean) => void;
+}
+
+/** Shared one-question-at-a-time editor used by every Rynx web surface. */
+export function InteractionQuestion({
+  idPrefix,
+  fields,
+  activeFieldId,
+  answers,
+  otherValues,
+  otherSelections,
+  errors = {},
+  disabled = false,
+  onNavigate,
+  onAnswerChange,
+  onOtherValueChange,
+  onOtherSelectionChange,
+}: InteractionQuestionProps) {
+  const questionRef = React.useRef<HTMLDivElement>(null);
+  const previousFieldIdRef = React.useRef<string | undefined>(undefined);
+  const previousErrorRef = React.useRef<string | undefined>(undefined);
+  const requestedIndex = fields.findIndex((candidate) => candidate.id === activeFieldId);
+  const index = requestedIndex >= 0 ? requestedIndex : 0;
+  const field = fields[index];
+  const error = field ? errors[field.id] : undefined;
+  const currentAnswer = field ? answers[field.id] : undefined;
+
+  React.useEffect(() => {
+    if (!field) return;
+    const fieldChanged = previousFieldIdRef.current !== undefined
+      && previousFieldIdRef.current !== field.id;
+    const errorAppeared = Boolean(error) && previousErrorRef.current !== error;
+    previousFieldIdRef.current = field.id;
+    previousErrorRef.current = error;
+    if (!fieldChanged && !errorAppeared) return;
+    const container = questionRef.current;
+    const focusTarget = container?.querySelector<HTMLElement>(
+      'input[aria-invalid="true"]:not([disabled]), textarea[aria-invalid="true"]:not([disabled])',
+    ) ?? container?.querySelector<HTMLElement>("input:checked:not([disabled])")
+      ?? container?.querySelector<HTMLElement>("input:not([disabled]), textarea:not([disabled])");
+    focusTarget?.focus();
+  }, [error, field]);
+
+  if (!field) return null;
+
+  const domId = `${idPrefix}-field-${index}`;
+  const descriptionId = field.description ? `${domId}-description` : undefined;
+  const errorId = error ? `${domId}-error` : undefined;
+  const describedBy = [descriptionId, errorId].filter(Boolean).join(" ") || undefined;
+
+  return (
+    <div className="grid gap-3">
+      {fields.length > 1 && (
+        <div className="grid gap-1.5">
+          <div className="flex items-center justify-between gap-3">
+            <div aria-live="polite" className="font-mono text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+              Question {index + 1} of {fields.length}
+            </div>
+            <div className="text-[11px] text-muted-foreground">
+              {field.required ? "Required" : "Optional"}
+            </div>
+          </div>
+          <div
+            role="progressbar"
+            aria-label="Question progress"
+            aria-valuemin={1}
+            aria-valuemax={fields.length}
+            aria-valuenow={index + 1}
+            className="h-1 overflow-hidden rounded-full bg-muted"
+          >
+            <div
+              className="h-full rounded-full bg-primary transition-[width]"
+              style={{ width: `${((index + 1) / fields.length) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      <div ref={questionRef}>
+        {field.type === "text" ? (
+          <div className="grid gap-1.5">
+            <label htmlFor={domId} className="text-xs font-medium text-foreground">
+              {field.label}
+              {field.required && <RequiredIndicator />}
+            </label>
+            {field.description && (
+              <p id={descriptionId} className="text-[11px] leading-relaxed text-muted-foreground">
+                {field.description}
+              </p>
+            )}
+            {field.multiline && !field.secret ? (
+              <Textarea
+                id={domId}
+                value={typeof currentAnswer === "string" ? currentAnswer : ""}
+                disabled={disabled}
+                placeholder={field.placeholder}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                required={field.required}
+                onChange={(event) => onAnswerChange(field.id, event.target.value)}
+              />
+            ) : (
+              <Input
+                id={domId}
+                type={field.secret ? "password" : "text"}
+                autoComplete="off"
+                value={typeof currentAnswer === "string" ? currentAnswer : ""}
+                disabled={disabled}
+                placeholder={field.placeholder}
+                aria-invalid={error ? true : undefined}
+                aria-describedby={describedBy}
+                required={field.required}
+                onChange={(event) => onAnswerChange(field.id, event.target.value)}
+              />
+            )}
+            <FieldError id={errorId} error={error} />
+          </div>
+        ) : (
+          <fieldset
+            disabled={disabled}
+            role={field.multiple ? undefined : "radiogroup"}
+            aria-required={!field.multiple && field.required ? true : undefined}
+            aria-invalid={error ? true : undefined}
+            aria-describedby={describedBy}
+            className="grid gap-1.5"
+          >
+            <legend className="text-xs font-medium text-foreground">
+              {field.label}
+              {field.required && <RequiredIndicator />}
+            </legend>
+            {field.description && (
+              <p id={descriptionId} className="text-[11px] leading-relaxed text-muted-foreground">
+                {field.description}
+              </p>
+            )}
+            <div className="grid gap-1.5">
+              {field.options.map((option, optionIndex) => {
+                const optionId = `${domId}-option-${optionIndex}`;
+                const checked = field.multiple
+                  ? Array.isArray(currentAnswer) && currentAnswer.includes(option.value)
+                  : otherSelections[field.id] !== true && currentAnswer === option.value;
+                return (
+                  <ChoiceRow
+                    key={option.value}
+                    id={optionId}
+                    name={field.multiple ? undefined : domId}
+                    type={field.multiple ? "checkbox" : "radio"}
+                    checked={checked}
+                    label={option.label}
+                    description={option.description}
+                    onChange={(selected) => {
+                      if (field.multiple) {
+                        const values = Array.isArray(currentAnswer) ? currentAnswer : [];
+                        onAnswerChange(
+                          field.id,
+                          selected
+                            ? [...values.filter((value) => value !== option.value), option.value]
+                            : values.filter((value) => value !== option.value),
+                        );
+                      } else {
+                        onAnswerChange(field.id, option.value);
+                        onOtherSelectionChange(field.id, false);
+                      }
+                    }}
+                  />
+                );
+              })}
+              {field.allowOther && (
+                <div className="grid gap-1.5 rounded-lg border border-border bg-background/60 px-2.5 py-2 has-[:checked]:border-primary/50 has-[:checked]:bg-primary/5">
+                  <ChoiceRow
+                    id={`${domId}-other`}
+                    name={field.multiple ? undefined : domId}
+                    type={field.multiple ? "checkbox" : "radio"}
+                    checked={otherSelections[field.id] === true}
+                    label="Other"
+                    embedded
+                    onChange={(selected) => {
+                      onOtherSelectionChange(field.id, selected);
+                      if (selected && !field.multiple) onAnswerChange(field.id, "");
+                    }}
+                  />
+                  <Input
+                    value={otherValues[field.id] ?? ""}
+                    disabled={disabled || otherSelections[field.id] !== true}
+                    aria-label={`Other answer for ${field.label}`}
+                    aria-invalid={error ? true : undefined}
+                    aria-describedby={describedBy}
+                    placeholder="Enter another answer"
+                    onChange={(event) => onOtherValueChange(field.id, event.target.value)}
+                  />
+                </div>
+              )}
+              {!field.required
+                && !field.multiple
+                && (otherSelections[field.id] === true
+                  || (typeof currentAnswer === "string" && currentAnswer.length > 0)) && (
+                <Button
+                  type="button"
+                  size="xs"
+                  variant="ghost"
+                  className="justify-self-start text-muted-foreground"
+                  onClick={() => {
+                    onAnswerChange(field.id, "");
+                    onOtherSelectionChange(field.id, false);
+                  }}
+                >
+                  Clear selection
+                </Button>
+              )}
+            </div>
+            <FieldError id={errorId} error={error} />
+          </fieldset>
+        )}
+      </div>
+
+      {fields.length > 1 && (
+        <div className="flex items-center justify-between gap-2 border-t border-border/70 pt-2">
+          <Button
+            type="button"
+            size="xs"
+            variant="ghost"
+            disabled={disabled || index === 0}
+            onClick={() => onNavigate(fields[index - 1]!.id)}
+          >
+            <ChevronLeft />
+            Previous
+          </Button>
+          <Button
+            type="button"
+            size="xs"
+            variant="outline"
+            disabled={disabled || index === fields.length - 1}
+            onClick={() => onNavigate(fields[index + 1]!.id)}
+          >
+            Next
+            <ChevronRight />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChoiceRow({
+  id,
+  name,
+  type,
+  checked,
+  label,
+  description,
+  embedded = false,
+  onChange,
+}: {
+  id: string;
+  name?: string;
+  type: "checkbox" | "radio";
+  checked: boolean;
+  label: string;
+  description?: string;
+  embedded?: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        "flex cursor-pointer items-start gap-2 text-xs text-foreground",
+        !embedded
+          && "rounded-lg border border-border bg-background/60 px-2.5 py-2 transition-colors hover:bg-muted/60 has-[:checked]:border-primary/50 has-[:checked]:bg-primary/5",
+      )}
+    >
+      <span className="relative mt-0.5 size-4 shrink-0">
+        <input
+          id={id}
+          type={type}
+          name={name}
+          checked={checked}
+          className="peer size-4 appearance-none rounded-sm border border-input bg-background outline-none transition-colors checked:border-primary checked:bg-primary focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60"
+          onChange={(event) => onChange(event.target.checked)}
+        />
+        <Check
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 size-4 stroke-[3] text-primary-foreground opacity-0 peer-checked:opacity-100"
+        />
+      </span>
+      <span className="min-w-0">
+        <span className="block">{label}</span>
+        {description && (
+          <span className="mt-0.5 block text-[11px] leading-relaxed text-muted-foreground">
+            {description}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+}
+
+function FieldError({ id, error }: { id?: string; error?: string }) {
+  if (!error) return null;
+  return (
+    <p id={id} role="alert" className="text-[11px] text-destructive">
+      {error}
+    </p>
+  );
+}
+
+function RequiredIndicator() {
+  return (
+    <>
+      <span aria-hidden="true" className="ml-0.5 text-destructive">*</span>
+      <span className="sr-only"> (required)</span>
+    </>
+  );
+}

package/src/components/native-select.tsx

@@ -0,0 +1,57 @@
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils.js";
+
+export type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  size?: "sm" | "default";
+};
+
+export function NativeSelect({
+  className,
+  size = "default",
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      data-slot="native-select-wrapper"
+      data-size={size}
+      className={cn(
+        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        className,
+      )}
+    >
+      <select
+        data-slot="native-select"
+        data-size={size}
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        {...props}
+      />
+      <ChevronDown
+        aria-hidden="true"
+        data-slot="native-select-icon"
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
+      />
+    </div>
+  );
+}
+
+export function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">) {
+  return (
+    <option
+      data-slot="native-select-option"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}
+
+export function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">) {
+  return (
+    <optgroup
+      data-slot="native-select-optgroup"
+      className={cn("bg-[Canvas] text-[CanvasText]", className)}
+      {...props}
+    />
+  );
+}

package/src/components/scroll-area.tsx

@@ -0,0 +1,84 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "../lib/utils.js";
+
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+  viewportClassName?: string;
+  viewportRef?: React.Ref<React.ElementRef<typeof ScrollAreaPrimitive.Viewport>>;
+  viewportProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>,
+    "children" | "className"
+  >;
+  scrollbars?: "vertical" | "horizontal" | "both";
+};
+
+export const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(({
+  className,
+  children,
+  viewportClassName,
+  viewportRef,
+  viewportProps,
+  scrollbars = "vertical",
+  type = "auto",
+  ...props
+}, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    data-slot="scroll-area"
+    type={type}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport
+      ref={viewportRef}
+      data-slot="scroll-area-viewport"
+      className={cn(
+        "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-[var(--ring)]/45",
+        scrollbars === "vertical" && "[&>div]:!block [&>div]:min-w-0 [&>div]:w-full",
+        viewportClassName,
+      )}
+      {...viewportProps}
+    >
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    {scrollbars !== "horizontal" && <ScrollBar orientation="vertical" />}
+    {scrollbars !== "vertical" && <ScrollBar orientation="horizontal" />}
+    <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+export const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", style, ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    data-slot="scroll-area-scrollbar"
+    orientation={orientation}
+    className={cn(
+      "group flex touch-none select-none p-px transition-colors",
+      orientation === "vertical" && "h-full w-2",
+      orientation === "horizontal" && "h-2 flex-col",
+      className,
+    )}
+    style={{
+      ...(orientation === "vertical" ? { right: 2 } : { bottom: 2 }),
+      ...style,
+    }}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      className={cn(
+        "relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] transition-colors group-hover:bg-[var(--scrollbar-thumb-hover)] active:bg-[var(--scrollbar-thumb-active)]",
+        orientation === "vertical" ? "min-h-8 w-full" : "h-full min-w-8",
+      )}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

package/src/components/select.tsx

@@ -0,0 +1,191 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils.js";
+
+export function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+export const SelectGroup = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Group
+    ref={ref}
+    data-slot="select-group"
+    className={cn("scroll-my-1 p-1", className)}
+    {...props}
+  />
+));
+SelectGroup.displayName = SelectPrimitive.Group.displayName;
+
+export const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>((props, ref) => <SelectPrimitive.Value ref={ref} data-slot="select-value" {...props} />);
+SelectValue.displayName = SelectPrimitive.Value.displayName;
+
+export 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(
+      "flex w-full min-w-0 items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown
+        aria-hidden="true"
+        className="pointer-events-none size-4 shrink-0 text-muted-foreground"
+      />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+export 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(
+      "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp aria-hidden="true" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+export 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(
+      "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown aria-hidden="true" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+export const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(
+  (
+    {
+      className,
+      children,
+      position = "popper",
+      align = "center",
+      sideOffset = 4,
+      collisionPadding = 8,
+      ...props
+    },
+    ref,
+  ) => (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        position={position}
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn(
+          "cn-menu-translucent relative z-50 max-h-[var(--radix-select-content-available-height)] min-w-36 origin-[var(--radix-select-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
+          position === "popper" &&
+            "w-[var(--radix-select-trigger-width)] 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,
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "min-w-[var(--radix-select-trigger-width)]",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  ),
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+export 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("px-1.5 py-1 text-xs text-muted-foreground", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export 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(
+      "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className,
+    )}
+    {...props}
+  >
+    <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check aria-hidden="true" className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export 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("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;