@uniai-fe/uds-primitives 0.13.2 → 0.14.0

package/dist/styles.css

@@ -5755,9 +5755,9 @@ figure.chip {
 }
 
 .segmented-control {
-  --segmented-height: 34px;
-  --segmented-padding: 2px;
-  --segmented-radius: 16px;
+  --segmented-height: 32px;
+  --segmented-padding: var(--spacing-padding-1);
+  --segmented-radius: calc(var(--segmented-height) / 2);
   --segmented-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
   --segmented-indicator-bg: var(--color-common-100, #ffffff);
   --segmented-indicator-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
@@ -5765,11 +5765,15 @@ figure.chip {
   --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-height: calc(
+    var(--segmented-height) - (var(--segmented-padding) * 2)
+  );
+  --segmented-item-padding-x: var(--spacing-padding-7);
+  --segmented-item-padding-y: 0px;
+  --segmented-item-font-size: 13px;
   --segmented-item-font-weight: 500;
-  --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
+  --segmented-item-line-height: 1em;
+  --segmented-item-letter-spacing: 0px;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -5782,6 +5786,40 @@ figure.chip {
   overflow: hidden;
 }
 
+.segmented-control:where([data-size="medium"]) {
+  --segmented-height: 40px;
+  --segmented-item-padding-x: var(--spacing-padding-8);
+  --segmented-item-font-size: 15px;
+}
+
+.segmented-control:where([data-size="large"]) {
+  --segmented-height: 48px;
+  --segmented-item-padding-x: var(--spacing-padding-9);
+  --segmented-item-font-size: var(--font-label-large-size);
+}
+
+.segmented-control:where([data-variant="squared"]) {
+  --segmented-radius: var(--theme-radius-medium-4);
+  --segmented-bg: rgba(227, 228, 232, 0.52);
+  --segmented-indicator-bg: var(--color-common-100);
+  --segmented-indicator-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.12);
+  --segmented-label-color: var(--color-cool-gray-30);
+  --segmented-label-active-color: var(--color-cool-gray-30);
+  --segmented-gap: 0px;
+  overflow: visible;
+}
+.segmented-control:where([data-variant="squared"]):where([data-size="small"]) {
+  --segmented-radius: var(--theme-radius-medium-3);
+}
+.segmented-control:where([data-variant="squared"]):where([data-size="small"])
+  .segmented-control-button:where([data-state="off"]) {
+  border-radius: var(--theme-radius-medium-3);
+}
+.segmented-control:where([data-variant="squared"]):where([data-size="large"]) {
+  --segmented-radius: var(--theme-radius-large-1);
+}
+
 .segmented-control:where([data-keep-selected="true"]) {
   --segmented-disabled-opacity: 0.3;
 }
@@ -5837,6 +5875,7 @@ figure.chip {
   background: transparent;
   cursor: pointer;
   min-width: 0;
+  height: var(--segmented-item-height);
   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;
@@ -5854,8 +5893,9 @@ figure.chip {
   font-size: var(--segmented-item-font-size);
   font-weight: var(--segmented-item-font-weight);
   line-height: var(--segmented-item-line-height);
-  letter-spacing: 0.2px;
+  letter-spacing: var(--segmented-item-letter-spacing);
   color: var(--segmented-label-color);
+  white-space: nowrap;
   transition: color 0.2s ease;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -90,8 +90,8 @@
     "@uniai-fe/eslint-config": "0.4.5",
     "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.6.0",
-    "@uniai-fe/util-functions": "0.4.3"
+    "@uniai-fe/util-functions": "0.4.3",
+    "@uniai-fe/uds-foundation": "0.6.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

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

@@ -22,16 +22,18 @@ 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.
+ * SegmentedControl; 텍스트 옵션의 단일 선택
+ * @component
+ * @property {SegmentedControlOption[]} options 고유한 value와 텍스트 label을 가진 선택지
+ * @property {string} ariaLabel 라디오 그룹의 접근 가능한 이름
+ * @property {boolean} [keepSelected=true] 이미 선택한 항목의 선택 유지 여부
+ * @property {"rounded" | "squared"} [variant=rounded] 기존 둥근 형태 또는 각진 형태
+ * @property {"small" | "medium" | "large"} [size=small] 두 외형이 공유하는 크기
+ * @property {SegmentedControlValue} [value] 제어형 선택값. 빈 문자열은 선택 없음
+ * @property {SegmentedControlValue} [defaultValue] 비제어형 초기 선택값
+ * @property {(value: SegmentedControlValue) => void} [onValueChange] 선택값 변경. 해제하면 빈 문자열
+ * @property {string} [className] 최상위 컨테이너의 추가 className
+ * @desc native 라디오 그룹의 선택·키보드·disabled 계약을 유지하고 indicator와 목록을 구성한다.
  */
 const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   (
@@ -39,6 +41,8 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
       options,
       ariaLabel,
       keepSelected = true,
+      variant = "rounded",
+      size = "small",
       className,
       onValueChange,
       value: valueProp,
@@ -185,10 +189,10 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
       });
     }, [options, resolvedValue]);
 
-    // DOM이 렌더된 직후 선택된 항목 기준으로 indicator를 한 번 맞춘다.
+    // 같은 컨테이너에서 외형·크기만 바뀌어도 선택면을 새 버튼 geometry에 맞춘다.
     useLayoutEffect(() => {
       measureIndicator();
-    }, [measureIndicator]);
+    }, [measureIndicator, variant, size]);
 
     useEffect(() => {
       if (!rootRef.current || typeof ResizeObserver === "undefined") {
@@ -227,6 +231,8 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
           "segmented-control segmented-control-container",
           className,
         )}
+        data-variant={variant}
+        data-size={size}
         data-keep-selected={keepSelected ? "true" : undefined}
       >
         {/* indicator와 list를 분리해 DOM 구조가 단순한 flex 계층을 유지한다. */}

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

@@ -1,7 +1,7 @@
 .segmented-control {
-  --segmented-height: 34px;
-  --segmented-padding: 2px;
-  --segmented-radius: 16px;
+  --segmented-height: 32px;
+  --segmented-padding: var(--spacing-padding-1);
+  --segmented-radius: calc(var(--segmented-height) / 2);
   --segmented-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
   --segmented-indicator-bg: var(--color-common-100, #ffffff);
   --segmented-indicator-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
@@ -9,12 +9,15 @@
   --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);
-  // 변경: SegmentedControl label font-weight는 디자인 규칙에 맞춰 500으로 고정한다.
+  --segmented-item-height: calc(
+    var(--segmented-height) - (var(--segmented-padding) * 2)
+  );
+  --segmented-item-padding-x: var(--spacing-padding-7);
+  --segmented-item-padding-y: 0px;
+  --segmented-item-font-size: 13px;
   --segmented-item-font-weight: 500;
-  --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
+  --segmented-item-line-height: 1em;
+  --segmented-item-letter-spacing: 0px;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -27,6 +30,42 @@
   overflow: hidden;
 }
 
+.segmented-control:where([data-size="medium"]) {
+  --segmented-height: 40px;
+  --segmented-item-padding-x: var(--spacing-padding-8);
+  --segmented-item-font-size: 15px;
+}
+
+.segmented-control:where([data-size="large"]) {
+  --segmented-height: 48px;
+  --segmented-item-padding-x: var(--spacing-padding-9);
+  --segmented-item-font-size: var(--font-label-large-size);
+}
+
+.segmented-control:where([data-variant="squared"]) {
+  --segmented-radius: var(--theme-radius-medium-4);
+  --segmented-bg: rgba(227, 228, 232, 0.52);
+  --segmented-indicator-bg: var(--color-common-100);
+  --segmented-indicator-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.12);
+  --segmented-label-color: var(--color-cool-gray-30);
+  --segmented-label-active-color: var(--color-cool-gray-30);
+  --segmented-gap: 0px;
+  overflow: visible;
+
+  &:where([data-size="small"]) {
+    --segmented-radius: var(--theme-radius-medium-3);
+
+    .segmented-control-button:where([data-state="off"]) {
+      border-radius: var(--theme-radius-medium-3);
+    }
+  }
+
+  &:where([data-size="large"]) {
+    --segmented-radius: var(--theme-radius-large-1);
+  }
+}
+
 .segmented-control:where([data-keep-selected="true"]) {
   --segmented-disabled-opacity: 0.3;
 }
@@ -82,6 +121,7 @@
   background: transparent;
   cursor: pointer;
   min-width: 0;
+  height: var(--segmented-item-height);
   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;
@@ -99,8 +139,9 @@
   font-size: var(--segmented-item-font-size);
   font-weight: var(--segmented-item-font-weight);
   line-height: var(--segmented-item-line-height);
-  letter-spacing: 0.2px;
+  letter-spacing: var(--segmented-item-letter-spacing);
   color: var(--segmented-label-color);
+  white-space: nowrap;
   transition: color 0.2s ease;
 }
 

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

@@ -26,22 +26,68 @@ export interface SegmentedControlOption {
 }
 
 /**
- * SegmentedControl props. native div props에 options/ariaLabel/keepSelected 등을 확장한다.
- * @property {SegmentedControlOption[]} options 렌더할 옵션 배열.
- * @property {string} ariaLabel 스크린리더용 라벨. 필수.
- * @property {boolean} [keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
+ * SegmentedControl의 외형. rounded는 둥근 형태, squared는 각진 형태다.
  */
-type SegmentedControlRootProps = Omit<
+export type SegmentedControlVariant = "rounded" | "squared";
+
+/**
+ * 두 외형이 공유하는 크기. small, medium, large를 지원한다.
+ */
+export type SegmentedControlSize = "small" | "medium" | "large";
+
+/**
+ * SegmentedControl 루트의 native div 속성. children은 options로 구성하므로 받지 않는다.
+ */
+export type SegmentedControlRootProps = Omit<
   ComponentPropsWithoutRef<"div">,
   "children"
 >;
 
+/**
+ * SegmentedControl 공개 입력
+ * @property {SegmentedControlOption[]} options 고유한 문자열 value와 텍스트 label을 가진 선택지
+ * @property {string} ariaLabel 라디오 그룹의 접근 가능한 이름
+ * @property {boolean} [keepSelected=true] 같은 항목을 다시 눌러도 선택을 유지할지 여부
+ * @property {"rounded" | "squared"} [variant=rounded] 기존 둥근 형태 또는 각진 형태
+ * @property {"small" | "medium" | "large"} [size=small] rounded와 squared가 공유하는 크기
+ * @property {SegmentedControlValue} [value] 제어형 선택값. 빈 문자열은 선택 없음
+ * @property {SegmentedControlValue} [defaultValue] 비제어형 초기 선택값
+ * @property {(value: SegmentedControlValue) => void} [onValueChange] 다음 선택값. 해제하면 빈 문자열
+ * @desc SegmentedControlRootProps의 native div 속성을 상속하며 선택 상태와 외형을 구성한다.
+ * @see SegmentedControlRootProps
+ */
 export interface SegmentedControlProps extends SegmentedControlRootProps {
+  /**
+   * 고유한 문자열 value와 텍스트 label을 가진 선택지
+   */
   options: SegmentedControlOption[];
+  /**
+   * 라디오 그룹의 접근 가능한 이름
+   */
   ariaLabel: string;
+  /**
+   * 기본 true. false이면 같은 항목을 다시 눌러 선택을 해제할 수 있다.
+   */
   keepSelected?: boolean;
+  /**
+   * 허용 값은 "rounded" | "squared". 기본 rounded는 둥근 모서리를 사용한다.
+   */
+  variant?: SegmentedControlVariant;
+  /**
+   * 허용 값은 "small" | "medium" | "large". 기본 small이며 두 외형에 같은 높이와 여백을 적용한다.
+   */
+  size?: SegmentedControlSize;
+  /**
+   * 제어형 선택값. 빈 문자열은 선택 없음이며 undefined는 비제어형으로 처리한다.
+   */
   value?: SegmentedControlValue;
+  /**
+   * 비제어형 초기 선택값
+   */
   defaultValue?: SegmentedControlValue;
+  /**
+   * 다음 선택값을 전달하며 선택 해제 시 빈 문자열을 전달한다.
+   */
   onValueChange?: (value: SegmentedControlValue) => void;
 }