sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,152 +0,0 @@
-import * as React from "react";
-import { byKey, breadcrumb, breadcrumb__list, breadcrumb__item, breadcrumb__link, breadcrumb__page, breadcrumb__separator, breadcrumb__ellipsis, breadcrumbEllipsisSr } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-/* ───────── Breadcrumb (nav) ─────────
- * 시맨틱: <nav aria-label="Breadcrumb"><ol>...</ol></nav>.
- */
-
-/**
- * 현재 페이지의 위치를 사이트 계층 위에서 보여주는 내비게이션. 항상 `BreadcrumbList`로
- * 감싸고, 마지막 항목은 링크 대신 `BreadcrumbPage`로 표기해 현재 위치를 알린다.
- */
-export const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement>
->(function Breadcrumb({ className, ...props }, ref) {
-  return (
-    <nav
-      ref={ref}
-      aria-label="Breadcrumb"
-      className={cn(breadcrumb, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── List (ol) ───────── */
-
-/** 항목들을 담는 정렬 리스트(`<ol>`). Breadcrumb 직계 자식으로 사용. */
-export const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.OlHTMLAttributes<HTMLOListElement>
->(function BreadcrumbList({ className, ...props }, ref) {
-  return (
-    <ol
-      ref={ref}
-      className={cn(breadcrumb__list, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Item (li) ───────── */
-
-/** 한 단계의 항목(`<li>`). 안에 `BreadcrumbLink` 또는 `BreadcrumbPage`를 둔다. */
-export const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.LiHTMLAttributes<HTMLLIElement>
->(function BreadcrumbItem({ className, ...props }, ref) {
-  return (
-    <li
-      ref={ref}
-      className={cn(breadcrumb__item, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Link ───────── */
-
-/** 상위 단계로 이동하는 링크. 라우터 사용 시 `asChild` 패턴 대신 직접 `<a>` 속성으로 전달. */
-export const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
->(function BreadcrumbLink({ className, ...props }, ref) {
-  return (
-    <a
-      ref={ref}
-      className={cn(breadcrumb__link, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Page (현재 위치 — 링크 아님) ───────── */
-
-/** 마지막(현재) 항목. 링크가 아니므로 `aria-current="page"`가 자동 부여된다. */
-export const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(function BreadcrumbPage({ className, ...props }, ref) {
-  return (
-    <span
-      ref={ref}
-      role="link"
-      aria-current="page"
-      aria-disabled="true"
-      className={cn(breadcrumb__page, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Separator ───────── */
-
-/** 항목 사이 구분자. 기본은 `>` 아이콘이며 children으로 교체 가능. 스크린리더에서는 무시된다. */
-export const BreadcrumbSeparator = React.forwardRef<
-  HTMLLIElement,
-  React.LiHTMLAttributes<HTMLLIElement>
->(function BreadcrumbSeparator({ className, children, ...props }, ref) {
-  return (
-    <li
-      ref={ref}
-      role="presentation"
-      aria-hidden="true"
-      className={cn(breadcrumb__separator, className)}
-      {...props}
-    >
-      {children ?? <ChevronRightIcon />}
-    </li>
-  );
-});
-
-/* ───────── Ellipsis — 중간 항목 축약 ───────── */
-
-/** 깊은 경로에서 중간 항목들을 축약하는 점 3개 표시. 클릭 가능한 전체 경로 메뉴와 함께 쓰면 유용. */
-export const BreadcrumbEllipsis = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(function BreadcrumbEllipsis({ className, ...props }, ref) {
-  return (
-    <span
-      ref={ref}
-      role="presentation"
-      aria-hidden="true"
-      className={cn(breadcrumb__ellipsis, className)}
-      {...props}
-    >
-      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
-        <circle cx="3" cy="8" r="1.25" />
-        <circle cx="8" cy="8" r="1.25" />
-        <circle cx="13" cy="8" r="1.25" />
-      </svg>
-      <span className={breadcrumbEllipsisSr}>더 보기</span>
-    </span>
-  );
-});
-
-function ChevronRightIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
-      <path
-        d="M6 4l4 4-4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}

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

@@ -1,95 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const breadcrumb = style({
-  fontSize: "var(--text-sm)",
-  color: "var(--foreground-muted)",
-});
-
-export const breadcrumb__list = style({
-  display: "flex",
-  alignItems: "center",
-  flexWrap: "wrap",
-  gap: "0.375rem",
-  margin: 0,
-  padding: 0,
-  listStyle: "none",
-});
-
-export const breadcrumb__item = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.375rem",
-  minWidth: 0,
-});
-
-export const breadcrumb__link = style({
-  color: "var(--foreground-muted)",
-  textDecoration: "none",
-  borderRadius: "calc(var(--radius) - 2px)",
-  padding: "0 0.125rem",
-  transition: "color var(--duration-fast)",
-  selectors: {
-    "&:hover": {
-      color: "var(--foreground)",
-      textDecoration: "underline",
-      textUnderlineOffset: "3px",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const breadcrumb__page = style({
-  color: "var(--foreground)",
-  fontWeight: "var(--weight-medium)",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export const breadcrumb__separator = style({
-  display: "inline-flex",
-  alignItems: "center",
-  color: "var(--foreground-muted)",
-  opacity: 0.6,
-});
-
-export const breadcrumb__ellipsis = style({
-  display: "inline-flex",
-  alignItems: "center",
-  width: "1.5rem",
-  height: "1.5rem",
-  justifyContent: "center",
-  color: "var(--foreground-muted)",
-});
-
-export const breadcrumbEllipsisSr = style({
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "breadcrumb": breadcrumb,
-  "breadcrumb__list": breadcrumb__list,
-  "breadcrumb__item": breadcrumb__item,
-  "breadcrumb__link": breadcrumb__link,
-  "breadcrumb__page": breadcrumb__page,
-  "breadcrumb__separator": breadcrumb__separator,
-  "breadcrumb__ellipsis": breadcrumb__ellipsis,
-  "breadcrumb__ellipsis-sr": breadcrumbEllipsisSr,
-};