@unikit-bridge/ui 0.1.0 → 0.2.0

package/src/components/item.tsx

@@ -0,0 +1,243 @@
+// Item — shadcn/ui new-york-v4 item(193줄)을 UniKit 유니버설로 이식.
+//
+// 포팅 판단:
+// - asChild(radix Slot) 제거 — View 렌더 고정.
+// - data-variant/data-size 속성·group/item·group-has-...·[&_svg]·[&>a] 셀렉터
+//   제거(네이티브에 data 속성 없음). 토큰은 cva 변형으로 그대로 보존.
+// - ItemMedia는 순수 컨테이너 — 소비자가 글리프 Text 또는 Image를 넣는다
+//   (이중 지정: 글리프 색·크기는 소비자 Text에 명시). image 변형의
+//   [&_img]:size-full은 내부 Image에 직접 지정하도록 안내로 대체.
+// - line-clamp-2·text-balance는 웹 전용 → web: 접두(네이티브은 전문 전체 표시).
+// - ItemSeparator는 인라인 View(h-px bg-border) — 원본 Separator 대리
+//   (신규 파일 6종 제한).
+// - focus-visible 링·transition은 웹 전용 → web: 접두.
+import { forwardRef } from "react";
+import {
+  Text,
+  View,
+  type BridgeTextRef,
+  type BridgeViewRef,
+  type TextProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// ---------------------------------------------------------------------------
+// ItemGroup — 리스트 묶음(role="list").
+// ---------------------------------------------------------------------------
+export type ItemGroupProps = ViewProps;
+
+const ItemGroup = forwardRef<BridgeViewRef, ItemGroupProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      accessibilityRole="list"
+      className={cn("flex flex-col", className)}
+      {...props}
+    />
+  ),
+);
+ItemGroup.displayName = "ItemGroup";
+
+// ---------------------------------------------------------------------------
+// ItemSeparator — 항목 사이 가로 구분선(원본 Separator 대리).
+// ---------------------------------------------------------------------------
+export type ItemSeparatorProps = ViewProps;
+
+const ItemSeparator = forwardRef<BridgeViewRef, ItemSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("h-px w-full bg-border", className)}
+      {...props}
+    />
+  ),
+);
+ItemSeparator.displayName = "ItemSeparator";
+
+// ---------------------------------------------------------------------------
+// Item — 리스트 아이템 카드(원본 변형·토큰 그대로).
+// ---------------------------------------------------------------------------
+const itemVariants = cva(
+  "flex flex-wrap items-center rounded-md border border-transparent text-sm web:transition-colors web:duration-100 web:outline-none web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ItemProps = ViewProps & VariantProps<typeof itemVariants>;
+
+const Item = forwardRef<BridgeViewRef, ItemProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(itemVariants({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+Item.displayName = "Item";
+
+// ---------------------------------------------------------------------------
+// ItemMedia — 미디어 영역(글리프 Text 또는 Image를 소비자가 선택).
+// ---------------------------------------------------------------------------
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-8 rounded-sm border border-border bg-muted",
+        image: "size-10 overflow-hidden rounded-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type ItemMediaProps = ViewProps &
+  VariantProps<typeof itemMediaVariants>;
+
+const ItemMedia = forwardRef<BridgeViewRef, ItemMediaProps>(
+  ({ className, variant, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(itemMediaVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+ItemMedia.displayName = "ItemMedia";
+
+// ---------------------------------------------------------------------------
+// ItemContent — 제목·설명 본문 영역.
+// ---------------------------------------------------------------------------
+export type ItemContentProps = ViewProps;
+
+const ItemContent = forwardRef<BridgeViewRef, ItemContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex flex-1 flex-col gap-1", className)}
+      {...props}
+    />
+  ),
+);
+ItemContent.displayName = "ItemContent";
+
+// ---------------------------------------------------------------------------
+// ItemTitle — 항목 제목(원본 flex/gap는 Text 레이아웃이라 제거, 토큰만 유지).
+// ---------------------------------------------------------------------------
+export type ItemTitleProps = TextProps;
+
+const ItemTitle = forwardRef<BridgeTextRef, ItemTitleProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "w-fit font-sans text-sm font-medium leading-snug text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ItemTitle.displayName = "ItemTitle";
+
+// ---------------------------------------------------------------------------
+// ItemDescription — 항목 보조 설명.
+// ---------------------------------------------------------------------------
+export type ItemDescriptionProps = TextProps;
+
+const ItemDescription = forwardRef<BridgeTextRef, ItemDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "font-sans text-sm font-normal leading-normal text-muted-foreground web:line-clamp-2 web:text-balance",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ItemDescription.displayName = "ItemDescription";
+
+// ---------------------------------------------------------------------------
+// ItemActions — 우측 액션 영역.
+// ---------------------------------------------------------------------------
+export type ItemActionsProps = ViewProps;
+
+const ItemActions = forwardRef<BridgeViewRef, ItemActionsProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  ),
+);
+ItemActions.displayName = "ItemActions";
+
+// ---------------------------------------------------------------------------
+// ItemHeader — 항목 헤더(basis-full로 첫 줄을 차지).
+// ---------------------------------------------------------------------------
+export type ItemHeaderProps = ViewProps;
+
+const ItemHeader = forwardRef<BridgeViewRef, ItemHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  ),
+);
+ItemHeader.displayName = "ItemHeader";
+
+// ---------------------------------------------------------------------------
+// ItemFooter — 항목 푸터(헤더와 동일 구조).
+// ---------------------------------------------------------------------------
+export type ItemFooterProps = ViewProps;
+
+const ItemFooter = forwardRef<BridgeViewRef, ItemFooterProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      {...props}
+    />
+  ),
+);
+ItemFooter.displayName = "ItemFooter";
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};

package/src/components/kbd.tsx

@@ -0,0 +1,62 @@
+// Kbd — shadcn/ui new-york-v4 kbd 포팅(/tmp/shadcn-ref/src/kbd). Kbd·KbdGroup 2종.
+// 포팅 판단:
+// - <kbd> 요소는 브리지 계약에 없어 View(배경·크기) + 내부 Text(글자)의
+//   이중 지정으로 재현한다. children은 문자열("⌘", "Ctrl", "K" 등)을 권장한다.
+// - 원본의 svg·tooltip 연동 셀렉터([&_svg...]·[[data-slot=tooltip-content]_&])는
+//   아이콘·툴팁 미지원 포팅이라 소실.
+// - pointer-events-none·select-none은 웹 전용 접두. KbdGroup의 원본이 <div>가
+//   아니라 <kbd>를 다시 쓰는 업스트림 특성은 View로 정리했다.
+import { forwardRef } 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";
+
+// View(컨테이너) — 원본 토큰 그대로(h-5 min-w-5 px-1 rounded-sm bg-muted).
+const kbdVariants = cva(
+  "flex-row h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 web:pointer-events-none web:select-none",
+);
+
+// 내부 Text
+const kbdTextVariants = cva(
+  "font-sans text-xs font-medium text-muted-foreground",
+);
+
+// 키 조합 그룹 — Kbd 여러 개를 묶는 인라인 컨테이너(원본 inline-flex gap-1).
+// w-fit은 uniwind 미지원 — tabs.tsx와 동일하게 self-start(교차축 시작 정렬로
+// 내용 폭 수축)로 치환해 양쪽 플랫폼 폭을 맞춘다(M-2).
+const kbdGroupVariants = cva("flex-row self-start items-center gap-1");
+
+export type KbdProps = ViewProps;
+export type KbdGroupProps = ViewProps;
+
+const Kbd = forwardRef<BridgeViewRef, KbdProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(kbdVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(kbdTextVariants())}>{children}</Text>
+    </View>
+  ),
+);
+Kbd.displayName = "Kbd";
+
+const KbdGroup = forwardRef<BridgeViewRef, KbdGroupProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(kbdGroupVariants(), className)}
+      {...props}
+    />
+  ),
+);
+KbdGroup.displayName = "KbdGroup";
+
+export { Kbd, KbdGroup, kbdVariants, kbdTextVariants, kbdGroupVariants };

package/src/components/pagination.tsx

@@ -0,0 +1,204 @@
+// Pagination — shadcn/ui new-york-v4 pagination 포팅(/tmp/shadcn-ref/src/pagination).
+// 7종 export. lucide 아이콘 제거.
+// 포팅 판단:
+// - 원본은 <a>에 buttonVariants를 얹는다 — 포팅은 Pressable role="link"에
+//   ./button의 buttonVariants(컨테이너) + buttonTextVariants(내부 Text 전경색,
+//   이중 지정)를 함께 얹는다. import 경로 "./button"은 양 트리(src·registry)에서
+//   동일하다.
+// - 원본의 data-active·aria-current="page" → isActive?: boolean prop 조건부
+//   클래스(ghost↔outline 변형 전환)로 대체. aria-current는 브리지 계약에 없어
+//   미지원.
+// - ChevronLeft/Right → "‹"/"›" 글리프 Text. Previous/Next 라벨은 원본의
+//   sm 미만 숨김(hidden sm:block)을 web:hidden web:sm:inline으로 재현 —
+//   네이티브에서는 항상 표시된다(터치 가독성).
+// - PaginationLink의 children이 문자열(숫자 포함)이면 이중 지정 원칙대로 내부
+//   Text로 감싸고, ReactNode면 그대로 렌더한다(Previous/Next는 글리프+라벨
+//   두 Text를 flex 간격으로 배치하기 위해 노드를 직접 넘긴다).
+// - 원본 <nav>의 role="navigation"은 BridgeRole에 없어 미지원 — 라벨만 유지.
+//   sr-only 보조 텍스트는 웹 전용 클래스라 생략(Ellipsis는 어차피 aria-hidden).
+// - 터치 타깃 44px 보정은 button.tsx와 같은 hitSlop 기준(§3.1).
+import { forwardRef, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  View,
+  type BridgePressableRef,
+  type BridgeViewRef,
+  type PressableProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { buttonVariants, buttonTextVariants } from "./button";
+
+const paginationVariants = cva("mx-auto w-full flex-row justify-center");
+const paginationContentVariants = cva("flex-row items-center gap-1");
+
+// 방향 글리프(‹ ›) — 원본 ChevronIcon 대체.
+const paginationGlyphVariants = cva("text-base leading-none text-foreground");
+// Previous/Next 라벨 — 웹에서는 sm 미만 숨김(원본 hidden sm:block 재현).
+const paginationLabelVariants = cva(
+  "font-sans text-sm font-medium text-foreground web:whitespace-nowrap web:hidden web:sm:inline",
+);
+const paginationEllipsisVariants = cva(
+  "h-9 w-9 flex-row items-center justify-center",
+);
+const paginationEllipsisTextVariants = cva(
+  "text-base leading-none text-foreground",
+);
+
+// 터치 타깃 보정 — button.tsx의 HIT_SLOP과 같은 기준(44px − 시각높이)/2.
+const HIT_SLOP = {
+  default: 2,
+  sm: 4,
+  lg: 0,
+  icon: 2,
+} as const;
+
+export type PaginationProps = ViewProps;
+export type PaginationContentProps = ViewProps;
+export type PaginationItemProps = ViewProps;
+export type PaginationEllipsisProps = ViewProps;
+
+export type PaginationLinkProps = PressableProps &
+  Pick<VariantProps<typeof buttonVariants>, "size"> & {
+    /** 현재 페이지 — 원본 data-active 대체(outline 변형으로 강조) */
+    isActive?: boolean;
+    children?: ReactNode;
+  };
+export type PaginationPreviousProps = PaginationLinkProps & {
+  /** 이전 라벨 텍스트(기본 "Previous" — 현지화 시 지정, G4) */
+  label?: string;
+};
+export type PaginationNextProps = PaginationLinkProps & {
+  /** 다음 라벨 텍스트(기본 "Next" — 현지화 시 지정, G4) */
+  label?: string;
+};
+
+const Pagination = forwardRef<BridgeViewRef, PaginationProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      accessibilityLabel="pagination"
+      className={cn(paginationVariants(), className)}
+      {...props}
+    />
+  ),
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = forwardRef<BridgeViewRef, PaginationContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(paginationContentVariants(), className)}
+      {...props}
+    />
+  ),
+);
+PaginationContent.displayName = "PaginationContent";
+
+// 원본 <li>처럼 기본 클래스 없이 props를 그대로 통과시킨다.
+const PaginationItem = forwardRef<BridgeViewRef, PaginationItemProps>(
+  ({ ...props }, ref) => <View ref={ref} {...props} />,
+);
+PaginationItem.displayName = "PaginationItem";
+
+const PaginationLink = forwardRef<BridgePressableRef, PaginationLinkProps>(
+  (
+    { className, isActive, size = "icon", children, hitSlop, ...props },
+    ref,
+  ) => {
+    const variant = isActive ? "outline" : "ghost";
+    const resolvedSize = size ?? "icon";
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="link"
+        hitSlop={hitSlop ?? HIT_SLOP[resolvedSize]}
+        className={cn(
+          buttonVariants({ variant, size }),
+          // 활성 페이지 강조 테두리 — outline 변형의 border-input은 1.27:1로
+          // 현재 페이지 표시가 배경에 묻힌다. foreground/50(≥3:1, G4)로 조정.
+          isActive && "border-foreground/50",
+          className,
+        )}
+        {...props}
+      >
+        {typeof children === "string" || typeof children === "number" ? (
+          <Text className={cn(buttonTextVariants({ variant }))}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  },
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = forwardRef<
+  BridgePressableRef,
+  PaginationPreviousProps
+>(({ className, label = "Previous", ...props }, ref) => (
+  <PaginationLink
+    ref={ref}
+    accessibilityLabel="Go to previous page"
+    size="default"
+    className={cn("gap-1 px-2.5 web:sm:pl-2.5", className)}
+    {...props}
+  >
+    <Text className={cn(paginationGlyphVariants())}>‹</Text>
+    <Text className={cn(paginationLabelVariants())}>{label}</Text>
+  </PaginationLink>
+));
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = forwardRef<BridgePressableRef, PaginationNextProps>(
+  ({ className, label = "Next", ...props }, ref) => (
+    <PaginationLink
+      ref={ref}
+      accessibilityLabel="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 web:sm:pr-2.5", className)}
+      {...props}
+    >
+      <Text className={cn(paginationLabelVariants())}>{label}</Text>
+      <Text className={cn(paginationGlyphVariants())}>›</Text>
+    </PaginationLink>
+  ),
+);
+PaginationNext.displayName = "PaginationNext";
+
+// 페이지 생략 글리프 — "⋯"(원본 MoreHorizontalIcon 대체).
+const PaginationEllipsis = forwardRef<BridgeViewRef, PaginationEllipsisProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      aria-hidden
+      className={cn(paginationEllipsisVariants(), className)}
+      {...props}
+    >
+      <Text className={cn(paginationEllipsisTextVariants())}>⋯</Text>
+    </View>
+  ),
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  paginationVariants,
+  paginationContentVariants,
+  paginationGlyphVariants,
+  paginationLabelVariants,
+  paginationEllipsisVariants,
+  paginationEllipsisTextVariants,
+};

package/src/components/progress.tsx

@@ -0,0 +1,60 @@
+// Progress — shadcn/ui(new-york-v4) progress.tsx 유니버설 포팅 (사이클 30, T-3b).
+// 원본: shadcn-ref/src/progress/progress.tsx — radix Progress 엔진을 제거하고
+// 진행률은 BridgeStyle 동적 인라인 스타일 계약으로 표현한다.
+//
+// 포팅 판단(원본 대비 차이):
+// - 원본 인디케이터는 w-full + translateX 변환으로 채움을 표현했다. 네이티브
+//   변환 조합 대신 브리지 동적 값 계약(style의 백분율 width)을 쓴다 — className
+//   동적 생성 금지 원칙의 공식 대체 수단. w-full·flex-1 토큰은 이 방식과 충돌해
+//   제거했다.
+// - 원본 value(0~100 고정)에 max 스케일(기본 100)을 추가해 백분율로 정규화하고
+//   0~100 범위로 클램프한다.
+// - aria-valuenow·aria-valuemax는 브리지 ViewProps 계약에 없어 미지원 —
+//   로드맵 항목(브리지 확장 시 지정). 진행률 맥락은 사용처의 accessibilityLabel
+//   전달로 보왈다.
+import { forwardRef } from "react";
+import {
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+
+import { cn } from "../lib/utils";
+
+export type ProgressProps = ViewProps & {
+  /** 현재 진행값 — max 대비 백분율로 렌더(미지정 시 0%) */
+  value?: number;
+  /** 진행 스케일 상한(기본 100) */
+  max?: number;
+};
+
+const Progress = forwardRef<BridgeViewRef, ProgressProps>(
+  ({ className, value, max = 100, ...props }, ref) => {
+    const scale = max > 0 ? max : 100;
+    const percent = Math.min(100, Math.max(0, ((value ?? 0) / scale) * 100));
+    return (
+      // 트랙 — role 지정 권장 라벨은 사용처 accessibilityLabel로 전달된다.
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        className={cn(
+          // 트랙 bg-primary/20은 다크 1.75:1·라이트 1.4:1로 채움과의 경계가
+          // 흐려 value 신호가 묻힌다 — /50(양 모드 ≥3:1, G4)으로 조정.
+          "relative h-2 w-full overflow-hidden rounded-full bg-primary/50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 인디케이터 — 동적 백분율 폭은 BridgeStyle 전용 영역 */}
+        <View
+          aria-hidden
+          className="h-full bg-primary web:transition-all"
+          style={{ width: `${percent}%` }}
+        />
+      </View>
+    );
+  },
+);
+Progress.displayName = "Progress";
+
+export { Progress };