@unikit-bridge/ui 0.0.0-stage → 0.2.0

package/src/components/breadcrumb.tsx

@@ -0,0 +1,173 @@
+// Breadcrumb — shadcn/ui new-york-v4 breadcrumb 포팅(/tmp/shadcn-ref/src/breadcrumb).
+// 7종 export. radix Slot·lucide 아이콘 제거.
+// 포팅 판단:
+// - 아이콘 금지 규칙에 따라 ChevronRight → "›", MoreHorizontal → "⋯" 글리프 Text.
+// - BreadcrumbLink는 Pressable role="link" + onPress(무인자). radix Slot(asChild)은
+//   미지원 — 사용처 라우팅은 onPress에서 호출한다.
+// - BreadcrumbPage의 aria-current는 브리지 계약에 없어 현재 페이지를 시각(색·
+//   굵기)으로만 표현한다. 원본의 role="link"·aria-disabled도 Text 계약에 없어
+//   생략(활성 아닌 링크로 오독 방지).
+// - 원본 <nav>의 내재 role(navigation)도 BridgeRole에 없어 미지원 — 라벨만
+//   유지. 스크린리더 전용(sr-only) 보조 텍스트는 웹 전용 클래스라 생략하되,
+//   원본처럼 장식 요소(Separator·Ellipsis)에는 aria-hidden을 지정한다.
+// - 웹 전용 토큰(transition·hover·break-words·sm: 반응형)은 web: 접두.
+import { forwardRef } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type BridgePressableRef,
+  type BridgeTextRef,
+  type BridgeViewRef,
+  type PressableProps,
+  type TextProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const breadcrumbListVariants = cva(
+  "flex-row flex-wrap items-center gap-1.5 web:break-words web:sm:gap-2.5",
+);
+const breadcrumbItemVariants = cva("flex-row items-center gap-1.5");
+
+// 링크 컨테이너(Pressable) — 투명 배경·무테두리, 전경색은 내부 Text에.
+const breadcrumbLinkVariants = cva("flex-row items-center");
+const breadcrumbLinkTextVariants = cva(
+  "font-sans text-sm text-muted-foreground web:transition-colors web:hover:text-foreground active:text-foreground",
+);
+
+// 현재 페이지 — 원본 font-normal text-foreground(시각적 구분만).
+const breadcrumbPageVariants = cva(
+  "font-sans text-sm font-normal text-foreground",
+);
+
+const breadcrumbSeparatorVariants = cva("flex-row items-center");
+const breadcrumbSeparatorTextVariants = cva(
+  "font-sans text-sm leading-none text-muted-foreground",
+);
+const breadcrumbEllipsisVariants = cva(
+  "h-9 w-9 flex-row items-center justify-center",
+);
+const breadcrumbEllipsisTextVariants = cva(
+  "font-sans text-base leading-none text-muted-foreground",
+);
+
+export type BreadcrumbProps = ViewProps;
+export type BreadcrumbListProps = ViewProps;
+export type BreadcrumbItemProps = ViewProps;
+export type BreadcrumbLinkProps = PressableProps;
+export type BreadcrumbPageProps = TextProps;
+export type BreadcrumbSeparatorProps = ViewProps;
+export type BreadcrumbEllipsisProps = ViewProps;
+
+const Breadcrumb = forwardRef<BridgeViewRef, BreadcrumbProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      accessibilityLabel="breadcrumb"
+      className={className}
+      {...props}
+    />
+  ),
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = forwardRef<BridgeViewRef, BreadcrumbListProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(breadcrumbListVariants(), className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = forwardRef<BridgeViewRef, BreadcrumbItemProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(breadcrumbItemVariants(), className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = forwardRef<BridgePressableRef, BreadcrumbLinkProps>(
+  ({ className, children, ...props }, ref) => (
+    <Pressable
+      ref={ref}
+      accessibilityRole="link"
+      className={cn(breadcrumbLinkVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(breadcrumbLinkTextVariants())}>{children}</Text>
+    </Pressable>
+  ),
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = forwardRef<BridgeTextRef, BreadcrumbPageProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(breadcrumbPageVariants(), className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+// 구분 글리프 — children 미지정 시 기본 "›"(원본 ChevronRight 대체).
+const BreadcrumbSeparator = forwardRef<BridgeViewRef, BreadcrumbSeparatorProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      aria-hidden
+      className={cn(breadcrumbSeparatorVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(breadcrumbSeparatorTextVariants())}>
+        {children ?? "›"}
+      </Text>
+    </View>
+  ),
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+// 생략 글리프 — "⋯"(원본 MoreHorizontal 대체).
+const BreadcrumbEllipsis = forwardRef<BridgeViewRef, BreadcrumbEllipsisProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      aria-hidden
+      className={cn(breadcrumbEllipsisVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(breadcrumbEllipsisTextVariants())}>⋯</Text>
+    </View>
+  ),
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  breadcrumbListVariants,
+  breadcrumbItemVariants,
+  breadcrumbLinkVariants,
+  breadcrumbLinkTextVariants,
+  breadcrumbPageVariants,
+  breadcrumbSeparatorVariants,
+  breadcrumbSeparatorTextVariants,
+  breadcrumbEllipsisVariants,
+  breadcrumbEllipsisTextVariants,
+};

package/src/components/button-group.tsx

@@ -0,0 +1,166 @@
+// ButtonGroup — shadcn/ui new-york-v4 button-group을 UniKit 유니버설로 이식.
+//
+// 포팅 판단(자식 셀렉터 제거):
+// - 원본의 붙임(attach) 처리는 자식 셀렉터([&>*:not(:first-child)]:
+//   rounded-l-none 등)로 동작한다. 네이티브에 자식 셀렉터가 없으므로
+//   ButtonGroup이 Children.map으로 각 자식 요소에 위치 클래스(첫/끝 모서리
+//   정리·테두리 중복 제거·포커스 z-순서)를 cloneElement로 주입한다 —
+//   CSS 셀렉터 없이 양쪽에서 동일하게 동작한다(Button 등 기존 컴포넌트의
+//   className 병합 규칙(twMerge)과 맞물려 나중 값이 이긴다).
+// - data-slot 기반 중첩 그룹 간격 토큰(gap-2)과 select-trigger
+//   관련 토큰은 data-slot 없이 표현 불가 → 제거.
+// - ButtonGroupText의 asChild(radix Slot) 제거 — View+Text 구조 고정
+//   (이중 지정: 전경색은 내부 Text에).
+// - ButtonGroupSeparator가 감싸던 Separator는 인라인 View(bg-border)로 대리
+//   (신규 파일 6종 제한 — separator.tsx 생성 불가).
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import {
+  Text,
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// 그룹 뼈대 — 원본의 방향 변형. 모서리 붙임 토큰은 아래 주입 로직으로 이동.
+// w-fit은 uniwind 미지원 — self-start 치환으로 양쪽 플랫폼 내용 폭을 맞춘다(M-2).
+const buttonGroupVariants = cva("flex self-start items-stretch", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+type ButtonGroupOrientation = "horizontal" | "vertical";
+
+// 위치별 붙임 클래스 — 원본 자식 셀렉터의 치환.
+// 첫 자식은 시작 모서리를, 끝 자식은 끝 모서리를 유지하고 나머지 모서리를
+// 없애 붙은 모양을 만든다. 이웃 테두리 중복(border-l-0/border-t-0)도 정리.
+function buttonGroupAttachClasses(
+  index: number,
+  total: number,
+  orientation: ButtonGroupOrientation,
+): string {
+  const isFirst = index === 0;
+  const isLast = index === total - 1;
+  const horizontal = orientation === "horizontal";
+  return cn(
+    // 포커스 받은 자식이 위로 — 원본 [&>*]:focus-visible:relative/z-10 치환
+    "web:focus-visible:relative web:focus-visible:z-10",
+    !isFirst &&
+      (horizontal ? "rounded-l-none border-l-0" : "rounded-t-none border-t-0"),
+    !isLast && (horizontal ? "rounded-r-none" : "rounded-b-none"),
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ButtonGroup — 버튼 무리 컨테이너. 자식에 붙임 클래스를 주입한다.
+// ---------------------------------------------------------------------------
+export type ButtonGroupProps = ViewProps &
+  VariantProps<typeof buttonGroupVariants> & {
+    children?: ReactNode;
+  };
+
+const ButtonGroup = forwardRef<BridgeViewRef, ButtonGroupProps>(
+  ({ className, orientation, children, ...props }, ref) => {
+    const resolvedOrientation: ButtonGroupOrientation =
+      orientation ?? "horizontal";
+    const items = Children.toArray(children);
+    const attached = items.map((child, index) => {
+      // 문자열 등 비(非)요소 자식은 그대로 둔다(Children.toArray가 null·
+      // boolean은 이미 걷어냈다). React 19 타입은 unknown props로 좁히므로
+      // className을 받는 요소로 단언해 cloneElement한다.
+      if (!isValidElement(child)) {
+        return child;
+      }
+      const typedChild = child as ReactElement<{ className?: string }>;
+      return cloneElement(typedChild, {
+        className: cn(
+          typedChild.props.className,
+          buttonGroupAttachClasses(index, items.length, resolvedOrientation),
+        ),
+      });
+    });
+    return (
+      <View
+        ref={ref}
+        className={cn(buttonGroupVariants({ orientation }), className)}
+        {...props}
+      >
+        {attached}
+      </View>
+    );
+  },
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// ---------------------------------------------------------------------------
+// ButtonGroupText — 그룹 안 텍스트 조각(예: 승수 "×2"). View+Text 구조.
+// ---------------------------------------------------------------------------
+export type ButtonGroupTextProps = ViewProps & {
+  children?: ReactNode;
+};
+
+const ButtonGroupText = forwardRef<BridgeViewRef, ButtonGroupTextProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "flex items-center gap-2 rounded-md border border-border bg-muted px-4 web:shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      {/* 이중 지정 원칙: 배경·테두리는 View, 전경색은 내부 Text에 */}
+      <Text className="font-sans text-sm font-medium text-foreground">
+        {children}
+      </Text>
+    </View>
+  ),
+);
+ButtonGroupText.displayName = "ButtonGroupText";
+
+// ---------------------------------------------------------------------------
+// ButtonGroupSeparator — 그룹 안 구분선. 기본 vertical(가로 무리의 세로 줄).
+// ---------------------------------------------------------------------------
+export type ButtonGroupSeparatorProps = ViewProps & {
+  /** 구분선 방향 — 원본 기본값 vertical 유지(self-stretch로 교차축 채움) */
+  orientation?: "horizontal" | "vertical";
+};
+
+const ButtonGroupSeparator = forwardRef<
+  BridgeViewRef,
+  ButtonGroupSeparatorProps
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "self-stretch bg-border",
+      orientation === "vertical" ? "w-px" : "h-px w-full",
+      className,
+    )}
+    {...props}
+  />
+));
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

package/src/components/button.tsx

@@ -0,0 +1,106 @@
+// Button — docs/sdd/02-design.md v2 §3.1 그대로.
+// 이중 지정 원칙(§0.5): 배경·테두리는 Pressable, 전경색·밑줄은 내부 Text에 명시.
+// (DOM 브리지에서도 span은 부모 상속이 막히므로 전경색 명시가 양쪽에 필요)
+import { forwardRef, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  type BridgePressableRef,
+  type PressableProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// Pressable(컨테이너) — base + focus-visible(전역)은 §3.1 표의 문자열을 그대로 사용.
+const buttonVariants = cva(
+  "flex flex-row items-center justify-center gap-2 rounded-md web:select-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary web:hover:bg-primary/90 active:bg-primary/90",
+        secondary: "bg-secondary web:hover:bg-secondary/80 active:bg-secondary/80",
+        destructive:
+          "bg-destructive web:hover:bg-destructive/90 active:bg-destructive/90",
+        outline:
+          "border border-input bg-background web:hover:bg-accent active:bg-accent",
+        ghost: "web:hover:bg-accent active:bg-accent",
+        link: "",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+// 내부 Text — 변형별 전경색. active:* 눌림 전파 — 네이티브는 uniwind(Pressable 상태), 웹은 <button>의 :active.
+const buttonTextVariants = cva(
+  "font-sans text-sm font-medium web:whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground",
+        secondary: "text-secondary-foreground",
+        destructive: "text-destructive-foreground",
+        outline: "text-foreground active:text-accent-foreground",
+        ghost: "text-foreground active:text-accent-foreground",
+        link: "text-primary underline underline-offset-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 터치 타깃 44px 보정(§3.1): hitSlop = max(0, (44 − 시각높이px) / 2) — 각 방향 px.
+const HIT_SLOP = {
+  sm: 4,
+  default: 2,
+  lg: 0,
+  icon: 2,
+} as const;
+
+// Pressable의 함수형 children((state) => ReactNode)은 내부 Text 래핑 구조(§3.1)와
+// 양립하지 않으므로 children은 ReactNode로 한정한다(v0.1은 문자열 children 사용).
+export type ButtonProps = PressableProps &
+  VariantProps<typeof buttonVariants> & {
+    children?: ReactNode;
+  };
+
+const Button = forwardRef<BridgePressableRef, ButtonProps>(
+  (
+    { className, variant, size, disabled, hitSlop, children, ...props },
+    ref,
+  ) => {
+    const resolvedSize = size ?? "default";
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        disabled={disabled}
+        aria-disabled={disabled ? true : undefined}
+        hitSlop={hitSlop ?? HIT_SLOP[resolvedSize]}
+        className={cn(
+          buttonVariants({ variant, size }),
+          disabled && "web:pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <Text className={cn(buttonTextVariants({ variant }))}>{children}</Text>
+      </Pressable>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants, buttonTextVariants };

package/src/components/card.tsx

@@ -0,0 +1,112 @@
+// Card — docs/sdd/02-design.md v2 §3.2 그대로. 하위 컴포넌트 5종 포함 총 6종 export.
+// Card의 text-card-foreground는 §0.5(상속 차단)로 자식 Text에 닿지 않아 클래스에서 제외됨.
+// CardContent 안의 본문 텍스트는 사용처에서 색·폰트를 명시한다(§1.2 표기 규칙).
+import { forwardRef } from "react";
+import {
+  Text,
+  View,
+  type BridgeTextRef,
+  type BridgeViewRef,
+  type TextProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const cardVariants = cva("rounded-xl border border-border bg-card shadow-sm");
+const cardHeaderVariants = cva("flex flex-col gap-1.5 p-6");
+const cardTitleVariants = cva(
+  "font-sans text-foreground text-2xl web:tracking-tight font-semibold",
+);
+const cardDescriptionVariants = cva("font-sans text-sm text-muted-foreground");
+const cardContentVariants = cva("p-6 pt-0");
+const cardFooterVariants = cva("flex-row items-center gap-2 p-6 pt-0");
+
+export type CardProps = ViewProps;
+export type CardHeaderProps = ViewProps;
+export type CardTitleProps = TextProps;
+export type CardDescriptionProps = TextProps;
+export type CardContentProps = ViewProps;
+export type CardFooterProps = ViewProps;
+
+const Card = forwardRef<BridgeViewRef, CardProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardVariants(), className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<BridgeViewRef, CardHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardHeaderVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<BridgeTextRef, CardTitleProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(cardTitleVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<BridgeTextRef, CardDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(cardDescriptionVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<BridgeViewRef, CardContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardContentVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<BridgeViewRef, CardFooterProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(cardFooterVariants(), className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+};

package/src/components/checkbox.tsx

@@ -0,0 +1,94 @@
+// Checkbox — shadcn/ui new-york-v4 checkbox를 UniKit 브리지로 이식.
+// 포팅 판단:
+// - radix-ui Checkbox(Root/Indicator) 제거 — 체크 상태는 React state(제어/비제어)로
+//   직접 관리하고, 원본의 data-state=checked 셀렉터는 조건부 클래스 문자열로 전개
+//   (네이티브에 data 속성이 없어 상태 셀렉터를 쓸 수 없다).
+// - CheckIcon(lucide) 제거 — ✓ 글리프를 Text children으로 대체(새 의존성 금지).
+// - aria-invalid:* 클래스는 v0.1 API에 invalid 상태가 없어 제외.
+// - 이중 지정 원칙(§0.5): 체크 배경·테두리는 Pressable, 글리프 색은 내부 Text에 명시.
+import { forwardRef, useState } from "react";
+import {
+  Pressable,
+  Text,
+  type BridgePressableRef,
+  type PressableProps,
+} from "@unikit-bridge/ui/primitives";
+
+import { cn } from "../lib/utils";
+
+// 원본 크기 토큰 유지: size-4(16px) 박스·rounded-sm(UniKit 토큰 --radius-sm=4px)·border-input,
+// 체크 시 border/bg-primary.
+// 라벨 없음 — 라벨은 소비자가 Label과 조합한다(checkbox 원본과 동일한 계약).
+export type CheckboxProps = Omit<PressableProps, "onPress" | "aria-checked"> & {
+  /** 제어형 체크 상태(지정 시 내부 state를 대체) */
+  checked?: boolean;
+  /** 비제어형 초기 체크 상태 */
+  defaultChecked?: boolean;
+  /** 체크 전환 콜백 — indeterminate 상태에서 누르면 false가 전달된다 */
+  onCheckedChange?: (checked: boolean) => void;
+  /** 중간 상태 — aria-checked="mixed" + − 글리프(shadcn checked="indeterminate" 대응) */
+  indeterminate?: boolean;
+};
+
+// 터치 타깃 44px 보정: 16px 박스 → hitSlop = (44 − 16) / 2 = 14px.
+const HIT_SLOP = 14;
+
+const Checkbox = forwardRef<BridgePressableRef, CheckboxProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      indeterminate = false,
+      disabled,
+      hitSlop,
+      ...props
+    },
+    ref,
+  ) => {
+    // 제어(checked 지정)/비제어(내부 state) 통합 — 웹·네이티브 한 벌 로직.
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : uncontrolled;
+
+    const handlePress = () => {
+      const next = !isChecked;
+      if (!isControlled) setUncontrolled(next);
+      onCheckedChange?.(next);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="checkbox"
+        aria-checked={indeterminate ? "mixed" : isChecked}
+        aria-disabled={disabled ? true : undefined}
+        disabled={disabled}
+        hitSlop={hitSlop ?? HIT_SLOP}
+        onPress={handlePress}
+        className={cn(
+          "flex size-4 shrink-0 flex-row items-center justify-center rounded-sm border web:shadow-xs web:transition-shadow web:outline-none web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring/50",
+          // 미체크 링은 border-input(라이트 1.27:1)이 배경에 묻혀 경계가 안
+          // 보이므로 foreground/50(양 모드 ≥3:1, G4)로 조정.
+          indeterminate || isChecked
+            ? "border-primary bg-primary"
+            : "border-foreground/50 dark:bg-input/30",
+          disabled && "web:pointer-events-none web:cursor-not-allowed opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 글리프 — 체크 ✓ / 중간 −. 원본 Indicator처럼 상태일 때만 렌더. */}
+        {indeterminate || isChecked ? (
+          <Text className="font-sans text-sm font-bold leading-none text-primary-foreground">
+            {indeterminate ? "−" : "✓"}
+          </Text>
+        ) : null}
+      </Pressable>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };