@brycks/core-front 0.3.2 → 0.3.4

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":";;;;;;;;AAkDA,MAAMA,IAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR,GAGMC,IAAYC,EAAK,WAAqB;AAC1C,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,IAAA;AAAA,EAAA,GAElB;AAEJ,CAAC,GAEYC,IAAQC,EAAuC,SAC1D;AAAA,EACE,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWC,EAAuB,IAAI,GACtCC,IAAwBD,EAA2B,IAAI,GACvDE,IAAUF,EAAO,EAAK;AAG5B,EAAAG,EAAU,MAAM;AAEd,IAAIlB,KAAU,CAACiB,EAAQ,WACrBD,EAAsB,UAAU,SAAS,eACzCC,EAAQ,UAAU,MAGX,CAACjB,KAAUiB,EAAQ,YAEtB,SAAS,yBAAyB,eACpC,SAAS,cAAc,KAAA,GAGzBD,EAAsB,SAAS,MAAA,GAC/BA,EAAsB,UAAU,MAChCC,EAAQ,UAAU;AAAA,EAEtB,GAAG,CAACjB,CAAM,CAAC;AAGX,QAAMmB,IAAaJ,EAAOd,CAAO;AACjC,EAAAiB,EAAU,MAAM;AACd,IAAAC,EAAW,UAAUlB;AAAA,EACvB,GAAG,CAACA,CAAO,CAAC,GAGZiB,EAAU,MAAM;AACd,QAAI,CAAClB,EAAQ;AAEb,UAAMoB,IAAQN,EAAS;AACvB,IAAIM,KACFA,EAAM,MAAA;AAAA,EAEV,GAAG,CAACpB,CAAM,CAAC,GAGXkB,EAAU,MAAM;AACd,QAAI,CAAClB,EAAQ;AAEb,UAAMoB,IAAQN,EAAS,SAEjBO,IAAgB,CAACC,MAAqB;AAC1C,UAAIA,EAAE,QAAQ,YAAYhB,GAAe;AACvC,QAAAa,EAAW,QAAA;AACX;AAAA,MACF;AAEA,UAAIG,EAAE,QAAQ,SAASF,GAAO;AAC5B,cAAMG,IAAoBH,EAAM;AAAA,UAC9B;AAAA,QAAA,GAEII,IAAeD,EAAkB,CAAC,GAClCE,IAAcF,EAAkBA,EAAkB,SAAS,CAAC;AAElE,QAAID,EAAE,YAAY,SAAS,kBAAkBE,KAC3CF,EAAE,eAAA,GACFG,GAAa,MAAA,KACJ,CAACH,EAAE,YAAY,SAAS,kBAAkBG,MACnDH,EAAE,eAAA,GACFE,GAAc,MAAA;AAAA,MAElB;AAAA,IACF;AAEA,oBAAS,iBAAiB,WAAWH,CAAa,GAClD,SAAS,KAAK,MAAM,WAAW,UAExB,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAa,GACrD,SAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAACrB,GAAQM,CAAa,CAAC;AAE1B,QAAMoB,IAAqBC;AAAA,IACzB,CAAC,MAAwB;AACvB,MAAI,EAAE,WAAW,EAAE,iBAAiBtB,KAClCJ,EAAA;AAAA,IAEJ;AAAA,IACA,CAACI,GAAqBJ,CAAO;AAAA,EAAA,GAIzB2B,IAAeC,EAAuB,OAAO;AAAA,IACjD,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAASC,EAAQ,CAAC;AAAA,IAClB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,WAAW;AAAA,EAAA,IACT,CAAA,CAAE,GAEAC,IAAaF,EAAuB,OAAO;AAAA,IAC/C,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAUnC,EAAWQ,CAAI;AAAA,IACzB,WAAWA,MAAS,SAAS,uBAAuB;AAAA,IACpD,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAGO;AAAA,EAAA,IACD,CAACP,GAAMO,CAAK,CAAC;AAEjB,MAAI,CAACT,EAAQ,QAAO;AAEpB,QAAMgC,IAA6B;AAAA,IACjC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS,GAAGF,EAAQ,CAAC,CAAC,MAAMA,EAAQ,CAAC,CAAC;AAAA,IACtC,cAAc;AAAA,EAAA,GAGVG,IAAqC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKH,EAAQ,CAAC;AAAA,EAAA,GAGVI,IAA4B;AAAA,IAChC,UAAUC,EAAU;AAAA,IACpB,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA,GAGRC,IAAkC;AAAA,IACtC,UAAUD,EAAU;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,GAGJE,IAAkC;AAAA,IACtC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOC,EAAgB;AAAA,IACvB,QAAQA,EAAgB;AAAA,IACxB,cAAc;AAAA,IACd,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,YAAYC,EAAa;AAAA,IACzB,YAAY;AAAA,EAAA,GAGRC,IAA8B;AAAA,IAClC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAASV,EAAQ,CAAC;AAAA,EAAA,GAGdW,IACJ,gBAAA5C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,OAAO+B;AAAA,MACP,SAASF;AAAA,MAET,UAAA,gBAAAgB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK,CAACC,MAAS;AACZ,YAAA7B,EAA2D,UAAU6B,GAClE,OAAO9B,KAAQ,aAAYA,EAAI8B,CAAI,IAC9B9B,MAAMA,EAAsD,UAAU8B;AAAA,UACjF;AAAA,UACA,MAAK;AAAA,UACL,cAAW;AAAA,UACX,mBAAiBxC,IAAQ,uBAAuB;AAAA,UAChD,oBAAkBC,IAAc,6BAA6B;AAAA,UAC7D,WAAWwC,EAAG,gBAAgB,iBAAiB1C,CAAI,IAAIM,CAAS;AAAA,UAChE,OAAOuB;AAAA,UACP,UAAU;AAAA,UACV,eAAarB;AAAA,UACZ,GAAGE;AAAA,UAEF,UAAA;AAAA,aAAAT,KAASI,MACT,gBAAAmC,EAAC,OAAA,EAAI,WAAU,uBAAsB,OAAOV,GAC1C,UAAA;AAAA,cAAA,gBAAAU,EAAC,OAAA,EAAI,OAAOT,GACT,UAAA;AAAA,gBAAA9B,uBACE,MAAA,EAAG,IAAG,sBAAqB,OAAO+B,GAChC,UAAA/B,GACH;AAAA,gBAEDC,KACC,gBAAAP,EAAC,KAAA,EAAE,IAAG,4BAA2B,OAAOuC,GACrC,UAAAhC,EAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACCG,KACC,gBAAAV;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,OAAOwC;AAAA,kBACP,SAASpC;AAAA,kBACT,cAAW;AAAA,kBACX,cAAc,CAAC,MAAM;AACnB,sBAAE,cAAc,MAAM,kBAAkB,kCACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,kBAChC;AAAA,kBACA,cAAc,CAAC,MAAM;AACnB,sBAAE,cAAc,MAAM,kBAAkB,eACxC,EAAE,cAAc,MAAM,QAAQ;AAAA,kBAChC;AAAA,kBAEA,4BAACN,GAAA,CAAA,CAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACb,GAEJ;AAAA,8BAGD,OAAA,EAAI,WAAU,wBAAuB,OAAO6C,GAC1C,UAAA7B,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIN,SAAOkC,EAAaJ,GAAc,SAAS,IAAI;AACjD,CAAC;AAED3C,EAAM,cAAc;"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  '2xl': '1200px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

package/dist/components/form/Checkbox/Checkbox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs"),h=require("../../../design-system/primitives/typography.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),T=require("../../../utils/styles.cjs"),n=require("../../../design-system/primitives/opacity.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),h=require("../../../design-system/primitives/typography.cjs"),m=require("../../../design-system/primitives/focus.cjs"),v=require("../../../design-system/primitives/transitions.cjs");function D({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6L5 8.5L9.5 4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function G({size:o}){return e.jsx("svg",{width:o,height:o,viewBox:"0 0 12 12",fill:"none",children:e.jsx("path",{d:"M2.5 6H9.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}const S=c.forwardRef(function({size:i="md",label:a,description:l,isInvalid:u,isIndeterminate:b,className:j,style:w,testId:C,disabled:s,checked:k,onChange:q,...L},M){const[x,f]=c.useState(!1),[H,g]=c.useState(!1),[R,d]=c.useState(!1),t=p.controlSizes[i],y=h.componentFontSize[i],r=k||b,$={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.lg,cursor:s?"not-allowed":"pointer",opacity:s?n.stateOpacity.disabled:1},I={position:"relative",width:t.box,height:t.box,borderRadius:"var(--brycks-radius-sm)",border:`1.5px solid ${u?"var(--brycks-error-default)":r?"var(--brycks-primary-default)":x?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,backgroundColor:r?"var(--brycks-primary-default)":H?"var(--brycks-background-subtle)":"var(--brycks-background-app)",transition:v.transition.quick,transform:R?`scale(${n.scale.controlPressed})`:`scale(${n.scale.normal})`,boxShadow:x?m.focusRing.default:m.focusRing.none,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},F={color:"var(--brycks-primary-foreground)",opacity:r?1:0,transform:r?`scale(${n.scale.normal})`:`scale(${n.scale.hidden})`,transition:v.transition.quick},P={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:s?"not-allowed":"pointer",margin:0},z={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.box-y)/2},B={fontSize:y,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},O={fontSize:y-1,lineHeight:h.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:T.cx("brycks-checkbox",`brycks-checkbox--${i}`,r&&"brycks-checkbox--checked",u&&"brycks-checkbox--invalid",s&&"brycks-checkbox--disabled",j),style:{...$,...w},"data-testid":C,onMouseEnter:()=>g(!0),onMouseLeave:()=>{g(!1),d(!1)},onMouseDown:()=>d(!0),onMouseUp:()=>d(!1),children:[e.jsxs("span",{style:I,children:[e.jsx("input",{ref:M,type:"checkbox",style:P,checked:k,disabled:s,"aria-invalid":u,onChange:q,onFocus:()=>f(!0),onBlur:()=>f(!1),...L}),e.jsx("span",{style:F,children:b?e.jsx(G,{size:t.icon}):e.jsx(D,{size:t.icon})})]}),(a||l)&&e.jsxs("span",{style:z,children:[a&&e.jsx("span",{style:B,children:a}),l&&e.jsx("span",{style:O,children:l})]})]})});S.displayName="Checkbox";exports.Checkbox=S;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/form/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import { forwardRef as N, useState as f } from "react";
 import { cx as O } from "../../../utils/styles.js";
-import { componentGap as x, controlSizes as T } from "../../../design-system/primitives/sizing.js";
-import { stateOpacity as W, scale as s } from "../../../design-system/primitives/opacity.js";
-import { focusRing as g } from "../../../design-system/primitives/focus.js";
-import { transition as v } from "../../../design-system/primitives/transitions.js";
-import { componentLineHeight as S, componentFontSize as E } from "../../../design-system/primitives/typography.js";
+import { stateOpacity as T, scale as s } from "../../../design-system/primitives/opacity.js";
+import { componentGap as x, controlSizes as W } from "../../../design-system/primitives/sizing.js";
+import { componentLineHeight as g, componentFontSize as E } from "../../../design-system/primitives/typography.js";
+import { focusRing as v } from "../../../design-system/primitives/focus.js";
+import { transition as S } from "../../../design-system/primitives/transitions.js";
 function G({ size: o }) {
   return /* @__PURE__ */ e("svg", { width: o, height: o, viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ e(
     "path",
@@ -43,12 +43,12 @@ const A = N(function({
   onChange: M,
   ...H
 }, $) {
-  const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = T[c], u = E[c], n = h || y, F = {
+  const [k, b] = f(!1), [I, m] = f(!1), [j, d] = f(!1), t = W[c], u = E[c], n = h || y, F = {
     display: "inline-flex",
     alignItems: "flex-start",
     gap: x.lg,
     cursor: r ? "not-allowed" : "pointer",
-    opacity: r ? W.disabled : 1
+    opacity: r ? T.disabled : 1
   }, B = {
     position: "relative",
     width: t.box,
@@ -56,9 +56,9 @@ const A = N(function({
     borderRadius: "var(--brycks-radius-sm)",
     border: `1.5px solid ${l ? "var(--brycks-error-default)" : n ? "var(--brycks-primary-default)" : k ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
     backgroundColor: n ? "var(--brycks-primary-default)" : I ? "var(--brycks-background-subtle)" : "var(--brycks-background-app)",
-    transition: v.quick,
+    transition: S.quick,
     transform: j ? `scale(${s.controlPressed})` : `scale(${s.normal})`,
-    boxShadow: k ? g.default : g.none,
+    boxShadow: k ? v.default : v.none,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -67,7 +67,7 @@ const A = N(function({
     color: "var(--brycks-primary-foreground)",
     opacity: n ? 1 : 0,
     transform: n ? `scale(${s.normal})` : `scale(${s.hidden})`,
-    transition: v.quick
+    transition: S.quick
   }, R = {
     position: "absolute",
     width: "100%",
@@ -82,12 +82,12 @@ const A = N(function({
     paddingTop: (t.box - u) / 2
   }, z = {
     fontSize: u,
-    lineHeight: S.snug,
+    lineHeight: g.snug,
     color: "var(--brycks-foreground-default)",
     userSelect: "none"
   }, D = {
     fontSize: u - 1,
-    lineHeight: S.snug,
+    lineHeight: g.snug,
     color: "var(--brycks-foreground-muted)",
     userSelect: "none"
   };

package/dist/components/form/Input/Input.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),d=require("../../../design-system/primitives/typography.cjs"),u=require("../../../design-system/primitives/focus.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),y=require("react"),F=require("../../../utils/styles.cjs"),t=require("../../../design-system/primitives/sizing.cjs"),d=require("../../../design-system/primitives/typography.cjs"),f=require("../../../design-system/primitives/transitions.cjs"),u=require("../../../design-system/primitives/focus.cjs"),C=require("../../../design-system/primitives/opacity.cjs"),O={sm:{height:t.componentHeights.sm,fontSize:d.componentFontSize.sm,paddingX:t.componentPaddingX.sm,radius:"var(--brycks-radius-md)"},md:{height:t.componentHeights.md,fontSize:d.componentFontSize.md,paddingX:t.componentPaddingX.md,radius:"var(--brycks-radius-default)"},lg:{height:t.componentHeights.lg,fontSize:d.componentFontSize.lg,paddingX:t.componentPaddingX.lg,radius:"var(--brycks-radius-lg)"}},m=y.forwardRef(function({size:p="md",variant:l="outline",isInvalid:n,leftElement:i,rightElement:c,className:k,style:h,testId:S,disabled:o,onFocus:v,onBlur:x,...w},j){const[s,g]=y.useState(!1),r=O[p],R=()=>{const e={display:"flex",alignItems:"center",width:"100%",position:"relative",height:r.height,borderRadius:r.radius,transition:f.transition.default};switch(l){case"outline":Object.assign(e,{backgroundColor:"var(--brycks-background-app)",border:`1px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`,boxShadow:s?n?u.focusRing.error:u.focusRing.default:u.focusRing.none});break;case"filled":Object.assign(e,{backgroundColor:"var(--brycks-background-muted)",border:"1px solid transparent",borderColor:n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"transparent"});break;case"flushed":Object.assign(e,{backgroundColor:"transparent",borderRadius:0,borderBottom:`2px solid ${n?"var(--brycks-error-default)":s?"var(--brycks-border-focus)":"var(--brycks-border-default)"}`});break}return o&&Object.assign(e,{opacity:C.stateOpacity.disabled,cursor:"not-allowed"}),e},X={width:"100%",height:r.height,fontFamily:"var(--brycks-font-sans)",fontSize:r.fontSize,color:"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",outline:"none",borderRadius:r.radius,paddingLeft:i?t.componentGap.md:r.paddingX,paddingRight:c?t.componentGap.md:r.paddingX,cursor:o?"not-allowed":"text",transition:f.transition.default},z=e=>{g(!0),v?.(e)},q=e=>{g(!1),x?.(e)},b={display:"flex",alignItems:"center",justifyContent:"center",color:"var(--brycks-foreground-muted)",flexShrink:0};return a.jsxs("div",{className:F.cx("brycks-input-wrapper",`brycks-input-wrapper--${l}`,`brycks-input-wrapper--${p}`,n&&"brycks-input-wrapper--invalid",o&&"brycks-input-wrapper--disabled",k),style:{...R(),...h},children:[i&&a.jsx("span",{className:"brycks-input-left-element",style:{...b,paddingLeft:r.paddingX},children:i}),a.jsx("input",{ref:j,className:"brycks-input",style:X,disabled:o,"aria-invalid":n,"data-testid":S,onFocus:z,onBlur:q,...w}),c&&a.jsx("span",{className:"brycks-input-right-element",style:{...b,paddingRight:r.paddingX},children:c})]})});m.displayName="Input";exports.Input=m;
 //# sourceMappingURL=Input.cjs.map

package/dist/components/form/Input/Input.js

@@ -1,28 +1,28 @@
 import { jsxs as F, jsx as d } from "react/jsx-runtime";
 import { forwardRef as N, useState as O } from "react";
 import { cx as $ } from "../../../utils/styles.js";
-import { componentFontSize as i } from "../../../design-system/primitives/typography.js";
-import { focusRing as c } from "../../../design-system/primitives/focus.js";
-import { componentPaddingX as p, componentHeights as u, componentGap as m } from "../../../design-system/primitives/sizing.js";
+import { componentPaddingX as i, componentHeights as c, componentGap as m } from "../../../design-system/primitives/sizing.js";
+import { componentFontSize as p } from "../../../design-system/primitives/typography.js";
 import { transition as y } from "../../../design-system/primitives/transitions.js";
+import { focusRing as u } from "../../../design-system/primitives/focus.js";
 import { stateOpacity as B } from "../../../design-system/primitives/opacity.js";
 const L = {
   sm: {
-    height: u.sm,
-    fontSize: i.sm,
-    paddingX: p.sm,
+    height: c.sm,
+    fontSize: p.sm,
+    paddingX: i.sm,
     radius: "var(--brycks-radius-md)"
   },
   md: {
-    height: u.md,
-    fontSize: i.md,
-    paddingX: p.md,
+    height: c.md,
+    fontSize: p.md,
+    paddingX: i.md,
     radius: "var(--brycks-radius-default)"
   },
   lg: {
-    height: u.lg,
-    fontSize: i.lg,
-    paddingX: p.lg,
+    height: c.lg,
+    fontSize: p.lg,
+    paddingX: i.lg,
     radius: "var(--brycks-radius-lg)"
   }
 }, G = N(function({
@@ -54,7 +54,7 @@ const L = {
         Object.assign(e, {
           backgroundColor: "var(--brycks-background-app)",
           border: `1px solid ${t ? "var(--brycks-error-default)" : a ? "var(--brycks-border-focus)" : "var(--brycks-border-default)"}`,
-          boxShadow: a ? t ? c.error : c.default : c.none
+          boxShadow: a ? t ? u.error : u.default : u.none
         });
         break;
       case "filled":

package/dist/components/form/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),J=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/typography.cjs"),l=require("../../../design-system/tokens/spacing.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),c=require("../../../design-system/tokens/motion.cjs"),Q={sm:{track:l.spacing[1],thumb:l.spacing[3.5],fontSize:m.fontSizes.sm},md:{track:z.componentGap.sm,thumb:l.spacing[4]+l.spacing[.5],fontSize:m.fontSizes.base},lg:{track:l.spacing[2],thumb:l.spacing[5]+l.spacing[.5],fontSize:m.fontSizes.md}},R=i.forwardRef(function({size:k="md",min:a=0,max:u=100,step:f=1,value:b,defaultValue:C=a,onChange:S,showValue:w=!1,formatValue:x=v=>String(v),label:p,disabled:d=!1,className:q,style:E,testId:M,...I},g){const[v,O]=i.useState(C),[y,h]=i.useState(!1),[A,D]=i.useState(!1),$=i.useRef(null),s=b??v,t=Q[k],j=(s-a)/(u-a)*100,r=i.useCallback(e=>{const n=Math.max(a,Math.min(u,e));b===void 0&&O(n),S?.(n)},[b,a,u,S]);i.useEffect(()=>{const e=$.current;if(!e)return;const n=V=>{const B=V.target;r(parseFloat(B.value))};return e.addEventListener("input",n),()=>e.removeEventListener("input",n)},[r]);const L=i.useCallback(e=>{const n=e.shiftKey?f*10:f;switch(e.key){case"ArrowRight":case"ArrowUp":e.preventDefault(),r(s+n);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),r(s-n);break;case"Home":e.preventDefault(),r(a);break;case"End":e.preventDefault(),r(u);break;case"PageUp":e.preventDefault(),r(s+n*10);break;case"PageDown":e.preventDefault(),r(s-n*10);break}},[s,f,a,u,r]),H={display:"flex",flexDirection:"column",gap:l.spacing[2],opacity:d?.5:1,...E},K={display:"flex",alignItems:"center",justifyContent:"space-between",gap:z.componentGap.xl},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},P={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:d?"not-allowed":"pointer"},U={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},G={position:"absolute",left:0,height:t.track,width:`${j}%`,borderRadius:t.track/2,backgroundColor:d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:y?"none":`width ${c.durations.fast}ms ${c.easings.easeOut}`},W={position:"absolute",left:`calc(${j}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:y||A?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:y?"scale(1.1)":"scale(1)",transition:y?`transform ${c.durations.fast}ms ${c.easings.easeOut}, box-shadow ${c.durations.fast}ms ${c.easings.easeOut}`:`all ${c.durations.fast}ms ${c.easings.easeOut}`,pointerEvents:"none"},F={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:d?"not-allowed":"pointer"};return o.jsxs("div",{className:J.cx("brycks-slider",`brycks-slider--${k}`,q),style:H,children:[(p||w)&&o.jsxs("div",{style:K,children:[p&&o.jsx("span",{style:N,children:p}),w&&o.jsx("span",{style:P,children:x(s)})]}),o.jsxs("div",{style:T,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[o.jsx("div",{style:U}),o.jsx("div",{style:G}),o.jsx("div",{style:W}),o.jsx("input",{ref:e=>{$.current=e,typeof g=="function"?g(e):g&&(g.current=e)},type:"range",role:"slider","aria-valuemin":a,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":x(s),"aria-label":p,min:a,max:u,step:f,value:s,disabled:d,style:F,onKeyDown:L,onMouseDown:()=>h(!0),onMouseUp:()=>h(!1),onTouchStart:()=>h(!0),onTouchEnd:()=>h(!1),"data-testid":M,...I})]})]})});R.displayName="Slider";exports.Slider=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),J=require("../../../utils/styles.cjs"),m=require("../../../design-system/tokens/typography.cjs"),c=require("../../../design-system/tokens/motion.cjs"),l=require("../../../design-system/tokens/spacing.cjs"),z=require("../../../design-system/primitives/sizing.cjs"),Q={sm:{track:l.spacing[1],thumb:l.spacing[3.5],fontSize:m.fontSizes.sm},md:{track:z.componentGap.sm,thumb:l.spacing[4]+l.spacing[.5],fontSize:m.fontSizes.base},lg:{track:l.spacing[2],thumb:l.spacing[5]+l.spacing[.5],fontSize:m.fontSizes.md}},R=i.forwardRef(function({size:k="md",min:a=0,max:u=100,step:f=1,value:b,defaultValue:C=a,onChange:S,showValue:w=!1,formatValue:x=v=>String(v),label:p,disabled:d=!1,className:q,style:E,testId:M,...I},g){const[v,O]=i.useState(C),[y,h]=i.useState(!1),[A,D]=i.useState(!1),$=i.useRef(null),s=b??v,t=Q[k],j=(s-a)/(u-a)*100,r=i.useCallback(e=>{const n=Math.max(a,Math.min(u,e));b===void 0&&O(n),S?.(n)},[b,a,u,S]);i.useEffect(()=>{const e=$.current;if(!e)return;const n=V=>{const B=V.target;r(parseFloat(B.value))};return e.addEventListener("input",n),()=>e.removeEventListener("input",n)},[r]);const L=i.useCallback(e=>{const n=e.shiftKey?f*10:f;switch(e.key){case"ArrowRight":case"ArrowUp":e.preventDefault(),r(s+n);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),r(s-n);break;case"Home":e.preventDefault(),r(a);break;case"End":e.preventDefault(),r(u);break;case"PageUp":e.preventDefault(),r(s+n*10);break;case"PageDown":e.preventDefault(),r(s-n*10);break}},[s,f,a,u,r]),H={display:"flex",flexDirection:"column",gap:l.spacing[2],opacity:d?.5:1,...E},K={display:"flex",alignItems:"center",justifyContent:"space-between",gap:z.componentGap.xl},N={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-default)"},P={fontSize:t.fontSize,fontWeight:500,color:"var(--brycks-foreground-muted)",fontVariantNumeric:"tabular-nums"},T={position:"relative",display:"flex",alignItems:"center",height:t.thumb,cursor:d?"not-allowed":"pointer"},U={position:"absolute",width:"100%",height:t.track,borderRadius:t.track/2,backgroundColor:"var(--brycks-background-muted)"},G={position:"absolute",left:0,height:t.track,width:`${j}%`,borderRadius:t.track/2,backgroundColor:d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)",transition:y?"none":`width ${c.durations.fast}ms ${c.easings.easeOut}`},W={position:"absolute",left:`calc(${j}% - ${t.thumb/2}px)`,width:t.thumb,height:t.thumb,borderRadius:"50%",backgroundColor:"white",border:`2px solid ${d?"var(--brycks-foreground-muted)":"var(--brycks-primary-default)"}`,boxShadow:y||A?"var(--brycks-shadow-md)":"var(--brycks-shadow-sm)",transform:y?"scale(1.1)":"scale(1)",transition:y?`transform ${c.durations.fast}ms ${c.easings.easeOut}, box-shadow ${c.durations.fast}ms ${c.easings.easeOut}`:`all ${c.durations.fast}ms ${c.easings.easeOut}`,pointerEvents:"none"},F={position:"absolute",width:"100%",height:t.thumb,margin:0,padding:0,opacity:0,cursor:d?"not-allowed":"pointer"};return o.jsxs("div",{className:J.cx("brycks-slider",`brycks-slider--${k}`,q),style:H,children:[(p||w)&&o.jsxs("div",{style:K,children:[p&&o.jsx("span",{style:N,children:p}),w&&o.jsx("span",{style:P,children:x(s)})]}),o.jsxs("div",{style:T,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),children:[o.jsx("div",{style:U}),o.jsx("div",{style:G}),o.jsx("div",{style:W}),o.jsx("input",{ref:e=>{$.current=e,typeof g=="function"?g(e):g&&(g.current=e)},type:"range",role:"slider","aria-valuemin":a,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":x(s),"aria-label":p,min:a,max:u,step:f,value:s,disabled:d,style:F,onKeyDown:L,onMouseDown:()=>h(!0),onMouseUp:()=>h(!1),onTouchStart:()=>h(!0),onTouchEnd:()=>h(!1),"data-testid":M,...I})]})]})});R.displayName="Slider";exports.Slider=R;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/form/Slider/Slider.js

@@ -2,9 +2,9 @@ import { jsxs as v, jsx as c } from "react/jsx-runtime";
 import { forwardRef as X, useState as k, useRef as Y, useCallback as E, useEffect as Z } from "react";
 import { cx as _ } from "../../../utils/styles.js";
 import { fontSizes as w } from "../../../design-system/tokens/typography.js";
+import { durations as m, easings as y } from "../../../design-system/tokens/motion.js";
 import { spacing as s } from "../../../design-system/tokens/spacing.js";
 import { componentGap as I } from "../../../design-system/primitives/sizing.js";
-import { durations as m, easings as y } from "../../../design-system/tokens/motion.js";
 const ee = {
   sm: { track: s[1], thumb: s[3.5], fontSize: w.sm },
   md: { track: I.sm, thumb: s[4] + s[0.5], fontSize: w.base },

package/dist/components/form/Switch/Switch.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),C=require("../../../utils/styles.cjs"),p=require("../../../design-system/primitives/sizing.cjs"),d=require("../../../design-system/primitives/opacity.cjs"),I=require("../../../design-system/primitives/focus.cjs"),b=require("../../../design-system/primitives/transitions.cjs"),r=require("../../../design-system/primitives/typography.cjs"),f=h.forwardRef(function({size:i="md",label:a,description:c,className:m,style:S,testId:w,disabled:o,checked:s,onChange:x,...k},v){const[j,y]=h.useState(!1),[g,l]=h.useState(!1),t=p.switchSizes[i],u=r.componentFontSize[i],n=(t.height-t.thumb)/2,q=t.width-t.thumb-n*2,R={display:"inline-flex",alignItems:"flex-start",gap:p.componentGap.xl,cursor:o?"not-allowed":"pointer",opacity:o?d.stateOpacity.disabled:1},H={position:"relative",width:t.width,height:t.height,borderRadius:t.height/2,backgroundColor:s?"var(--brycks-primary-default)":"var(--brycks-background-muted)",border:`1px solid ${s?"var(--brycks-primary-default)":"var(--brycks-border-default)"}`,transition:b.transition.spring,boxShadow:j?I.focusRing.default:"inset 0 1px 2px rgba(0,0,0,0.05)",flexShrink:0},F={position:"absolute",top:n,left:s?n+q:n,width:g?t.thumb+4:t.thumb,height:t.thumb,borderRadius:t.thumb/2,backgroundColor:"var(--brycks-background-elevated)",boxShadow:"var(--brycks-shadow-sm)",transition:b.transition.spring,transform:g?`scale(${d.scale.pressedStrong})`:`scale(${d.scale.normal})`},L={position:"absolute",width:"100%",height:"100%",opacity:0,cursor:o?"not-allowed":"pointer",margin:0},M={display:"flex",flexDirection:"column",gap:p.componentGap.xs,paddingTop:(t.height-u*r.componentLineHeight.snug)/2},$={fontSize:u,lineHeight:r.componentLineHeight.snug,color:"var(--brycks-foreground-default)",userSelect:"none"},z={fontSize:u-1,lineHeight:r.componentLineHeight.snug,color:"var(--brycks-foreground-muted)",userSelect:"none"};return e.jsxs("label",{className:C.cx("brycks-switch",`brycks-switch--${i}`,s&&"brycks-switch--checked",o&&"brycks-switch--disabled",m),style:{...R,...S},"data-testid":w,onMouseDown:()=>l(!0),onMouseUp:()=>l(!1),onMouseLeave:()=>l(!1),children:[e.jsxs("span",{style:H,children:[e.jsx("input",{ref:v,type:"checkbox",role:"switch",style:L,checked:s,disabled:o,"aria-checked":s,onChange:x,onFocus:()=>y(!0),onBlur:()=>y(!1),...k}),e.jsx("span",{style:F})]}),(a||c)&&e.jsxs("span",{style:M,children:[a&&e.jsx("span",{style:$,children:a}),c&&e.jsx("span",{style:z,children:c})]})]})});f.displayName="Switch";exports.Switch=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),_=require("../../../utils/styles.cjs"),k=require("../../../design-system/primitives/sizing.cjs"),n=y.forwardRef(function({size:r="md",label:e,description:h,className:l,style:b,testId:w,disabled:a,checked:c,onChange:d,...u},o){const s=k.switchSizes[r],i=(s.height-s.thumb)/2,m=s.width-s.thumb-i*2;return t.jsxs("label",{className:_.cx("brycks-switch",`brycks-switch--${r}`,c&&"brycks-switch--checked",a&&"brycks-switch--disabled",l),style:b,"data-testid":w,children:[t.jsxs("span",{className:"brycks-switch__track",style:{width:s.width,height:s.height,borderRadius:s.height/2},children:[t.jsx("input",{ref:o,type:"checkbox",role:"switch",className:"brycks-switch__input",checked:c,disabled:a,"aria-checked":c,onChange:d,...u}),t.jsx("span",{className:"brycks-switch__thumb",style:{top:i,left:c?i+m:i,width:s.thumb,height:s.thumb,borderRadius:s.thumb/2}})]}),(e||h)&&t.jsxs("span",{className:"brycks-switch__label",children:[e&&t.jsx("span",{className:"brycks-switch__label-text",children:e}),h&&t.jsx("span",{className:"brycks-switch__description",children:h})]})]})});n.displayName="Switch";exports.Switch=n;
 //# sourceMappingURL=Switch.cjs.map

package/dist/components/form/Switch/Switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport {\r\n  switchSizes,\r\n  componentGap,\r\n  componentFontSize,\r\n  componentLineHeight,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = switchSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.xl,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const trackStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.width,\r\n    height: config.height,\r\n    borderRadius: config.height / 2,\r\n    backgroundColor: checked\r\n      ? 'var(--brycks-primary-default)'\r\n      : 'var(--brycks-background-muted)',\r\n    border: `1px solid ${checked ? 'var(--brycks-primary-default)' : 'var(--brycks-border-default)'}`,\r\n    transition: transition.spring,\r\n    boxShadow: isFocused ? focusRing.default : 'inset 0 1px 2px rgba(0,0,0,0.05)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const thumbStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: padding,\r\n    left: checked ? padding + travel : padding,\r\n    width: isPressed ? config.thumb + 4 : config.thumb,\r\n    height: config.thumb,\r\n    borderRadius: config.thumb / 2,\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    boxShadow: 'var(--brycks-shadow-sm)',\r\n    transition: transition.spring,\r\n    transform: isPressed ? `scale(${scale.pressedStrong})` : `scale(${scale.normal})`,\r\n  }\r\n\r\n  const inputStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: '100%',\r\n    height: '100%',\r\n    opacity: 0,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    margin: 0,\r\n  }\r\n\r\n  const labelContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: componentGap.xs,\r\n    paddingTop: (config.height - fontSize * componentLineHeight.snug) / 2,\r\n  }\r\n\r\n  const labelStyle: CSSProperties = {\r\n    fontSize,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-default)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSize - 1,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n      onMouseLeave={() => setIsPressed(false)}\r\n    >\r\n      <span style={trackStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={thumbStyle} />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelStyle}>{label}</span>}\r\n          {description && <span style={descriptionStyle}>{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isPressed","setIsPressed","config","switchSizes","fontSize","componentFontSize","padding","travel","wrapperStyle","componentGap","stateOpacity","trackStyle","transition","focusRing","thumbStyle","scale","inputStyle","labelContainerStyle","componentLineHeight","labelStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Switch.cjs","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { switchSizes } from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = switchSizes[size]\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n    >\r\n      <span\r\n        className=\"brycks-switch__track\"\r\n        style={{\r\n          width: config.width,\r\n          height: config.height,\r\n          borderRadius: config.height / 2,\r\n        }}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          className=\"brycks-switch__input\"\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          {...props}\r\n        />\r\n        <span\r\n          className=\"brycks-switch__thumb\"\r\n          style={{\r\n            top: padding,\r\n            left: checked ? padding + travel : padding,\r\n            width: config.thumb,\r\n            height: config.thumb,\r\n            borderRadius: config.thumb / 2,\r\n          }}\r\n        />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span className=\"brycks-switch__label\">\r\n          {label && <span className=\"brycks-switch__label-text\">{label}</span>}\r\n          {description && <span className=\"brycks-switch__description\">{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","config","switchSizes","padding","travel","jsxs","cx","jsx"],"mappings":"yOAkCaA,EAASC,EAAAA,WAA0C,SAC9D,CACE,KAAAC,EAAO,KACP,MAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAASC,EAAAA,YAAYZ,CAAI,EACzBa,GAAWF,EAAO,OAASA,EAAO,OAAS,EAC3CG,EAASH,EAAO,MAAQA,EAAO,MAAQE,EAAU,EAEvD,OACEE,EAAAA,KAAC,QAAA,CACC,UAAWC,EAAAA,GACT,gBACA,kBAAkBhB,CAAI,GACtBO,GAAW,yBACXD,GAAY,0BACZH,CAAA,EAEF,MAAAC,EACA,cAAaC,EAEb,SAAA,CAAAU,EAAAA,KAAC,OAAA,CACC,UAAU,uBACV,MAAO,CACL,MAAOJ,EAAO,MACd,OAAQA,EAAO,OACf,aAAcA,EAAO,OAAS,CAAA,EAGhC,SAAA,CAAAM,EAAAA,IAAC,QAAA,CACC,IAAAP,EACA,KAAK,WACL,KAAK,SACL,UAAU,uBACV,QAAAH,EACA,SAAAD,EACA,eAAcC,EACd,SAAAC,EACC,GAAGC,CAAA,CAAA,EAENQ,EAAAA,IAAC,OAAA,CACC,UAAU,uBACV,MAAO,CACL,IAAKJ,EACL,KAAMN,EAAUM,EAAUC,EAASD,EACnC,MAAOF,EAAO,MACd,OAAQA,EAAO,MACf,aAAcA,EAAO,MAAQ,CAAA,CAC/B,CAAA,CACF,CAAA,CAAA,GAGAV,GAASC,IACTa,EAAAA,KAAC,OAAA,CAAK,UAAU,uBACb,SAAA,CAAAd,GAASgB,EAAAA,IAAC,OAAA,CAAK,UAAU,4BAA6B,SAAAhB,EAAM,EAC5DC,GAAee,EAAAA,IAAC,OAAA,CAAK,UAAU,6BAA8B,SAAAf,CAAA,CAAY,CAAA,CAAA,CAC5E,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDJ,EAAO,YAAc"}

package/dist/components/form/Switch/Switch.js

@@ -1,118 +1,83 @@
-import { jsxs as p, jsx as s } from "react/jsx-runtime";
-import { forwardRef as D, useState as m } from "react";
-import { cx as L } from "../../../utils/styles.js";
-import { componentGap as y, switchSizes as N } from "../../../design-system/primitives/sizing.js";
-import { stateOpacity as P, scale as f } from "../../../design-system/primitives/opacity.js";
-import { focusRing as B } from "../../../design-system/primitives/focus.js";
-import { transition as b } from "../../../design-system/primitives/transitions.js";
-import { componentLineHeight as u, componentFontSize as G } from "../../../design-system/primitives/typography.js";
-const O = D(function({
-  size: n = "md",
-  label: i,
-  description: a,
-  className: g,
-  style: w,
-  testId: S,
-  disabled: e,
-  checked: o,
-  onChange: x,
-  ...k
-}, v) {
-  const [F, h] = m(!1), [d, l] = m(!1), t = N[n], c = G[n], r = (t.height - t.thumb) / 2, R = t.width - t.thumb - r * 2, $ = {
-    display: "inline-flex",
-    alignItems: "flex-start",
-    gap: y.xl,
-    cursor: e ? "not-allowed" : "pointer",
-    opacity: e ? P.disabled : 1
-  }, C = {
-    position: "relative",
-    width: t.width,
-    height: t.height,
-    borderRadius: t.height / 2,
-    backgroundColor: o ? "var(--brycks-primary-default)" : "var(--brycks-background-muted)",
-    border: `1px solid ${o ? "var(--brycks-primary-default)" : "var(--brycks-border-default)"}`,
-    transition: b.spring,
-    boxShadow: F ? B.default : "inset 0 1px 2px rgba(0,0,0,0.05)",
-    flexShrink: 0
-  }, H = {
-    position: "absolute",
-    top: r,
-    left: o ? r + R : r,
-    width: d ? t.thumb + 4 : t.thumb,
-    height: t.thumb,
-    borderRadius: t.thumb / 2,
-    backgroundColor: "var(--brycks-background-elevated)",
-    boxShadow: "var(--brycks-shadow-sm)",
-    transition: b.spring,
-    transform: d ? `scale(${f.pressedStrong})` : `scale(${f.normal})`
-  }, I = {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    opacity: 0,
-    cursor: e ? "not-allowed" : "pointer",
-    margin: 0
-  }, M = {
-    display: "flex",
-    flexDirection: "column",
-    gap: y.xs,
-    paddingTop: (t.height - c * u.snug) / 2
-  }, j = {
-    fontSize: c,
-    lineHeight: u.snug,
-    color: "var(--brycks-foreground-default)",
-    userSelect: "none"
-  }, z = {
-    fontSize: c - 1,
-    lineHeight: u.snug,
-    color: "var(--brycks-foreground-muted)",
-    userSelect: "none"
-  };
-  return /* @__PURE__ */ p(
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { cx as u } from "../../../utils/styles.js";
+import { switchSizes as _ } from "../../../design-system/primitives/sizing.js";
+const k = y(function({
+  size: e = "md",
+  label: h,
+  description: r,
+  className: b,
+  style: l,
+  testId: n,
+  disabled: m,
+  checked: s,
+  onChange: o,
+  ...w
+}, d) {
+  const t = _[e], c = (t.height - t.thumb) / 2, p = t.width - t.thumb - c * 2;
+  return /* @__PURE__ */ a(
     "label",
     {
-      className: L(
+      className: u(
         "brycks-switch",
-        `brycks-switch--${n}`,
-        o && "brycks-switch--checked",
-        e && "brycks-switch--disabled",
-        g
+        `brycks-switch--${e}`,
+        s && "brycks-switch--checked",
+        m && "brycks-switch--disabled",
+        b
       ),
-      style: { ...$, ...w },
-      "data-testid": S,
-      onMouseDown: () => l(!0),
-      onMouseUp: () => l(!1),
-      onMouseLeave: () => l(!1),
+      style: l,
+      "data-testid": n,
       children: [
-        /* @__PURE__ */ p("span", { style: C, children: [
-          /* @__PURE__ */ s(
-            "input",
-            {
-              ref: v,
-              type: "checkbox",
-              role: "switch",
-              style: I,
-              checked: o,
-              disabled: e,
-              "aria-checked": o,
-              onChange: x,
-              onFocus: () => h(!0),
-              onBlur: () => h(!1),
-              ...k
-            }
-          ),
-          /* @__PURE__ */ s("span", { style: H })
-        ] }),
-        (i || a) && /* @__PURE__ */ p("span", { style: M, children: [
-          i && /* @__PURE__ */ s("span", { style: j, children: i }),
-          a && /* @__PURE__ */ s("span", { style: z, children: a })
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: "brycks-switch__track",
+            style: {
+              width: t.width,
+              height: t.height,
+              borderRadius: t.height / 2
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "input",
+                {
+                  ref: d,
+                  type: "checkbox",
+                  role: "switch",
+                  className: "brycks-switch__input",
+                  checked: s,
+                  disabled: m,
+                  "aria-checked": s,
+                  onChange: o,
+                  ...w
+                }
+              ),
+              /* @__PURE__ */ i(
+                "span",
+                {
+                  className: "brycks-switch__thumb",
+                  style: {
+                    top: c,
+                    left: s ? c + p : c,
+                    width: t.thumb,
+                    height: t.thumb,
+                    borderRadius: t.thumb / 2
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        (h || r) && /* @__PURE__ */ a("span", { className: "brycks-switch__label", children: [
+          h && /* @__PURE__ */ i("span", { className: "brycks-switch__label-text", children: h }),
+          r && /* @__PURE__ */ i("span", { className: "brycks-switch__description", children: r })
         ] })
       ]
     }
   );
 });
-O.displayName = "Switch";
+k.displayName = "Switch";
 export {
-  O as Switch
+  k as Switch
 };
 //# sourceMappingURL=Switch.js.map

package/dist/components/form/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  type CSSProperties,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport {\r\n  switchSizes,\r\n  componentGap,\r\n  componentFontSize,\r\n  componentLineHeight,\r\n  focusRing,\r\n  transition,\r\n  stateOpacity,\r\n  scale,\r\n} from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [isFocused, setIsFocused] = useState(false)\r\n  const [isPressed, setIsPressed] = useState(false)\r\n\r\n  const config = switchSizes[size]\r\n  const fontSize = componentFontSize[size]\r\n\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  const wrapperStyle: CSSProperties = {\r\n    display: 'inline-flex',\r\n    alignItems: 'flex-start',\r\n    gap: componentGap.xl,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    opacity: disabled ? stateOpacity.disabled : 1,\r\n  }\r\n\r\n  const trackStyle: CSSProperties = {\r\n    position: 'relative',\r\n    width: config.width,\r\n    height: config.height,\r\n    borderRadius: config.height / 2,\r\n    backgroundColor: checked\r\n      ? 'var(--brycks-primary-default)'\r\n      : 'var(--brycks-background-muted)',\r\n    border: `1px solid ${checked ? 'var(--brycks-primary-default)' : 'var(--brycks-border-default)'}`,\r\n    transition: transition.spring,\r\n    boxShadow: isFocused ? focusRing.default : 'inset 0 1px 2px rgba(0,0,0,0.05)',\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const thumbStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: padding,\r\n    left: checked ? padding + travel : padding,\r\n    width: isPressed ? config.thumb + 4 : config.thumb,\r\n    height: config.thumb,\r\n    borderRadius: config.thumb / 2,\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    boxShadow: 'var(--brycks-shadow-sm)',\r\n    transition: transition.spring,\r\n    transform: isPressed ? `scale(${scale.pressedStrong})` : `scale(${scale.normal})`,\r\n  }\r\n\r\n  const inputStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    width: '100%',\r\n    height: '100%',\r\n    opacity: 0,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    margin: 0,\r\n  }\r\n\r\n  const labelContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: componentGap.xs,\r\n    paddingTop: (config.height - fontSize * componentLineHeight.snug) / 2,\r\n  }\r\n\r\n  const labelStyle: CSSProperties = {\r\n    fontSize,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-default)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSize - 1,\r\n    lineHeight: componentLineHeight.snug,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    userSelect: 'none',\r\n  }\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={{ ...wrapperStyle, ...style }}\r\n      data-testid={testId}\r\n      onMouseDown={() => setIsPressed(true)}\r\n      onMouseUp={() => setIsPressed(false)}\r\n      onMouseLeave={() => setIsPressed(false)}\r\n    >\r\n      <span style={trackStyle}>\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          style={inputStyle}\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          onFocus={() => setIsFocused(true)}\r\n          onBlur={() => setIsFocused(false)}\r\n          {...props}\r\n        />\r\n        <span style={thumbStyle} />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span style={labelContainerStyle}>\r\n          {label && <span style={labelStyle}>{label}</span>}\r\n          {description && <span style={descriptionStyle}>{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","isFocused","setIsFocused","useState","isPressed","setIsPressed","config","switchSizes","fontSize","componentFontSize","padding","travel","wrapperStyle","componentGap","stateOpacity","trackStyle","transition","focusRing","thumbStyle","scale","inputStyle","labelContainerStyle","componentLineHeight","labelStyle","descriptionStyle","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/form/Switch/Switch.tsx"],"sourcesContent":["/**\r\n * Switch Component\r\n *\r\n * Apple-inspired toggle switch with smooth spring animation.\r\n * Clean, tactile design with satisfying micro-interactions.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n *\r\n * @module components/form/Switch\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n} from 'react'\r\nimport { switchSizes } from '../../../design-system'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type SwitchSize = 'sm' | 'md' | 'lg'\r\n\r\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {\r\n  /** Switch size */\r\n  size?: SwitchSize\r\n  /** Label text */\r\n  label?: ReactNode\r\n  /** Description below label */\r\n  description?: ReactNode\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  {\r\n    size = 'md',\r\n    label,\r\n    description,\r\n    className,\r\n    style,\r\n    testId,\r\n    disabled,\r\n    checked,\r\n    onChange,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = switchSizes[size]\r\n  const padding = (config.height - config.thumb) / 2\r\n  const travel = config.width - config.thumb - padding * 2\r\n\r\n  return (\r\n    <label\r\n      className={cx(\r\n        'brycks-switch',\r\n        `brycks-switch--${size}`,\r\n        checked && 'brycks-switch--checked',\r\n        disabled && 'brycks-switch--disabled',\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n    >\r\n      <span\r\n        className=\"brycks-switch__track\"\r\n        style={{\r\n          width: config.width,\r\n          height: config.height,\r\n          borderRadius: config.height / 2,\r\n        }}\r\n      >\r\n        <input\r\n          ref={ref}\r\n          type=\"checkbox\"\r\n          role=\"switch\"\r\n          className=\"brycks-switch__input\"\r\n          checked={checked}\r\n          disabled={disabled}\r\n          aria-checked={checked}\r\n          onChange={onChange}\r\n          {...props}\r\n        />\r\n        <span\r\n          className=\"brycks-switch__thumb\"\r\n          style={{\r\n            top: padding,\r\n            left: checked ? padding + travel : padding,\r\n            width: config.thumb,\r\n            height: config.thumb,\r\n            borderRadius: config.thumb / 2,\r\n          }}\r\n        />\r\n      </span>\r\n\r\n      {(label || description) && (\r\n        <span className=\"brycks-switch__label\">\r\n          {label && <span className=\"brycks-switch__label-text\">{label}</span>}\r\n          {description && <span className=\"brycks-switch__description\">{description}</span>}\r\n        </span>\r\n      )}\r\n    </label>\r\n  )\r\n})\r\n\r\nSwitch.displayName = 'Switch'\r\n"],"names":["Switch","forwardRef","size","label","description","className","style","testId","disabled","checked","onChange","props","ref","config","switchSizes","padding","travel","jsxs","cx","jsx"],"mappings":";;;;AAkCO,MAAMA,IAASC,EAA0C,SAC9D;AAAA,EACE,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASC,EAAYZ,CAAI,GACzBa,KAAWF,EAAO,SAASA,EAAO,SAAS,GAC3CG,IAASH,EAAO,QAAQA,EAAO,QAAQE,IAAU;AAEvD,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBhB,CAAI;AAAA,QACtBO,KAAW;AAAA,QACXD,KAAY;AAAA,QACZH;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaC;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOJ,EAAO;AAAA,cACd,QAAQA,EAAO;AAAA,cACf,cAAcA,EAAO,SAAS;AAAA,YAAA;AAAA,YAGhC,UAAA;AAAA,cAAA,gBAAAM;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAAP;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,SAAAH;AAAA,kBACA,UAAAD;AAAA,kBACA,gBAAcC;AAAA,kBACd,UAAAC;AAAA,kBACC,GAAGC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEN,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,KAAKJ;AAAA,oBACL,MAAMN,IAAUM,IAAUC,IAASD;AAAA,oBACnC,OAAOF,EAAO;AAAA,oBACd,QAAQA,EAAO;AAAA,oBACf,cAAcA,EAAO,QAAQ;AAAA,kBAAA;AAAA,gBAC/B;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,SAGAV,KAASC,MACT,gBAAAa,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,UAAAd,KAAS,gBAAAgB,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAhB,GAAM;AAAA,UAC5DC,KAAe,gBAAAe,EAAC,QAAA,EAAK,WAAU,8BAA8B,UAAAf,EAAA,CAAY;AAAA,QAAA,EAAA,CAC5E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDJ,EAAO,cAAc;"}

package/dist/components/layout/Card/Card.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),b=require("../../../utils/styles.cjs"),m=require("../../../design-system/primitives/sizing.cjs"),c=require("../../../design-system/tokens/motion.cjs"),o=require("../../../design-system/tokens/spacing.cjs"),j={none:0,sm:o.spacing[3],md:o.spacing[4],lg:o.spacing[6],xl:o.spacing[8]},k=l.forwardRef(function({variant:r="elevated",padding:t="md",interactive:s=!1,selected:a=!1,className:d,style:n,children:i,testId:f,...g},h){const w={...(()=>{const e={borderRadius:"var(--brycks-radius-lg)",transition:`transform ${c.durations.quick}ms ${c.easings.easeOut}, box-shadow ${c.durations.quick}ms ${c.easings.easeOut}, border-color ${c.durations.quick}ms ${c.easings.easeOut}`};switch(r){case"elevated":return{...e,backgroundColor:"var(--brycks-background-elevated)",boxShadow:a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)":"var(--brycks-shadow-md)",border:"1px solid var(--brycks-border-subtle)"};case"outline":return{...e,backgroundColor:"var(--brycks-background-default)",border:a?"2px solid var(--brycks-primary-default)":"1px solid var(--brycks-border-default)"};case"filled":return{...e,backgroundColor:"var(--brycks-background-muted)",border:a?"2px solid var(--brycks-primary-default)":"1px solid transparent"};case"ghost":return{...e,backgroundColor:"transparent",border:a?"2px solid var(--brycks-primary-default)":"1px solid transparent"}}})(),padding:j[t],display:"flex",flexDirection:"column",cursor:s?"pointer":void 0,...n},S=l.useCallback(y=>{const e=y.currentTarget;r==="elevated"?(e.style.boxShadow=a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-lg)":"var(--brycks-shadow-lg)",e.style.transform="translateY(-2px)"):r!=="ghost"&&(e.style.borderColor="var(--brycks-border-strong)")},[r,a]),q=l.useCallback(y=>{const e=y.currentTarget;r==="elevated"?(e.style.boxShadow=a?"0 0 0 2px var(--brycks-primary-default), var(--brycks-shadow-md)":"var(--brycks-shadow-md)",e.style.transform="translateY(0)"):r!=="ghost"&&(e.style.borderColor=a?"var(--brycks-primary-default)":"var(--brycks-border-default)")},[r,a]);return u.jsx("div",{ref:h,className:b.cx("brycks-card",`brycks-card--${r}`,s&&"brycks-card--interactive",a&&"brycks-card--selected",d),style:w,"data-testid":f,onMouseEnter:s?S:void 0,onMouseLeave:s?q:void 0,...g,children:i})});k.displayName="Card";const x=l.forwardRef(function({divider:r=!1,className:t,style:s,children:a,...d},n){const i={display:"flex",alignItems:"center",justifyContent:"space-between",gap:m.componentGap.xl,paddingBottom:r?o.spacing[4]:0,marginBottom:r?o.spacing[4]:o.spacing[3],borderBottom:r?"1px solid var(--brycks-border-muted)":void 0,...s};return u.jsx("div",{ref:n,className:b.cx("brycks-card-header",t),style:i,...d,children:a})});x.displayName="CardHeader";const v=l.forwardRef(function({className:r,style:t,children:s,...a},d){const n={flex:1,...t};return u.jsx("div",{ref:d,className:b.cx("brycks-card-body",r),style:n,...a,children:s})});v.displayName="CardBody";const C=l.forwardRef(function({divider:r=!1,align:t="right",className:s,style:a,children:d,...n},i){const g={display:"flex",alignItems:"center",justifyContent:{left:"flex-start",center:"center",right:"flex-end",between:"space-between"}[t],gap:m.componentGap.xl,paddingTop:r?o.spacing[4]:0,marginTop:r?o.spacing[4]:o.spacing[3],borderTop:r?"1px solid var(--brycks-border-muted)":void 0,...a};return u.jsx("div",{ref:i,className:b.cx("brycks-card-footer",s),style:g,...n,children:d})});C.displayName="CardFooter";exports.Card=k;exports.CardBody=v;exports.CardFooter=C;exports.CardHeader=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),i=require("../../../utils/styles.cjs"),f=o.forwardRef(function({variant:r="elevated",padding:e="md",interactive:a=!1,selected:d=!1,className:c,style:s,children:y,testId:b,..._},k){return t.jsx("div",{ref:k,className:i.cx("brycks-card",`brycks-card--${r}`,`brycks-card--padding-${e}`,a&&"brycks-card--interactive",d&&"brycks-card--selected",c),style:s,"data-testid":b,..._,children:y})});f.displayName="Card";const l=o.forwardRef(function({divider:r=!1,className:e,style:a,children:d,...c},s){return t.jsx("div",{ref:s,className:i.cx("brycks-card__header",r&&"brycks-card__header--divider",e),style:a,...c,children:d})});l.displayName="CardHeader";const C=o.forwardRef(function({className:r,style:e,children:a,...d},c){return t.jsx("div",{ref:c,className:i.cx("brycks-card__body",r),style:e,...d,children:a})});C.displayName="CardBody";const u=o.forwardRef(function({divider:r=!1,align:e="right",className:a,style:d,children:c,...s},y){return t.jsx("div",{ref:y,className:i.cx("brycks-card__footer",r&&"brycks-card__footer--divider",`brycks-card__footer--${e}`,a),style:d,...s,children:c})});u.displayName="CardFooter";exports.Card=f;exports.CardBody=C;exports.CardFooter=u;exports.CardHeader=l;
 //# sourceMappingURL=Card.cjs.map