@unikit-bridge/ui 0.1.0 → 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/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 };

package/src/components/collapsible.tsx

@@ -0,0 +1,120 @@
+// Collapsible — shadcn/ui(new-york-v4) collapsible.tsx 유니버설 포팅 (사이클 30, T-3b).
+// 원본: shadcn-ref/src/collapsible/collapsible.tsx — radix Collapsible을 그대로
+// 재노출하는 무스타일 래퍼라 이식 결과에도 스타일 토큰이 없다. radix 의존 제거의
+// 가장 단순한 예로, 전개 상태(open)를 React state + context로 직접 관리한다.
+// (accordion.tsx가 같은 구조의 다중 항목 확장이다.)
+//
+// 포팅 판단(원본 대비 차이):
+// - 애니메이션(radix data-state 기반 CSS 전이) 미지원 — 열림/닫힘 즉시 전환.
+// - 콘텐츠는 open 시에만 마운트한다(마운트/언마운트 방식).
+// - Trigger는 Pressable(웹 button) — 네이티브 Pressable(View 기반)에 문자열
+//   children을 직접 두면 RN 런타임이 크래시하므로("Text strings must be
+//   rendered within a <Text> component") children을 내부 Text로 감싼다(B-1).
+//   문자열 라벨 children 권장(AccordionTrigger와 동일 구조).
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type BridgePressableRef,
+  type BridgeViewRef,
+  type PressableProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+
+type CollapsibleContextValue = {
+  open: boolean;
+  toggle: () => void;
+};
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsibleContext(component: string): CollapsibleContextValue {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<${component}>는 <Collapsible> 안에서 사용해야 합니다.`);
+  }
+  return ctx;
+}
+
+export type CollapsibleProps = ViewProps & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+const Collapsible = forwardRef<BridgeViewRef, CollapsibleProps>(
+  ({ open, defaultOpen = false, onOpenChange, children, ...props }, ref) => {
+    // 비제어 상태 — 제어(open 지정)면 무시된다.
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = open ?? internalOpen;
+    const setOpen = (next: boolean) => {
+      if (open === undefined) setInternalOpen(next);
+      if (next !== isOpen) onOpenChange?.(next);
+    };
+    return (
+      <CollapsibleContext.Provider
+        value={{ open: isOpen, toggle: () => setOpen(!isOpen) }}
+      >
+        <View ref={ref} {...props}>
+          {children}
+        </View>
+      </CollapsibleContext.Provider>
+    );
+  },
+);
+Collapsible.displayName = "Collapsible";
+
+export type CollapsibleTriggerProps = PressableProps & {
+  // 함수형 children은 내부 Text 래핑 구조와 양립하지 않아 문자열 children 권장.
+  children?: ReactNode;
+};
+
+const CollapsibleTrigger = forwardRef<
+  BridgePressableRef,
+  CollapsibleTriggerProps
+>(({ children, onPress, ...props }, ref) => {
+  const { open, toggle } = useCollapsibleContext("CollapsibleTrigger");
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="button"
+      aria-expanded={open}
+      onPress={() => {
+        toggle();
+        onPress?.();
+      }}
+      {...props}
+    >
+      {/* 이중 지정: 전경색·타이포그래피는 내부 Text에(네이티브 색 상속 불가) */}
+      <Text className="font-sans text-sm font-medium text-foreground">
+        {children}
+      </Text>
+    </Pressable>
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+
+export type CollapsibleContentProps = ViewProps;
+
+const CollapsibleContent = forwardRef<BridgeViewRef, CollapsibleContentProps>(
+  ({ children, ...props }, ref) => {
+    const { open } = useCollapsibleContext("CollapsibleContent");
+    // open 시에만 렌더 — 마운트/언마운트 방식(애니메이션 없음).
+    if (!open) return null;
+    return (
+      <View ref={ref} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };