@deepnoid/ui 0.1.11 → 0.1.13

package/dist/components/button/icon-button.mjs

@@ -0,0 +1,16 @@
+"use client";
+import {
+  icon_button_default
+} from "../../chunk-ZMJYDLTS.mjs";
+import "../../chunk-6WSACUIB.mjs";
+import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-LXHUO6VM.mjs";
+import "../../chunk-ZYIIXWVY.mjs";
+import "../../chunk-DADMVOYI.mjs";
+import "../../chunk-A7OXEUCC.mjs";
+import "../../chunk-2ZT6V4QR.mjs";
+import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-AC6TWLRT.mjs";
+export {
+  icon_button_default as default
+};

package/dist/components/button/index.d.mts

@@ -1,5 +1,10 @@
 export { default as Button, ButtonProps } from './button.mjs';
+export { default as IconButton } from './icon-button.mjs';
+export { default as TextButton } from './text-button.mjs';
 export { default as ButtonGroup, ButtonGroupProps } from './button-group.mjs';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.mjs';
+import '../icon/Icon.mjs';
+import 'react/jsx-runtime';
+import '../icon/template.mjs';

package/dist/components/button/index.d.ts

@@ -1,5 +1,10 @@
 export { default as Button, ButtonProps } from './button.js';
+export { default as IconButton } from './icon-button.js';
+export { default as TextButton } from './text-button.js';
 export { default as ButtonGroup, ButtonGroupProps } from './button-group.js';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.js';
+import '../icon/Icon.js';
+import 'react/jsx-runtime';
+import '../icon/template.js';

package/dist/components/button/index.js

@@ -103,7 +103,9 @@ var require_plugin = __commonJS({
 var button_exports = {};
 __export(button_exports, {
   Button: () => button_default,
-  ButtonGroup: () => button_group_default
+  ButtonGroup: () => button_group_default,
+  IconButton: () => icon_button_default,
+  TextButton: () => text_button_default
 });
 module.exports = __toCommonJS(button_exports);
 
@@ -756,6 +758,35 @@ var template = {
       }
     );
   },
+  home: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M8.60249 2.88071C8.70796 2.77538 8.85092 2.71621 8.99999 2.71621C9.14905 2.71621 9.29202 2.77538 9.39749 2.88071L15.915 9.39821C15.9669 9.45191 16.029 9.49474 16.0976 9.52418C16.1663 9.55363 16.2401 9.56911 16.3148 9.56973C16.3895 9.57034 16.4635 9.55607 16.5326 9.52776C16.6018 9.49944 16.6645 9.45764 16.7173 9.4048C16.7701 9.35196 16.8119 9.28914 16.8401 9.22C16.8684 9.15086 16.8826 9.07678 16.8819 9.00209C16.8812 8.92741 16.8656 8.8536 16.8361 8.78499C16.8066 8.71638 16.7637 8.65433 16.71 8.60246L10.1932 2.08496C10.0365 1.92826 9.85051 1.80396 9.64577 1.71915C9.44103 1.63435 9.22159 1.5907 8.99999 1.5907C8.77838 1.5907 8.55894 1.63435 8.3542 1.71915C8.14947 1.80396 7.96344 1.92826 7.80674 2.08496L1.28924 8.60246C1.23554 8.65438 1.19272 8.71647 1.16327 8.78511C1.13382 8.85375 1.11834 8.92757 1.11773 9.00225C1.11711 9.07694 1.13138 9.15101 1.15969 9.22012C1.18801 9.28924 1.22981 9.35202 1.28265 9.40481C1.33549 9.4576 1.39831 9.49934 1.46745 9.52759C1.53659 9.55584 1.61067 9.57004 1.68536 9.56935C1.76005 9.56867 1.83385 9.55312 1.90246 9.5236C1.97108 9.49409 2.03312 9.45121 2.08499 9.39746L8.60249 2.88071Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M9 4.07397L15.1193 10.1932C15.1418 10.2157 15.1643 10.2367 15.1875 10.2577V14.9062C15.1875 15.6825 14.5575 16.3125 13.7812 16.3125H11.25C11.1008 16.3125 10.9577 16.2532 10.8523 16.1477C10.7468 16.0422 10.6875 15.8992 10.6875 15.75V12.375C10.6875 12.2258 10.6282 12.0827 10.5227 11.9772C10.4173 11.8717 10.2742 11.8125 10.125 11.8125H7.875C7.72582 11.8125 7.58274 11.8717 7.47725 11.9772C7.37176 12.0827 7.3125 12.2258 7.3125 12.375V15.75C7.3125 15.8992 7.25324 16.0422 7.14775 16.1477C7.04226 16.2532 6.89918 16.3125 6.75 16.3125H4.21875C3.84579 16.3125 3.4881 16.1643 3.22438 15.9006C2.96066 15.6369 2.8125 15.2792 2.8125 14.9062V10.2577C2.83583 10.2369 2.85859 10.2153 2.88075 10.1932L9 4.07397Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    );
+  },
   // ----------------------------------- old ---------------------------------
   // ** Status **
   plus: ({ className, fill }) => {
@@ -1212,43 +1243,6 @@ var template = {
   //   );
   // },
   // ** Common **
-  home: ({ className, fill }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "path",
-            {
-              d: "M11.4699 3.84111C11.6106 3.70066 11.8012 3.62177 11.9999 3.62177C12.1987 3.62177 12.3893 3.70066 12.5299 3.84111L21.2199 12.5311C21.2892 12.6027 21.3719 12.6598 21.4635 12.6991C21.555 12.7383 21.6534 12.759 21.753 12.7598C21.8526 12.7606 21.9513 12.7416 22.0435 12.7038C22.1356 12.6661 22.2194 12.6104 22.2897 12.5399C22.3601 12.4694 22.4158 12.3857 22.4534 12.2935C22.4911 12.2013 22.51 12.1025 22.5091 12.003C22.5082 11.9034 22.4875 11.805 22.4481 11.7135C22.4088 11.622 22.3516 11.5393 22.2799 11.4701L13.5909 2.78011C13.382 2.57118 13.134 2.40544 12.861 2.29237C12.588 2.17929 12.2954 2.12109 11.9999 2.12109C11.7045 2.12109 11.4119 2.17929 11.1389 2.29237C10.8659 2.40544 10.6179 2.57118 10.4089 2.78011L1.71894 11.4701C1.64734 11.5393 1.59025 11.6221 1.55098 11.7136C1.51172 11.8052 1.49108 11.9036 1.49026 12.0032C1.48944 12.1028 1.50846 12.2015 1.54622 12.2937C1.58397 12.3858 1.6397 12.4695 1.71015 12.5399C1.78061 12.6103 1.86437 12.6659 1.95656 12.7036C2.04875 12.7413 2.14752 12.7602 2.2471 12.7593C2.34669 12.7584 2.44509 12.7377 2.53658 12.6983C2.62806 12.659 2.71079 12.6018 2.77994 12.5301L11.4699 3.84111Z",
-              fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "path",
-            {
-              d: "M12 5.43213L20.159 13.5911C20.189 13.6211 20.219 13.6491 20.25 13.6771V19.8751C20.25 20.9101 19.41 21.7501 18.375 21.7501H15C14.8011 21.7501 14.6103 21.6711 14.4697 21.5305C14.329 21.3898 14.25 21.199 14.25 21.0001V16.5001C14.25 16.3012 14.171 16.1105 14.0303 15.9698C13.8897 15.8291 13.6989 15.7501 13.5 15.7501H10.5C10.3011 15.7501 10.1103 15.8291 9.96967 15.9698C9.82902 16.1105 9.75 16.3012 9.75 16.5001V21.0001C9.75 21.199 9.67098 21.3898 9.53033 21.5305C9.38968 21.6711 9.19891 21.7501 9 21.7501H5.625C5.12772 21.7501 4.65081 21.5526 4.29917 21.201C3.94754 20.8493 3.75 20.3724 3.75 19.8751V13.6771C3.78111 13.6493 3.81146 13.6206 3.841 13.5911L12 5.43213Z",
-              fill: "currentColor"
-            }
-          )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M2.25 12.0001L11.204 3.04507C11.644 2.60607 12.356 2.60607 12.795 3.04507L21.75 12.0001M4.5 9.75007V19.8751C4.5 20.4961 5.004 21.0001 5.625 21.0001H9.75V16.1251C9.75 15.5041 10.254 15.0001 10.875 15.0001H13.125C13.746 15.0001 14.25 15.5041 14.25 16.1251V21.0001H18.375C18.996 21.0001 19.5 20.4961 19.5 19.8751V9.75007M8.25 21.0001H16.5",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   camera: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -4717,12 +4711,537 @@ var buttonStyle = tv({
   ]
 });
 
-// src/components/button/button-group.tsx
-var import_react3 = __toESM(require("react"));
+// src/components/button/icon-button.tsx
+var import_react3 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ButtonGroup = (0, import_react3.forwardRef)(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: buttonGroup(), children: import_react3.default.Children.map(children, (child) => {
-    return import_react3.default.cloneElement(child, {
+var IconButton = (0, import_react3.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
+  const { classNames, iconName, disableRipple, isDisabled, isLoading, size, onMouseDown, ...buttonProps } = {
+    ...localProps,
+    ...variantProps
+  };
+  const slots = (0, import_react3.useMemo)(() => iconButtonStyle({ ...variantProps }), [variantProps]);
+  const { onPress, onClear, ripples } = useRipple();
+  const handleRipple = (0, import_react3.useCallback)(
+    (e) => {
+      if (!disableRipple && !isDisabled) {
+        onPress(e);
+      }
+    },
+    [disableRipple, isDisabled, onPress]
+  );
+  const handleMouseDown = (0, import_react3.useCallback)(
+    (e) => {
+      onMouseDown == null ? void 0 : onMouseDown(e);
+      handleRipple(e);
+    },
+    [onMouseDown, handleRipple]
+  );
+  const rippleProps = (0, import_react3.useMemo)(() => ({ ripples, onClear }), [ripples, onClear]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      ...buttonProps,
+      onMouseDown: handleMouseDown,
+      ref,
+      disabled: isDisabled || isLoading,
+      "data-loading": isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: iconName, size }),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ripple_default, { ...rippleProps })
+      ] })
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var icon_button_default = IconButton;
+var iconButtonStyle = tv({
+  slots: {
+    base: [
+      "relative",
+      "flex",
+      "items-center",
+      "justify-center",
+      "whitespace-nowrap",
+      "transition",
+      "duration-200",
+      "select-none",
+      "overflow-hidden",
+      "box-border"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: [],
+      soft: [],
+      outline: [],
+      ghost: []
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      neutral: [],
+      info: [],
+      success: [],
+      warning: [],
+      danger: []
+    },
+    size: {
+      sm: {
+        base: ["w-[24px]", "h-[24px]", "rounded-sm"]
+      },
+      md: {
+        base: ["w-[32px]", "h-[32px]", "rounded-md"]
+      },
+      lg: {
+        base: ["w-[40px]", "h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["w-[50px]", "h-[50px]", "rounded-xl"]
+      }
+    },
+    isLoading: {
+      true: {}
+    },
+    isDisabled: {
+      true: {
+        base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
+      }
+    },
+    isInGroup: {
+      true: {
+        base: ["[&:not(:first-child):not(:last-child)]:rounded-none", "first:rounded-r-none", "last:rounded-l-none"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    // soft
+    {
+      variant: "soft",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "bg-primary-soft", "!border-primary-soft", "hover:!border-primary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "bg-secondary-soft", "!border-secondary-soft", "hover:!border-secondary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "bg-neutral-soft", "!border-neutral-soft", "hover:!border-neutral-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      class: {
+        base: ["text-info-main", "bg-info-soft", "!border-info-soft", "hover:!border-info-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      class: {
+        base: ["text-success-main", "bg-success-soft", "!border-success-soft", "hover:!border-success-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "bg-warning-soft", "!border-warning-soft", "hover:!border-warning-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "bg-danger-soft", "!border-danger-soft", "hover:!border-danger-light"]
+      }
+    },
+    // outline
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        base: ["bg-transparent", "!border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        base: ["bg-transparent", "!border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        base: ["bg-transparent", "!border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "info",
+      class: {
+        base: ["bg-transparent", "!border-info-main", "text-info-main", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: {
+        base: ["bg-transparent", "!border-success-main", "text-success-main", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: {
+        base: ["bg-transparent", "!border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "danger",
+      class: {
+        base: ["bg-transparent", "!border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+      }
+    },
+    // ghost
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "info",
+      class: {
+        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
+      }
+    },
+    // soft/outline + size
+    {
+      variant: ["soft", "outline"],
+      size: "sm",
+      class: {
+        base: ["border-sm"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: {
+        base: ["border-md"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "lg",
+      class: {
+        base: ["border-lg"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "xl",
+      class: {
+        base: ["border-xl"]
+      }
+    },
+    // isDisabled + variant
+    {
+      variant: ["soft", "ghost"],
+      isDisabled: true,
+      class: {
+        base: ["!border-neutral-soft"]
+      }
+    },
+    {
+      variant: ["outline"],
+      isDisabled: true,
+      class: {
+        base: ["!border-neutral-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    fullWidth: false,
+    isDisabled: false,
+    isLoading: false,
+    isInGroup: false
+  }
+});
+
+// src/components/button/text-button.tsx
+var import_react4 = require("react");
+
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/button/text-button.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TextButton = (0, import_react4.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, textButtonStyle.variantKeys);
+  const { children, startContent, endContent, classNames, variant, isDisabled, size, ...buttonProps } = {
+    ...props,
+    ...variantProps
+  };
+  const slots = (0, import_react4.useMemo)(() => textButtonStyle({ ...variantProps }), [variantProps]);
+  const getContentProps = (0, import_react4.useCallback)(() => {
+    const className = slots.content({ class: classNames == null ? void 0 : classNames.content });
+    return { className, size };
+  }, [slots, classNames, size]);
+  const renderContent = (content) => {
+    const contentProps = getContentProps();
+    if ((0, import_react4.isValidElement)(content)) {
+      const _content = content;
+      const contentProps2 = getContentProps();
+      const mergedProps = {
+        ...contentProps2,
+        ...typeof _content.props.className === "string" && {
+          className: clsx(contentProps2.className, _content.props.className)
+        }
+      };
+      return (0, import_react4.cloneElement)(_content, mergedProps);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...contentProps, children: content });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "button",
+    {
+      ...buttonProps,
+      ref,
+      disabled: isDisabled,
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variant === "underline" && slots.underline({ class: classNames == null ? void 0 : classNames.underline })
+      ),
+      children: [
+        startContent && renderContent(startContent),
+        children,
+        endContent && renderContent(endContent)
+      ]
+    }
+  );
+});
+TextButton.displayName = "TextButton";
+var text_button_default = TextButton;
+var textButtonStyle = tv({
+  slots: {
+    base: ["flex", "items-center", "justify-center", "whitespace-nowrap", "overflow-hidden"],
+    content: [],
+    underline: ["underline", "decoration-skip-ink", "underline-offset-[1px]"]
+  },
+  variants: {
+    variant: {
+      "non-under": [],
+      underline: []
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      neutral: []
+    },
+    size: {
+      sm: {
+        base: ["text-sm"],
+        underline: ["decoration-[1px]"]
+      },
+      md: {
+        base: ["text-md"],
+        underline: ["decoration-[1.25px]"]
+      },
+      lg: {
+        base: ["text-lg"],
+        underline: ["decoration-[1.5px]"]
+      },
+      xl: {
+        base: ["text-xl"],
+        underline: ["decoration-[1.75px]"]
+      }
+    },
+    isDisabled: {
+      true: {
+        base: ["!text-neutral-light", "pointer-events-none"]
+      }
+    },
+    isInGroup: {
+      true: {
+        base: ["[&:not(:first-child):not(:last-child)]:rounded-none", "first:rounded-r-none", "last:rounded-l-none"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "hover:text-primary-dark", "active:text-primary-strong"]
+      }
+    },
+    {
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "hover:text-secondary-dark", "active:text-secondary-strong"]
+      }
+    },
+    {
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "hover:text-neutral-dark", "active:text-neutral-strong"]
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    variant: "non-under",
+    isDisabled: false,
+    isInGroup: false
+  }
+});
+
+// src/components/button/button-group.tsx
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ButtonGroup = (0, import_react5.forwardRef)(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: buttonGroup(), children: import_react5.default.Children.map(children, (child) => {
+    return import_react5.default.cloneElement(child, {
       ...props,
       ...child.props,
       disabled: props.isDisabled,
@@ -4733,10 +5252,12 @@ var ButtonGroup = (0, import_react3.forwardRef)(({ children, ...props }, ref) =>
 ButtonGroup.displayName = "ButtonGroup";
 var button_group_default = ButtonGroup;
 var buttonGroup = tv({
-  base: "flex"
+  base: ["flex", "gap-[20px]"]
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  ButtonGroup
+  ButtonGroup,
+  IconButton,
+  TextButton
 });