@unikit-bridge/ui 0.1.0 → 0.2.0

package/src/components/tabs.tsx

@@ -0,0 +1,213 @@
+// Tabs — shadcn/ui(new-york-v4) tabs.tsx 유니버설 포팅 (사이클 30, T-3b).
+// 원본: shadcn-ref/src/tabs/tabs.tsx — radix Tabs 엔진을 제거하고 선택 상태는
+// React state + context로 직접 관리한다. 원본의 data-state·그룹 셀렉터 클래스는
+// 네이티브에 data 속성이 없어 재현 불가하므로, 활성 여부에 따른 조건부 클래스
+// 문자열로 전개한다(aria-selected는 접근성용으로 계속 지정).
+//
+// 포팅 판단(원본 대비 차이):
+// - orientation(vertical) 미지원 — 세로축 스타일은 전부 그룹 셀렉터 의존이라
+//   수평 전용으로 단순화. 루트의 flex·flex-col은 브리지 View 기본 클래스가 제공.
+// - 임의값 클래스 금지(디자인 감사 (c))에 따라 원본의 calc 높이·3px 링·3px 리스트
+//   패딩을 표준 계단으로 근사한다(링 ring-2, 패딩 p-1). 트리거 높이는 명시하지
+//   않고 리스트 고정 높이 h-9와 패딩이 대신 결정한다.
+// - line 변형 인디케이터는 원본 가상요소(after) 대신 absolute 인디케이터 View로
+//   재현 — 렌더 여부는 리스트 변형 컨텍스트로, 표시는 활성 조건부 opacity로
+//   전개한다. 원본은 트리거 바깥 음수 오프셋에 바를 뒀지만 포팅은 트리거
+//   하단에 붙인다(네이티브 안전 근사).
+// - dark: 변형 토큰은 기존 5종 관행(미사용)에 맞춰 제거.
+// - 콘텐츠 전환 애니메이션(높이 전이)·웹 화살표키 탐색은 radix 전용 기능이라
+//   미지원 — 로드맵 항목. 콘텐츠는 마운트/언마운트로 즉시 전환한다.
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useState,
+  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";
+
+type TabsContextValue = {
+  value: string;
+  setValue: (value: string) => void;
+  /** 트리거 aria-controls ↔ 콘텐츠 nativeID를 결정적으로 연결하기 위한 토대 ID */
+  baseId: string;
+};
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext(component: string): TabsContextValue {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<${component}>는 <Tabs> 안에서 사용해야 합니다.`);
+  }
+  return ctx;
+}
+
+// 트리거(말록)와 콘텐츠(패널)를 잇는 ID — value의 공백은 ID에 쓸 수 없어 치환.
+function contentIdOf(baseId: string, value: string) {
+  return `${baseId}-tabs-content-${value.replace(/\s+/g, "-")}`;
+}
+
+// 리스트 변형 — line 인디케이터 렌더 여부를 트리거가 알 수 있게 전달(원본은
+// 그룹 셀렉터로 전달했다). 리스트 밖의 트리거는 default 취급.
+type TabsListContextValue = { variant: "default" | "line" | null };
+const TabsListContext = createContext<TabsListContextValue>({ variant: null });
+
+export type TabsProps = ViewProps & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+const Tabs = forwardRef<BridgeViewRef, TabsProps>(
+  ({ value, defaultValue, onValueChange, className, children, ...props }, ref) => {
+    // 비제어 상태 — 제어(value 지정)면 무시된다.
+    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+    const current = value ?? internalValue;
+    const setValue = (next: string) => {
+      if (value === undefined) setInternalValue(next);
+      if (next !== current) onValueChange?.(next);
+    };
+    const baseId = useId();
+    return (
+      <TabsContext.Provider value={{ value: current, setValue, baseId }}>
+        <View ref={ref} className={cn("gap-2", className)} {...props}>
+          {children}
+        </View>
+      </TabsContext.Provider>
+    );
+  },
+);
+Tabs.displayName = "Tabs";
+
+// 리스트 — 원본 base에서 w-fit은 네이티브에 맞추기 위해 self-start(교차축 시작
+// 정렬로 내용 폭 수축)로 치환, h-9는 수평 전용 고정값을 받았고 text-muted-foreground
+// 는 이중 지정 원칙(컨테이너 글자색 무의미)으로 제거한다.
+const tabsListVariants = cva(
+  "flex-row self-start items-center justify-center rounded-lg p-1 h-9",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent rounded-none",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type TabsListProps = ViewProps & VariantProps<typeof tabsListVariants>;
+
+const TabsList = forwardRef<BridgeViewRef, TabsListProps>(
+  ({ className, variant, ...props }, ref) => {
+    const resolved = variant ?? "default";
+    return (
+      <TabsListContext.Provider value={{ variant: resolved }}>
+        <View
+          ref={ref}
+          accessibilityRole="tablist"
+          className={cn(tabsListVariants({ variant: resolved }), className)}
+          {...props}
+        />
+      </TabsListContext.Provider>
+    );
+  },
+);
+TabsList.displayName = "TabsList";
+
+export type TabsTriggerProps = PressableProps & {
+  value: string;
+  // 함수형 children은 내부 Text 래핑 구조와 양립하지 않아 문자열 children 권장.
+  children?: ReactNode;
+};
+
+const TabsTrigger = forwardRef<BridgePressableRef, TabsTriggerProps>(
+  ({ value, className, children, disabled, onPress, ...props }, ref) => {
+    const tabs = useTabsContext("TabsTrigger");
+    const list = useContext(TabsListContext);
+    const active = tabs.value === value;
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="tab"
+        aria-selected={active}
+        aria-controls={contentIdOf(tabs.baseId, value)}
+        disabled={disabled}
+        onPress={() => {
+          tabs.setValue(value);
+          onPress?.();
+        }}
+        className={cn(
+          "relative flex-row flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 web:transition-all",
+          "web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background",
+          // 원본 활성 토큰(bg-background·shadow-sm) — line 변형은 활성 시 배경
+          // 없이 인디케이터 바만(원본 line 활성 토큰이 bg-transparent).
+          active && list.variant !== "line" && "bg-background web:shadow-sm",
+          disabled && "web:pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {/* 이중 지정: 전경색은 내부 Text에(네이티브는 색 상속 불가) */}
+        <Text
+          className={cn(
+            "font-sans text-sm font-medium text-foreground/60 web:whitespace-nowrap web:hover:text-foreground",
+            active && "text-foreground",
+          )}
+        >
+          {children}
+        </Text>
+        {list.variant === "line" && (
+          <View
+            aria-hidden
+            className={cn(
+              "absolute inset-x-0 bottom-0 h-0.5 bg-foreground",
+              active ? "opacity-100" : "opacity-0",
+            )}
+          />
+        )}
+      </Pressable>
+    );
+  },
+);
+TabsTrigger.displayName = "TabsTrigger";
+
+export type TabsContentProps = ViewProps & {
+  value: string;
+};
+
+const TabsContent = forwardRef<BridgeViewRef, TabsContentProps>(
+  ({ value, className, children, nativeID, ...props }, ref) => {
+    const tabs = useTabsContext("TabsContent");
+    // 마운트/언마운트 방식 전환 — 높이 애니메이션은 불가하므로 즉시 전환.
+    if (tabs.value !== value) return null;
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="tabpanel"
+        nativeID={nativeID ?? contentIdOf(tabs.baseId, value)}
+        className={cn("flex-1 web:outline-none", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/components/textarea.tsx

@@ -0,0 +1,64 @@
+// Textarea — shadcn/ui new-york-v4 textarea를 UniKit 유니버설로 이식.
+//
+// 포팅 판단:
+// - <textarea> 요소 대신 브리지 TextInput에 multiline을 준다(웹 <textarea> ·
+//   네이티브 RN TextInput multiline — bridge/types.ts 계약). Input(src/components/
+//   input.tsx)과 같은 패턴: focus 링 토큰은 Input을 따르고, 원본 고유 토큰
+//   (min-h-16 최소 높이)은 보존.
+// - 원본의 aria-invalid:* 속성 셀렉터 스타일은 data 속성을 쓸 수 없어
+//   invalid?: boolean prop → 조건부 클래스(붉은 테두리·링)로 치환.
+// - 웹 전용 효과(field-sizing-content, shadow-xs, transition-*, outline-none,
+//   disabled 커서, md: 반응형 본문 크기)는 web: 접두.
+// - disabled 치환 계약(native: editable={false} · web: textarea[disabled] +
+//   aria-disabled)은 Input과 동일. 시각 효과(opacity-50)는 조건부 클래스로
+//   양쪽 플랫폼에 적용한다.
+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";
+
+// 컨테이너 — Input과 동일한 focus 링 + 원본의 min-h-16. 색은 TextInput
+// 자체가 글자 요소이므로 text-foreground를 여기에 명시(이중 지정 원칙).
+const textareaVariants = cva(
+  "font-sans min-h-16 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 web:field-sizing-content web:shadow-xs web:transition-all web:outline-none web:md:text-sm",
+);
+
+// invalid=true일 때 덧씌우는 조건부 클래스 — 원본 aria-invalid:* 치환.
+// twMerge가 border-input/focus:ring-ring 충돌을 뒤 값으로 정리한다.
+const textareaInvalidClasses =
+  "border-destructive focus:border-destructive focus:ring-destructive/20";
+
+// TextInputProps 그대로 + invalid(원본 aria-invalid 상태 visual 치환).
+export type TextareaProps = TextInputProps & {
+  /** 오류 상태 — 붉은 테두리·링을 조건부 클래스로 적용 */
+  invalid?: boolean;
+};
+
+const Textarea = forwardRef<BridgeTextInputRef, TextareaProps>(
+  ({ className, disabled, editable, invalid, ...props }, ref) => (
+    <TextInput
+      ref={ref}
+      multiline
+      editable={disabled ? false : editable}
+      aria-disabled={disabled ? true : undefined}
+      className={cn(
+        textareaVariants(),
+        invalid && textareaInvalidClasses,
+        disabled && "opacity-50 web:cursor-not-allowed",
+        className,
+      )}
+      {...props}
+      // 브리지 계약에 editable 치환으로 반영됐으므로 disabled는 그대로 전달
+      // (웹 textarea[disabled] · RN은 위 editable={false}가 차단)
+      disabled={disabled}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaVariants };

package/src/components/toggle-group.tsx

@@ -0,0 +1,187 @@
+// ToggleGroup — shadcn/ui new-york-v4 toggle-group을 UniKit 브리지로 이식.
+// 포팅 판단:
+// - radix ToggleGroup(Root/Item) 제거 — 선택 상태는 React context로 관리하고
+//   하위 항목은 Toggle(./toggle)에 pressed를 주입해 재사용한다.
+// - spacing prop · --gap CSS 변수 · data-spacing/first:/last: 셀렉터 제거 —
+//   의사 클래스·CSS 변수는 네이티브에서 재현 불가라 연접 대신 고정 gap-1 간격의
+//   독립 항목 배치로 단순화(항목의 rounded-md·테두리가 그대로 살아있다).
+// - single은 이미 선택된 항목 재선택 시 onValueChange("")(radix 원본 동작 준수),
+//   multiple은 배열 토글. 그룹 disabled는 항목에 일괄 전파.
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useState,
+} from "react";
+import {
+  View,
+  type BridgePressableRef,
+  type BridgeViewRef,
+  type ViewProps,
+} from "@unikit-bridge/ui/primitives";
+import type { VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+import { Toggle, toggleVariants, type ToggleProps } from "./toggle";
+
+// 그룹 상태 — ToggleGroup이 공급하고 ToggleGroupItem이 소비.
+type ToggleGroupContextValue = {
+  type: "single" | "multiple";
+  isSelected: (value: string) => boolean;
+  onItemPress: (value: string) => void;
+  variant: VariantProps<typeof toggleVariants>["variant"];
+  size: VariantProps<typeof toggleVariants>["size"];
+  disabled: boolean;
+};
+
+// 그룹 밖에서 Item을 쓴 경우의 폴백 — 눌림 없는 정적 항목으로 렌더(비권장).
+const ToggleGroupContext = createContext<ToggleGroupContextValue>({
+  type: "single",
+  isSelected: () => false,
+  onItemPress: () => {},
+  variant: "default",
+  size: "default",
+  disabled: false,
+});
+
+// shadcn 원본 API 준수 — type에 따라 value/onValueChange 시그니처가 갈린다.
+type ToggleGroupBaseProps = ViewProps &
+  VariantProps<typeof toggleVariants> & {
+    /** 단일/다중 선택 — 기본 single */
+    type?: "single" | "multiple";
+    /** 비제어형 초기값(single: 문자열, multiple: 배열) */
+    defaultValue?: string | string[];
+    /** 그룹 전체 차단 — 항목에 일괄 전파 */
+    disabled?: boolean;
+  };
+
+export type ToggleGroupProps = ToggleGroupBaseProps &
+  (
+    | {
+        type?: "single";
+        value?: string;
+        onValueChange?: (value: string) => void;
+      }
+    | {
+        type: "multiple";
+        value?: string[];
+        onValueChange?: (value: string[]) => void;
+      }
+  );
+
+// 내부 상태는 string[]로 통합(single은 길이 0~1 배열) — ""·undefined는 선택 없음.
+const toArray = (v: string | string[] | undefined): string[] =>
+  v === undefined || v === "" ? [] : Array.isArray(v) ? v : [v];
+
+const ToggleGroup = forwardRef<BridgeViewRef, ToggleGroupProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      type = "single",
+      value,
+      defaultValue,
+      onValueChange,
+      disabled = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolled, setUncontrolled] = useState(() =>
+      toArray(defaultValue),
+    );
+    const isControlled = value !== undefined;
+    const selected = isControlled ? toArray(value) : uncontrolled;
+
+    const isSelected = (itemValue: string) => selected.includes(itemValue);
+
+    const handleItemPress = (itemValue: string) => {
+      if (type === "multiple") {
+        const next = isSelected(itemValue)
+          ? selected.filter((v) => v !== itemValue)
+          : [...selected, itemValue];
+        if (!isControlled) setUncontrolled(next);
+        if (onValueChange) {
+          // type 브랜치가 보장하는 시그니처로 좁힌다(any 아님).
+          (onValueChange as (value: string[]) => void)(next);
+        }
+        return;
+      }
+      // single — 이미 선택된 항목 재선택 시 해제(radix 동작: 빈 문자열 방출)
+      const next = selected[0] === itemValue ? [] : [itemValue];
+      if (!isControlled) setUncontrolled(next);
+      if (onValueChange) {
+        (onValueChange as (value: string) => void)(next[0] ?? "");
+      }
+    };
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          // w-fit은 uniwind 미지원 — self-start 치환으로 양쪽 플랫폼 내용 폭(M-2).
+          "flex self-start flex-row items-center gap-1 rounded-md",
+          className,
+        )}
+        {...props}
+      >
+        <ToggleGroupContext.Provider
+          value={{
+            type,
+            isSelected,
+            onItemPress: handleItemPress,
+            variant,
+            size,
+            disabled,
+          }}
+        >
+          {children}
+        </ToggleGroupContext.Provider>
+      </View>
+    );
+  },
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+export type ToggleGroupItemProps = Omit<
+  ToggleProps,
+  "pressed" | "defaultPressed" | "onPressedChange"
+> & {
+  /** 이 항목의 값 */
+  value: string;
+};
+
+const ToggleGroupItem = forwardRef<BridgePressableRef, ToggleGroupItemProps>(
+  (
+    { className, variant, size, disabled, value, children, ...props },
+    ref,
+  ) => {
+    const group = useContext(ToggleGroupContext);
+    const isPressed = group.isSelected(value);
+    const isDisabled = disabled || group.disabled;
+
+    return (
+      <Toggle
+        ref={ref}
+        variant={group.variant ?? variant}
+        size={group.size ?? size}
+        pressed={isPressed}
+        disabled={isDisabled}
+        className={cn(
+          // 원본 항목 오버라이드: min-w-9 → min-w-0, px-2 → px-3. z-index는 웹 전용.
+          "w-auto min-w-0 shrink-0 px-3 web:focus:z-10 web:focus-visible:z-10",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </Toggle>
+    );
+  },
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };

package/src/components/toggle.tsx

@@ -0,0 +1,132 @@
+// Toggle — shadcn/ui new-york-v4 toggle을 UniKit 브리지로 이식.
+// 포팅 판단:
+// - radix Toggle 제거 — 눌림 상태는 React state(제어/비제어)로 관리.
+// - 원본의 data-state=on 셀렉터 → pressed 조건부 클래스(bg-accent·text-accent-foreground).
+// - [&_svg]:* 규칙은 아이콘 없는 글리프 구조(내부 Text)에서 대상이 없어 제외.
+// - 이중 지정 원칙(§0.5): 눌림 배경은 Pressable, 전경색(hover 포함)은 내부 Text에
+//   명시(네이티브는 컨테이너 색이 자식 Text로 상속되지 않는다).
+import { forwardRef, useState, type ReactNode } from "react";
+import {
+  Pressable,
+  Text,
+  type BridgePressableRef,
+  type PressableProps,
+} from "@unikit-bridge/ui/primitives";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+// 컨테이너(Pressable) — 원본 base의 hover:bg-muted(기본 변형 호버)를 포함.
+// outline 변형의 hover:bg-accent는 변형 클래스가 뒤에 오므로 twMerge가 대체한다.
+const toggleVariants = cva(
+  "flex flex-row items-center justify-center gap-2 rounded-md web:whitespace-nowrap web:transition-all web:outline-none web:hover:bg-muted web:focus-visible:border-ring web:focus-visible:ring-2 web:focus-visible:ring-ring/50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent web:shadow-xs web:hover:bg-accent",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+// 내부 Text — 변형별 hover 전경색(원본 base의 hover:text-muted-foreground와
+// outline 변형의 hover:text-accent-foreground 대응). pressed 오버라이드
+// (text-accent-foreground)는 렌더 시 조건부로 뒤에 합성한다.
+const toggleTextVariants = cva("font-sans text-sm font-medium", {
+  variants: {
+    variant: {
+      default: "text-foreground web:hover:text-muted-foreground",
+      outline: "text-foreground web:hover:text-accent-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// 터치 타깃 44px 보정 — h-9/h-8/h-10(button.tsx 관례와 동일 스케일).
+const HIT_SLOP = { default: 4, sm: 4, lg: 0 } as const;
+
+export type ToggleProps = Omit<PressableProps, "onPress" | "aria-pressed"> &
+  VariantProps<typeof toggleVariants> & {
+    /** 제어형 눌림 상태(지정 시 내부 state를 대체) */
+    pressed?: boolean;
+    /** 비제어형 초기 눌림 상태 */
+    defaultPressed?: boolean;
+    /** 눌림 전환 콜백 */
+    onPressedChange?: (pressed: boolean) => void;
+    children?: ReactNode;
+  };
+
+const Toggle = forwardRef<BridgePressableRef, ToggleProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      pressed,
+      defaultPressed = false,
+      onPressedChange,
+      disabled,
+      hitSlop,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    // 제어/비제어 통합 — toggle-group이 pressed를 주입할 때도 이 경로로 제어된다.
+    const [uncontrolled, setUncontrolled] = useState(defaultPressed);
+    const isControlled = pressed !== undefined;
+    const isPressed = isControlled ? pressed : uncontrolled;
+    const resolvedSize = size ?? "default";
+
+    const handlePress = () => {
+      const next = !isPressed;
+      if (!isControlled) setUncontrolled(next);
+      onPressedChange?.(next);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        aria-pressed={isPressed}
+        aria-disabled={disabled ? true : undefined}
+        disabled={disabled}
+        hitSlop={hitSlop ?? HIT_SLOP[resolvedSize]}
+        onPress={handlePress}
+        className={cn(
+          toggleVariants({ variant, size }),
+          // 원본의 on 상태 bg-accent 전개 — bg-transparent를 twMerge가 대체.
+          isPressed && "bg-accent",
+          disabled && "web:pointer-events-none opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <Text
+          className={cn(
+            toggleTextVariants({ variant }),
+            isPressed && "text-accent-foreground",
+          )}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  },
+);
+Toggle.displayName = "Toggle";
+
+export { Toggle, toggleVariants, toggleTextVariants };