فاصل

import { Separator } from 'topclassui/separator'

/** As in the docs sample, the gap of the column spaces the line, which has no margin of its own. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <p className="text-base text-body">Personal details</p>
      <Separator />
      <p className="text-sm text-muted">Name, email address and phone number.</p>
    </div>
  )
}

import { Separator } from 'topclassui/separator'

/** The row has a height, and the line stretches to it although the row centres its items. */
export default function Demo() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm text-body">
      <span>Draft</span>
      <Separator orientation="vertical" />
      <span>Edited 2 hours ago</span>
    </div>
  )
}

import { Separator } from 'topclassui/separator'

/** decorative={false}: each line is a separator a screen reader announces with its orientation. */
export default function Demo() {
  return (
    <div className="flex flex-col gap-4 text-sm text-body">
      <p>Account settings</p>
      <Separator decorative={false} />
      <div className="flex h-5 items-center gap-3">
        <span>Profile</span>
        <Separator orientation="vertical" decorative={false} />
        <span>Billing</span>
      </div>
    </div>
  )
}

import { Separator } from 'topclassui/separator'

/** Right to left: the vertical line is the inline-start border, the right edge of its box here. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col gap-4 text-sm text-body">
      <p className="text-base">البيانات الشخصية</p>
      <Separator />
      <div className="flex h-5 items-center gap-3">
        <span>مسودة</span>
        <Separator orientation="vertical" />
        <span>عُدّلت قبل ساعتين</span>
      </div>
    </div>
  )
}