@unikit-bridge/ui 0.0.0-stage → 0.2.0

package/src/components/alert.tsx

@@ -0,0 +1,157 @@
+// Alert — shadcn/ui new-york-v4 alert 포팅(/tmp/shadcn-ref/src/alert). 3종 export.
+// 포팅 판단:
+// - 원본은 grid + has-자손 셀렉터로 선택적 아이콘 열을 배치한다.
+//   data·자손 셀렉터는 네이티브에서 동작하지 않으므로 flex-row(글리프 + 콘텐츠 열)
+//   구조로 재작성하고, 좌측 아이콘은 글리프 Text(default ⓘ / destructive ⚠)로
+//   표시한다(아이콘 없는 배치는 미지원). 색·여백·rounding 토큰은 유지.
+// - 원본의 텍스트 색 상속(text-card-foreground / text-destructive)은 이중 지정
+//   원칙에 따라 내부 Text로 이동. 특히 AlertDescription의 destructive 톤(원본은
+//   data-slot=alert-description 자손 셀렉터의 text-destructive/90)은 셀렉터를
+//   쓸 수 없어 React context로 variant를 전달한다 — variant prop은 원본대로
+//   Alert에만 존재한다(Alert 단독 사용 시 하위 컴포넌트는 default 톤).
+// - role="alert"은 원본 그대로 유지(신규 접근성 계약 BridgeRole "alert").
+// - 웹 전용 토큰 처리: line-clamp-1·tracking-tight은 web: 접두, 그리드 전용
+//   col-start-*·min-h-4와 [&_p]:leading-relaxed(단락 자손 스타일)은 소실.
+import { createContext, forwardRef, useContext } 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";
+
+// 컨테이너(View) — 배경·테두리. 원본의 grid 배치를 flex-row(글리프+콘텐츠 열)로 치환.
+const alertVariants = cva(
+  "relative w-full flex-row items-start gap-3 rounded-lg border px-4 py-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-card",
+        // 원본 destructive의 border-destructive/50 토큰 유지(사소 5 — 포팅
+        // 초판에서 누락돼 destructive가 글자색으로만 구분됐다).
+        destructive: "bg-card border-destructive/50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 좌측 글리프 Text — 원본 [&>svg]:size-4·text-current 아이콘의 글리프 대체.
+const alertGlyphVariants = cva("text-base leading-none", {
+  variants: {
+    variant: {
+      default: "text-card-foreground",
+      destructive: "text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// 제목 Text — 원본 col-start-2 line-clamp-1 font-medium tracking-tight.
+const alertTitleVariants = cva(
+  "font-sans text-sm font-medium leading-none web:line-clamp-1 web:tracking-tight",
+  {
+    variants: {
+      variant: {
+        default: "text-card-foreground",
+        destructive: "text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 설명 Text — 원본 text-muted-foreground, destructive는 /90 톤(자손 셀렉터 대체).
+const alertDescriptionVariants = cva(
+  "font-sans text-sm text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// variant 전파용 React context — 원본의 `*:` 자손 셀렉터를 대체한다.
+const AlertContext = createContext<
+  NonNullable<VariantProps<typeof alertVariants>["variant"]>
+>("default");
+
+export type AlertProps = ViewProps & VariantProps<typeof alertVariants>;
+export type AlertTitleProps = TextProps;
+export type AlertDescriptionProps = TextProps;
+
+const Alert = forwardRef<BridgeViewRef, AlertProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <AlertContext.Provider value={variant ?? "default"}>
+      <View
+        ref={ref}
+        accessibilityRole="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        <View aria-hidden className="mt-0.5 shrink-0">
+          <Text className={cn(alertGlyphVariants({ variant }))}>
+            {variant === "destructive" ? "⚠" : "ⓘ"}
+          </Text>
+        </View>
+        <View className="flex flex-col gap-0.5">{children}</View>
+      </View>
+    </AlertContext.Provider>
+  ),
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = forwardRef<BridgeTextRef, AlertTitleProps>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    return (
+      <Text
+        ref={ref}
+        className={cn(alertTitleVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = forwardRef<BridgeTextRef, AlertDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    return (
+      <Text
+        ref={ref}
+        className={cn(alertDescriptionVariants({ variant }), className)}
+        {...props}
+      />
+    );
+  },
+);
+AlertDescription.displayName = "AlertDescription";
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  alertVariants,
+  alertGlyphVariants,
+  alertTitleVariants,
+  alertDescriptionVariants,
+};

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,40 @@
+// AspectRatio — shadcn/ui(new-york-v4) aspect-ratio.tsx 유니버설 포팅 (사이클 30, T-3b).
+// 원본: shadcn-ref/src/aspect-ratio/aspect-ratio.tsx — radix AspectRatio 엔진을
+// 제거하고 비율은 BridgeStyle 동적 인라인 스타일 계약으로 표현한다.
+//
+// 포팅 판단(원본 대비 차이):
+// - 원본(radix)은 웹 구형 호환을 위해 패딩 핵으로 비율을 만들었다. 브리지 계약의
+//   aspectRatio는 숫자 값이 웹 DOM(단위 없는 비율)·RN(원시 프로퍼티) 양쪽에
+//   유효해 style 지정으로 대체한다(정적 스타일이 아닌 사용자 지정 비율 값이므로
+//   className 원칙의 동적 값 예외에 해당).
+// - 원본의 overflow hidden은 className(overflow-hidden)으로 유지.
+import { forwardRef } from "react";
+import {
+  View,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+
+import { cn } from "../lib/utils";
+
+export type AspectRatioProps = ViewProps & {
+  /** 가로세로 비율(가로 ÷ 세로, 기본 1 — 정사각형) */
+  ratio?: number;
+};
+
+const AspectRatio = forwardRef<BridgeViewRef, AspectRatioProps>(
+  ({ ratio = 1, className, style, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("overflow-hidden", className)}
+      // 사용자 style이 있으면 병합 — 비율은 컴포넌트 계약값이 우선한다.
+      style={{ ...style, aspectRatio: ratio }}
+      {...props}
+    >
+      {children}
+    </View>
+  ),
+);
+AspectRatio.displayName = "AspectRatio";
+
+export { AspectRatio };

package/src/components/avatar.tsx

@@ -0,0 +1,275 @@
+// Avatar — shadcn/ui new-york-v4 avatar(Radix Avatar 기반)를 UniKit 유니버설로 이식.
+//
+// 포팅 판단(radix 엔진 의존 제거):
+// - 로드 실패 상태 공유는 React context로 재현 — Avatar(루트)가
+//   { size, hasImage, imageFailed }를 제공하고, AvatarImage가 마운트 등록/
+//   실패 보고(브리지 Image onError), AvatarFallback이
+//   "소스 없음 또는 로드 실패"일 때만 렌더된다.
+// - 브리지 Image에 onLoad 계약이 없어 '로드 성공'을 알 수 없으므로 폴백
+//   표시 조건을 Radix의 "로드 전+실패"에서 "소스 없음+실패"로 단순화했다.
+//   실패한 AvatarImage는 렌더를 중단한다(Radix는 깨진 img를 남긴다).
+// - 원본의 data-size + group-data size/avatar 셀렉터(폴백 글자 크기·배지
+//   크기 연동)는 아래 조회 테이블로 치환 — 각 컴포넌트가 context size를 읽어
+//   자기 크기 클래스를 적용한다.
+// - AvatarGroup의 겹침(-space-x-2)과 data-slot=avatar 자식 링은 자식 셀렉터가
+//   필요하다. 겹침은 웹 전용 클래스로 유지(네이티브은 나란히 배치)하고, 링은
+//   Avatar가 AvatarGroupContext를 읽어 자신에게 ring-2를 건다.
+// - AvatarGroupCount의 그룹 크기 반응(group-has-data-...)은 고정 토큰(size-8)으로
+//   단순화. AvatarBadge 내용은 글리프 Text 또는 비움(배경 자체가 상태 점).
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  Image,
+  Text,
+  View,
+  type BridgeImageRef,
+  type BridgeViewRef,
+  type ImageProps,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+export type AvatarSize = "default" | "sm" | "lg";
+
+// 루트 크기 — 원본 data-size 셀렉터(size-8 · sm:size-6 · lg:size-10) 치환.
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full web:select-none",
+  {
+    variants: {
+      size: {
+        default: "size-8",
+        sm: "size-6",
+        lg: "size-10",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+// 폴백 글자 크기(원본의 group-data size=sm → text-xs)·배지 크기
+// (sm 2 · default 2.5 · lg 3) — context size 값으로 조회하는 치환 테이블.
+const AVATAR_FALLBACK_TEXT: Record<AvatarSize, string> = {
+  default: "text-sm",
+  sm: "text-xs",
+  lg: "text-sm",
+};
+const AVATAR_BADGE_SIZE: Record<AvatarSize, string> = {
+  default: "size-2.5",
+  sm: "size-2",
+  lg: "size-3",
+};
+
+// 루트가 제공하는 상태 — 폴백 전환 판단의 단일 출처.
+type AvatarContextValue = {
+  size: AvatarSize;
+  /** AvatarImage 마운트 여부 — false면 "소스 없음"으로 폴백 렌더 */
+  hasImage: boolean;
+  /** AvatarImage 로드 실패 — 폴백으로 전환 */
+  imageFailed: boolean;
+  reportImageMounted: (mounted: boolean) => void;
+  reportImageFailed: () => void;
+};
+
+const AvatarContext = createContext<AvatarContextValue | null>(null);
+
+// AvatarGroup 내부 여부 — Avatar가 겹침 경계 링을 자신에게 적용한다.
+const AvatarGroupContext = createContext(false);
+
+// ---------------------------------------------------------------------------
+// Avatar — 루트 컨테이너. 상태 제공자역도 겸한다(원본 AvatarPrimitive.Root).
+// ---------------------------------------------------------------------------
+export type AvatarProps = ViewProps &
+  VariantProps<typeof avatarVariants> & {
+    children?: ReactNode;
+  };
+
+const Avatar = forwardRef<BridgeViewRef, AvatarProps>(
+  ({ className, size, ...props }, ref) => {
+    const [hasImage, setHasImage] = useState(false);
+    const [imageFailed, setImageFailed] = useState(false);
+    const grouped = useContext(AvatarGroupContext);
+    const resolvedSize = size ?? "default";
+    const contextValue = useMemo<AvatarContextValue>(
+      () => ({
+        size: resolvedSize,
+        hasImage,
+        imageFailed,
+        // setState 설정자는 참조가 안정적이라 그대로 노출해도 안전하다.
+        reportImageMounted: setHasImage,
+        reportImageFailed: () => setImageFailed(true),
+      }),
+      [resolvedSize, hasImage, imageFailed],
+    );
+    return (
+      <AvatarContext.Provider value={contextValue}>
+        <View
+          ref={ref}
+          className={cn(
+            avatarVariants({ size }),
+            grouped && "ring-2 ring-background",
+            className,
+          )}
+          {...props}
+        />
+      </AvatarContext.Provider>
+    );
+  },
+);
+Avatar.displayName = "Avatar";
+
+// ---------------------------------------------------------------------------
+// AvatarImage — 브리지 Image(원격 {uri}만). 실패 보고는 context로.
+// ---------------------------------------------------------------------------
+// onError는 폴백 전환의 통로이므로 props에서 제외하고 컴포넌트가 소유한다.
+export type AvatarImageProps = Omit<ImageProps, "onError">;
+
+const AvatarImage = forwardRef<BridgeImageRef, AvatarImageProps>(
+  ({ className, source, ...props }, ref) => {
+    const avatar = useContext(AvatarContext);
+    // 마운트 등록/해제 — 폴백의 "소스 없음" 판단 근거(provider는 안정적).
+    useEffect(() => {
+      avatar?.reportImageMounted(true);
+      return () => avatar?.reportImageMounted(false);
+    }, [avatar]);
+    // 실패한 이미지는 렌더하지 않는다(포팅 노트 — Radix는 깨진 img를 남김).
+    if (avatar?.imageFailed) {
+      return null;
+    }
+    return (
+      <Image
+        ref={ref}
+        source={source}
+        onError={avatar ? avatar.reportImageFailed : undefined}
+        className={cn("aspect-square size-full", className)}
+        {...props}
+      />
+    );
+  },
+);
+AvatarImage.displayName = "AvatarImage";
+
+// ---------------------------------------------------------------------------
+// AvatarFallback — 이니셜/글리프. "소스 없음 또는 실패"일 때만 렌더.
+// ---------------------------------------------------------------------------
+export type AvatarFallbackProps = ViewProps & {
+  children?: ReactNode;
+};
+
+const AvatarFallback = forwardRef<BridgeViewRef, AvatarFallbackProps>(
+  ({ className, children, ...props }, ref) => {
+    const avatar = useContext(AvatarContext);
+    // Avatar 밖 단독 사용(문맥 없음)이면 항상 렌드한다.
+    const visible = avatar ? !avatar.hasImage || avatar.imageFailed : true;
+    if (!visible) {
+      return null;
+    }
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "flex size-full items-center justify-center rounded-full bg-muted",
+          className,
+        )}
+        {...props}
+      >
+        {/* 이중 지정 원칙: 전경색은 내부 Text에 — children은 이니셜/글리프 문자열 권장 */}
+        <Text
+          className={cn(
+            "font-sans text-muted-foreground",
+            avatar && AVATAR_FALLBACK_TEXT[avatar.size],
+          )}
+        >
+          {children}
+        </Text>
+      </View>
+    );
+  },
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+// ---------------------------------------------------------------------------
+// AvatarBadge — 우하단 상태 점. 크기는 context size 연동.
+// ---------------------------------------------------------------------------
+export type AvatarBadgeProps = ViewProps;
+
+const AvatarBadge = forwardRef<BridgeViewRef, AvatarBadgeProps>(
+  ({ className, ...props }, ref) => {
+    const avatar = useContext(AvatarContext);
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          "absolute right-0 bottom-0 z-10 flex items-center justify-center rounded-full bg-primary ring-2 ring-background web:select-none",
+          avatar && AVATAR_BADGE_SIZE[avatar.size],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+AvatarBadge.displayName = "AvatarBadge";
+
+// ---------------------------------------------------------------------------
+// AvatarGroup — 아바타 무리. 겹침은 웹 전용(네이티브은 나란히).
+// ---------------------------------------------------------------------------
+export type AvatarGroupProps = ViewProps;
+
+const AvatarGroup = forwardRef<BridgeViewRef, AvatarGroupProps>(
+  ({ className, ...props }, ref) => (
+    <AvatarGroupContext.Provider value={true}>
+      <View
+        ref={ref}
+        className={cn("flex flex-row items-center web:-space-x-2", className)}
+        {...props}
+      />
+    </AvatarGroupContext.Provider>
+  ),
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+// ---------------------------------------------------------------------------
+// AvatarGroupCount — 넘친 인원 표시("+9" 등 문자열 children).
+// ---------------------------------------------------------------------------
+export type AvatarGroupCountProps = ViewProps & {
+  children?: ReactNode;
+};
+
+const AvatarGroupCount = forwardRef<BridgeViewRef, AvatarGroupCountProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted ring-2 ring-background",
+        className,
+      )}
+      {...props}
+    >
+      {/* 이중 지정 원칙: 전경색은 내부 Text에 */}
+      <Text className="font-sans text-sm text-muted-foreground">
+        {children}
+      </Text>
+    </View>
+  ),
+);
+AvatarGroupCount.displayName = "AvatarGroupCount";
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+};

package/src/components/badge.tsx

@@ -0,0 +1,65 @@
+// Badge — docs/sdd/02-design.md v2 §3.5 그대로.
+// 이중 지정 원칙(§0.5): 배경·테두리는 View, 전경색은 내부 Text에 명시(Button과 동일 패턴).
+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";
+
+// View(컨테이너)
+const badgeVariants = cva(
+  "flex flex-row items-center rounded-md border px-2.5 py-0.5",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary",
+        secondary: "border-transparent bg-secondary",
+        destructive: "border-transparent bg-destructive",
+        outline: "border-border",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// 내부 Text
+const badgeTextVariants = cva("font-sans text-xs font-semibold", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      secondary: "text-secondary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type BadgeProps = ViewProps &
+  VariantProps<typeof badgeVariants>;
+
+const Badge = forwardRef<BridgeViewRef, BadgeProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    >
+      <Text className={cn(badgeTextVariants({ variant }))}>{children}</Text>
+    </View>
+  ),
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants, badgeTextVariants };