@unikit-bridge/ui 0.1.0 → 0.2.0

package/src/components/radio-group.tsx

@@ -0,0 +1,148 @@
+// RadioGroup — shadcn/ui new-york-v4 radio-group을 UniKit 브리지로 이식.
+// 포팅 판단:
+// - radix RadioGroup(Root/Item/Indicator) 제거 — 선택 상태는 React context로
+//   직접 관리하고, 원본의 data-state=checked 셀렉터 대신 선택 점 조건부 렌더.
+// - CircleIcon(lucide) 제거 — 원본 Indicator(fill-primary, size-2=8px)를
+//   동일 크기의 점 View(bg-primary)로 대체(문자 글리프보다 치수가 정확하다).
+// - RadioGroup 컨테이너는 role="radiogroup"(RN 0.88 표준 역할 — 스크린리더가
+//   라디오 묶음으로 발표)을 지정한다(사이클 30 G4 반영).
+// - 원본 컨테이너 "grid gap-3"에서 grid는 웹 전용이라 제거 — View 기본 flex-col
+//   + gap-3으로 세로 배치를 양쪽에서 동일하게 재현.
+// - aria-invalid:* 클래스는 v0.1 API에 invalid 상태가 없어 제외.
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useState,
+} from "react";
+import {
+  Pressable,
+  View,
+  type BridgePressableRef,
+  type BridgeViewRef,
+  type PressableProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+
+import { cn } from "../lib/utils";
+
+// 그룹 상태 — RadioGroup이 공급하고 RadioGroupItem이 소비.
+type RadioGroupContextValue = {
+  /** 현재 선택값(선택 없음 "") */
+  value: string;
+  /** 그룹 차단이 항목에 전파된다 */
+  disabled: boolean;
+  /** 항목 눌림 — 항목이 자기 value를 전달해 그룹이 정리한다 */
+  onItemPress: (value: string) => void;
+};
+
+const RadioGroupContext = createContext<RadioGroupContextValue>({
+  value: "",
+  disabled: false,
+  onItemPress: () => {},
+});
+
+export type RadioGroupProps = ViewProps & {
+  /** 제어형 선택값 */
+  value?: string;
+  /** 비제어형 초기 선택값 */
+  defaultValue?: string;
+  /** 선택 변경 콜백 */
+  onValueChange?: (value: string) => void;
+  /** 그룹 전체 차단 — 항목에 일괄 전파 */
+  disabled?: boolean;
+};
+
+const RadioGroup = forwardRef<BridgeViewRef, RadioGroupProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue = "",
+      onValueChange,
+      disabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    // 제어/비제어 통합 — 라디오는 항상 단일 선택이라 문자열 state면 충분하다.
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : uncontrolled;
+
+    const handleItemPress = (itemValue: string) => {
+      if (!isControlled) setUncontrolled(itemValue);
+      onValueChange?.(itemValue);
+    };
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="radiogroup"
+        className={cn("gap-3", className)}
+        {...props}
+      >
+        <RadioGroupContext.Provider
+          value={{
+            value: selectedValue,
+            disabled,
+            onItemPress: handleItemPress,
+          }}
+        >
+          {children}
+        </RadioGroupContext.Provider>
+      </View>
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+// 터치 타깃 44px 보정: 16px 원 → hitSlop = (44 − 16) / 2 = 14px.
+const HIT_SLOP = 14;
+
+export type RadioGroupItemProps = Omit<
+  PressableProps,
+  "onPress" | "aria-checked"
+> & {
+  /** 이 항목의 값 — 그룹 value와의 일치 여부가 선택 상태가 된다 */
+  value: string;
+};
+
+const RadioGroupItem = forwardRef<BridgePressableRef, RadioGroupItemProps>(
+  ({ className, value, disabled, hitSlop, ...props }, ref) => {
+    const group = useContext(RadioGroupContext);
+    const isChecked = group.value === value;
+    const isDisabled = disabled || group.disabled;
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="radio"
+        aria-checked={isChecked}
+        aria-disabled={isDisabled ? true : undefined}
+        disabled={isDisabled}
+        hitSlop={hitSlop ?? HIT_SLOP}
+        onPress={() => group.onItemPress(value)}
+        className={cn(
+          // 링은 border-input(라이트 1.27:1)이 배경에 묻혀 컨트롤 경계가 안
+          // 보이므로 foreground/50(양 모드 ≥3:1, G4)로 조정.
+          "flex size-4 shrink-0 flex-row items-center justify-center rounded-full border border-foreground/50 web:shadow-xs web:transition-all web:outline-none web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring/50",
+          isDisabled &&
+            "web:pointer-events-none web:cursor-not-allowed opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 선택 점 — 원본 Indicator(fill-primary size-2 = 8px) 대응.
+            선택 시에만 렌더, 항목 테두리는 선택과 무관하게 유지된다. */}
+        {isChecked ? (
+          <View aria-hidden className="size-2 rounded-full bg-primary" />
+        ) : null}
+      </Pressable>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };

package/src/components/separator.tsx

@@ -0,0 +1,50 @@
+// Separator — shadcn/ui new-york-v4 separator 포팅(/tmp/shadcn-ref/src/separator).
+// 포팅 판단:
+// - radix-ui Separator 엔진 제거 — 상호작용이 없는 장식선이므로 Pressable이 아니라
+//   View로 이식하고, 원본의 data-orientation 셀렉터(가로 h-px w-full /
+//   세로 h-full w-px)를 orientation prop 조건부 클래스로 전개한다(토큰 유지).
+// - 접근성: BridgeRole "separator" 계약 사용. radix의 decorative 기본값(true)을
+//   따라 장식용이면 role 없이 aria-hidden으로 은닉하고, decorative={false}일 때만
+//   role="separator"를 노출한다(원본과 같은 의미 구분).
+import { forwardRef } from "react";
+import {
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const separatorVariants = cva("shrink-0 bg-border", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full",
+      vertical: "h-full w-px",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+
+export type SeparatorProps = ViewProps &
+  VariantProps<typeof separatorVariants> & {
+    /** 장식 구분선(기본값)이면 스크린리더에서 은닉, false면 role 노출 */
+    decorative?: boolean;
+  };
+
+const Separator = forwardRef<BridgeViewRef, SeparatorProps>(
+  ({ className, orientation, decorative = true, ...props }, ref) => (
+    <View
+      ref={ref}
+      accessibilityRole={decorative ? undefined : "separator"}
+      aria-hidden={decorative ? true : undefined}
+      className={cn(separatorVariants({ orientation }), className)}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = "Separator";
+
+export { Separator, separatorVariants };

package/src/components/skeleton.tsx

@@ -0,0 +1,36 @@
+// Skeleton — shadcn/ui new-york-v4 skeleton 포팅(/tmp/shadcn-ref/src/skeleton).
+// 포팅 판단:
+// - 원본은 단일 <div className="animate-pulse rounded-md bg-accent"> — 브리지 View
+//   하나로 대응되며 자식 텍스트가 없어 이중 지정 대상도 없다(className 병합만).
+// - animate-pulse는 web: 접두 — uniwind의 keyframes 애니메이션은 미보증이라
+//   네이티브에서는 정적 회색 블록으로 렌더된다(로드맵: 네이티브 펄스 애니메이션).
+import { forwardRef } from "react";
+import {
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// 다크 bg-accent(zinc-800)는 배경 대비 1.34:1로 블록이 거의 안 보인다(G4) —
+// 다크 한정 muted-foreground/60(≥3:1)으로 올린다. 라이트는 감사 통과값 유지.
+const skeletonVariants = cva(
+  "rounded-md bg-accent dark:bg-muted-foreground/60 web:animate-pulse",
+);
+
+export type SkeletonProps = ViewProps;
+
+const Skeleton = forwardRef<BridgeViewRef, SkeletonProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(skeletonVariants(), className)}
+      {...props}
+    />
+  ),
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton, skeletonVariants };

package/src/components/switch.tsx

@@ -0,0 +1,128 @@
+// Switch — shadcn/ui new-york-v4 switch를 UniKit 브리지로 이식.
+// 포팅 판단:
+// - radix Switch(Root/Thumb) 제거 — 토글 상태는 React state(제어/비제어)로 관리.
+// - 원본의 data-state·data-size·group-data 셀렉터 전개 — 크기는 cva size
+//   변형(default/sm)으로, 트랙 배경과 썸 위치는 상태 조건부 클래스로.
+// - 썸 이동은 원본의 translate-x 계산값 대신 트랙 justify-start/end +
+//   px-0.5(안쪽 2px 여백) — transform·calc 없이 양 플랫폼에서 동일한 레이아웃.
+//   이에 따라 썸 미끄러짐 애니메이션(transition-transform)은 재현 불가해 제거.
+// - 이중 지정 원칙(§0.5): 트랙 배경은 Pressable, 썸 배경은 내부 View에 명시.
+import { forwardRef, useState } from "react";
+import {
+  Pressable,
+  View,
+  type BridgePressableRef,
+  type PressableProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// 트랙(Pressable) — 원본 크기 토큰: default 18.4px(h-4.5 근사)·w-8, sm h-3.5·w-6.
+const switchTrackVariants = cva(
+  "flex shrink-0 flex-row items-center rounded-full border border-transparent px-0.5 web:shadow-xs web:transition-all web:outline-none web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring/50",
+  {
+    variants: {
+      size: {
+        default: "h-4.5 w-8",
+        sm: "h-3.5 w-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+// 썸(View) — 원본의 size=default→size-4 · sm→size-3 대응.
+const switchThumbVariants = cva("rounded-full", {
+  variants: {
+    size: {
+      default: "size-4",
+      sm: "size-3",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export type SwitchProps = Omit<PressableProps, "onPress" | "aria-checked"> &
+  VariantProps<typeof switchTrackVariants> & {
+    /** 제어형 토글 상태(지정 시 내부 state를 대체) */
+    checked?: boolean;
+    /** 비제어형 초기 토글 상태 */
+    defaultChecked?: boolean;
+    /** 토글 전환 콜백 */
+    onCheckedChange?: (checked: boolean) => void;
+  };
+
+// 터치 타깃 44px 보정: default 트랙 18.4px → 13px, sm 14px → 15px.
+const HIT_SLOP = { default: 13, sm: 15 } as const;
+
+const Switch = forwardRef<BridgePressableRef, SwitchProps>(
+  (
+    {
+      className,
+      checked,
+      defaultChecked = false,
+      onCheckedChange,
+      disabled,
+      size,
+      hitSlop,
+      ...props
+    },
+    ref,
+  ) => {
+    // 제어/비제어 통합 — 자식 없음(원본과 동일하게 트랙+썸만 렌더).
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : uncontrolled;
+    const resolvedSize = size ?? "default";
+
+    const handlePress = () => {
+      const next = !isChecked;
+      if (!isControlled) setUncontrolled(next);
+      onCheckedChange?.(next);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="switch"
+        aria-checked={isChecked}
+        aria-disabled={disabled ? true : undefined}
+        disabled={disabled}
+        hitSlop={hitSlop ?? HIT_SLOP[resolvedSize]}
+        onPress={handlePress}
+        className={cn(
+          switchTrackVariants({ size }),
+          // 원본 상태 셀렉터(checked→bg-primary / unchecked→bg-input) 전개 —
+          // 썸 이동도 같은 조건의 justify-start/end로 표현.
+          // 꺼짐 트랙은 bg-input(라이트 1.27:1·다크 1.2:1)이 배경에 묻혀
+          // "꺼짐" 상태를 오독시켜 foreground/50(양 모드 ≥3:1, G4)로 조정.
+          isChecked
+            ? "justify-end bg-primary"
+            : "justify-start bg-foreground/50",
+          disabled && "web:pointer-events-none web:cursor-not-allowed opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 썸 — 장식 요소(aria-hidden). 다크 모드 썸 색은 상태별로 다르다(원본 준수). */}
+        <View
+          aria-hidden
+          className={cn(
+            switchThumbVariants({ size }),
+            isChecked
+              ? "bg-background dark:bg-primary-foreground"
+              : "bg-background dark:bg-foreground",
+          )}
+        />
+      </Pressable>
+    );
+  },
+);
+Switch.displayName = "Switch";
+
+export { Switch, switchTrackVariants, switchThumbVariants };

package/src/components/table.tsx

@@ -0,0 +1,193 @@
+// Table — shadcn/ui new-york-v4 table 포팅(/tmp/shadcn-ref/src/table). 8종 export.
+// 포팅 판단:
+// - 원본은 <table>/<thead>/<tr>/<th> 등 표 요소 + 자손 셀렉터([&_tr]:border-b,
+//   [&_tr:last-child]:border-0, has-aria-expanded:...)로 스타일링한다. 브리지에는
+//   표 요소가 없으므로 전부 View(div)로 이식하되 시각 토큰(테두리·배경·여백·높이)은
+//   유지하고, 행/셀 배치는 flex(행=flex-row, 셀=flex-1 균등 폭)로 재구성했다.
+//   셀 폭 균등(flex-1)은 원본 table 자동 배치와 다르다 — 사용처에서 셀 className으로
+//   조절한다.
+// - BridgeRole에 table/row/cell/columnheader가 없어 role 지정은 미지원.
+//   제목셀(TableHead)은 시각(굵기·높이)으로만 구분한다. 스크린리더에 표 의미를
+//   전달하지 못하는 한계는 로드맵 항목으로 기록한다.
+// - 셀(TableHead·TableCell)의 children은 문자열을 권장한다 — 내부 Text가 색·
+//   타이포를 담당한다(이중 지정). 사용자 정의 콘텐츠는 직접 Text를 넣어야 한다.
+// - 자손 셀렉터 미지원으로 소실되는 원본 토큰: TableHeader의 [&_tr]:border-b는
+//   TableRow 자체 border-b로 흡수, TableBody의 마지막 행 보더 제거(:last-child)와
+//   TableRow의 data-state=selected·has-aria-expanded 배경은 미지원.
+//   whitespace-nowrap·overflow-x-auto·transition·hover는 web: 접두.
+//   caption-bottom은 flex-col DOM 순서 배치로 대체(캡션을 마지막에 넣으면 하단).
+import { createContext, forwardRef, useContext } from "react";
+import {
+  Text,
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// 가로 스크롤 컨테이너(원본 table-container div)
+// 표 구역 context — 푸터 여부를 셀 Text로 전달한다(alert.tsx의 variant context
+// 와 동일 패턴). 컨테이너 font-medium은 웹에서만 텍스트로 상속되고 네이티브에서는
+// 무시되는 비대칭이라 이중 지정 원칙대로 내부 Text에 내린다(사소 4).
+const TableSectionContext = createContext<"body" | "footer">("body");
+
+const tableContainerVariants = cva("relative w-full web:overflow-x-auto");
+// 표 본체 — 행이 쌓이는 열(원본 <table>의 w-full)
+const tableVariants = cva("w-full flex-col");
+const tableHeaderVariants = cva("flex-col");
+const tableBodyVariants = cva("flex-col");
+const tableFooterVariants = cva("flex-col border-t bg-muted/50");
+const tableRowVariants = cva(
+  "flex-row border-b web:transition-colors web:hover:bg-muted/50",
+);
+const tableHeadVariants = cva("h-10 flex-1 items-center px-2 text-left");
+const tableHeadTextVariants = cva(
+  "font-sans text-sm font-medium text-foreground web:whitespace-nowrap",
+);
+const tableCellVariants = cva("flex-1 items-center p-2 text-left");
+const tableCellTextVariants = cva(
+  "font-sans text-sm text-foreground web:whitespace-nowrap",
+);
+const tableCaptionVariants = cva("w-full mt-4");
+const tableCaptionTextVariants = cva("font-sans text-sm text-muted-foreground");
+
+export type TableProps = ViewProps;
+export type TableHeaderProps = ViewProps;
+export type TableBodyProps = ViewProps;
+export type TableFooterProps = ViewProps;
+export type TableRowProps = ViewProps;
+export type TableHeadProps = ViewProps;
+export type TableCellProps = ViewProps;
+export type TableCaptionProps = ViewProps;
+
+// 원본과 같이 ref·className·props는 컨테이너가 아니라 표 본체(원본 <table>)에.
+const Table = forwardRef<BridgeViewRef, TableProps>(
+  ({ className, ...props }, ref) => (
+    <View className={cn(tableContainerVariants())}>
+      <View
+        ref={ref}
+        className={cn(tableVariants(), className)}
+        {...props}
+      />
+    </View>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = forwardRef<BridgeViewRef, TableHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(tableHeaderVariants(), className)}
+      {...props}
+    />
+  ),
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = forwardRef<BridgeViewRef, TableBodyProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(tableBodyVariants(), className)}
+      {...props}
+    />
+  ),
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = forwardRef<BridgeViewRef, TableFooterProps>(
+  ({ className, children, ...props }, ref) => (
+    <TableSectionContext.Provider value="footer">
+      <View
+        ref={ref}
+        className={cn(tableFooterVariants(), className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </TableSectionContext.Provider>
+  ),
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = forwardRef<BridgeViewRef, TableRowProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(tableRowVariants(), className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = forwardRef<BridgeViewRef, TableHeadProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(tableHeadVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(tableHeadTextVariants())}>{children}</Text>
+    </View>
+  ),
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = forwardRef<BridgeViewRef, TableCellProps>(
+  ({ className, children, ...props }, ref) => {
+    // 푸터 안 셀은 굵게 — 원본 font-medium 상속을 이중 지정으로 재현(사소 4).
+    const inFooter = useContext(TableSectionContext) === "footer";
+    return (
+      <View
+        ref={ref}
+        className={cn(tableCellVariants(), className)}
+        {...props}
+      >
+        <Text className={cn(tableCellTextVariants(), inFooter && "font-medium")}>
+          {children}
+        </Text>
+      </View>
+    );
+  },
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = forwardRef<BridgeViewRef, TableCaptionProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(tableCaptionVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(tableCaptionTextVariants())}>{children}</Text>
+    </View>
+  ),
+);
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  tableContainerVariants,
+  tableVariants,
+  tableHeaderVariants,
+  tableBodyVariants,
+  tableFooterVariants,
+  tableRowVariants,
+  tableHeadVariants,
+  tableHeadTextVariants,
+  tableCellVariants,
+  tableCellTextVariants,
+  tableCaptionVariants,
+  tableCaptionTextVariants,
+};