@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/inputs/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/react/core/inputs/Button.tsx"],"sourcesContent":["/**\n * @zendir/ui - Button Component\n * \n * Enterprise-grade button following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Three visual variants: primary, secondary, borderless\n * - Size variants: small, medium, large\n * - Sentence case capitalization\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Right-align in button groups (primary on right)\n * \n * Zendir Enhancements:\n * - Purple accent colors\n * - Smooth micro-interactions\n * - Subtle glow effects\n * - Modern glassmorphism hover states\n * \n * @example\n * ```tsx\n * <Button>Primary Action</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button variant=\"borderless\" icon={<Icon name=\"settings\" />}>Settings</Button>\n * <Button loading>Saving...</Button>\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useMemo, useRef, useLayoutEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames, safeAccentText } from '../../utils';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'borderless';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual variant */\n  variant?: ButtonVariant;\n  /** Size variant */\n  size?: ButtonSize;\n  /** Icon to display before text */\n  icon?: React.ReactNode;\n  /** Icon to display after text */\n  iconEnd?: React.ReactNode;\n  /** Show loading spinner */\n  loading?: boolean;\n  /** Full width button */\n  fullWidth?: boolean;\n  /** Tooltip text (shows on hover) */\n  tooltip?: string;\n  /** Custom className */\n  className?: string;\n  /** Children */\n  children?: React.ReactNode;\n}\n\nexport const Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'primary',\n    size = 'medium',\n    icon,\n    iconEnd,\n    loading = false,\n    fullWidth = false,\n    tooltip,\n    disabled,\n    className = '',\n    children,\n    style,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  \n  // Spin keyframe is used by loading spinner only (injected there)\n\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [isHovered, setIsHovered] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [showTooltip, setShowTooltip] = useState(false);\n  \n  const isDisabled = disabled || loading;\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const transparentHover = tokens.colors.interactive.transparentHover;\n\n  // WCAG AA: compute a button-safe background from accent.primary\n  // If white text (#fff) on the accent bg doesn't meet 4.5:1, darken it proportionally.\n  const safeAccentBg = useMemo(() => {\n    const hex = tokens.colors.accent.primary.replace('#', '');\n    if (hex.length < 6) return tokens.colors.accent.primary;\n    const toLinear = (c: number) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    if ((1.05 / (L + 0.05)) >= 4.5) return tokens.colors.accent.primary;\n    // Darken just enough: target L for ~4.7:1 contrast with white\n    const factor = 0.88;\n    const dr = Math.min(255, Math.round(r * 255 * factor));\n    const dg = Math.min(255, Math.round(g * 255 * factor));\n    const db = Math.min(255, Math.round(b * 255 * factor));\n    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;\n  }, [tokens.colors.accent.primary]);\n\n  // WCAG AA safe accent for use as foreground text on dark backgrounds\n  const safeAccentFg = useMemo(() => safeAccentText(tokens.colors.accent.primary), [tokens.colors.accent.primary]);\n  \n  const sizeConfig = {\n    small: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,\n      fontSize: tokens.typography.fontSize.xs,\n      height: '24px',\n      gap: tokens.spacing.xs,\n      iconSize: 13,\n      borderRadius: tokens.borderRadius.sm,\n    },\n    medium: {\n      padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,\n      fontSize: tokens.typography.fontSize.sm,\n      height: '28px',\n      gap: tokens.spacing.xs,\n      iconSize: 15,\n      borderRadius: tokens.borderRadius.md,\n    },\n    large: {\n      padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,\n      fontSize: tokens.typography.fontSize.base,\n      height: '34px',\n      gap: tokens.spacing.sm,\n      iconSize: 17,\n      borderRadius: tokens.borderRadius.md,\n    },\n  };\n  \n  const config = sizeConfig[size];\n  \n  // Variant base styles (transparent theme: purple-hue transparent bg, smooth fade on hover)\n  const getVariantStyles = (): React.CSSProperties => {\n    const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;\n    \n    if (isTransparentTheme && transparentDefault && transparentHover) {\n      switch (variant) {\n        case 'primary':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: tokens.colors.text.primary,\n            border: `1px solid ${isHovered && !isDisabled ? 'rgba(139, 92, 246, 0.5)' : 'rgba(139, 92, 246, 0.25)'}`,\n            boxShadow: isHovered && !isDisabled ? '0 0 10px rgba(139, 92, 246, 0.15)' : 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'secondary':\n          return {\n            backgroundColor: isHovered && !isDisabled \n              ? `${tokens.colors.accent.primary}15` // Use accent color with opacity instead of transparentHover\n              : transparentDefault,\n            color: safeAccentFg,\n            border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(8px)',\n            WebkitBackdropFilter: 'blur(8px)',\n          };\n        case 'borderless':\n          return {\n            backgroundColor: isHovered && !isDisabled ? transparentHover : transparentDefault,\n            color: safeAccentFg,\n            border: 'none',\n            boxShadow: 'none',\n            transition: baseTransition,\n            backdropFilter: 'blur(6px)',\n            WebkitBackdropFilter: 'blur(6px)',\n          };\n      }\n    }\n    \n    switch (variant) {\n      case 'primary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? tokens.colors.interactive.hover\n            : safeAccentBg,\n          color: '#ffffff',\n          border: 'none',\n          boxShadow: isHovered && !isDisabled\n            ? `0 2px 8px -2px ${tokens.colors.accent.primary}35`\n            : 'none',\n          transition: baseTransition,\n        };\n      \n      case 'secondary':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}12`\n            : 'transparent',\n          color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,\n          border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n      \n      case 'borderless':\n        return {\n          backgroundColor: isHovered && !isDisabled\n            ? `${tokens.colors.accent.primary}10`\n            : 'transparent',\n          color: safeAccentFg,\n          border: `${tokens.borders.width.medium} solid transparent`,\n          boxShadow: 'none',\n          transition: baseTransition,\n        };\n    }\n  };\n  \n  const focusStyles: React.CSSProperties = isFocused ? {\n    outline: 'none',\n    boxShadow: tokens.borders.focusRing.button,\n  } : {};\n\n  const activeStyles: React.CSSProperties = isActive && !isDisabled ? {\n    filter: 'brightness(0.85)',\n    transform: 'scale(0.98)',\n    boxShadow: 'none',\n  } : {};\n  \n  const baseStyle: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: config.gap,\n    padding: config.padding,\n    height: config.height,\n    fontSize: config.fontSize,\n    fontWeight: 400,\n    fontFamily: tokens.typography.fontFamily.primary,\n    letterSpacing: '0.02em',\n    borderRadius: config.borderRadius,\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    opacity: isDisabled ? 0.5 : 1,\n    outline: 'none',\n    textDecoration: 'none',\n    whiteSpace: 'nowrap',\n    userSelect: 'none',\n    width: fullWidth ? '100%' : 'auto',\n    position: 'relative',\n    ...getVariantStyles(),\n    ...focusStyles,\n    ...activeStyles,\n    ...style,\n  };\n  \n  // Loading spinner with smooth animation\n  const spinner = (\n    <svg\n      width={config.iconSize}\n      height={config.iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      style={{\n        animation: 'zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n      }}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"31.4 31.4\"\n        strokeDashoffset=\"10\"\n        opacity=\"0.9\"\n      />\n      <style>\n        {`@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\n      </style>\n    </svg>\n  );\n  \n  // Portal-based tooltip: position fixed relative to viewport, never clipped\n  const internalRef = useRef<HTMLButtonElement>(null);\n  const tooltipNodeRef = useRef<HTMLDivElement>(null);\n  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);\n\n  const mergedRef = useCallback((node: HTMLButtonElement | null) => {\n    (internalRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n    if (typeof ref === 'function') ref(node);\n    else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n  }, [ref]);\n\n  useLayoutEffect(() => {\n    if (!showTooltip || !tooltip || !internalRef.current) {\n      setTooltipPos(null);\n      return;\n    }\n    const btn = internalRef.current.getBoundingClientRect();\n    const gap = 8;\n    let top = btn.top - gap;\n    let left = btn.left + btn.width / 2;\n    // Adjust after tooltip renders so we can measure its width\n    if (tooltipNodeRef.current) {\n      const tt = tooltipNodeRef.current.getBoundingClientRect();\n      top = btn.top - tt.height - gap;\n      left = btn.left + (btn.width - tt.width) / 2;\n      if (left < 8) left = 8;\n      if (left + tt.width > window.innerWidth - 8) left = window.innerWidth - tt.width - 8;\n      if (top < 8) top = btn.bottom + gap; // flip below if no room above\n    }\n    setTooltipPos({ top, left });\n  }, [showTooltip, tooltip]);\n\n  const tooltipPortal = tooltip && showTooltip && ReactDOM.createPortal(\n    <div\n      ref={tooltipNodeRef}\n      role=\"tooltip\"\n      style={{\n        position: 'fixed',\n        top: tooltipPos ? tooltipPos.top : -9999,\n        left: tooltipPos ? tooltipPos.left : -9999,\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        fontSize: '0.75rem',\n        fontWeight: 500,\n        color: tokens.colors.text.primary,\n        backgroundColor: tokens.colors.background.elevated,\n        border: tokens.borders.divider,\n        borderRadius: tokens.borderRadius.md,\n        boxShadow: tokens.shadows.md,\n        whiteSpace: 'nowrap',\n        zIndex: 2147483100,\n        pointerEvents: 'none',\n        opacity: tooltipPos ? 1 : 0,\n        animation: tooltipPos ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : 'none',\n      }}\n    >\n      {tooltip}\n      <style>\n        {`@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }`}\n      </style>\n    </div>,\n    document.body\n  );\n\n  return (\n    <>\n      <button\n        ref={mergedRef}\n        type=\"button\"\n        disabled={isDisabled}\n        className={classNames('zendir-button', `zendir-button--${variant}`, `zendir-button--${size}`, className)}\n        style={baseStyle}\n        title={tooltip && !showTooltip ? tooltip : undefined}\n        onMouseDown={() => setIsActive(true)}\n        onMouseUp={() => setIsActive(false)}\n        onMouseEnter={(e) => {\n          setIsHovered(true);\n          setShowTooltip(true);\n          onMouseEnter?.(e);\n        }}\n        onMouseLeave={(e) => {\n          setIsHovered(false);\n          setIsActive(false);\n          setShowTooltip(false);\n          onMouseLeave?.(e);\n        }}\n        onFocus={(e) => {\n          setIsFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setIsFocused(false);\n          onBlur?.(e);\n        }}\n        {...rest}\n      >\n        {loading ? spinner : icon}\n        {children && <span>{children}</span>}\n        {iconEnd && !loading && iconEnd}\n      </button>\n      {tooltipPortal}\n    </>\n  );\n}));\n\nexport default Button;\n"],"names":["Button"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../../src/react/core/inputs/Button.tsx"],"sourcesContent":["/**\n * @zendir/ui - Button Component\n *\n * Enterprise-grade button following Astro UX Design System with Zendir purple accents.\n *\n * Astro UX Compliance:\n * - Three visual variants: primary, secondary, borderless\n * - Size variants: small, medium, large\n * - Sentence case capitalization\n * - Focus ring for accessibility (WCAG 2.1 AA)\n * - Right-align in button groups (primary on right)\n *\n * Zendir Enhancements:\n * - Purple accent colors\n * - Smooth micro-interactions\n * - Subtle glow effects\n * - Modern glassmorphism hover states\n *\n * @example\n * ```tsx\n * <Button>Primary Action</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button variant=\"borderless\" icon={<Icon name=\"settings\" />}>Settings</Button>\n * <Button loading>Saving...</Button>\n * ```\n */\n\nimport React, {\n  memo,\n  forwardRef,\n  useState,\n  useMemo,\n  useRef,\n  useLayoutEffect,\n  useCallback,\n} from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useTheme } from \"../../theme\";\nimport { classNames, safeAccentText } from \"../../utils\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"borderless\";\nexport type ButtonSize = \"small\" | \"medium\" | \"large\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual variant */\n  variant?: ButtonVariant;\n  /** Size variant */\n  size?: ButtonSize;\n  /** Icon to display before text */\n  icon?: React.ReactNode;\n  /** Icon to display after text */\n  iconEnd?: React.ReactNode;\n  /** Show loading spinner */\n  loading?: boolean;\n  /** Full width button */\n  fullWidth?: boolean;\n  /** Tooltip text (shows on hover) */\n  tooltip?: string;\n  /** Custom className */\n  className?: string;\n  /** Children */\n  children?: React.ReactNode;\n}\n\nexport const Button = memo(\n  forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n    {\n      variant = \"primary\",\n      size = \"medium\",\n      icon,\n      iconEnd,\n      loading = false,\n      fullWidth = false,\n      tooltip,\n      disabled,\n      className = \"\",\n      children,\n      style,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens, theme } = useTheme();\n\n    // Spin keyframe is used by loading spinner only (injected there)\n\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const [isHovered, setIsHovered] = useState(false);\n    const [isActive, setIsActive] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [showTooltip, setShowTooltip] = useState(false);\n\n    const isDisabled = disabled || loading;\n    const transparentDefault = tokens.colors.interactive.transparentDefault;\n    const transparentHover = tokens.colors.interactive.transparentHover;\n\n    // WCAG AA: compute a button-safe background from accent.primary\n    // If white text (#fff) on the accent bg doesn't meet 4.5:1, darken it proportionally.\n    const safeAccentBg = useMemo(() => {\n      const hex = tokens.colors.accent.primary.replace(\"#\", \"\");\n      if (hex.length < 6) return tokens.colors.accent.primary;\n      const toLinear = (c: number) =>\n        c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n      const r = parseInt(hex.slice(0, 2), 16) / 255;\n      const g = parseInt(hex.slice(2, 4), 16) / 255;\n      const b = parseInt(hex.slice(4, 6), 16) / 255;\n      const L =\n        0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n      if (1.05 / (L + 0.05) >= 4.5) return tokens.colors.accent.primary;\n      // Darken just enough: target L for ~4.7:1 contrast with white\n      const factor = 0.88;\n      const dr = Math.min(255, Math.round(r * 255 * factor));\n      const dg = Math.min(255, Math.round(g * 255 * factor));\n      const db = Math.min(255, Math.round(b * 255 * factor));\n      return `#${dr.toString(16).padStart(2, \"0\")}${dg.toString(16).padStart(2, \"0\")}${db.toString(16).padStart(2, \"0\")}`;\n    }, [tokens.colors.accent.primary]);\n\n    // WCAG AA safe accent for use as foreground text on dark backgrounds\n    const safeAccentFg = useMemo(\n      () => safeAccentText(tokens.colors.accent.primary),\n      [tokens.colors.accent.primary],\n    );\n\n    const sizeConfig = {\n      small: {\n        padding: `${tokens.spacing.xxs} ${tokens.spacing.smd}`,\n        fontSize: tokens.typography.fontSize.xs,\n        height: \"24px\",\n        gap: tokens.spacing.xs,\n        iconSize: 13,\n        borderRadius: tokens.borderRadius.sm,\n      },\n      medium: {\n        padding: `${tokens.spacing.xxs} ${tokens.spacing.md}`,\n        fontSize: tokens.typography.fontSize.sm,\n        height: \"28px\",\n        gap: tokens.spacing.xs,\n        iconSize: 15,\n        borderRadius: tokens.borderRadius.md,\n      },\n      large: {\n        padding: `${tokens.spacing.xs} ${tokens.spacing.lg}`,\n        fontSize: tokens.typography.fontSize.base,\n        height: \"34px\",\n        gap: tokens.spacing.sm,\n        iconSize: 17,\n        borderRadius: tokens.borderRadius.md,\n      },\n    };\n\n    const config = sizeConfig[size];\n\n    // Variant base styles (transparent theme: purple-hue transparent bg, smooth fade on hover)\n    const getVariantStyles = (): React.CSSProperties => {\n      const baseTransition = `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`;\n\n      if (isTransparentTheme && transparentDefault && transparentHover) {\n        switch (variant) {\n          case \"primary\":\n            return {\n              backgroundColor:\n                isHovered && !isDisabled\n                  ? transparentHover\n                  : transparentDefault,\n              color: tokens.colors.text.primary,\n              border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}80` : `${tokens.colors.accent.primary}40`}`,\n              boxShadow:\n                isHovered && !isDisabled\n                  ? `0 0 10px ${tokens.colors.accent.primary}26`\n                  : \"none\",\n              transition: baseTransition,\n              backdropFilter: \"blur(8px)\",\n              WebkitBackdropFilter: \"blur(8px)\",\n            };\n          case \"secondary\":\n            return {\n              backgroundColor:\n                isHovered && !isDisabled\n                  ? `${tokens.colors.accent.primary}15` // Use accent color with opacity instead of transparentHover\n                  : transparentDefault,\n              color: safeAccentFg,\n              border: `1px solid ${isHovered && !isDisabled ? `${tokens.colors.accent.primary}70` : `${tokens.colors.accent.primary}30`}`,\n              boxShadow: \"none\",\n              transition: baseTransition,\n              backdropFilter: \"blur(8px)\",\n              WebkitBackdropFilter: \"blur(8px)\",\n            };\n          case \"borderless\":\n            return {\n              backgroundColor:\n                isHovered && !isDisabled\n                  ? transparentHover\n                  : transparentDefault,\n              color: safeAccentFg,\n              border: \"none\",\n              boxShadow: \"none\",\n              transition: baseTransition,\n              backdropFilter: \"blur(6px)\",\n              WebkitBackdropFilter: \"blur(6px)\",\n            };\n        }\n      }\n\n      switch (variant) {\n        case \"primary\":\n          return {\n            backgroundColor:\n              isHovered && !isDisabled\n                ? tokens.colors.interactive.hover\n                : safeAccentBg,\n            color: \"#ffffff\",\n            border: \"none\",\n            boxShadow:\n              isHovered && !isDisabled\n                ? `0 2px 8px -2px ${tokens.colors.accent.primary}35`\n                : \"none\",\n            transition: baseTransition,\n          };\n\n        case \"secondary\":\n          return {\n            backgroundColor:\n              isHovered && !isDisabled\n                ? `${tokens.colors.accent.primary}12`\n                : \"transparent\",\n            color: isHovered && !isDisabled ? safeAccentFg : safeAccentFg,\n            border: `${tokens.borders.width.medium} solid ${isHovered && !isDisabled ? tokens.colors.accent.primary : `${tokens.colors.accent.primary}80`}`,\n            boxShadow: \"none\",\n            transition: baseTransition,\n          };\n\n        case \"borderless\":\n          return {\n            backgroundColor:\n              isHovered && !isDisabled\n                ? `${tokens.colors.accent.primary}10`\n                : \"transparent\",\n            color: safeAccentFg,\n            border: `${tokens.borders.width.medium} solid transparent`,\n            boxShadow: \"none\",\n            transition: baseTransition,\n          };\n      }\n    };\n\n    const focusStyles: React.CSSProperties = isFocused\n      ? {\n          outline: \"none\",\n          boxShadow: tokens.borders.focusRing.button,\n        }\n      : {};\n\n    const activeStyles: React.CSSProperties =\n      isActive && !isDisabled\n        ? {\n            filter: \"brightness(0.85)\",\n            transform: \"scale(0.98)\",\n            boxShadow: \"none\",\n          }\n        : {};\n\n    const baseStyle: React.CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      gap: config.gap,\n      padding: config.padding,\n      height: config.height,\n      fontSize: config.fontSize,\n      fontWeight: 400,\n      fontFamily: tokens.typography.fontFamily.primary,\n      letterSpacing: \"0.02em\",\n      borderRadius: config.borderRadius,\n      cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n      opacity: isDisabled ? 0.5 : 1,\n      outline: \"none\",\n      textDecoration: \"none\",\n      whiteSpace: \"nowrap\",\n      userSelect: \"none\",\n      width: fullWidth ? \"100%\" : \"auto\",\n      position: \"relative\",\n      ...getVariantStyles(),\n      ...focusStyles,\n      ...activeStyles,\n      ...style,\n    };\n\n    // Loading spinner with smooth animation\n    const spinner = (\n      <svg\n        width={config.iconSize}\n        height={config.iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        style={{\n          animation: \"zendir-spin 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n        }}\n      >\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n          strokeDasharray=\"31.4 31.4\"\n          strokeDashoffset=\"10\"\n          opacity=\"0.9\"\n        />\n        <style>\n          {`@keyframes zendir-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}\n        </style>\n      </svg>\n    );\n\n    // Portal-based tooltip: position fixed relative to viewport, never clipped\n    const internalRef = useRef<HTMLButtonElement>(null);\n    const tooltipNodeRef = useRef<HTMLDivElement>(null);\n    const [tooltipPos, setTooltipPos] = useState<{\n      top: number;\n      left: number;\n    } | null>(null);\n\n    const mergedRef = useCallback(\n      (node: HTMLButtonElement | null) => {\n        (\n          internalRef as React.MutableRefObject<HTMLButtonElement | null>\n        ).current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref)\n          (ref as React.MutableRefObject<HTMLButtonElement | null>).current =\n            node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!showTooltip || !tooltip || !internalRef.current) {\n        setTooltipPos(null);\n        return;\n      }\n      const btn = internalRef.current.getBoundingClientRect();\n      const gap = 8;\n      let top = btn.top - gap;\n      let left = btn.left + btn.width / 2;\n      // Adjust after tooltip renders so we can measure its width\n      if (tooltipNodeRef.current) {\n        const tt = tooltipNodeRef.current.getBoundingClientRect();\n        top = btn.top - tt.height - gap;\n        left = btn.left + (btn.width - tt.width) / 2;\n        if (left < 8) left = 8;\n        if (left + tt.width > window.innerWidth - 8)\n          left = window.innerWidth - tt.width - 8;\n        if (top < 8) top = btn.bottom + gap; // flip below if no room above\n      }\n      setTooltipPos({ top, left });\n    }, [showTooltip, tooltip]);\n\n    const tooltipPortal =\n      tooltip &&\n      showTooltip &&\n      ReactDOM.createPortal(\n        <div\n          ref={tooltipNodeRef}\n          role=\"tooltip\"\n          style={{\n            position: \"fixed\",\n            top: tooltipPos ? tooltipPos.top : -9999,\n            left: tooltipPos ? tooltipPos.left : -9999,\n            padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n            fontSize: \"0.75rem\",\n            fontWeight: 500,\n            color: tokens.colors.text.primary,\n            backgroundColor: tokens.colors.background.elevated,\n            border: tokens.borders.divider,\n            borderRadius: tokens.borderRadius.md,\n            boxShadow: tokens.shadows.md,\n            whiteSpace: \"nowrap\",\n            zIndex: 2147483100,\n            pointerEvents: \"none\",\n            opacity: tooltipPos ? 1 : 0,\n            animation: tooltipPos\n              ? `zendir-btn-tip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both`\n              : \"none\",\n          }}\n        >\n          {tooltip}\n          <style>\n            {`@keyframes zendir-btn-tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }`}\n          </style>\n        </div>,\n        document.body,\n      );\n\n    return (\n      <>\n        <button\n          ref={mergedRef}\n          type=\"button\"\n          disabled={isDisabled}\n          className={classNames(\n            \"zendir-button\",\n            `zendir-button--${variant}`,\n            `zendir-button--${size}`,\n            className,\n          )}\n          style={baseStyle}\n          title={tooltip && !showTooltip ? tooltip : undefined}\n          onMouseDown={() => setIsActive(true)}\n          onMouseUp={() => setIsActive(false)}\n          onMouseEnter={(e) => {\n            setIsHovered(true);\n            setShowTooltip(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setIsHovered(false);\n            setIsActive(false);\n            setShowTooltip(false);\n            onMouseLeave?.(e);\n          }}\n          onFocus={(e) => {\n            setIsFocused(true);\n            onFocus?.(e);\n          }}\n          onBlur={(e) => {\n            setIsFocused(false);\n            onBlur?.(e);\n          }}\n          {...rest}\n        >\n          {loading ? spinner : icon}\n          {children && <span>{children}</span>}\n          {iconEnd && !loading && iconEnd}\n        </button>\n        {tooltipPortal}\n      </>\n    );\n  }),\n);\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAa,SAAS,KACpB,WAA2C,SAAS,OAClD,EACE,UAAU,WACV,OAAO,UACP,MACA,SACA,UAAU,OACV,YAAY,OACZ,SACA,UACA,YAAY,IACZ,UACA,OACA,cACA,cACA,SACA,QACA,GAAG,QAEL,KACoB;CACpB,MAAM,EAAE,QAAQ,UAAU,SAAS;CAInC,MAAM,qBACJ,UAAU,iBACV,UAAU,sBACV,UAAU;CACZ,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,aAAa,YAAY;CAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY;CACrD,MAAM,mBAAmB,OAAO,OAAO,YAAY;CAInD,MAAM,eAAe,cAAc;EACjC,MAAM,MAAM,OAAO,OAAO,OAAO,QAAQ,QAAQ,KAAK,EAAE;EACxD,IAAI,IAAI,SAAS,GAAG,OAAO,OAAO,OAAO,OAAO;EAChD,MAAM,YAAY,MAChB,KAAK,SAAU,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAS,OAAO,GAAG;EAC9D,MAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;EAC1C,MAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;EAC1C,MAAM,IAAI,SAAS,IAAI,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI;EAG1C,IAAI,QADF,QAAS,SAAS,CAAC,IAAI,QAAS,SAAS,CAAC,IAAI,QAAS,SAAS,CAAC,IACnD,QAAS,KAAK,OAAO,OAAO,OAAO,OAAO;EAE1D,MAAM,SAAS;EACf,MAAM,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,MAAM,CAAC;EACrD,MAAM,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,MAAM,CAAC;EACrD,MAAM,KAAK,KAAK,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,MAAM,CAAC;EACrD,OAAO,IAAI,GAAG,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI,GAAG,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI,GAAG,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;CAClH,GAAG,CAAC,OAAO,OAAO,OAAO,OAAO,CAAC;CAGjC,MAAM,eAAe,cACb,eAAe,OAAO,OAAO,OAAO,OAAO,GACjD,CAAC,OAAO,OAAO,OAAO,OAAO,CAC/B;CA6BA,MAAM,SAAS;EA1Bb,OAAO;GACL,SAAS,GAAG,OAAO,QAAQ,IAAI,GAAG,OAAO,QAAQ;GACjD,UAAU,OAAO,WAAW,SAAS;GACrC,QAAQ;GACR,KAAK,OAAO,QAAQ;GACpB,UAAU;GACV,cAAc,OAAO,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,GAAG,OAAO,QAAQ,IAAI,GAAG,OAAO,QAAQ;GACjD,UAAU,OAAO,WAAW,SAAS;GACrC,QAAQ;GACR,KAAK,OAAO,QAAQ;GACpB,UAAU;GACV,cAAc,OAAO,aAAa;EACpC;EACA,OAAO;GACL,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;GAChD,UAAU,OAAO,WAAW,SAAS;GACrC,QAAQ;GACR,KAAK,OAAO,QAAQ;GACpB,UAAU;GACV,cAAc,OAAO,aAAa;EACpC;CAGa,EAAW;CAG1B,MAAM,yBAA8C;EAClD,MAAM,iBAAiB,GAAG,OAAO,UAAU,OAAO,YAAY,OAAO,UAAU,SAAS,OAAO,KAAK,OAAO,UAAU,OAAO;EAE5H,IAAI,sBAAsB,sBAAsB,kBAC9C,QAAQ,SAAR;GACE,KAAK,WACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,mBACA;IACN,OAAO,OAAO,OAAO,KAAK;IAC1B,QAAQ,aAAa,aAAa,CAAC,aAAa,GAAG,OAAO,OAAO,OAAO,QAAQ,MAAM,GAAG,OAAO,OAAO,OAAO,QAAQ;IACtH,WACE,aAAa,CAAC,aACV,YAAY,OAAO,OAAO,OAAO,QAAQ,MACzC;IACN,YAAY;IACZ,gBAAgB;IAChB,sBAAsB;GACxB;GACF,KAAK,aACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,GAAG,OAAO,OAAO,OAAO,QAAQ,MAChC;IACN,OAAO;IACP,QAAQ,aAAa,aAAa,CAAC,aAAa,GAAG,OAAO,OAAO,OAAO,QAAQ,MAAM,GAAG,OAAO,OAAO,OAAO,QAAQ;IACtH,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,sBAAsB;GACxB;GACF,KAAK,cACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,mBACA;IACN,OAAO;IACP,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,gBAAgB;IAChB,sBAAsB;GACxB;EACJ;EAGF,QAAQ,SAAR;GACE,KAAK,WACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,OAAO,OAAO,YAAY,QAC1B;IACN,OAAO;IACP,QAAQ;IACR,WACE,aAAa,CAAC,aACV,kBAAkB,OAAO,OAAO,OAAO,QAAQ,MAC/C;IACN,YAAY;GACd;GAEF,KAAK,aACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,GAAG,OAAO,OAAO,OAAO,QAAQ,MAChC;IACN,OAAO,aAAa,CAAC,aAAa,eAAe;IACjD,QAAQ,GAAG,OAAO,QAAQ,MAAM,OAAO,SAAS,aAAa,CAAC,aAAa,OAAO,OAAO,OAAO,UAAU,GAAG,OAAO,OAAO,OAAO,QAAQ;IAC1I,WAAW;IACX,YAAY;GACd;GAEF,KAAK,cACH,OAAO;IACL,iBACE,aAAa,CAAC,aACV,GAAG,OAAO,OAAO,OAAO,QAAQ,MAChC;IACN,OAAO;IACP,QAAQ,GAAG,OAAO,QAAQ,MAAM,OAAO;IACvC,WAAW;IACX,YAAY;GACd;EACJ;CACF;CAEA,MAAM,cAAmC,YACrC;EACE,SAAS;EACT,WAAW,OAAO,QAAQ,UAAU;CACtC,IACA,CAAC;CAEL,MAAM,eACJ,YAAY,CAAC,aACT;EACE,QAAQ;EACR,WAAW;EACX,WAAW;CACb,IACA,CAAC;CAEP,MAAM,YAAiC;EACrC,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK,OAAO;EACZ,SAAS,OAAO;EAChB,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY;EACZ,YAAY,OAAO,WAAW,WAAW;EACzC,eAAe;EACf,cAAc,OAAO;EACrB,QAAQ,aAAa,gBAAgB;EACrC,SAAS,aAAa,KAAM;EAC5B,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,OAAO,YAAY,SAAS;EAC5B,UAAU;EACV,GAAG,iBAAiB;EACpB,GAAG;EACH,GAAG;EACH,GAAG;CACL;CAGA,MAAM,UACJ,qBAAC,OAAD;EACE,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,SAAQ;EACR,MAAK;EACL,OAAO,EACL,WAAW,yDACb;YAPF,CASE,oBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,iBAAgB;GAChB,kBAAiB;GACjB,SAAQ;EACT,CAAA,GACD,oBAAC,SAAD,EAAA,UACG,iGACI,CAAA,CACJ;;CAIP,MAAM,cAAc,OAA0B,IAAI;CAClD,MAAM,iBAAiB,OAAuB,IAAI;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAG1B,IAAI;CAEd,MAAM,YAAY,aACf,SAAmC;EAClC,YAEE,UAAU;EACZ,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KACP,IAA0D,UACxD;CACN,GACA,CAAC,GAAG,CACN;CAEA,sBAAsB;EACpB,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,YAAY,SAAS;GACpD,cAAc,IAAI;GAClB;EACF;EACA,MAAM,MAAM,YAAY,QAAQ,sBAAsB;EACtD,MAAM,MAAM;EACZ,IAAI,MAAM,IAAI,MAAM;EACpB,IAAI,OAAO,IAAI,OAAO,IAAI,QAAQ;EAElC,IAAI,eAAe,SAAS;GAC1B,MAAM,KAAK,eAAe,QAAQ,sBAAsB;GACxD,MAAM,IAAI,MAAM,GAAG,SAAS;GAC5B,OAAO,IAAI,QAAQ,IAAI,QAAQ,GAAG,SAAS;GAC3C,IAAI,OAAO,GAAG,OAAO;GACrB,IAAI,OAAO,GAAG,QAAQ,OAAO,aAAa,GACxC,OAAO,OAAO,aAAa,GAAG,QAAQ;GACxC,IAAI,MAAM,GAAG,MAAM,IAAI,SAAS;EAClC;EACA,cAAc;GAAE;GAAK;EAAK,CAAC;CAC7B,GAAG,CAAC,aAAa,OAAO,CAAC;CAEzB,MAAM,gBACJ,WACA,eACA,SAAS,aACP,qBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,OAAO;GACL,UAAU;GACV,KAAK,aAAa,WAAW,MAAM;GACnC,MAAM,aAAa,WAAW,OAAO;GACrC,SAAS,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,QAAQ;GAChD,UAAU;GACV,YAAY;GACZ,OAAO,OAAO,OAAO,KAAK;GAC1B,iBAAiB,OAAO,OAAO,WAAW;GAC1C,QAAQ,OAAO,QAAQ;GACvB,cAAc,OAAO,aAAa;GAClC,WAAW,OAAO,QAAQ;GAC1B,YAAY;GACZ,QAAQ;GACR,eAAe;GACf,SAAS,aAAa,IAAI;GAC1B,WAAW,aACP,kBAAkB,OAAO,UAAU,SAAS,KAAK,KAAK,OAAO,UAAU,OAAO,QAAQ,SACtF;EACN;YAtBF,CAwBG,SACD,oBAAC,SAAD,EAAA,UACG,8HACI,CAAA,CACJ;KACL,SAAS,IACX;CAEF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,WAAW,WACT,iBACA,kBAAkB,WAClB,kBAAkB,QAClB,SACF;EACA,OAAO;EACP,OAAO,WAAW,CAAC,cAAc,UAAU,KAAA;EAC3C,mBAAmB,YAAY,IAAI;EACnC,iBAAiB,YAAY,KAAK;EAClC,eAAe,MAAM;GACnB,aAAa,IAAI;GACjB,eAAe,IAAI;GACnB,eAAe,CAAC;EAClB;EACA,eAAe,MAAM;GACnB,aAAa,KAAK;GAClB,YAAY,KAAK;GACjB,eAAe,KAAK;GACpB,eAAe,CAAC;EAClB;EACA,UAAU,MAAM;GACd,aAAa,IAAI;GACjB,UAAU,CAAC;EACb;EACA,SAAS,MAAM;GACb,aAAa,KAAK;GAClB,SAAS,CAAC;EACZ;EACA,GAAI;YAjCN;GAmCG,UAAU,UAAU;GACpB,YAAY,oBAAC,QAAD,EAAO,SAAe,CAAA;GAClC,WAAW,CAAC,WAAW;EAClB;KACP,aACD,EAAA,CAAA;AAEN,CAAC,CACH"}

package/dist/react/core/inputs/Checkbox.d.ts

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
-
 export interface CheckboxProps {
     /** Checkbox or radio */
-    type?: 'checkbox' | 'radio';
+    type?: "checkbox" | "radio";
     /** Checked state */
     checked?: boolean;
     /** Change handler */
@@ -18,7 +17,7 @@ export interface CheckboxProps {
     /** Indeterminate state (checkbox only) */
     indeterminate?: boolean;
     /** Size variant */
-    size?: 'small' | 'medium';
+    size?: "small" | "medium";
     /** Custom className */
     className?: string;
 }

package/dist/react/core/inputs/Checkbox.js

@@ -1,130 +1,142 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useId } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
-const Checkbox = memo(forwardRef(function Checkbox2({
-  type = "checkbox",
-  checked = false,
-  onChange,
-  label,
-  value,
-  name,
-  disabled = false,
-  indeterminate = false,
-  size = "medium",
-  className = ""
-}, ref) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const transparentDefault = tokens.colors.interactive.transparentDefault;
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const id = useId();
-  const sizeConfig = {
-    small: { boxSize: 18, iconSize: 12, targetSize: 24 },
-    medium: { boxSize: 20, iconSize: 14, targetSize: 24 }
-  };
-  const config = sizeConfig[size];
-  const isRadio = type === "radio";
-  const borderRadius = isRadio ? "50%" : tokens.borderRadius.md;
-  const boxStyle = {
-    width: config.boxSize,
-    height: config.boxSize,
-    border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,
-    borderRadius,
-    backgroundColor: checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault ? transparentDefault : "transparent",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,
-    flexShrink: 0,
-    boxShadow: checked ? `0 0 12px ${tokens.colors.accent.primary}40` : focused ? tokens.borders.focusRing.subtle : "none",
-    transform: checked ? "scale(1)" : hovered && !disabled ? "scale(1.05)" : "scale(1)"
-  };
-  const checkIcon = /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: config.iconSize,
-      height: config.iconSize,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "#ffffff",
-      strokeWidth: "3",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: indeterminate ? /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) : /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
-    }
-  );
-  const radioIcon = /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        width: config.iconSize - 4,
-        height: config.iconSize - 4,
-        borderRadius: "50%",
-        backgroundColor: "#ffffff"
-      }
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: id,
-      className: classNames("zendir-checkbox", className),
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: tokens.spacing.sm,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          minWidth: config.targetSize,
-          minHeight: config.targetSize
-        }, children: /* @__PURE__ */ jsx("div", { style: boxStyle, children: checked && (isRadio ? radioIcon : checkIcon) }) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type,
-            id,
-            name,
-            value,
-            checked,
-            disabled,
-            onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked),
-            onFocus: () => setFocused(true),
-            onBlur: () => setFocused(false),
-            style: {
-              position: "absolute",
-              opacity: 0,
-              width: 0,
-              height: 0
-            }
-          }
-        ),
-        label && /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: "0.875rem",
-              color: tokens.colors.text.primary,
-              transition: tokens.animation.fast
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
+import { forwardRef, memo, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/Checkbox.tsx
+/**
+* @zendir/ui - Checkbox Component
+*
+* Checkbox and Radio button following Astro UX Design System with Zendir purple accents.
+*
+* Astro UX Compliance:
+* - Clear visual states
+* - Accessible keyboard support
+* - Indeterminate state for checkbox
+*
+* Zendir Enhancements:
+* - Purple accent when checked
+* - Glow effect on focus
+* - Smooth spring animation
+*
+* @example
+* ```tsx
+* <Checkbox checked={agreed} onChange={setAgreed} label="I agree to terms" />
+* <Checkbox type="radio" name="priority" value="high" label="High Priority" />
+* ```
+*/
+var Checkbox = memo(forwardRef(function Checkbox({ type = "checkbox", checked = false, onChange, label, value, name, disabled = false, indeterminate = false, size = "medium", className = "" }, ref) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const transparentDefault = tokens.colors.interactive.transparentDefault;
+	const [focused, setFocused] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const id = useId();
+	const config = {
+		small: {
+			boxSize: 18,
+			iconSize: 12,
+			targetSize: 24
+		},
+		medium: {
+			boxSize: 20,
+			iconSize: 14,
+			targetSize: 24
+		}
+	}[size];
+	const isRadio = type === "radio";
+	const borderRadius = isRadio ? "50%" : tokens.borderRadius.md;
+	const boxStyle = {
+		width: config.boxSize,
+		height: config.boxSize,
+		border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,
+		borderRadius,
+		backgroundColor: checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault ? transparentDefault : "transparent",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,
+		flexShrink: 0,
+		boxShadow: checked ? `0 0 12px ${tokens.colors.accent.primary}40` : focused ? tokens.borders.focusRing.subtle : "none",
+		transform: checked ? "scale(1)" : hovered && !disabled ? "scale(1.05)" : "scale(1)"
+	};
+	const checkIcon = /* @__PURE__ */ jsx("svg", {
+		width: config.iconSize,
+		height: config.iconSize,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "#ffffff",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: indeterminate ? /* @__PURE__ */ jsx("line", {
+			x1: "5",
+			y1: "12",
+			x2: "19",
+			y2: "12"
+		}) : /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+	});
+	const radioIcon = /* @__PURE__ */ jsx("div", { style: {
+		width: config.iconSize - 4,
+		height: config.iconSize - 4,
+		borderRadius: "50%",
+		backgroundColor: "#ffffff"
+	} });
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: classNames("zendir-checkbox", className),
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: tokens.spacing.sm,
+			cursor: disabled ? "not-allowed" : "pointer",
+			opacity: disabled ? .5 : 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					minWidth: config.targetSize,
+					minHeight: config.targetSize
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: boxStyle,
+					children: checked && (isRadio ? radioIcon : checkIcon)
+				})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				type,
+				id,
+				name,
+				value,
+				checked,
+				disabled,
+				onChange: (e) => onChange?.(e.target.checked),
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				style: {
+					position: "absolute",
+					opacity: 0,
+					width: 0,
+					height: 0
+				}
+			}),
+			label && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "0.875rem",
+					color: tokens.colors.text.primary,
+					transition: tokens.animation.fast
+				},
+				children: label
+			})
+		]
+	});
 }));
-export {
-  Checkbox
-};
-//# sourceMappingURL=Checkbox.js.map
+//#endregion
+export { Checkbox, Checkbox as default };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/react/core/inputs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/react/core/inputs/Checkbox.tsx"],"sourcesContent":["/**\n * @zendir/ui - Checkbox Component\n * \n * Checkbox and Radio button following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Clear visual states\n * - Accessible keyboard support\n * - Indeterminate state for checkbox\n * \n * Zendir Enhancements:\n * - Purple accent when checked\n * - Glow effect on focus\n * - Smooth spring animation\n * \n * @example\n * ```tsx\n * <Checkbox checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\n * <Checkbox type=\"radio\" name=\"priority\" value=\"high\" label=\"High Priority\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useId, useState } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport interface CheckboxProps {\n  /** Checkbox or radio */\n  type?: 'checkbox' | 'radio';\n  /** Checked state */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Label text */\n  label?: string;\n  /** Value (for radio groups) */\n  value?: string;\n  /** Name (for radio groups) */\n  name?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /** Custom className */\n  className?: string;\n}\n\nexport const Checkbox = memo(forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  {\n    type = 'checkbox',\n    checked = false,\n    onChange,\n    label,\n    value,\n    name,\n    disabled = false,\n    indeterminate = false,\n    size = 'medium',\n    className = '',\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const [focused, setFocused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const id = useId();\n  \n  // WCAG 2.5.8: minimum 24×24 CSS px target size\n  const sizeConfig = {\n    small: { boxSize: 18, iconSize: 12, targetSize: 24 },\n    medium: { boxSize: 20, iconSize: 14, targetSize: 24 },\n  };\n  const config = sizeConfig[size];\n  \n  const isRadio = type === 'radio';\n  const borderRadius = isRadio ? '50%' : tokens.borderRadius.md;\n  \n  const boxStyle: React.CSSProperties = {\n    width: config.boxSize,\n    height: config.boxSize,\n    border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,\n    borderRadius,\n    backgroundColor: checked ? tokens.colors.accent.primary : (isTransparentTheme && transparentDefault ? transparentDefault : 'transparent'),\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\n    flexShrink: 0,\n    boxShadow: checked \n      ? `0 0 12px ${tokens.colors.accent.primary}40` \n      : focused \n      ? tokens.borders.focusRing.subtle\n      : 'none',\n    transform: checked ? 'scale(1)' : hovered && !disabled ? 'scale(1.05)' : 'scale(1)',\n  };\n  \n  // Check mark for checkbox\n  const checkIcon = (\n    <svg\n      width={config.iconSize}\n      height={config.iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"#ffffff\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {indeterminate ? (\n        <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n      ) : (\n        <polyline points=\"20 6 9 17 4 12\" />\n      )}\n    </svg>\n  );\n  \n  // Dot for radio\n  const radioIcon = (\n    <div\n      style={{\n        width: config.iconSize - 4,\n        height: config.iconSize - 4,\n        borderRadius: '50%',\n        backgroundColor: '#ffffff',\n      }}\n    />\n  );\n  \n  return (\n    <label\n      htmlFor={id}\n      className={classNames('zendir-checkbox', className)}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: tokens.spacing.sm,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        opacity: disabled ? 0.5 : 1,\n      }}\n    >\n      {/* Touch target wrapper — ensures WCAG 2.5.8 24px minimum */}\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: config.targetSize,\n        minHeight: config.targetSize,\n      }}>\n        <div style={boxStyle}>\n          {checked && (isRadio ? radioIcon : checkIcon)}\n        </div>\n      </div>\n      \n      <input\n        ref={ref}\n        type={type}\n        id={id}\n        name={name}\n        value={value}\n        checked={checked}\n        disabled={disabled}\n        onChange={(e) => onChange?.(e.target.checked)}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        style={{\n          position: 'absolute',\n          opacity: 0,\n          width: 0,\n          height: 0,\n        }}\n      />\n      \n      {label && (\n        <span\n          style={{\n            fontSize: '0.875rem',\n            color: tokens.colors.text.primary,\n            transition: tokens.animation.fast,\n          }}\n        >\n          {label}\n        </span>\n      )}\n    </label>\n  );\n}));\n\nexport default Checkbox;\n"],"names":["Checkbox"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../src/react/core/inputs/Checkbox.tsx"],"sourcesContent":["/**\n * @zendir/ui - Checkbox Component\n *\n * Checkbox and Radio button following Astro UX Design System with Zendir purple accents.\n *\n * Astro UX Compliance:\n * - Clear visual states\n * - Accessible keyboard support\n * - Indeterminate state for checkbox\n *\n * Zendir Enhancements:\n * - Purple accent when checked\n * - Glow effect on focus\n * - Smooth spring animation\n *\n * @example\n * ```tsx\n * <Checkbox checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\n * <Checkbox type=\"radio\" name=\"priority\" value=\"high\" label=\"High Priority\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useId, useState } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\n\nexport interface CheckboxProps {\n  /** Checkbox or radio */\n  type?: \"checkbox\" | \"radio\";\n  /** Checked state */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Label text */\n  label?: string;\n  /** Value (for radio groups) */\n  value?: string;\n  /** Name (for radio groups) */\n  name?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n  /** Size variant */\n  size?: \"small\" | \"medium\";\n  /** Custom className */\n  className?: string;\n}\n\nexport const Checkbox = memo(\n  forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n    {\n      type = \"checkbox\",\n      checked = false,\n      onChange,\n      label,\n      value,\n      name,\n      disabled = false,\n      indeterminate = false,\n      size = \"medium\",\n      className = \"\",\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens, theme } = useTheme();\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const transparentDefault = tokens.colors.interactive.transparentDefault;\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const id = useId();\n\n    // WCAG 2.5.8: minimum 24×24 CSS px target size\n    const sizeConfig = {\n      small: { boxSize: 18, iconSize: 12, targetSize: 24 },\n      medium: { boxSize: 20, iconSize: 14, targetSize: 24 },\n    };\n    const config = sizeConfig[size];\n\n    const isRadio = type === \"radio\";\n    const borderRadius = isRadio ? \"50%\" : tokens.borderRadius.md;\n\n    const boxStyle: React.CSSProperties = {\n      width: config.boxSize,\n      height: config.boxSize,\n      border: `${tokens.borders.width.thick} solid ${checked ? tokens.colors.accent.primary : hovered && !disabled ? `${tokens.colors.accent.primary}60` : tokens.colors.border.muted}`,\n      borderRadius,\n      backgroundColor: checked\n        ? tokens.colors.accent.primary\n        : isTransparentTheme && transparentDefault\n          ? transparentDefault\n          : \"transparent\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\n      flexShrink: 0,\n      boxShadow: checked\n        ? `0 0 12px ${tokens.colors.accent.primary}40`\n        : focused\n          ? tokens.borders.focusRing.subtle\n          : \"none\",\n      transform: checked\n        ? \"scale(1)\"\n        : hovered && !disabled\n          ? \"scale(1.05)\"\n          : \"scale(1)\",\n    };\n\n    // Check mark for checkbox\n    const checkIcon = (\n      <svg\n        width={config.iconSize}\n        height={config.iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"#ffffff\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        {indeterminate ? (\n          <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n        ) : (\n          <polyline points=\"20 6 9 17 4 12\" />\n        )}\n      </svg>\n    );\n\n    // Dot for radio\n    const radioIcon = (\n      <div\n        style={{\n          width: config.iconSize - 4,\n          height: config.iconSize - 4,\n          borderRadius: \"50%\",\n          backgroundColor: \"#ffffff\",\n        }}\n      />\n    );\n\n    return (\n      <label\n        htmlFor={id}\n        className={classNames(\"zendir-checkbox\", className)}\n        onMouseEnter={() => setHovered(true)}\n        onMouseLeave={() => setHovered(false)}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.sm,\n          cursor: disabled ? \"not-allowed\" : \"pointer\",\n          opacity: disabled ? 0.5 : 1,\n        }}\n      >\n        {/* Touch target wrapper — ensures WCAG 2.5.8 24px minimum */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            minWidth: config.targetSize,\n            minHeight: config.targetSize,\n          }}\n        >\n          <div style={boxStyle}>\n            {checked && (isRadio ? radioIcon : checkIcon)}\n          </div>\n        </div>\n\n        <input\n          ref={ref}\n          type={type}\n          id={id}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={(e) => onChange?.(e.target.checked)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          style={{\n            position: \"absolute\",\n            opacity: 0,\n            width: 0,\n            height: 0,\n          }}\n        />\n\n        {label && (\n          <span\n            style={{\n              fontSize: \"0.875rem\",\n              color: tokens.colors.text.primary,\n              transition: tokens.animation.fast,\n            }}\n          >\n            {label}\n          </span>\n        )}\n      </label>\n    );\n  }),\n);\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/react/core/inputs/Input.d.ts

@@ -1,10 +1,9 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../../utils';
-
-export type InputSize = 'small' | 'medium' | 'large';
+export type InputSize = "small" | "medium" | "large";
 /** Label placement relative to the input field */
-export type LabelPlacement = 'above' | 'outlined';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export type LabelPlacement = "above" | "outlined";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** Label text or ReactNode (supports rich content like tooltip icons) */
     label?: React.ReactNode;
     /** Helper text below input */