1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T93c,import type { ComponentProps, ReactNode } from "react"; import * as SeparatorPrimitive from "@radix-ui/react-separator"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Separator. * * A hairline. One pixel, in `--border-subtle`. * * BEFORE YOU REACH FOR ONE * Let white space carry hierarchy. A divider every time two things need * separating produces a page of boxes and no rhythm. A separator earns its * place when the gap alone would read as "same group, just spaced out" — * between a card's body and its actions, between sections of a settings list. * * `decorative` (the default) renders `role="none"`, so a screen reader isn't * read a list of separators. Set it false only when the line marks a genuine * change of topic that a non-visual reader would otherwise miss. * * The plain line is Radix Separator, which decides that role/orientation * pairing for us. The labelled variant below is not — a rule with "or" sitting * in it is three elements and a flex row, which is a different thing wearing * the same name, so it stays hand-rolled. */ export type SeparatorProps = Omit, "children"> & { orientation?: "horizontal" | "vertical"; decorative?: boolean; /** A word in the middle of the line — "or", "then". Horizontal only. */ children?: ReactNode; }; export function Separator({ className, orientation = "horizontal", decorative = true, children, ...props }: SeparatorProps) { if (children && orientation === "horizontal") { return (

{children}

); } return ( ); } 24:T4174,

import type { ComponentProps, ReactNode } from "react";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Separator.
 *
 * A hairline. One pixel, in `--border-subtle`.
 *
 * BEFORE YOU REACH FOR ONE
 *   Let white space carry hierarchy. A divider every time two things need
 *   separating produces a page of boxes and no rhythm. A separator earns its
 *   place when the gap alone would read as "same group, just spaced out" —
 *   between a card's body and its actions, between sections of a settings list.
 *
 * `decorative` (the default) renders `role="none"`, so a screen reader isn't
 * read a list of separators. Set it false only when the line marks a genuine
 * change of topic that a non-visual reader would otherwise miss.
 *
 * The plain line is Radix Separator, which decides that role/orientation
 * pairing for us. The labelled variant below is not — a rule with "or" sitting
 * in it is three elements and a flex row, which is a different thing wearing
 * the same name, so it stays hand-rolled.
 */
export type SeparatorProps = Omit<ComponentProps<"div">, "children"> & {
  orientation?: "horizontal" | "vertical";
  decorative?: boolean;
  /** A word in the middle of the line — "or", "then". Horizontal only. */
  children?: ReactNode;
};

export function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  children,
  ...props
}: SeparatorProps) {
  if (children && orientation === "horizontal") {
    return (
      <div
        data-slot="separator"
        role={decorative ? "none" : "separator"}
        aria-orientation={decorative ? undefined : orientation}
        className={cn("flex items-center gap-4", className)}
        {...props}
      >
        <span aria-hidden className="h-px flex-1 bg-border-subtle" />
        <span className="font-ui text-caption text-text-muted">{children}</span>
        <span aria-hidden className="h-px flex-1 bg-border-subtle" />
      </div>
    );
  }

  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      orientation={orientation}
      decorative={decorative}
      className={cn(
        "flex-none bg-border-subtle",
        orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch",
        className,
      )}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Primitives"}],["$","$L1e",null,{"children":"Separator"}],["$","$L1f",null,{"children":"A hairline, with an optional word in the middle."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"separator"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/separator","source":"$23","highlighted":"$24","npm":["@radix-ui/react-separator"],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]