@uniai-fe/uds-primitives 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -55,8 +55,6 @@
   "peerDependencies": {
     "@uniai-fe/uds-foundation": "^0.0.1",
     "@uniai-fe/util-functions": "^0.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "react": ">= 19",
     "react-dom": ">= 19",
@@ -72,13 +70,10 @@
     "@radix-ui/react-primitive": "^2.1.4",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/themes": "^3.2.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",

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

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(alternate): 스타일을 SOT 토큰 값으로 정의한다. */

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

@@ -1,7 +1,5 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Badge 토큰을 foundation 변수에 맞춰 한 번 더 래핑해 override 여지를 둔다. */
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
   --theme-badge-height-small: var(--theme-size-small-2, 24px);
   --theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);

package/src/components/button/styles/button.scss

@@ -1,4 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
 @use "sass:map";
 
 :root {

package/src/components/button/styles/round-button.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .button.button-template-round {
   min-width: auto;
   padding-block: var(

package/src/components/button/styles/text-button.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .button.button-template-text {
   min-width: auto;
   border-color: transparent;

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

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(calendar): 스타일을 SOT 토큰 값으로 정의한다. */

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

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-checkbox-frame-size-medium: 20px;
   --theme-checkbox-frame-size-large: 24px;
   --theme-checkbox-indicator-size-medium: 16px;

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

@@ -1,7 +1,5 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Chip 기본 토큰 래핑 */
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-chip-height: var(--theme-size-small-3, 32px);
   --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
   --theme-chip-radius: var(--theme-radius-medium-3, 8px);

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

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   // Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
   --drawer-surface-bg: var(--color-bg-surface-static-white);

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

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(dropdown): 스타일을 SOT 토큰 값으로 정의한다. */

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

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-input-height-small: var(--theme-size-medium-1);
   --theme-input-height-medium: var(--theme-size-medium-2);
   --theme-input-height-large: var(--theme-size-medium-3);
@@ -196,6 +194,7 @@
     border: none;
     background: transparent;
     color: var(--theme-input-text-color);
+    caret-color: var(--theme-input-text-color);
     font-size: var(--font-body-medium-size);
     line-height: var(--font-body-medium-line-height);
     font-weight: var(--font-body-medium-weight);

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

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(label): 스타일을 SOT 토큰 값으로 정의한다. */

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

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;

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

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Pagination native 구현 스타일 */
 
 .pagination {

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

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root) {
+.uds-theme-root {
   --theme-radio-frame-size-medium: 20px;
   --theme-radio-frame-size-large: 24px;
   --theme-radio-indicator-size-medium: 16px;

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

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(scrollbar): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/segmented-control/markup/Container.tsx

@@ -0,0 +1,255 @@
+import clsx from "clsx";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from "react";
+import type {
+  SegmentedControlIndicatorRect,
+  SegmentedControlProps,
+  SegmentedControlValue,
+} from "../types";
+import { SegmentedControlIndicator } from "./Indicator";
+import { SegmentedControlList } from "./List";
+
+// 빈 문자열이나 undefined를 내부 상태에서 공통적으로 undefined로 처리해 keepSelected 로직을 단순화한다.
+const toNullableValue = (value?: SegmentedControlValue) =>
+  value === undefined || value === "" ? undefined : value;
+
+/**
+ * @component SegmentedControl
+ * @desc keepSelected 토글과 indicator/list 레이어를 native로 구성한 Segmented Control 루트 컴포넌트.
+ * @param {SegmentedControlProps} props 루트에 전달되는 props.
+ * @param {SegmentedControlOption[]} props.options 선택지 배열.
+ * @param {string} props.ariaLabel 라디오 그룹 접근성 라벨.
+ * @param {boolean} [props.keepSelected=true] 이미 on 상태인 항목을 다시 눌러도 선택 해제를 막을지 여부.
+ * @param {SegmentedControlValue} [props.value] 제어형 값.
+ * @param {SegmentedControlValue} [props.defaultValue] 비제어 초기 값.
+ * @param {(value: SegmentedControlValue) => void} [props.onValueChange] 값 변경 콜백.
+ * @param {string} [props.className] 최상위 className.
+ */
+const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  (
+    {
+      options,
+      ariaLabel,
+      keepSelected = true,
+      className,
+      onValueChange,
+      value: valueProp,
+      defaultValue,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    // value prop 제공 여부로 제어형/비제어형을 구분한다.
+    const isControlled = valueProp !== undefined;
+    // keepSelected=false일 때 해제를 허용하기 위해 내부 값은 undefined 허용으로 둔다.
+    const [uncontrolledValue, setUncontrolledValue] = useState<
+      SegmentedControlValue | undefined
+    >(toNullableValue(defaultValue));
+    const selectedValue = toNullableValue(
+      isControlled ? valueProp : uncontrolledValue,
+    );
+    // 루트 컨테이너 ref는 indicator 측정과 ResizeObserver 구독에 활용된다.
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    // 각 버튼 ref 배열. Arrow/Home/End 탐색 시 focus를 직접 이동한다.
+    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
+    // indicatorRect는 indicator figure의 width/translateX를 계산하는 단일 소스다.
+    const [indicatorRect, setIndicatorRect] =
+      useState<SegmentedControlIndicatorRect>({
+        width: 0,
+        left: 0,
+      });
+
+    const emitChange = useCallback(
+      (nextValue: SegmentedControlValue | undefined) => {
+        if (!isControlled) {
+          setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue ?? "");
+      },
+      [isControlled, onValueChange],
+    );
+
+    // 제어형/비제어형을 통합해 현재 선택된 value를 계산한다.
+    const resolvedValue = useMemo(
+      () => selectedValue ?? undefined,
+      [selectedValue],
+    );
+
+    // 현재 value에 해당하는 index. 값이 없으면 첫 번째 활성 항목을 포커스 대상으로 사용한다.
+    const selectedIndex = useMemo(
+      () => options.findIndex(option => option.value === selectedValue),
+      [options, selectedValue],
+    );
+    const fallbackIndex = useMemo(() => {
+      return options.findIndex(option => !option.disabled);
+    }, [options]);
+    const focusableIndex =
+      selectedIndex >= 0
+        ? selectedIndex
+        : fallbackIndex >= 0
+          ? fallbackIndex
+          : -1;
+
+    // Arrow 키 이동 시 다음 사용 가능한 index를 찾는다. disabled 옵션은 자동으로 건너뛴다.
+    const getNextEnabledIndex = useCallback(
+      (currentIndex: number, direction: 1 | -1) => {
+        if (options.length === 0) {
+          return -1;
+        }
+        let index = currentIndex;
+        for (let i = 0; i < options.length; i += 1) {
+          index = (index + direction + options.length) % options.length;
+          const option = options[index];
+          if (option && !option.disabled) {
+            return index;
+          }
+        }
+        return currentIndex;
+      },
+      [options],
+    );
+
+    // Button ref를 통해 포커스를 직접 이동한다.
+    const focusItemAt = useCallback((index: number) => {
+      const node = itemRefs.current[index];
+      if (node) {
+        node.focus();
+      }
+    }, []);
+
+    const handleArrowNavigation = useCallback(
+      (event: KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {
+        if (options.length === 0) {
+          return;
+        }
+        const key = event.key;
+        if (
+          key !== "ArrowRight" &&
+          key !== "ArrowLeft" &&
+          key !== "ArrowUp" &&
+          key !== "ArrowDown"
+        ) {
+          return;
+        }
+        event.preventDefault();
+        const direction = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1;
+        const nextIndex = getNextEnabledIndex(currentIndex, direction);
+        if (nextIndex === currentIndex) {
+          return;
+        }
+        const nextOption = options[nextIndex];
+        if (nextOption) {
+          focusItemAt(nextIndex);
+          emitChange(nextOption.value);
+        }
+      },
+      [emitChange, focusItemAt, getNextEnabledIndex, options],
+    );
+
+    /**
+     * 선택된 버튼의 위치 + root padding을 사용해 indicator 좌표를 계산한다.
+     * transform 이동만 수행하므로 padding 값을 더해 container 내부에 고정한다.
+     */
+    const measureIndicator = useCallback(() => {
+      if (!resolvedValue) {
+        setIndicatorRect({ width: 0, left: 0 });
+        return;
+      }
+      const index = options.findIndex(option => option.value === resolvedValue);
+      if (index === -1) {
+        setIndicatorRect({ width: 0, left: 0 });
+        return;
+      }
+      const node = itemRefs.current[index];
+      if (!node) {
+        return;
+      }
+      const paddingLeft =
+        typeof window !== "undefined" && rootRef.current
+          ? Number.parseFloat(
+              window.getComputedStyle(rootRef.current).paddingLeft ?? "0",
+            )
+          : 0;
+      const normalizedLeft = node.offsetLeft + paddingLeft;
+      setIndicatorRect({
+        width: node.offsetWidth,
+        left: Number.isNaN(normalizedLeft) ? 0 : normalizedLeft,
+      });
+    }, [options, resolvedValue]);
+
+    // DOM이 렌더된 직후 선택된 항목 기준으로 indicator를 한 번 맞춘다.
+    useLayoutEffect(() => {
+      measureIndicator();
+    }, [measureIndicator]);
+
+    useEffect(() => {
+      if (!rootRef.current || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      // root padding이나 label 길이에 따른 폭 변경을 추적해 indicator 위치를 재계산한다.
+      const observer = new ResizeObserver(() => {
+        measureIndicator();
+      });
+      observer.observe(rootRef.current);
+      return () => observer.disconnect();
+    }, [measureIndicator]);
+
+    const setRootRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        rootRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          (forwardedRef as { current: HTMLDivElement | null }).current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    // 첫 렌더에서 width=0이면 indicator를 숨겨 깜박임을 방지한다.
+    const indicatorVisible = indicatorRect.width > 0;
+
+    return (
+      <div
+        {...restProps}
+        ref={setRootRef}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        className={clsx(
+          "segmented-control segmented-control-container",
+          className,
+        )}
+        data-keep-selected={keepSelected ? "true" : undefined}
+      >
+        {/* indicator와 list를 분리해 DOM 구조가 단순한 flex 계층을 유지한다. */}
+        <SegmentedControlIndicator
+          rect={indicatorRect}
+          visible={indicatorVisible}
+        />
+        <SegmentedControlList
+          options={options}
+          keepSelected={keepSelected}
+          selectedValue={selectedValue}
+          focusableIndex={focusableIndex}
+          fallbackIndex={fallbackIndex}
+          itemRefs={itemRefs}
+          onSelect={emitChange}
+          onFocusItemAt={focusItemAt}
+          onArrowNavigate={handleArrowNavigation}
+        />
+      </div>
+    );
+  },
+);
+
+SegmentedControl.displayName = "SegmentedControl";
+
+export { SegmentedControl };

package/src/components/segmented-control/markup/Indicator.tsx

@@ -0,0 +1,31 @@
+import type { SegmentedControlIndicatorProps } from "../types";
+
+/**
+ * @component SegmentedControlIndicator
+ * @desc 선택된 항목 아래를 따라 이동하는 시각적 indicator 레이어.
+ * @param {SegmentedControlIndicatorProps} props indicator 렌더링에 사용되는 props.
+ * @param {SegmentedControlIndicatorRect} props.rect width/left 정보를 담은 사각형 값.
+ * @param {boolean} props.visible indicator 표시 여부.
+ */
+const SegmentedControlIndicator = ({
+  rect,
+  visible,
+}: SegmentedControlIndicatorProps) => {
+  const style = visible
+    ? {
+        width: `${rect.width}px`,
+        transform: `translateX(${rect.left}px)`,
+      }
+    : undefined;
+
+  return (
+    <figure
+      className="segmented-control-indicator"
+      style={style}
+      data-visible={visible ? "true" : "false"}
+      aria-hidden="true"
+    />
+  );
+};
+
+export { SegmentedControlIndicator };

package/src/components/segmented-control/markup/List.tsx

@@ -0,0 +1,125 @@
+import type {
+  SegmentedControlButtonEvent,
+  SegmentedControlListProps,
+} from "../types";
+import type { KeyboardEvent } from "react";
+
+/**
+ * @component SegmentedControlList
+ * @desc Segmented Control의 버튼 리스트 레이어로, 포커스/키보드/keepSelected 로직을 캡슐화한다.
+ * @param {SegmentedControlListProps} props 리스트 렌더링에 사용되는 props.
+ * @param {SegmentedControlOption[]} props.options 렌더링할 옵션 배열.
+ * @param {boolean} props.keepSelected 동일 항목 재선택 시 해제 여부.
+ * @param {SegmentedControlValue | undefined} props.selectedValue 현재 선택된 값.
+ * @param {number} props.focusableIndex 포커스를 받을 기본 index.
+ * @param {number} props.fallbackIndex 첫 번째 활성화 index.
+ * @param {MutableRefObject<Array<HTMLButtonElement | null>>} props.itemRefs 버튼 ref 목록.
+ * @param {(value: SegmentedControlValue | undefined) => void} props.onSelect 값 변경 콜백.
+ * @param {(index: number) => void} props.onFocusItemAt index 포커스 함수.
+ * @param {(event: KeyboardEvent<HTMLButtonElement>, currentIndex: number) => void} props.onArrowNavigate 화살표 키 처리 콜백.
+ */
+const SegmentedControlList = ({
+  options,
+  keepSelected,
+  selectedValue,
+  focusableIndex,
+  fallbackIndex,
+  itemRefs,
+  onSelect,
+  onFocusItemAt,
+  onArrowNavigate,
+}: SegmentedControlListProps) => (
+  <ul className="segmented-control-list">
+    {options.map((option, index) => {
+      const isDisabled = Boolean(option.disabled);
+      const isSelected = selectedValue === option.value;
+      const tabIndex =
+        isDisabled || focusableIndex === -1
+          ? -1
+          : index === focusableIndex
+            ? 0
+            : -1;
+
+      // 모든 상호작용에서 공통으로 disabled 상태를 막는다.
+      const stopIfDisabled = (event: SegmentedControlButtonEvent) => {
+        if (!isDisabled) {
+          return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+      };
+
+      // keepSelected=false일 때만 동일 버튼을 눌러 selection을 해제한다.
+      const handleClick = (event: SegmentedControlButtonEvent) => {
+        if (stopIfDisabled(event)) {
+          return;
+        }
+        if (!keepSelected && isSelected) {
+          onSelect(undefined);
+          return;
+        }
+        onSelect(option.value);
+      };
+
+      // Home/End는 양 끝으로, Arrow는 상위에서 전달된 로직을 호출한다.
+      const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (stopIfDisabled(event)) {
+          return;
+        }
+        if (event.key === "Home") {
+          event.preventDefault();
+          if (fallbackIndex >= 0) {
+            onFocusItemAt(fallbackIndex);
+            const fallbackOption = options[fallbackIndex];
+            if (fallbackOption) {
+              onSelect(fallbackOption.value);
+            }
+          }
+          return;
+        }
+        if (event.key === "End") {
+          event.preventDefault();
+          for (let i = options.length - 1; i >= 0; i -= 1) {
+            const candidate = options[i];
+            if (!candidate.disabled) {
+              onFocusItemAt(i);
+              onSelect(candidate.value);
+              break;
+            }
+          }
+          return;
+        }
+        onArrowNavigate(event, index);
+      };
+
+      return (
+        <li className="segmented-control-item" key={option.value}>
+          <button
+            ref={node => {
+              itemRefs.current[index] = node;
+            }}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            tabIndex={tabIndex}
+            className="segmented-control-button"
+            data-state={isSelected ? "on" : "off"}
+            data-disabled={isDisabled ? "true" : undefined}
+            onPointerDown={stopIfDisabled}
+            onFocus={stopIfDisabled}
+            onKeyDown={handleKeyDown}
+            onClick={handleClick}
+            disabled={isDisabled}
+          >
+            <span className="segmented-control-button-label">
+              {option.label}
+            </span>
+          </button>
+        </li>
+      );
+    })}
+  </ul>
+);
+
+export { SegmentedControlList };

package/src/components/segmented-control/markup/index.ts

@@ -1 +1 @@
-export * from "./SegmentedControl";
+export * from "./Container";