Separator

import { Separator } from "@/components/ui/separator";
export function SeparatorDemo() {	return (		<div className="flex max-w-sm flex-col gap-4 text-sm">			<div className="flex flex-col gap-1.5">				<div className="font-medium leading-none">herocn</div>				<div className="text-muted-foreground">					HeroUI design system, shadcn/ui abstraction				</div>			</div>			<Separator />			<div>Beautifully designed components for your next application.</div>		</div>	);}

import { Separator } from "@/components/ui/separator";
export function SeparatorVertical() {	return (		<div className="flex h-5 items-center gap-4 text-sm">			<div>Blog</div>			<Separator orientation="vertical" />			<div>Docs</div>			<Separator orientation="vertical" />			<div>Source</div>		</div>	);}

import { Separator } from "@/components/ui/separator";
export function SeparatorMenu() {	return (		<div className="flex items-center gap-2 text-sm md:gap-4">			<div className="flex flex-col gap-1">				<span className="font-medium">Settings</span>				<span className="text-muted-foreground text-xs">					Manage preferences				</span>			</div>			<Separator orientation="vertical" />			<div className="flex flex-col gap-1">				<span className="font-medium">Account</span>				<span className="text-muted-foreground text-xs">					Profile & security				</span>			</div>			<Separator orientation="vertical" className="hidden md:block" />			<div className="hidden flex-col gap-1 md:flex">				<span className="font-medium">Help</span>				<span className="text-muted-foreground text-xs">Support & docs</span>			</div>		</div>	);}

import { Separator } from "@/components/ui/separator";
export function SeparatorList() {	return (		<div className="flex w-full max-w-sm flex-col gap-2 text-sm">			<dl className="flex items-center justify-between">				<dt>Item 1</dt>				<dd className="text-muted-foreground">Value 1</dd>			</dl>			<Separator />			<dl className="flex items-center justify-between">				<dt>Item 2</dt>				<dd className="text-muted-foreground">Value 2</dd>			</dl>			<Separator />			<dl className="flex items-center justify-between">				<dt>Item 3</dt>				<dd className="text-muted-foreground">Value 3</dd>			</dl>		</div>	);}

import { Separator } from "@/components/ui/separator";import { Surface } from "@/components/ui/surface";
export function SeparatorSurface() {	return (		<div className="grid w-full gap-3 md:grid-cols-2">			<Surface variant="default" className="rounded-3xl p-6">				<div className="flex flex-col gap-3">					<div className="font-medium text-base">Default</div>					<Separator />					<div className="text-muted-foreground text-sm">						Separator on the default surface background.					</div>				</div>			</Surface>			<Surface variant="secondary" className="rounded-3xl p-6">				<div className="flex flex-col gap-3">					<div className="font-medium text-base">Secondary</div>					<Separator />					<div className="text-muted-foreground text-sm">						Separator on the secondary surface background.					</div>				</div>			</Surface>			<Surface variant="tertiary" className="rounded-3xl p-6">				<div className="flex flex-col gap-3">					<div className="font-medium text-base">Tertiary</div>					<Separator />					<div className="text-muted-foreground text-sm">						Separator on the tertiary surface background.					</div>				</div>			</Surface>			<Surface variant="transparent" className="rounded-3xl p-6">				<div className="flex flex-col gap-3">					<div className="font-medium text-base">Transparent</div>					<Separator />					<div className="text-muted-foreground text-sm">						Separator on a transparent surface (inherits parent).					</div>				</div>			</Surface>		</div>	);}

"use client";
import {	type Translations,	useTranslation,} from "@/components/language-selector";import { Separator } from "@/components/ui/separator";
const translations: Translations = {	en: {		dir: "ltr",		values: {			title: "herocn",			subtitle: "HeroUI design system, shadcn/ui abstraction",			description: "Beautifully designed components for your next application.",		},	},	ar: {		dir: "rtl",		values: {			title: "herocn",			subtitle: "نظام تصميم HeroUI، تجريد shadcn/ui",			description: "مكونات مصممة بشكل جميل لتطبيقك القادم.",		},	},	he: {		dir: "rtl",		values: {			title: "herocn",			subtitle: "מערכת עיצוב HeroUI, הפשטה של shadcn/ui",			description: "רכיבים מעוצבים בצורה יפה לאפליקציה הבאה שלך.",		},	},};
export function SeparatorRtl() {	const { dir, t } = useTranslation(translations, "ar");
	return (		<div className="flex max-w-sm flex-col gap-4 text-sm" dir={dir}>			<div className="flex flex-col gap-1.5">				<div className="font-medium leading-none">{t.title}</div>				<div className="text-muted-foreground">{t.subtitle}</div>			</div>			<Separator />			<div>{t.description}</div>		</div>	);}