@unikit-bridge/ui 0.0.0-stage → 0.2.0

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 };

package/src/components/empty.tsx

@@ -0,0 +1,160 @@
+// Empty — shadcn/ui new-york-v4 empty를 UniKit 유니버설로 이식.
+//
+// 포팅 판단:
+// - 단순 레이아웃 컴포넌트군 — 엔진 의존이 없어 구조·토큰을 그대로 옮기고
+//   data-slot 속성과 [&_svg]·[&>a] 자식 셀렉터만 제거했다.
+// - EmptyMedia의 아이콘: 원본 svg 대신 큰 글리프(⊕ ⬚ ◻ 등)를 내부 Text로
+//   렌더한다(아이콘 금지 규칙). children에 문자열을 넘긴다.
+// - 텍스트 정렬(text-center)은 웹은 상속되지만 네이티브은 되지 않으므로
+//   Title/Description Text에 직접 지정한다(루트의 text-center는 웹 중첩
+//   자식용으로 유지 — 네이티브 View에서는 무해한 no-op).
+// - text-balance·md: 반응형 패딩은 웹 전용 → web: 접두.
+import { forwardRef, type ReactNode } 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";
+
+// Empty — 빈 상태 컨테이너(원본 border-dashed 토큰 보존 — 테두리 굵기는
+// 소비자 className으로 지정하는 원본 사용법과 동일).
+export type EmptyProps = ViewProps;
+
+const Empty = forwardRef<BridgeViewRef, EmptyProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center web:text-balance web:md:p-12",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Empty.displayName = "Empty";
+
+// EmptyHeader — 제목·설명 묶음.
+export type EmptyHeaderProps = ViewProps;
+
+const EmptyHeader = forwardRef<BridgeViewRef, EmptyHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+EmptyHeader.displayName = "EmptyHeader";
+
+// EmptyMedia — 글리프 아이콘 영역. icon 변형은 원본 bg-muted 상자(size-10)를
+// 유지하고, 글리프 크기(text-2xl ≈ 원본 svg size-6)·색은 내부 Text에 명시.
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "size-10 rounded-lg bg-muted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type EmptyMediaProps = ViewProps &
+  VariantProps<typeof emptyMediaVariants> & {
+    /** 큰 글리프 문자열(⊕ ⬚ ◻ 등) — svg 아이콘 치환 */
+    children?: ReactNode;
+  };
+
+const EmptyMedia = forwardRef<BridgeViewRef, EmptyMediaProps>(
+  ({ className, variant, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(emptyMediaVariants({ variant }), className)}
+      {...props}
+    >
+      <Text className="font-sans text-2xl leading-none text-foreground">
+        {children}
+      </Text>
+    </View>
+  ),
+);
+EmptyMedia.displayName = "EmptyMedia";
+
+// EmptyTitle — 빈 상태 제목(원본 text-lg font-medium tracking-tight).
+export type EmptyTitleProps = TextProps & {
+  children?: ReactNode;
+};
+
+const EmptyTitle = forwardRef<BridgeTextRef, EmptyTitleProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "font-sans text-lg font-medium text-foreground text-center web:tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+EmptyTitle.displayName = "EmptyTitle";
+
+// EmptyDescription — 보조 설명(원본 text-sm/relaxed → text-sm + leading-relaxed).
+export type EmptyDescriptionProps = TextProps & {
+  children?: ReactNode;
+};
+
+const EmptyDescription = forwardRef<BridgeTextRef, EmptyDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "font-sans text-sm leading-relaxed text-center text-muted-foreground web:text-balance",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+EmptyDescription.displayName = "EmptyDescription";
+
+// EmptyContent — 빈 상태 하단 액션 영역.
+export type EmptyContentProps = ViewProps;
+
+const EmptyContent = forwardRef<BridgeViewRef, EmptyContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "flex min-w-0 w-full max-w-sm flex-col items-center gap-4 text-sm web:text-balance",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+EmptyContent.displayName = "EmptyContent";
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/src/components/field.tsx

@@ -0,0 +1,349 @@
+// Field — shadcn/ui new-york-v4 field(248줄)을 UniKit 유니버설로 이식.
+//
+// 포팅 판단(radix/base 엔진 의존 제거):
+// - Radix Field가 data-* 속성으로 흘리던 상태(invalid·disabled)는 Field의
+//   boolean prop → 최소한의 React context로 전달하고, 소비 컴포넌트
+//   (FieldLabel·FieldTitle)가 조건부 클래스로 받는다. 원본의
+//   data-invalid=true → text-destructive(루트 상속)·
+//   group-data disabled → opacity-50 치환이다.
+// - FieldLabel은 원본처럼 ./label의 Label을 재사용한다(양쪽 트리 동일 상대
+//   경로 — registry 복사 구조에서도 성립).
+// - fieldset/legend 시맨틱은 브리지 프리미티브(bridge role 계약에 group 없음)로
+//   표현 불가 → FieldSet은 View, FieldLegend는 Text로 평면화.
+// - orientation "responsive"(@container 쿼리)은 컨테이너 쿼리가 없어 제거 —
+//   vertical/horizontal만 유지. horizontal의 라벨 flex-auto는 context
+//   orientation으로 FieldLabel이 받는다(원본 자식 셀렉터 치환).
+// - has-자손·nth-last-2·자식 앵커 등 자식/상태 셀렉터 토큰은 제거(네이티브에
+//   data 속성·셀렉터 없음).
+// - FieldSeparator가 감싸던 Separator는 인라인 View(h-px bg-border)로 대리
+//   (신규 파일 6종 제한 — separator.tsx 생성 불가).
+// - FieldError의 목록 글머리(list-disc)는 글리프 "• " 접두로 치환.
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ReactNode,
+} 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";
+import { Label, type LabelProps } from "./label";
+
+// Field가 제공하는 상태 — 라벨·타이틀 스타일 연동의 단일 출처.
+type FieldContextValue = {
+  invalid: boolean;
+  disabled: boolean;
+  orientation: "vertical" | "horizontal";
+};
+
+const FieldContext = createContext<FieldContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// FieldSet — 폼 묶음(원본 <fieldset> → View 평면화).
+// ---------------------------------------------------------------------------
+export type FieldSetProps = ViewProps;
+
+const FieldSet = forwardRef<BridgeViewRef, FieldSetProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex flex-col gap-6", className)}
+      {...props}
+    />
+  ),
+);
+FieldSet.displayName = "FieldSet";
+
+// ---------------------------------------------------------------------------
+// FieldLegend — 묶음 제목(원본 <legend> → Text 평면화).
+// ---------------------------------------------------------------------------
+const fieldLegendVariants = cva("font-medium", {
+  variants: {
+    variant: {
+      legend: "text-base",
+      label: "text-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "legend",
+  },
+});
+
+export type FieldLegendProps = TextProps &
+  VariantProps<typeof fieldLegendVariants>;
+
+const FieldLegend = forwardRef<BridgeTextRef, FieldLegendProps>(
+  ({ className, variant, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "mb-3 font-sans text-foreground",
+        fieldLegendVariants({ variant }),
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldLegend.displayName = "FieldLegend";
+
+// ---------------------------------------------------------------------------
+// FieldGroup — 필드 묶음(원본 gap-7 유지, 중첩 gap-4 셀렉터는 제거).
+// ---------------------------------------------------------------------------
+export type FieldGroupProps = ViewProps;
+
+const FieldGroup = forwardRef<BridgeViewRef, FieldGroupProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn("flex w-full flex-col gap-7", className)}
+      {...props}
+    />
+  ),
+);
+FieldGroup.displayName = "FieldGroup";
+
+// ---------------------------------------------------------------------------
+// Field — 단일 폼 필드 루트. 상태 제공자역을 겸한다.
+// ---------------------------------------------------------------------------
+// 원본의 자식 w-full 셀렉터([&>*]:w-full)는 제거 — Input/Textarea가 기본
+// w-full이므로 실사용에 영향 없다. role="group"은 bridge role 계약에 없어 생략.
+const fieldVariants = cva("flex w-full gap-3", {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-center",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export type FieldProps = ViewProps &
+  VariantProps<typeof fieldVariants> & {
+    /** 오류 상태 — 라벨·타이틀 전경색을 destructive로(원본 data-invalid 치환) */
+    invalid?: boolean;
+    /** 비활성 상태 — 라벨·타이틀 불투명도(원본 data-disabled 치환) */
+    disabled?: boolean;
+  };
+
+const Field = forwardRef<BridgeViewRef, FieldProps>(
+  ({ className, orientation, invalid, disabled, ...props }, ref) => {
+    const resolvedOrientation = orientation ?? "vertical";
+    const contextValue = useMemo<FieldContextValue>(
+      () => ({
+        invalid: invalid === true,
+        disabled: disabled === true,
+        orientation: resolvedOrientation,
+      }),
+      [invalid, disabled, resolvedOrientation],
+    );
+    return (
+      <FieldContext.Provider value={contextValue}>
+        <View
+          ref={ref}
+          className={cn(fieldVariants({ orientation }), className)}
+          {...props}
+        />
+      </FieldContext.Provider>
+    );
+  },
+);
+Field.displayName = "Field";
+
+// ---------------------------------------------------------------------------
+// FieldContent — 라벨 옆 본문 영역(컨트롤·설명·오류 묶음).
+// ---------------------------------------------------------------------------
+export type FieldContentProps = ViewProps;
+
+const FieldContent = forwardRef<BridgeViewRef, FieldContentProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        "flex flex-1 flex-col gap-1.5 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldContent.displayName = "FieldContent";
+
+// ---------------------------------------------------------------------------
+// FieldLabel — 필드 라벨. Label(./label) 재사용 + Field 상태 연동.
+// ---------------------------------------------------------------------------
+export type FieldLabelProps = LabelProps;
+
+const FieldLabel = forwardRef<BridgeTextRef, FieldLabelProps>(
+  ({ className, ...props }, ref) => {
+    const field = useContext(FieldContext);
+    return (
+      <Label
+        ref={ref}
+        className={cn(
+          "w-fit leading-snug",
+          // horizontal 배치에서 라벨이 남은 폭을 차지(원본 자식 셀렉터 치환)
+          field?.orientation === "horizontal" && "flex-auto",
+          field?.invalid && "text-destructive",
+          field?.disabled && "opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+FieldLabel.displayName = "FieldLabel";
+
+// ---------------------------------------------------------------------------
+// FieldTitle — 라벨 대신 쓰는 제목형 텍스트(상태 연동은 Label과 동일).
+// ---------------------------------------------------------------------------
+export type FieldTitleProps = TextProps;
+
+const FieldTitle = forwardRef<BridgeTextRef, FieldTitleProps>(
+  ({ className, ...props }, ref) => {
+    const field = useContext(FieldContext);
+    return (
+      <Text
+        ref={ref}
+        className={cn(
+          "w-fit font-sans text-sm font-medium leading-snug text-foreground",
+          field?.invalid && "text-destructive",
+          field?.disabled && "opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+FieldTitle.displayName = "FieldTitle";
+
+// ---------------------------------------------------------------------------
+// FieldDescription — 보조 설명.
+// ---------------------------------------------------------------------------
+export type FieldDescriptionProps = TextProps;
+
+const FieldDescription = forwardRef<BridgeTextRef, FieldDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        "font-sans text-sm font-normal leading-normal text-muted-foreground web:text-balance",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldDescription.displayName = "FieldDescription";
+
+// ---------------------------------------------------------------------------
+// FieldSeparator — 사이 구분선(가운데 문구 optional).
+// ---------------------------------------------------------------------------
+export type FieldSeparatorProps = ViewProps & {
+  /** 가운데 문구 — 원본과 같이 children이 있으면 선 위에 표시 */
+  children?: ReactNode;
+};
+
+const FieldSeparator = forwardRef<BridgeViewRef, FieldSeparatorProps>(
+  ({ className, children, ...props }, ref) => (
+    <View ref={ref} className={cn("relative -my-2 h-5", className)} {...props}>
+      {/* 인라인 구분선 — 원본 Separator 대리(신규 파일 제한) */}
+      <View className="absolute inset-x-0 top-1/2 h-px bg-border" />
+      {children ? (
+        <Text className="relative mx-auto w-fit bg-background px-2 font-sans text-sm text-muted-foreground">
+          {children}
+        </Text>
+      ) : null}
+    </View>
+  ),
+);
+FieldSeparator.displayName = "FieldSeparator";
+
+// ---------------------------------------------------------------------------
+// FieldError — 검증 오류 표시(role="alert"). children 우선, 없으면 errors로 조립.
+// ---------------------------------------------------------------------------
+export type FieldErrorProps = ViewProps & {
+  /** 유효성 오류 목록 — message 기준 중복 제거(원본 로직 그대로) */
+  errors?: Array<{ message?: string } | undefined>;
+};
+
+const FieldError = forwardRef<BridgeViewRef, FieldErrorProps>(
+  ({ className, children, errors, ...props }, ref) => {
+    const content = useMemo<ReactNode>(() => {
+      // 이중 지정 원칙: children은 문자열 권장 — 내부 Text가 색을 담당한다.
+      if (children) {
+        return (
+          <Text className="font-sans text-sm text-destructive">{children}</Text>
+        );
+      }
+      if (!errors?.length) {
+        return null;
+      }
+      const uniqueErrors = [
+        ...new Map(errors.map((error) => [error?.message, error])).values(),
+      ];
+      if (uniqueErrors.length === 1) {
+        return (
+          <Text className="font-sans text-sm text-destructive">
+            {uniqueErrors[0]?.message}
+          </Text>
+        );
+      }
+      // 다중 오류 — 원본 ul/list-disc를 글리프 "• " 목록으로 치환.
+      return (
+        <View className="ml-4 flex flex-col gap-1">
+          {uniqueErrors.map((error, index) =>
+            error?.message ? (
+              <Text
+                key={index}
+                className="font-sans text-sm text-destructive"
+              >{`• ${error.message}`}</Text>
+            ) : null,
+          )}
+        </View>
+      );
+    }, [children, errors]);
+
+    if (!content) {
+      return null;
+    }
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="alert"
+        className={cn("text-sm font-normal", className)}
+        {...props}
+      >
+        {content}
+      </View>
+    );
+  },
+);
+FieldError.displayName = "FieldError";
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

package/src/components/input.tsx

@@ -0,0 +1,39 @@
+// Input — docs/sdd/02-design.md v2 §3.3 그대로.
+// forwardRef로 입력 인스턴스(focus()·blur())를 노출 — §3.4 Label의
+// onPress → ref.focus() 라벨-입력창 클릭 연결용.
+import { forwardRef } from "react";
+import {
+  TextInput,
+  type BridgeTextInputRef,
+  type TextInputProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const inputVariants = cva(
+  "font-sans h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base text-foreground placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background web:focus-visible:border-ring disabled:opacity-50",
+);
+
+// InputProps — TextInputProps 그대로. 웹 관용 disabled의 치환 계약
+// (native: 아래 editable={false} · web: input[disabled] + aria-disabled)은
+// bridge/types.ts의 disabled 주석이 단일 출처다.
+export type InputProps = TextInputProps;
+
+const Input = forwardRef<BridgeTextInputRef, InputProps>(
+  ({ className, disabled, editable, ...props }, ref) => (
+    <TextInput
+      ref={ref}
+      editable={disabled ? false : editable}
+      aria-disabled={disabled ? true : undefined}
+      className={cn(inputVariants(), className)}
+      {...props}
+      // 브리지 계약에는 editable 치환으로 이미 반영됐으므로 disabled는 그대로 전달
+      // (웹 input[disabled] · RN은 위 editable={false}가 차단)
+      disabled={disabled}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };