daleui 0.0.2 → 0.0.5

package/README.md

@@ -1,6 +1,9 @@
 [![NPM Version](https://img.shields.io/npm/v/daleui)](https://www.npmjs.com/package/daleui)
 [![Chromatic 🎨](https://github.com/DaleStudy/daleui/actions/workflows/chromatic.yml/badge.svg)](https://github.com/DaleStudy/daleui/actions/workflows/chromatic.yml)
 [![Integration 🔀](https://github.com/DaleStudy/daleui/actions/workflows/integration.yml/badge.svg)](https://github.com/DaleStudy/daleui/actions/workflows/integration.yml)
+[![codecov](https://codecov.io/github/DaleStudy/daleui/graph/badge.svg)](https://codecov.io/github/DaleStudy/daleui)
+[![bundle size](https://codecov.io/github/DaleStudy/daleui/graph/bundle/daleui-bundle-esm/badge.svg)](https://app.codecov.io/github/DaleStudy/daleui/bundles/main/daleui-bundle-esm)
+[![All Contributors](https://img.shields.io/github/all-contributors/DaleStudy/daleui?color=ee8449&style=flat-square)](#contributors)
 
 # 달레 UI
 
@@ -8,3 +11,43 @@
 
 - [스토리북](https://main--675790d317ba346348aa3490.chromatic.com)
 - [위키](https://github.com/DaleStudy/daleui/wiki)
+
+## Contributors ✨
+
+이 프로젝트는 [all-contributors](https://github.com/all-contributors/all-contributors) 스펙을 따릅니다. 모든 종류의 기여를 환영합니다!
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.daleseo.com/"><img src="https://avatars.githubusercontent.com/u/5466341?v=4?s=100" width="100px;" alt="Dale Seo"/><br /><sub><b>Dale Seo</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=DaleSeo" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=DaleSeo" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/yolophg"><img src="https://avatars.githubusercontent.com/u/38199103?v=4?s=100" width="100px;" alt="Helena Park"/><br /><sub><b>Helena Park</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=yolophg" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=yolophg" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sounmind"><img src="https://avatars.githubusercontent.com/u/37020415?v=4?s=100" width="100px;" alt="Evan Suhyeong Lee"/><br /><sub><b>Evan Suhyeong Lee</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=sounmind" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=sounmind" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/hyoseong1994"><img src="https://avatars.githubusercontent.com/u/50227228?v=4?s=100" width="100px;" alt="hyoseong"/><br /><sub><b>hyoseong</b></sub></a><br /><a href="#blog-hyoseong1994" title="Blogposts">📝</a> <a href="https://github.com/DaleStudy/daleui/commits?author=hyoseong1994" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=hyoseong1994" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/RiaOh"><img src="https://avatars.githubusercontent.com/u/83909755?v=4?s=100" width="100px;" alt="오예림 Ria Oh"/><br /><sub><b>오예림 Ria Oh</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=RiaOh" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=RiaOh" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Lustellz"><img src="https://avatars.githubusercontent.com/u/45252527?v=4?s=100" width="100px;" alt="Tasha(살미)"/><br /><sub><b>Tasha(살미)</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=Lustellz" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=Lustellz" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/y00eunji"><img src="https://avatars.githubusercontent.com/u/27201591?v=4?s=100" width="100px;" alt="유은지"/><br /><sub><b>유은지</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=y00eunji" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=y00eunji" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://velog.io/@hecklebot"><img src="https://avatars.githubusercontent.com/u/51806574?v=4?s=100" width="100px;" alt="Hansaem.so"/><br /><sub><b>Hansaem.so</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=Hecklebot" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=Hecklebot" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://seozi.io/"><img src="https://avatars.githubusercontent.com/u/30362922?v=4?s=100" width="100px;" alt="서진혁 (Aka)"/><br /><sub><b>서진혁 (Aka)</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=HowToBeAHappyBoy" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=HowToBeAHappyBoy" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sseung30"><img src="https://avatars.githubusercontent.com/u/69985950?v=4?s=100" width="100px;" alt="seunghyun"/><br /><sub><b>seunghyun</b></sub></a><br /><a href="#design-sseung30" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jj5u"><img src="https://avatars.githubusercontent.com/u/89135410?v=4?s=100" width="100px;" alt="Jahye"/><br /><sub><b>Jahye</b></sub></a><br /><a href="#design-jj5u" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/boldkang"><img src="https://avatars.githubusercontent.com/u/202710030?v=4?s=100" width="100px;" alt="mkang"/><br /><sub><b>mkang</b></sub></a><br /><a href="#blog-boldkang" title="Blogposts">📝</a> <a href="#design-boldkang" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://sunjae95.github.io/"><img src="https://avatars.githubusercontent.com/u/63578094?v=4?s=100" width="100px;" alt="이선재"/><br /><sub><b>이선재</b></sub></a><br /><a href="#blog-Sunjae95" title="Blogposts">📝</a> <a href="https://github.com/DaleStudy/daleui/commits?author=Sunjae95" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=Sunjae95" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://sehwanlee.dev/"><img src="https://avatars.githubusercontent.com/u/39740066?v=4?s=100" width="100px;" alt="Sehwan"/><br /><sub><b>Sehwan</b></sub></a><br /><a href="#blog-nhistory" title="Blogposts">📝</a> <a href="https://github.com/DaleStudy/daleui/commits?author=nhistory" title="Code">💻</a> <a href="https://github.com/DaleStudy/daleui/commits?author=nhistory" title="Documentation">📖</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bkidea"><img src="https://avatars.githubusercontent.com/u/201320266?v=4?s=100" width="100px;" alt="BK LEE"/><br /><sub><b>BK LEE</b></sub></a><br /><a href="#design-bkidea" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/graycrisp"><img src="https://avatars.githubusercontent.com/u/51190669?v=4?s=100" width="100px;" alt="graycrisp"/><br /><sub><b>graycrisp</b></sub></a><br /><a href="#design-graycrisp" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://lylamin.com/"><img src="https://avatars.githubusercontent.com/u/50537876?v=4?s=100" width="100px;" alt="Lyla (Minju) Park"/><br /><sub><b>Lyla (Minju) Park</b></sub></a><br /><a href="https://github.com/DaleStudy/daleui/commits?author=lylaminju" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->

package/dist/check-DEVerfH5.js

@@ -0,0 +1,72 @@
+import { forwardRef as l, createElement as n } from "react";
+const h = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), w = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, r, o) => o ? o.toUpperCase() : r.toLowerCase()
+), i = (t) => {
+  const e = w(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, u = (...t) => t.filter((e, r, o) => !!e && e.trim() !== "" && o.indexOf(e) === r).join(" ").trim(), f = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+};
+var g = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const k = l(
+  ({
+    color: t = "currentColor",
+    size: e = 24,
+    strokeWidth: r = 2,
+    absoluteStrokeWidth: o,
+    className: a = "",
+    children: s,
+    iconNode: p,
+    ...c
+  }, C) => n(
+    "svg",
+    {
+      ref: C,
+      ...g,
+      width: e,
+      height: e,
+      stroke: t,
+      strokeWidth: o ? Number(r) * 24 / Number(e) : r,
+      className: u("lucide", a),
+      ...!s && !f(c) && { "aria-hidden": "true" },
+      ...c
+    },
+    [
+      ...p.map(([d, m]) => n(d, m)),
+      ...Array.isArray(s) ? s : [s]
+    ]
+  )
+);
+const A = (t, e) => {
+  const r = l(
+    ({ className: o, ...a }, s) => n(k, {
+      ref: s,
+      iconNode: e,
+      className: u(
+        `lucide-${h(i(t))}`,
+        `lucide-${t}`,
+        o
+      ),
+      ...a
+    })
+  );
+  return r.displayName = i(t), r;
+};
+const b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], L = A("check", b);
+export {
+  L as C,
+  A as c
+};

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { Spacing } from "../../tokens/spacing";
+type As = "div" | "section" | "article" | "main" | "aside" | "header" | "footer" | "nav" | "span";
+type CSSLength = `${number}px` | `${number}em` | `${number}rem` | `${number}%`;
+export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    /** 자식 요소들 */
+    children?: React.ReactNode;
+    /** 렌더링할 HTML 요소 */
+    as?: As;
+    /** padding */
+    padding?: Spacing;
+    /** margin */
+    margin?: Spacing;
+    /** 너비 (예: "100px", "2rem", "2em", "50%") */
+    width?: CSSLength;
+    /** 높이 (예: "100px", "2rem", "2em", "50%") */
+    height?: CSSLength;
+}
+/**
+ * Box는 가장 기본적인 레이아웃 컴포넌트입니다.
+ *
+ * - `children` 속성을 통해서 자식 요소들을 전달할 수 있습니다.
+ * - `as` 속성을 통해서 렌더링할 HTML 요소를 지정할 수 있습니다. 기본값은 `div`입니다.
+ * - `padding`, `margin` 속성을 통해서 spacing을 지정할 수 있습니다.
+ * - `width`, `height` 속성을 통해서 크기를 지정할 수 있습니다.
+ * - `className` 속성을 통해서 추가 스타일을 적용할 수 있습니다.
+ * - `as="span"`을 사용할 경우, span은 기본적으로 `inline` 요소이므로 `width`와 `height` 속성이 적용되지 않습니다.
+ *
+ * ### 접근성(Accessibility) 안내
+ * - 이미 시맨틱 태그를 쓰면(as=`nav` | `main` | `aside` | `footer` 등) 중복 role 지정은 피하시길 바랍니다.
+ * - 접근성을 위해 기본적으로 적절한 HTML 시맨틱 요소를 사용하고 필요시 ARIA 속성을 활용하여 접근성을 향상시킵니다.
+ */
+export declare const Box: ({ children, as, padding, margin, width, height, className, ...rest }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Box/Box.js

@@ -0,0 +1,34 @@
+import { jsx as l } from "react/jsx-runtime";
+import "react";
+import { c as x } from "../../css-QiVVeZaw.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+const b = ({
+  children: t,
+  as: r = "div",
+  padding: c,
+  margin: m,
+  width: o,
+  height: s,
+  className: n,
+  ...e
+}) => {
+  const i = r, p = x({
+    padding: c,
+    margin: m
+  }), a = {
+    ...o !== void 0 && { width: o },
+    ...s !== void 0 && { height: s }
+  };
+  return /* @__PURE__ */ l(
+    i,
+    {
+      className: f(p, n),
+      style: a,
+      ...e,
+      children: t
+    }
+  );
+};
+export {
+  b as Box
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "react";
+import { type IconName } from "../../tokens/iconography";
+type size = "sm" | "md" | "lg";
+/** 공통 버튼 속성 */
+export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "style"> {
+    /** 버튼 텍스트 */
+    children: string;
+    /** 버튼 비활성화 여부 */
+    disabled?: boolean;
+    /** 버튼 너비 100% */
+    fullWidth?: boolean;
+    loading?: boolean;
+    /** 좌측 아이콘 */
+    leftIcon?: IconName;
+    /** 우측 아이콘 */
+    rightIcon?: IconName;
+    /** 클릭 시 실행함수 */
+    onClick?: () => void;
+    /** 버튼의 크기 */
+    size?: size;
+    /** 버튼의 색상 강조 */
+    tone?: "brand" | "neutral" | "danger";
+    /** 타입 */
+    type?: "button" | "submit" | "reset";
+    /** 버튼의 스타일 종류 */
+    variant?: "solid" | "outline" | "ghost";
+}
+/**
+ * - `variant` 속성으로 버튼의 스타일 종류를 지정할 수 있습니다.
+ * - `tone` 속성으로 버튼의 색상 강조를 지정할 수 있습니다.
+ * - `size` 속성으로 버튼의 크기를 지정할 수 있습니다.
+ * - `type` 속성으로 버튼의 타입을 지정할 수 있습니다.
+ * - `disabled` 속성을 사용하여 버튼을 비활성화할 수 있습니다.
+ * - `loading` 속성을 사용하여 버튼을 로딩 상태로 지정할 수 있습니다.
+ */
+export declare const Button: ({ children, variant, disabled, fullWidth, loading, leftIcon, rightIcon, onClick, size, tone, type, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,367 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import "react";
+import { c as r } from "../../css-QiVVeZaw.js";
+import { c as f } from "../../cx-DN21T1EH.js";
+import { c as m } from "../../cva-BrKodHDH.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { h as p } from "../../hstack-cCrHxysi.js";
+const j = ({
+  children: c,
+  variant: i = "solid",
+  disabled: l,
+  fullWidth: g,
+  loading: s,
+  leftIcon: a,
+  rightIcon: n,
+  onClick: b,
+  size: o = "md",
+  tone: v = "brand",
+  type: u = "button",
+  ...h
+}) => /* @__PURE__ */ d(
+  "button",
+  {
+    className: x({
+      tone: v ?? (i === "ghost" ? "neutral" : "brand"),
+      variant: i,
+      size: o,
+      disabled: l,
+      fullWidth: g
+    }),
+    type: u,
+    onClick: b,
+    disabled: l,
+    ...h,
+    children: [
+      /* @__PURE__ */ d(
+        "div",
+        {
+          className: f(
+            p({ gap: "4" }),
+            r({ visibility: s ? "hidden" : "visible" })
+          ),
+          children: [
+            a && /* @__PURE__ */ e("span", { className: r({ flexShrink: 0 }), children: /* @__PURE__ */ e(
+              t,
+              {
+                "data-testid": `icon-${a}`,
+                name: a,
+                size: o
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: r({
+                  whiteSpace: "normal",
+                  wordBreak: "keep-all",
+                  overflowWrap: "anywhere"
+                }),
+                children: c
+              }
+            ),
+            n && /* @__PURE__ */ e("span", { className: r({ flexShrink: 0 }), children: /* @__PURE__ */ e(
+              t,
+              {
+                "data-testid": `icon-${n}`,
+                name: n,
+                size: o
+              }
+            ) })
+          ]
+        }
+      ),
+      s && /* @__PURE__ */ e(
+        "div",
+        {
+          className: r({
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+          }),
+          children: /* @__PURE__ */ e(
+            t,
+            {
+              name: "loaderCircle",
+              size: o,
+              "data-testid": "button-loader",
+              className: r({
+                animation: "spin 1s linear infinite"
+              })
+            }
+          )
+        }
+      )
+    ]
+  }
+), x = m({
+  base: {
+    appearance: "none",
+    margin: "0",
+    fontWeight: 500,
+    textAlign: "center",
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "auto",
+    borderRadius: "sm",
+    cursor: "pointer",
+    transition: "0.2s",
+    lineHeight: "1",
+    outline: "0",
+    position: "relative",
+    boxSizing: "border-box",
+    "&:disabled": {
+      cursor: "not-allowed"
+    },
+    "&:focus-visible": {
+      outlineStyle: "solid",
+      outlineWidth: "sm",
+      outlineOffset: "3px"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        px: "8",
+        py: "4",
+        height: "32px",
+        fontSize: "sm"
+      },
+      md: {
+        px: "12",
+        py: "4",
+        height: "40px",
+        fontSize: "md"
+      },
+      lg: {
+        px: "16",
+        py: "8",
+        height: "48px",
+        fontSize: "lg"
+      }
+    },
+    variant: {
+      solid: {},
+      outline: {},
+      ghost: {
+        bg: "transparent",
+        border: "none"
+      }
+    },
+    tone: {
+      brand: {},
+      neutral: {},
+      danger: {}
+    },
+    disabled: {
+      true: {},
+      false: {}
+    },
+    fullWidth: {
+      true: {
+        width: "100%"
+      },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      tone: "brand",
+      css: {
+        bg: "bgSolid.brand",
+        color: "fgSolid.brand",
+        "&:hover": {
+          bg: "bgSolid.brand.hover"
+        },
+        "&:active": {
+          bg: "bgSolid.brand.active"
+        }
+      }
+    },
+    {
+      variant: "solid",
+      tone: "neutral",
+      css: {
+        bg: "bgSolid.neutral",
+        color: "fgSolid.neutral",
+        "&:hover": {
+          bg: "bgSolid.neutral.hover"
+        },
+        "&:active": {
+          bg: "bgSolid.neutral.active"
+        }
+      }
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      css: {
+        bg: "bgSolid.danger",
+        color: "fgSolid.danger",
+        "&:hover": {
+          bg: "bgSolid.danger.hover"
+        },
+        "&:active": {
+          bg: "bgSolid.danger.active"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      tone: "brand",
+      css: {
+        border: "brand",
+        borderWidth: "sm",
+        color: "fg.brand",
+        "&:hover": {
+          color: "fg.brand.hover",
+          backgroundColor: "bg.brand.hover"
+        },
+        "&:active": {
+          color: "fg.brand.active",
+          backgroundColor: "bg.brand.active"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      tone: "neutral",
+      css: {
+        border: "neutral",
+        borderWidth: "sm",
+        color: "fg.neutral",
+        "&:hover": {
+          color: "fg.neutral.hover",
+          backgroundColor: "bg.neutral.hover"
+        },
+        "&:active": {
+          color: "fg.neutral.active",
+          backgroundColor: "bg.neutral.active"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      css: {
+        border: "danger",
+        borderWidth: "sm",
+        color: "fg.danger",
+        "&:hover": {
+          color: "fg.danger.hover",
+          backgroundColor: "bg.danger.hover"
+        },
+        "&:active": {
+          color: "fg.danger.active",
+          backgroundColor: "bg.danger.active"
+        }
+      }
+    },
+    {
+      variant: "outline",
+      size: "sm",
+      css: {
+        px: "0.4rem"
+      }
+    },
+    {
+      variant: "outline",
+      size: "md",
+      css: {
+        px: "0.65rem"
+      }
+    },
+    {
+      variant: "outline",
+      size: "lg",
+      css: {
+        px: "0.9rem"
+      }
+    },
+    {
+      variant: "ghost",
+      tone: "brand",
+      css: {
+        color: "fg.brand",
+        "&:hover": {
+          bg: "bg.brand.hover",
+          color: "fg.brand.hover"
+        },
+        "&:active": {
+          bg: "bg.brand.active",
+          color: "fg.brand.active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      tone: "neutral",
+      css: {
+        color: "fg.neutral",
+        "&:hover": {
+          bg: "bg.neutral.hover",
+          color: "fg.neutral.hover"
+        },
+        "&:active": {
+          bg: "bg.neutral.active",
+          color: "fg.neutral.active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      tone: "danger",
+      css: {
+        color: "fg.danger",
+        "&:hover": {
+          bg: "bg.danger.hover",
+          color: "fg.danger.hover"
+        },
+        "&:active": {
+          bg: "bg.danger.active",
+          color: "fg.danger.active"
+        }
+      }
+    },
+    {
+      disabled: !0,
+      css: {
+        bg: "bg.neutral.disabled!",
+        color: "fg.neutral.disabled!",
+        border: "none!"
+      }
+    },
+    // borders 토큰과 스타일이 달라 별도로 설정
+    {
+      tone: "brand",
+      css: {
+        "&:focus-visible": {
+          outlineColor: "border.brand.focus"
+        }
+      }
+    },
+    {
+      tone: "neutral",
+      css: {
+        "&:focus-visible": {
+          outlineColor: "border.neutral.focus"
+        }
+      }
+    },
+    {
+      tone: "danger",
+      css: {
+        "&:focus-visible": {
+          outlineColor: "border.danger"
+        }
+      }
+    }
+  ]
+});
+export {
+  j as Button
+};

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,68 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode, SVGProps } from "react";
+import type { Tone } from "../../tokens/colors";
+import type { IconName } from "../../tokens/iconography";
+interface CardRootProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
+    /** 색조 */
+    tone?: Extract<Tone, "neutral" | "brand">;
+    /** border 여부 */
+    outline?: boolean;
+    children: ReactNode;
+}
+declare function CardRoot({ tone, outline, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
+interface CardBodyProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
+    children: ReactNode;
+}
+declare function CardBody({ className, children, ...rest }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+interface CardIconProps extends SVGProps<SVGSVGElement> {
+    /** 아이콘 이름 */
+    name: IconName;
+    /** 아이콘 크기 */
+    size?: "sm" | "md" | "lg";
+}
+declare function CardIcon({ name, size, ...rest }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+interface CardTitleProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
+    children: ReactNode;
+}
+declare function CardTitle({ children, ...rest }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+interface CardDescriptionProps extends Omit<HTMLAttributes<HTMLElement>, "style"> {
+    children: ReactNode;
+}
+declare function CardDescription({ children, ...rest }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+interface CardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /** 링크 URL */
+    href: string;
+    /** 외부 링크 여부 (true일 경우 새 탭에서 열리며 아이콘 추가) */
+    external?: boolean;
+}
+declare function CardLink({ children, href, external, ...rest }: CardLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Card의 최상위 컨테이너입니다. tone과 outline 속성을 설정하며,
+ * tone은 하위의 Icon과 Link 컴포넌트에 자동으로 전달됩니다.
+ */
+export declare const Card: typeof CardRoot & {
+    /**
+     * Card의 제목과 설명을 감싸는 컨테이너입니다.
+     * 제목과 설명 사이의 간격을 관리합니다.
+     */
+    Body: typeof CardBody;
+    /**
+     * Card의 아이콘을 표시합니다. Card 바로 아래에 배치하며,
+     * tone은 Card로부터 자동으로 전달받습니다.
+     */
+    Icon: typeof CardIcon;
+    /**
+     * Card의 제목을 표시합니다. CardBody 안에서 사용합니다.
+     */
+    Title: typeof CardTitle;
+    /**
+     * Card의 설명을 표시합니다. CardBody 안에서 CardTitle 아래에 사용합니다.
+     */
+    Description: typeof CardDescription;
+    /**
+     * Card 하단에 링크를 표시합니다. tone은 Card로부터 자동으로 전달받으며,
+     * external prop이 true일 경우 외부 링크 아이콘이 자동으로 추가됩니다.
+     */
+    Link: typeof CardLink;
+};
+export {};