@uniai-fe/uds-primitives 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -14,7 +14,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.25.0",
+  "packageManager": "pnpm@10.26.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -89,10 +89,10 @@
     "@uniai-fe/uds-foundation": "workspace:*",
     "@uniai-fe/tsconfig": "workspace:*",
     "@uniai-fe/util-functions": "workspace:*",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "prettier": "^3.7.4",
     "react-hook-form": "^7.68.0",
-    "sass": "^1.96.0",
+    "sass": "^1.97.0",
     "typescript": "~5.9.3"
   }
 }

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

@@ -4,6 +4,16 @@ import { composeBadgeClassName } from "../utils";
 
 /**
  * Badge 컴포넌트; size/style/intent 축을 data attribute로 노출한다.
+ * @component
+ * @param {BadgeProps} props
+ * @param {"xsmall" | "small"} [props.size="xsmall"] 토큰 size.
+ * @param {"fill" | "outlined" | "dot"} [props.style="fill"] 시각 스타일.
+ * @param {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [props.intent="primary"]
+ *  fill/outlined 스타일에서 사용되는 intent.
+ * @param {"primary" | "feedback"} [props.tone="primary"] dot 스타일에 사용되는 tone.
+ * @param {React.ReactNode} [props.children] 라벨 텍스트. dot 스타일에서 생략하면 점만 렌더.
+ * @param {string} [props.className] figure className.
+ * @param {React.CSSProperties} [props.inlineStyle] figure inline style.
  */
 const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
   (

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

@@ -108,7 +108,7 @@
   --badge-fill-label-color: var(--color-primary-default, #1a6aff);
 }
 
-.badge:where([data-style="fill"][data-intent="teritary"]) {
+.badge:where([data-style="fill"][data-intent="tertiary"]) {
   --badge-fill-bg-color: var(--color-cool-gray-10, #18191b);
   --badge-fill-label-color: var(--color-common-100, #ffffff);
 }
@@ -149,7 +149,7 @@
   --badge-outline-label-color: var(--color-primary-strong, #0050e5);
 }
 
-.badge:where([data-style="outlined"][data-intent="teritary"]) {
+.badge:where([data-style="outlined"][data-intent="tertiary"]) {
   --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
   --badge-outline-label-color: var(--color-label-strong, #18191b);
 }

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

@@ -5,7 +5,7 @@ export const BADGE_STYLES = ["fill", "outlined", "dot"] as const;
 export const BADGE_INTENTS = [
   "primary",
   "secondary",
-  "teritary",
+  "tertiary",
   "gray",
   "green",
   "yellow",

package/src/components/button/index.scss

@@ -1 +1,3 @@
-@use "./styles/index.scss";
+@use "./styles/button.scss";
+@use "./styles/text-button.scss";
+@use "./styles/round-button.scss";

package/src/components/button/index.tsx

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

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

@@ -0,0 +1,162 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ForwardedRef,
+} from "react";
+import type { ButtonProps } from "../types";
+import {
+  BUTTON_SCALE_CONFIG,
+  DEFAULT_BUTTON_PRIORITY,
+  DEFAULT_BUTTON_SCALE,
+} from "../types";
+import { composeButtonClassName } from "../utils";
+
+/**
+ * uds-foundation 토큰 위에서 block/layout/priority/slot API를 제공하는 기본 Button 컴포넌트.
+ * @component
+ * @param {ButtonProps} props
+ * @param {ElementType} [props.as="button"] 커스텀 요소(Renderer).
+ * @param {React.ReactNode} [props.children] 문자열이면 `.button-label` span으로 감싼다.
+ * @param {React.ReactNode} [props.icon] iconSlot 위치에 배치할 노드.
+ * @param {"none" | "left" | "right"} [props.iconSlot="none"] 아이콘 배치 위치.
+ * @param {React.ReactNode} [props.left] 라벨 왼쪽 커스텀 슬롯.
+ * @param {React.ReactNode} [props.right] 라벨 오른쪽 커스텀 슬롯.
+ * @param {
+ *  "solid-xlarge" | "solid-large" | "solid-medium" | "solid-small" |
+ *  "outlined-xlarge" | "outlined-large" | "outlined-medium" | "outlined-small"
+ * } [props.scale="solid-medium"] spacing/height/타이포 세트.
+ * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] semantic color 세트.
+ * @param {"default" | "readonly" | "disabled"} [props.state="default"] 내부 state. disabled prop과 조합된다.
+ * @param {boolean} [props.block=false] true면 width 100%.
+ * @param {boolean} [props.loading=false] true면 readonly 처리 + aria-busy.
+ * @param {string} [props.className] 추가 className.
+ * @param {"button" | "submit" | "reset"} [props.type="button"] button 요소일 때 type.
+ * @param {boolean} [props.disabled] native disabled. state보다 우선한다.
+ * @param {"hover" | "pressed"} [props.data-user-action] Story 시각 상태 고정용 data attr.
+ */
+const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
+  (
+    {
+      as,
+      children,
+      icon,
+      left,
+      right,
+      iconSlot = "none",
+      scale = DEFAULT_BUTTON_SCALE,
+      priority = DEFAULT_BUTTON_PRIORITY,
+      state: stateProp = "default",
+      block = false,
+      loading = false,
+      className,
+      type: typeProp,
+      disabled: disabledProp,
+      "data-user-action": userAction,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const Component = (as ?? "button") as ElementType;
+    const normalizedChildren =
+      children === null || children === undefined ? null : typeof children ===
+          "string" || typeof children === "number" ? (
+        <span className="button-label" data-slot="label">
+          {children}
+        </span>
+      ) : (
+        children
+      );
+
+    const scaleConfig =
+      BUTTON_SCALE_CONFIG[scale] ?? BUTTON_SCALE_CONFIG[DEFAULT_BUTTON_SCALE];
+    const derivedFill = scaleConfig.fill;
+    const derivedSize = scaleConfig.size;
+    const resolvedPriority = priority ?? DEFAULT_BUTTON_PRIORITY;
+    const resolvedState = disabledProp ? "disabled" : stateProp;
+    const effectiveState = loading ? "readonly" : resolvedState;
+    const isReadonly = effectiveState === "readonly";
+    const isDisabled = effectiveState === "disabled" || isReadonly;
+    const isButtonElement =
+      typeof Component === "string" ? Component === "button" : false;
+    const isIconOnly =
+      Boolean(icon) &&
+      iconSlot !== "none" &&
+      !normalizedChildren &&
+      !left &&
+      !right;
+
+    const combinedClassName = composeButtonClassName({
+      scale,
+      fill: derivedFill,
+      priority: resolvedPriority,
+      size: derivedSize,
+      block,
+      loading,
+      iconSlot,
+      iconOnly: isIconOnly,
+      state: effectiveState,
+      className,
+    });
+
+    const content = (
+      <>
+        {left ? (
+          <span className="button-left" data-slot="left">
+            {left}
+          </span>
+        ) : null}
+        {iconSlot === "left" && icon ? (
+          <span className="button-icon" data-slot="left">
+            {icon}
+          </span>
+        ) : null}
+        {normalizedChildren}
+        {iconSlot === "right" && icon ? (
+          <span className="button-icon" data-slot="right">
+            {icon}
+          </span>
+        ) : null}
+        {right ? (
+          <span className="button-right" data-slot="right">
+            {right}
+          </span>
+        ) : null}
+      </>
+    );
+
+    if (isButtonElement) {
+      const buttonProps = restProps as ComponentPropsWithoutRef<"button">;
+      return (
+        <Component
+          {...buttonProps}
+          ref={forwardedRef as ForwardedRef<HTMLButtonElement>}
+          className={combinedClassName}
+          type={typeProp ?? "button"}
+          disabled={isDisabled}
+          aria-busy={loading || undefined}
+          data-user-action={userAction}
+        >
+          {content}
+        </Component>
+      );
+    }
+
+    return (
+      <Component
+        {...restProps}
+        ref={forwardedRef as ForwardedRef<HTMLElement>}
+        className={combinedClassName}
+        aria-busy={loading || undefined}
+        aria-disabled={isDisabled || undefined}
+        data-user-action={userAction}
+      >
+        {content}
+      </Component>
+    );
+  },
+);
+
+ButtonDefault.displayName = "ButtonDefault";
+
+export { ButtonDefault };

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

@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import type { ButtonScale } from "../types";
+import type { RoundButtonProps, RoundButtonSize } from "../types";
+import { ButtonDefault } from "./ButtonDefault";
+
+/**
+ * RoundButton의 size를 Button scale로 맵핑한다.
+ */
+const ROUND_BUTTON_SCALE_MAP: Record<RoundButtonSize, ButtonScale> = {
+  small: "outlined-small",
+  medium: "outlined-medium",
+  large: "outlined-large",
+};
+
+/**
+ * 원형 버튼 템플릿. size만 받으면 적절한 scale을 선택하고 라운드 전용 className을 적용한다.
+ * @component
+ * @param {RoundButtonProps} props
+ * @param {"small" | "medium" | "large"} [props.size="medium"] size에 따라 scale을 매핑한다.
+ * @param {"primary" | "secondary" | "tertiary"} [props.priority="primary"] semantic color.
+ * @param {"none" | "left" | "right"} [props.iconSlot="none"] 아이콘 위치.
+ * @param {React.ReactNode} [props.icon] iconSlot 콘텐츠.
+ * @param {boolean} [props.block] width 확장 여부.
+ */
+const ButtonRounded = forwardRef<HTMLElement, RoundButtonProps>(
+  ({ size = "medium", className, ...rest }, ref) => {
+    const resolvedScale =
+      ROUND_BUTTON_SCALE_MAP[size] ?? ROUND_BUTTON_SCALE_MAP.medium;
+
+    return (
+      <ButtonDefault
+        {...rest}
+        ref={ref}
+        scale={resolvedScale}
+        className={clsx(
+          "button-template-round",
+          `button-template-round-size-${size}`,
+          className,
+        )}
+      />
+    );
+  },
+);
+
+ButtonRounded.displayName = "ButtonRounded";
+
+export { ButtonRounded };

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

@@ -0,0 +1,49 @@
+import { forwardRef } from "react";
+import clsx from "clsx";
+import type { ButtonScale } from "../types";
+import type { TextButtonProps, TextButtonSize } from "../types";
+import { ButtonDefault } from "./ButtonDefault";
+
+/**
+ * TextButton size를 scale에 매핑해 spacing/타이포를 일관되게 맞춘다.
+ */
+const TEXT_BUTTON_SCALE_MAP: Record<TextButtonSize, ButtonScale> = {
+  small: "outlined-small",
+  medium: "outlined-medium",
+  large: "outlined-large",
+};
+
+/**
+ * 텍스트 링크형 버튼 템플릿. size/priority 조합만 노출하고 나머지는 ButtonDefault에서 처리한다.
+ * @component
+ * @param {TextButtonProps} props
+ * @param {"small" | "medium" | "large"} [props.size="medium"] size에 따른 scale 파생.
+ * @param {"secondary" | "tertiary"} [props.priority="secondary"] semantic color.
+ * @param {"none" | "left" | "right"} [props.iconSlot="none"] 아이콘 위치.
+ * @param {React.ReactNode} [props.icon] iconSlot 위치 콘텐츠.
+ * @param {boolean} [props.block] 텍스트 버튼도 block 확장 가능.
+ */
+const ButtonText = forwardRef<HTMLElement, TextButtonProps>(
+  ({ size = "medium", priority = "secondary", className, ...rest }, ref) => {
+    const resolvedScale =
+      TEXT_BUTTON_SCALE_MAP[size] ?? TEXT_BUTTON_SCALE_MAP.medium;
+
+    return (
+      <ButtonDefault
+        {...rest}
+        ref={ref}
+        scale={resolvedScale}
+        priority={priority}
+        className={clsx(
+          "button-template-text",
+          `button-template-text-size-${size}`,
+          className,
+        )}
+      />
+    );
+  },
+);
+
+ButtonText.displayName = "ButtonText";
+
+export { ButtonText };

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

@@ -0,0 +1,3 @@
+export { ButtonDefault } from "./ButtonDefault";
+export { ButtonText } from "./ButtonText";
+export { ButtonRounded } from "./ButtonRounded";