@likelion-design/ui 0.1.5 → 0.1.7

package/dist/Button.js

@@ -0,0 +1,232 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/stories/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  ActionButton: () => ActionButton,
+  Button: () => Button,
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(Button_exports);
+
+// src/stories/button.module.css
+var button_default = {};
+
+// src/stories/Button.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      className: baseClasses,
+      disabled: isDisabled
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: button_default["action-button__content"], children: [
+          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__prefix-icon"], children: prefixIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__label"], children }),
+          suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__suffix-icon"], children: suffixIcon })
+        ] }),
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["action-button__spinner"], "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                    "animate",
+                    {
+                      attributeName: "stroke-dasharray",
+                      dur: "2s",
+                      values: "0 40;40 40;0 40",
+                      repeatCount: "indefinite"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: baseClasses,
+      disabled: isDisabled
+    }, props), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: button_default["icon-button__icon"], children: icon })
+    })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActionButton,
+  Button,
+  IconButton
+});
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stories/Button.tsx","../src/stories/button.module.css"],"sourcesContent":["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","/* 기존 스타일 유지 */\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"],"mappings":"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","names":[]}

package/dist/Button.mjs

@@ -0,0 +1,12 @@
+import {
+  ActionButton,
+  Button,
+  IconButton
+} from "./chunk-6BR7YIWI.mjs";
+import "./chunk-22Q3FVTV.mjs";
+export {
+  ActionButton,
+  Button,
+  IconButton
+};
+//# sourceMappingURL=Button.mjs.map

package/dist/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}