@zendir/ui 0.4.1 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/react/core/inputs/Select.tsx"],"sourcesContent":["/**\n * @zendir/ui - Select Component\n * \n * Dropdown select following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Select\n *   label=\"Spacecraft\"\n *   options={[\n *     { value: 'sat-001', label: 'Explorer-1' },\n *     { value: 'sat-002', label: 'Voyager-2' },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n * />\n * ```\n */\n\nimport React, { memo, forwardRef, useState, useId, useRef, useEffect, useLayoutEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\nimport type { LabelPlacement } from './Input';\nimport { useBreakpoint } from '../layout/useBreakpoint';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Options array */\n  options: SelectOption[];\n  /** Selected value */\n  value?: string;\n  /** Change handler */\n  onChange?: (value: string) => void;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Helper text */\n  helperText?: string;\n  /** Error message */\n  error?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium' | 'large';\n  /** Custom className */\n  className?: string;\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n}\n\nexport const Select = memo(forwardRef<HTMLDivElement, SelectProps>(function Select(\n  {\n    label,\n    options,\n    value,\n    onChange,\n    placeholder = 'Select...',\n    helperText,\n    error,\n    disabled = false,\n    fullWidth = false,\n    size = 'medium',\n    className = '',\n    labelPlacement = 'outlined',\n    required,\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const [isOpen, setIsOpen] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [dropdownRect, setDropdownRect] = useState<{ top: number; left: number; width: number; openUp?: boolean } | null>(null);\n  const selectRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLUListElement>(null);\n  const generatedId = useId();\n  \n  // Transparent theme detection (purple-hue transparent bg)\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const _transparentDefault = tokens.colors.interactive.transparentDefault;\n  const _transparentInputBg = tokens.colors.interactive.transparentInputBg;\n  \n  const hasError = !!error;\n  const selectedOption = options.find(o => o.value === value);\n  const isOutlined = labelPlacement === 'outlined';\n  \n  const sizeConfig = {\n    small: { height: tokens.elementSize.sm, fontSize: tokens.typography.fontSize.xs, padding: tokens.spacing.sm, inputPaddingLeft: 8 },\n    medium: { height: tokens.elementSize.md, fontSize: tokens.typography.fontSize.sm, padding: tokens.spacing.md, inputPaddingLeft: 16 },\n    large: { height: tokens.elementSize.lg, fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.lg, inputPaddingLeft: 24 },\n  };\n  const config = sizeConfig[size];\n  const controlHeight = isMobile ? '44px' : config.height;\n  const optionRowHeight = isMobile\n    ? 40\n    : (size === 'small' ? 30 : size === 'medium' ? 34 : 38);\n  \n  // Position dropdown when open (for portal) - keep in viewport\n  const DROPDOWN_MAX_HEIGHT = 200;\n  const GAP = 4;\n  useLayoutEffect(() => {\n    if (!isOpen || !triggerRef.current) {\n      setDropdownRect(null);\n      return;\n    }\n    const update = () => {\n      if (triggerRef.current) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        const spaceBelow = window.innerHeight - rect.bottom - GAP;\n        const spaceAbove = rect.top - GAP;\n        const openUp = spaceBelow < Math.min(DROPDOWN_MAX_HEIGHT, options.length * optionRowHeight) && spaceAbove > spaceBelow;\n        setDropdownRect({\n          top: openUp ? rect.top - GAP : rect.bottom + GAP,\n          left: rect.left,\n          width: rect.width,\n          openUp,\n        });\n      }\n    };\n    update();\n    window.addEventListener('scroll', update, true);\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('scroll', update, true);\n      window.removeEventListener('resize', update);\n    };\n  }, [isOpen, options.length, optionRowHeight]);\n\n  // Close dropdown on outside click (include portaled dropdown)\n  useEffect(() => {\n    if (!isOpen) return;\n    \n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node;\n      // Check if click is inside the trigger or the portaled dropdown\n      if (\n        selectRef.current?.contains(target) ||\n        dropdownRef.current?.contains(target)\n      ) {\n        return;\n      }\n      setIsOpen(false);\n    };\n    // Use click instead of mousedown to avoid race condition with option onClick\n    document.addEventListener('click', handleClickOutside, true);\n    return () => document.removeEventListener('click', handleClickOutside, true);\n  }, [isOpen]);\n  \n  const computedBorder = hasError\n    ? tokens.borders.input.error\n    : focused || isOpen\n    ? tokens.borders.input.focus\n    : tokens.borders.input.default;\n  \n  // Background for the outlined label \"notch\"\n  const labelBg = isTransparentTheme\n    ? tokens.colors.background.base\n    : tokens.colors.background.surface;\n  \n  // Outlined label font sizes\n  const outlinedLabelSizeMap = { small: '0.625rem', medium: '0.6875rem', large: '0.75rem' };\n  const outlinedLabelLeftMap = { small: '2px', medium: '10px', large: '18px' };\n  \n  // Shared label content\n  const labelContent = (\n    <>\n      {label}\n      {required && (\n        <span style={{ color: tokens.colors.status.critical, marginLeft: '2px' }}>*</span>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('zendir-select-wrapper', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.xs,\n        width: fullWidth ? '100%' : undefined,\n      }}\n    >\n      {/* Label: 'above' variant */}\n      {label && !isOutlined && (\n        <span\n          id={`${generatedId}-label`}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.secondary,\n          }}\n        >\n          {labelContent}\n        </span>\n      )}\n      \n      <div ref={selectRef} style={{ position: 'relative' }}>\n        {/* Label: 'outlined' variant — positioned on the trigger border */}\n        {label && isOutlined && (\n          <span\n            id={`${generatedId}-label`}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: outlinedLabelLeftMap[size],\n              transform: 'translateY(-50%)',\n              backgroundColor: labelBg,\n              padding: `0 ${tokens.spacing.xs}`,\n              fontSize: outlinedLabelSizeMap[size],\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: focused || isOpen\n                ? (hasError ? tokens.colors.status.critical : tokens.colors.accent.primary)\n                : hasError\n                  ? tokens.colors.status.critical\n                  : tokens.colors.text.secondary,\n              zIndex: 1,\n              pointerEvents: 'none',\n              transition: `color ${tokens.animation.fast}`,\n              lineHeight: 1.2,\n              whiteSpace: 'nowrap',\n              letterSpacing: '0.01em',\n            }}\n          >\n            {labelContent}\n          </span>\n        )}\n        \n        <button\n          ref={triggerRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n          aria-labelledby={label ? `${generatedId}-label` : undefined}\n          aria-describedby={(helperText || error) ? `${generatedId}-hint` : undefined}\n          style={{\n            width: '100%',\n            height: controlHeight,\n            padding: `0 ${config.padding}`,\n            fontSize: config.fontSize,\n            fontFamily: tokens.typography.fontFamily.primary,\n            color: selectedOption ? tokens.colors.text.primary : tokens.colors.text.muted,\n            backgroundColor: isTransparentTheme ? 'rgba(10, 15, 25, 0.4)' : tokens.colors.background.surface,\n            border: computedBorder,\n            borderRadius: tokens.borderRadius.md,\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.5 : 1,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            textAlign: 'left',\n            outline: 'none',\n            transition: `border-color ${tokens.animation.fast}`,\n            boxShadow: focused || isOpen ? tokens.borders.focusRing.default : 'none',\n          }}\n        >\n          <span>{selectedOption?.label ?? placeholder}</span>\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill={tokens.colors.text.muted}\n            style={{\n              transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',\n              transition: `transform ${tokens.animation.fast}`,\n            }}\n          >\n            <path d=\"M7 10l5 5 5-5z\" />\n          </svg>\n        </button>\n        \n        {isOpen && dropdownRect &&\n          createPortal(\n            <ul\n              ref={dropdownRef}\n              role=\"listbox\"\n              style={{\n                position: 'fixed',\n                top: dropdownRect.openUp ? undefined : dropdownRect.top,\n                bottom: dropdownRect.openUp ? window.innerHeight - dropdownRect.top : undefined,\n                left: dropdownRect.left,\n                width: dropdownRect.width,\n                padding: tokens.spacing.xs,\n                backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.12)' : tokens.colors.background.elevated,\n                backdropFilter: isTransparentTheme ? 'blur(12px)' : undefined,\n                WebkitBackdropFilter: isTransparentTheme ? 'blur(12px)' : undefined,\n                border: tokens.borders.dropdown,\n                borderRadius: tokens.borderRadius.md,\n                boxShadow: `${tokens.shadows.lg}, 0 0 30px ${tokens.colors.accent.primary}10`,\n                zIndex: 10000,\n                maxHeight: '200px',\n                overflowY: 'auto',\n                listStyle: 'none',\n                margin: 0,\n                animation: `zendir-dropdown ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n              }}\n            >\n              <style>{`@keyframes zendir-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }`}</style>\n              {options.map((option) => (\n                <li\n                  key={option.value}\n                  role=\"option\"\n                  aria-selected={option.value === value}\n                  tabIndex={option.disabled ? -1 : 0}\n                  onMouseDown={(e) => {\n                    // Prevent the document click handler from firing before we process this\n                    e.stopPropagation();\n                  }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!option.disabled) {\n                      onChange?.(option.value);\n                      setIsOpen(false);\n                    }\n                  }}\n                  onKeyDown={(e) => {\n                    if (option.disabled) return;\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      onChange?.(option.value);\n                      setIsOpen(false);\n                    }\n                  }}\n                  style={{\n                    padding: `0 ${tokens.spacing.md}`,\n                    height: optionRowHeight,\n                    minHeight: optionRowHeight,\n                    display: 'flex',\n                    alignItems: 'center',\n                    fontSize: config.fontSize,\n                    lineHeight: 1.2,\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    color: option.disabled ? tokens.colors.text.muted : tokens.colors.text.primary,\n                    backgroundColor: option.value === value ? `${tokens.colors.accent.primary}15` : 'transparent',\n                    borderRadius: tokens.borderRadius.sm,\n                    cursor: option.disabled ? 'not-allowed' : 'pointer',\n                    opacity: option.disabled ? 0.5 : 1,\n                    transition: `background-color ${tokens.animation.fast}`,\n                  }}\n                  onMouseEnter={(e) => {\n                    if (!option.disabled) {\n                      e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}10`;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor =\n                      option.value === value ? `${tokens.colors.accent.primary}15` : 'transparent';\n                  }}\n                >\n                  {option.label}\n                </li>\n              ))}\n            </ul>,\n            document.body\n          )}\n      </div>\n      \n      {(helperText || error) && (\n        <span\n          id={`${generatedId}-hint`}\n          role={hasError ? 'alert' : undefined}\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: hasError ? tokens.colors.status.critical : tokens.colors.text.muted,\n          }}\n        >\n          {error || helperText}\n        </span>\n      )}\n    </div>\n  );\n}));\n\nexport default Select;\n"],"names":["Select"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../../src/react/core/inputs/Select.tsx"],"sourcesContent":["/**\n * @zendir/ui - Select Component\n *\n * Dropdown select following Astro UX Design System.\n *\n * @example\n * ```tsx\n * <Select\n *   label=\"Spacecraft\"\n *   options={[\n *     { value: 'sat-001', label: 'Explorer-1' },\n *     { value: 'sat-002', label: 'Voyager-2' },\n *   ]}\n *   value={selected}\n *   onChange={setSelected}\n * />\n * ```\n */\n\nimport React, {\n  memo,\n  forwardRef,\n  useState,\n  useId,\n  useRef,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\nimport type { LabelPlacement } from \"./Input\";\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps {\n  /** Label text or ReactNode (supports rich content like tooltip icons) */\n  label?: React.ReactNode;\n  /** Options array */\n  options: SelectOption[];\n  /** Selected value */\n  value?: string;\n  /** Change handler */\n  onChange?: (value: string) => void;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Helper text */\n  helperText?: string;\n  /** Error message */\n  error?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Size variant */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Custom className */\n  className?: string;\n  /**\n   * Label placement style.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n  /** Required indicator */\n  required?: boolean;\n}\n\nexport const Select = memo(\n  forwardRef<HTMLDivElement, SelectProps>(function Select(\n    {\n      label,\n      options,\n      value,\n      onChange,\n      placeholder = \"Select...\",\n      helperText,\n      error,\n      disabled = false,\n      fullWidth = false,\n      size = \"medium\",\n      className = \"\",\n      labelPlacement = \"outlined\",\n      required,\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens, theme } = useTheme();\n    const { isMobile } = useBreakpoint();\n    const [isOpen, setIsOpen] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [dropdownRect, setDropdownRect] = useState<{\n      top: number;\n      left: number;\n      width: number;\n      openUp?: boolean;\n    } | null>(null);\n    const selectRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const dropdownRef = useRef<HTMLUListElement>(null);\n    const generatedId = useId();\n\n    // Transparent theme detection (purple-hue transparent bg)\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const _transparentDefault = tokens.colors.interactive.transparentDefault;\n    const _transparentInputBg = tokens.colors.interactive.transparentInputBg;\n\n    const hasError = !!error;\n    const selectedOption = options.find((o) => o.value === value);\n    const isOutlined = labelPlacement === \"outlined\";\n\n    const sizeConfig = {\n      small: {\n        height: tokens.elementSize.sm,\n        fontSize: tokens.typography.fontSize.xs,\n        padding: tokens.spacing.sm,\n        inputPaddingLeft: 8,\n      },\n      medium: {\n        height: tokens.elementSize.md,\n        fontSize: tokens.typography.fontSize.sm,\n        padding: tokens.spacing.md,\n        inputPaddingLeft: 16,\n      },\n      large: {\n        height: tokens.elementSize.lg,\n        fontSize: tokens.typography.fontSize.base,\n        padding: tokens.spacing.lg,\n        inputPaddingLeft: 24,\n      },\n    };\n    const config = sizeConfig[size];\n    const controlHeight = isMobile ? \"44px\" : config.height;\n    const optionRowHeight = isMobile\n      ? 40\n      : size === \"small\"\n        ? 30\n        : size === \"medium\"\n          ? 34\n          : 38;\n\n    // Position dropdown when open (for portal) - keep in viewport\n    const DROPDOWN_MAX_HEIGHT = 200;\n    const GAP = 4;\n    useLayoutEffect(() => {\n      if (!isOpen || !triggerRef.current) {\n        setDropdownRect(null);\n        return;\n      }\n      const update = () => {\n        if (triggerRef.current) {\n          const rect = triggerRef.current.getBoundingClientRect();\n          const spaceBelow = window.innerHeight - rect.bottom - GAP;\n          const spaceAbove = rect.top - GAP;\n          const openUp =\n            spaceBelow <\n              Math.min(DROPDOWN_MAX_HEIGHT, options.length * optionRowHeight) &&\n            spaceAbove > spaceBelow;\n          setDropdownRect({\n            top: openUp ? rect.top - GAP : rect.bottom + GAP,\n            left: rect.left,\n            width: rect.width,\n            openUp,\n          });\n        }\n      };\n      update();\n      window.addEventListener(\"scroll\", update, true);\n      window.addEventListener(\"resize\", update);\n      return () => {\n        window.removeEventListener(\"scroll\", update, true);\n        window.removeEventListener(\"resize\", update);\n      };\n    }, [isOpen, options.length, optionRowHeight]);\n\n    // Close dropdown on outside click (include portaled dropdown)\n    useEffect(() => {\n      if (!isOpen) return;\n\n      const handleClickOutside = (e: MouseEvent) => {\n        const target = e.target as Node;\n        // Check if click is inside the trigger or the portaled dropdown\n        if (\n          selectRef.current?.contains(target) ||\n          dropdownRef.current?.contains(target)\n        ) {\n          return;\n        }\n        setIsOpen(false);\n      };\n      // Use click instead of mousedown to avoid race condition with option onClick\n      document.addEventListener(\"click\", handleClickOutside, true);\n      return () =>\n        document.removeEventListener(\"click\", handleClickOutside, true);\n    }, [isOpen]);\n\n    const computedBorder = hasError\n      ? tokens.borders.input.error\n      : focused || isOpen\n        ? tokens.borders.input.focus\n        : tokens.borders.input.default;\n\n    // Background for the outlined label \"notch\"\n    const labelBg = isTransparentTheme\n      ? tokens.colors.background.base\n      : tokens.colors.background.surface;\n\n    // Outlined label font sizes\n    const outlinedLabelSizeMap = {\n      small: \"0.625rem\",\n      medium: \"0.6875rem\",\n      large: \"0.75rem\",\n    };\n    const outlinedLabelLeftMap = {\n      small: \"2px\",\n      medium: \"10px\",\n      large: \"18px\",\n    };\n\n    // Shared label content\n    const labelContent = (\n      <>\n        {label}\n        {required && (\n          <span\n            style={{ color: tokens.colors.status.critical, marginLeft: \"2px\" }}\n          >\n            *\n          </span>\n        )}\n      </>\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={classNames(\"zendir-select-wrapper\", className)}\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: tokens.spacing.xs,\n          width: fullWidth ? \"100%\" : undefined,\n        }}\n      >\n        {/* Label: 'above' variant */}\n        {label && !isOutlined && (\n          <span\n            id={`${generatedId}-label`}\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              fontWeight: tokens.typography.fontWeight.medium,\n              color: tokens.colors.text.secondary,\n            }}\n          >\n            {labelContent}\n          </span>\n        )}\n\n        <div ref={selectRef} style={{ position: \"relative\" }}>\n          {/* Label: 'outlined' variant — positioned on the trigger border */}\n          {label && isOutlined && (\n            <span\n              id={`${generatedId}-label`}\n              style={{\n                position: \"absolute\",\n                top: 0,\n                left: outlinedLabelLeftMap[size],\n                transform: \"translateY(-50%)\",\n                backgroundColor: labelBg,\n                padding: `0 ${tokens.spacing.xs}`,\n                fontSize: outlinedLabelSizeMap[size],\n                fontWeight: tokens.typography.fontWeight.medium,\n                color:\n                  focused || isOpen\n                    ? hasError\n                      ? tokens.colors.status.critical\n                      : tokens.colors.accent.primary\n                    : hasError\n                      ? tokens.colors.status.critical\n                      : tokens.colors.text.secondary,\n                zIndex: 1,\n                pointerEvents: \"none\",\n                transition: `color ${tokens.animation.fast}`,\n                lineHeight: 1.2,\n                whiteSpace: \"nowrap\",\n                letterSpacing: \"0.01em\",\n              }}\n            >\n              {labelContent}\n            </span>\n          )}\n\n          <button\n            ref={triggerRef}\n            type=\"button\"\n            disabled={disabled}\n            onClick={() => !disabled && setIsOpen(!isOpen)}\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isOpen}\n            aria-labelledby={label ? `${generatedId}-label` : undefined}\n            aria-describedby={\n              helperText || error ? `${generatedId}-hint` : undefined\n            }\n            style={{\n              width: \"100%\",\n              height: controlHeight,\n              padding: `0 ${config.padding}`,\n              fontSize: config.fontSize,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: selectedOption\n                ? tokens.colors.text.primary\n                : tokens.colors.text.muted,\n              backgroundColor: isTransparentTheme\n                ? \"rgba(10, 15, 25, 0.4)\"\n                : tokens.colors.background.surface,\n              border: computedBorder,\n              borderRadius: tokens.borderRadius.md,\n              cursor: disabled ? \"not-allowed\" : \"pointer\",\n              opacity: disabled ? 0.5 : 1,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              textAlign: \"left\",\n              outline: \"none\",\n              transition: `border-color ${tokens.animation.fast}`,\n              boxShadow:\n                focused || isOpen ? tokens.borders.focusRing.default : \"none\",\n            }}\n          >\n            <span>{selectedOption?.label ?? placeholder}</span>\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill={tokens.colors.text.muted}\n              style={{\n                transform: isOpen ? \"rotate(180deg)\" : \"rotate(0)\",\n                transition: `transform ${tokens.animation.fast}`,\n              }}\n            >\n              <path d=\"M7 10l5 5 5-5z\" />\n            </svg>\n          </button>\n\n          {isOpen &&\n            dropdownRect &&\n            createPortal(\n              <ul\n                ref={dropdownRef}\n                role=\"listbox\"\n                style={{\n                  position: \"fixed\",\n                  top: dropdownRect.openUp ? undefined : dropdownRect.top,\n                  bottom: dropdownRect.openUp\n                    ? window.innerHeight - dropdownRect.top\n                    : undefined,\n                  left: dropdownRect.left,\n                  width: dropdownRect.width,\n                  padding: tokens.spacing.xs,\n                  backgroundColor: isTransparentTheme\n                    ? `${tokens.colors.accent.primary}1f`\n                    : tokens.colors.background.elevated,\n                  backdropFilter: isTransparentTheme ? \"blur(12px)\" : undefined,\n                  WebkitBackdropFilter: isTransparentTheme\n                    ? \"blur(12px)\"\n                    : undefined,\n                  border: tokens.borders.dropdown,\n                  borderRadius: tokens.borderRadius.md,\n                  boxShadow: `${tokens.shadows.lg}, 0 0 30px ${tokens.colors.accent.primary}10`,\n                  zIndex: 10000,\n                  maxHeight: \"200px\",\n                  overflowY: \"auto\",\n                  listStyle: \"none\",\n                  margin: 0,\n                  animation: `zendir-dropdown ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n                }}\n              >\n                <style>{`@keyframes zendir-dropdown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }`}</style>\n                {options.map((option) => (\n                  <li\n                    key={option.value}\n                    role=\"option\"\n                    aria-selected={option.value === value}\n                    tabIndex={option.disabled ? -1 : 0}\n                    onMouseDown={(e) => {\n                      // Prevent the document click handler from firing before we process this\n                      e.stopPropagation();\n                    }}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      if (!option.disabled) {\n                        onChange?.(option.value);\n                        setIsOpen(false);\n                      }\n                    }}\n                    onKeyDown={(e) => {\n                      if (option.disabled) return;\n                      if (e.key === \"Enter\" || e.key === \" \") {\n                        e.preventDefault();\n                        onChange?.(option.value);\n                        setIsOpen(false);\n                      }\n                    }}\n                    style={{\n                      padding: `0 ${tokens.spacing.md}`,\n                      height: optionRowHeight,\n                      minHeight: optionRowHeight,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      fontSize: config.fontSize,\n                      lineHeight: 1.2,\n                      whiteSpace: \"nowrap\",\n                      overflow: \"hidden\",\n                      textOverflow: \"ellipsis\",\n                      color: option.disabled\n                        ? tokens.colors.text.muted\n                        : tokens.colors.text.primary,\n                      backgroundColor:\n                        option.value === value\n                          ? `${tokens.colors.accent.primary}15`\n                          : \"transparent\",\n                      borderRadius: tokens.borderRadius.sm,\n                      cursor: option.disabled ? \"not-allowed\" : \"pointer\",\n                      opacity: option.disabled ? 0.5 : 1,\n                      transition: `background-color ${tokens.animation.fast}`,\n                    }}\n                    onMouseEnter={(e) => {\n                      if (!option.disabled) {\n                        e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}10`;\n                      }\n                    }}\n                    onMouseLeave={(e) => {\n                      e.currentTarget.style.backgroundColor =\n                        option.value === value\n                          ? `${tokens.colors.accent.primary}15`\n                          : \"transparent\";\n                    }}\n                  >\n                    {option.label}\n                  </li>\n                ))}\n              </ul>,\n              document.body,\n            )}\n        </div>\n\n        {(helperText || error) && (\n          <span\n            id={`${generatedId}-hint`}\n            role={hasError ? \"alert\" : undefined}\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              color: hasError\n                ? tokens.colors.status.critical\n                : tokens.colors.text.muted,\n            }}\n          >\n            {error || helperText}\n          </span>\n        )}\n      </div>\n    );\n  }),\n);\n\nexport default Select;\n"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface ToggleProps {
     /** Checked state */
     checked?: boolean;
@@ -8,11 +7,11 @@ export interface ToggleProps {
     /** Label text */
     label?: string;
     /** Label position */
-    labelPosition?: 'left' | 'right';
+    labelPosition?: "left" | "right";
     /** Disabled state */
     disabled?: boolean;
     /** Size variant */
-    size?: 'small' | 'medium';
+    size?: "small" | "medium";
     /** Custom className */
     className?: string;
     /** Name attribute */

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

@@ -1,151 +1,145 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useId } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
-const Toggle = memo(forwardRef(function Toggle2({
-  checked = false,
-  onChange,
-  label,
-  labelPosition = "right",
-  disabled = false,
-  size = "medium",
-  className = "",
-  name
-}, ref) {
-  const { tokens, theme } = useTheme();
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const id = useId();
-  const sizeConfig = {
-    small: { width: 34, height: 18, knobSize: 14 },
-    medium: { width: 40, height: 22, knobSize: 16 }
-  };
-  const config = sizeConfig[size];
-  const touchPadV = Math.max(0, (44 - config.height) / 2);
-  const touchPadH = Math.max(0, (44 - config.width) / 2);
-  const handleClick = () => {
-    if (!disabled) {
-      onChange == null ? void 0 : onChange(!checked);
-    }
-  };
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const transparentDefault = tokens.colors.interactive.transparentDefault;
-  const transparentHover = tokens.colors.interactive.transparentHover;
-  const bgColor = checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault && transparentHover ? hovered && !disabled ? transparentHover : transparentDefault : hovered && !disabled ? `${tokens.colors.border.muted}` : tokens.colors.border.muted;
-  const toggle = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "switch",
-      "aria-checked": checked,
-      "aria-disabled": disabled,
-      "aria-label": !label ? name ?? "Toggle" : void 0,
-      tabIndex: disabled ? -1 : 0,
-      onClick: handleClick,
-      onKeyDown: (e) => (e.key === " " || e.key === "Enter") && (e.preventDefault(), handleClick()),
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      style: {
-        padding: `${touchPadV}px ${touchPadH}px`,
-        cursor: disabled ? "not-allowed" : "pointer",
-        flexShrink: 0,
-        outline: "none",
-        display: "inline-flex",
-        alignItems: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: config.width,
-              height: config.height,
-              backgroundColor: bgColor,
-              ...isTransparentTheme && !checked && { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
-              borderRadius: config.height / 2,
-              opacity: disabled ? 0.5 : 1,
-              position: "relative",
-              transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,
-              flexShrink: 0,
-              boxShadow: checked ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)` : focused ? `0 0 0 2px ${tokens.colors.accent.primary}25` : "inset 0 1px 2px rgba(0,0,0,0.15)"
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: (config.height - config.knobSize) / 2,
-                  left: checked ? config.width - config.knobSize - 3 : 3,
-                  width: config.knobSize,
-                  height: config.knobSize,
-                  backgroundColor: "#ffffff",
-                  borderRadius: "50%",
-                  boxShadow: checked ? "0 1px 4px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.2)",
-                  transition: tokens.animation.spring,
-                  transform: hovered && !disabled ? "scale(1.05)" : "scale(1)"
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            id,
-            name,
-            checked,
-            disabled,
-            onChange: () => {
-            },
-            tabIndex: -1,
-            "aria-hidden": "true",
-            style: {
-              position: "absolute",
-              opacity: 0,
-              width: 0,
-              height: 0,
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-  if (!label) {
-    return /* @__PURE__ */ jsx("div", { className: classNames("zendir-toggle", className), children: toggle });
-  }
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      htmlFor: id,
-      className: classNames("zendir-toggle", className),
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: tokens.spacing.sm,
-        cursor: disabled ? "not-allowed" : "pointer",
-        flexDirection: labelPosition === "left" ? "row-reverse" : "row"
-      },
-      children: [
-        toggle,
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: tokens.typography.fontSize.sm,
-              color: disabled ? tokens.colors.text.muted : tokens.colors.text.primary
-            },
-            children: label
-          }
-        )
-      ]
-    }
-  );
+import { forwardRef, memo, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/inputs/Toggle.tsx
+/**
+* @zendir/ui - Toggle/Switch Component
+*
+* Toggle switch following Astro UX Design System with Zendir purple accents.
+*
+* Astro UX Compliance:
+* - Binary on/off control
+* - Clear visual states
+* - Accessible keyboard support
+*
+* Zendir Enhancements:
+* - Purple accent when active
+* - Subtle glow effect
+* - Smooth spring animation
+*
+* @example
+* ```tsx
+* <Toggle checked={enabled} onChange={setEnabled} label="Enable telemetry" />
+* ```
+*/
+var Toggle = memo(forwardRef(function Toggle({ checked = false, onChange, label, labelPosition = "right", disabled = false, size = "medium", className = "", name }, ref) {
+	const { tokens, theme } = useTheme();
+	const [focused, setFocused] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const id = useId();
+	const config = {
+		small: {
+			width: 34,
+			height: 18,
+			knobSize: 14
+		},
+		medium: {
+			width: 40,
+			height: 22,
+			knobSize: 16
+		}
+	}[size];
+	const touchPadV = Math.max(0, (44 - config.height) / 2);
+	const touchPadH = Math.max(0, (44 - config.width) / 2);
+	const handleClick = () => {
+		if (!disabled) onChange?.(!checked);
+	};
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const transparentDefault = tokens.colors.interactive.transparentDefault;
+	const transparentHover = tokens.colors.interactive.transparentHover;
+	const bgColor = checked ? tokens.colors.accent.primary : isTransparentTheme && transparentDefault && transparentHover ? hovered && !disabled ? transparentHover : transparentDefault : hovered && !disabled ? `${tokens.colors.border.muted}` : tokens.colors.border.muted;
+	const toggle = /* @__PURE__ */ jsxs("div", {
+		role: "switch",
+		"aria-checked": checked,
+		"aria-disabled": disabled,
+		"aria-label": !label ? name ?? "Toggle" : void 0,
+		tabIndex: disabled ? -1 : 0,
+		onClick: handleClick,
+		onKeyDown: (e) => (e.key === " " || e.key === "Enter") && (e.preventDefault(), handleClick()),
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		style: {
+			padding: `${touchPadV}px ${touchPadH}px`,
+			cursor: disabled ? "not-allowed" : "pointer",
+			flexShrink: 0,
+			outline: "none",
+			display: "inline-flex",
+			alignItems: "center"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				width: config.width,
+				height: config.height,
+				backgroundColor: bgColor,
+				...isTransparentTheme && !checked && {
+					backdropFilter: "blur(8px)",
+					WebkitBackdropFilter: "blur(8px)"
+				},
+				borderRadius: config.height / 2,
+				opacity: disabled ? .5 : 1,
+				position: "relative",
+				transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,
+				flexShrink: 0,
+				boxShadow: checked ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)` : focused ? `0 0 0 2px ${tokens.colors.accent.primary}25` : "inset 0 1px 2px rgba(0,0,0,0.15)"
+			},
+			children: /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				top: (config.height - config.knobSize) / 2,
+				left: checked ? config.width - config.knobSize - 3 : 3,
+				width: config.knobSize,
+				height: config.knobSize,
+				backgroundColor: "#ffffff",
+				borderRadius: "50%",
+				boxShadow: checked ? "0 1px 4px rgba(0,0,0,0.25)" : "0 1px 3px rgba(0,0,0,0.2)",
+				transition: tokens.animation.spring,
+				transform: hovered && !disabled ? "scale(1.05)" : "scale(1)"
+			} })
+		}), /* @__PURE__ */ jsx("input", {
+			ref,
+			type: "checkbox",
+			id,
+			name,
+			checked,
+			disabled,
+			onChange: () => {},
+			tabIndex: -1,
+			"aria-hidden": "true",
+			style: {
+				position: "absolute",
+				opacity: 0,
+				width: 0,
+				height: 0,
+				pointerEvents: "none"
+			}
+		})]
+	});
+	if (!label) return /* @__PURE__ */ jsx("div", {
+		className: classNames("zendir-toggle", className),
+		children: toggle
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: classNames("zendir-toggle", className),
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: tokens.spacing.sm,
+			cursor: disabled ? "not-allowed" : "pointer",
+			flexDirection: labelPosition === "left" ? "row-reverse" : "row"
+		},
+		children: [toggle, /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: tokens.typography.fontSize.sm,
+				color: disabled ? tokens.colors.text.muted : tokens.colors.text.primary
+			},
+			children: label
+		})]
+	});
 }));
-export {
-  Toggle
-};
-//# sourceMappingURL=Toggle.js.map
+//#endregion
+export { Toggle, Toggle as default };
+
+//# sourceMappingURL=Toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/react/core/inputs/Toggle.tsx"],"sourcesContent":["/**\n * @zendir/ui - Toggle/Switch Component\n * \n * Toggle switch following Astro UX Design System with Zendir purple accents.\n * \n * Astro UX Compliance:\n * - Binary on/off control\n * - Clear visual states\n * - Accessible keyboard support\n * \n * Zendir Enhancements:\n * - Purple accent when active\n * - Subtle glow effect\n * - Smooth spring animation\n * \n * @example\n * ```tsx\n * <Toggle checked={enabled} onChange={setEnabled} label=\"Enable telemetry\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useId, useState } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport interface ToggleProps {\n  /** Checked state */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Label text */\n  label?: string;\n  /** Label position */\n  labelPosition?: 'left' | 'right';\n  /** Disabled state */\n  disabled?: boolean;\n  /** Size variant */\n  size?: 'small' | 'medium';\n  /** Custom className */\n  className?: string;\n  /** Name attribute */\n  name?: string;\n}\n\nexport const Toggle = memo(forwardRef<HTMLInputElement, ToggleProps>(function Toggle(\n  {\n    checked = false,\n    onChange,\n    label,\n    labelPosition = 'right',\n    disabled = false,\n    size = 'medium',\n    className = '',\n    name,\n  },\n  ref\n): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const [focused, setFocused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const id = useId();\n  \n  const sizeConfig = {\n    small: { width: 34, height: 18, knobSize: 14 },\n    medium: { width: 40, height: 22, knobSize: 16 },\n  };\n  const config = sizeConfig[size];\n  // Touch target: 44px minimum via padding around the visual toggle\n  const touchPadV = Math.max(0, (44 - config.height) / 2);\n  const touchPadH = Math.max(0, (44 - config.width) / 2);\n  \n  const handleClick = () => {\n    if (!disabled) {\n      onChange?.(!checked);\n    }\n  };\n  \n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const transparentDefault = tokens.colors.interactive.transparentDefault;\n  const transparentHover = tokens.colors.interactive.transparentHover;\n  const bgColor = checked\n    ? tokens.colors.accent.primary\n    : isTransparentTheme && transparentDefault && transparentHover\n      ? (hovered && !disabled ? transparentHover : transparentDefault)\n      : hovered && !disabled\n        ? `${tokens.colors.border.muted}`\n        : tokens.colors.border.muted;\n  \n  const toggle = (\n    <div\n      role=\"switch\"\n      aria-checked={checked}\n      aria-disabled={disabled}\n      aria-label={!label ? (name ?? 'Toggle') : undefined}\n      tabIndex={disabled ? -1 : 0}\n      onClick={handleClick}\n      onKeyDown={(e) => (e.key === ' ' || e.key === 'Enter') && (e.preventDefault(), handleClick())}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      style={{\n        padding: `${touchPadV}px ${touchPadH}px`,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        flexShrink: 0,\n        outline: 'none',\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      <div\n        style={{\n          width: config.width,\n          height: config.height,\n          backgroundColor: bgColor,\n          ...(isTransparentTheme && !checked && { backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)' }),\n          borderRadius: config.height / 2,\n          opacity: disabled ? 0.5 : 1,\n          position: 'relative',\n          transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\n          flexShrink: 0,\n          boxShadow: checked \n            ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)` \n            : focused \n            ? `0 0 0 2px ${tokens.colors.accent.primary}25` \n            : 'inset 0 1px 2px rgba(0,0,0,0.15)',\n        }}\n      >\n        <div\n          style={{\n            position: 'absolute',\n            top: (config.height - config.knobSize) / 2,\n            left: checked ? config.width - config.knobSize - 3 : 3,\n            width: config.knobSize,\n            height: config.knobSize,\n            backgroundColor: '#ffffff',\n            borderRadius: '50%',\n            boxShadow: checked \n              ? '0 1px 4px rgba(0,0,0,0.25)' \n              : '0 1px 3px rgba(0,0,0,0.2)',\n            transition: tokens.animation.spring,\n            transform: hovered && !disabled ? 'scale(1.05)' : 'scale(1)',\n          }}\n        />\n      </div>\n      <input\n        ref={ref}\n        type=\"checkbox\"\n        id={id}\n        name={name}\n        checked={checked}\n        disabled={disabled}\n        onChange={() => {}}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          opacity: 0,\n          width: 0,\n          height: 0,\n          pointerEvents: 'none',\n        }}\n      />\n    </div>\n  );\n  \n  if (!label) {\n    return (\n      <div className={classNames('zendir-toggle', className)}>\n        {toggle}\n      </div>\n    );\n  }\n  \n  return (\n    <label\n      htmlFor={id}\n      className={classNames('zendir-toggle', className)}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: tokens.spacing.sm,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        flexDirection: labelPosition === 'left' ? 'row-reverse' : 'row',\n      }}\n    >\n      {toggle}\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.sm,\n          color: disabled ? tokens.colors.text.muted : tokens.colors.text.primary,\n        }}\n      >\n        {label}\n      </span>\n    </label>\n  );\n}));\n\nexport default Toggle;\n"],"names":["Toggle"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../../../src/react/core/inputs/Toggle.tsx"],"sourcesContent":["/**\n * @zendir/ui - Toggle/Switch Component\n *\n * Toggle switch following Astro UX Design System with Zendir purple accents.\n *\n * Astro UX Compliance:\n * - Binary on/off control\n * - Clear visual states\n * - Accessible keyboard support\n *\n * Zendir Enhancements:\n * - Purple accent when active\n * - Subtle glow effect\n * - Smooth spring animation\n *\n * @example\n * ```tsx\n * <Toggle checked={enabled} onChange={setEnabled} label=\"Enable telemetry\" />\n * ```\n */\n\nimport React, { memo, forwardRef, useId, useState } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { classNames } from \"../../utils\";\n\nexport interface ToggleProps {\n  /** Checked state */\n  checked?: boolean;\n  /** Change handler */\n  onChange?: (checked: boolean) => void;\n  /** Label text */\n  label?: string;\n  /** Label position */\n  labelPosition?: \"left\" | \"right\";\n  /** Disabled state */\n  disabled?: boolean;\n  /** Size variant */\n  size?: \"small\" | \"medium\";\n  /** Custom className */\n  className?: string;\n  /** Name attribute */\n  name?: string;\n}\n\nexport const Toggle = memo(\n  forwardRef<HTMLInputElement, ToggleProps>(function Toggle(\n    {\n      checked = false,\n      onChange,\n      label,\n      labelPosition = \"right\",\n      disabled = false,\n      size = \"medium\",\n      className = \"\",\n      name,\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens, theme } = useTheme();\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n    const id = useId();\n\n    const sizeConfig = {\n      small: { width: 34, height: 18, knobSize: 14 },\n      medium: { width: 40, height: 22, knobSize: 16 },\n    };\n    const config = sizeConfig[size];\n    // Touch target: 44px minimum via padding around the visual toggle\n    const touchPadV = Math.max(0, (44 - config.height) / 2);\n    const touchPadH = Math.max(0, (44 - config.width) / 2);\n\n    const handleClick = () => {\n      if (!disabled) {\n        onChange?.(!checked);\n      }\n    };\n\n    const isTransparentTheme =\n      theme === \"transparent\" ||\n      theme === \"transparent-bold\" ||\n      theme === \"transparent-minimal\";\n    const transparentDefault = tokens.colors.interactive.transparentDefault;\n    const transparentHover = tokens.colors.interactive.transparentHover;\n    const bgColor = checked\n      ? tokens.colors.accent.primary\n      : isTransparentTheme && transparentDefault && transparentHover\n        ? hovered && !disabled\n          ? transparentHover\n          : transparentDefault\n        : hovered && !disabled\n          ? `${tokens.colors.border.muted}`\n          : tokens.colors.border.muted;\n\n    const toggle = (\n      <div\n        role=\"switch\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        aria-label={!label ? (name ?? \"Toggle\") : undefined}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleClick}\n        onKeyDown={(e) =>\n          (e.key === \" \" || e.key === \"Enter\") &&\n          (e.preventDefault(), handleClick())\n        }\n        onMouseEnter={() => setHovered(true)}\n        onMouseLeave={() => setHovered(false)}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        style={{\n          padding: `${touchPadV}px ${touchPadH}px`,\n          cursor: disabled ? \"not-allowed\" : \"pointer\",\n          flexShrink: 0,\n          outline: \"none\",\n          display: \"inline-flex\",\n          alignItems: \"center\",\n        }}\n      >\n        <div\n          style={{\n            width: config.width,\n            height: config.height,\n            backgroundColor: bgColor,\n            ...(isTransparentTheme &&\n              !checked && {\n                backdropFilter: \"blur(8px)\",\n                WebkitBackdropFilter: \"blur(8px)\",\n              }),\n            borderRadius: config.height / 2,\n            opacity: disabled ? 0.5 : 1,\n            position: \"relative\",\n            transition: `${tokens.animation.normal}, opacity ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default}`,\n            flexShrink: 0,\n            boxShadow: checked\n              ? `0 0 10px ${tokens.colors.accent.primary}25, inset 0 1px 1px rgba(255,255,255,0.08)`\n              : focused\n                ? `0 0 0 2px ${tokens.colors.accent.primary}25`\n                : \"inset 0 1px 2px rgba(0,0,0,0.15)\",\n          }}\n        >\n          <div\n            style={{\n              position: \"absolute\",\n              top: (config.height - config.knobSize) / 2,\n              left: checked ? config.width - config.knobSize - 3 : 3,\n              width: config.knobSize,\n              height: config.knobSize,\n              backgroundColor: \"#ffffff\",\n              borderRadius: \"50%\",\n              boxShadow: checked\n                ? \"0 1px 4px rgba(0,0,0,0.25)\"\n                : \"0 1px 3px rgba(0,0,0,0.2)\",\n              transition: tokens.animation.spring,\n              transform: hovered && !disabled ? \"scale(1.05)\" : \"scale(1)\",\n            }}\n          />\n        </div>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => {}}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          style={{\n            position: \"absolute\",\n            opacity: 0,\n            width: 0,\n            height: 0,\n            pointerEvents: \"none\",\n          }}\n        />\n      </div>\n    );\n\n    if (!label) {\n      return (\n        <div className={classNames(\"zendir-toggle\", className)}>{toggle}</div>\n      );\n    }\n\n    return (\n      <label\n        htmlFor={id}\n        className={classNames(\"zendir-toggle\", className)}\n        style={{\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.sm,\n          cursor: disabled ? \"not-allowed\" : \"pointer\",\n          flexDirection: labelPosition === \"left\" ? \"row-reverse\" : \"row\",\n        }}\n      >\n        {toggle}\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.sm,\n            color: disabled\n              ? tokens.colors.text.muted\n              : tokens.colors.text.primary,\n          }}\n        >\n          {label}\n        </span>\n      </label>\n    );\n  }),\n);\n\nexport default Toggle;\n"],"mappings":"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"}

package/dist/react/core/layout/Box.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { ResponsiveValue } from './useBreakpoint';
 import { SpacingToken } from './responsive';
-
 type SpacingInput = SpacingToken | string | number;
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Element type to render */
@@ -43,9 +42,9 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Border: true for default border, or custom CSS border */
     border?: boolean | string;
     /** Border radius token or CSS value */
-    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+    borderRadius?: "none" | "sm" | "md" | "lg" | "xl" | "full" | string;
     /** Box shadow token or CSS value */
-    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    shadow?: "none" | "sm" | "md" | "lg" | "xl" | string;
     /** CSS display property */
     display?: ResponsiveValue<string>;
     /** CSS width */
@@ -63,7 +62,7 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
     /** CSS overflow */
     overflow?: string;
     /** CSS position */
-    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    position?: "static" | "relative" | "absolute" | "fixed" | "sticky";
     /** CSS flex property */
     flex?: string | number;
     /** CSS flex-grow */