@uniai-fe/uds-primitives 0.3.16 → 0.3.18

package/src/components/chip/markup/Chip.tsx

@@ -1,127 +1,57 @@
 import { forwardRef, type Ref } from "react";
-import RemoveIcon from "../img/remove.svg";
 import type { ChipInputProps, ChipProps } from "../types";
-import {
-  CHIP_LABEL_CLASSNAME,
-  CHIP_LEADING_CLASSNAME,
-  CHIP_REMOVE_BUTTON_CLASSNAME,
-  composeChipClassName,
-} from "../utils";
+import ChipDefaultStyle from "./DefaultStyle";
+import ChipInputStyle from "./InputStyle";
 
 // kind === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
 const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
   props.kind === "input";
 
 /**
- * Chip 종류별로 interactive/input 구조가 달라 별도 분기한다.
+ * Chip Markup; Kind별 렌더 분기 Orchestrator 컴포넌트
  * @component
- * @param {ChipProps} props
- * @param {"filter" | "filter-rounded" | "assist" | "input"} [props.kind="filter"] chip kind.
- * @param {boolean} [props.selected] 선택 상태. filter 계열에서 aria-pressed로 노출.
- * @param {React.ReactNode} [props.leading] assist kind 전용 leading slot.
- * @param {"default" | "table"} [props.size="default"] chip size 축. table은 셀 콘텐츠용 compact 규격이다.
- * @param {string} [props.removeButtonLabel="선택 항목 삭제"] input kind 제거 버튼 라벨.
- * @param {boolean} [props.disabled] input kind 상호작용 비활성화 여부. true이면 remove 버튼을 렌더링하지 않는다.
- * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input kind 제거 핸들러.
- * @param {string} [props.className] root className.
+ * @param {ChipProps} props Chip 공통/종류별 props
+ * @param {"filter" | "filter-rounded" | "assist" | "input"} [props.kind="filter"] Chip 종류
+ * @param {React.ReactNode} [props.children] Chip 라벨/콘텐츠
+ * @param {boolean} [props.selected] 선택 상태; filter 계열에서 `aria-pressed`로 반영
+ * @param {React.ReactNode} [props.leading] assist kind 좌측 slot
+ * @param {"default" | "table"} [props.size="default"] 사이즈 축
+ * @param {string} [props.removeButtonLabel="선택 항목 삭제"] input kind remove 버튼 라벨
+ * @param {boolean} [props.disabled] input kind 비활성화 여부
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input kind remove 핸들러
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onClick] interactive kind click 핸들러
+ * @param {"button" | "submit" | "reset"} [props.type] interactive kind button type
+ * @param {string} [props.className] root className
+ * @param {string} [props.id] root id
+ * @param {string} [props.title] root title
+ * @description
+ * - `kind="input"`이면 `<figure>`를 렌더하고, 나머지 kind는 `<button>`을 렌더한다.
+ * - `kind="input"`일 때 remove 버튼 클릭 이벤트는 root click으로 버블링되지 않도록 내부에서 차단한다.
+ * - native HTML attrs는 kind에 맞는 root 요소로 그대로 전달된다.
+ * @returns {JSX.Element} kind에 맞는 Chip root 요소
+ * @example
+ * <Chip kind="filter" selected>
+ *   전체
+ * </Chip>
+ * @example
+ * <Chip kind="input" onRemove={event => console.log(event.type)}>
+ *   첨부파일.pdf
+ * </Chip>
  */
 const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
   if (isChipInputProps(props)) {
-    // input kind는 figure + remove 버튼 조합으로 구성한다.
-    const {
-      children,
-      className,
-      removeButtonLabel = "선택 항목 삭제",
-      onRemove,
-      disabled = false,
-      selected,
-      leading,
-      size = "default",
-      ...restProps
-    } = props;
-    const removable = !disabled && typeof onRemove === "function";
-    const hasLeading = Boolean(leading);
-    const combinedClassName = composeChipClassName({
-      kind: "input",
-      selected,
-      hasLeading,
-      removable,
-      className,
-    });
-
     return (
-      <figure
-        {...restProps}
+      <ChipInputStyle
+        {...props}
+        // 변경: 하위 스타일 컴포넌트가 forwardRef를 사용하므로 ref를 직접 전달한다.
         ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
-        className={combinedClassName}
-        data-kind="input"
-        data-removable={removable ? "true" : "false"}
-        data-size={size}
-        data-selected={selected ? "true" : undefined}
-        data-has-leading={hasLeading ? "true" : undefined}
-        data-disabled={disabled ? "true" : undefined}
-        aria-disabled={disabled ? "true" : undefined}
-      >
-        <span className={CHIP_LABEL_CLASSNAME}>{children}</span>
-        {removable ? (
-          <button
-            type="button"
-            className={CHIP_REMOVE_BUTTON_CLASSNAME}
-            aria-label={removeButtonLabel}
-            onClick={onRemove}
-          >
-            <RemoveIcon aria-hidden="true" />
-          </button>
-        ) : null}
-      </figure>
+      />
     );
   }
 
-  const {
-    children,
-    selected,
-    leading,
-    className,
-    kind,
-    size = "default",
-    type,
-    ...restProps
-  } = props;
-  const resolvedKind = kind ?? "filter";
-  const isAssist = resolvedKind === "assist";
-  const hasLeading = isAssist && Boolean(leading);
-  const combinedClassName = composeChipClassName({
-    kind: resolvedKind,
-    selected,
-    hasLeading,
-    removable: false,
-    className,
-  });
-
   return (
-    <button
-      {...restProps}
-      ref={ref as Ref<HTMLButtonElement>}
-      type={type ?? "button"}
-      className={combinedClassName}
-      data-kind={resolvedKind}
-      data-size={size}
-      data-selected={selected ? "true" : undefined}
-      data-has-leading={hasLeading ? "true" : undefined}
-      aria-pressed={
-        typeof selected === "boolean" &&
-        (resolvedKind === "filter" || resolvedKind === "filter-rounded")
-          ? selected
-          : undefined
-      }
-    >
-      {isAssist && leading ? (
-        <span className={CHIP_LEADING_CLASSNAME} aria-hidden="true">
-          {leading}
-        </span>
-      ) : null}
-      <span className={CHIP_LABEL_CLASSNAME}>{children}</span>
-    </button>
+    // 변경: interactive 경로도 forwardRef 기반 ref 전달로 통일한다.
+    <ChipDefaultStyle {...props} ref={ref as Ref<HTMLButtonElement>} />
   );
 });
 

package/src/components/chip/markup/DefaultStyle.tsx

@@ -0,0 +1,75 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import type { ChipDefaultStyleComponentProps } from "../types";
+
+/**
+ * Chip Markup; Default/Interactive 스타일 렌더 컴포넌트
+ * @component
+ * @param {ChipDefaultStyleComponentProps} props interactive 스타일 props
+ * @param {Ref<HTMLButtonElement>} ref button ref
+ * @param {React.ReactNode} [props.children] chip 라벨 콘텐츠
+ * @param {boolean} [props.selected] 선택 상태
+ * @param {React.ReactNode} [props.leading] assist kind 좌측 slot
+ * @param {string} [props.className] root className
+ * @param {"filter" | "filter-rounded" | "assist"} [props.kind] interactive kind
+ * @param {"default" | "table"} [props.size] size 축
+ * @param {"button" | "submit" | "reset"} [props.type] button type
+ * @example
+ * <ChipDefaultStyle kind="assist" ref={buttonRef}>
+ *   Assist
+ * </ChipDefaultStyle>
+ */
+const ChipDefaultStyle = forwardRef<
+  HTMLButtonElement,
+  ChipDefaultStyleComponentProps
+>(
+  (
+    {
+      children,
+      selected,
+      leading,
+      className,
+      kind,
+      size = "default",
+      type,
+      ...restProps
+    },
+    ref,
+  ) => {
+    // 변경: props 구조분해는 함수 시그니처에서만 수행하고, 본문 내 `const { ... } = props` 패턴을 제거한다.
+    const resolvedKind = kind ?? "filter";
+    const isAssist = resolvedKind === "assist";
+    const hasLeading = isAssist && Boolean(leading);
+
+    return (
+      <button
+        {...restProps}
+        // 변경: forwardedRef custom prop 대신 forwardRef의 ref를 직접 연결한다.
+        ref={ref}
+        type={type ?? "button"}
+        className={clsx("chip", className)}
+        data-kind={resolvedKind}
+        data-size={size}
+        data-selected={selected ? "true" : undefined}
+        data-has-leading={hasLeading ? "true" : undefined}
+        aria-pressed={
+          typeof selected === "boolean" &&
+          (resolvedKind === "filter" || resolvedKind === "filter-rounded")
+            ? selected
+            : undefined
+        }
+      >
+        {isAssist && leading ? (
+          <span className="chip-leading" aria-hidden="true">
+            {leading}
+          </span>
+        ) : null}
+        <span className="chip-label">{children}</span>
+      </button>
+    );
+  },
+);
+
+ChipDefaultStyle.displayName = "ChipDefaultStyle";
+
+export default ChipDefaultStyle;

package/src/components/chip/markup/InputStyle.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import type { MouseEvent } from "react";
+import type { ChipInputStyleProps } from "../types";
+import ChipRemoveButton from "./RemoveButton";
+
+/**
+ * Chip Markup; Input 스타일 렌더 컴포넌트
+ * @component
+ * @param {ChipInputStyleProps} props input 스타일 props
+ * @param {Ref<HTMLElementTagNameMap["figure"]>} ref figure ref
+ * @param {React.ReactNode} [props.children] chip 라벨 콘텐츠
+ * @param {string} [props.className] root className
+ * @param {string} [props.removeButtonLabel="선택 항목 삭제"] remove 버튼 라벨
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] remove 클릭 핸들러
+ * @param {boolean} [props.disabled] 비활성화 여부
+ * @param {boolean} [props.selected] 선택 상태
+ * @param {React.ReactNode} [props.leading] leading slot 존재 여부 판단용 값
+ * @param {"default" | "table"} [props.size] size 축
+ * @example
+ * <ChipInputStyle
+ *   ref={figureRef}
+ *   onRemove={event => console.log(event.type)}
+ * >
+ *   report.pdf
+ * </ChipInputStyle>
+ */
+const ChipInputStyle = forwardRef<
+  HTMLElementTagNameMap["figure"],
+  ChipInputStyleProps
+>(
+  (
+    {
+      children,
+      className,
+      removeButtonLabel = "선택 항목 삭제",
+      onRemove,
+      disabled = false,
+      selected,
+      leading,
+      size = "default",
+      ...restProps
+    },
+    ref,
+  ) => {
+    // 변경: props 구조분해는 함수 시그니처에서만 수행하고, 본문 내 `const { ... } = props` 패턴을 제거한다.
+    const removable = !disabled && typeof onRemove === "function";
+    const hasLeading = Boolean(leading);
+    /**
+     * 변경: remove 버튼 클릭이 chip root click으로 버블링되지 않도록 차단한다.
+     */
+    const handleRemoveClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      onRemove?.(event);
+    };
+
+    return (
+      <figure
+        {...restProps}
+        // 변경: forwardedRef custom prop 대신 forwardRef의 ref를 직접 연결한다.
+        ref={ref}
+        className={clsx("chip", className)}
+        data-kind="input"
+        data-removable={removable ? "true" : "false"}
+        data-size={size}
+        data-selected={selected ? "true" : undefined}
+        data-has-leading={hasLeading ? "true" : undefined}
+        data-disabled={disabled ? "true" : undefined}
+        aria-disabled={disabled ? "true" : undefined}
+      >
+        <span className="chip-label">{children}</span>
+        {removable ? (
+          <ChipRemoveButton
+            removeButtonLabel={removeButtonLabel}
+            onRemove={handleRemoveClick}
+          />
+        ) : null}
+      </figure>
+    );
+  },
+);
+
+ChipInputStyle.displayName = "ChipInputStyle";
+
+export default ChipInputStyle;

package/src/components/chip/markup/RemoveButton.tsx

@@ -0,0 +1,30 @@
+import RemoveIcon from "../img/remove.svg";
+import type { ChipRemoveButtonProps } from "../types";
+
+/**
+ * Chip Markup; Input remove 버튼 컴포넌트
+ * @component
+ * @param {ChipRemoveButtonProps} props remove 버튼 props
+ * @param {string} props.removeButtonLabel 접근성 라벨
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} props.onRemove remove 클릭 핸들러
+ * @example
+ * <ChipRemoveButton
+ *   removeButtonLabel="첨부파일 삭제"
+ *   onRemove={event => console.log(event.type)}
+ * />
+ */
+export default function ChipRemoveButton({
+  removeButtonLabel,
+  onRemove,
+}: ChipRemoveButtonProps) {
+  return (
+    <button
+      type="button"
+      className="chip-remove-button"
+      aria-label={removeButtonLabel}
+      onClick={onRemove}
+    >
+      <RemoveIcon aria-hidden="true" />
+    </button>
+  );
+}

package/src/components/chip/styles/chip.scss

@@ -23,6 +23,7 @@
   box-sizing: border-box;
   margin: 0;
   width: fit-content;
+  max-width: 100%;
   transition:
     background-color 0.16s ease,
     color 0.16s ease,
@@ -132,12 +133,16 @@ figure.chip {
 }
 
 .chip-label {
-  display: flex;
-  align-items: center;
-  gap: var(--theme-chip-label-gap);
+  // display: flex;
+  // align-items: center;
+  // gap: var(--theme-chip-label-gap);
   color: inherit;
-  line-height: 1;
+  line-height: 1em;
   white-space: nowrap;
+  width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .chip-remove-button {

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

@@ -1,2 +1,3 @@
 export * from "./options";
 export type * from "./props";
+export type * from "./props-internal";

package/src/components/chip/types/props-internal.ts

@@ -0,0 +1,43 @@
+import type { MouseEvent } from "react";
+import type { ChipInputProps, ChipProps } from "./props";
+
+/**
+ * Chip Types; Interactive 스타일 props
+ * @typedef {Exclude<ChipProps, ChipInputProps>} ChipDefaultStyleProps
+ * @description
+ * - `ChipProps`에서 `kind="input"` 조합을 제외한 interactive 전용 props 집합이다.
+ * - `button` native attrs(`onClick`, `id`, `title`, `aria-*`, `data-*`)를 함께 포함한다.
+ */
+export type ChipDefaultStyleProps = Exclude<ChipProps, ChipInputProps>;
+
+/**
+ * Chip Types; Input 스타일 컴포넌트 props
+ * @typedef {ChipInputProps} ChipInputStyleProps
+ * @description
+ * - Input 스타일 렌더 컴포넌트는 `forwardRef<figure>`로 ref를 직접 수신한다.
+ */
+export type ChipInputStyleProps = ChipInputProps;
+
+/**
+ * Chip Types; remove 버튼 props
+ * @property {string} removeButtonLabel 접근성 라벨
+ * @property {(event: MouseEvent<HTMLButtonElement>) => void} onRemove remove 클릭 핸들러
+ */
+export interface ChipRemoveButtonProps {
+  /**
+   * 접근성 라벨
+   */
+  removeButtonLabel: string;
+  /**
+   * remove 클릭 핸들러
+   */
+  onRemove: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * Chip Types; Interactive 스타일 컴포넌트 props
+ * @typedef {ChipDefaultStyleProps} ChipDefaultStyleComponentProps
+ * @description
+ * - Interactive 스타일 렌더 컴포넌트는 `forwardRef<button>`으로 ref를 직접 수신한다.
+ */
+export type ChipDefaultStyleComponentProps = ChipDefaultStyleProps;

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

@@ -80,10 +80,20 @@
 
   &[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);
+    --input-line-height: var(--input-text-small-line-height);
+    --input-font-weight: var(--input-text-small-weight);
+    --input-letter-spacing: var(--input-text-small-letter-spacing);
   }
 
   &[data-size="large"] {
     min-height: var(--input-default-height-large);
+    // Figma large 규격(56px/19px)을 size token으로 고정한다.
+    --input-font-size: var(--input-text-large-size);
+    --input-line-height: var(--input-text-large-line-height);
+    --input-font-weight: var(--input-text-large-weight);
+    --input-letter-spacing: var(--input-text-large-letter-spacing);
   }
 
   &[data-priority="secondary"] {
@@ -121,6 +131,11 @@
     border-radius: var(--input-tertiary-radius-base);
     background-color: var(--input-surface-color);
     min-height: var(--input-tertiary-height-base);
+    // tertiary는 단일 사이즈지만 Figma에서 body-medium typography를 사용한다.
+    --input-font-size: var(--input-text-medium-size);
+    --input-line-height: var(--input-text-medium-line-height);
+    --input-font-weight: var(--input-text-medium-weight);
+    --input-letter-spacing: var(--input-text-medium-letter-spacing);
     row-gap: var(--input-tertiary-row-gap);
     column-gap: var(--input-default-gap);
     flex-wrap: wrap;

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

@@ -30,6 +30,19 @@
   --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);
+  /* 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);
+  --input-text-small-weight: 400;
+  --input-text-small-letter-spacing: 0.2px;
+  --input-text-medium-size: var(--font-body-medium-size);
+  --input-text-medium-line-height: var(--font-body-medium-line-height);
+  --input-text-medium-weight: 400;
+  --input-text-medium-letter-spacing: 0px;
+  --input-text-large-size: var(--font-body-large-size);
+  --input-text-large-line-height: var(--font-body-large-line-height);
+  --input-text-large-weight: 400;
+  --input-text-large-letter-spacing: 0px;
 
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
@@ -53,9 +66,9 @@
   --input-placeholder-disabled-color: var(--color-label-disabled);
   /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
   --input-placeholder-readonly-color: transparent;
-  --input-font-size: var(--font-body-medium-size);
-  --input-line-height: var(--font-body-medium-line-height);
-  --input-font-weight: 400;
+  --input-font-size: var(--input-text-medium-size);
+  --input-line-height: var(--input-text-medium-line-height);
+  --input-font-weight: var(--input-text-medium-weight);
   --input-letter-spacing: 0px;
 
   /* Border tokens */