@uniai-fe/uds-primitives 0.0.18 → 0.0.19

package/dist/styles.css

@@ -3112,94 +3112,95 @@ figure.chip {
   --segmented-label-color: var(--color-label-neutral, #797e86);
   --segmented-label-active-color: var(--color-label-strong, #181a1b);
   --segmented-disabled-opacity: 0.4;
+  --segmented-gap: 2px;
   --segmented-item-padding-x: 22px;
   --segmented-item-padding-y: 4px;
   --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
   --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
   --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  align-items: stretch;
+  position: relative;
+  display: block;
+  box-sizing: border-box;
   padding: var(--segmented-padding);
   border-radius: var(--segmented-radius);
   background: var(--segmented-bg);
   width: fit-content;
-  height: var(--segmented-height);
-  font-size: 0;
+  min-height: var(--segmented-height);
   isolation: isolate;
-}
-
-.segmented-control:where(.rt-SegmentedControlRoot) {
-  /* Radix Theme 기본 inline-grid를 덮어 동일한 sizing 시스템에서만 layout이 될 수 있도록 한다. */
-  display: grid;
+  overflow: hidden;
 }
 
 .segmented-control:where([data-keep-selected=true]) {
   --segmented-disabled-opacity: 0.3;
 }
 
-.segmented-control :where(.rt-SegmentedControlIndicator) {
-  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  background: transparent;
-  box-shadow: none;
-  overflow: hidden;
-}
-
-.segmented-control :where(.rt-SegmentedControlIndicator)::before {
-  content: "";
+.segmented-control-indicator {
   position: absolute;
-  inset: var(--segmented-padding);
+  top: var(--segmented-padding);
+  bottom: var(--segmented-padding);
+  left: 0;
+  width: 0px;
+  height: calc(100% - var(--segmented-padding) * 2);
+  margin: 0;
   border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
   background: var(--segmented-indicator-bg);
   box-shadow: var(--segmented-indicator-shadow);
+  transition: transform 0.2s ease, width 0.2s ease, opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemSeparator) {
-  display: none;
+.segmented-control-indicator[data-visible=false] {
+  opacity: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItem) {
-  background: transparent;
-  padding: 0;
-  border: none;
-  min-width: 0;
+.segmented-control-list {
   display: flex;
+  column-gap: var(--segmented-gap);
+  row-gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 1;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemLabel) {
-  gap: 0;
-  height: fit-content;
+.segmented-control-item {
+  list-style: none;
+  margin: 0;
   padding: 0;
-  font-size: 0;
 }
 
-.segmented-control-item {
+.segmented-control-button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 100%;
   border: none;
   background: transparent;
   cursor: pointer;
-}
-.segmented-control-item .rt-SegmentedControlItemLabel {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+  min-width: 0;
   border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+  transition: color 0.2s ease;
 }
 
-.segmented-control-item:where([data-disabled=true]) {
+.segmented-control-button:where([data-disabled=true]) {
   cursor: not-allowed;
   opacity: var(--segmented-disabled-opacity);
 }
 
-.segmented-control-item:where(:focus-visible) {
+.segmented-control-button:where(:focus-visible) {
   outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
   outline-offset: 2px;
 }
 
-.segmented-control-item-label {
+.segmented-control-button-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--segmented-item-font-size);
   font-weight: var(--segmented-item-font-weight);
   line-height: var(--segmented-item-line-height);
@@ -3208,7 +3209,7 @@ figure.chip {
   transition: color 0.2s ease;
 }
 
-.segmented-control-item:where([data-state=on]) .segmented-control-item-label {
+.segmented-control-button:where([data-state=on]) .segmented-control-button-label {
   color: var(--segmented-label-active-color);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

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

package/src/components/segmented-control/styles/index.scss

@@ -10,96 +10,98 @@
   --segmented-label-color: var(--color-label-neutral, #797e86);
   --segmented-label-active-color: var(--color-label-strong, #181a1b);
   --segmented-disabled-opacity: 0.4;
+  --segmented-gap: 2px;
   --segmented-item-padding-x: 22px;
   --segmented-item-padding-y: 4px;
   --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
   --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
   --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  align-items: stretch;
+  position: relative;
+  display: block;
+  box-sizing: border-box;
   padding: var(--segmented-padding);
   border-radius: var(--segmented-radius);
   background: var(--segmented-bg);
   width: fit-content;
-  height: var(--segmented-height);
-  font-size: 0;
+  min-height: var(--segmented-height);
   isolation: isolate;
-}
-
-.segmented-control:where(.rt-SegmentedControlRoot) {
-  /* Radix Theme 기본 inline-grid를 덮어 동일한 sizing 시스템에서만 layout이 될 수 있도록 한다. */
-  display: grid;
+  overflow: hidden;
 }
 
 .segmented-control:where([data-keep-selected="true"]) {
   --segmented-disabled-opacity: 0.3;
 }
 
-.segmented-control :where(.rt-SegmentedControlIndicator) {
-  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  background: transparent;
-  box-shadow: none;
-  overflow: hidden;
-}
-
-.segmented-control :where(.rt-SegmentedControlIndicator)::before {
-  content: "";
+.segmented-control-indicator {
   position: absolute;
-  inset: var(--segmented-padding);
+  top: var(--segmented-padding);
+  bottom: var(--segmented-padding);
+  left: 0;
+  width: 0px;
+  height: calc(100% - (var(--segmented-padding) * 2));
+  margin: 0;
   border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
   background: var(--segmented-indicator-bg);
   box-shadow: var(--segmented-indicator-shadow);
+  transition:
+    transform 0.2s ease,
+    width 0.2s ease,
+    opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemSeparator) {
-  display: none;
+.segmented-control-indicator[data-visible="false"] {
+  opacity: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItem) {
-  background: transparent;
-  padding: 0;
-  border: none;
-  min-width: 0;
+.segmented-control-list {
   display: flex;
+  column-gap: var(--segmented-gap);
+  row-gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 1;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemLabel) {
-  gap: 0;
-  height: fit-content;
+.segmented-control-item {
+  list-style: none;
+  margin: 0;
   padding: 0;
-  font-size: 0;
 }
 
-.segmented-control-item {
+.segmented-control-button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 100%;
   border: none;
   background: transparent;
   cursor: pointer;
-  .rt-SegmentedControlItemLabel {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
-    border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  }
+  min-width: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+  transition: color 0.2s ease;
 }
-.segmented-control-item:where([data-disabled="true"]) {
+
+.segmented-control-button:where([data-disabled="true"]) {
   cursor: not-allowed;
   opacity: var(--segmented-disabled-opacity);
 }
 
-.segmented-control-item:where(:focus-visible) {
+.segmented-control-button:where(:focus-visible) {
   outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
   outline-offset: 2px;
 }
 
-.segmented-control-item-label {
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
+.segmented-control-button-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--segmented-item-font-size);
   font-weight: var(--segmented-item-font-weight);
   line-height: var(--segmented-item-line-height);
@@ -108,6 +110,7 @@
   transition: color 0.2s ease;
 }
 
-.segmented-control-item:where([data-state="on"]) .segmented-control-item-label {
+.segmented-control-button:where([data-state="on"])
+  .segmented-control-button-label {
   color: var(--segmented-label-active-color);
 }

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

@@ -1,4 +1,11 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+} from "react";
 import type { SegmentedControl as RadixSegmentedControlNamespace } from "@radix-ui/themes";
 
 /**
@@ -36,3 +43,34 @@ export interface SegmentedControlProps extends Omit<
   ariaLabel: string;
   keepSelected?: boolean;
 }
+
+export interface SegmentedControlIndicatorRect {
+  width: number;
+  left: number;
+}
+
+export interface SegmentedControlIndicatorProps {
+  rect: SegmentedControlIndicatorRect;
+  visible: boolean;
+}
+
+export type SegmentedControlButtonEvent =
+  | MouseEvent<HTMLButtonElement>
+  | PointerEvent<HTMLButtonElement>
+  | KeyboardEvent<HTMLButtonElement>
+  | FocusEvent<HTMLButtonElement>;
+
+export interface SegmentedControlListProps {
+  options: SegmentedControlOption[];
+  keepSelected: boolean;
+  selectedValue?: SegmentedControlValue;
+  focusableIndex: number;
+  fallbackIndex: number;
+  itemRefs: MutableRefObject<Array<HTMLButtonElement | null>>;
+  onSelect: (value: SegmentedControlValue | undefined) => void;
+  onFocusItemAt: (index: number) => void;
+  onArrowNavigate: (
+    event: KeyboardEvent<HTMLButtonElement>,
+    currentIndex: number,
+  ) => void;
+}

package/src/theme/ThemeProvider.tsx

@@ -1,5 +1,7 @@
 import { Theme } from "@radix-ui/themes";
-import "@radix-ui/themes/styles.css";
+import "@radix-ui/themes/components.css";
+import "@radix-ui/themes/layout.css";
+import "@radix-ui/themes/utilities.css";
 import type { PropsWithChildren } from "react";
 import { defaultThemeOptions, type ThemeProviderProps } from "./config";
 

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

@@ -1,129 +0,0 @@
-import { SegmentedControl as RadixSegmentedControl } from "@radix-ui/themes";
-import clsx from "clsx";
-import {
-  forwardRef,
-  useMemo,
-  useState,
-  type KeyboardEvent,
-  type MouseEvent,
-  type PointerEvent,
-} from "react";
-import type { SegmentedControlProps, SegmentedControlValue } from "../types";
-
-const toNullableValue = (value?: SegmentedControlValue) =>
-  value === undefined || value === "" ? undefined : value;
-
-/**
- * SegmentedControl — Radix SegmentedControl wrapper with keepSelected toggle.
- * @component
- * @param {SegmentedControlProps} props
- * @param {SegmentedControlOption[]} props.options 렌더링할 옵션 배열.
- * @param {string} props.ariaLabel 스크린리더용 라벨(필수).
- * @param {boolean} [props.keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
- * @param {SegmentedControlValue} [props.value] 제어형 value.
- * @param {SegmentedControlValue} [props.defaultValue] 비제어 초기 value.
- * @param {(value: SegmentedControlValue) => void} [props.onValueChange] 값 변경 콜백.
- * @param {string} [props.className] root className.
- */
-const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
-  (
-    {
-      options,
-      ariaLabel,
-      keepSelected = true,
-      className,
-      onValueChange,
-      value: valueProp,
-      defaultValue,
-      ...restProps
-    },
-    forwardedRef,
-  ) => {
-    const isControlled = valueProp !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState<
-      SegmentedControlValue | undefined
-    >(toNullableValue(defaultValue));
-    const selectedValue = toNullableValue(
-      isControlled ? valueProp : uncontrolledValue,
-    );
-
-    const emitChange = (nextValue: SegmentedControlValue | undefined) => {
-      if (!isControlled) {
-        setUncontrolledValue(nextValue);
-      }
-      onValueChange?.(nextValue ?? "");
-    };
-
-    const handleRootValueChange = (nextValue: string) => {
-      emitChange(nextValue);
-    };
-
-    const resolvedValue = useMemo(
-      () => selectedValue ?? undefined,
-      [selectedValue],
-    );
-
-    return (
-      <RadixSegmentedControl.Root
-        {...restProps}
-        ref={forwardedRef}
-        aria-label={ariaLabel}
-        className={clsx("segmented-control", className)}
-        value={resolvedValue}
-        onValueChange={handleRootValueChange}
-        data-keep-selected={keepSelected ? "true" : undefined}
-      >
-        {options.map(option => {
-          const isDisabled = Boolean(option.disabled);
-          const isSelected = selectedValue === option.value;
-
-          const preventDisabledInteraction = (
-            event:
-              | MouseEvent<HTMLButtonElement>
-              | PointerEvent<HTMLButtonElement>
-              | KeyboardEvent<HTMLButtonElement>,
-          ) => {
-            if (!isDisabled) {
-              return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-          };
-
-          const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-            preventDisabledInteraction(event);
-            if (isDisabled) {
-              return;
-            }
-            if (!keepSelected && isSelected) {
-              event.preventDefault();
-              emitChange(undefined);
-            }
-          };
-
-          return (
-            <RadixSegmentedControl.Item
-              key={option.value}
-              value={option.value}
-              className="segmented-control-item"
-              aria-disabled={isDisabled || undefined}
-              data-disabled={isDisabled ? "true" : undefined}
-              tabIndex={isDisabled ? -1 : undefined}
-              onPointerDown={preventDisabledInteraction}
-              onKeyDown={preventDisabledInteraction}
-              onClick={handleClick}
-            >
-              <span className="segmented-control-item-label">
-                {option.label}
-              </span>
-            </RadixSegmentedControl.Item>
-          );
-        })}
-      </RadixSegmentedControl.Root>
-    );
-  },
-);
-
-SegmentedControl.displayName = "SegmentedControl";
-
-export { SegmentedControl };