@uniai-fe/uds-primitives 0.2.10 → 0.3.0

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

@@ -0,0 +1,264 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { FormFieldWidth } from "../../form/types";
+
+/**
+ * Button; priority 옵션
+ * @typedef {"primary" | "secondary" | "tertiary"} ButtonPriority
+ * @desc
+ * - primary: 브랜드 컬러를 사용하는 기본 버튼.
+ * - secondary: 보조 강조 색상.
+ * - tertiary: 중립/회색 계열 보조 버튼.
+ */
+export type ButtonPriority = "primary" | "secondary" | "tertiary";
+
+/**
+ * Button; fill 옵션
+ * @typedef {"solid" | "outlined"} ButtonFill
+ * @desc
+ * - solid: 배경을 채우는 스타일.
+ * - outlined: 배경을 비우고 선만 두르는 스타일.
+ */
+export type ButtonFill = "solid" | "outlined";
+
+/**
+ * Button; size 옵션
+ * @typedef {"xlarge" | "large" | "medium" | "small" | "table"} ButtonSize
+ * @desc
+ * - xlarge: 데스크톱 주요 CTA.
+ * - large: 일반 CTA.
+ * - medium: 기본/폼 버튼.
+ * - small: 보조/툴바 버튼.
+ * - table: Table 셀 내 필드/액션 버튼.
+ */
+export type ButtonSize = "xlarge" | "large" | "medium" | "small" | "table";
+
+/**
+ * fill/size 조합으로 구성된 scale 식별자.
+ * @typedef {
+ *   "solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" |
+ *   "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"
+ * } ButtonScale
+ * @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 옵션
+ * @typedef {"default" | "readonly" | "disabled"} ButtonState
+ * @desc
+ * - default: 일반 상태.
+ * - readonly: 조작은 막고 비주얼만 유지.
+ * - disabled: 비활성화.
+ */
+export type ButtonState = "default" | "readonly" | "disabled";
+
+/**
+ * Button; 인터랙션 상태 고정을 위한 data-user-action 옵션
+ * @typedef {"hover" | "pressed"} ButtonUserAction
+ * @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 {"solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" | "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"} [scale] 레이아웃/spacing 집합. 추후 fill/size 조합으로 대체 예정이다.
+ * @property {"solid" | "outlined"} fill 채움 스타일. scale 조합보다 우선한다.
+ * @property {"xlarge" | "large" | "medium" | "small" | "table"} size 높이/타이포 스케일. scale 조합보다 우선한다.
+ * @property {"primary" | "secondary" | "tertiary"} priority semantic color priority.
+ * @property {"default" | "readonly" | "disabled"} [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 {"hover" | "pressed"} ["data-user-action"] Interaction 상태 강제 표현용 data attr.
+ */
+export interface ButtonProps extends SharedElementProps {
+  /**
+   * 렌더링할 요소 타입.
+   * 기본값은 button.
+   */
+  as?: ElementType;
+  /**
+   * 버튼 라벨 또는 컨텐츠.
+   * 문자열/숫자는 .button-label span으로 감싼다.
+   */
+  children?: ReactNode;
+  /**
+   * @deprecated
+   * "solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" |
+   * "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"
+   * fill/size를 제공하지 않을 때만 fallback으로 사용한다.
+   */
+  scale?: ButtonScale;
+  /**
+   * @required
+   * "primary" | "secondary" | "tertiary"
+   */
+  priority: ButtonPriority;
+  /**
+   * @required
+   * "solid" | "outlined"
+   */
+  fill: ButtonFill;
+  /**
+   * @required
+   * "xlarge" | "large" | "medium" | "small" | "table"
+   */
+  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;
+}
+
+/**
+ * 변경 사항: preset 타입 파일을 제거하고 props.ts로 통합한다.
+ */
+
+/**
+ * Button Types; Text preset size 옵션
+ * @typedef {"small" | "medium" | "large"} TextButtonSize
+ * @desc
+ * - `small`
+ * - `medium`
+ * - `large`
+ */
+export type TextButtonSize = "small" | "medium" | "large";
+
+/**
+ * Button Types; Text preset priority 옵션
+ * @typedef {"secondary" | "tertiary"} TextButtonPriority
+ * @desc
+ * - `secondary`
+ * - `tertiary`
+ */
+export type TextButtonPriority = Exclude<ButtonPriority, "primary">;
+
+/**
+ * Button Types; Text preset props
+ * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
+ * @property {ReactNode} [children] 주 내용. 문자열이면 자동으로 .button-label로 감싼다.
+ * @property {"small" | "medium" | "large"} size 높이/타이포 스케일. scale 조합보다 우선한다.
+ * @property {"secondary" | "tertiary"} priority semantic color priority.
+ * @property {"default" | "readonly" | "disabled"} [state] UI 상태. disabled prop과 조합된다.
+ * @property {boolean} [block] width:100% 확장 여부.
+ * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
+ * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
+ * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
+ * @property {"hover" | "pressed"} ["data-user-action"] Interaction 상태 강제 표현용 data attr.
+ */
+export interface TextButtonProps extends Omit<
+  ButtonProps,
+  "scale" | "priority" | "fill" | "size"
+> {
+  /**
+   * @required
+   * "secondary" | "tertiary"
+   */
+  priority: TextButtonPriority;
+  /**
+   * Text template은 table size를 지원하지 않는다.
+   * @required
+   * "small" | "medium" | "large"
+   */
+  size: TextButtonSize;
+}
+
+/**
+ * Button Types; Rounded preset size 옵션
+ * @typedef {"small" | "medium" | "large"} RoundButtonSize
+ * @desc
+ * - `small`
+ * - `medium`
+ * - `large`
+ */
+export type RoundButtonSize = "small" | "medium" | "large";
+
+/**
+ * Button Types; Rounded preset props
+ * @property {ElementType} [as] 렌더링할 요소. 기본값은 button.
+ * @property {ReactNode} [children] 주 내용. 문자열이면 자동으로 .button-label로 감싼다.
+ * @property {"small" | "medium" | "large"} size 높이/타이포 스케일. 템플릿에서 fill/size를 자동 매핑한다.
+ * @property {"primary" | "secondary" | "tertiary"} priority semantic color priority.
+ * @property {"default" | "readonly" | "disabled"} [state] UI 상태. disabled prop과 조합된다.
+ * @property {boolean} [block] width:100% 확장 여부.
+ * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
+ * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
+ * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
+ * @property {"hover" | "pressed"} ["data-user-action"] Interaction 상태 강제 표현용 data attr.
+ */
+export interface RoundButtonProps extends Omit<
+  ButtonProps,
+  "scale" | "size" | "fill"
+> {
+  /**
+   * 라운드 버튼 전용 size 축.
+   * "small" | "medium" | "large"
+   * 템플릿에서 fill/size를 자동 매핑한다.
+   */
+  size: RoundButtonSize;
+}

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

@@ -19,6 +19,7 @@ const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
  * @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 {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input kind 제거 핸들러.
  * @param {string} [props.className] root className.
@@ -33,6 +34,7 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
       onRemove,
       selected,
       leading,
+      size = "default",
       ...restProps
     } = props;
     const hasLeading = Boolean(leading);
@@ -51,6 +53,7 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
         className={combinedClassName}
         data-kind="input"
         data-removable="true"
+        data-size={size}
         data-selected={selected ? "true" : undefined}
         data-has-leading={hasLeading ? "true" : undefined}
       >
@@ -67,8 +70,16 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
     );
   }
 
-  const { children, selected, leading, className, kind, type, ...restProps } =
-    props;
+  const {
+    children,
+    selected,
+    leading,
+    className,
+    kind,
+    size = "default",
+    type,
+    ...restProps
+  } = props;
   const resolvedKind = kind ?? "filter";
   const isAssist = resolvedKind === "assist";
   const hasLeading = isAssist && Boolean(leading);
@@ -87,6 +98,7 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
       type={type ?? "button"}
       className={combinedClassName}
       data-kind={resolvedKind}
+      data-size={size}
       data-selected={selected ? "true" : undefined}
       data-has-leading={hasLeading ? "true" : undefined}
       aria-pressed={

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

@@ -0,0 +1,154 @@
+.chip {
+  --chip-gap: var(--theme-chip-gap);
+  --chip-bg: transparent;
+  --chip-border-color: transparent;
+  --chip-label-color: var(--color-label-standard, #3d3f43);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-gap);
+  height: var(--theme-chip-height);
+  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);
+  background-color: var(--chip-bg);
+  color: var(--chip-label-color);
+  font-family: var(--theme-chip-font-family);
+  font-size: var(--theme-chip-font-size);
+  font-weight: var(--theme-chip-font-weight);
+  line-height: 1;
+  letter-spacing: 0.2px;
+  box-sizing: border-box;
+  margin: 0;
+  width: fit-content;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease,
+    border-color 0.16s ease,
+    opacity 0.16s ease;
+}
+
+button.chip {
+  appearance: none;
+  cursor: pointer;
+}
+
+figure.chip {
+  margin: 0;
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--color-primary-default, #1a6aff);
+  outline-offset: 2px;
+}
+
+.chip:where([data-kind="filter"]),
+.chip:where([data-kind="filter-rounded"]) {
+  --chip-bg: var(--color-surface-standard, #f2f2f3);
+  --chip-label-color: var(--color-label-neutral, #797e86);
+  --chip-border-color: transparent;
+}
+
+.chip:where([data-kind="filter"][data-selected="true"]),
+.chip:where([data-kind="filter-rounded"][data-selected="true"]) {
+  --chip-bg: var(--color-surface-heavy, #313235);
+  --chip-label-color: var(--color-common-100, #ffffff);
+}
+
+.chip:where([data-kind="filter-rounded"]) {
+  border-radius: var(--theme-chip-rounded-radius);
+}
+
+.chip:where([data-kind="assist"]) {
+  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
+  --chip-label-color: var(--color-label-strong, #18191b);
+  --chip-gap: var(--spacing-gap-2, 8px);
+  --chip-border-color: transparent;
+}
+
+.chip:where([data-kind="assist"][data-selected="true"]) {
+  --chip-label-color: var(--color-primary-default, #1a6aff);
+}
+
+.chip:where([data-kind="input"]) {
+  --chip-gap: var(--spacing-gap-1, 4px);
+  --chip-bg: var(--color-common-100, #ffffff);
+  --chip-label-color: var(--color-label-standard, #3d3f43);
+  --chip-border-color: var(--color-border-assistive, #e4e5e7);
+  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"]) {
+  --chip-border-color: var(--color-border-standard-blue, #ccdeff);
+}
+
+.chip-leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.chip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-1, 4px);
+  color: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.chip-remove-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  border: none;
+  background: transparent;
+  color: var(--color-label-neutral, #797e86);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.16s ease;
+}
+
+.chip-remove-button:hover,
+.chip-remove-button:focus-visible {
+  color: var(--color-label-strong, #18191b);
+}
+
+.chip-remove-button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

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

@@ -1,138 +1,2 @@
-/* Chip 기본 토큰 래핑 */
-:root {
-  --theme-chip-height: var(--theme-size-small-3, 32px);
-  --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
-  --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");
-  --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
-  --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
-}
-
-.chip {
-  --chip-gap: var(--spacing-gap-1, 4px);
-  --chip-bg: transparent;
-  --chip-border-color: transparent;
-  --chip-label-color: var(--color-label-standard, #3d3f43);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--chip-gap);
-  height: var(--theme-chip-height);
-  padding-inline: var(--theme-chip-padding-inline);
-  padding-block: 0;
-  border-radius: var(--theme-chip-radius);
-  border: 1px solid var(--chip-border-color);
-  background-color: var(--chip-bg);
-  color: var(--chip-label-color);
-  font-family: var(--theme-chip-font-family);
-  font-size: var(--theme-chip-font-size);
-  font-weight: var(--theme-chip-font-weight);
-  line-height: 1;
-  letter-spacing: 0.2px;
-  box-sizing: border-box;
-  margin: 0;
-  width: fit-content;
-  transition:
-    background-color 0.16s ease,
-    color 0.16s ease,
-    border-color 0.16s ease,
-    opacity 0.16s ease;
-}
-
-button.chip {
-  appearance: none;
-  cursor: pointer;
-}
-
-figure.chip {
-  margin: 0;
-}
-
-.chip:focus-visible {
-  outline: 2px solid var(--color-primary-default, #1a6aff);
-  outline-offset: 2px;
-}
-
-.chip:where([data-kind="filter"]),
-.chip:where([data-kind="filter-rounded"]) {
-  --chip-bg: var(--color-surface-standard, #f2f2f3);
-  --chip-label-color: var(--color-label-neutral, #797e86);
-  --chip-border-color: transparent;
-}
-
-.chip:where([data-kind="filter"][data-selected="true"]),
-.chip:where([data-kind="filter-rounded"][data-selected="true"]) {
-  --chip-bg: var(--color-surface-heavy, #313235);
-  --chip-label-color: var(--color-common-100, #ffffff);
-}
-
-.chip:where([data-kind="filter-rounded"]) {
-  border-radius: var(--theme-chip-rounded-radius);
-}
-
-.chip:where([data-kind="assist"]) {
-  --chip-bg: var(--color-surface-static-neutral, #f2f2f2);
-  --chip-label-color: var(--color-label-strong, #18191b);
-  --chip-gap: var(--spacing-gap-2, 8px);
-  --chip-border-color: transparent;
-}
-
-.chip:where([data-kind="assist"][data-selected="true"]) {
-  --chip-label-color: var(--color-primary-default, #1a6aff);
-}
-
-.chip:where([data-kind="input"]) {
-  --chip-gap: var(--spacing-gap-1, 4px);
-  --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);
-}
-
-.chip:where([data-kind="input"][data-selected="true"]) {
-  --chip-border-color: var(--color-border-standard-blue, #ccdeff);
-}
-
-.chip-leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  flex-shrink: 0;
-}
-
-.chip-label {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-gap-1, 4px);
-  color: inherit;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.chip-remove-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: none;
-  background: transparent;
-  color: var(--color-label-neutral, #797e86);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.16s ease;
-}
-
-.chip-remove-button:hover,
-.chip-remove-button:focus-visible {
-  color: var(--color-label-strong, #18191b);
-}
-
-.chip-remove-button svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+@use "./variables.scss";
+@use "./chip.scss";

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

@@ -0,0 +1,26 @@
+/* Chip 기본 토큰 래핑 */
+:root {
+  --theme-chip-height: var(--theme-size-small-3, 32px);
+  --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");
+  --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
+  --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
+}

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

@@ -1,52 +1,2 @@
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
-
-export const CHIP_KINDS = [
-  "filter",
-  "filter-rounded",
-  "assist",
-  "input",
-] as const;
-
-export type ChipKind = (typeof CHIP_KINDS)[number];
-export type InteractiveChipKind = Exclude<ChipKind, "input">;
-
-type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children">;
-type FigureProps = Omit<ComponentPropsWithoutRef<"figure">, "children">;
-
-export interface ChipCommonProps {
-  /**
-   * 표시할 라벨.
-   */
-  children?: ReactNode;
-  /**
-   * 선택 상태. filter 계열에서 외부 상태로 제어한다.
-   */
-  selected?: boolean;
-  /**
-   * assist kind 전용 leading slot.
-   */
-  leading?: ReactNode;
-  /**
-   * input kind 전용 제거 버튼 aria-label.
-   */
-  removeButtonLabel?: string;
-}
-
-export interface ChipInteractiveProps extends ChipCommonProps, ButtonProps {
-  kind?: InteractiveChipKind;
-}
-
-export interface ChipInputProps extends ChipCommonProps, FigureProps {
-  kind: "input";
-  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
-}
-
-export type ChipProps = ChipInteractiveProps | ChipInputProps;
-
-export interface ChipClassNameOptions {
-  kind: ChipKind;
-  selected?: boolean;
-  hasLeading?: boolean;
-  removable?: boolean;
-  className?: string;
-}
+export * from "./options";
+export type * from "./props";