@uniai-fe/uds-primitives 0.3.18 → 0.3.19

package/dist/styles.css

@@ -7,7 +7,7 @@
   --theme-badge-radius: var(--theme-radius-medium-1, 6px);
   --theme-badge-font-family: var(--font-caption-medium-family, inherit);
   --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  --theme-badge-font-weight: var(--font-caption-medium-weight, 400);
+  --theme-badge-font-weight: 400;
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);
@@ -188,6 +188,7 @@
   --theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
   --theme-checkbox-label-color: var(--color-label-strong);
   --theme-checkbox-label-disabled: var(--color-label-disabled);
+  --theme-checkbox-label-font-weight: 400;
   --theme-checkbox-helper-color: var(--color-label-neutral);
   --theme-checkbox-helper-disabled: var(--color-label-disabled);
   --theme-checkbox-icon-default: transparent;
@@ -439,6 +440,7 @@
   --theme-radio-disabled-selected-fill: var(--color-primary-default);
   --theme-radio-label-color: var(--color-label-strong);
   --theme-radio-label-disabled: var(--color-label-disabled);
+  --theme-radio-label-font-weight: 400;
   --theme-radio-helper-color: var(--color-label-neutral);
   --theme-radio-helper-disabled: var(--color-label-disabled);
   --theme-radio-card-background: var(--color-common-100);
@@ -1723,17 +1725,17 @@
   cursor: not-allowed;
 }
 
-.checkbox-label-text {
-  font-weight: var(--font-body-medium-weight);
+.checkbox-label {
+  font-weight: var(--theme-checkbox-label-font-weight);
   user-select: none;
 }
 
-.checkbox-field[data-size=medium] .checkbox-label-text {
+.checkbox-field[data-size=medium] .checkbox-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.checkbox-field[data-size=large] .checkbox-label-text {
+.checkbox-field[data-size=large] .checkbox-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }
@@ -1754,6 +1756,7 @@
 
 
 .chip {
+  --chip-current-height: var(--theme-chip-height);
   --chip-gap: var(--theme-chip-gap);
   --chip-bg: transparent;
   --chip-border-color: transparent;
@@ -1762,7 +1765,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--chip-gap);
-  height: var(--theme-chip-height);
+  height: var(--chip-current-height);
   padding-left: var(--theme-chip-padding-horizontal);
   padding-right: var(--theme-chip-padding-horizontal);
   padding-block: 0;
@@ -1796,35 +1799,47 @@ figure.chip {
   outline-offset: 2px;
 }
 
-.chip:where([data-kind=filter]),
-.chip:where([data-kind=filter-rounded]) {
+.chip:where([data-style=filter][data-fill=solid]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);
   --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=filter][data-selected=true]),
-.chip:where([data-kind=filter-rounded][data-selected=true]) {
+.chip:where([data-style=filter][data-fill=outlined]) {
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-neutral);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+}
+
+.chip:where([data-style=filter][data-selected=true]) {
   --chip-bg: var(--color-surface-heavy);
   --chip-label-color: var(--color-common-100);
+  --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=filter-rounded]) {
-  border-radius: var(--theme-chip-rounded-radius);
+.chip:where([data-style][data-rounded=true]) {
+  border-radius: calc(var(--chip-current-height) / 2);
 }
 
-.chip:where([data-kind=assist]) {
+.chip:where([data-style=assist][data-fill=solid]) {
   --chip-bg: var(--color-surface-static-neutral);
   --chip-label-color: var(--color-label-strong);
   --chip-gap: var(--theme-chip-assist-gap);
   --chip-border-color: transparent;
 }
 
-.chip:where([data-kind=assist][data-selected=true]) {
+.chip:where([data-style=assist][data-fill=outlined]) {
+  --chip-bg: var(--color-common-100);
+  --chip-label-color: var(--color-label-strong);
+  --chip-gap: var(--theme-chip-assist-gap);
+  --chip-border-color: var(--color-border-standard-cool-gray);
+}
+
+.chip:where([data-style=assist][data-selected=true]) {
   --chip-label-color: var(--color-primary-default);
 }
 
-.chip:where([data-kind=input]) {
+.chip:where([data-style=input]) {
   --chip-gap: var(--theme-chip-input-gap);
   --chip-bg: var(--color-common-100);
   --chip-label-color: var(--color-label-standard);
@@ -1833,12 +1848,13 @@ figure.chip {
   padding-right: var(--theme-chip-input-padding-right);
 }
 
-.chip:where([data-kind=input][data-removable=false]) {
+.chip:where([data-style=input][data-removable=false]) {
   padding-left: var(--theme-chip-padding-horizontal);
   padding-right: var(--theme-chip-padding-horizontal);
 }
 
 .chip:where([data-size=table]) {
+  --chip-current-height: var(--theme-chip-height-table);
   height: var(--theme-chip-height-table);
   padding-left: var(--theme-chip-padding-horizontal-table);
   padding-right: var(--theme-chip-padding-horizontal-table);
@@ -1854,22 +1870,22 @@ figure.chip {
   line-height: var(--theme-chip-line-height-table);
 }
 
-.chip:where([data-size=table][data-kind=input]) {
+.chip:where([data-size=table][data-style=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][data-removable=false]) {
+.chip:where([data-size=table][data-style=input][data-removable=false]) {
   padding-left: var(--theme-chip-padding-horizontal-table);
   padding-right: var(--theme-chip-padding-horizontal-table);
 }
 
-.chip:where([data-size=table][data-kind=input]) .chip-remove-button {
+.chip:where([data-size=table][data-style=input]) .chip-remove-button {
   width: fit-content;
   height: fit-content;
 }
 
-.chip:where([data-kind=input][data-selected=true]) {
+.chip:where([data-style=input][data-selected=true]) {
   --chip-border-color: var(--color-border-standard-blue);
 }
 
@@ -1916,6 +1932,20 @@ figure.chip {
   height: 100%;
 }
 
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip-list-item {
+  display: flex;
+}
+
 /* Divider 토큰도 전역 :root 범위에 선언한다. */
 
 
@@ -3396,17 +3426,17 @@ figure.chip {
   cursor: not-allowed;
 }
 
-.radio-label-text {
-  font-weight: var(--font-body-medium-weight);
+.radio-label {
+  font-weight: var(--theme-radio-label-font-weight);
   user-select: none;
 }
 
-.radio-field[data-size=medium] .radio-label-text {
+.radio-field[data-size=medium] .radio-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.radio-field[data-size=large] .radio-label-text {
+.radio-field[data-size=large] .radio-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }
@@ -3537,7 +3567,7 @@ figure.chip {
   --segmented-item-padding-x: 22px;
   --segmented-item-padding-y: 4px;
   --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
-  --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
+  --segmented-item-font-weight: 500;
   --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
   position: relative;
   display: block;
@@ -3618,7 +3648,7 @@ figure.chip {
   outline-offset: 2px;
 }
 
-.segmented-control-button-label {
+.segmented-control-label {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3630,7 +3660,7 @@ figure.chip {
   transition: color 0.2s ease;
 }
 
-.segmented-control-button:where([data-state=on]) .segmented-control-button-label {
+.segmented-control-button:where([data-state=on]) .segmented-control-label {
   color: var(--segmented-label-active-color);
 }
 

package/package.json

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

package/src/components/badge/markup/Badge.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 import type { BadgeProps } from "../types";
 import { composeBadgeClassName } from "../utils";
+import { Slot } from "../../slot";
 
 /**
  * Badge 컴포넌트; size/style/intent 축을 data attribute로 노출한다.
@@ -50,11 +51,8 @@ const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
         data-has-label={hasLabel ? "true" : undefined}
       >
         {renderDot}
-        {["string", "number"].includes(typeof children) ? (
-          <span className="badge-label">{children}</span>
-        ) : (
-          children
-        )}
+        {/* 변경: badge 라벨 텍스트 래핑 규칙을 Slot.Text로 통일한다. */}
+        <Slot.Text className="badge-label">{children}</Slot.Text>
       </figure>
     );
   },

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

@@ -6,7 +6,8 @@
   --theme-badge-radius: var(--theme-radius-medium-1, 6px);
   --theme-badge-font-family: var(--font-caption-medium-family, inherit);
   --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  --theme-badge-font-weight: var(--font-caption-medium-weight, 400);
+  // 변경: Badge label font-weight는 디자인 규칙에 맞춰 400으로 고정한다.
+  --theme-badge-font-weight: 400;
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);

package/src/components/button/index.tsx

@@ -3,12 +3,18 @@
  */
 import "./index.scss";
 
-import { ButtonDefault, ButtonText, ButtonRounded } from "./markup";
+import {
+  ButtonDefault,
+  ButtonText,
+  ButtonRounded,
+  ButtonLabel,
+} from "./markup";
 
 export const Button = {
   Default: ButtonDefault,
   Text: ButtonText,
   Rounded: ButtonRounded,
+  Label: ButtonLabel,
 };
 
 export * from "./hooks";

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

@@ -3,7 +3,8 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonProps } from "../types";
-import { SlotComponent } from "../../slot";
+import { Slot } from "../../slot";
+import ButtonLabel from "./Label";
 import {
   getFormFieldWidthAttr,
   getFormFieldWidthValue,
@@ -85,7 +86,7 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
         : style;
 
     return (
-      <SlotComponent
+      <Slot.Base
         className={clsx(
           "button",
           `button-fill-${fill}`,
@@ -112,19 +113,13 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
             {left}
           </span>
         )}
-        {typeof children === "string" || typeof children === "number" ? (
-          <span className="button-label" data-slot="label">
-            {children}
-          </span>
-        ) : (
-          children
-        )}
+        <ButtonLabel data-slot="label">{children}</ButtonLabel>
         {right && (
           <span className="button-right" data-slot="right">
             {right}
           </span>
         )}
-      </SlotComponent>
+      </Slot.Base>
     );
   },
 );

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

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import { Slot } from "../../slot";
+import type { ButtonLabelProps } from "../types/label";
+
+/**
+ * ButtonLabel; Button namespace에서 재사용 가능한 label 래퍼.
+ * @component
+ * @param {ButtonLabelProps} props
+ * @param {React.ElementType} [props.as="span"] 렌더링할 요소.
+ * @param {React.ReactNode} [props.children] 문자열/숫자는 button-label span으로 렌더하고, 그 외 ReactNode는 그대로 반환한다.
+ * @param {string} [props.className] button-label과 병합할 className.
+ * @example
+ * <Button.Label>확인</Button.Label>
+ */
+export default function ButtonLabel({
+  className,
+  ...restProps
+}: ButtonLabelProps) {
+  // Button 전용 라벨 클래스는 namespace 컴포넌트에서 고정 주입한다.
+  return (
+    <Slot.Text className={clsx("button-label", className)} {...restProps} />
+  );
+}

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

@@ -1,3 +1,4 @@
 export { ButtonDefault } from "./Base";
 export { ButtonText } from "./Text";
 export { ButtonRounded } from "./Rounded";
+export { default as ButtonLabel } from "./Label";

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

@@ -2,4 +2,5 @@
  * Button Types; barrel export 전용 파일
  */
 export type * from "./props";
+export type * from "./label";
 export * from "./options";

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

@@ -0,0 +1,9 @@
+import type { SlotTextProps } from "../../slot";
+
+/**
+ * ButtonLabelProps; Button 전용 label 래퍼 props.
+ * @property {React.ElementType} [as] 렌더링할 요소. 기본값은 span.
+ * @property {React.ReactNode} [children] 문자열/숫자는 래핑하고, 그 외 ReactNode는 그대로 반환한다.
+ * @property {string} [className] 기본 button-label 클래스와 병합할 className.
+ */
+export type ButtonLabelProps = SlotTextProps;

package/src/components/checkbox/markup/Checkbox.tsx

@@ -4,13 +4,14 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import type { CheckboxFieldProps, CheckboxProps, CheckboxSize } from "../types";
 import CheckLargeIcon from "../img/check-large.svg";
 import CheckMediumIcon from "../img/check-medium.svg";
+import { Slot } from "../../slot";
 
 const CHECKBOX_CLASSNAME = "checkbox";
 const CHECKBOX_SURFACE_CLASSNAME = "checkbox-surface";
 const CHECKBOX_INDICATOR_CLASSNAME = "checkbox-indicator";
 const CHECKBOX_FIELD_CLASSNAME = "checkbox-field";
 const CHECKBOX_LABEL_WRAPPER_CLASSNAME = "checkbox-label-wrapper";
-const CHECKBOX_LABEL_TEXT_CLASSNAME = "checkbox-label-text";
+const CHECKBOX_LABEL_CLASSNAME = "checkbox-label";
 const CHECKBOX_HELPER_CLASSNAME = "checkbox-helper";
 
 const getIndicatorIcon = (size: CheckboxSize) =>
@@ -95,7 +96,10 @@ const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
   ) {
     const generatedId = useId();
     const checkboxId = id ?? generatedId;
-    const labelId = label ? `${checkboxId}-label` : undefined;
+    const labelId =
+      label && ["string", "number"].includes(typeof label)
+        ? `${checkboxId}-label`
+        : undefined;
     const helperId = helperText ? `${checkboxId}-helper` : undefined;
     // Label/helper는 Root 외부에서 htmlFor/aria 연결을 유지한다.
 
@@ -126,9 +130,10 @@ const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
             ref={ref}
           />
           {label ? (
-            <span id={labelId} className={CHECKBOX_LABEL_TEXT_CLASSNAME}>
+            // 변경: label 렌더는 Slot.Text 단일 경로로 통일하고, aria-labelledby는 텍스트일 때만 연결한다.
+            <Slot.Text id={labelId} className={CHECKBOX_LABEL_CLASSNAME}>
               {label}
-            </span>
+            </Slot.Text>
           ) : null}
         </label>
         {helperText ? (

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

@@ -15,6 +15,8 @@
   --theme-checkbox-surface-selected-disabled: rgba(26, 106, 255, 0.28);
   --theme-checkbox-label-color: var(--color-label-strong);
   --theme-checkbox-label-disabled: var(--color-label-disabled);
+  // 변경: Checkbox label font-weight는 디자인 규칙에 맞춰 400으로 고정한다.
+  --theme-checkbox-label-font-weight: 400;
   --theme-checkbox-helper-color: var(--color-label-neutral);
   --theme-checkbox-helper-disabled: var(--color-label-disabled);
   --theme-checkbox-icon-default: transparent;
@@ -148,17 +150,17 @@
   cursor: not-allowed;
 }
 
-.checkbox-label-text {
-  font-weight: var(--font-body-medium-weight);
+.checkbox-label {
+  font-weight: var(--theme-checkbox-label-font-weight);
   user-select: none;
 }
 
-.checkbox-field[data-size="medium"] .checkbox-label-text {
+.checkbox-field[data-size="medium"] .checkbox-label {
   font-size: var(--font-body-xsmall-size);
   line-height: var(--font-body-xsmall-line-height);
 }
 
-.checkbox-field[data-size="large"] .checkbox-label-text {
+.checkbox-field[data-size="large"] .checkbox-label {
   font-size: var(--font-body-medium-size);
   line-height: var(--font-body-medium-line-height);
 }

package/src/components/chip/index.tsx

@@ -1,9 +1,8 @@
 /**
- * chips 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * chips 카테고리 배럴
  */
 import "./index.scss";
 
 export * from "./markup";
 export * from "./hooks";
 export type * from "./types";
-export * from "./utils";

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

@@ -1,48 +1,55 @@
 import { forwardRef, type Ref } from "react";
+import clsx from "clsx";
 import type { ChipInputProps, ChipProps } from "../types";
-import ChipDefaultStyle from "./DefaultStyle";
+import ChipClickableStyle from "./DefaultStyle";
 import ChipInputStyle from "./InputStyle";
 
-// kind === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
+// chipStyle === "input" 조합에서 props를 ChipInputProps로 좁히기 위한 type guard.
 const isChipInputProps = (props: ChipProps): props is ChipInputProps =>
-  props.kind === "input";
+  props.chipStyle === "input";
 
 /**
- * Chip Markup; Kind별 렌더 분기 Orchestrator 컴포넌트
+ * Chip Markup; Style별 렌더 분기 Orchestrator 컴포넌트
  * @component
  * @param {ChipProps} props Chip 공통/종류별 props
- * @param {"filter" | "filter-rounded" | "assist" | "input"} [props.kind="filter"] Chip 종류
+ * @param {"filter" | "assist" | "input"} [props.chipStyle="filter"] Chip 스타일
+ * @param {"solid" | "outlined"} [props.fill="solid"] Chip 채움 스타일
+ * @param {boolean} [props.rounded=false] pill radius 적용 여부
  * @param {React.ReactNode} [props.children] Chip 라벨/콘텐츠
- * @param {boolean} [props.selected] 선택 상태; filter 계열에서 `aria-pressed`로 반영
- * @param {React.ReactNode} [props.leading] assist kind 좌측 slot
+ * @param {boolean} [props.selected] 선택 상태; filter 스타일에서 `aria-pressed`로 반영
+ * @param {React.ReactNode} [props.leading] assist 스타일 좌측 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.removeButtonLabel="선택 항목 삭제"] input 스타일 remove 버튼 라벨
+ * @param {boolean} [props.disabled] input 스타일 비활성화 여부
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onRemove] input 스타일 remove 핸들러
+ * @param {(event: MouseEvent<HTMLButtonElement>) => void} [props.onClick] interactive 스타일 click 핸들러
+ * @param {"button" | "submit" | "reset"} [props.type] interactive 스타일 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 요소
+ * - `chipStyle="input"`이면 `<figure>`를 렌더하고, 나머지 스타일은 `<button>`을 렌더한다.
+ * - `chipStyle="input"`일 때 remove 버튼 클릭 이벤트는 root click으로 버블링되지 않도록 내부에서 차단한다.
+ * - native HTML attrs는 style에 맞는 root 요소로 그대로 전달된다.
+ * @returns {JSX.Element} style에 맞는 Chip root 요소
  * @example
- * <Chip kind="filter" selected>
+ * <ChipDefault chipStyle="filter" fill="solid" selected rounded>
  *   전체
- * </Chip>
+ * </ChipDefault>
  * @example
- * <Chip kind="input" onRemove={event => console.log(event.type)}>
+ * <ChipDefault chipStyle="input" onRemove={event => console.log(event.type)}>
  *   첨부파일.pdf
- * </Chip>
+ * </ChipDefault>
  */
-const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
+const ChipDefault = forwardRef<HTMLElement, ChipProps>((props, ref) => {
+  const mergedClassName = clsx("chip-default", props.className);
+
   if (isChipInputProps(props)) {
     return (
       <ChipInputStyle
         {...props}
+        // 변경: 역할 className을 루트 컴포넌트에서 누적 전달한다.
+        className={mergedClassName}
         // 변경: 하위 스타일 컴포넌트가 forwardRef를 사용하므로 ref를 직접 전달한다.
         ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
       />
@@ -50,11 +57,16 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
   }
 
   return (
+    // 변경: 역할 className을 루트 컴포넌트에서 누적 전달한다.
     // 변경: interactive 경로도 forwardRef 기반 ref 전달로 통일한다.
-    <ChipDefaultStyle {...props} ref={ref as Ref<HTMLButtonElement>} />
+    <ChipClickableStyle
+      {...props}
+      className={mergedClassName}
+      ref={ref as Ref<HTMLButtonElement>}
+    />
   );
 });
 
-Chip.displayName = "Chip";
+ChipDefault.displayName = "Chip.Default";
 
-export { Chip };
+export { ChipDefault };