@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/select.tsx

@@ -1,135 +1,446 @@
 "use client";
 
-import * as SelectPrimitive from "@radix-ui/react-select";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Select as BaseSelect} from "@base-ui/react/select";
+import {useRender} from "@base-ui/react/use-render";
 import {Check, ChevronDown, ChevronUp} from "lucide-react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./select.module.css";
 
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({className, children, ...props}, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm ring-offset-white focus:ring-1 focus:ring-neutral-950 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-neutral-500 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[placeholder]:text-neutral-400 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}>
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className='h-4 w-4 opacity-50' />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({className, ...props}, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}>
-    <ChevronUp className='h-4 w-4' />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({className, ...props}, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}>
-    <ChevronDown className='h-4 w-4' />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-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}
-      className={cn(
-        "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 border-neutral-200 bg-white text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        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)]",
-        )}>
+interface SelectProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Root>, "onValueChange"> {
+  /** Called when the selected value changes and resolves to a string. @default undefined */
+  onValueChange?: (value: string) => void;
+}
+
+interface SelectTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Trigger>, "className"> {
+  /** Additional CSS classes merged with the select trigger styles. @default undefined */
+  className?: string;
+}
+
+interface SelectScrollUpButtonProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.ScrollUpArrow>, "className"> {
+  /** Additional CSS classes merged with the scroll-up control styles. @default undefined */
+  className?: string;
+}
+
+interface SelectScrollDownButtonProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.ScrollDownArrow>, "className"> {
+  /** Additional CSS classes merged with the scroll-down control styles. @default undefined */
+  className?: string;
+}
+
+interface SelectContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Positioner>, "className"> {
+  /** Additional CSS classes merged with the select popup styles. @default undefined */
+  className?: string;
+  /** The offset in pixels between the trigger and the popup. @default 4 */
+  sideOffset?: number;
+}
+
+interface SelectLabelProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.GroupLabel>, "className"> {
+  /** Additional CSS classes merged with the group label styles. @default undefined */
+  className?: string;
+}
+
+interface SelectItemProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Item>, "className"> {
+  /** Additional CSS classes merged with the select item styles. @default undefined */
+  className?: string;
+}
+
+interface SelectSeparatorProps extends Omit<React.ComponentPropsWithRef<typeof BaseSelect.Separator>, "className"> {
+  /** Additional CSS classes merged with the separator styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Coordinates select state, keyboard navigation, and value management.
+ *
+ * @remarks
+ * - Renders no DOM element by default and coordinates descendant select parts
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports composition through descendant `render` props
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Select defaultValue="one">
+ *   <SelectTrigger />
+ *   <SelectContent>
+ *     <SelectItem value="one">One</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function Select(props: Readonly<Select.Props>): React.ReactElement {
+  const {onValueChange, ...otherProps} = props;
+
+  const handleChange = React.useCallback(
+    (value: unknown) => {
+      if (onValueChange && typeof value === "string") {
+        onValueChange(value);
+      }
+    },
+    [onValueChange],
+  );
+
+  return (
+    <BaseSelect.Root
+      onValueChange={handleChange as React.ComponentPropsWithRef<typeof BaseSelect.Root>["onValueChange"]}
+      {...otherProps}
+    />
+  );
+}
+Select.displayName = "Select";
+
+/**
+ * Groups related select items into a shared logical section.
+ *
+ * @remarks
+ * - Renders no DOM element by default beyond the underlying grouped option container
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports composition through descendant `render` props
+ * - Styling via CSS Modules with `--ac-*` custom properties through descendant components
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectGroup>
+ *   <SelectLabel>Team</SelectLabel>
+ *   <SelectItem value="one">One</SelectItem>
+ * </SelectGroup>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+const SelectGroup = BaseSelect.Group;
+SelectGroup.displayName = "SelectGroup";
+/**
+ * Displays the currently selected option inside the trigger.
+ *
+ * @remarks
+ * - Renders no DOM element by default beyond the underlying value slot
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports composition through surrounding select trigger rendering
+ * - Styling via CSS Modules with `--ac-*` custom properties through descendant components
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectValue placeholder="Select an option" />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+const SelectValue = BaseSelect.Value;
+SelectValue.displayName = "SelectValue";
+
+/**
+ * Opens the select popup and displays the current selected value.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectValue />
+ * </SelectTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+const SelectTrigger = React.forwardRef<React.ComponentRef<typeof BaseSelect.Trigger>, SelectTrigger.Props>(
+  (props: Readonly<SelectTrigger.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseSelect.Trigger
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.trigger, className)}, {}),
+        })}>
         {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({className, ...props}, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({className, children, ...props}, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
-      className,
-    )}
-    {...props}>
-    <span className='absolute right-2 flex h-3.5 w-3.5 items-center justify-center'>
-      <SelectPrimitive.ItemIndicator>
-        <Check className='h-4 w-4' />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ComponentRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({className, ...props}, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800", className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+        <BaseSelect.Icon className={styles.icon}>
+          <ChevronDown className={styles.iconSvg} />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+    );
+  },
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+/**
+ * Scrolls the select list upward when the popup overflows its viewport.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Pass `children` to override the default `ChevronUp` icon
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectScrollUpButton />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function SelectScrollUpButton(props: Readonly<SelectScrollUpButton.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseSelect.ScrollUpArrow
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.scrollButton, className)}, {}),
+      })}>
+      {children ?? <ChevronUp className={styles.scrollIcon} />}
+    </BaseSelect.ScrollUpArrow>
+  );
+}
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+
+/**
+ * Scrolls the select list downward when the popup overflows its viewport.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Pass `children` to override the default `ChevronDown` icon
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectScrollDownButton />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function SelectScrollDownButton(props: Readonly<SelectScrollDownButton.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseSelect.ScrollDownArrow
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.scrollButton, className)}, {}),
+      })}>
+      {children ?? <ChevronDown className={styles.scrollIcon} />}
+    </BaseSelect.ScrollDownArrow>
+  );
+}
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
+/**
+ * Portals and positions the select popup with scroll affordances.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectContent>
+ *   <SelectItem value="one">One</SelectItem>
+ * </SelectContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+const SelectContent = React.forwardRef<React.ComponentRef<typeof BaseSelect.Popup>, SelectContent.Props>(
+  (props: Readonly<SelectContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, sideOffset = 4, ...otherProps} = props;
+
+    return (
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner
+          sideOffset={sideOffset}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "div",
+            props: mergeProps({className: styles.positioner}, {}),
+          })}>
+          <BaseSelect.Popup
+            ref={ref}
+            render={useRender({
+              defaultTagName: "div",
+              render: render as never,
+              props: mergeProps({className: cn(styles.popup, className)}, {}),
+            })}>
+            <SelectScrollUpButton />
+            <BaseSelect.List className={styles.list}>{children}</BaseSelect.List>
+            <SelectScrollDownButton />
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    );
+  },
+);
+SelectContent.displayName = "SelectContent";
+
+/**
+ * Labels a logical group of options inside the select popup.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectLabel>Team</SelectLabel>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function SelectLabel(props: Readonly<SelectLabel.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseSelect.GroupLabel
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.label, className)}, {}),
+      })}>
+      {children}
+    </BaseSelect.GroupLabel>
+  );
+}
+SelectLabel.displayName = "SelectLabel";
+
+/**
+ * Renders a selectable option row within the select popup.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectItem value="one">One</SelectItem>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function SelectItem(props: Readonly<SelectItem.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseSelect.Item
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.item, className)}, {}),
+      })}>
+      <span className={styles.itemIndicatorSlot}>
+        <BaseSelect.ItemIndicator>
+          <Check className={styles.itemIndicatorIcon} />
+        </BaseSelect.ItemIndicator>
+      </span>
+      <BaseSelect.ItemText className={styles.itemText}>{children}</BaseSelect.ItemText>
+    </BaseSelect.Item>
+  );
+}
+SelectItem.displayName = "SelectItem";
+
+/**
+ * Separates groups of options inside the select popup.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/select | Base UI Select}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <SelectSeparator />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/select | Base UI Documentation}
+ */
+function SelectSeparator(props: Readonly<SelectSeparator.Props>): React.ReactElement {
+  const {className, render, ...otherProps} = props;
+
+  return (
+    <BaseSelect.Separator
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.separator, className)}, {}),
+      })}
+    />
+  );
+}
+SelectSeparator.displayName = "SelectSeparator";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Select {
+  export type Props = SelectProps;
+  export type State = BaseSelect.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectTrigger {
+  export type Props = SelectTriggerProps;
+  export type State = BaseSelect.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectScrollUpButton {
+  export type Props = SelectScrollUpButtonProps;
+  export type State = BaseSelect.ScrollUpArrow.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectScrollDownButton {
+  export type Props = SelectScrollDownButtonProps;
+  export type State = BaseSelect.ScrollDownArrow.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectContent {
+  export type Props = SelectContentProps;
+  export type State = BaseSelect.Popup.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectLabel {
+  export type Props = SelectLabelProps;
+  export type State = BaseSelect.GroupLabel.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectItem {
+  export type Props = SelectItemProps;
+  export type State = BaseSelect.Item.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace SelectSeparator {
+  export type Props = SelectSeparatorProps;
+  export type State = BaseSelect.Separator.State;
+}
 
 export {
   Select,

package/src/components/ui/separator.module.css

@@ -0,0 +1,14 @@
+.separator {
+  flex-shrink: 0;
+  background-color: var(--ac-border);
+}
+
+.horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.vertical {
+  width: 1px;
+  height: 100%;
+}

package/src/components/ui/separator.tsx

@@ -1,26 +1,67 @@
 "use client";
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Separator as BaseSeparator} from "@base-ui/react/separator";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./separator.module.css";
 
-const Separator = React.forwardRef<
-  React.ComponentRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({className, orientation = "horizontal", decorative = true, ...props}, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      "shrink-0 bg-neutral-200 dark:bg-neutral-800",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className,
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+/**
+ * Props for the shared separator wrapper.
+ */
+export interface SeparatorProps extends Omit<React.ComponentPropsWithRef<typeof BaseSeparator>, "className"> {
+  /** Additional CSS classes merged with the separator styles. @default undefined */
+  className?: string;
+  /** The visual axis used when rendering the separator line. @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+  /** Legacy compatibility flag retained by the wrapper but not forwarded to Base UI. @default true */
+  decorative?: boolean;
+}
+
+/**
+ * Separates adjacent content areas with a horizontal or vertical rule.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/separator | Base UI Separator}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Separator />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/separator | Base UI Documentation}
+ */
+function Separator(props: Readonly<Separator.Props>): React.ReactElement {
+  const {className, decorative: _decorative = true, orientation = "horizontal", render, ...otherProps} = props;
+
+  return (
+    <BaseSeparator
+      orientation={orientation}
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps(
+          {
+            className: cn(styles.separator, orientation === "horizontal" ? styles.horizontal : styles.vertical, className),
+          },
+          {},
+        ),
+      })}
+    />
+  );
+}
+Separator.displayName = "Separator";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Separator {
+  export type Props = SeparatorProps;
+  export type State = BaseSeparator.State;
+}
 
 export {Separator};