@uniai-fe/uds-primitives 0.2.11 → 0.3.0

package/dist/styles.css

@@ -18,24 +18,30 @@
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);
   --button-default-gap-large: var(--spacing-gap-3);
+  /* 변경: Figma node(705:13710) 기준 table 버튼 gap을 보정한다. */
+  --button-default-gap-table: var(--spacing-gap-1);
   --button-default-padding-inline-base: var(--spacing-padding-4);
   --button-default-padding-inline-small: var(--spacing-padding-6);
   --button-default-padding-inline-medium: var(--spacing-padding-7);
   --button-default-padding-inline-large: var(--spacing-padding-9);
+  --button-default-padding-inline-table: var(--spacing-padding-5);
   --button-default-padding-block-base: 0px;
   --button-default-padding-block-small: 0px;
   --button-default-padding-block-medium: 0px;
   --button-default-padding-block-large: 0px;
+  --button-default-padding-block-table: 0px;
   /* default button sizing */
   --button-default-width-min-base: var(--theme-size-small-2);
   --button-default-height-small: var(--theme-size-small-3, 32px);
   --button-default-height-medium: var(--theme-size-medium-1, 40px);
   --button-default-height-large: var(--theme-size-medium-2, 48px);
   --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
+  --button-default-height-table: var(--theme-size-small-2, 24px);
   --button-default-radius-small: var(--theme-radius-medium-3);
   --button-default-radius-medium: var(--theme-radius-medium-3);
   --button-default-radius-large: var(--theme-radius-large-1);
   --button-default-radius-xlarge: var(--theme-radius-large-2);
+  --button-default-radius-table: var(--theme-radius-medium-2);
   /* text buttons */
   --button-text-padding-block-base: var(--spacing-padding-4, 8px);
   --button-text-padding-inline-small: var(--spacing-padding-4, 8px);
@@ -90,6 +96,16 @@
   --button-default-font-body-large-letter-spacing: var(
   --font-body-large-letter-spacing
   );
+  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
+  --button-default-font-caption-large-size: var(--font-caption-large-size);
+  /* 변경: table 버튼 텍스트는 font-weight를 400으로 고정한다. */
+  --button-default-font-caption-large-weight: 400;
+  --button-default-font-caption-large-line-height: var(
+  --font-caption-large-line-height
+  );
+  --button-default-font-caption-large-letter-spacing: var(
+  --font-caption-large-letter-spacing
+  );
   --button-default-font-weight: 400;
   /* default button colors (priority 기반) */
   --button-default-neutral-foreground: var(--color-neutral-20);
@@ -166,7 +182,23 @@
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
   --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-chip-height: var(--theme-size-small-3, 32px);
-  --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-horizontal: var(--spacing-padding-5, 12px);
+  --theme-chip-gap: var(--spacing-gap-1, 4px);
+  /* 변경: table chip 수치를 Figma table 액션 셀 기준으로 보정한다. */
+  /* 변경: table chip 높이는 button table과 동일하게 24px로 맞춘다. */
+  --theme-chip-height-table: 24px;
+  --theme-chip-padding-horizontal-table: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-left-table: var(--spacing-padding-5, 12px);
+  --theme-chip-padding-right-table: var(--spacing-padding-4, 8px);
+  /* 변경: table chip은 높이 24px 고정을 위해 수직 padding을 사용하지 않는다. */
+  --theme-chip-padding-block-table: 0px;
+  --theme-chip-gap-table: var(--spacing-gap-1, 4px);
+  --theme-chip-font-size-table: var(--font-caption-large-size, 12px);
+  /* 변경: table chip 텍스트는 font-weight를 400으로 고정한다. */
+  --theme-chip-font-weight-table: 400;
+  --theme-chip-line-height-table: var(--font-caption-large-line-height, 1.5);
+  /* 변경: Figma 705:13702 기준으로 table chip radius를 6px로 고정한다. */
+  --theme-chip-radius-table: var(--theme-radius-medium-2, 6px);
   --theme-chip-radius: var(--theme-radius-medium-3, 8px);
   --theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
   --theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
@@ -948,6 +980,19 @@
   line-height: var(--button-default-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
   letter-spacing: var(--button-default-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
 }
+.button:where(.button-size-table) {
+  padding-inline: var(--button-default-padding-inline-table, var(--spacing-padding-5, 12px));
+  gap: var(--button-default-gap-table, var(--spacing-gap-1, 4px));
+  padding-block: var(--button-default-padding-block-table, 0px);
+  min-height: var(--button-default-height-table, var(--theme-size-small-2, 24px));
+  border-radius: var(--button-default-radius-table, var(--theme-radius-medium-2, 6px));
+}
+.button:where(.button-size-table) span {
+  font-size: var(--button-default-font-caption-large-size, var(--font-caption-large-size, 12px));
+  font-weight: var(--button-default-font-caption-large-weight, var(--button-default-font-weight, 400));
+  line-height: var(--button-default-font-caption-large-line-height, var(--font-caption-large-line-height, 1.5em));
+  letter-spacing: var(--button-default-font-caption-large-letter-spacing, var(--font-caption-large-letter-spacing, 0px));
+}
 .button:where(.button-fill-outlined) {
   box-shadow: none;
 }
@@ -1480,7 +1525,7 @@
 
 
 .chip {
-  --chip-gap: var(--spacing-gap-1, 4px);
+  --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
   --chip-label-color: var(--color-label-standard, #3d3f43);
@@ -1489,7 +1534,8 @@
   justify-content: center;
   gap: var(--chip-gap);
   height: var(--theme-chip-height);
-  padding-inline: var(--theme-chip-padding-inline);
+  padding-left: var(--theme-chip-padding-horizontal);
+  padding-right: var(--theme-chip-padding-horizontal);
   padding-block: 0;
   border-radius: var(--theme-chip-radius);
   border: 1px solid var(--chip-border-color);
@@ -1553,8 +1599,34 @@ figure.chip {
   --chip-bg: var(--color-common-100, #ffffff);
   --chip-label-color: var(--color-label-standard, #3d3f43);
   --chip-border-color: var(--color-border-assistive, #e4e5e7);
-  padding-inline-start: var(--spacing-padding-4, 8px);
-  padding-inline-end: var(--spacing-padding-2, 4px);
+  padding-left: var(--spacing-padding-4, 8px);
+  padding-right: var(--spacing-padding-2, 4px);
+}
+
+.chip:where([data-size=table]) {
+  height: var(--theme-chip-height-table);
+  padding-left: var(--theme-chip-padding-horizontal-table);
+  padding-right: var(--theme-chip-padding-horizontal-table);
+  padding-block: var(--theme-chip-padding-block-table);
+  --chip-gap: var(--theme-chip-gap-table);
+  font-size: var(--theme-chip-font-size-table);
+  font-weight: var(--theme-chip-font-weight-table);
+  line-height: var(--theme-chip-line-height-table);
+  border-radius: var(--theme-chip-radius-table);
+}
+
+.chip:where([data-size=table]) .chip-label {
+  line-height: var(--theme-chip-line-height-table);
+}
+
+.chip:where([data-size=table][data-kind=input]) {
+  padding-left: var(--theme-chip-padding-left-table);
+  padding-right: var(--theme-chip-padding-right-table);
+}
+
+.chip:where([data-size=table][data-kind=input]) .chip-remove-button {
+  width: fit-content;
+  height: fit-content;
 }
 
 .chip:where([data-kind=input][data-selected=true]) {
@@ -1562,7 +1634,7 @@ figure.chip {
 }
 
 .chip-leading {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   color: inherit;
@@ -1570,7 +1642,7 @@ figure.chip {
 }
 
 .chip-label {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--spacing-gap-1, 4px);
   color: inherit;
@@ -1579,11 +1651,11 @@ figure.chip {
 }
 
 .chip-remove-button {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: fit-content;
+  height: fit-content;
   border: none;
   background: transparent;
   color: var(--color-label-neutral, #797e86);

package/package.json

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

package/src/components/button/index.tsx

@@ -14,4 +14,4 @@ export const Button = {
 export * from "./hooks";
 export type * from "./types";
 export * from "./utils";
-export * from "./types/constants";
+export * from "./types/options";

package/src/components/button/markup/Base.tsx

@@ -22,7 +22,7 @@ import {
  *  "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"
  * } [props.scale="solid-medium"] legacy spacing 식별자. fill/size가 없을 때만 fallback 용도로 사용한다.
  * @param {"solid" | "outlined"} [props.fill] 채움 스타일. scale과 별개로 직접 지정할 수 있다.
- * @param {"xlarge" | "large" | "medium" | "small"} [props.size] 버튼 높이/타이포 스케일.
+ * @param {"xlarge" | "large" | "medium" | "small" | "table"} [props.size] 버튼 높이/타이포 스케일. table은 셀 액션용 compact(24px) 규격이다.
  * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] semantic color 세트.
  * @param {"default" | "readonly" | "disabled"} [props.state="default"] 내부 state. disabled prop과 조합된다.
  * @param {boolean} [props.block=false] true면 width 100%.

package/src/components/button/styles/button.scss

@@ -450,6 +450,38 @@ $button-priorities: (
           var(--theme-radius-large-2, 16px)
         ),
     ),
+    table: (
+      padding-inline: var(
+          --button-default-padding-inline-table,
+          var(--spacing-padding-5, 12px)
+        ),
+      gap: var(--button-default-gap-table, var(--spacing-gap-1, 4px)),
+      padding-block: var(--button-default-padding-block-table, 0px),
+      text-font-size: var(
+          --button-default-font-caption-large-size,
+          var(--font-caption-large-size, 12px)
+        ),
+      text-font-weight: var(
+          --button-default-font-caption-large-weight,
+          var(--button-default-font-weight, 400)
+        ),
+      text-line-height: var(
+          --button-default-font-caption-large-line-height,
+          var(--font-caption-large-line-height, 1.5em)
+        ),
+      text-letter-spacing: var(
+          --button-default-font-caption-large-letter-spacing,
+          var(--font-caption-large-letter-spacing, 0px)
+        ),
+      min-height: var(
+          --button-default-height-table,
+          var(--theme-size-small-2, 24px)
+        ),
+      radius: var(
+          --button-default-radius-table,
+          var(--theme-radius-medium-2, 6px)
+        ),
+    ),
   );
 
   @each $size, $tokens in $button-size-map {

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

@@ -8,15 +8,19 @@
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);
   --button-default-gap-large: var(--spacing-gap-3);
+  /* 변경: Figma node(705:13710) 기준 table 버튼 gap을 보정한다. */
+  --button-default-gap-table: var(--spacing-gap-1);
 
   --button-default-padding-inline-base: var(--spacing-padding-4);
   --button-default-padding-inline-small: var(--spacing-padding-6);
   --button-default-padding-inline-medium: var(--spacing-padding-7);
   --button-default-padding-inline-large: var(--spacing-padding-9);
+  --button-default-padding-inline-table: var(--spacing-padding-5);
   --button-default-padding-block-base: 0px;
   --button-default-padding-block-small: 0px;
   --button-default-padding-block-medium: 0px;
   --button-default-padding-block-large: 0px;
+  --button-default-padding-block-table: 0px;
 
   /* default button sizing */
   --button-default-width-min-base: var(--theme-size-small-2);
@@ -25,11 +29,13 @@
   --button-default-height-medium: var(--theme-size-medium-1, 40px);
   --button-default-height-large: var(--theme-size-medium-2, 48px);
   --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
+  --button-default-height-table: var(--theme-size-small-2, 24px);
 
   --button-default-radius-small: var(--theme-radius-medium-3);
   --button-default-radius-medium: var(--theme-radius-medium-3);
   --button-default-radius-large: var(--theme-radius-large-1);
   --button-default-radius-xlarge: var(--theme-radius-large-2);
+  --button-default-radius-table: var(--theme-radius-medium-2);
 
   /* text buttons */
   --button-text-padding-block-base: var(--spacing-padding-4, 8px);
@@ -87,6 +93,16 @@
   --button-default-font-body-large-letter-spacing: var(
     --font-body-large-letter-spacing
   );
+  /* 변경: table 버튼은 caption-large 스케일(12px)을 사용한다. */
+  --button-default-font-caption-large-size: var(--font-caption-large-size);
+  /* 변경: table 버튼 텍스트는 font-weight를 400으로 고정한다. */
+  --button-default-font-caption-large-weight: 400;
+  --button-default-font-caption-large-line-height: var(
+    --font-caption-large-line-height
+  );
+  --button-default-font-caption-large-letter-spacing: var(
+    --font-caption-large-letter-spacing
+  );
   --button-default-font-weight: 400;
 
   /* default button colors (priority 기반) */

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

@@ -1,181 +1,5 @@
-import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
-import type { FormFieldWidth } from "../../form/types";
-
 /**
- * Button; priority 옵션
- * @desc
- * - primary: 브랜드 컬러를 사용하는 기본 버튼.
- * - secondary: 보조 강조 색상.
- * - tertiary: 중립/회색 계열 보조 버튼.
+ * Button Types; barrel export 전용 파일
  */
-export type ButtonPriority = "primary" | "secondary" | "tertiary";
-
-/**
- * Button; fill 옵션
- * @desc
- * - solid: 배경을 채우는 스타일.
- * - outlined: 배경을 비우고 선만 두르는 스타일.
- */
-export type ButtonFill = "solid" | "outlined";
-
-/**
- * Button; size 옵션
- * @desc
- * - xlarge: 데스크톱 주요 CTA.
- * - large: 일반 CTA.
- * - medium: 기본/폼 버튼.
- * - small: 보조/툴바 버튼.
- */
-export type ButtonSize = "xlarge" | "large" | "medium" | "small";
-
-/**
- * fill/size 조합으로 구성된 scale 식별자.
- * @deprecated
- * @desc
- * - solid-xlarge~solid-small: Solid fill + size 조합.
- * - outlined-xlarge~outlined-small: Outline fill + size 조합.
- */
-export type ButtonScale =
-  | "solid-xlarge"
-  | "solid-large"
-  | "solid-medium"
-  | "solid-small"
-  | "outlined-xlarge"
-  | "outlined-large"
-  | "outlined-medium"
-  | "outlined-small";
-
-/**
- * Button; state 옵션
- * @desc
- * - default: 일반 상태.
- * - readonly: 조작은 막고 비주얼만 유지.
- * - disabled: 비활성화.
- */
-export type ButtonState = "default" | "readonly" | "disabled";
-
-/**
- * Button; 인터랙션 상태 고정을 위한 data-user-action 옵션
- * @optional
- * @desc
- * - hover: hover 비주얼 강제 노출.
- * - pressed: pressed 비주얼 강제 노출.
- */
-export type ButtonUserAction = "hover" | "pressed";
-/**
- * @deprecated
- */
-export type ButtonScaleGroup = ButtonFill;
-
-/**
- * Button; <button /> native props 타입
- */
-type NativeButtonProps = ComponentPropsWithoutRef<"button">;
-/**
- * Button; <a /> native props 타입
- */
-type AnchorProps = ComponentPropsWithoutRef<"a">;
-
-/**
- * Button; 컴포넌트 공통 props 타입
- */
-type SharedElementProps = Omit<NativeButtonProps, "children"> &
-  Omit<AnchorProps, "children">;
-
-/**
- * Button 컴포넌트의 공통 props.
- * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
- * @property {ReactNode} [children] 주 내용. 문자열이면 자동으로 .button-label로 감싼다.
- * @property {ButtonScale} [scale] 레이아웃/spacing 집합. 추후 fill/size 조합으로 대체 예정이다.
- * @property {ButtonFill} fill 채움 스타일. scale 조합보다 우선한다.
- * @property {ButtonSize} size 높이/타이포 스케일. scale 조합보다 우선한다.
- * @property {ButtonPriority} priority semantic color priority.
- * @property {ButtonState} [state] UI 상태. disabled prop과 조합된다.
- * @property {boolean} [block] width:100% 확장 여부.
- * @property {FormFieldWidth} [width] width preset. block보다 우선 적용된다.
- * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
- * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
- * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
- * @property {ButtonUserAction} ["data-user-action"] Interation 상태 강제 표현용 data attr.
- */
-export interface ButtonProps extends SharedElementProps {
-  /**
-   * 렌더링할 요소 타입.
-   * 기본값은 button.
-   */
-  as?: ElementType;
-  /**
-   * 버튼 라벨 또는 컨텐츠.
-   * 문자열/숫자는 .button-label span으로 감싼다.
-   */
-  children?: ReactNode;
-  /**
-   * @deprecated
-   * fill/size를 제공하지 않을 때만 fallback으로 사용한다.
-   */
-  scale?: ButtonScale;
-  /**
-   * @required
-   * - primary
-   * - secondary
-   * - tertiary
-   */
-  priority: ButtonPriority;
-  /**
-   * @required
-   * - solid
-   * - outlined
-   */
-  fill: ButtonFill;
-  /**
-   * @required
-   * - xlarge
-   * - large
-   * - medium
-   * - small
-   */
-  size: ButtonSize;
-  /**
-   * 컴포넌트 내부 state.
-   * disabled prop과 병합되어 최종 상태를 결정한다.
-   * - default
-   * - readonly
-   * - disabled
-   */
-  state?: ButtonState;
-  /**
-   * true면 버튼 폭을 100%로 확장한다.
-   */
-  block?: boolean;
-  /**
-   * width preset.
-   * block보다 우선 적용된다.
-   */
-  width?: FormFieldWidth;
-  /**
-   * true면 readonly 상태로 전환하고 aria-busy를 설정한다.
-   */
-  loading?: boolean;
-  /**
-   * 라벨 왼쪽 커스텀 슬롯.
-   */
-  left?: ReactNode;
-  /**
-   * 라벨 오른쪽 커스텀 슬롯.
-   */
-  right?: ReactNode;
-  /**
-   * Storybook 등에서 hover/pressed 상태를 강제로 표현하기 위한 data attribute.
-   * - hover
-   * - pressed
-   */
-  "data-user-action"?: ButtonUserAction;
-}
-
-export type {
-  TextButtonProps,
-  TextButtonPriority,
-  TextButtonSize,
-  RoundButtonProps,
-  RoundButtonSize,
-} from "./templates";
+export type * from "./props";
+export * from "./options";

package/src/components/button/types/{constants.ts → options.ts}

@@ -6,19 +6,32 @@ import type {
   ButtonSize,
   ButtonState,
   ButtonUserAction,
-} from ".";
+} from "./props";
 
 /**
- * scale 식별자가 나타내는 fill/size/group 정보.
+ * Button Types; scale 구성 객체 타입
+ * @property {ButtonFill} fill fill 옵션.
+ * @property {ButtonScaleGroup} group scale group 옵션.
+ * @property {ButtonSize} size size 옵션.
  * @deprecated
  */
 type ButtonScaleConfig = {
+  /**
+   * fill 옵션.
+   */
   fill: ButtonFill;
+  /**
+   * scale group 옵션.
+   */
   group: ButtonScaleGroup;
+  /**
+   * size 옵션.
+   */
   size: ButtonSize;
 };
 
 /**
+ * Button Types; scale 구성 헬퍼
  * @deprecated
  */
 const createScaleConfig = (
@@ -32,7 +45,7 @@ const createScaleConfig = (
 });
 
 /**
- * ButtonPriority 전체 목록.
+ * Button Types; priority 옵션 목록
  */
 export const BUTTON_PRIORITIES: ButtonPriority[] = [
   "primary",
@@ -41,7 +54,7 @@ export const BUTTON_PRIORITIES: ButtonPriority[] = [
 ] as const;
 
 /**
- * ButtonScale 전체 목록.
+ * Button Types; scale 옵션 목록
  * @deprecated
  */
 export const BUTTON_SCALES: ButtonScale[] = [
@@ -56,21 +69,23 @@ export const BUTTON_SCALES: ButtonScale[] = [
 ] as const;
 
 /**
- * ButtonFill 전체 목록.
+ * Button Types; fill 옵션 목록
  */
 export const BUTTON_FILLS: ButtonFill[] = ["solid", "outlined"] as const;
 /**
- * ButtonSize 전체 목록.
+ * Button Types; size 옵션 목록
+ * table은 Table 셀 내 액션 버튼 전용 size 축이다.
  */
 export const BUTTON_SIZES: ButtonSize[] = [
   "xlarge",
   "large",
   "medium",
   "small",
+  "table",
 ] as const;
 
 /**
- * ButtonState 전체 목록.
+ * Button Types; state 옵션 목록
  */
 export const BUTTON_STATES: ButtonState[] = [
   "default",
@@ -79,7 +94,7 @@ export const BUTTON_STATES: ButtonState[] = [
 ] as const;
 
 /**
- * data-user-action이 허용하는 상태 리스트.
+ * Button Types; data-user-action 옵션 목록
  */
 export const BUTTON_USER_ACTIONS: ButtonUserAction[] = [
   "hover",
@@ -87,7 +102,7 @@ export const BUTTON_USER_ACTIONS: ButtonUserAction[] = [
 ] as const;
 
 /**
- * scale -> fill/size/group 매핑 테이블.
+ * Button Types; scale -> fill/size/group 매핑
  * @deprecated
  */
 export const BUTTON_SCALE_CONFIG: Record<ButtonScale, ButtonScaleConfig> = {
@@ -102,7 +117,7 @@ export const BUTTON_SCALE_CONFIG: Record<ButtonScale, ButtonScaleConfig> = {
 };
 
 /**
- * fill(grp) -> scale 리스트.
+ * Button Types; group -> scale 목록 매핑
  * @deprecated
  */
 export const BUTTON_SCALE_GROUPS: Record<ButtonScaleGroup, ButtonScale[]> = {
@@ -116,7 +131,7 @@ export const BUTTON_SCALE_GROUPS: Record<ButtonScaleGroup, ButtonScale[]> = {
 };
 
 /**
- * Button 컴포넌트의 기본 priority/scale/fill/size 값.
+ * Button Types; 기본 옵션 값
  */
 export const DEFAULT_BUTTON_PRIORITY: ButtonPriority = "primary";
 /**
@@ -127,12 +142,12 @@ export const DEFAULT_BUTTON_FILL: ButtonFill = "solid";
 export const DEFAULT_BUTTON_SIZE: ButtonSize = "medium";
 
 /**
- * fill/size 두 축이 주어졌을 때 참조할 scale 매핑 테이블.
+ * Button Types; fill/size 조합의 scale 매핑
  * @deprecated
  */
 export const BUTTON_SCALE_COMBO_MAP: Record<
   ButtonFill,
-  Record<ButtonSize, ButtonScale>
+  Record<Exclude<ButtonSize, "table">, ButtonScale>
 > = {
   solid: {
     xlarge: "solid-xlarge",