@uniai-fe/uds-primitives 0.3.19 → 0.3.21

package/src/components/select/styles/select.scss

@@ -7,12 +7,12 @@
   min-width: 0;
 }
 
-.select[data-width="auto"] {
+.select:where([data-width="auto"]) {
   --select-width: auto;
   --select-flex: 0 1 auto;
 }
 
-.select[data-width="fill"] {
+.select:where([data-width="fill"]) {
   --select-width: auto;
   --select-flex: 1 1 0%;
 }
@@ -23,12 +23,12 @@
   --select-flex: 0 0 100%;
 }
 
-.select[data-width="fit"] {
+.select:where([data-width="fit"]) {
   --select-width: fit-content;
   --select-flex: 0 0 auto;
 }
 
-.select[data-width="custom"] {
+.select:where([data-width="custom"]) {
   --select-flex: 0 0 auto;
 }
 
@@ -52,23 +52,34 @@
     color 150ms ease;
   text-align: left;
 
-  &[data-size="small"] {
+  &:where([data-size="small"]) {
     min-height: var(--select-primary-height-small);
     border-radius: var(--select-primary-radius-small);
   }
 
-  &[data-size="large"] {
+  &:where([data-size="xsmall"]) {
+    // 변경: xsmall은 primary 전용 trigger spacing/height 스펙을 적용한다.
+    min-height: var(--select-primary-height-xsmall);
+    border-radius: var(--select-primary-radius-xsmall);
+    gap: var(--select-primary-gap-inline-xsmall);
+    padding: var(--select-primary-padding-block-xsmall)
+      var(--select-primary-padding-inline-end-xsmall)
+      var(--select-primary-padding-block-xsmall)
+      var(--select-primary-padding-inline-start-xsmall);
+  }
+
+  &:where([data-size="large"]) {
     min-height: var(--select-primary-height-large);
     border-radius: var(--select-primary-radius-large);
   }
 
-  &[data-multiple="true"] {
+  &:where([data-multiple="true"]) {
     align-items: center;
     flex-wrap: nowrap;
     overflow: hidden;
   }
 
-  &[data-priority="secondary"] {
+  &:where([data-priority="secondary"]) {
     width: fit-content;
     max-width: 100%;
     min-height: auto;
@@ -84,16 +95,17 @@
       background-color 150ms ease,
       color 150ms ease;
 
-    &:hover:not([data-state="disabled"]) {
+    &:where(:hover):where(:not([data-state="disabled"])) {
       background-color: var(--select-color-surface-secondary-hover);
     }
 
-    &:active:not([data-state="disabled"]) {
+    &:where(:active):where(:not([data-state="disabled"])) {
       background-color: var(--select-color-surface-secondary-active);
     }
 
-    &[data-state="focused"],
-    &[data-open="true"] {
+    &:where([data-state="focused"]),
+    &:where([data-open="true"]),
+    &:where(:focus-within) {
       background-color: var(--select-color-surface-secondary-hover);
 
       &::after {
@@ -102,14 +114,14 @@
       }
     }
 
-    &[data-state="disabled"],
-    &:disabled {
+    &:where([data-state="disabled"]),
+    &:where(:disabled) {
       color: var(--select-secondary-color-text-disabled);
       cursor: not-allowed;
     }
   }
 
-  &[data-priority="table"] {
+  &:where([data-priority="table"]) {
     // 변경: table priority는 input table과 동일하게 기본 border/background를 최소화한다.
     border-radius: var(--select-table-radius);
     border-color: var(--select-table-border-default-color);
@@ -117,47 +129,49 @@
     --select-icon-fill: var(--select-table-icon-color-default);
   }
 
-  &:not([data-priority="secondary"])[data-state="focused"],
-  &:not([data-priority="secondary"])[data-open="true"],
-  &:not([data-priority="secondary"]):focus-visible {
+  &:where(:not([data-priority="secondary"])):where([data-state="focused"]),
+  &:where(:not([data-priority="secondary"])):where([data-open="true"]),
+  &:where(:not([data-priority="secondary"])):focus-visible,
+  &:where(:not([data-priority="secondary"])):focus-within {
     border-color: var(--select-primary-color-border-focused);
     border-width: var(--select-primary-border-width-focus);
     --select-icon-fill: var(--select-icon-color-focused);
   }
 
-  &[data-priority="table"][data-state="focused"],
-  &[data-priority="table"][data-open="true"],
-  &[data-priority="table"]:focus-visible {
+  &:where([data-priority="table"]):where([data-state="focused"]),
+  &:where([data-priority="table"]):where([data-open="true"]),
+  &:where([data-priority="table"]):focus-visible,
+  &:where([data-priority="table"]):focus-within {
     border-color: var(--select-table-border-focus-color);
     border-width: var(--select-primary-border-width-focus);
     --select-icon-fill: var(--select-table-icon-color-focused);
   }
 
-  &:not([data-priority="secondary"])[data-state="error"] {
+  &:where(:not([data-priority="secondary"])):where([data-state="error"]) {
     border-color: var(--select-primary-color-border-error);
     --select-icon-fill: var(--select-icon-color-default);
   }
 
-  &[data-priority="secondary"][data-state="error"] {
+  &:where([data-priority="secondary"]):where([data-state="error"]) {
     &::after {
       height: var(--select-secondary-underline-width-focus);
       background-color: var(--select-color-border-secondary-error);
     }
   }
 
-  &[data-priority="table"][data-state="error"] {
+  &:where([data-priority="table"]):where([data-state="error"]) {
     border-color: var(--select-table-border-error-color);
     --select-icon-fill: var(--select-table-icon-color-default);
   }
 
-  &:not([data-priority="secondary"])[data-readonly="true"] {
+  &:where(:not([data-priority="secondary"])):where([data-readonly="true"]) {
     border-color: var(--select-primary-color-border-disabled);
     background-color: var(--select-primary-color-surface-disabled);
     cursor: default;
     --select-icon-fill: var(--select-icon-color-disabled);
   }
 
-  &[data-priority="secondary"][data-readonly="true"] {
+  &:where([data-priority="secondary"]):where([data-readonly="true"]) {
     border-color: transparent;
     background-color: var(--select-color-surface-secondary-disabled);
     cursor: default;
@@ -168,7 +182,7 @@
     }
   }
 
-  &[data-priority="table"][data-readonly="true"] {
+  &:where([data-priority="table"]):where([data-readonly="true"]) {
     border-color: var(--select-table-border-readonly-color);
     background-color: var(--select-table-surface-readonly-color);
     cursor: not-allowed;
@@ -178,16 +192,16 @@
   // &:not([data-priority="secondary"]):hover:not(:disabled) {
   // }
 
-  &:not([data-priority="secondary"])[data-state="disabled"],
-  &:not([data-priority="secondary"]):disabled {
+  &:where(:not([data-priority="secondary"])):where([data-state="disabled"]),
+  &:where(:not([data-priority="secondary"])):disabled {
     border-color: var(--select-primary-color-border-disabled);
     background-color: var(--select-primary-color-surface-disabled);
     cursor: not-allowed;
     --select-icon-fill: var(--select-icon-color-disabled);
   }
 
-  &[data-priority="secondary"][data-state="disabled"],
-  &[data-priority="secondary"]:disabled {
+  &:where([data-priority="secondary"]):where([data-state="disabled"]),
+  &:where([data-priority="secondary"]):disabled {
     border-color: transparent;
     background-color: var(--select-color-surface-secondary-disabled);
 
@@ -197,8 +211,8 @@
     }
   }
 
-  &[data-priority="table"][data-state="disabled"],
-  &[data-priority="table"]:disabled {
+  &:where([data-priority="table"]):where([data-state="disabled"]),
+  &:where([data-priority="table"]):disabled {
     border-color: var(--select-table-border-disabled-color);
     background-color: var(--select-table-surface-disabled-color);
     cursor: not-allowed;
@@ -214,124 +228,161 @@
   gap: var(--select-value-gap);
 }
 
-.select-label {
-  flex: 1 1 auto;
+.select-input-label {
+  width: 100%;
   min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  box-shadow: none;
   font-family: var(--select-text-font-family);
   font-size: var(--select-text-medium-size);
   font-weight: var(--select-text-medium-weight);
   line-height: var(--select-text-medium-line-height);
   letter-spacing: var(--select-text-medium-letter-spacing);
   color: var(--select-primary-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  caret-color: var(--select-primary-color-text);
+  cursor: default;
 
-  .select-button[data-priority="secondary"] & {
-    color: var(--select-secondary-color-text);
+  // 변경: custom mode(편집 가능 상태)에서만 text cursor를 사용한다.
+  &:where(:not([readonly])) {
+    cursor: text;
   }
 
-  .select-button[data-priority="table"] & {
-    color: var(--select-table-color-text);
+  &::placeholder {
+    color: var(--select-primary-color-placeholder);
   }
 
-  .select-button[data-priority="table"][data-readonly="true"] & {
-    color: var(--select-table-color-text-readonly);
+  .select-button:where([data-priority="secondary"]) & {
+    color: var(--select-secondary-color-text);
+    caret-color: var(--select-secondary-color-text);
   }
 
-  .select-button[data-state="focused"] &,
-  .select-button[data-open="true"] & {
-    color: var(--select-primary-color-text-focused);
+  .select-button:where([data-priority="table"]) & {
+    color: var(--select-table-color-text);
+    caret-color: var(--select-table-color-text);
   }
 
-  .select-button[data-state="disabled"] & {
+  .select-button:where([data-state="disabled"]) & {
     color: var(--select-primary-color-text-disabled);
+    caret-color: var(--select-primary-color-text-disabled);
   }
 
-  .select-button[data-readonly="true"] & {
+  .select-button:where([data-readonly="true"]) & {
     color: var(--select-primary-color-text-readonly);
+    caret-color: var(--select-primary-color-text-readonly);
+  }
+  // 변경: legacy label 텍스트 색상 규칙을 input 렌더 구조로 이관한다.
+  .select-button:where([data-state="focused"]) &,
+  .select-button:where(:focus-within) & {
+    color: var(--color-label-strong);
   }
 
-  .select-button[data-priority="secondary"][data-state="disabled"] & {
+  .select-button:where([data-priority="secondary"]):where(
+      [data-state="disabled"]
+    )
+    & {
     color: var(--select-secondary-color-text-disabled);
   }
 
-  .select-button[data-priority="secondary"][data-readonly="true"] & {
+  .select-button:where([data-priority="secondary"]):where(
+      [data-readonly="true"]
+    )
+    & {
     color: var(--select-secondary-color-text-readonly);
   }
 }
 
-.select-label-placeholder {
+.select-input-label-placeholder {
   color: var(--select-primary-color-placeholder);
 
-  .select-button[data-priority="secondary"] & {
+  .select-button:where([data-priority="secondary"]) & {
     color: var(--select-secondary-color-placeholder);
   }
 
-  .select-button[data-priority="table"] & {
+  .select-button:where([data-priority="table"]) & {
     color: var(--select-table-color-placeholder);
   }
 
   // 변경: disabled/readonly placeholder 색상을 상태 토큰으로 분리한다.
-  .select-button[data-state="disabled"] & {
+  .select-button:where([data-state="disabled"]) & {
     color: var(--select-primary-color-placeholder-disabled);
   }
 
-  .select-button[data-readonly="true"] & {
+  .select-button:where([data-readonly="true"]) & {
     color: var(--select-primary-color-placeholder-readonly);
   }
 
-  .select-button[data-priority="secondary"][data-state="disabled"] & {
+  .select-button:where([data-priority="secondary"]):where(
+      [data-state="disabled"]
+    )
+    & {
     color: var(--select-secondary-color-placeholder-disabled);
   }
 
-  .select-button[data-priority="secondary"][data-readonly="true"] & {
+  .select-button:where([data-priority="secondary"]):where(
+      [data-readonly="true"]
+    )
+    & {
     color: var(--select-secondary-color-placeholder-readonly);
   }
 
-  .select-button[data-priority="table"][data-state="disabled"] & {
+  .select-button:where([data-priority="table"]):where([data-state="disabled"])
+    & {
     color: var(--select-table-color-placeholder-disabled);
   }
 
-  .select-button[data-priority="table"][data-readonly="true"] & {
+  .select-button:where([data-priority="table"]):where([data-readonly="true"])
+    & {
     color: var(--select-table-color-placeholder-readonly);
   }
 }
 
-.select-button[data-size="small"] .select-label {
+.select-button:where([data-size="small"]) :where(.select-input-label) {
   font-size: var(--select-text-small-size);
   line-height: var(--select-text-small-line-height);
   letter-spacing: var(--select-text-small-letter-spacing);
   font-weight: var(--select-text-small-weight);
 }
 
-.select-button[data-priority="table"][data-size="small"] .select-label {
+.select-button:where([data-size="xsmall"]) :where(.select-input-label) {
+  font-size: var(--select-text-xsmall-size);
+  line-height: var(--select-text-xsmall-line-height);
+  letter-spacing: var(--select-text-xsmall-letter-spacing);
+  font-weight: var(--select-text-xsmall-weight);
+}
+
+.select-button:where([data-priority="table"]):where([data-size="small"])
+  :where(.select-input-label) {
   font-size: var(--select-table-text-small-size);
   line-height: var(--select-table-text-small-line-height);
   font-weight: var(--select-table-text-small-weight);
 }
 
-.select-button[data-size="large"] .select-label {
+.select-button:where([data-size="large"]) :where(.select-input-label) {
   font-size: var(--select-text-large-size);
   line-height: var(--select-text-large-line-height);
   letter-spacing: var(--select-text-large-letter-spacing);
   font-weight: var(--select-text-large-weight);
 }
 
-.select-button[data-priority="table"][data-size="medium"] .select-label {
+.select-button:where([data-priority="table"]):where([data-size="medium"])
+  :where(.select-input-label) {
   font-size: var(--select-table-text-medium-size);
   line-height: var(--select-table-text-medium-line-height);
   font-weight: var(--select-table-text-medium-weight);
 }
 
-.select-button[data-priority="table"][data-size="large"] .select-label {
+.select-button:where([data-priority="table"]):where([data-size="large"])
+  :where(.select-input-label) {
   font-size: var(--select-table-text-large-size);
   line-height: var(--select-table-text-large-line-height);
   font-weight: var(--select-table-text-large-weight);
 }
 
-.select-button[data-priority="secondary"][data-size="large"] .select-label {
-  --select-text-large-weight: 600;
+.select-button:where([data-priority="secondary"]):where([data-size="large"])
+  :where(.select-input-label) {
+  font-weight: 600;
 }
 
 .select-tags {
@@ -363,12 +414,12 @@
     border-color: var(--select-color-border-secondary-focused);
   }
 
-  &[data-removable="true"] {
+  &:where([data-removable="true"]) {
     padding-right: var(--select-multiple-chip-removable-padding-right);
   }
 }
 
-.select-tag[data-kind="summary"],
+.select-tag:where([data-kind="summary"]),
 .select-tag-summary {
   background-color: var(--select-multiple-chip-summary-surface);
   border-color: var(--select-multiple-chip-summary-border-color);
@@ -438,17 +489,22 @@
   justify-content: center;
   margin-left: auto;
 
-  &[data-size="small"] {
+  &:where([data-size="small"]) {
     width: var(--select-icon-size-small);
     height: var(--select-icon-size-small);
   }
 
-  &[data-size="large"] {
+  &:where([data-size="xsmall"]) {
+    width: var(--select-icon-size-xsmall);
+    height: var(--select-icon-size-xsmall);
+  }
+
+  &:where([data-size="large"]) {
     width: var(--select-icon-size-large);
     height: var(--select-icon-size-large);
   }
 
-  [data-open="true"] & {
+  :where([data-open="true"]) & {
     transform: rotate(180deg);
   }
 

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

@@ -9,14 +9,20 @@
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
+  --select-primary-height-xsmall: 24px;
 
   --select-primary-radius-small: var(--input-default-radius-base);
   --select-primary-radius-medium: var(--input-default-radius-base);
   --select-primary-radius-large: var(--input-default-radius-base);
+  --select-primary-radius-xsmall: var(--theme-radius-medium-2);
 
   --select-primary-padding-inline: var(--input-default-padding-inline);
   --select-primary-padding-block: var(--input-default-padding-block);
   --select-primary-gap-inline: var(--input-default-gap);
+  --select-primary-padding-inline-start-xsmall: var(--spacing-padding-4);
+  --select-primary-padding-inline-end-xsmall: var(--spacing-padding-3);
+  --select-primary-padding-block-xsmall: var(--spacing-padding-2);
+  --select-primary-gap-inline-xsmall: var(--spacing-gap-1);
   --select-primary-border-width-default: var(--input-border-width-default);
   --select-primary-border-width-focus: var(--input-border-width-emphasis);
 
@@ -71,6 +77,10 @@
   --select-text-small-line-height: var(--input-text-small-line-height);
   --select-text-small-letter-spacing: var(--input-text-small-letter-spacing);
   --select-text-small-weight: var(--input-text-small-weight);
+  --select-text-xsmall-size: 12px;
+  --select-text-xsmall-line-height: 18px;
+  --select-text-xsmall-letter-spacing: 0;
+  --select-text-xsmall-weight: 400;
   --select-text-medium-size: var(--input-text-medium-size);
   --select-text-medium-line-height: var(--input-text-medium-line-height);
   --select-text-medium-letter-spacing: var(--input-text-medium-letter-spacing);
@@ -80,6 +90,7 @@
   --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
   --select-text-large-weight: var(--input-text-large-weight);
 
+  --select-icon-size-xsmall: 1.4rem;
   --select-icon-size-small: 1.6rem;
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;

package/src/components/select/types/base.ts

@@ -9,12 +9,13 @@ export type SelectPriority = "primary" | "secondary" | "table";
 
 /**
  * Select size scale
- * @typedef {"small" | "medium" | "large"} SelectSize
+ * @typedef {"xsmall" | "small" | "medium" | "large"} SelectSize
+ * - xsmall: primary 전용 초소형 레이아웃
  * - small: 컴팩트 레이아웃
  * - medium: 기본 사이즈
  * - large: 확장 레이아웃
  */
-export type SelectSize = "small" | "medium" | "large";
+export type SelectSize = "xsmall" | "small" | "medium" | "large";
 
 /**
  * Select visual state

package/src/components/select/types/icon.ts

@@ -4,19 +4,50 @@ import type { SelectPriority, SelectSize } from "./base";
 
 /**
  * Select 아이콘 사이즈 맵
+ * @property {ElementType} xsmall xsmall 사이즈 아이콘 컴포넌트
  * @property {ElementType} small small 사이즈 아이콘 컴포넌트
  * @property {ElementType} medium medium 사이즈 아이콘 컴포넌트
  * @property {ElementType} large large 사이즈 아이콘 컴포넌트
  */
 export type SelectIconSizeMap = Record<SelectSize, ElementType>;
 
+/**
+ * Select Chevron non-primary 사이즈
+ * @typedef {"small" | "medium" | "large"} SelectChevronNonPrimarySize
+ */
+export type SelectChevronNonPrimarySize = Exclude<SelectSize, "xsmall">;
+
+/**
+ * Select Chevron non-primary 사이즈 맵
+ * @property {ElementType} small small 사이즈 아이콘 컴포넌트
+ * @property {ElementType} medium medium 사이즈 아이콘 컴포넌트
+ * @property {ElementType} large large 사이즈 아이콘 컴포넌트
+ */
+export type SelectChevronNonPrimaryIconSizeMap = Record<
+  SelectChevronNonPrimarySize,
+  ElementType
+>;
+
 /**
  * Select 아이콘 priority 맵
  * @property {SelectIconSizeMap} primary primary priority용 아이콘 컬렉션
- * @property {SelectIconSizeMap} secondary secondary priority용 아이콘 컬렉션
- * @property {SelectIconSizeMap} table table priority용 아이콘 컬렉션
+ * @property {SelectChevronNonPrimaryIconSizeMap} secondary secondary priority용 아이콘 컬렉션
+ * @property {SelectChevronNonPrimaryIconSizeMap} table table priority용 아이콘 컬렉션
  */
-export type SelectIconPriorityMap = Record<SelectPriority, SelectIconSizeMap>;
+export interface SelectIconPriorityMap {
+  /**
+   * primary priority용 아이콘 컬렉션
+   */
+  primary: SelectIconSizeMap;
+  /**
+   * secondary priority용 아이콘 컬렉션
+   */
+  secondary: SelectChevronNonPrimaryIconSizeMap;
+  /**
+   * table priority용 아이콘 컬렉션
+   */
+  table: SelectChevronNonPrimaryIconSizeMap;
+}
 
 /**
  * Select multi remove priority 맵

package/src/components/select/types/interaction.ts

@@ -4,7 +4,7 @@ import type { SelectDropdownBehaviorProps } from "./props";
  * Select Hook Types; Dropdown open state hook 입력 파라미터
  * @property {boolean} [open] 외부 제어형 open 상태
  * @property {boolean} [defaultOpen] 비제어형 초기 open 상태
- * @property {(open: boolean) => void} [onOpenChange] open 상태 변경 콜백
+ * @property {(open: boolean) => void} [onOpen] open 상태 변경 콜백
  */
 export interface UseSelectDropdownOpenStateParams extends SelectDropdownBehaviorProps {}
 

package/src/components/select/types/option.ts

@@ -96,83 +96,3 @@ export interface SelectOptionRenderData {
  */
 export interface SelectDropdownOption<OptionData = unknown>
   extends SelectOptionData<OptionData>, SelectOptionRenderData {}
-
-/**
- * Select option change payload; 단일/다중 선택 결과를 서비스가 즉시 소비할 수 있게 전달한다.
- * @property {"single" | "multiple"} mode 선택 모드
- * @property {string[]} selectedOptionIds 선택된 option id 목록
- * @property {SelectOptionValue[]} selectedValues 선택된 value 목록
- * @property {SelectDropdownOption<OptionData>[]} selectedOptions 선택된 option 목록
- * @property {SelectDropdownOption<OptionData>} currentOption 현재 상호작용한 option
- * @property {boolean} isSelected currentOption 선택 여부
- */
-export interface SelectOptionChangePayload<OptionData = unknown> {
-  /**
-   * 선택 모드
-   * - "single": 단일 선택
-   * - "multiple": 다중 선택
-   */
-  mode: "single" | "multiple";
-  /**
-   * 선택된 option id 목록
-   * - legacy controlled 상태 동기화가 필요할 때 사용한다.
-   */
-  selectedOptionIds: string[];
-  /**
-   * 선택된 value 목록
-   * - form 제출값을 바로 반영할 때 사용한다.
-   */
-  selectedValues: SelectOptionValue[];
-  /**
-   * 선택된 option 전체 데이터 목록
-   * - label/data 등 2차 데이터를 즉시 사용하려는 권장 소비 지점이다.
-   */
-  selectedOptions: SelectDropdownOption<OptionData>[];
-  /**
-   * 현재 상호작용한 option
-   * - 어떤 option 클릭으로 상태가 변경되었는지 추적할 때 사용한다.
-   */
-  currentOption: SelectDropdownOption<OptionData>;
-  /**
-   * currentOption 선택 여부
-   * - multiple 토글 시 add/remove 방향을 구분할 때 사용한다.
-   */
-  isSelected: boolean;
-}
-
-/**
- * Select legacy option 데이터 구조; 과거 key/optionName 스키마 호환을 위해 유지한다.
- * @property {string} key 렌더링 키
- * @property {SelectOptionValue} value 실제 값
- * @property {ReactNode} optionName 사용자 노출 라벨
- * @property {boolean} [selected] 선택 여부
- * @property {boolean} [disabled] 비활성 여부
- * @property {OptionData} [data] 추가 데이터 payload
- * @deprecated SelectDropdownOption으로 마이그레이션한다.
- */
-export interface SelectLegacyOption<OptionData = unknown> {
-  /**
-   * 렌더링 키
-   */
-  key: string;
-  /**
-   * 실제 값
-   */
-  value: SelectOptionValue;
-  /**
-   * 사용자 노출 라벨
-   */
-  optionName: ReactNode;
-  /**
-   * 선택 여부
-   */
-  selected?: boolean;
-  /**
-   * 비활성 여부
-   */
-  disabled?: boolean;
-  /**
-   * 추가 데이터 payload
-   */
-  data?: OptionData;
-}