@uniai-fe/uds-primitives 0.3.15 → 0.3.17

package/dist/styles.css

@@ -1760,6 +1760,7 @@
   box-sizing: border-box;
   margin: 0;
   width: fit-content;
+  max-width: 100%;
   transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
 }
 
@@ -1863,12 +1864,13 @@ figure.chip {
 }
 
 .chip-label {
-  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/package.json

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

package/src/components/calendar/markup/Core.tsx

@@ -20,13 +20,15 @@ export default function CalendarCore({
   onChange,
   datePickerProps,
 }: CalendarGridProps) {
-  const { valueFormat: _deprecatedValueFormat, ...safeDatePickerProps } =
-    (datePickerProps ?? {}) as CalendarDatePickerProps & {
-      /**
-       * deprecated DatePicker 표시 포맷 옵션
-       */
-      valueFormat?: unknown;
-    };
+  const { valueFormat, ...safeDatePickerProps } = (datePickerProps ??
+    {}) as CalendarDatePickerProps & {
+    /**
+     * deprecated DatePicker 표시 포맷 옵션
+     */
+    valueFormat?: unknown;
+  };
+  // 변경: valueFormat은 의도적으로 폐기된 옵션이므로 명시적으로 무시한다.
+  void valueFormat;
 
   // 기본 DatePicker 옵션/스타일 책임을 Calendar.Core에 고정한다.
   const resolvedDatePickerProps = {

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

@@ -1,127 +1,55 @@
 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}
-        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>
+      <ChipInputStyle
+        {...props}
+        forwardedRef={ref as Ref<HTMLElementTagNameMap["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>
+    <ChipDefaultStyle {...props} forwardedRef={ref as Ref<HTMLButtonElement>} />
   );
 });
 

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

@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import type { ChipDefaultStyleComponentProps } from "../types";
+
+/**
+ * Chip Markup; Default/Interactive 스타일 렌더 컴포넌트
+ * @component
+ * @param {ChipDefaultStyleComponentProps} props interactive 스타일 props
+ * @param {Ref<HTMLButtonElement>} props.forwardedRef 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" forwardedRef={buttonRef}>
+ *   Assist
+ * </ChipDefaultStyle>
+ */
+export default function ChipDefaultStyle({
+  forwardedRef,
+  children,
+  selected,
+  leading,
+  className,
+  kind,
+  size = "default",
+  type,
+  ...restProps
+}: ChipDefaultStyleComponentProps) {
+  // 변경: props 구조분해는 함수 시그니처에서만 수행하고, 본문 내 `const { ... } = props` 패턴을 제거한다.
+  const resolvedKind = kind ?? "filter";
+  const isAssist = resolvedKind === "assist";
+  const hasLeading = isAssist && Boolean(leading);
+
+  return (
+    <button
+      {...restProps}
+      ref={forwardedRef}
+      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>
+  );
+}

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

@@ -0,0 +1,72 @@
+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"]>} props.forwardedRef 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
+ *   forwardedRef={figureRef}
+ *   onRemove={event => console.log(event.type)}
+ * >
+ *   report.pdf
+ * </ChipInputStyle>
+ */
+export default function ChipInputStyle({
+  forwardedRef,
+  children,
+  className,
+  removeButtonLabel = "선택 항목 삭제",
+  onRemove,
+  disabled = false,
+  selected,
+  leading,
+  size = "default",
+  ...restProps
+}: ChipInputStyleProps) {
+  // 변경: 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}
+      ref={forwardedRef}
+      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>
+  );
+}

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,83 @@
+import type { Ref } from "react";
+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 스타일 figure ref 타입
+ * @typedef {Ref<HTMLElementTagNameMap["figure"]>} ChipInputFigureRef
+ */
+export type ChipInputFigureRef = Ref<HTMLElementTagNameMap["figure"]>;
+
+/**
+ * Chip Types; Interactive 스타일 button ref 타입
+ * @typedef {Ref<HTMLButtonElement>} ChipDefaultButtonRef
+ */
+export type ChipDefaultButtonRef = Ref<HTMLButtonElement>;
+
+/**
+ * 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; Input 스타일 컴포넌트 props
+ * @extends ChipInputProps
+ * @property {Ref<HTMLElementTagNameMap["figure"]>} forwardedRef figure ref
+ * @property {ReactNode} [children] chip 라벨 콘텐츠
+ * @property {string} [className] root className
+ * @property {string} [removeButtonLabel] remove 버튼 접근성 라벨
+ * @property {(event: MouseEvent<HTMLButtonElement>) => void} [onRemove] remove 클릭 핸들러
+ * @property {boolean} [disabled] 비활성화 여부
+ * @property {boolean} [selected] 선택 상태
+ * @property {ReactNode} [leading] leading slot
+ * @property {"default" | "table"} [size] size 축
+ * @description
+ * - `ChipInputProps`를 상속하므로 `figure` native attrs(`id`, `title`, `aria-*`, `data-*`)를 함께 포함한다.
+ */
+export interface ChipInputStyleProps extends ChipInputProps {
+  /**
+   * figure ref
+   */
+  forwardedRef: ChipInputFigureRef;
+}
+
+/**
+ * Chip Types; Interactive 스타일 컴포넌트 props
+ * @extends ChipDefaultStyleProps
+ * @property {Ref<HTMLButtonElement>} forwardedRef button ref
+ * @property {ReactNode} [children] chip 라벨 콘텐츠
+ * @property {boolean} [selected] 선택 상태
+ * @property {ReactNode} [leading] assist kind leading slot
+ * @property {string} [className] root className
+ * @property {"filter" | "filter-rounded" | "assist"} [kind] interactive kind
+ * @property {"default" | "table"} [size] size 축
+ * @property {"button" | "submit" | "reset"} [type] button type
+ * @description
+ * - `ChipDefaultStyleProps`를 상속하므로 `button` native attrs(`onClick`, `id`, `title`, `aria-*`, `data-*`)를 함께 포함한다.
+ */
+export interface ChipDefaultStyleComponentProps extends ChipDefaultStyleProps {
+  /**
+   * button ref
+   */
+  forwardedRef: ChipDefaultButtonRef;
+}

package/src/components/input/hooks/useInputFile.ts

@@ -44,6 +44,8 @@ import type { UseInputFileOptions, UseInputFileResult } from "../types";
  *     {meta.name}
  *   </Input.File.List.Item>
  * ));
+ *
+ * // 5) API 호출은 templates 또는 서비스 레이어에서 분리 구현한다.
  * ```
  */
 export const useInputFile = ({