@thangnqdev/ui 0.1.0

package/dist/buttons/index.cjs

@@ -0,0 +1,365 @@
+'use strict';
+
+var React4 = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React4__default = /*#__PURE__*/_interopDefault(React4);
+
+// src/buttons/Button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20",
+        secondary: "bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70",
+        danger: "bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15",
+        link: "bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal",
+        glass: "bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1",
+        sm: "h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5",
+        md: "h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold",
+        lg: "h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold",
+        xl: "h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    fullWidth,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText || children })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: leftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: rightIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var iconButtonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 active:scale-95",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] text-[var(--ui-primary-fg)] hover:bg-[var(--ui-primary-hover)] shadow-sm",
+        secondary: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-fg)] hover:bg-[var(--ui-secondary-hover)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
+        danger: "bg-[var(--ui-error)] text-[var(--ui-error-fg)] hover:bg-[var(--ui-error)]/90 shadow-sm"
+      },
+      size: {
+        xs: "w-7 h-7 text-xs rounded-[var(--ui-radius-sm)]",
+        sm: "w-8 h-8 text-sm rounded-[var(--ui-radius-md)]",
+        md: "w-10 h-10 text-base rounded-[var(--ui-radius-md)]",
+        lg: "w-12 h-12 text-lg rounded-[var(--ui-radius-lg)]"
+      },
+      shape: {
+        rounded: "",
+        circle: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+var IconButton = React4.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    icon,
+    loading = false,
+    disabled,
+    "aria-label": ariaLabel,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        disabled: disabled || loading,
+        className: cn(iconButtonVariants({ variant, size, shape }), className),
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }) : icon || children
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var buttonGroupVariants = classVarianceAuthority.cva("inline-flex", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:last-child)]:border-r-0",
+      vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:border-b-0"
+    },
+    attached: {
+      true: "",
+      false: "gap-2"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    attached: true
+  }
+});
+var ButtonGroup = React4.forwardRef(
+  ({ className, orientation, attached, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(buttonGroupVariants({ orientation, attached }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var toggleVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent text-[var(--ui-text-secondary)]",
+        outline: "border border-[var(--ui-border-default)] bg-transparent hover:bg-[var(--ui-bg-tertiary)]"
+      },
+      size: {
+        sm: "h-8 px-2.5 text-xs rounded-[var(--ui-radius-sm)]",
+        md: "h-9 px-3 text-sm rounded-[var(--ui-radius-md)]",
+        lg: "h-10 px-4 text-base rounded-[var(--ui-radius-md)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var ToggleGroupContext = React4.createContext({});
+var ToggleButton = React4.forwardRef(
+  ({ className, pressed: customPressed, variant, size, value, onClick, children, ...props }, ref) => {
+    const group = React4.useContext(ToggleGroupContext);
+    const isPressed = customPressed !== void 0 ? customPressed : group.value !== void 0 && value !== void 0 ? Array.isArray(group.value) ? group.value.includes(value) : group.value === value : false;
+    const currentVariant = variant || group.variant || "default";
+    const currentSize = size || group.size || "md";
+    const handleClick = (e) => {
+      if (value && group.onChange) {
+        group.onChange(value);
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-pressed": isPressed,
+        "data-state": isPressed ? "on" : "off",
+        onClick: handleClick,
+        className: cn(
+          toggleVariants({ variant: currentVariant, size: currentSize }),
+          isPressed && "bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] font-semibold shadow-inner border-[var(--ui-border-strong)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+var ToggleGroup = React4.forwardRef(
+  ({
+    className,
+    type = "single",
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    variant = "outline",
+    size = "md",
+    children,
+    ...props
+  }, ref) => {
+    const [stateValue, setStateValue] = React4__default.default.useState(
+      defaultValue || (type === "multiple" ? [] : "")
+    );
+    const currentValue = controlledValue !== void 0 ? controlledValue : stateValue;
+    const handleItemChange = (itemValue) => {
+      if (type === "single") {
+        const next = currentValue === itemValue ? "" : itemValue;
+        setStateValue(next);
+        onValueChange?.(next);
+      } else {
+        const arr = Array.isArray(currentValue) ? currentValue : [];
+        const next = arr.includes(itemValue) ? arr.filter((v) => v !== itemValue) : [...arr, itemValue];
+        setStateValue(next);
+        onValueChange?.(next);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToggleGroupContext.Provider,
+      {
+        value: {
+          value: currentValue,
+          onChange: handleItemChange,
+          variant,
+          size
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "group",
+            className: cn(
+              "inline-flex items-center gap-1 rounded-[var(--ui-radius-md)] p-1 bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)]",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+var SplitButton = React4.forwardRef(
+  ({ className, items, onMainClick, variant = "primary", size = "md", children, disabled, ...props }, ref) => {
+    const [isOpen, setIsOpen] = React4.useState(false);
+    const containerRef = React4.useRef(null);
+    React4.useEffect(() => {
+      const handleOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleOutside);
+      }
+      return () => document.removeEventListener("mousedown", handleOutside);
+    }, [isOpen]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "inline-flex rounded-[var(--ui-radius-md)] shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant,
+            size,
+            disabled,
+            onClick: onMainClick,
+            className: "rounded-r-none border-r border-white/20 dark:border-black/20",
+            ...props,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant,
+            size,
+            disabled,
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "menu",
+            className: "rounded-l-none px-2",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-180") })
+          }
+        )
+      ] }),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: item.disabled,
+          onClick: () => {
+            item.onClick();
+            setIsOpen(false);
+          },
+          className: "w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-50 disabled:pointer-events-none transition-colors",
+          children: [
+            item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label })
+          ]
+        },
+        i
+      )) })
+    ] });
+  }
+);
+SplitButton.displayName = "SplitButton";
+
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.IconButton = IconButton;
+exports.SplitButton = SplitButton;
+exports.ToggleButton = ToggleButton;
+exports.ToggleGroup = ToggleGroup;
+exports.buttonGroupVariants = buttonGroupVariants;
+exports.buttonVariants = buttonVariants;
+exports.iconButtonVariants = iconButtonVariants;
+exports.toggleVariants = toggleVariants;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/buttons/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/buttons/Button.tsx","../../src/buttons/IconButton.tsx","../../src/buttons/ButtonGroup.tsx","../../src/buttons/ToggleButton.tsx","../../src/buttons/SplitButton.tsx"],"names":["twMerge","clsx","cva","forwardRef","jsxs","jsx","Fragment","Loader2","createContext","useContext","React","useState","useRef","useEffect","ChevronDown"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { Loader2 } from 'lucide-react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const buttonVariants = cva(\r\n  'relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        primary:\r\n          'bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20',\r\n        secondary:\r\n          'bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm',\r\n        outline:\r\n          'border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm',\r\n        ghost:\r\n          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70',\r\n        danger:\r\n          'bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15',\r\n        link:\r\n          'bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal',\r\n        glass:\r\n          'bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]',\r\n      },\r\n      size: {\r\n        xs: 'h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1',\r\n        sm: 'h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5',\r\n        md: 'h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold',\r\n        lg: 'h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold',\r\n        xl: 'h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold',\r\n      },\r\n      fullWidth: {\r\n        true: 'w-full',\r\n        false: '',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'primary',\r\n      size: 'md',\r\n      fullWidth: false,\r\n    },\r\n  }\r\n);\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof buttonVariants> {\r\n  loading?: boolean;\r\n  loadingText?: string;\r\n  leftIcon?: React.ReactNode;\r\n  rightIcon?: React.ReactNode;\r\n}\r\n\r\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    {\r\n      className,\r\n      variant,\r\n      size,\r\n      fullWidth,\r\n      loading = false,\r\n      loadingText,\r\n      leftIcon,\r\n      rightIcon,\r\n      disabled,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const isDisabled = disabled || loading;\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        disabled={isDisabled}\r\n        className={cn(buttonVariants({ variant, size, fullWidth }), className)}\r\n        {...props}\r\n      >\r\n        {/* Apple subtle top specular highlight */}\r\n        <span\r\n          aria-hidden=\"true\"\r\n          className=\"absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none\"\r\n        />\r\n\r\n        {loading ? (\r\n          <>\r\n            <Loader2 className=\"w-4 h-4 animate-spin\" />\r\n            <span>{loadingText || children}</span>\r\n          </>\r\n        ) : (\r\n          <>\r\n            {leftIcon && <span className=\"flex-shrink-0 inline-flex items-center\">{leftIcon}</span>}\r\n            <span>{children}</span>\r\n            {rightIcon && <span className=\"flex-shrink-0 inline-flex items-center\">{rightIcon}</span>}\r\n          </>\r\n        )}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { Loader2 } from 'lucide-react';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const iconButtonVariants = cva(\r\n  'inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 active:scale-95',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        primary:\r\n          'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)] hover:bg-[var(--ui-primary-hover)] shadow-sm',\r\n        secondary:\r\n          'bg-[var(--ui-secondary)] text-[var(--ui-secondary-fg)] hover:bg-[var(--ui-secondary-hover)] shadow-sm',\r\n        outline:\r\n          'border border-[var(--ui-border-default)] bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',\r\n        ghost:\r\n          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',\r\n        danger:\r\n          'bg-[var(--ui-error)] text-[var(--ui-error-fg)] hover:bg-[var(--ui-error)]/90 shadow-sm',\r\n      },\r\n      size: {\r\n        xs: 'w-7 h-7 text-xs rounded-[var(--ui-radius-sm)]',\r\n        sm: 'w-8 h-8 text-sm rounded-[var(--ui-radius-md)]',\r\n        md: 'w-10 h-10 text-base rounded-[var(--ui-radius-md)]',\r\n        lg: 'w-12 h-12 text-lg rounded-[var(--ui-radius-lg)]',\r\n      },\r\n      shape: {\r\n        rounded: '',\r\n        circle: 'rounded-full',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'ghost',\r\n      size: 'md',\r\n      shape: 'rounded',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface IconButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof iconButtonVariants> {\r\n  'aria-label': string;\r\n  icon?: React.ReactNode;\r\n  loading?: boolean;\r\n}\r\n\r\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      className,\r\n      variant,\r\n      size,\r\n      shape,\r\n      icon,\r\n      loading = false,\r\n      disabled,\r\n      'aria-label': ariaLabel,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        aria-label={ariaLabel}\r\n        disabled={disabled || loading}\r\n        className={cn(iconButtonVariants({ variant, size, shape }), className)}\r\n        {...props}\r\n      >\r\n        {loading ? <Loader2 className=\"w-4 h-4 animate-spin\" /> : icon || children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nIconButton.displayName = 'IconButton';\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const buttonGroupVariants = cva('inline-flex', {\r\n  variants: {\r\n    orientation: {\r\n      horizontal:\r\n        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:last-child)]:border-r-0',\r\n      vertical:\r\n        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:border-b-0',\r\n    },\r\n    attached: {\r\n      true: '',\r\n      false: 'gap-2',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    orientation: 'horizontal',\r\n    attached: true,\r\n  },\r\n});\r\n\r\nexport interface ButtonGroupProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof buttonGroupVariants> {}\r\n\r\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\r\n  ({ className, orientation, attached, children, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"group\"\r\n        className={cn(buttonGroupVariants({ orientation, attached }), className)}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nButtonGroup.displayName = 'ButtonGroup';\r\n","import React, { forwardRef, createContext, useContext } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport const toggleVariants = cva(\r\n  'inline-flex items-center justify-center text-sm font-medium transition-colors hover:bg-[var(--ui-bg-tertiary)] hover:text-[var(--ui-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer',\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: 'bg-transparent text-[var(--ui-text-secondary)]',\r\n        outline:\r\n          'border border-[var(--ui-border-default)] bg-transparent hover:bg-[var(--ui-bg-tertiary)]',\r\n      },\r\n      size: {\r\n        sm: 'h-8 px-2.5 text-xs rounded-[var(--ui-radius-sm)]',\r\n        md: 'h-9 px-3 text-sm rounded-[var(--ui-radius-md)]',\r\n        lg: 'h-10 px-4 text-base rounded-[var(--ui-radius-md)]',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: 'default',\r\n      size: 'md',\r\n    },\r\n  }\r\n);\r\n\r\ninterface ToggleGroupContextType {\r\n  value?: string | string[];\r\n  onChange?: (val: string) => void;\r\n  variant?: 'default' | 'outline';\r\n  size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nconst ToggleGroupContext = createContext<ToggleGroupContextType>({});\r\n\r\nexport interface ToggleButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof toggleVariants> {\r\n  pressed?: boolean;\r\n  value?: string;\r\n}\r\n\r\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\r\n  ({ className, pressed: customPressed, variant, size, value, onClick, children, ...props }, ref) => {\r\n    const group = useContext(ToggleGroupContext);\r\n\r\n    const isPressed =\r\n      customPressed !== undefined\r\n        ? customPressed\r\n        : group.value !== undefined && value !== undefined\r\n        ? Array.isArray(group.value)\r\n          ? group.value.includes(value)\r\n          : group.value === value\r\n        : false;\r\n\r\n    const currentVariant = variant || group.variant || 'default';\r\n    const currentSize = size || group.size || 'md';\r\n\r\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n      if (value && group.onChange) {\r\n        group.onChange(value);\r\n      }\r\n      onClick?.(e);\r\n    };\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        type=\"button\"\r\n        aria-pressed={isPressed}\r\n        data-state={isPressed ? 'on' : 'off'}\r\n        onClick={handleClick}\r\n        className={cn(\r\n          toggleVariants({ variant: currentVariant, size: currentSize }),\r\n          isPressed &&\r\n            'bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-primary)] font-semibold shadow-inner border-[var(--ui-border-strong)]',\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\nToggleButton.displayName = 'ToggleButton';\r\n\r\nexport interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  type?: 'single' | 'multiple';\r\n  value?: string | string[];\r\n  defaultValue?: string | string[];\r\n  onValueChange?: (value: any) => void;\r\n  variant?: 'default' | 'outline';\r\n  size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\r\n  (\r\n    {\r\n      className,\r\n      type = 'single',\r\n      value: controlledValue,\r\n      defaultValue,\r\n      onValueChange,\r\n      variant = 'outline',\r\n      size = 'md',\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const [stateValue, setStateValue] = React.useState<string | string[]>(\r\n      defaultValue || (type === 'multiple' ? [] : '')\r\n    );\r\n\r\n    const currentValue = controlledValue !== undefined ? controlledValue : stateValue;\r\n\r\n    const handleItemChange = (itemValue: string) => {\r\n      if (type === 'single') {\r\n        const next = currentValue === itemValue ? '' : itemValue;\r\n        setStateValue(next);\r\n        onValueChange?.(next);\r\n      } else {\r\n        const arr = Array.isArray(currentValue) ? currentValue : [];\r\n        const next = arr.includes(itemValue)\r\n          ? arr.filter((v) => v !== itemValue)\r\n          : [...arr, itemValue];\r\n        setStateValue(next);\r\n        onValueChange?.(next);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <ToggleGroupContext.Provider\r\n        value={{\r\n          value: currentValue,\r\n          onChange: handleItemChange,\r\n          variant,\r\n          size,\r\n        }}\r\n      >\r\n        <div\r\n          ref={ref}\r\n          role=\"group\"\r\n          className={cn(\r\n            'inline-flex items-center gap-1 rounded-[var(--ui-radius-md)] p-1 bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)]',\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      </ToggleGroupContext.Provider>\r\n    );\r\n  }\r\n);\r\nToggleGroup.displayName = 'ToggleGroup';\r\n","import React, { forwardRef, useState, useRef, useEffect } from 'react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { Button, ButtonProps } from './Button';\r\nimport { cn } from '../utils/cn';\r\n\r\nexport interface SplitButtonItem {\r\n  label: React.ReactNode;\r\n  icon?: React.ReactNode;\r\n  onClick: () => void;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface SplitButtonProps extends Omit<ButtonProps, 'onClick'> {\r\n  items: SplitButtonItem[];\r\n  onMainClick?: () => void;\r\n}\r\n\r\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\r\n  ({ className, items, onMainClick, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n    useEffect(() => {\r\n      const handleOutside = (e: MouseEvent) => {\r\n        if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\r\n          setIsOpen(false);\r\n        }\r\n      };\r\n      if (isOpen) {\r\n        document.addEventListener('mousedown', handleOutside);\r\n      }\r\n      return () => document.removeEventListener('mousedown', handleOutside);\r\n    }, [isOpen]);\r\n\r\n    return (\r\n      <div ref={containerRef} className={cn('relative inline-flex', className)}>\r\n        <div ref={ref} className=\"inline-flex rounded-[var(--ui-radius-md)] shadow-sm\">\r\n          <Button\r\n            variant={variant}\r\n            size={size}\r\n            disabled={disabled}\r\n            onClick={onMainClick}\r\n            className=\"rounded-r-none border-r border-white/20 dark:border-black/20\"\r\n            {...props}\r\n          >\r\n            {children}\r\n          </Button>\r\n\r\n          <Button\r\n            variant={variant}\r\n            size={size}\r\n            disabled={disabled}\r\n            onClick={() => setIsOpen(!isOpen)}\r\n            aria-expanded={isOpen}\r\n            aria-haspopup=\"menu\"\r\n            className=\"rounded-l-none px-2\"\r\n          >\r\n            <ChevronDown className={cn('w-4 h-4 transition-transform duration-200', isOpen && 'rotate-180')} />\r\n          </Button>\r\n        </div>\r\n\r\n        {isOpen && (\r\n          <div className=\"absolute top-full right-0 mt-1 w-48 rounded-[var(--ui-radius-md)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-lg py-1 z-50 animate-in fade-in zoom-in-95\">\r\n            {items.map((item, i) => (\r\n              <button\r\n                key={i}\r\n                type=\"button\"\r\n                disabled={item.disabled}\r\n                onClick={() => {\r\n                  item.onClick();\r\n                  setIsOpen(false);\r\n                }}\r\n                className=\"w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] disabled:opacity-50 disabled:pointer-events-none transition-colors\"\r\n              >\r\n                {item.icon && <span className=\"flex-shrink-0\">{item.icon}</span>}\r\n                <span className=\"flex-1 truncate\">{item.label}</span>\r\n              </button>\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nSplitButton.displayName = 'SplitButton';\r\n"]}

package/dist/buttons/index.d.cts

@@ -0,0 +1,4 @@
+export { B as Button, a as ButtonGroup, b as ButtonGroupProps, c as ButtonProps, I as IconButton, d as IconButtonProps, S as SplitButton, e as SplitButtonItem, f as SplitButtonProps, T as ToggleButton, g as ToggleButtonProps, h as ToggleGroup, j as ToggleGroupProps, k as buttonGroupVariants, l as buttonVariants, m as iconButtonVariants, t as toggleVariants } from '../index-D6fE7w-b.cjs';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/buttons/index.d.ts

@@ -0,0 +1,4 @@
+export { B as Button, a as ButtonGroup, b as ButtonGroupProps, c as ButtonProps, I as IconButton, d as IconButtonProps, S as SplitButton, e as SplitButtonItem, f as SplitButtonProps, T as ToggleButton, g as ToggleButtonProps, h as ToggleGroup, j as ToggleGroupProps, k as buttonGroupVariants, l as buttonVariants, m as iconButtonVariants, t as toggleVariants } from '../index-D6fE7w-b.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/buttons/index.js

@@ -0,0 +1,5 @@
+export { ButtonGroup, IconButton, SplitButton, ToggleButton, ToggleGroup, buttonGroupVariants, iconButtonVariants, toggleVariants } from '../chunk-PF4ZHGVW.js';
+export { Button, buttonVariants } from '../chunk-66VWUJEI.js';
+import '../chunk-4S6L5V7X.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/buttons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/buttons/styles.css

@@ -0,0 +1,6 @@
+/* Button Tokens */
+:root {
+  --ui-btn-height-sm: 2rem;
+  --ui-btn-height-md: 2.5rem;
+  --ui-btn-height-lg: 3rem;
+}