@uniai-fe/uds-primitives 0.5.4 → 0.5.6

package/dist/styles.css

@@ -223,7 +223,11 @@
   --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);
+  /* 변경: Figma text menu item은 기본 chip보다 낮은 24px height를 사용한다. */
+  --theme-chip-height-text: 24px;
   --theme-chip-padding-horizontal: var(--spacing-padding-5);
+  /* 변경: Figma text menu item은 8px horizontal padding을 사용한다. */
+  --theme-chip-padding-horizontal-text: var(--spacing-padding-4);
   --theme-chip-gap: var(--spacing-gap-1);
   --theme-chip-assist-gap: var(--spacing-gap-2);
   --theme-chip-input-gap: var(--spacing-gap-1);
@@ -250,11 +254,15 @@
   --theme-chip-font-family: var(--font-body-medium-family);
   --theme-chip-font-size: var(--font-body-xsmall-size);
   --theme-chip-font-weight: var(--font-body-xsmall-weight);
+  /* 변경: text selected chip은 Figma semibold 상태를 foundation typography weight로 매핑한다. */
+  --theme-chip-text-font-weight-selected: var(--font-caption-large-weight);
   --divider-width: 1px;
   --divider-height: 12px;
   --divider-color: var(--color-border-standard-cool-gray, #e4e5e7);
   --divider-margin: var(--spacing-gap-4, 8px);
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
+  --drawer-overlay-z-index: 900;
+  --drawer-content-z-index: 901;
   --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
   --drawer-radius-medium: var(--theme-radius-large-1);
@@ -1974,6 +1982,7 @@
 
 .chip {
   --chip-current-height: var(--theme-chip-height);
+  --chip-padding-horizontal: var(--theme-chip-padding-horizontal);
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
@@ -1983,8 +1992,8 @@
   justify-content: center;
   gap: var(--chip-gap);
   height: var(--chip-current-height);
-  padding-left: var(--theme-chip-padding-horizontal);
-  padding-right: var(--theme-chip-padding-horizontal);
+  padding-left: var(--chip-padding-horizontal);
+  padding-right: var(--chip-padding-horizontal);
   padding-block: 0;
   border-radius: var(--theme-chip-radius);
   border: 1px solid var(--chip-border-color);
@@ -2034,6 +2043,27 @@ figure.chip {
   --chip-border-color: transparent;
 }
 
+.chip:where([data-style=text]) {
+  --chip-current-height: var(--theme-chip-height-text);
+  --chip-padding-horizontal: var(--theme-chip-padding-horizontal-text);
+  --chip-bg: transparent;
+  --chip-border-color: transparent;
+  --chip-label-color: var(--color-label-standard);
+}
+
+.chip:where([data-style=text]) .chip-label {
+  text-decoration: none;
+}
+
+.chip:where([data-style=text][data-selected=true]) {
+  --chip-bg: var(--color-surface-standard);
+  font-weight: var(--theme-chip-text-font-weight-selected);
+}
+
+.chip:where([data-style=text][data-selected=true]) .chip-label {
+  text-decoration: underline;
+}
+
 .chip:where([data-style][data-rounded=true]) {
   border-radius: calc(var(--chip-current-height) / 2);
 }
@@ -2087,6 +2117,10 @@ figure.chip {
   line-height: var(--theme-chip-line-height-table);
 }
 
+.chip:where([data-size=table][data-style=text][data-selected=true]) {
+  font-weight: var(--theme-chip-text-font-weight-selected);
+}
+
 .chip:where([data-size=table][data-style=input]) {
   padding-left: var(--theme-chip-padding-left-table);
   padding-right: var(--theme-chip-padding-right-table);
@@ -2181,6 +2215,7 @@ figure.chip {
 .drawer-overlay {
   position: fixed;
   inset: 0;
+  z-index: var(--drawer-overlay-z-index);
   background-color: var(--drawer-overlay-bg);
   opacity: 0;
   pointer-events: none;
@@ -2205,6 +2240,7 @@ figure.chip {
   position: fixed;
   display: flex;
   flex-direction: column;
+  z-index: var(--drawer-content-z-index);
   background-color: var(--drawer-surface-bg);
   outline: none;
   border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -102,9 +102,9 @@
     "@uniai-fe/uds-foundation": "workspace:*",
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
-    "prettier": "^3.8.2",
+    "prettier": "^3.8.3",
     "react-hook-form": "^7.72.1",
     "sass": "^1.99.0",
-    "typescript": "~5.9.3"
+    "typescript": "5.9.3"
   }
 }

package/src/components/chip/index.tsx

@@ -1,9 +1,10 @@
 /**
- * Chip; filter/assist/input chip 카테고리 배럴
+ * Chip; filter/assist/input/text chip 카테고리 배럴
  * @desc
  * - `Chip.Default`: style 분기 루트 컴포넌트다.
  * - `Chip.ClickableStyle`: filter/assist button 렌더 전용 leaf다.
  * - `Chip.InputStyle`: input figure 렌더 전용 leaf다.
+ * - `Chip.TextStyle`: text button 렌더 전용 leaf다.
  * - `Chip.List`: chip 목록 템플릿이다.
  * - `ChipProps`, `ChipListRootProps`, `ChipListItemData`: public contract 타입이다.
  */

package/src/components/chip/markup/{Chip.tsx → foundation/Chip.tsx}

@@ -1,18 +1,23 @@
 import { forwardRef, type Ref } from "react";
 import clsx from "clsx";
-import type { ChipInputProps, ChipProps } from "../types";
-import ChipClickableStyle from "./DefaultStyle";
-import ChipInputStyle from "./InputStyle";
+import type { ChipInputProps, ChipProps } from "../../types";
+import ChipClickableStyle from "../templates/DefaultStyle";
+import ChipInputStyle from "../templates/InputStyle";
+import ChipTextStyle from "../templates/TextStyle";
 
 // chipStyle === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
 const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
   props.chipStyle === "input";
 
+// chipStyle === "text" 조합에서 text leaf 분기를 고정하기 위한 type guard.
+const isChipTextProps = (props: ChipProps): boolean =>
+  props.chipStyle === "text";
+
 /**
  * Chip Markup; Style별 렌더 분기 Orchestrator 컴포넌트
  * @component
  * @param {ChipProps} props Chip 공통/종류별 props
- * @param {"filter" | "assist" | "input"} [props.chipStyle="filter"] Chip 스타일
+ * @param {"filter" | "assist" | "input" | "text"} [props.chipStyle="filter"] Chip 스타일
  * @param {"solid" | "outlined"} [props.fill="solid"] Chip 채움 스타일
  * @param {boolean} [props.rounded=false] pill radius 적용 여부
  * @param {React.ReactNode} [props.children] Chip 라벨/콘텐츠
@@ -29,6 +34,7 @@ const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
  * @param {string} [props.title] root title
  * @description
  * - `chipStyle="input"`이면 `<figure>`를 렌더하고, 나머지 스타일은 `<button>`을 렌더한다.
+ * - `chipStyle="text"`일 때는 menu item 전용 text leaf를 렌더한다.
  * - `chipStyle="input"`일 때 remove 버튼 클릭 이벤트는 root click으로 버블링되지 않도록 내부에서 차단한다.
  * - native HTML attrs는 style에 맞는 root 요소로 그대로 전달된다.
  * @returns {JSX.Element} style에 맞는 Chip root 요소
@@ -56,6 +62,17 @@ const ChipDefault = forwardRef<HTMLElement, ChipProps>((props, ref) => {
     );
   }
 
+  if (isChipTextProps(props)) {
+    return (
+      <ChipTextStyle
+        {...props}
+        // 변경: text leaf도 root 역할 className을 동일하게 누적한다.
+        className={mergedClassName}
+        ref={ref as Ref<HTMLButtonElement>}
+      />
+    );
+  }
+
   return (
     // 변경: 역할 className을 루트 컴포넌트에서 누적 전달한다.
     // 변경: interactive 경로도 forwardRef 기반 ref 전달로 통일한다.

package/src/components/chip/markup/{Label.tsx → foundation/Label.tsx}

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { Slot } from "../../slot";
-import type { ChipLabelProps } from "../types/props";
+import { Slot } from "../../../slot";
+import type { ChipLabelProps } from "../../types/props";
 
 /**
  * Chip Label; Chip 라벨 텍스트 렌더 컴포넌트.

package/src/components/chip/markup/{ListRoot.tsx → foundation/ListRoot.tsx}

@@ -1,15 +1,16 @@
 import { type CSSProperties } from "react";
 import clsx from "clsx";
-import type { ChipListRootProps } from "../types";
-import ChipClickableStyle from "./DefaultStyle";
-import ChipInputStyle from "./InputStyle";
+import type { ChipListRootProps } from "../../types";
+import ChipClickableStyle from "../templates/DefaultStyle";
+import ChipInputStyle from "../templates/InputStyle";
+import ChipTextStyle from "../templates/TextStyle";
 
 /**
  * Chip Markup; List Root 템플릿 컴포넌트
  * @component
  * @param {ChipListRootProps<OptionData>} props list root props
  * @param {ChipListItemData<OptionData>[]} props.items 렌더링할 chip 엔트리 목록
- * @param {"filter" | "assist" | "input"} [props.chipStyle="filter"] item 공통 chip 스타일
+ * @param {"filter" | "assist" | "input" | "text"} [props.chipStyle="filter"] item 공통 chip 스타일
  * @param {"solid" | "outlined"} [props.fill="solid"] item 공통 chip 채움 스타일
  * @param {boolean} [props.rounded=false] item 공통 pill radius 적용 여부
  * @param {"default" | "table"} [props.size="default"] item 공통 chip 사이즈 축
@@ -35,6 +36,7 @@ function ChipListRoot<OptionData = unknown>({
   style,
   ...restProps
 }: ChipListRootProps<OptionData>) {
+  // 변경: text list는 title/header 없이 item row만 담당하고, 외부에서 헤더를 조합한다.
   const mergedStyle = {
     ...style,
     ...(typeof gap === "undefined" ? {} : { gap }),
@@ -64,6 +66,20 @@ function ChipListRoot<OptionData = unknown>({
             >
               {item.label}
             </ChipInputStyle>
+          ) : chipStyle === "text" ? (
+            <ChipTextStyle
+              chipStyle="text"
+              fill={fill}
+              rounded={rounded}
+              size={size}
+              selected={item.selected}
+              disabled={item.disabled}
+              title={item.title}
+              className={clsx("chip-list-chip", item.className)}
+              onClick={item.onClick}
+            >
+              {item.label}
+            </ChipTextStyle>
           ) : (
             <ChipClickableStyle
               chipStyle={chipStyle}

package/src/components/chip/markup/{RemoveButton.tsx → foundation/RemoveButton.tsx}

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import RemoveIcon from "../img/remove.svg";
-import type { ChipRemoveButtonProps } from "../types";
+import RemoveIcon from "../../img/remove.svg";
+import type { ChipRemoveButtonProps } from "../../types";
 
 /**
  * Chip Markup; Input remove 버튼 컴포넌트

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

@@ -1,15 +1,17 @@
-import { ChipDefault } from "./Chip";
-import ChipClickableStyle from "./DefaultStyle";
-import ChipInputStyle from "./InputStyle";
-import ChipLabel from "./Label";
-import { ChipListRoot } from "./ListRoot";
+import { ChipDefault } from "./foundation/Chip";
+import ChipClickableStyle from "./templates/DefaultStyle";
+import ChipInputStyle from "./templates/InputStyle";
+import ChipTextStyle from "./templates/TextStyle";
+import ChipLabel from "./foundation/Label";
+import { ChipListRoot } from "./foundation/ListRoot";
 
 /**
- * Chip; filter/assist/input namespace
+ * Chip; filter/assist/input/text namespace
  * @desc
  * - `Chip.Default`: style 분기 루트 컴포넌트다.
  * - `Chip.ClickableStyle`: filter/assist button 렌더 전용 leaf다.
  * - `Chip.InputStyle`: input figure 렌더 전용 leaf다.
+ * - `Chip.TextStyle`: text button 렌더 전용 leaf다.
  * - `Chip.Label`: chip 텍스트 슬롯이다.
  * - `Chip.List`: chip 목록 템플릿이다.
  */
@@ -17,6 +19,7 @@ export const Chip = {
   Default: ChipDefault,
   ClickableStyle: ChipClickableStyle,
   InputStyle: ChipInputStyle,
+  TextStyle: ChipTextStyle,
   Label: ChipLabel,
   List: ChipListRoot,
 };

package/src/components/chip/markup/{DefaultStyle.tsx → templates/DefaultStyle.tsx}

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import clsx from "clsx";
-import type { ChipClickableStyleComponentProps } from "../types";
-import ChipLabel from "./Label";
+import type { ChipClickableStyleComponentProps } from "../../types";
+import ChipLabel from "../foundation/Label";
 
 /**
  * Chip Markup; Default/Interactive 스타일 렌더 컴포넌트

package/src/components/chip/markup/{InputStyle.tsx → templates/InputStyle.tsx}

@@ -1,9 +1,9 @@
 import { forwardRef } from "react";
 import clsx from "clsx";
 import type { MouseEvent } from "react";
-import type { ChipInputStyleProps } from "../types";
-import ChipRemoveButton from "./RemoveButton";
-import ChipLabel from "./Label";
+import type { ChipInputStyleProps } from "../../types";
+import ChipRemoveButton from "../foundation/RemoveButton";
+import ChipLabel from "../foundation/Label";
 
 /**
  * Chip Markup; Input 스타일 렌더 컴포넌트

package/src/components/chip/markup/templates/TextStyle.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import type { ChipClickableStyleComponentProps } from "../../types";
+import ChipLabel from "../foundation/Label";
+
+/**
+ * Chip Markup; Text 스타일 렌더 컴포넌트
+ * @component
+ * @param {ChipClickableStyleComponentProps} props text 스타일 props
+ * @param {Ref<HTMLButtonElement>} ref button ref
+ * @param {React.ReactNode} [props.children] chip 라벨 콘텐츠
+ * @param {boolean} [props.selected] 선택 상태
+ * @param {string} [props.className] root className
+ * @param {"text"} [props.chipStyle] text style
+ * @param {"default" | "table"} [props.size] size 축
+ * @param {"solid" | "outlined"} [props.fill] 채움 스타일
+ * @param {boolean} [props.rounded] pill radius 적용 여부
+ * @param {"button" | "submit" | "reset"} [props.type] button type
+ * @example
+ * <ChipTextStyle chipStyle="text" selected ref={buttonRef}>
+ *   내용
+ * </ChipTextStyle>
+ */
+const ChipTextStyle = forwardRef<
+  HTMLButtonElement,
+  ChipClickableStyleComponentProps
+>(
+  (
+    {
+      children,
+      selected,
+      className,
+      chipStyle: _chipStyle,
+      leading: _leading,
+      size = "default",
+      fill = "solid",
+      rounded = false,
+      type,
+      ...restProps
+    },
+    ref,
+  ) => {
+    void _chipStyle;
+    void _leading;
+
+    return (
+      <button
+        {...restProps}
+        // 변경: text chip도 기존 interactive 계열과 동일한 forwardRef/button 계약을 유지한다.
+        ref={ref}
+        type={type ?? "button"}
+        className={clsx("chip", "chip-text-style", "chip-text-root", className)}
+        data-style="text"
+        data-fill={fill}
+        data-rounded={rounded ? "true" : undefined}
+        data-size={size}
+        data-selected={selected ? "true" : undefined}
+        aria-pressed={typeof selected === "boolean" ? selected : undefined}
+      >
+        {/* 변경: text style은 Figma 기준으로 leading slot을 열지 않고 label만 렌더한다. */}
+        <ChipLabel className="chip-text-label">{children}</ChipLabel>
+      </button>
+    );
+  },
+);
+
+ChipTextStyle.displayName = "ChipTextStyle";
+
+export default ChipTextStyle;

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

@@ -1,5 +1,6 @@
 .chip {
   --chip-current-height: var(--theme-chip-height);
+  --chip-padding-horizontal: var(--theme-chip-padding-horizontal);
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
@@ -9,8 +10,8 @@
   justify-content: center;
   gap: var(--chip-gap);
   height: var(--chip-current-height);
-  padding-left: var(--theme-chip-padding-horizontal);
-  padding-right: var(--theme-chip-padding-horizontal);
+  padding-left: var(--chip-padding-horizontal);
+  padding-right: var(--chip-padding-horizontal);
   padding-block: 0;
   border-radius: var(--theme-chip-radius);
   border: 1px solid var(--chip-border-color);
@@ -64,6 +65,27 @@ figure.chip {
   --chip-border-color: transparent;
 }
 
+.chip:where([data-style="text"]) {
+  --chip-current-height: var(--theme-chip-height-text);
+  --chip-padding-horizontal: var(--theme-chip-padding-horizontal-text);
+  --chip-bg: transparent;
+  --chip-border-color: transparent;
+  --chip-label-color: var(--color-label-standard);
+}
+
+.chip:where([data-style="text"]) .chip-label {
+  text-decoration: none;
+}
+
+.chip:where([data-style="text"][data-selected="true"]) {
+  --chip-bg: var(--color-surface-standard);
+  font-weight: var(--theme-chip-text-font-weight-selected);
+}
+
+.chip:where([data-style="text"][data-selected="true"]) .chip-label {
+  text-decoration: underline;
+}
+
 .chip:where([data-style][data-rounded="true"]) {
   border-radius: calc(var(--chip-current-height) / 2);
 }
@@ -118,6 +140,10 @@ figure.chip {
   line-height: var(--theme-chip-line-height-table);
 }
 
+.chip:where([data-size="table"][data-style="text"][data-selected="true"]) {
+  font-weight: var(--theme-chip-text-font-weight-selected);
+}
+
 .chip:where([data-size="table"][data-style="input"]) {
   padding-left: var(--theme-chip-padding-left-table);
   padding-right: var(--theme-chip-padding-right-table);

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

@@ -1,7 +1,11 @@
 /* Chip 기본 토큰 래핑 */
 :root {
   --theme-chip-height: var(--theme-size-small-3);
+  /* 변경: Figma text menu item은 기본 chip보다 낮은 24px height를 사용한다. */
+  --theme-chip-height-text: 24px;
   --theme-chip-padding-horizontal: var(--spacing-padding-5);
+  /* 변경: Figma text menu item은 8px horizontal padding을 사용한다. */
+  --theme-chip-padding-horizontal-text: var(--spacing-padding-4);
   --theme-chip-gap: var(--spacing-gap-1);
   --theme-chip-assist-gap: var(--spacing-gap-2);
   --theme-chip-input-gap: var(--spacing-gap-1);
@@ -28,4 +32,6 @@
   --theme-chip-font-family: var(--font-body-medium-family);
   --theme-chip-font-size: var(--font-body-xsmall-size);
   --theme-chip-font-weight: var(--font-body-xsmall-weight);
+  /* 변경: text selected chip은 Figma semibold 상태를 foundation typography weight로 매핑한다. */
+  --theme-chip-text-font-weight-selected: var(--font-caption-large-weight);
 }

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

@@ -4,8 +4,9 @@
  * - filter
  * - assist
  * - input
+ * - text
  */
-export const CHIP_STYLES = ["filter", "assist", "input"] as const;
+export const CHIP_STYLES = ["filter", "assist", "input", "text"] as const;
 
 /**
  * Chip Types; fill 옵션 목록
@@ -41,6 +42,6 @@ export type ChipSize = (typeof CHIP_SIZES)[number];
 
 /**
  * Chip Types; interactive style union 타입
- * @typedef {"filter" | "assist"} ChipInteractiveStyle
+ * @typedef {"filter" | "assist" | "text"} ChipInteractiveStyle
  */
 export type ChipInteractiveStyle = Exclude<ChipStyle, "input">;

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

@@ -71,7 +71,7 @@ export interface ChipCommonProps {
 export interface ChipInteractiveProps extends ChipCommonProps, ButtonProps {
   /**
    * input을 제외한 interactive 스타일.
-   * "filter" | "assist"
+   * "filter" | "assist" | "text"
    */
   chipStyle?: ChipInteractiveStyle;
 }

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

@@ -1,6 +1,8 @@
 :root {
   // Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
+  --drawer-overlay-z-index: 900;
+  --drawer-content-z-index: 901;
   --drawer-surface-bg: var(--color-surface-static-white);
   --drawer-radius-large: var(--theme-radius-large-2);
   --drawer-radius-medium: var(--theme-radius-large-1);
@@ -26,6 +28,7 @@
 .drawer-overlay {
   position: fixed;
   inset: 0;
+  z-index: var(--drawer-overlay-z-index);
   background-color: var(--drawer-overlay-bg);
   opacity: 0;
   pointer-events: none;
@@ -55,6 +58,7 @@
   position: fixed;
   display: flex;
   flex-direction: column;
+  z-index: var(--drawer-content-z-index);
   background-color: var(--drawer-surface-bg);
   outline: none;
   border: none;