@godxjp/ui 5.0.1 → 6.0.0

package/src/components/data-entry/date-picker.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { formatDate } from "../../lib/datetime";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Calendar } from "./calendar";
+import type { DatePickerProp } from "../../props/components/data-entry.prop";
+
+export type {
+  DatePickerProp,
+  DatePickerProp as DatePickerProps,
+} from "../../props/components/data-entry.prop";
+
+export function DatePicker({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  locale: localeProp,
+  fromDate,
+  toDate,
+}: DatePickerProp) {
+  const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
+  const [open, setOpen] = React.useState(false);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+            className,
+          )}
+        >
+          <CalendarIcon className="mr-2 size-4 shrink-0" aria-hidden="true" />
+          {value ? formatDate(value, { kind: "calendar" }) : resolvedPlaceholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={value}
+          onSelect={(date) => {
+            onChange?.(date);
+            setOpen(false);
+          }}
+          locale={dayPickerLocale}
+          disabled={[
+            ...(fromDate ? [{ before: fromDate }] : []),
+            ...(toDate ? [{ after: toDate }] : []),
+          ]}
+          startMonth={fromDate}
+          endMonth={toDate}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-entry/date-range-picker.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import type { DateRange } from "react-day-picker";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { formatDate } from "../../lib/datetime";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Calendar } from "./calendar";
+import type { DateRangePickerProp } from "../../props/components/data-entry.prop";
+
+export type {
+  DateRangePickerProp,
+  DateRangePickerProp as DateRangePickerProps,
+} from "../../props/components/data-entry.prop";
+
+function formatRange(range: DateRange | undefined): string {
+  if (!range?.from) return "";
+  const fmt = (d: Date) => formatDate(d, { kind: "calendar" });
+  if (!range.to) return fmt(range.from);
+  return `${fmt(range.from)} – ${fmt(range.to)}`;
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  locale: localeProp,
+  fromDate,
+  toDate,
+}: DateRangePickerProp) {
+  const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
+  const [open, setOpen] = React.useState(false);
+  const label = formatRange(value);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !label && "text-muted-foreground",
+            className,
+          )}
+        >
+          <CalendarIcon className="mr-2 size-4 shrink-0" aria-hidden="true" />
+          {label || resolvedPlaceholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="range"
+          selected={value}
+          onSelect={onChange}
+          locale={dayPickerLocale}
+          disabled={[
+            ...(fromDate ? [{ before: fromDate }] : []),
+            ...(toDate ? [{ after: toDate }] : []),
+          ]}
+          startMonth={fromDate}
+          endMonth={toDate}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-entry/form-field.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+
+import { Label } from "../data-entry/label";
+import { cn } from "../../lib/utils";
+import type { FormFieldProp } from "../../props/components/data-entry.prop";
+
+export type {
+  FormFieldProp,
+  FormFieldProp as FormFieldProps,
+} from "../../props/components/data-entry.prop";
+
+export function FormField({
+  id,
+  label,
+  required,
+  helper,
+  error,
+  labelAddon,
+  className,
+  children,
+}: FormFieldProp) {
+  const helperId = helper && !error ? `${id}-helper` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const describedBy = errorId ?? helperId;
+
+  const childWithA11y = React.isValidElement(children)
+    ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+        "aria-describedby": describedBy,
+        "aria-required": required ? true : undefined,
+        "aria-invalid": !!error || undefined,
+      })
+    : children;
+
+  return (
+    <div className={cn("ui-stack-sm", className)}>
+      <div className="flex items-center gap-1">
+        <Label htmlFor={id} className="ui-inline-xs">
+          <span>{label}</span>
+          {required && (
+            <span aria-hidden="true" className="text-destructive">
+              *
+            </span>
+          )}
+        </Label>
+        {labelAddon}
+      </div>
+      {childWithA11y}
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      ) : helper ? (
+        <p id={helperId} className="text-muted-foreground text-xs">
+          {helper}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/data-entry/index.ts

@@ -0,0 +1,62 @@
+export { Input } from "./input";
+export type { InputProps } from "./input";
+export { Label } from "./label";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+export { Checkbox } from "./checkbox";
+export { CheckboxGroup } from "./checkbox-group";
+export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio";
+export { Textarea } from "./textarea";
+export type { TextareaProps } from "./textarea";
+export { FormField } from "./form-field";
+export { SwitchField } from "./switch-field";
+export type { SwitchFieldProps } from "./switch-field";
+export { CountrySelect, CountryOptionLabel } from "./country-select";
+export type {
+  CountrySelectProps,
+  CountryOptionProp,
+  CountryOptionLabelProp,
+} from "./country-select";
+export { SearchInput } from "./search-input";
+export { Switch } from "./switch";
+export type { SwitchProps } from "./switch";
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+export { Calendar } from "./calendar";
+export type { CalendarProps } from "./calendar";
+export { DatePicker } from "./date-picker";
+export type { DatePickerProps } from "./date-picker";
+export { DateRangePicker } from "./date-range-picker";
+export type { DateRangePickerProps } from "./date-range-picker";
+export { TimePicker } from "./time-picker";
+export type { TimePickerProps } from "./time-picker";
+export { ColorPicker } from "./color-picker";
+export type { ColorPickerProps } from "./color-picker";
+export { Autocomplete } from "./autocomplete";
+export type { AutocompleteProps } from "./autocomplete";
+export { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from "./upload";
+export type { UploadProps, UploadFileItem, UploadVariant, UploadCommitAction } from "./upload";
+export { Cascader } from "./cascader";
+export type { CascaderProps, TreeOption, TreeFieldNames } from "./cascader";
+export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select";
+export type { TreeSelectProps } from "./tree-select";
+export { Transfer } from "./transfer";
+export type { TransferProps, TransferItemProp } from "./transfer";
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";

package/src/components/data-entry/input.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      data-slot="input"
+      ref={ref}
+      className={cn(
+        "ui-control border-input bg-background w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+        "selection:bg-primary selection:text-primary-foreground",
+        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "placeholder:text-muted-foreground",
+        "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:border-destructive aria-invalid:ring-destructive/20",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";

package/src/components/data-entry/label.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+export const Label = React.forwardRef<
+  React.ComponentRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    data-slot="label"
+    className={cn(
+      "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+      labelVariants(),
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;

package/src/components/data-entry/radio.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { ChoiceField } from "./choice-field";
+import { choiceGroupClassName, type ChoiceOption } from "./choice-option";
+import type { RadioGroupProp } from "../../props/components/data-entry.prop";
+
+export type {
+  RadioGroupProp,
+  RadioGroupProp as RadioGroupProps,
+} from "../../props/components/data-entry.prop";
+
+const RadioGroupRoot = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    data-slot="radio-group"
+    className={cn("ui-choice-group", className)}
+    {...props}
+  />
+));
+RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    data-slot="radio-group-item"
+    className={cn(
+      "ui-radio focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator
+      data-slot="radio-group-indicator"
+      className="ui-choice-indicator"
+    >
+      <Circle className="ui-radio-icon" aria-hidden="true" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+function RadioGroupOptions({
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  orientation = "vertical",
+  disabled,
+  name,
+  className,
+  children,
+}: RadioGroupProp) {
+  const reactId = React.useId();
+
+  if (options && options.length > 0) {
+    return (
+      <RadioGroupRoot
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        name={name}
+        data-orientation={orientation}
+        className={choiceGroupClassName(orientation, className)}
+      >
+        {options.map((opt: ChoiceOption, index) => {
+          const id = `${reactId}-${opt.value}-${index}`;
+          return (
+            <ChoiceField key={opt.value} id={id} label={opt.label} description={opt.description}>
+              <RadioItem id={id} value={opt.value} disabled={opt.disabled} />
+            </ChoiceField>
+          );
+        })}
+      </RadioGroupRoot>
+    );
+  }
+
+  return (
+    <RadioGroupRoot
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      name={name}
+      data-orientation={orientation}
+      className={choiceGroupClassName(orientation, className)}
+    >
+      {children}
+    </RadioGroupRoot>
+  );
+}
+
+/** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
+export const Radio = Object.assign(RadioItem, {
+  Root: RadioGroupRoot,
+  Group: RadioGroupOptions,
+  Item: RadioItem,
+});
+
+export { RadioGroupRoot, RadioItem, RadioGroupOptions as RadioGroup };

package/src/components/data-entry/search-input.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { Search, X } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { Input } from "../data-entry/input";
+import { Label } from "../data-entry/label";
+import { cn } from "../../lib/utils";
+import { useDebouncedValue } from "../../lib/hooks";
+
+interface SearchInputProps {
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  debounce?: number;
+  onSearch: (q: string) => void;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  className?: string;
+  inputClassName?: string;
+  id?: string;
+  disabled?: boolean;
+}
+
+export function SearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  placeholder,
+  debounce = 250,
+  onSearch,
+  label,
+  ariaLabel,
+  className,
+  inputClassName,
+  id,
+  disabled = false,
+}: SearchInputProps) {
+  const { t } = useTranslation();
+  const isControlled = controlledValue !== undefined;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = isControlled ? controlledValue : internal;
+  const debounced = useDebouncedValue(value, debounce);
+  const reactId = React.useId();
+  const inputId = id ?? `search-${reactId}`;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
+  const resolvedAriaLabel = ariaLabel ?? t("common.search");
+
+  const onSearchRef = React.useRef(onSearch);
+  React.useEffect(() => {
+    onSearchRef.current = onSearch;
+  });
+  React.useEffect(() => {
+    onSearchRef.current(debounced);
+  }, [debounced]);
+
+  const setValue = (v: string) => {
+    if (!isControlled) setInternal(v);
+  };
+
+  return (
+    <div className={cn("ui-search-input", className)}>
+      {label !== undefined ? (
+        <Label htmlFor={inputId} className="ui-search-input-label">
+          {label}
+        </Label>
+      ) : (
+        <Label htmlFor={inputId} className="sr-only">
+          {resolvedAriaLabel}
+        </Label>
+      )}
+      <div className="ui-search-input-field">
+        <Search className="ui-search-input-icon" aria-hidden="true" />
+        <Input
+          id={inputId}
+          type="text"
+          role="searchbox"
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+          }}
+          placeholder={resolvedPlaceholder}
+          aria-label={resolvedAriaLabel}
+          className={cn(
+            "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
+            inputClassName,
+          )}
+          disabled={disabled}
+        />
+        {value && !disabled && (
+          <button
+            type="button"
+            onClick={() => {
+              setValue("");
+            }}
+            aria-label={t("common.clearSearch")}
+            className="ui-search-input-clear"
+          >
+            <X />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/data-entry/select.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { controlTriggerClass } from "../../lib/control-styles";
+
+export function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+export function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+export function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+export const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+  }
+>(({ className, children, size = "default", ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    data-slot="select-trigger"
+    data-size={size}
+    className={cn(
+      controlTriggerClass,
+      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-fit gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="size-4 shrink-0 opacity-50" aria-hidden="true" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+export const SelectScrollUpButton = React.forwardRef<
+  React.ComponentRef<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}
+  >
+    <ChevronUp className="size-4" aria-hidden="true" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ComponentRef<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}
+  >
+    <ChevronDown className="size-4" aria-hidden="true" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+export const SelectContent = React.forwardRef<
+  React.ComponentRef<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-[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-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+        position === "popper" && "translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        data-slot="select-viewport"
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full 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.ComponentRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    data-slot="select-label"
+    className={cn("px-2 py-1.5 text-sm font-medium", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export const SelectItem = React.forwardRef<
+  React.ComponentRef<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 data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export const SelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    data-slot="select-separator"
+    className={cn("bg-border -mx-1 my-1 h-px", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;