// ~/src/siteplane/components/separator/separator.tsx

import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import type React from "react";

import { cn, type WithStringClassName } from "../../system/utils/cn";
import { baseClass, slotClass } from "../../system/utils/slot-class";
import type { KitSeparatorProps } from "./separator-internal";

export function Separator(
  separatorProps: WithStringClassName<SeparatorPrimitive.Props>,
): React.ReactElement {
  // Group and ToggleGroup pass their internal profiles through KitSeparator
  // (separator-internal.ts), the same function.
  const {
    className,
    orientation = "horizontal",
    profile = "default",
    role = "separator",
    ...props
  } = separatorProps as KitSeparatorProps;
  // The line's colour, thickness and length come from design-rework.css, where
  // the separator, Toolbar and OTP Field rules refine them.
  return (
    <SeparatorPrimitive
      className={cn(
        slotClass("separator", props),
        baseClass("separator", props),
        "shrink-0",
        profile === "toggle-group" &&
          "pointer-events-none relative before:absolute before:inset-0 dark:before:bg-input/32 dark:has-[+[data-foundation=toggle]:hover]:before:bg-input/64 dark:has-[+[data-foundation=toggle][data-pressed]]:before:bg-input dark:[[data-foundation=toggle]:hover+&]:before:bg-input/64 dark:[[data-foundation=toggle][data-pressed]+&]:before:bg-input",
        className,
      )}
      data-foundation="separator"
      data-profile={profile}
      data-slot="separator"
      orientation={orientation}
      {...props}
      role={role}
      aria-orientation={
        role === "presentation" || role === "none"
          ? undefined
          : (props["aria-orientation"] ?? orientation)
      }
    />
  );
}

export { SeparatorPrimitive };


// ~/src/siteplane/components/separator/separator-internal.ts

import type { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import type * as React from "react";

import type { WithStringClassName } from "../../system/utils/cn";
import { Separator } from "./separator";

/*
 * Kit-internal Separator. Not public API: the separator index does not export
 * this module, and its names and profiles may change in any release. Group and
 * ToggleGroup render their dividers with these composition profiles.
 */
export type SeparatorProfile = "default" | "group" | "toggle-group";

export type KitSeparatorProps =
  WithStringClassName<SeparatorPrimitive.Props> & {
    profile?: SeparatorProfile;
  };

/** Separator with the kit's composition profiles; the same component. */
export const KitSeparator = Separator as (
  props: KitSeparatorProps,
) => React.ReactElement;


// ~/src/siteplane/components/separator/index.ts

export * from "./separator";