@uniai-fe/uds-primitives 0.4.7 → 0.5.0

package/src/components/badge/types/props.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+import type { BadgePreset, BadgeSize, BadgeStyle } from "./options";
+
+type NativeFigureProps = Omit<ComponentPropsWithoutRef<"figure">, "style">;
+
+/**
+ * Badge Props; status/info label badge public props
+ * @property {ReactNode} [children] 표시할 라벨이다. 생략하면 dot만 렌더링한다.
+ * @property {"xsmall" | "small" | "medium"} [size] Figma size 축이다.
+ * @property {"fill" | "outlined" | "dot" | "count"} [style] badge 시각 스타일 축이다.
+ * @property {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [preset] style에 대응하는 semantic 색상 preset이다.
+ * @property {string} [textColor] 라벨 텍스트 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {string} [backgroundColor] 배경 또는 dot 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {string} [borderColor] 외곽선 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {CSSProperties} [inlineStyle] 원본 figure 요소에 적용할 inline style이다.
+ */
+export interface BadgeProps extends Omit<NativeFigureProps, "children"> {
+  /**
+   * 표시할 라벨. 생략하면 dot 스타일만 렌더링된다.
+   */
+  children?: ReactNode;
+  /**
+   * Figma size 축 (xsmall/small/medium)
+   */
+  size?: BadgeSize;
+  /**
+   * style 축 (fill/outlined/dot/count)
+   */
+  style?: BadgeStyle;
+  /**
+   * style에 대응하는 semantic 색상 preset이다.
+   */
+  preset?: BadgePreset;
+  /**
+   * 라벨 텍스트 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-common-100)`
+   */
+  textColor?: string;
+  /**
+   * 배경 또는 dot 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-primary-default)`
+   */
+  backgroundColor?: string;
+  /**
+   * 외곽선 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-border-assistive)`
+   */
+  borderColor?: string;
+  /**
+   * 원본 figure 요소에 적용할 인라인 스타일.
+   */
+  inlineStyle?: CSSProperties;
+}

package/src/components/switch/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/switch/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Switch; standard toggle leaf 카테고리 배럴
+ * @desc
+ * - `Switch`: on/off 전환만 담당하는 leaf switch 컴포넌트다.
+ * - `SwitchProps`, `SwitchSize`: public 계약 타입이다.
+ */
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/switch/markup/Switch.tsx

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import type { MouseEvent } from "react";
+import type { SwitchProps } from "../types";
+
+/**
+ * Switch; standard on/off toggle leaf 컴포넌트
+ * @component
+ * @param {SwitchProps} props
+ * @param {"small" | "medium"} [props.size="small"] Figma size 축이다.
+ * @param {boolean} [props.checked] 제어형 checked 상태다.
+ * @param {boolean} [props.defaultChecked=false] 비제어 초기 checked 상태다.
+ * @param {(checked: boolean, event: MouseEvent<HTMLButtonElement>) => void} [props.onCheckedChange]
+ *  checked 상태 변경 핸들러다.
+ * @param {boolean} [props.disabled] 비활성 여부다.
+ * @param {string} [props.className] button root className override다.
+ * @example
+ * <Switch aria-label="알림 수신" defaultChecked />
+ */
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  {
+    size = "small",
+    checked,
+    defaultChecked = false,
+    disabled = false,
+    className,
+    onCheckedChange,
+    onClick,
+    ...restProps
+  },
+  ref,
+) {
+  const [uncontrolledChecked, setUncontrolledChecked] =
+    useState(defaultChecked);
+  const isControlled = typeof checked === "boolean";
+  const isChecked = isControlled ? checked : uncontrolledChecked;
+
+  const onToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    // 변경: 소비자가 defaultPrevented로 토글을 막을 수 있도록 onClick을 먼저 실행한다.
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    const nextChecked = !isChecked;
+
+    if (!isControlled) {
+      setUncontrolledChecked(nextChecked);
+    }
+
+    onCheckedChange?.(nextChecked, event);
+  };
+
+  return (
+    <button
+      {...restProps}
+      ref={ref}
+      type="button"
+      role="switch"
+      aria-checked={isChecked}
+      disabled={disabled}
+      className={clsx("switch", className)}
+      data-size={size}
+      data-state={isChecked ? "checked" : "unchecked"}
+      onClick={onToggle}
+    >
+      {/* 변경: standard variant는 handle만 렌더링하고, with text는 후속 확장 범위로 보류한다. */}
+      <span className="switch-handle" aria-hidden="true" />
+    </button>
+  );
+});
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/components/switch/markup/index.ts

@@ -0,0 +1 @@
+export { Switch } from "./Switch";

package/src/components/switch/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./switch.scss";

package/src/components/switch/styles/switch.scss

@@ -0,0 +1,63 @@
+.switch {
+  --switch-track-width: var(--switch-track-width-small);
+  --switch-track-height: var(--switch-track-height-small);
+  --switch-track-padding: var(--switch-track-padding-small);
+  --switch-handle-size: var(--switch-handle-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--switch-track-width);
+  min-width: var(--switch-track-width);
+  height: var(--switch-track-height);
+  padding: var(--switch-track-padding);
+  border: none;
+  border-radius: 999px;
+  background-color: var(--switch-track-background-unchecked);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.switch:where([data-size="medium"]) {
+  --switch-track-width: var(--switch-track-width-medium);
+  --switch-track-height: var(--switch-track-height-medium);
+  --switch-track-padding: var(--switch-track-padding-medium);
+  --switch-handle-size: var(--switch-handle-size-medium);
+}
+
+.switch:where([data-state="checked"]) {
+  background-color: var(--switch-track-background-checked);
+}
+
+.switch:where(:focus-visible) {
+  box-shadow: 0 0 0 2px var(--switch-focus-ring);
+}
+
+.switch:where(:disabled) {
+  cursor: not-allowed;
+  opacity: var(--switch-disabled-opacity);
+}
+
+.switch-handle {
+  display: flex;
+  width: var(--switch-handle-size);
+  min-width: var(--switch-handle-size);
+  height: var(--switch-handle-size);
+  border-radius: 999px;
+  background-color: var(--switch-thumb-background);
+  box-shadow: var(--switch-thumb-shadow-unchecked);
+  transition: transform 0.2s ease;
+}
+
+.switch:where([data-state="checked"]) .switch-handle {
+  /* 변경: handle 이동 거리는 frame width - handle size - 양쪽 padding 합으로 고정한다. */
+  box-shadow: var(--switch-thumb-shadow-checked);
+  transform: translateX(
+    calc(
+      var(--switch-track-width) - var(--switch-handle-size) -
+        (var(--switch-track-padding) * 2)
+    )
+  );
+}

package/src/components/switch/styles/variables.scss

@@ -0,0 +1,21 @@
+:root {
+  --switch-track-width-small: 48px;
+  --switch-track-height-small: 24px;
+  --switch-track-padding-small: 3px;
+  --switch-handle-size-small: 18px;
+
+  --switch-track-width-medium: 68px;
+  --switch-track-height-medium: 34px;
+  --switch-track-padding-medium: 2px;
+  --switch-handle-size-medium: 30px;
+
+  --switch-track-background-unchecked: var(--color-surface-strong);
+  --switch-track-background-checked: var(--color-primary-standard);
+  --switch-thumb-background: var(--color-surface-static-white);
+  --switch-thumb-shadow-unchecked:
+    0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
+  --switch-thumb-shadow-checked:
+    0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
+  --switch-focus-ring: var(--color-primary-focus);
+  --switch-disabled-opacity: 0.4;
+}

package/src/components/switch/types/index.ts

@@ -0,0 +1 @@
+export type * from "./switch";

package/src/components/switch/types/switch.ts

@@ -0,0 +1,46 @@
+import type { ComponentPropsWithoutRef, MouseEvent } from "react";
+
+type NativeButtonProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-checked" | "children" | "onChange" | "role" | "type"
+>;
+
+/**
+ * Switch size; standard switch size 축
+ * @typedef {"small" | "medium"} SwitchSize
+ */
+export type SwitchSize = "small" | "medium";
+
+/**
+ * Switch props; standard toggle leaf public props
+ * @property {"small" | "medium"} [size] Figma size 축이다.
+ * @property {boolean} [checked] 제어형 checked 상태다.
+ * @property {boolean} [defaultChecked] 비제어 초기 checked 상태다.
+ * @property {(checked: boolean, event: MouseEvent<HTMLButtonElement>) => void} [onCheckedChange] checked 상태 변경 핸들러다.
+ * @property {boolean} [disabled] 비활성 여부다.
+ */
+export interface SwitchProps extends NativeButtonProps {
+  /**
+   * Figma size 축이다.
+   */
+  size?: SwitchSize;
+  /**
+   * 제어형 checked 상태다.
+   */
+  checked?: boolean;
+  /**
+   * 비제어 초기 checked 상태다.
+   */
+  defaultChecked?: boolean;
+  /**
+   * checked 상태 변경 핸들러다.
+   */
+  onCheckedChange?: (
+    checked: boolean,
+    event: MouseEvent<HTMLButtonElement>,
+  ) => void;
+  /**
+   * 비활성 여부다.
+   */
+  disabled?: boolean;
+}

package/src/components/tab/index.tsx

@@ -3,11 +3,10 @@
  * @desc
  * - `TabRoot`: tabs value 상태를 관리하는 루트다.
  * - `TabList`, `TabTrigger`, `TabContent`: tabs anatomy 도구다.
- * - `TabContext`, `useTabContext`: tab 스타일 context util이다.
+ * - `TabContext`, `useTabContext`: tab 스타일 공유 context util이다.
  */
 import "./index.scss";
 
 export * from "./markup";
-export * from "./hooks";
 export type * from "./types";
 export * from "./utils";

package/src/components/tab/markup/Label.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import { Slot } from "../../slot";
+import type { TabLabelProps } from "../types";
+
+/**
+ * Tab Label; trigger label className 고정 텍스트 슬롯
+ * @component
+ * @param {TabLabelProps} props
+ * @param {React.ElementType} [props.as] 렌더링할 요소. 기본값은 span.
+ * @param {React.ReactNode} [props.children] 라벨 콘텐츠.
+ * @param {string} [props.className] 라벨 className.
+ */
+const TabLabel = ({ className, ...restProps }: TabLabelProps) => {
+  return (
+    <Slot.Text
+      className={clsx("tab-trigger-label", className)}
+      {...restProps}
+    />
+  );
+};
+
+export { TabLabel };

package/src/components/tab/markup/TabList.tsx

@@ -1,9 +1,9 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
-import { forwardRef, useEffect, useMemo } from "react";
+import { forwardRef } from "react";
 import type { CSSProperties } from "react";
 import type { TabListProps } from "../types";
-import { useTabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
+import { DEFAULT_TAB_CONTEXT_VALUE, TabContext, useTabContext } from "../utils";
 
 /**
  * TabList: Tab trigger container with variant/tone propagation.
@@ -38,36 +38,34 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(
       scale ?? parentContext.scale ?? DEFAULT_TAB_CONTEXT_VALUE.scale;
     const resolvedColor =
       color ?? parentContext.color ?? DEFAULT_TAB_CONTEXT_VALUE.color;
-
-    useEffect(() => {
-      parentContext.setSharedConfig?.(
-        resolvedVariant,
-        resolvedColor,
-        resolvedScale,
-      );
-    }, [parentContext, resolvedVariant, resolvedColor, resolvedScale]);
-
-    const listStyle = useMemo<CSSProperties>(
-      () => ({
-        ...(style ?? {}),
-        "--tab-color-active": resolvedColor,
-      }),
-      [style, resolvedColor],
-    );
+    // 변경: List-local override는 nearest provider로만 전달해 Root state 역주입을 제거한다.
+    const listStyle = color
+      ? ({
+          ...(style ?? {}),
+          "--tab-color-active": resolvedColor,
+        } as CSSProperties)
+      : style;
 
     return (
-      <TabsPrimitive.List
-        {...restProps}
-        ref={forwardedRef}
-        className={clsx("tab-list", className)}
-        data-variant={resolvedVariant}
-        data-scale={resolvedScale}
-        data-full-width={fullWidth ? "true" : undefined}
-        data-color={resolvedColor}
-        style={listStyle}
+      <TabContext.Provider
+        value={{
+          variant: resolvedVariant,
+          color: resolvedColor,
+          scale: resolvedScale,
+        }}
       >
-        {children}
-      </TabsPrimitive.List>
+        <TabsPrimitive.List
+          {...restProps}
+          ref={forwardedRef}
+          className={clsx("tab-list", className)}
+          data-variant={resolvedVariant}
+          data-scale={resolvedScale}
+          data-full-width={fullWidth ? "true" : undefined}
+          style={listStyle}
+        >
+          {children}
+        </TabsPrimitive.List>
+      </TabContext.Provider>
     );
   },
 );

package/src/components/tab/markup/TabRoot.tsx

@@ -1,31 +1,10 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { forwardRef } from "react";
 import type { CSSProperties } from "react";
-import type { TabRootProps, TabScale } from "../types";
+import type { TabRootProps } from "../types";
 import { TabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
 
-const TAB_SCALE_STYLES: Record<TabScale, Record<string, string>> = {
-  small: {
-    "--tab-label-font-size": "var(--font-heading-xxsmall-size, 15px)",
-    "--tab-label-font-weight": "var(--font-heading-xxsmall-weight, 600)",
-    "--tab-height": "40px",
-    "--tab-padding-x": "var(--spacing-padding-4, 8px)",
-  },
-  medium: {
-    "--tab-label-font-size": "var(--font-heading-xsmall-size, 17px)",
-    "--tab-label-font-weight": "var(--font-heading-xsmall-weight, 600)",
-    "--tab-height": "48px",
-    "--tab-padding-x": "var(--spacing-padding-8, 24px)",
-  },
-  large: {
-    "--tab-label-font-size": "var(--font-heading-small-size, 19px)",
-    "--tab-label-font-weight": "var(--font-heading-small-weight, 600)",
-    "--tab-height": "56px",
-    "--tab-padding-x": "var(--spacing-padding-8, 24px)",
-  },
-};
-
 /**
  * TabRoot: TabsPrimitive.Root thin wrapper with tab data context.
  * @component
@@ -43,9 +22,9 @@ const TAB_SCALE_STYLES: Record<TabScale, Record<string, string>> = {
 const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
   (
     {
-      variant: variantProp = DEFAULT_TAB_CONTEXT_VALUE.variant,
-      scale: scaleProp = DEFAULT_TAB_CONTEXT_VALUE.scale,
-      color: colorProp = DEFAULT_TAB_CONTEXT_VALUE.color,
+      variant: variantProp,
+      scale: scaleProp,
+      color: colorProp,
       className,
       children,
       style,
@@ -53,53 +32,19 @@ const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
     },
     forwardedRef,
   ) => {
-    const [variant, setVariant] = useState(variantProp);
-    const [color, setColor] = useState(colorProp);
-    const [scale, setScale] = useState(scaleProp);
-
-    useEffect(() => {
-      setVariant(variantProp);
-    }, [variantProp]);
-
-    useEffect(() => {
-      setColor(colorProp);
-    }, [colorProp]);
-
-    useEffect(() => {
-      setScale(scaleProp);
-    }, [scaleProp]);
-
-    const contextValue = useMemo(
-      () => ({
-        variant,
-        color,
-        scale,
-        setSharedConfig: (
-          nextVariant: typeof variant,
-          nextColor: typeof color,
-          nextScale: typeof scale,
-        ) => {
-          setVariant(nextVariant);
-          setColor(nextColor);
-          setScale(nextScale);
-        },
-      }),
-      [variant, color, scale],
-    );
-
-    const resolvedScaleStyle =
-      TAB_SCALE_STYLES[scale] ?? TAB_SCALE_STYLES.medium;
-    const rootStyle = useMemo<CSSProperties>(
-      () => ({
-        ...(style ?? {}),
-        "--tab-color-active": color,
-        ...resolvedScaleStyle,
-      }),
-      [style, color, resolvedScaleStyle],
-    );
+    const variant = variantProp ?? DEFAULT_TAB_CONTEXT_VALUE.variant;
+    const scale = scaleProp ?? DEFAULT_TAB_CONTEXT_VALUE.scale;
+    const color = colorProp ?? DEFAULT_TAB_CONTEXT_VALUE.color;
+    // 변경: runtime color prop만 CSS 변수로 주입하고, size 토큰은 styles/variables.scss에서 관리한다.
+    const rootStyle = colorProp
+      ? ({
+          ...(style ?? {}),
+          "--tab-color-active": colorProp,
+        } as CSSProperties)
+      : style;
 
     return (
-      <TabContext.Provider value={contextValue}>
+      <TabContext.Provider value={{ variant, color, scale }}>
         <TabsPrimitive.Root
           {...restProps}
           ref={forwardedRef}

package/src/components/tab/markup/TabTrigger.tsx

@@ -1,21 +1,9 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import type { ReactNode } from "react";
 import type { TabTriggerProps } from "../types";
 import { useTabContext } from "../utils";
-
-const wrapLabel = (children: ReactNode) => {
-  if (children === null || children === undefined) {
-    return null;
-  }
-
-  if (typeof children === "string" || typeof children === "number") {
-    return <span className="tab-trigger-label">{children}</span>;
-  }
-
-  return children;
-};
+import { TabLabel } from "./Label";
 
 /**
  * TabTrigger: 개별 탭 버튼. icon slot을 지원한다.
@@ -31,7 +19,6 @@ const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
   ({ icon, children, className, ...restProps }, forwardedRef) => {
     const { variant, scale } = useTabContext();
     const hasIcon = Boolean(icon);
-    const normalizedChildren = wrapLabel(children);
 
     return (
       <TabsPrimitive.Trigger
@@ -44,7 +31,7 @@ const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
         data-disabled={restProps.disabled ? "true" : undefined}
       >
         {icon ? <span className="tab-trigger-icon">{icon}</span> : null}
-        {normalizedChildren}
+        <TabLabel>{children}</TabLabel>
       </TabsPrimitive.Trigger>
     );
   },