@uniai-fe/uds-primitives 0.3.34 → 0.3.36

package/dist/styles.css

@@ -387,15 +387,15 @@
   --input-textarea-counter-letter-spacing: var(
   --font-label-medium-letter-spacing
   );
-  --input-table-text-small-size: var(--font-body-xxsmall-size);
-  --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
-  --input-table-text-small-weight: var(--font-body-xxsmall-weight);
-  --input-table-text-medium-size: var(--font-body-xsmall-size);
-  --input-table-text-medium-line-height: var(--font-body-xsmall-line-height);
-  --input-table-text-medium-weight: var(--font-body-xsmall-weight);
-  --input-table-text-large-size: var(--font-body-small-size);
-  --input-table-text-large-line-height: var(--font-body-small-line-height);
-  --input-table-text-large-weight: var(--font-body-small-weight);
+  --input-table-text-small-size: var(--table-td-text-size);
+  --input-table-text-small-line-height: var(--table-td-text-line-height);
+  --input-table-text-small-weight: var(--table-td-text-weight);
+  --input-table-text-medium-size: var(--table-td-text-size);
+  --input-table-text-medium-line-height: var(--table-td-text-line-height);
+  --input-table-text-medium-weight: var(--table-td-text-weight);
+  --input-table-text-large-size: var(--table-td-text-size);
+  --input-table-text-large-line-height: var(--table-td-text-line-height);
+  --input-table-text-large-weight: var(--table-td-text-weight);
   /* Figma size 매핑: small/medium/large typography 토큰 */
   --input-text-small-size: var(--font-body-xsmall-size);
   --input-text-small-line-height: var(--font-label-medium-line-height);
@@ -2567,6 +2567,14 @@ figure.chip {
 .input--block {
   width: 100%;
 }
+.input[data-priority=table] {
+  display: block;
+  --input-width: 100%;
+  height: 100%;
+}
+.input[data-priority=table] .input-box {
+  height: 100%;
+}
 
 .input-label {
   color: var(--input-label-color);
@@ -2682,6 +2690,7 @@ figure.chip {
   margin-left: 0;
 }
 .input-field[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);
@@ -3812,6 +3821,14 @@ figure.chip {
   gap: var(--select-layout-gap);
   min-width: 0;
 }
+.select:where([data-priority=table]) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.select:where([data-priority=table]) .select-button {
+  height: 100%;
+}
 
 .select:where([data-width=auto]) {
   --select-width: auto;
@@ -4215,9 +4232,16 @@ figure.chip {
   width: 100%;
   height: 100%;
 }
-.select-icon svg path {
+
+.select-button:not([data-size=xsmall]):not([data-priority=table]) .select-icon svg path {
   fill: var(--select-icon-fill);
 }
+.select-button :where([data-size=xsmall]) svg path {
+  stroke: var(--select-icon-fill);
+}
+.select-button :where([data-priority=table]) svg path {
+  stroke: var(--select-icon-fill);
+}
 
 .tab-root {
   /* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
@@ -4621,60 +4645,6 @@ figure.chip {
   padding: 0;
 }
 
-.table-cell-content[data-padding=default] > :where(.input[data-priority=table]) {
-  width: calc(100% + var(--table-cell-padding-inline) * 2);
-  height: 100%;
-  min-height: calc(100% + var(--table-cell-padding-block) * 2);
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
-
-.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-box),
-.table-cell-content[data-padding=default] :where(.input[data-priority=table] .input-field) {
-  width: 100%;
-  height: 100%;
-}
-
-.table-cell-content[data-padding=default] > :where(.input-date-field) {
-  width: calc(100% + var(--table-cell-padding-inline) * 2);
-  height: 100%;
-  min-height: calc(100% + var(--table-cell-padding-block) * 2);
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-}
-
-.table-cell-content[data-padding=default] > :where(.select.select-container:has(.select-button[data-priority=table])) {
-  width: calc(100% + var(--table-cell-padding-inline) * 2);
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
-
-.table-cell-content[data-padding=default] > :where(.select.select-container:has(.select-button[data-priority=table])) .select-button {
-  width: 100%;
-}
-
-.table-cell-content[data-padding=none] > :where(.select.select-container:has(.select-button[data-priority=table])),
-.table-cell-content[data-no-padding=true] > :where(.select.select-container:has(.select-button[data-priority=table])) {
-  width: 100%;
-  margin: 0;
-}
-
-.table-cell-content[data-padding=none] > :where(.input[data-priority=table]),
-.table-cell-content[data-no-padding=true] > :where(.input[data-priority=table]),
-.table-cell-content[data-padding=none] :where(.input[data-priority=table] .input-box,
-.input[data-priority=table] .input-field),
-.table-cell-content[data-no-padding=true] :where(.input[data-priority=table] .input-box,
-.input[data-priority=table] .input-field),
-.table-cell-content[data-padding=none] > :where(.input-date-field),
-.table-cell-content[data-no-padding=true] > :where(.input-date-field) {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-}
-
 :where(.table-cell-content) :where(.table-cell-text) {
   color: inherit;
   font-size: inherit;

package/package.json

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

package/src/components/input/markup/foundation/Input.tsx

@@ -272,7 +272,6 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
             <InputBaseUtil
-              // table priority는 success/error 상태 아이콘 대신 border만으로 상태를 표현한다.
               priority={priority}
               state={currentState}
               isDisabled={isDisabled}

package/src/components/input/markup/foundation/Utility.tsx

@@ -47,7 +47,8 @@ export default function InputBaseUtil({
   // 변경: table/tertiary priority는 상태 아이콘을 렌더하지 않는다.
   const resolvedStatusIcon =
     priority === "table" || priority === "tertiary" ? null : statusIcon;
-  const clearIconNode = clear ?? InputStatusIcon.reset;
+  const clearIconNode =
+    clear ?? (priority === "table" ? null : InputStatusIcon.reset);
   const showClearIcon = Boolean(
     clearIconNode &&
     hasValue &&

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

@@ -34,6 +34,15 @@
   &--block {
     width: 100%;
   }
+
+  &[data-priority="table"] {
+    display: block;
+    --input-width: 100%;
+    height: 100%;
+    .input-box {
+      height: 100%;
+    }
+  }
 }
 
 .input-label {
@@ -170,7 +179,8 @@
   }
 
   &[data-priority="table"] {
-    // table priority는 default에서 border를 숨기고 상태(border-color)만 드러낸다.
+    height: 100%;
+
     border-radius: var(--input-table-radius-base);
     border-color: var(--input-border-table-default-color);
     background-color: var(--input-table-surface-color);

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

@@ -42,15 +42,15 @@
   --input-textarea-counter-letter-spacing: var(
     --font-label-medium-letter-spacing
   );
-  --input-table-text-small-size: var(--font-body-xxsmall-size);
-  --input-table-text-small-line-height: var(--font-body-xxsmall-line-height);
-  --input-table-text-small-weight: var(--font-body-xxsmall-weight);
-  --input-table-text-medium-size: var(--font-body-xsmall-size);
-  --input-table-text-medium-line-height: var(--font-body-xsmall-line-height);
-  --input-table-text-medium-weight: var(--font-body-xsmall-weight);
-  --input-table-text-large-size: var(--font-body-small-size);
-  --input-table-text-large-line-height: var(--font-body-small-line-height);
-  --input-table-text-large-weight: var(--font-body-small-weight);
+  --input-table-text-small-size: var(--table-td-text-size);
+  --input-table-text-small-line-height: var(--table-td-text-line-height);
+  --input-table-text-small-weight: var(--table-td-text-weight);
+  --input-table-text-medium-size: var(--table-td-text-size);
+  --input-table-text-medium-line-height: var(--table-td-text-line-height);
+  --input-table-text-medium-weight: var(--table-td-text-weight);
+  --input-table-text-large-size: var(--table-td-text-size);
+  --input-table-text-large-line-height: var(--table-td-text-line-height);
+  --input-table-text-large-weight: var(--table-td-text-weight);
   /* Figma size 매핑: small/medium/large typography 토큰 */
   --input-text-small-size: var(--font-body-xsmall-size);
   --input-text-small-line-height: var(--font-label-medium-line-height);

package/src/components/select/img/chevron/table/large.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.17139 6L6.99981 8.82843L9.82824 6" stroke="#313235" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/select/img/chevron/table/medium.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.17139 6L6.99981 8.82843L9.82824 6" stroke="#313235" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/select/img/chevron/table/small.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.17139 6L6.99981 8.82843L9.82824 6" stroke="#313235" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -228,6 +228,9 @@ export function SelectDefault<OptionData = unknown>({
       className={clsx("select-trigger-container", className)}
       block={resolvedBlock}
       width={width}
+      priority={priority}
+      size={resolvedSize}
+      state={disabled ? "disabled" : state}
     >
       <Dropdown.Root
         open={dropdownOpen}

package/src/components/select/markup/foundation/Container.tsx

@@ -20,7 +20,20 @@ import {
  * @param {React.ReactNode} props.children trigger 및 dropdown 콘텐츠
  */
 const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(
-  ({ className, children, block = false, width, style, ...restProps }, ref) => {
+  (
+    {
+      className,
+      children,
+      block = false,
+      width,
+      style,
+      priority,
+      size,
+      state,
+      ...restProps
+    },
+    ref,
+  ) => {
     const widthAttr =
       width !== undefined
         ? getFormFieldWidthAttr(width)
@@ -41,6 +54,9 @@ const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(
           "select-block": block,
         })}
         data-width={widthAttr}
+        data-priority={priority}
+        data-size={size}
+        data-state={state}
         style={mergedStyle}
         {...restProps}
       >

package/src/components/select/markup/foundation/Icon.tsx

@@ -41,6 +41,19 @@ const SelectChevronSecondaryIcon: SelectChevronNonPrimaryIconSizeMap = {
   large: ChevronSecondaryLarge,
 };
 
+/**
+ * Select; Chevron 아이콘 - table
+ * size 무관하게 모두 동일한 아이콘
+ * - small
+ * - medium
+ * - large
+ */
+const SelectChevronTableIcon: SelectChevronNonPrimaryIconSizeMap = {
+  small: ChevronPrimaryXsmall,
+  medium: ChevronPrimaryXsmall,
+  large: ChevronPrimaryXsmall,
+};
+
 /**
  * Select; Chevron 아이콘 컬렉션
  * - primary (xsmall, small, medium, large)
@@ -51,7 +64,7 @@ const SelectChevronIcon: SelectIconPriorityMap = {
   primary: SelectChevronPrimaryIcon,
   secondary: SelectChevronSecondaryIcon,
   // 변경: table priority는 secondary chevron 자산을 재사용한다.
-  table: SelectChevronSecondaryIcon,
+  table: SelectChevronTableIcon,
 };
 
 /**

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

@@ -5,6 +5,15 @@
   flex-direction: column;
   gap: var(--select-layout-gap);
   min-width: 0;
+
+  &:where([data-priority="table"]) {
+    width: 100%;
+    height: 100%;
+    display: block;
+    .select-button {
+      height: 100%;
+    }
+  }
 }
 
 .select:where([data-width="auto"]) {
@@ -512,9 +521,27 @@
     display: block;
     width: 100%;
     height: 100%;
+  }
+}
 
-    path {
-      fill: var(--select-icon-fill);
+.select-button {
+  &:not([data-size="xsmall"]):not([data-priority="table"]) {
+    .select-icon {
+      svg {
+        path {
+          fill: var(--select-icon-fill);
+        }
+      }
+    }
+  }
+  :where([data-size="xsmall"]) {
+    svg path {
+      stroke: var(--select-icon-fill);
+    }
+  }
+  :where([data-priority="table"]) {
+    svg path {
+      stroke: var(--select-icon-fill);
     }
   }
 }

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

@@ -94,7 +94,8 @@ export interface SelectComponentState {
  * @property {boolean} [block] block 여부
  * @property {FormFieldWidth} [width] width preset
  */
-export interface SelectContainerProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectContainerProps
+  extends HTMLAttributes<HTMLDivElement>, SelectStyleOptions {
   /**
    * 사용자 정의 className
    */
@@ -103,10 +104,6 @@ export interface SelectContainerProps extends HTMLAttributes<HTMLDivElement> {
    * trigger/Dropdown 등 내부 콘텐츠
    */
   children: ReactNode;
-  /**
-   * block 여부
-   */
-  block?: boolean;
   /**
    * width preset
    */

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

@@ -372,81 +372,81 @@
   padding: 0;
 }
 
-// 변경: table cell 내부 full-bleed 제어는 직계 child 루트에만 적용해 내부 컴포넌트 스타일 역전을 방지한다.
-.table-cell-content[data-padding="default"]
-  > :where(.input[data-priority="table"]) {
-  width: calc(100% + (var(--table-cell-padding-inline) * 2));
-  height: 100%;
-  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
-
-.table-cell-content[data-padding="default"]
-  :where(.input[data-priority="table"] .input-box),
-.table-cell-content[data-padding="default"]
-  :where(.input[data-priority="table"] .input-field) {
-  width: 100%;
-  height: 100%;
-}
-
-.table-cell-content[data-padding="default"] > :where(.input-date-field) {
-  width: calc(100% + (var(--table-cell-padding-inline) * 2));
-  height: 100%;
-  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-}
-
-.table-cell-content[data-padding="default"]
-  > :where(
-    .select.select-container:has(.select-button[data-priority="table"])
-  ) {
-  width: calc(100% + (var(--table-cell-padding-inline) * 2));
-  margin-inline: calc(var(--table-cell-padding-inline) * -1);
-  margin-block: calc(var(--table-cell-padding-block) * -1);
-  flex: 1 1 auto;
-}
-
-.table-cell-content[data-padding="default"]
-  > :where(.select.select-container:has(.select-button[data-priority="table"]))
-  .select-button {
-  // 변경 설명: select 버튼 높이는 select 컴포넌트 토큰(min-height/size) 계약을 우선한다.
-  width: 100%;
-}
-
-.table-cell-content[data-padding="none"]
-  > :where(.select.select-container:has(.select-button[data-priority="table"])),
-.table-cell-content[data-no-padding="true"]
-  > :where(
-    .select.select-container:has(.select-button[data-priority="table"])
-  ) {
-  width: 100%;
-  margin: 0;
-}
-
-.table-cell-content[data-padding="none"]
-  > :where(.input[data-priority="table"]),
-.table-cell-content[data-no-padding="true"]
-  > :where(.input[data-priority="table"]),
-.table-cell-content[data-padding="none"]
-  :where(
-    .input[data-priority="table"] .input-box,
-    .input[data-priority="table"] .input-field
-  ),
-.table-cell-content[data-no-padding="true"]
-  :where(
-    .input[data-priority="table"] .input-box,
-    .input[data-priority="table"] .input-field
-  ),
-.table-cell-content[data-padding="none"] > :where(.input-date-field),
-.table-cell-content[data-no-padding="true"] > :where(.input-date-field) {
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  margin: 0;
-}
+// // 변경: table cell 내부 full-bleed 제어는 직계 child 루트에만 적용해 내부 컴포넌트 스타일 역전을 방지한다.
+// .table-cell-content[data-padding="default"]
+//   > :where(.input[data-priority="table"]) {
+//   width: calc(100% + (var(--table-cell-padding-inline) * 2));
+//   height: 100%;
+//   min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+//   margin-inline: calc(var(--table-cell-padding-inline) * -1);
+//   margin-block: calc(var(--table-cell-padding-block) * -1);
+//   flex: 1 1 auto;
+// }
+
+// .table-cell-content[data-padding="default"]
+//   :where(.input[data-priority="table"] .input-box),
+// .table-cell-content[data-padding="default"]
+//   :where(.input[data-priority="table"] .input-field) {
+//   width: 100%;
+//   height: 100%;
+// }
+
+// .table-cell-content[data-padding="default"] > :where(.input-date-field) {
+//   width: calc(100% + (var(--table-cell-padding-inline) * 2));
+//   height: 100%;
+//   min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+//   margin-inline: calc(var(--table-cell-padding-inline) * -1);
+//   margin-block: calc(var(--table-cell-padding-block) * -1);
+// }
+
+// .table-cell-content[data-padding="default"]
+//   > :where(
+//     .select.select-container:has(.select-button[data-priority="table"])
+//   ) {
+//   width: calc(100% + (var(--table-cell-padding-inline) * 2));
+//   margin-inline: calc(var(--table-cell-padding-inline) * -1);
+//   margin-block: calc(var(--table-cell-padding-block) * -1);
+//   flex: 1 1 auto;
+// }
+
+// .table-cell-content[data-padding="default"]
+//   > :where(.select.select-container:has(.select-button[data-priority="table"]))
+//   .select-button {
+//   // 변경 설명: select 버튼 높이는 select 컴포넌트 토큰(min-height/size) 계약을 우선한다.
+//   width: 100%;
+// }
+
+// .table-cell-content[data-padding="none"]
+//   > :where(.select.select-container:has(.select-button[data-priority="table"])),
+// .table-cell-content[data-no-padding="true"]
+//   > :where(
+//     .select.select-container:has(.select-button[data-priority="table"])
+//   ) {
+//   width: 100%;
+//   margin: 0;
+// }
+
+// .table-cell-content[data-padding="none"]
+//   > :where(.input[data-priority="table"]),
+// .table-cell-content[data-no-padding="true"]
+//   > :where(.input[data-priority="table"]),
+// .table-cell-content[data-padding="none"]
+//   :where(
+//     .input[data-priority="table"] .input-box,
+//     .input[data-priority="table"] .input-field
+//   ),
+// .table-cell-content[data-no-padding="true"]
+//   :where(
+//     .input[data-priority="table"] .input-box,
+//     .input[data-priority="table"] .input-field
+//   ),
+// .table-cell-content[data-padding="none"] > :where(.input-date-field),
+// .table-cell-content[data-no-padding="true"] > :where(.input-date-field) {
+//   width: 100%;
+//   height: 100%;
+//   min-height: 100%;
+//   margin: 0;
+// }
 
 // 변경: Cell 슬롯 기본 텍스트 inherit는 저특이성(:where)으로 두어 section 토큰 규칙이 우선되게 한다.
 :where(.table-cell-content) {