@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/feedback/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedback/tooltip/tooltip.tsx"],"sourcesContent":["import { ReactNode, useState, useRef, useEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { ColorVariant } from '../..';\n\nexport type TooltipProps = {\n  /** The element that triggers the tooltip */\n  children: ReactNode;\n  /** Tooltip text content */\n  content: string | ReactNode;\n  /** Position of the tooltip relative to the trigger element */\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  /** Color variant of the tooltip */\n  variant?: ColorVariant;\n  /** Delay before showing tooltip in ms */\n  delayDuration?: number;\n  /** Additional CSS classes */\n  className?: string;\n};\n\n/**\n * Tooltip - Simple CSS-based tooltip component\n *\n * Displays a tooltip message on hover. Uses CSS for positioning with\n * portal rendering to escape overflow constraints.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Hello\">\n *   <Button>Hover me</Button>\n * </Tooltip>\n *\n * <Tooltip content=\"Success!\" position=\"right\" variant=\"success\">\n *   <Button>Submit</Button>\n * </Tooltip>\n * ```\n */\nfunction Tooltip({\n  children,\n  content,\n  position = 'top',\n  variant = 'neutral',\n  delayDuration = 200,\n  className = ''\n}: Readonly<TooltipProps>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [coords, setCoords] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<number | undefined>(undefined);\n\n  const calculatePosition = useCallback(() => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const offset = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (position) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - offset;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.left - tooltipRect.width - offset;\n        break;\n      case 'right':\n        top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n        left = triggerRect.right + offset;\n        break;\n    }\n\n    // Simple viewport clamping\n    const padding = 8;\n    if (left < padding) left = padding;\n    if (left + tooltipRect.width > window.innerWidth - padding) {\n      left = window.innerWidth - tooltipRect.width - padding;\n    }\n    if (top < padding) top = padding;\n    if (top + tooltipRect.height > window.innerHeight - padding) {\n      top = window.innerHeight - tooltipRect.height - padding;\n    }\n\n    setCoords({ top, left });\n  }, [position]);\n\n  const handleMouseEnter = () => {\n    timeoutRef.current = window.setTimeout(() => {\n      setIsOpen(true);\n    }, delayDuration);\n  };\n\n  const handleMouseLeave = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    setIsOpen(false);\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      requestAnimationFrame(() => {\n        calculatePosition();\n      });\n\n      const handleScroll = () => calculatePosition();\n      const handleResize = () => calculatePosition();\n\n      window.addEventListener('scroll', handleScroll, true);\n      window.addEventListener('resize', handleResize);\n\n      return () => {\n        window.removeEventListener('scroll', handleScroll, true);\n        window.removeEventListener('resize', handleResize);\n      };\n    }\n    return undefined;\n  }, [isOpen, calculatePosition]);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  const variantClasses: Record<ColorVariant, string> = {\n    primary: 'bg-primary text-primary-foreground',\n    accent: 'bg-accent text-accent-foreground',\n    info: 'bg-info text-info-foreground',\n    success: 'bg-success text-success-foreground',\n    warning: 'bg-warning text-warning-foreground',\n    error: 'bg-error text-error-foreground',\n    neutral: 'bg-muted text-muted-foreground'\n  };\n\n  const tooltip = isOpen ? (\n    <div\n      ref={tooltipRef}\n      role=\"tooltip\"\n      className={`fixed z-9999 px-3 py-1.5 text-xs font-medium rounded-md shadow-md max-w-xs animate-in fade-in-0 zoom-in-95 ${variantClasses[variant]} ${className}`}\n      style={{\n        top: `${coords.top}px`,\n        left: `${coords.left}px`\n      }}\n    >\n      {content}\n    </div>\n  ) : null;\n\n  return (\n    <>\n      <span\n        ref={triggerRef}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleMouseEnter}\n        onBlur={handleMouseLeave}\n        className=\"inline-flex\"\n      >\n        {children}\n      </span>\n      {tooltip && createPortal(tooltip, document.body)}\n    </>\n  );\n}\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"names":[],"mappings":";;;AAoCA,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,YAAY;AACd,GAA2B;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG;AACxD,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAA2B,MAAS;AAEvD,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,CAAC,WAAW,WAAW,CAAC,WAAW,QAAS;AAEhD,UAAM,cAAc,WAAW,QAAQ,sBAAA;AACvC,UAAM,cAAc,WAAW,QAAQ,sBAAA;AACvC,UAAM,SAAS;AAEf,QAAI,MAAM;AACV,QAAI,OAAO;AAEX,YAAQ,UAAA;AAAA,MACN,KAAK;AACH,cAAM,YAAY,MAAM,YAAY,SAAS;AAC7C,eAAO,YAAY,OAAO,YAAY,QAAQ,IAAI,YAAY,QAAQ;AACtE;AAAA,MACF,KAAK;AACH,cAAM,YAAY,SAAS;AAC3B,eAAO,YAAY,OAAO,YAAY,QAAQ,IAAI,YAAY,QAAQ;AACtE;AAAA,MACF,KAAK;AACH,cAAM,YAAY,MAAM,YAAY,SAAS,IAAI,YAAY,SAAS;AACtE,eAAO,YAAY,OAAO,YAAY,QAAQ;AAC9C;AAAA,MACF,KAAK;AACH,cAAM,YAAY,MAAM,YAAY,SAAS,IAAI,YAAY,SAAS;AACtE,eAAO,YAAY,QAAQ;AAC3B;AAAA,IAAA;AAIJ,UAAM,UAAU;AAChB,QAAI,OAAO,QAAS,QAAO;AAC3B,QAAI,OAAO,YAAY,QAAQ,OAAO,aAAa,SAAS;AAC1D,aAAO,OAAO,aAAa,YAAY,QAAQ;AAAA,IACjD;AACA,QAAI,MAAM,QAAS,OAAM;AACzB,QAAI,MAAM,YAAY,SAAS,OAAO,cAAc,SAAS;AAC3D,YAAM,OAAO,cAAc,YAAY,SAAS;AAAA,IAClD;AAEA,cAAU,EAAE,KAAK,MAAM;AAAA,EACzB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAAmB,MAAM;AAC7B,eAAW,UAAU,OAAO,WAAW,MAAM;AAC3C,gBAAU,IAAI;AAAA,IAChB,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,WAAW,SAAS;AACtB,mBAAa,WAAW,OAAO;AAAA,IACjC;AACA,cAAU,KAAK;AAAA,EACjB;AAEA,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,4BAAsB,MAAM;AAC1B,0BAAA;AAAA,MACF,CAAC;AAED,YAAM,eAAe,MAAM,kBAAA;AAC3B,YAAM,eAAe,MAAM,kBAAA;AAE3B,aAAO,iBAAiB,UAAU,cAAc,IAAI;AACpD,aAAO,iBAAiB,UAAU,YAAY;AAE9C,aAAO,MAAM;AACX,eAAO,oBAAoB,UAAU,cAAc,IAAI;AACvD,eAAO,oBAAoB,UAAU,YAAY;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,iBAAiB,CAAC;AAE9B,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,WAAW,SAAS;AACtB,qBAAa,WAAW,OAAO;AAAA,MACjC;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,iBAA+C;AAAA,IACnD,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAGX,QAAM,UAAU,SACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW,8GAA8G,eAAe,OAAO,CAAC,IAAI,SAAS;AAAA,MAC7J,OAAO;AAAA,QACL,KAAK,GAAG,OAAO,GAAG;AAAA,QAClB,MAAM,GAAG,OAAO,IAAI;AAAA,MAAA;AAAA,MAGrB,UAAA;AAAA,IAAA;AAAA,EAAA,IAED;AAEJ,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAU;AAAA,QAET;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,WAAW,aAAa,SAAS,SAAS,IAAI;AAAA,EAAA,GACjD;AAEJ;AAEA,QAAQ,cAAc;"}

package/dist/components/forms/button/button-with-icon.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { IconSize } from '../../system/icon';
+import { ButtonProps as BaseButtonProps } from './button';
+import { ColorVariant } from '../../../theme/tokens';
+export interface ButtonWithIconProps extends Omit<BaseButtonProps, 'icon' | 'style'> {
+    icon?: string;
+    iconSize?: IconSize;
+    iconColor?: ColorVariant | 'currentColor';
+    buttonStyle?: BaseButtonProps['style'];
+    children?: React.ReactNode;
+}
+/**
+ * ButtonWithIcon - Button using Icon wrapper for consistent icon sizing
+ * Usage: <ButtonWithIcon icon="plus" iconSize="md">Add</ButtonWithIcon>
+ */
+declare const ButtonWithIcon: React.ForwardRefExoticComponent<ButtonWithIconProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonWithIcon;
+//# sourceMappingURL=button-with-icon.d.ts.map

package/dist/components/forms/button/button-with-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-with-icon.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button-with-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAe,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,CAAC;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IAC1C,WAAW,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,cAAc,+FAYnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/components/forms/button/button-with-icon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { Icon } from "../../system/icon/icon.js";
+import Button from "./button.js";
+const ButtonWithIcon = React.forwardRef(
+  ({ icon, iconSize = "md", iconColor = "currentColor", iconPosition = "left", buttonStyle, children, ...rest }, ref) => {
+    const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: iconColor }) : null;
+    return /* @__PURE__ */ jsx(Button, { ref, icon: iconNode, iconPosition, style: buttonStyle, ...rest, children });
+  }
+);
+ButtonWithIcon.displayName = "ButtonWithIcon";
+export {
+  ButtonWithIcon as default
+};
+//# sourceMappingURL=button-with-icon.js.map

package/dist/components/forms/button/button-with-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-with-icon.js","sources":["../../../../src/components/forms/button/button-with-icon.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconSize } from '../../system/icon';\nimport Button, { ButtonProps as BaseButtonProps } from './button';\nimport { ColorVariant } from '../../../theme/tokens';\n\nexport interface ButtonWithIconProps extends Omit<BaseButtonProps, 'icon' | 'style'> {\n  icon?: string;\n  iconSize?: IconSize;\n  iconColor?: ColorVariant | 'currentColor';\n  buttonStyle?: BaseButtonProps['style'];\n  children?: React.ReactNode;\n}\n\n/**\n * ButtonWithIcon - Button using Icon wrapper for consistent icon sizing\n * Usage: <ButtonWithIcon icon=\"plus\" iconSize=\"md\">Add</ButtonWithIcon>\n */\nconst ButtonWithIcon = React.forwardRef<HTMLButtonElement, ButtonWithIconProps>(\n  (\n    { icon, iconSize = 'md', iconColor = 'currentColor', iconPosition = 'left', buttonStyle, children, ...rest },\n    ref\n  ) => {\n    const iconNode = icon ? <Icon name={icon} size={iconSize} color={iconColor} /> : null;\n    return (\n      <Button ref={ref} icon={iconNode} iconPosition={iconPosition} style={buttonStyle} {...rest}>\n        {children}\n      </Button>\n    );\n  }\n);\n\nButtonWithIcon.displayName = 'ButtonWithIcon';\n\nexport default ButtonWithIcon;\n"],"names":[],"mappings":";;;;AAiBA,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CACE,EAAE,MAAM,WAAW,MAAM,YAAY,gBAAgB,eAAe,QAAQ,aAAa,UAAU,GAAG,KAAA,GACtG,QACG;AACH,UAAM,WAAW,OAAO,oBAAC,MAAA,EAAK,MAAM,MAAM,MAAM,UAAU,OAAO,UAAA,CAAW,IAAK;AACjF,WACE,oBAAC,QAAA,EAAO,KAAU,MAAM,UAAU,cAA4B,OAAO,aAAc,GAAG,MACnF,SAAA,CACH;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;"}

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

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { InteractiveSize, InputWidth } from '../../../theme/size-tokens';
+import { Alignment, ColorVariant } from '../../../theme/tokens';
+export type ButtonProps = {
+    /** Button label content - text, icons, or other elements */
+    children?: React.ReactNode;
+    /** Click event handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse enter event handler */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse leave event handler */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse down event handler */
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Blur event handler */
+    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Accessible label for icon-only buttons (required when no children) */
+    ariaLabel?: string;
+    /** Disables button interaction and applies disabled styling */
+    disabled?: boolean;
+    /** HTML button type attribute */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes applied to the button */
+    className?: string;
+    /** Icon element to display alongside button text */
+    icon?: React.ReactNode;
+    /** Position of the icon relative to button text */
+    iconPosition?: 'left' | 'right';
+    /** Color variant affecting button appearance */
+    variant?: ColorVariant;
+    /** Visual style modifier - solid (filled), outline (bordered), ghost (transparent), link (text-only), or soft (subtle background) */
+    style?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
+    /** Size variant - uses unified size system (xs, sm, md, lg, xl) */
+    size?: InteractiveSize;
+    /** Border radius style - default (rounded), pill (fully rounded), square (sharp corners), circle (for icon-only buttons) */
+    rounded?: 'default' | 'pill' | 'square' | 'circle';
+    /** Shows loading spinner and disables interaction */
+    loading?: boolean;
+    /** Width of the button */
+    width?: InputWidth;
+    /** When true, button spans full width of container (same as width="full") */
+    fullWidth?: boolean;
+    /** When true, button uses wider min-width (good for prominent actions) */
+    wide?: boolean;
+    /** Aligns the button within its container: left, center, or right */
+    align?: Alignment;
+    /** Applies active/pressed state styling */
+    active?: boolean;
+    /** ARIA expanded state - indicates if controlled element is expanded */
+    'aria-expanded'?: boolean;
+    /** ARIA haspopup - indicates element has popup menu/dialog */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** ARIA controls - ID of element controlled by this button */
+    'aria-controls'?: string;
+};
+/**
+ * Accessible Button component
+ * - Color variants: neutral, primary, accent, info, success, warning, error
+ * - Style modifiers: solid (default), outline, ghost, link, soft
+ * - Sizes: xs, sm, md (default), lg, xl
+ * - Supports icons with flexible positioning (left/right)
+ * - Icon-only buttons require `ariaLabel` for accessibility
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/forms/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAoB,eAAe,EAAE,UAAU,EAAmB,MAAM,4BAA4B,CAAC;AAC5G,OAAO,EAAE,SAAS,EAAoC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAElG,MAAM,MAAM,WAAW,GAAG;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,+BAA+B;IAC/B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,yBAAyB;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qIAAqI;IACrI,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACxD,mEAAmE;IACnE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,4HAA4H;IAC5H,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/F,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;GAOG;AACH,QAAA,MAAM,MAAM,uFA0IX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/forms/button/button.examples.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Button Component - Comprehensive Examples
+ *
+ * This file demonstrates all Button component features including:
+ * - All 7 color variants (neutral, primary, accent, info, success, warning, error)
+ * - All 5 style modifiers (solid, outline, ghost, link, soft)
+ * - All 5 sizes (xs, sm, md, lg, xl)
+ * - All states (normal, hover, active, disabled, loading)
+ * - Icon positioning and icon-only buttons
+ * - Usage in forms, dialogs, and cards
+ * - Accessibility features
+ */
+/**
+ * EXAMPLE 1: All Color Variants (Solid Style)
+ * Demonstrates the 7 semantic color variants with solid background
+ */
+export declare function AllVariantsExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 2: All Style Modifiers
+ * Shows how each style modifier affects appearance
+ */
+export declare function AllStylesExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 3: All Sizes
+ * Demonstrates the 5 available sizes from xs to xl
+ */
+export declare function AllSizesExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 4: All States
+ * Shows normal, hover, active, disabled, and loading states
+ */
+export declare function AllStatesExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 5: Icon Buttons
+ * Demonstrates icon positioning and icon-only buttons
+ */
+export declare function IconButtonsExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 6: Form Usage
+ * Demonstrates buttons in form contexts with proper types
+ */
+export declare function FormUsageExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 7: Dialog/Modal Usage
+ * Shows typical dialog button patterns
+ */
+export declare function DialogUsageExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 8: Card Actions
+ * Shows button usage in card contexts
+ */
+export declare function CardActionsExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 9: Width Variants
+ * Shows different width options
+ */
+export declare function WidthVariantsExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 10: Accessibility Features
+ * Demonstrates proper accessibility implementation
+ */
+export declare function AccessibilityExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 11: Rounded Variants
+ * Shows different border radius options
+ */
+export declare function RoundedVariantsExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * EXAMPLE 12: Real-World Complete Example
+ * A realistic user profile card with multiple button uses
+ */
+export declare function RealWorldExample(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.examples.d.ts.map

package/dist/components/forms/button/button.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.examples.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/button.examples.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH;;;GAGG;AACH,wBAAgB,kBAAkB,4CAyBjC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,4CAsD/B;AAED;;;GAGG;AACH,wBAAgB,eAAe,4CA6B9B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,4CAoD/B;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,4CA2CjC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,4CAsC/B;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,4CAqBjC;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,4CA4BjC;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,4CAiBnC;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,4CAkCnC;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,4CAsBrC;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,4CAwC/B"}

package/dist/components/forms/button/button.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { interactiveSizes, inputWidthSizes } from "../../../theme/size-tokens.js";
+import { inputAlignClasses, colorVariants } from "../../../theme/tokens.js";
+const Button = React.forwardRef(
+  ({
+    children,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onBlur,
+    ariaLabel,
+    disabled = false,
+    type = "button",
+    className = "",
+    icon,
+    iconPosition = "left",
+    variant = "neutral",
+    style = "solid",
+    size = "md",
+    rounded = "default",
+    loading = false,
+    width = "auto",
+    fullWidth = false,
+    wide = false,
+    align,
+    active = false,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHaspopup,
+    "aria-controls": ariaControls
+  }, ref) => {
+    const isIconOnly = icon && !children;
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
+    }
+    const getStyleClasses = () => {
+      const variantKey = variant;
+      switch (style) {
+        case "outline":
+          return `${colorVariants.outline[variantKey]}`;
+        case "ghost":
+          return colorVariants.ghost[variantKey];
+        case "link":
+          return colorVariants.link[variantKey];
+        case "soft":
+          return colorVariants.soft[variantKey];
+        case "solid":
+        default:
+          return `${colorVariants.solid[variantKey]} shadow-sm hover:shadow-md`;
+      }
+    };
+    const sizeConfig = interactiveSizes[size];
+    const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;
+    const roundedClasses = {
+      default: "rounded-md",
+      pill: "rounded-full",
+      square: "rounded-none aspect-square",
+      circle: "rounded-full aspect-square"
+    };
+    const displayIcon = loading ? /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ] }) : icon;
+    const styleClasses = getStyleClasses();
+    const effectiveWidth = fullWidth ? "full" : wide ? "xl" : width;
+    const widthClasses = inputWidthSizes[effectiveWidth];
+    const alignmentClass = align ? inputAlignClasses[align] : "";
+    const activeClasses = active ? "active:scale-95" : "";
+    const shouldRenderIconSlots = !isIconOnly && Boolean(displayIcon);
+    const cloneIcon = () => {
+      if (!displayIcon) return null;
+      if (React.isValidElement(displayIcon)) {
+        return React.cloneElement(displayIcon, { "aria-hidden": false });
+      }
+      return displayIcon;
+    };
+    const showLeftIcon = shouldRenderIconSlots && iconPosition === "left";
+    const showRightIcon = shouldRenderIconSlots && iconPosition === "right";
+    const hasDisplayOverride = className.includes("hidden") || className.includes("inline") || className.includes("block") || className.includes("flex");
+    const baseDisplayClass = hasDisplayOverride ? "" : "inline-flex";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        onClick,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseDown,
+        onBlur,
+        "aria-label": ariaLabel,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHaspopup,
+        "aria-controls": ariaControls,
+        disabled: disabled || loading,
+        className: `${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        children: [
+          showLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center mr-2", children: cloneIcon() }),
+          isIconOnly ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center", children: displayIcon }) : /* @__PURE__ */ jsx("span", { className: "inline-flex flex-1 justify-center text-center", children }),
+          showRightIcon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center ml-2", children: cloneIcon() })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button as default
+};
+//# sourceMappingURL=button.js.map

package/dist/components/forms/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../../src/components/forms/button/button.tsx"],"sourcesContent":["import React from 'react';\n\nimport { interactiveSizes, InteractiveSize, InputWidth, inputWidthSizes } from '../../../theme/size-tokens';\nimport { Alignment, colorVariants, inputAlignClasses, ColorVariant } from '../../../theme/tokens';\n\nexport type ButtonProps = {\n  /** Button label content - text, icons, or other elements */\n  children?: React.ReactNode;\n  /** Click event handler */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Mouse enter event handler */\n  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Mouse leave event handler */\n  onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Mouse down event handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Blur event handler */\n  onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;\n  /** Accessible label for icon-only buttons (required when no children) */\n  ariaLabel?: string;\n  /** Disables button interaction and applies disabled styling */\n  disabled?: boolean;\n  /** HTML button type attribute */\n  type?: 'button' | 'submit' | 'reset';\n  /** Additional CSS classes applied to the button */\n  className?: string;\n  /** Icon element to display alongside button text */\n  icon?: React.ReactNode;\n  /** Position of the icon relative to button text */\n  iconPosition?: 'left' | 'right';\n  /** Color variant affecting button appearance */\n  variant?: ColorVariant;\n  /** Visual style modifier - solid (filled), outline (bordered), ghost (transparent), link (text-only), or soft (subtle background) */\n  style?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';\n  /** Size variant - uses unified size system (xs, sm, md, lg, xl) */\n  size?: InteractiveSize;\n  /** Border radius style - default (rounded), pill (fully rounded), square (sharp corners), circle (for icon-only buttons) */\n  rounded?: 'default' | 'pill' | 'square' | 'circle';\n  /** Shows loading spinner and disables interaction */\n  loading?: boolean;\n  /** Width of the button */\n  width?: InputWidth;\n  /** When true, button spans full width of container (same as width=\"full\") */\n  fullWidth?: boolean;\n  /** When true, button uses wider min-width (good for prominent actions) */\n  wide?: boolean;\n  /** Aligns the button within its container: left, center, or right */\n  align?: Alignment;\n  /** Applies active/pressed state styling */\n  active?: boolean;\n  /** ARIA expanded state - indicates if controlled element is expanded */\n  'aria-expanded'?: boolean;\n  /** ARIA haspopup - indicates element has popup menu/dialog */\n  'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n  /** ARIA controls - ID of element controlled by this button */\n  'aria-controls'?: string;\n};\n\n/**\n * Accessible Button component\n * - Color variants: neutral, primary, accent, info, success, warning, error\n * - Style modifiers: solid (default), outline, ghost, link, soft\n * - Sizes: xs, sm, md (default), lg, xl\n * - Supports icons with flexible positioning (left/right)\n * - Icon-only buttons require `ariaLabel` for accessibility\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      onClick,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseDown,\n      onBlur,\n      ariaLabel,\n      disabled = false,\n      type = 'button',\n      className = '',\n      icon,\n      iconPosition = 'left',\n      variant = 'neutral',\n      style = 'solid',\n      size = 'md',\n      rounded = 'default',\n      loading = false,\n      width = 'auto',\n      fullWidth = false,\n      wide = false,\n      align,\n      active = false,\n      'aria-expanded': ariaExpanded,\n      'aria-haspopup': ariaHaspopup,\n      'aria-controls': ariaControls\n    },\n    ref\n  ) => {\n    const isIconOnly = icon && !children;\n\n    // Icon-only buttons MUST have an aria-label for accessibility\n    if (isIconOnly && !ariaLabel) {\n      // eslint-disable-next-line no-console\n      console.warn('Button: Icon-only buttons require an ariaLabel for accessibility');\n    }\n\n    // Style modifiers\n    const getStyleClasses = () => {\n      const variantKey = variant as keyof typeof colorVariants.solid;\n\n      switch (style) {\n        case 'outline':\n          return `${colorVariants.outline[variantKey]}`;\n        case 'ghost':\n          return colorVariants.ghost[variantKey];\n        case 'link':\n          return colorVariants.link[variantKey];\n        case 'soft':\n          return colorVariants.soft[variantKey];\n        case 'solid':\n        default:\n          return `${colorVariants.solid[variantKey]} shadow-sm hover:shadow-md`;\n      }\n    };\n\n    // Sizes - from unified size system\n    const sizeConfig = interactiveSizes[size];\n    const sizeClasses = `${sizeConfig.height} ${sizeConfig.padding} ${sizeConfig.text}`;\n\n    const roundedClasses = {\n      default: 'rounded-md',\n      pill: 'rounded-full',\n      square: 'rounded-none aspect-square',\n      circle: 'rounded-full aspect-square'\n    };\n\n    // Show loading spinner or icon\n    const displayIcon = loading ? (\n      <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n        <path\n          className=\"opacity-75\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        ></path>\n      </svg>\n    ) : (\n      icon\n    );\n\n    const styleClasses = getStyleClasses();\n    const effectiveWidth = fullWidth ? 'full' : wide ? 'xl' : width;\n    const widthClasses = inputWidthSizes[effectiveWidth];\n    const alignmentClass = align ? inputAlignClasses[align] : '';\n    const activeClasses = active ? 'active:scale-95' : '';\n\n    const shouldRenderIconSlots = !isIconOnly && Boolean(displayIcon);\n    const cloneIcon = () => {\n      if (!displayIcon) return null;\n      if (React.isValidElement(displayIcon)) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return React.cloneElement(displayIcon as React.ReactElement<any>, { 'aria-hidden': false });\n      }\n      return displayIcon;\n    };\n\n    const showLeftIcon = shouldRenderIconSlots && iconPosition === 'left';\n    const showRightIcon = shouldRenderIconSlots && iconPosition === 'right';\n\n    // Check if className contains display utilities to avoid conflicts\n    const hasDisplayOverride =\n      className.includes('hidden') ||\n      className.includes('inline') ||\n      className.includes('block') ||\n      className.includes('flex');\n    const baseDisplayClass = hasDisplayOverride ? '' : 'inline-flex';\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onMouseDown={onMouseDown}\n        onBlur={onBlur}\n        aria-label={ariaLabel}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHaspopup}\n        aria-controls={ariaControls}\n        disabled={disabled || loading}\n        className={`${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${\n          isIconOnly ? 'p-0' : ''\n        } ${widthClasses} ${activeClasses} ${className}`}\n      >\n        {showLeftIcon && <span className=\"flex shrink-0 items-center mr-2\">{cloneIcon()}</span>}\n        {isIconOnly ? (\n          <span className=\"inline-flex items-center justify-center\">{displayIcon}</span>\n        ) : (\n          <span className=\"inline-flex flex-1 justify-center text-center\">{children}</span>\n        )}\n        {showRightIcon && <span className=\"flex shrink-0 items-center ml-2\">{cloneIcon()}</span>}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":[],"mappings":"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"}

package/dist/components/forms/button/icon-button.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { IconSize } from '../../system/icon';
+import { ButtonProps as BaseButtonProps } from './button';
+import { ColorVariant } from '../../../theme/tokens';
+export interface IconButtonProps extends Omit<BaseButtonProps, 'icon' | 'style' | 'children'> {
+    icon: string;
+    ariaLabel: string;
+    iconSize?: IconSize;
+    iconColor?: ColorVariant | 'currentColor';
+    buttonStyle?: BaseButtonProps['style'];
+    /** Remove the default button sizing so the icon renders without extra padding */
+    noPadding?: boolean;
+    /** Icon to display on hover (if not provided, hover will keep the same icon) */
+    hoverIcon?: string;
+    children?: never;
+}
+/**
+ * IconButton - Icon-only button using Icon wrapper for consistent icon sizing
+ * Usage: <IconButton icon="plus" iconSize="md" ariaLabel="Add item" />
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/forms/button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAQ,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAe,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3F,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IAC1C,WAAW,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACvC,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU,2FAgGf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/components/forms/button/icon-button.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { Icon } from "../../system/icon/icon.js";
+import Button from "./button.js";
+const IconButton = React.forwardRef(
+  ({
+    icon,
+    iconSize = "md",
+    iconColor = "currentColor",
+    buttonStyle,
+    noPadding = false,
+    ariaLabel,
+    hoverIcon,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    className = "",
+    ...rest
+  }, ref) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const buttonRef = useRef(null);
+    const mergedRef = useCallback(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleMouseEnter = (e) => {
+      setIsHovered(true);
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      setIsHovered(false);
+      onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+      setIsHovered(false);
+      onClick?.(e);
+    };
+    useEffect(() => {
+      if (!hoverIcon || !isHovered) return;
+      const handleGlobalMouseMove = (e) => {
+        if (!buttonRef.current) return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const isOutside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+        if (isOutside) {
+          setIsHovered(false);
+        }
+      };
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+      };
+    }, [hoverIcon, isHovered]);
+    const displayIcon = isHovered && hoverIcon ? hoverIcon : icon;
+    const iconNode = displayIcon ? /* @__PURE__ */ jsx(Icon, { name: displayIcon, size: iconSize, color: iconColor }) : null;
+    const paddingClasses = noPadding ? "!px-0 !py-0 !h-auto !min-h-0 !w-auto !min-w-0" : "";
+    const hoverClasses = noPadding ? "hover:!bg-transparent active:!bg-transparent" : "";
+    const mergedClassName = [paddingClasses, hoverClasses, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref: mergedRef,
+        icon: iconNode,
+        style: buttonStyle,
+        ariaLabel,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        className: mergedClassName,
+        ...rest
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+export {
+  IconButton as default
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/forms/button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../../../src/components/forms/button/icon-button.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Icon, IconSize } from '../../system/icon';\nimport Button, { ButtonProps as BaseButtonProps } from './button';\nimport { ColorVariant } from '../../../theme/tokens';\n\nexport interface IconButtonProps extends Omit<BaseButtonProps, 'icon' | 'style' | 'children'> {\n  icon: string;\n  ariaLabel: string;\n  iconSize?: IconSize;\n  iconColor?: ColorVariant | 'currentColor';\n  buttonStyle?: BaseButtonProps['style'];\n  /** Remove the default button sizing so the icon renders without extra padding */\n  noPadding?: boolean;\n  /** Icon to display on hover (if not provided, hover will keep the same icon) */\n  hoverIcon?: string;\n  children?: never;\n}\n\n/**\n * IconButton - Icon-only button using Icon wrapper for consistent icon sizing\n * Usage: <IconButton icon=\"plus\" iconSize=\"md\" ariaLabel=\"Add item\" />\n */\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      icon,\n      iconSize = 'md',\n      iconColor = 'currentColor',\n      buttonStyle,\n      noPadding = false,\n      ariaLabel,\n      hoverIcon,\n      onMouseEnter,\n      onMouseLeave,\n      onClick,\n      className = '',\n      ...rest\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n    // Merged callback ref that handles both internal and forwarded refs\n    const mergedRef = useCallback(\n      (node: HTMLButtonElement | null) => {\n        // Update internal ref\n        buttonRef.current = node;\n\n        // Forward to external ref\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref]\n    );\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setIsHovered(true);\n      onMouseEnter?.(e);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setIsHovered(false);\n      onMouseLeave?.(e);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      // Reset hover state on click - handles click-drag scenarios\n      // where mouseLeave might not fire\n      setIsHovered(false);\n      onClick?.(e);\n    };\n\n    // Global mousemove listener to detect when mouse leaves button during drag\n    useEffect(() => {\n      if (!hoverIcon || !isHovered) return;\n\n      const handleGlobalMouseMove = (e: MouseEvent) => {\n        if (!buttonRef.current) return;\n\n        const rect = buttonRef.current.getBoundingClientRect();\n        const isOutside =\n          e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;\n\n        if (isOutside) {\n          setIsHovered(false);\n        }\n      };\n\n      document.addEventListener('mousemove', handleGlobalMouseMove);\n      return () => {\n        document.removeEventListener('mousemove', handleGlobalMouseMove);\n      };\n    }, [hoverIcon, isHovered]);\n\n    const displayIcon = isHovered && hoverIcon ? hoverIcon : icon;\n    const iconNode = displayIcon ? <Icon name={displayIcon} size={iconSize} color={iconColor} /> : null;\n    const paddingClasses = noPadding ? '!px-0 !py-0 !h-auto !min-h-0 !w-auto !min-w-0' : '';\n    const hoverClasses = noPadding ? 'hover:!bg-transparent active:!bg-transparent' : '';\n    const mergedClassName = [paddingClasses, hoverClasses, className].filter(Boolean).join(' ');\n\n    return (\n      <Button\n        ref={mergedRef}\n        icon={iconNode}\n        style={buttonStyle}\n        ariaLabel={ariaLabel}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onClick={handleClick}\n        className={mergedClassName}\n        {...rest}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n\nexport default IconButton;\n"],"names":[],"mappings":";;;;AAsBA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,UAAM,YAAY,OAAiC,IAAI;AAGvD,UAAM,YAAY;AAAA,MAChB,CAAC,SAAmC;AAElC,kBAAU,UAAU;AAGpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,KAAK;AACd,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGN,UAAM,mBAAmB,CAAC,MAA2C;AACnE,mBAAa,IAAI;AACjB,qBAAe,CAAC;AAAA,IAClB;AAEA,UAAM,mBAAmB,CAAC,MAA2C;AACnE,mBAAa,KAAK;AAClB,qBAAe,CAAC;AAAA,IAClB;AAEA,UAAM,cAAc,CAAC,MAA2C;AAG9D,mBAAa,KAAK;AAClB,gBAAU,CAAC;AAAA,IACb;AAGA,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,CAAC,UAAW;AAE9B,YAAM,wBAAwB,CAAC,MAAkB;AAC/C,YAAI,CAAC,UAAU,QAAS;AAExB,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,YACJ,EAAE,UAAU,KAAK,QAAQ,EAAE,UAAU,KAAK,SAAS,EAAE,UAAU,KAAK,OAAO,EAAE,UAAU,KAAK;AAE9F,YAAI,WAAW;AACb,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF;AAEA,eAAS,iBAAiB,aAAa,qBAAqB;AAC5D,aAAO,MAAM;AACX,iBAAS,oBAAoB,aAAa,qBAAqB;AAAA,MACjE;AAAA,IACF,GAAG,CAAC,WAAW,SAAS,CAAC;AAEzB,UAAM,cAAc,aAAa,YAAY,YAAY;AACzD,UAAM,WAAW,cAAc,oBAAC,MAAA,EAAK,MAAM,aAAa,MAAM,UAAU,OAAO,UAAA,CAAW,IAAK;AAC/F,UAAM,iBAAiB,YAAY,kDAAkD;AACrF,UAAM,eAAe,YAAY,iDAAiD;AAClF,UAAM,kBAAkB,CAAC,gBAAgB,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE1F,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP;AAAA,QACA,cAAc;AAAA,QACd,cAAc;AAAA,QACd,SAAS;AAAA,QACT,WAAW;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,WAAW,cAAc;"}

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

@@ -0,0 +1,10 @@
+export { default } from './button';
+export { default as Button } from './button';
+export type { ButtonProps } from './button';
+export { default as ButtonWithIcon } from './button-with-icon';
+export type { ButtonWithIconProps } from './button-with-icon';
+export { default as IconButton } from './icon-button';
+export type { IconButtonProps } from './icon-button';
+export { default as InlineButton } from './inline-button';
+export type { InlineButtonProps } from './inline-button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/forms/button/inline-button.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { ColorVariant } from '../../../theme/tokens';
+export type InlineButtonProps = {
+    /** Button label content - typically text */
+    children: React.ReactNode;
+    /** Click event handler */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label (optional, children used by default) */
+    ariaLabel?: string;
+    /** Disables button interaction and applies disabled styling */
+    disabled?: boolean;
+    /** HTML button type attribute */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes applied to the button */
+    className?: string;
+    /** Icon name string passed to the Icon component to display alongside button text */
+    icon?: string;
+    /** Color variant - defaults to primary for link-like appearance */
+    variant?: ColorVariant;
+    /** Shows loading spinner and disables interaction */
+    loading?: boolean;
+    /** Whether to show underline on hover (default: true) */
+    underline?: boolean;
+    /** Icon size token - defaults to 'xs' to match text size */
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+/**
+ * Inline Button - a minimal button designed to be embedded within text
+ *
+ * Perfect for use cases like:
+ * - "By signing in, you agree to our [Terms of Service]"
+ * - "Learn more about [pricing]"
+ * - Inline actions within paragraphs
+ *
+ * Features:
+ * - No background or padding by default
+ * - Inherits surrounding text sizing
+ * - Optional icon support
+ * - Color variants for different contexts
+ * - Hover underline (can be disabled)
+ * - Fully accessible
+ */
+declare const InlineButton: React.ForwardRefExoticComponent<InlineButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default InlineButton;
+//# sourceMappingURL=inline-button.d.ts.map

package/dist/components/forms/button/inline-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-button.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/button/inline-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC7C,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY,6FA2DjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/components/forms/button/inline-button.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Icon } from "../../system/icon/icon.js";
+const InlineButton = React.forwardRef(
+  ({
+    children,
+    onClick,
+    ariaLabel,
+    disabled = false,
+    type = "button",
+    className = "",
+    icon,
+    variant = "primary",
+    loading = false,
+    underline = true,
+    iconSize = "xs"
+  }, ref) => {
+    const variantClasses = {
+      neutral: "text-neutral hover:text-neutral-hover active:text-neutral-active",
+      primary: "text-primary hover:text-primary-hover active:text-primary-active",
+      accent: "text-accent hover:text-accent-hover active:text-accent-active",
+      info: "text-info hover:text-info-hover active:text-info-active",
+      success: "text-success hover:text-success-hover active:text-success-active",
+      warning: "text-warning hover:text-warning-hover active:text-warning-active",
+      error: "text-error hover:text-error-hover active:text-error-active"
+    };
+    const baseClasses = [
+      "inline-flex items-center gap-0.5",
+      "font-medium",
+      "transition-colors duration-200",
+      "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+      disabled || loading ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+      underline ? "hover:underline" : "",
+      variantClasses[variant],
+      className
+    ].filter(Boolean).join(" ");
+    const iconElement = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }) : null;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        onClick,
+        disabled: disabled || loading,
+        "aria-label": ariaLabel,
+        className: baseClasses,
+        children: [
+          children,
+          iconElement
+        ]
+      }
+    );
+  }
+);
+InlineButton.displayName = "InlineButton";
+export {
+  InlineButton as default
+};
+//# sourceMappingURL=inline-button.js.map

package/dist/components/forms/button/inline-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-button.js","sources":["../../../../src/components/forms/button/inline-button.tsx"],"sourcesContent":["import React from 'react';\nimport { ColorVariant } from '../../../theme/tokens';\nimport { Icon } from '../../system/icon/icon';\n\nexport type InlineButtonProps = {\n  /** Button label content - typically text */\n  children: React.ReactNode;\n  /** Click event handler */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Accessible label (optional, children used by default) */\n  ariaLabel?: string;\n  /** Disables button interaction and applies disabled styling */\n  disabled?: boolean;\n  /** HTML button type attribute */\n  type?: 'button' | 'submit' | 'reset';\n  /** Additional CSS classes applied to the button */\n  className?: string;\n  /** Icon name string passed to the Icon component to display alongside button text */\n  icon?: string;\n  /** Color variant - defaults to primary for link-like appearance */\n  variant?: ColorVariant;\n  /** Shows loading spinner and disables interaction */\n  loading?: boolean;\n  /** Whether to show underline on hover (default: true) */\n  underline?: boolean;\n  /** Icon size token - defaults to 'xs' to match text size */\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n};\n\n/**\n * Inline Button - a minimal button designed to be embedded within text\n *\n * Perfect for use cases like:\n * - \"By signing in, you agree to our [Terms of Service]\"\n * - \"Learn more about [pricing]\"\n * - Inline actions within paragraphs\n *\n * Features:\n * - No background or padding by default\n * - Inherits surrounding text sizing\n * - Optional icon support\n * - Color variants for different contexts\n * - Hover underline (can be disabled)\n * - Fully accessible\n */\nconst InlineButton = React.forwardRef<HTMLButtonElement, InlineButtonProps>(\n  (\n    {\n      children,\n      onClick,\n      ariaLabel,\n      disabled = false,\n      type = 'button',\n      className = '',\n      icon,\n      variant = 'primary',\n      loading = false,\n      underline = true,\n      iconSize = 'xs'\n    },\n    ref\n  ) => {\n    // Color variant styles\n    const variantClasses: Record<ColorVariant, string> = {\n      neutral: 'text-neutral hover:text-neutral-hover active:text-neutral-active',\n      primary: 'text-primary hover:text-primary-hover active:text-primary-active',\n      accent: 'text-accent hover:text-accent-hover active:text-accent-active',\n      info: 'text-info hover:text-info-hover active:text-info-active',\n      success: 'text-success hover:text-success-hover active:text-success-active',\n      warning: 'text-warning hover:text-warning-hover active:text-warning-active',\n      error: 'text-error hover:text-error-hover active:text-error-active'\n    };\n\n    // Base classes - minimal styling, inline with text\n    const baseClasses = [\n      'inline-flex items-center gap-0.5',\n      'font-medium',\n      'transition-colors duration-200',\n      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n      disabled || loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',\n      underline ? 'hover:underline' : '',\n      variantClasses[variant],\n      className\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    // Clone icon and apply size to make it proportional to text\n    const iconElement = icon ? <Icon name={icon} size={iconSize} /> : null;\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={onClick}\n        disabled={disabled || loading}\n        aria-label={ariaLabel}\n        className={baseClasses}\n      >\n        {children}\n        {iconElement}\n      </button>\n    );\n  }\n);\n\nInlineButton.displayName = 'InlineButton';\n\nexport default InlineButton;\n"],"names":[],"mappings":";;;AA6CA,MAAM,eAAe,MAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA,GAEb,QACG;AAEH,UAAM,iBAA+C;AAAA,MACnD,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAIT,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,UAAU,kCAAkC;AAAA,MACxD,YAAY,oBAAoB;AAAA,MAChC,eAAe,OAAO;AAAA,MACtB;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAGX,UAAM,cAAc,OAAO,oBAAC,MAAA,EAAK,MAAM,MAAM,MAAM,UAAU,IAAK;AAElE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,cAAY;AAAA,QACZ,WAAW;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}