sh-ui-cli 0.48.0 → 0.50.0

package/data/registry/react/components/separator/index.vanilla-extract.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { byKey, separator, separatorHorizontal, separatorVertical } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  orientation?: SeparatorOrientation;
+  /**
+   * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
+   * 스크린리더에도 섹션 구분을 알려야 하면 false.
+   */
+  decorative?: boolean;
+}
+
+/**
+ * 시각적 구분선. 가로(height=1px) / 세로(width=1px).
+ *
+ * 의미 있는 구분에는 `decorative={false}`로 role=separator가 붙고, 그렇지 않으면
+ * aria-hidden 처리되어 보조 기술에 노출되지 않는다.
+ */
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  function Separator(
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) {
+    return (
+      <div
+        ref={ref}
+        role={decorative ? undefined : "separator"}
+        aria-orientation={decorative ? undefined : orientation}
+        aria-hidden={decorative || undefined}
+        data-orientation={orientation}
+        className={cn(
+          separator,
+          byKey[`separator--${orientation}`],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Separator.displayName = "Separator";

package/data/registry/react/components/separator/styles.css.ts

@@ -0,0 +1,24 @@
+import { style } from "@vanilla-extract/css";
+
+export const separator = style({
+  background: "var(--border)",
+  flexShrink: 0,
+});
+
+export const separatorHorizontal = style({
+  width: "100%",
+  height: "1px",
+});
+
+export const separatorVertical = style({
+  width: "1px",
+  height: "100%",
+  alignSelf: "stretch",
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "separator": separator,
+  "separator--horizontal": separatorHorizontal,
+  "separator--vertical": separatorVertical,
+};