@uniai-fe/uds-primitives 0.3.59 → 0.4.0

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

@@ -6,28 +6,28 @@
   flex: var(--input-flex);
   min-width: 0;
 
-  &[data-width="auto"] {
+  &:where([data-width="auto"]) {
     --input-width: auto;
     --input-flex: 0 1 auto;
   }
 
-  &[data-width="fill"] {
+  &:where([data-width="fill"]) {
     --input-width: auto;
     --input-flex: 1 1 0%;
   }
 
-  &[data-width="full"],
-  &[data-block="true"] {
+  &:where([data-width="full"]),
+  &:where([data-block="true"]) {
     --input-width: 100%;
     --input-flex: 0 0 100%;
   }
 
-  &[data-width="fit"] {
+  &:where([data-width="fit"]) {
     --input-width: fit-content;
     --input-flex: 0 0 auto;
   }
 
-  &[data-width="custom"] {
+  &:where([data-width="custom"]) {
     --input-flex: 0 0 auto;
   }
 
@@ -35,7 +35,7 @@
     width: 100%;
   }
 
-  &[data-priority="table"] {
+  &:where([data-priority="table"]) {
     display: block;
     --input-width: 100%;
     height: 100%;
@@ -87,7 +87,7 @@
   outline: none;
   box-shadow: none;
 
-  &[data-size="small"] {
+  &:where([data-size="small"]) {
     min-height: var(--input-default-height-small);
     // Figma small 규격(40px/15px/1.4/0.2px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-small-size);
@@ -96,7 +96,7 @@
     --input-letter-spacing: var(--input-text-small-letter-spacing);
   }
 
-  &[data-size="large"] {
+  &:where([data-size="large"]) {
     min-height: var(--input-default-height-large);
     // Figma large 규격(56px/19px)을 size token으로 고정한다.
     --input-font-size: var(--input-text-large-size);
@@ -105,7 +105,7 @@
     --input-letter-spacing: var(--input-text-large-letter-spacing);
   }
 
-  &[data-priority="secondary"] {
+  &:where([data-priority="secondary"]) {
     border: none;
     border-bottom: var(--input-border-width-default) solid
       var(--input-border-color);
@@ -114,29 +114,29 @@
     padding-block: var(--input-secondary-padding-block);
     background-color: var(--input-secondary-surface-color);
 
-    &[data-state="active"],
-    &[data-state="focused"] {
+    &:where([data-state="active"]),
+    &:where([data-state="focused"]) {
       border-bottom-color: var(--input-border-active-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="success"] {
+    &:where([data-state="success"]) {
       border-bottom-color: var(--input-border-success-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="error"] {
+    &:where([data-state="error"]) {
       border-bottom-color: var(--input-border-error-color);
       border-bottom-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-bottom-color: var(--input-border-underline-disabled-color);
       border-bottom-width: var(--input-border-width-default);
     }
   }
 
-  &[data-priority="tertiary"] {
+  &:where([data-priority="tertiary"]) {
     border-radius: var(--input-tertiary-radius-base);
     background-color: var(--input-surface-color);
     min-height: var(--input-tertiary-height-base);
@@ -178,42 +178,42 @@
     }
   }
 
-  &[data-priority="table"] {
+  &:where([data-priority="table"]) {
     height: 100%;
 
     border-radius: var(--input-table-radius-base);
     border-color: var(--input-border-table-default-color);
     background-color: var(--input-table-surface-color);
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-color: var(--input-border-table-disabled-color);
       background-color: var(--input-table-surface-disabled-color);
     }
 
-    &[data-readonly="true"] {
+    &:where([data-readonly="true"]) {
       border-color: var(--input-border-table-readonly-color);
       background-color: var(--input-table-surface-readonly-color);
     }
   }
 
   &:not([data-priority="secondary"]) {
-    &[data-state="active"],
-    &[data-state="focused"] {
+    &:where([data-state="active"]),
+    &:where([data-state="focused"]) {
       border-color: var(--input-border-active-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="success"] {
+    &:where([data-state="success"]) {
       border-color: var(--input-border-success-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="error"] {
+    &:where([data-state="error"]) {
       border-color: var(--input-border-error-color);
       border-width: var(--input-border-width-emphasis);
     }
 
-    &[data-state="disabled"] {
+    &:where([data-state="disabled"]) {
       border-color: var(--input-border-disabled-color);
       border-width: var(--input-border-width-default);
       background-color: var(
@@ -221,13 +221,13 @@
       ); /* disabled 배경 토큰 */
     }
 
-    &[data-readonly="true"] {
+    &:where([data-readonly="true"]) {
       border-color: var(--input-border-disabled-color);
       border-width: var(--input-border-width-default);
       background-color: var(--input-surface-disabled-color);
     }
 
-    &[data-state="error"][data-readonly="true"] {
+    &:where([data-state="error"][data-readonly="true"]) {
       // 변경: calendar trigger처럼 readOnly input에서도 error state를 우선 노출한다.
       border-color: var(--input-border-error-color);
       border-width: var(--input-border-width-emphasis);
@@ -279,7 +279,7 @@
   }
 }
 
-.input-field[data-has-value="true"] .input-element:not(:disabled) {
+.input-field:where([data-has-value="true"]) .input-element:not(:disabled) {
   color: var(--input-text-color);
   caret-color: var(--input-text-color);
 }
@@ -292,7 +292,7 @@
   min-width: 0;
 }
 
-.input[data-input-type="textarea"] .input-field {
+.input:where([data-input-type="textarea"]) .input-field {
   // TextArea는 size별로 radius/spacing을 분기해 input과 동일한 스케일 감각을 유지한다.
   --input-textarea-radius: var(--input-textarea-radius-medium);
   --input-textarea-padding-inline: var(--input-textarea-padding-inline-medium);
@@ -305,14 +305,14 @@
   padding: var(--input-textarea-padding-block)
     var(--input-textarea-padding-inline);
 
-  &[data-size="small"] {
+  &:where([data-size="small"]) {
     --input-textarea-radius: var(--input-textarea-radius-small);
     --input-textarea-padding-inline: var(--input-textarea-padding-inline-small);
     --input-textarea-padding-block: var(--input-textarea-padding-block-small);
     --input-textarea-gap: var(--input-textarea-gap-small);
   }
 
-  &[data-size="large"] {
+  &:where([data-size="large"]) {
     --input-textarea-radius: var(--input-textarea-radius-large);
     --input-textarea-padding-inline: var(--input-textarea-padding-inline-large);
     --input-textarea-padding-block: var(--input-textarea-padding-block-large);
@@ -321,7 +321,7 @@
 }
 
 // 변경: textarea 높이 토큰은 native element가 아니라 root layout이 소유하고 내부는 남은 높이를 채운다.
-.input[data-input-type="textarea"] {
+.input:where([data-input-type="textarea"]) {
   min-height: var(--input-textarea-height);
 
   .input-box {
@@ -376,27 +376,30 @@
   color: var(--input-label-color);
 }
 
-.input-field[data-priority="secondary"] .input-element {
+.input-field:where([data-priority="secondary"]) .input-element {
   padding-inline: 0;
 }
 
-.input-field[data-priority="tertiary"] .input-element {
+.input-field:where([data-priority="tertiary"]) .input-element {
   min-height: var(--input-tertiary-element-min-height);
 }
 
-.input-field[data-priority="table"][data-size="small"] .input-element {
+.input-field:where([data-priority="table"]):where([data-size="small"])
+  .input-element {
   font-size: var(--input-table-text-small-size);
   line-height: var(--input-table-text-small-line-height);
   font-weight: var(--input-table-text-small-weight);
 }
 
-.input-field[data-priority="table"][data-size="medium"] .input-element {
+.input-field:where([data-priority="table"]):where([data-size="medium"])
+  .input-element {
   font-size: var(--input-table-text-medium-size);
   line-height: var(--input-table-text-medium-line-height);
   font-weight: var(--input-table-text-medium-weight);
 }
 
-.input-field[data-priority="table"][data-size="large"] .input-element {
+.input-field:where([data-priority="table"]):where([data-size="large"])
+  .input-element {
   font-size: var(--input-table-text-large-size);
   line-height: var(--input-table-text-large-line-height);
   font-weight: var(--input-table-text-large-weight);
@@ -407,7 +410,7 @@
   font-size: var(--input-helper-font-size);
   line-height: var(--input-helper-line-height);
 
-  [data-state="error"] & {
+  :where([data-state="error"]) & {
     color: var(--input-border-error-color);
   }
 
@@ -415,7 +418,7 @@
   //   color: var(--input-helper-success-color);
   // }
 
-  [data-state="disabled"] & {
+  :where([data-state="disabled"]) & {
     color: var(--input-helper-disabled-color);
   }
 }
@@ -444,54 +447,54 @@
   }
 
   // 상태별 아이콘 컬러는 디자인 토큰으로 직접 지정한다.
-  &-status[data-state="error"] {
+  &-status:where([data-state="error"]) {
     color: var(--input-status-error-color);
   }
 
-  &-status[data-state="success"] {
+  &-status:where([data-state="success"]) {
     color: var(--input-status-success-color);
   }
 }
-.input-field[data-priority="secondary"] {
+.input-field:where([data-priority="secondary"]) {
   border-bottom-width: var(--input-border-width-default);
 
-  &[data-state="active"],
-  &[data-state="focused"] {
+  :where([data-state="active"]),
+  :where([data-state="focused"]) {
     border-bottom-color: var(--input-border-active-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="success"] {
+  :where([data-state="success"]) {
     border-bottom-color: var(--input-border-success-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="error"] {
+  :where([data-state="error"]) {
     border-bottom-color: var(--input-border-error-color);
     border-bottom-width: var(--input-border-width-emphasis);
   }
 
-  &[data-state="disabled"] {
+  :where([data-state="disabled"]) {
     border-bottom-color: var(--input-border-underline-disabled-color);
     border-bottom-width: var(--input-border-width-default);
   }
 
-  &[data-readonly="true"] {
+  :where([data-readonly="true"]) {
     border-bottom-color: var(--input-border-underline-disabled-color);
     border-bottom-width: var(--input-border-width-default);
   }
 }
 
-.input[data-state="active"],
-.input[data-state="focused"],
-.input[data-state="success"] {
+.input:where([data-state="active"]),
+.input:where([data-state="focused"]),
+.input:where([data-state="success"]) {
   .input-label,
   .input-inline-label {
     color: var(--input-label-accent-color);
   }
 }
 
-.input[data-state="error"] {
+.input:where([data-state="error"]) {
   .input-label,
   .input-inline-label {
     color: var(--input-label-error-color);
@@ -506,7 +509,7 @@
   }
 }
 
-.input[data-state="disabled"] {
+.input:where([data-state="disabled"]) {
   .input-label,
   .input-inline-label,
   .input-helper-text,
@@ -532,8 +535,8 @@
   }
 }
 
-.input[data-readonly="true"] {
-  .input-field[data-priority="table"] {
+.input:where([data-readonly="true"]) {
+  .input-field:where([data-priority="table"]) {
     // 변경: table readonly는 disabled와 동일한 박스 스타일을 사용하고 텍스트 색만 분리한다.
     background-color: var(--input-table-surface-readonly-color);
     border-color: var(--input-border-table-readonly-color);

package/src/components/input/types/foundation.ts

@@ -102,7 +102,7 @@ export interface InputIcon {
  * @property {ReactNode} [clear] input reset버튼 커스텀 컨텐츠
  * @property {ReactNode} [success] input 입력상태 성공시 커스텀 컨텐츠
  * @property {ReactNode} [error] input 입력상태 에러시 커스텀 컨텐츠
- * @property {FormFieldWidth} [width] width preset 옵션
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 옵션
  * @property {InputState} [data-simulated-state] Storybook 시각 상태 강제용
  */
 export interface InputProps extends Omit<NativeInputProps, "size">, InputIcon {

package/src/components/navigation/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Navigation; mobile bottom navigation 카테고리 배럴
+ * @desc
+ * - `BottomNavigation`: 모바일 하단 네비게이션 루트다.
+ * - `NavigationItem`, `NavigationItemKey`: item/public type 계약이다.
+ * - `composeNavigationClassName`, `isHrefNavigationItem`: navigation util이다.
+ */
 import "./index.scss";
 
 export * from "./markup";

package/src/components/navigation/markup/index.tsx

@@ -1,2 +1,8 @@
+/**
+ * Navigation; mobile/web navigation markup export 배럴
+ * @desc
+ * - `BottomNavigation`: 현재 mobile 구현에서 제공되는 하단 네비게이션 루트다.
+ * - `web/*`: 플랫폼 확정 전까지 placeholder export를 유지한다.
+ */
 export * from "./mobile";
 export * from "./web";

package/src/components/pagination/index.tsx

@@ -1,5 +1,10 @@
 /**
- * pagination 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * Pagination; list/carousel/count indicator 카테고리 배럴
+ * @desc
+ * - `Pagination`: 숫자 기반 페이지 이동 컨트롤이다.
+ * - `PaginationCarousel`: dot 기반 step indicator다.
+ * - `PaginationCount`: 현재/전체 step 카운트 표시다.
+ * - `normalizePaginationState`, `createPaginationPages`: pagination util이다.
  */
 import "./index.scss";
 

package/src/components/pagination/markup/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Pagination; list/carousel/count markup export 배럴
+ * @desc
+ * - `Pagination`: list variant다.
+ * - `PaginationCarousel`: carousel(dot) variant다.
+ * - `PaginationCount`: count variant다.
+ */
 export { Pagination } from "./Pagination";
 export { PaginationCarousel } from "./Carousel";
 export { PaginationCount } from "./Count";

package/src/components/pop-over/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * PopOver; namespace 배럴 export
+ * @desc
+ * - `PopOver.Root`: open 상태 계약
+ * - `PopOver.Trigger`: asChild trigger 연결
+ * - `PopOver.Content`: overlay shell + 위치/폭 계약
+ */
 import "./index.scss";
 
 export * from "./markup";

package/src/components/pop-over/markup/index.tsx

@@ -5,10 +5,11 @@ import PopOverTrigger from "./Trigger";
 export { PopOverRoot, PopOverTrigger, PopOverContent };
 
 /**
- * PopOver namespace.
- * - Root
- * - Trigger
- * - Content
+ * PopOver; 컴포넌트 모듈
+ * @namespace PopOver
+ * - `PopOver.Root`
+ * - `PopOver.Trigger`
+ * - `PopOver.Content`
  */
 export const PopOver = {
   Root: PopOverRoot,

package/src/components/radio/index.tsx

@@ -1,5 +1,9 @@
 /**
- * radio 카테고리 배럴; markup과 타입 exports를 노출한다.
+ * Radio; namespace 배럴 export
+ * @desc
+ * - `Radio`, `RadioField`: base radio primitives
+ * - `RadioCard`, `RadioCardGroup`: card variation
+ * - hooks/types/utils는 별도 배럴로 함께 export한다
  */
 import "./index.scss";
 

package/src/components/scrollbar/hooks/index.ts

@@ -1,4 +1,4 @@
 /**
- * TODO(scrollbar): 접근성/상태 계산 hook을 정의한다.
+ * Scrollbar Hooks; 현재 공개된 훅이 없는 placeholder 엔트리
  */
 export {};

package/src/components/scrollbar/index.tsx

@@ -1,4 +1,4 @@
 /**
- * scrollbar 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * Scrollbar; 현재 public export가 없는 placeholder 카테고리 배럴
  */
 export * from "./markup";

package/src/components/scrollbar/markup/index.tsx

@@ -1,4 +1,4 @@
 /**
- * TODO(scrollbar): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Scrollbar Markup; 현재 공개된 컴포넌트가 없는 placeholder 엔트리
  */
 export {};

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

@@ -1,4 +1,4 @@
 /**
- * TODO(scrollbar): variant/slot 타입 정의를 작성한다.
+ * Scrollbar Types; 현재 공개된 타입이 없는 placeholder 엔트리
  */
 export {};

package/src/components/scrollbar/utils/index.ts

@@ -1,4 +1,4 @@
 /**
- * TODO(scrollbar): 토큰 매핑과 클래스명 유틸을 구현한다.
+ * Scrollbar Utils; 현재 공개된 유틸이 없는 placeholder 엔트리
  */
 export {};

package/src/components/segmented-control/index.tsx

@@ -1,5 +1,9 @@
 /**
- * segmented-control 카테고리 배럴
+ * SegmentedControl; single-select segmented control 카테고리 배럴
+ * @desc
+ * - `SegmentedControl`: 옵션 배열 기반 단일 선택 루트다.
+ * - `SegmentedControlLabel`: 옵션 텍스트 슬롯이다.
+ * - `SegmentedControlProps`, `SegmentedControlOption`: public contract 타입이다.
  */
 import "./index.scss";
 

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

@@ -1,2 +1,8 @@
+/**
+ * SegmentedControl; single-select segmented control markup export 배럴
+ * @desc
+ * - `SegmentedControl`: 옵션 배열 기반 단일 선택 루트다.
+ * - `SegmentedControlLabel`: 옵션 텍스트 슬롯이다.
+ */
 export * from "./Container";
 export { default as SegmentedControlLabel } from "./Label";

package/src/components/select/index.tsx

@@ -1,5 +1,10 @@
 /**
- * select 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * Select; namespace 배럴 export
+ * @desc
+ * - `Select.Default`: single select
+ * - `Select.Multiple`: multi select
+ * - `Select.Container`, `Select.Trigger.Base`, `Select.Selected.*`: headless 조합 레이어
+ * - hooks/types/utils는 별도 배럴로 함께 export한다
  */
 import "./index.scss";
 

package/src/components/select/markup/Default.tsx

@@ -10,20 +10,13 @@ import Container from "./foundation/Container";
 import { useSelectDropdownOpenState } from "../hooks";
 import type { SelectDropdownOption } from "../types/option";
 import type { SelectDefaultComponentProps } from "../types/props";
+import { toSelectInputText } from "../utils";
 import {
   isSameSelectedValue,
   normalizeSingleSelectedValue,
   toSelectedValueKey,
 } from "../../../utils/selected-values";
 
-const toInputText = (value?: ReactNode): string => {
-  if (typeof value === "string" || typeof value === "number") {
-    return String(value);
-  }
-
-  return "";
-};
-
 const SELECT_CUSTOM_OPTION_BASE_ID = "__select_custom_input__";
 const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
 
@@ -44,8 +37,8 @@ const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
  * @param {boolean} [props.icon] chevron 아이콘 비활성화 여부
  * @param {"button" | "submit" | "reset"} [props.buttonType] trigger button type
  * @param {SelectDropdownOption[]} props.items dropdown 아이템 목록
- * @param {SelectCallbackParams} [props.onSelectOption] option interaction 콜백
- * @param {SelectCallbackParams} [props.onSelectChange] selection change 콜백
+ * @param {SelectCallbackParams} [props.onSelectOption] option interaction 콜백(legacy)
+ * @param {SelectCallbackParams} [props.onSelectChange] 권장 선택값 변경 콜백
  * @param {SelectDropdownExtension} [props.dropdownOptions] dropdown 확장 옵션
  * @param {boolean} [props.open] controlled open 값
  * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 값
@@ -163,7 +156,9 @@ export function SelectDefault<OptionData = unknown>({
   );
 
   // 9) customOptions가 있는 경우 inputProps.value가 있고 option 매칭이 없으면 custom mode로 간주한다.
-  const forcedCustomLabelValue = toInputText(inputProps?.value as ReactNode);
+  const forcedCustomLabelValue = toSelectInputText(
+    inputProps?.value as ReactNode,
+  );
   const shouldForceCustomFromInput = Boolean(
     customOptions && !selectedOption && forcedCustomLabelValue,
   );
@@ -262,7 +257,7 @@ export function SelectDefault<OptionData = unknown>({
       typeof inputProps?.value === "number"
       ? String(inputProps.value)
       : customLabelValue
-    : toInputText(resolvedDisplayLabel);
+    : toSelectInputText(resolvedDisplayLabel);
 
   // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
   return (
@@ -297,7 +292,8 @@ export function SelectDefault<OptionData = unknown>({
               label={resolvedDisplayLabel}
               placeholder={
                 isCustomInputActive
-                  ? (customOptions?.placeholder ?? toInputText(placeholder))
+                  ? (customOptions?.placeholder ??
+                    toSelectInputText(placeholder))
                   : placeholder
               }
               isPlaceholder={
@@ -329,6 +325,7 @@ export function SelectDefault<OptionData = unknown>({
           {...dropdownOptions?.containerProps}
           size={dropdownOptions?.size ?? resolvedSize}
           width={dropdownOptions?.width ?? "match"}
+          minWidth={dropdownOptions?.minWidth}
         >
           <Dropdown.Menu.List {...dropdownOptions?.menuListProps}>
             {mergedOptions.length > 0 ? (