@uniai-fe/uds-primitives 0.3.34 → 0.3.35

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);
@@ -3812,6 +3812,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 +4223,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과 실 서비스 간 시각 편차를 줄인다. */
@@ -4644,23 +4659,6 @@ figure.chip {
   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,

package/package.json

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

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

@@ -399,32 +399,32 @@
   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="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"]),