@likelion-design/ui 0.1.6 → 0.1.7

package/dist/chunk-6BR7YIWI.mjs

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1 @@
+{"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":[]}