@likelion-design/ui 0.1.7 → 0.1.8

package/dist/chunk-4T4Z32IO.mjs

@@ -1,102 +0,0 @@
-import {
-  Header
-} from "./chunk-DDHQ5ZFF.mjs";
-
-// src/stories/Page.tsx
-import React from "react";
-
-// src/stories/page.module.css
-var page_default = {};
-
-// src/stories/Page.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var Page = () => {
-  const [user, setUser] = React.useState();
-  return /* @__PURE__ */ jsxs("article", { children: [
-    /* @__PURE__ */ jsx(
-      Header,
-      {
-        user,
-        onLogin: () => setUser({ name: "Jane Doe" }),
-        onLogout: () => setUser(void 0),
-        onCreateAccount: () => setUser({ name: "Jane Doe" })
-      }
-    ),
-    /* @__PURE__ */ jsxs("section", { className: page_default["storybook-page"], children: [
-      /* @__PURE__ */ jsx("h2", { children: "Pages in Storybook" }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        "We recommend building UIs with a",
-        " ",
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "https://componentdriven.org",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx("strong", { children: "component-driven" })
-          }
-        ),
-        " ",
-        "process starting with atomic components and ending with pages."
-      ] }),
-      /* @__PURE__ */ jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
-      /* @__PURE__ */ jsxs("ul", { children: [
-        /* @__PURE__ */ jsx("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
-        /* @__PURE__ */ jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
-      ] }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        "Get a guided tutorial on component-driven development at",
-        " ",
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "https://storybook.js.org/tutorials/",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: "Storybook tutorials"
-          }
-        ),
-        ". Read more in the",
-        " ",
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "https://storybook.js.org/docs",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            children: "docs"
-          }
-        ),
-        "."
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: page_default["tip-wrapper"], children: [
-        /* @__PURE__ */ jsx("span", { className: page_default["tip"], children: "Tip" }),
-        " Adjust the width of the canvas with the",
-        " ",
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            width: "10",
-            height: "10",
-            viewBox: "0 0 12 12",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
-                id: "a",
-                fill: "#999"
-              }
-            ) })
-          }
-        ),
-        "Viewports addon in the toolbar"
-      ] })
-    ] })
-  ] });
-};
-
-export {
-  Page
-};
-//# sourceMappingURL=chunk-4T4Z32IO.mjs.map

package/dist/chunk-4T4Z32IO.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/stories/Page.tsx","../src/stories/page.module.css"],"sourcesContent":["import React from \"react\";\n\nimport { Header } from \"./Header\";\nimport styles from \"./page.module.css\";\n\ntype User = {\n  name: string;\n};\n\nexport const Page: React.FC = () => {\n  const [user, setUser] = React.useState<User>();\n\n  return (\n    <article>\n      <Header\n        user={user}\n        onLogin={() => setUser({ name: \"Jane Doe\" })}\n        onLogout={() => setUser(undefined)}\n        onCreateAccount={() => setUser({ name: \"Jane Doe\" })}\n      />\n\n      <section className={styles[\"storybook-page\"]}>\n        <h2>Pages in Storybook</h2>\n        <p>\n          We recommend building UIs with a{\" \"}\n          <a\n            href=\"https://componentdriven.org\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            <strong>component-driven</strong>\n          </a>{\" \"}\n          process starting with atomic components and ending with pages.\n        </p>\n        <p>\n          Render pages with mock data. This makes it easy to build and review\n          page states without needing to navigate to them in your app. Here are\n          some handy patterns for managing page data in Storybook:\n        </p>\n        <ul>\n          <li>\n            Use a higher-level connected component. Storybook helps you compose\n            such data from the &quot;args&quot; of child component stories\n          </li>\n          <li>\n            Assemble data in the page component from your services. You can mock\n            these services out using Storybook.\n          </li>\n        </ul>\n        <p>\n          Get a guided tutorial on component-driven development at{\" \"}\n          <a\n            href=\"https://storybook.js.org/tutorials/\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            Storybook tutorials\n          </a>\n          . Read more in the{\" \"}\n          <a\n            href=\"https://storybook.js.org/docs\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          >\n            docs\n          </a>\n          .\n        </p>\n        <div className={styles[\"tip-wrapper\"]}>\n          <span className={styles[\"tip\"]}>Tip</span> Adjust the width of the\n          canvas with the{\" \"}\n          <svg\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 12 12\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <g fill=\"none\" fillRule=\"evenodd\">\n              <path\n                d=\"M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z\"\n                id=\"a\"\n                fill=\"#999\"\n              />\n            </g>\n          </svg>\n          Viewports addon in the toolbar\n        </div>\n      </section>\n    </article>\n  );\n};\n",".storybook-page {\n  margin: 0 auto;\n  padding: 48px 20px;\n  max-width: 600px;\n  color: #333;\n  font-size: 14px;\n  line-height: 24px;\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-page h2 {\n  display: inline-block;\n  vertical-align: top;\n  margin: 0 0 4px;\n  font-weight: 700;\n  font-size: 32px;\n  line-height: 1;\n}\n\n.storybook-page p {\n  margin: 1em 0;\n}\n\n.storybook-page a {\n  color: inherit;\n}\n\n.storybook-page ul {\n  margin: 1em 0;\n  padding-left: 30px;\n}\n\n.storybook-page li {\n  margin-bottom: 8px;\n}\n\n.storybook-page .tip {\n  display: inline-block;\n  vertical-align: top;\n  margin-right: 10px;\n  border-radius: 1em;\n  background: #e7fdd8;\n  padding: 4px 12px;\n  color: #357a14;\n  font-weight: 700;\n  font-size: 11px;\n  line-height: 12px;\n}\n\n.storybook-page .tip-wrapper {\n  margin-top: 40px;\n  margin-bottom: 40px;\n  font-size: 13px;\n  line-height: 20px;\n}\n\n.storybook-page .tip-wrapper svg {\n  display: inline-block;\n  vertical-align: top;\n  margin-top: 3px;\n  margin-right: 4px;\n  width: 12px;\n  height: 12px;\n}\n\n.storybook-page .tip-wrapper svg path {\n  fill: #1ea7fd;\n}\n"],"mappings":";;;;;AAAA,OAAO,WAAW;;;ACAlB;;;ADcM,cASE,YATF;AALC,IAAM,OAAiB,MAAM;AAClC,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAe;AAE7C,SACE,qBAAC,aACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM,QAAQ,EAAE,MAAM,WAAW,CAAC;AAAA,QAC3C,UAAU,MAAM,QAAQ,MAAS;AAAA,QACjC,iBAAiB,MAAM,QAAQ,EAAE,MAAM,WAAW,CAAC;AAAA;AAAA,IACrD;AAAA,IAEA,qBAAC,aAAQ,WAAW,aAAO,gBAAgB,GACzC;AAAA,0BAAC,QAAG,gCAAkB;AAAA,MACtB,qBAAC,OAAE;AAAA;AAAA,QACgC;AAAA,QACjC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YAEJ,8BAAC,YAAO,8BAAgB;AAAA;AAAA,QAC1B;AAAA,QAAK;AAAA,QAAI;AAAA,SAEX;AAAA,MACA,oBAAC,OAAE,gNAIH;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,QAAG,sIAGJ;AAAA,QACA,oBAAC,QAAG,sHAGJ;AAAA,SACF;AAAA,MACA,qBAAC,OAAE;AAAA;AAAA,QACwD;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACL;AAAA;AAAA,QAED;AAAA,QAAI;AAAA,QACe;AAAA,QACnB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACL;AAAA;AAAA,QAED;AAAA,QAAI;AAAA,SAEN;AAAA,MACA,qBAAC,SAAI,WAAW,aAAO,aAAa,GAClC;AAAA,4BAAC,UAAK,WAAW,aAAO,KAAK,GAAG,iBAAG;AAAA,QAAO;AAAA,QAC1B;AAAA,QAChB;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,SAAQ;AAAA,YACR,OAAM;AAAA,YAEN,8BAAC,OAAE,MAAK,QAAO,UAAS,WACtB;AAAA,cAAC;AAAA;AAAA,gBACC,GAAE;AAAA,gBACF,IAAG;AAAA,gBACH,MAAK;AAAA;AAAA,YACP,GACF;AAAA;AAAA,QACF;AAAA,QAAM;AAAA,SAER;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-6BR7YIWI.mjs

@@ -1,181 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-22Q3FVTV.mjs";
-
-// src/stories/button.module.css
-var button_default = {};
-
-// src/stories/Button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ActionButton = (_a) => {
-  var _b = _a, {
-    size = "medium",
-    variant = "primary",
-    shape = "solid",
-    state = "enabled",
-    children,
-    prefixIcon,
-    suffixIcon,
-    loading = false,
-    className = "",
-    disabled
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "shape",
-    "state",
-    "children",
-    "prefixIcon",
-    "suffixIcon",
-    "loading",
-    "className",
-    "disabled"
-  ]);
-  const isDisabled = disabled || state === "disabled" || loading;
-  const actualState = loading ? "loading" : state;
-  const baseClasses = [
-    button_default["action-button"],
-    button_default[`action-button--${size}`],
-    button_default[`action-button--${variant}`],
-    button_default[`action-button--${shape}`],
-    button_default[`action-button--${actualState}`],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: baseClasses,
-      disabled: isDisabled
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: button_default["action-button__content"], children: [
-          prefixIcon && /* @__PURE__ */ jsx("span", { className: button_default["action-button__prefix-icon"], children: prefixIcon }),
-          /* @__PURE__ */ jsx("span", { className: button_default["action-button__label"], children }),
-          suffixIcon && /* @__PURE__ */ jsx("span", { className: button_default["action-button__suffix-icon"], children: suffixIcon })
-        ] }),
-        loading && /* @__PURE__ */ jsx("span", { className: button_default["action-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: button_default["action-button__spinner-svg"],
-            viewBox: "0 0 24 24",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ jsxs(
-              "circle",
-              {
-                className: button_default["action-button__spinner-circle"],
-                cx: "12",
-                cy: "12",
-                r: "10",
-                stroke: "currentColor",
-                strokeWidth: "4",
-                strokeLinecap: "round",
-                strokeDasharray: "32",
-                strokeDashoffset: "32",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dasharray",
-                      dur: "2s",
-                      values: "0 40;40 40;0 40",
-                      repeatCount: "indefinite"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "animate",
-                    {
-                      attributeName: "stroke-dashoffset",
-                      dur: "2s",
-                      values: "0;-40;-80",
-                      repeatCount: "indefinite"
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ) })
-      ]
-    })
-  );
-};
-var Button = (_a) => {
-  var _b = _a, {
-    primary = false,
-    size = "medium",
-    backgroundColor,
-    label
-  } = _b, props = __objRest(_b, [
-    "primary",
-    "size",
-    "backgroundColor",
-    "label"
-  ]);
-  const mode = primary ? button_default["storybook-button--primary"] : button_default["storybook-button--secondary"];
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: [
-        button_default["storybook-button"],
-        button_default[`storybook-button--${size}`],
-        mode
-      ].join(" "),
-      style: { backgroundColor }
-    }, props), {
-      children: label
-    })
-  );
-};
-var IconButton = (_a) => {
-  var _b = _a, {
-    size = "large",
-    variant = "primary",
-    iconType = "solid",
-    state = "enabled",
-    icon,
-    className = "",
-    disabled,
-    type = "button"
-  } = _b, props = __objRest(_b, [
-    "size",
-    "variant",
-    "iconType",
-    "state",
-    "icon",
-    "className",
-    "disabled",
-    "type"
-  ]);
-  const isDisabled = disabled || state === "disabled";
-  const actualState = iconType === "weak" && isDisabled ? "enabled" : state;
-  const baseClasses = [
-    button_default["icon-button"],
-    button_default[`icon-button--${size}`],
-    button_default[`icon-button--${variant}`],
-    button_default[`icon-button--${iconType}`],
-    button_default[`icon-button--${actualState}`],
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      type,
-      className: baseClasses,
-      disabled: isDisabled
-    }, props), {
-      children: /* @__PURE__ */ jsx("span", { className: button_default["icon-button__icon"], children: icon })
-    })
-  );
-};
-
-export {
-  ActionButton,
-  Button,
-  IconButton
-};
-//# sourceMappingURL=chunk-6BR7YIWI.mjs.map

package/dist/chunk-6BR7YIWI.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/stories/button.module.css","../src/stories/Button.tsx"],"sourcesContent":["/* 기존 스타일 유지 */\n.storybook-button {\n  display: inline-block;\n  cursor: pointer;\n  border: 0;\n  border-radius: 3em;\n  font-weight: 700;\n  line-height: 1;\n  font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n  background-color: #555ab9;\n  color: white;\n}\n.storybook-button--secondary {\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n  background-color: transparent;\n  color: #333;\n}\n.storybook-button--small {\n  padding: 10px 16px;\n  font-size: 12px;\n}\n.storybook-button--medium {\n  padding: 11px 20px;\n  font-size: 14px;\n}\n.storybook-button--large {\n  padding: 12px 24px;\n  font-size: 16px;\n}\n\n/* ActionButton 스타일 */\n.action-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: fit-content;\n  white-space: nowrap;\n}\n\n/* Size 스타일 */\n.action-button--xlarge {\n  height: 56px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--large {\n  height: 48px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--medium {\n  height: 36px;\n  padding: 0 20px;\n  font-size: 15px;\n  min-width: 34px;\n}\n\n.action-button--small {\n  height: 28px;\n  padding: 0 16px;\n  font-size: 13px;\n  min-width: 30px;\n}\n\n/* Primary Solid 스타일 */\n.action-button--primary.action-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--solid:hover:not(:disabled),\n.action-button--primary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.action-button--primary.action-button--solid:disabled,\n.action-button--primary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.action-button--primary.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--primary.action-button--outline:hover:not(:disabled),\n.action-button--primary.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--primary.action-button--outline:disabled,\n.action-button--primary.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Ghost 스타일 */\n.action-button--primary.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost:hover:not(:disabled),\n.action-button--primary.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-weak);\n}\n\n.action-button--primary.action-button--ghost:disabled,\n.action-button--primary.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Solid 스타일 */\n.action-button--neutral.action-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--solid:hover:not(:disabled),\n.action-button--neutral.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.action-button--neutral.action-button--solid:disabled,\n.action-button--neutral.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.action-button--neutral.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--neutral.action-button--outline:hover:not(:disabled),\n.action-button--neutral.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--outline:disabled,\n.action-button--neutral.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Ghost 스타일 */\n.action-button--neutral.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost:hover:not(:disabled),\n.action-button--neutral.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--ghost:disabled,\n.action-button--neutral.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Secondary Solid 스타일 */\n.action-button--secondary.action-button--solid {\n  background-color: var(--color-semantic-bg-normal);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid:hover:not(:disabled),\n.action-button--secondary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--secondary.action-button--solid:disabled,\n.action-button--secondary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Loading 상태 */\n.action-button--loading {\n  position: relative;\n  pointer-events: none;\n}\n\n.action-button--loading .action-button__content {\n  opacity: 0;\n}\n\n.action-button__content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-button__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.action-button__spinner-svg {\n  width: 20px;\n  height: 20px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.action-button__spinner-circle {\n  opacity: 1;\n}\n\n/* 로딩 상태일 때 hovered와 동일한 스타일 적용 */\n.action-button--primary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-hovered);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-weak);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--neutral.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n/* 아이콘 스타일 */\n.action-button__prefix-icon,\n.action-button__suffix-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.action-button--small .action-button__prefix-icon,\n.action-button--small .action-button__suffix-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.action-button--medium .action-button__prefix-icon,\n.action-button--medium .action-button__suffix-icon {\n  width: 18px;\n  height: 18px;\n}\n\n.action-button--large .action-button__prefix-icon,\n.action-button--large .action-button__suffix-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.action-button--xlarge .action-button__prefix-icon,\n.action-button--xlarge .action-button__suffix-icon {\n  width: 24px;\n  height: 24px;\n}\n\n.action-button__label {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* IconButton 스타일 */\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Size 스타일 */\n.icon-button--xlarge {\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n}\n\n.icon-button--large {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n}\n\n.icon-button--medium {\n  width: 36px;\n  height: 36px;\n  border-radius: 4px;\n}\n\n.icon-button--small {\n  width: 28px;\n  height: 28px;\n  border-radius: 4px;\n}\n\n/* Icon 크기 */\n.icon-button__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.icon-button--xlarge .icon-button__icon,\n.icon-button--large .icon-button__icon {\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button--medium .icon-button__icon {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-button--small .icon-button__icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* Primary Solid 스타일 */\n.icon-button--primary.icon-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.icon-button--primary.icon-button--solid:hover:not(:disabled),\n.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.icon-button--primary.icon-button--solid:disabled,\n.icon-button--primary.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.icon-button--primary.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--primary.icon-button--outline:hover:not(:disabled),\n.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--primary.icon-button--outline:disabled,\n.icon-button--primary.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Weak 스타일 */\n.icon-button--primary.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-primary);\n  color: var(--color-semantic-fg-primary);\n}\n\n.icon-button--primary.icon-button--weak:hover:not(:disabled),\n.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-primary-hovered);\n}\n\n/* Neutral Solid 스타일 */\n.icon-button--neutral.icon-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--solid:hover:not(:disabled),\n.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.icon-button--neutral.icon-button--solid:disabled,\n.icon-button--neutral.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.icon-button--neutral.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--neutral.icon-button--outline:hover:not(:disabled),\n.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--neutral.icon-button--outline:disabled,\n.icon-button--neutral.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Weak 스타일 */\n.icon-button--neutral.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-neutral-dark);\n  color: var(--color-semantic-fg-normal);\n}\n\n.icon-button--neutral.icon-button--weak:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);\n}\n\n/* Weak 타입은 disabled 상태를 가지지 않음 - 어두운 배경일 때 */\n.icon-button--neutral.icon-button--weak.dark {\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(\n    :disabled\n  ) {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n","import React from \"react\";\nimport styles from \"./button.module.css\";\n\nexport type ButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type ButtonVariant = \"primary\" | \"neutral\" | \"secondary\";\nexport type ButtonShape = \"solid\" | \"outline\" | \"ghost\";\nexport type ButtonState = \"enabled\" | \"hovered\" | \"loading\" | \"disabled\";\n\nexport type IconButtonSize = \"xlarge\" | \"large\" | \"medium\" | \"small\";\nexport type IconButtonVariant = \"primary\" | \"neutral\";\nexport type IconButtonType = \"solid\" | \"outline\" | \"weak\";\nexport type IconButtonState = \"enabled\" | \"hovered\" | \"disabled\";\n\nexport interface ActionButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\"> {\n  /** 버튼 크기 */\n  size?: ButtonSize;\n  /** 버튼 타입 (primary, neutral, secondary) */\n  variant?: ButtonVariant;\n  /** 버튼 모양 (solid, outline, ghost) */\n  shape?: ButtonShape;\n  /** 버튼 상태 */\n  state?: ButtonState;\n  /** 버튼 텍스트 */\n  children: React.ReactNode;\n  /** Prefix 아이콘 */\n  prefixIcon?: React.ReactNode;\n  /** Suffix 아이콘 */\n  suffixIcon?: React.ReactNode;\n  /** 로딩 상태일 때 표시할 스피너 */\n  loading?: boolean;\n}\n\n/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */\nexport const ActionButton = ({\n  size = \"medium\",\n  variant = \"primary\",\n  shape = \"solid\",\n  state = \"enabled\",\n  children,\n  prefixIcon,\n  suffixIcon,\n  loading = false,\n  className = \"\",\n  disabled,\n  ...props\n}: ActionButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\" || loading;\n  const actualState = loading ? \"loading\" : state;\n\n  const baseClasses = [\n    styles[\"action-button\"],\n    styles[`action-button--${size}`],\n    styles[`action-button--${variant}`],\n    styles[`action-button--${shape}`],\n    styles[`action-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type=\"button\"\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"action-button__content\"]}>\n        {prefixIcon && (\n          <span className={styles[\"action-button__prefix-icon\"]}>\n            {prefixIcon}\n          </span>\n        )}\n        <span className={styles[\"action-button__label\"]}>{children}</span>\n        {suffixIcon && (\n          <span className={styles[\"action-button__suffix-icon\"]}>\n            {suffixIcon}\n          </span>\n        )}\n      </span>\n      {loading && (\n        <span className={styles[\"action-button__spinner\"]} aria-hidden=\"true\">\n          <svg\n            className={styles[\"action-button__spinner-svg\"]}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className={styles[\"action-button__spinner-circle\"]}\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"4\"\n              strokeLinecap=\"round\"\n              strokeDasharray=\"32\"\n              strokeDashoffset=\"32\"\n            >\n              <animate\n                attributeName=\"stroke-dasharray\"\n                dur=\"2s\"\n                values=\"0 40;40 40;0 40\"\n                repeatCount=\"indefinite\"\n              />\n              <animate\n                attributeName=\"stroke-dashoffset\"\n                dur=\"2s\"\n                values=\"0;-40;-80\"\n                repeatCount=\"indefinite\"\n              />\n            </circle>\n          </svg>\n        </span>\n      )}\n    </button>\n  );\n};\n\n// 기존 Button 컴포넌트는 하위 호환성을 위해 유지\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({\n  primary = false,\n  size = \"medium\",\n  backgroundColor,\n  label,\n  ...props\n}: ButtonProps) => {\n  const mode = primary\n    ? styles[\"storybook-button--primary\"]\n    : styles[\"storybook-button--secondary\"];\n  return (\n    <button\n      type=\"button\"\n      className={[\n        styles[\"storybook-button\"],\n        styles[`storybook-button--${size}`],\n        mode,\n      ].join(\" \")}\n      style={{ backgroundColor }}\n      {...props}\n    >\n      {label}\n    </button>\n  );\n};\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** 버튼 크기 */\n  size?: IconButtonSize;\n  /** 버튼 타입 (primary 또는 neutral) */\n  variant?: IconButtonVariant;\n  /** 버튼 모양 (solid, outline, weak) */\n  iconType?: IconButtonType;\n  /** 버튼 상태 */\n  state?: IconButtonState;\n  /** 아이콘 (Heroicons 또는 React 컴포넌트) */\n  icon: React.ReactNode;\n  /** 아이콘에 대한 접근성 라벨 */\n  \"aria-label\": string;\n}\n\n/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */\nexport const IconButton = ({\n  size = \"large\",\n  variant = \"primary\",\n  iconType = \"solid\",\n  state = \"enabled\",\n  icon,\n  className = \"\",\n  disabled,\n  type = \"button\",\n  ...props\n}: IconButtonProps) => {\n  const isDisabled = disabled || state === \"disabled\";\n  // weak 타입은 disabled 상태를 가지지 않음\n  const actualState = iconType === \"weak\" && isDisabled ? \"enabled\" : state;\n\n  const baseClasses = [\n    styles[\"icon-button\"],\n    styles[`icon-button--${size}`],\n    styles[`icon-button--${variant}`],\n    styles[`icon-button--${iconType}`],\n    styles[`icon-button--${actualState}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button\n      type={type}\n      className={baseClasses}\n      disabled={isDisabled}\n      {...props}\n    >\n      <span className={styles[\"icon-button__icon\"]}>{icon}</span>\n    </button>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-DDHQ5ZFF.mjs

@@ -1,75 +0,0 @@
-import {
-  Button
-} from "./chunk-6BR7YIWI.mjs";
-
-// src/stories/header.module.css
-var header_default = {};
-
-// src/stories/Header.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Header = ({
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount
-}) => /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("div", { className: header_default["storybook-header"], children: [
-  /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "32",
-        height: "32",
-        viewBox: "0 0 32 32",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",
-              fill: "#FFF"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",
-              fill: "#555AB9"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",
-              fill: "#91BAF8"
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx("h1", { children: "Acme" })
-  ] }),
-  /* @__PURE__ */ jsx("div", { children: user ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("span", { className: "welcome", children: [
-      "Welcome, ",
-      /* @__PURE__ */ jsx("b", { children: user.name }),
-      "!"
-    ] }),
-    /* @__PURE__ */ jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        primary: true,
-        size: "small",
-        onClick: onCreateAccount,
-        label: "Sign up"
-      }
-    )
-  ] }) })
-] }) });
-
-export {
-  Header
-};
-//# sourceMappingURL=chunk-DDHQ5ZFF.mjs.map

package/dist/chunk-DDHQ5ZFF.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/stories/header.module.css","../src/stories/Header.tsx"],"sourcesContent":[".storybook-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  padding: 15px 20px;\n  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n}\n\n.storybook-header svg {\n  display: inline-block;\n  vertical-align: top;\n}\n\n.storybook-header h1 {\n  display: inline-block;\n  vertical-align: top;\n  margin: 6px 0 6px 10px;\n  font-weight: 700;\n  font-size: 20px;\n  line-height: 1;\n}\n\n.storybook-header button + button {\n  margin-left: 10px;\n}\n\n.storybook-header .welcome {\n  margin-right: 10px;\n  color: #333;\n  font-size: 14px;\n}\n","import { Button } from \"./Button\";\nimport styles from \"./header.module.css\";\n\ntype User = {\n  name: string;\n};\n\nexport interface HeaderProps {\n  user?: User;\n  onLogin?: () => void;\n  onLogout?: () => void;\n  onCreateAccount?: () => void;\n}\n\nexport const Header = ({\n  user,\n  onLogin,\n  onLogout,\n  onCreateAccount,\n}: HeaderProps) => (\n  <header>\n    <div className={styles[\"storybook-header\"]}>\n      <div>\n        <svg\n          width=\"32\"\n          height=\"32\"\n          viewBox=\"0 0 32 32\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <g fill=\"none\" fillRule=\"evenodd\">\n            <path\n              d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n              fill=\"#FFF\"\n            />\n            <path\n              d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n              fill=\"#555AB9\"\n            />\n            <path\n              d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\"\n              fill=\"#91BAF8\"\n            />\n          </g>\n        </svg>\n        <h1>Acme</h1>\n      </div>\n      <div>\n        {user ? (\n          <>\n            <span className=\"welcome\">\n              Welcome, <b>{user.name}</b>!\n            </span>\n            <Button size=\"small\" onClick={onLogout} label=\"Log out\" />\n          </>\n        ) : (\n          <>\n            <Button size=\"small\" onClick={onLogin} label=\"Log in\" />\n            <Button\n              primary\n              size=\"small\"\n              onClick={onCreateAccount}\n              label=\"Sign up\"\n            />\n          </>\n        )}\n      </div>\n    </div>\n  </header>\n);\n"],"mappings":";;;;;AAAA;;;AC6BU,SAmBA,UAlBE,KADF;AAfH,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,YACC,+BAAC,SAAI,WAAW,eAAO,kBAAkB,GACvC;AAAA,uBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,OAAM;AAAA,QAEN,+BAAC,OAAE,MAAK,QAAO,UAAS,WACtB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,QAAG,kBAAI;AAAA,KACV;AAAA,EACA,oBAAC,SACE,iBACC,iCACE;AAAA,yBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,MACf,oBAAC,OAAG,eAAK,MAAK;AAAA,MAAI;AAAA,OAC7B;AAAA,IACA,oBAAC,UAAO,MAAK,SAAQ,SAAS,UAAU,OAAM,WAAU;AAAA,KAC1D,IAEA,iCACE;AAAA,wBAAC,UAAO,MAAK,SAAQ,SAAS,SAAS,OAAM,UAAS;AAAA,IACtD;AAAA,MAAC;AAAA;AAAA,QACC,SAAO;AAAA,QACP,MAAK;AAAA,QACL,SAAS;AAAA,QACT,OAAM;AAAA;AAAA,IACR;AAAA,KACF,GAEJ;AAAA,GACF,GACF;","names":[]}