{"version":3,"sources":["../src/SideNavButton/SideNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Home, Menu, Star, Calendar, Bell, AlertTriangle, HelpCircle } from 'lucide-react';\n\nexport type SideNavButtonIcon = 'side-menu' | 'home' | 'favourite' | 'calendar' | 'notifications' | 'emergency-alert' | 'help';\n\nexport interface SideNavButtonProps {\n  /**\n   * The icon to display\n   */\n  icon: SideNavButtonIcon;\n  /**\n   * Whether the button is selected/active\n   */\n  selected?: boolean;\n  /**\n   * Whether the button is focused (shows green ring)\n   */\n  focused?: boolean;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Accessible label for the button\n   */\n  'aria-label'?: string;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * SideNavButton component - Arbor Design System\n *\n * A circular navigation button used in the side navigation bar.\n * Supports different icons and states (default, hover, active, selected, focused).\n */\nexport const SideNavButton = React.forwardRef<HTMLButtonElement, SideNavButtonProps>(\n  (\n    {\n      icon,\n      selected = false,\n      focused = false,\n      onClick,\n      'aria-label': ariaLabel,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isActive, setIsActive] = React.useState(false);\n\n    // Determine icon color based on state\n    const getIconColor = () => {\n      if (selected) return '#0e8a0e'; // Green for selected\n      if (isActive || isHovered) return '#2f2f2f'; // Dark gray for hover/active\n      return '#7e7e7e'; // Gray for default\n    };\n\n    // Determine background color based on state\n    const getBackgroundColor = () => {\n      if (selected) return '#f0faf3'; // Light green for selected\n      if (isActive) return '#efefef'; // Darker gray for active\n      if (isHovered) return '#f8f8f8'; // Light gray for hover\n      return 'transparent'; // Transparent for default\n    };\n\n    const buttonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '42px',\n      height: '42px',\n      borderRadius: '99px',\n      border: 'none',\n      backgroundColor: getBackgroundColor(),\n      cursor: 'pointer',\n      padding: 0,\n      outline: 'none',\n      transition: 'background-color 150ms ease, box-shadow 150ms ease',\n      boxShadow: focused ? '0px 0px 0px 3px #3cad51' : 'none',\n      ...style,\n    };\n\n    // Get the appropriate icon component\n    const renderIcon = () => {\n      const iconColor = getIconColor();\n      const iconSize = 20;\n      const strokeWidth = 2;\n\n      // All icons are stroke-only (outline), no fill - just color changes\n      const iconProps = {\n        size: iconSize,\n        color: iconColor,\n        strokeWidth,\n      };\n\n      switch (icon) {\n        case 'side-menu':\n          return <Menu {...iconProps} />;\n        case 'home':\n          return <Home {...iconProps} />;\n        case 'favourite':\n          return <Star {...iconProps} />;\n        case 'calendar':\n          return <Calendar {...iconProps} />;\n        case 'notifications':\n          return <Bell {...iconProps} />;\n        case 'emergency-alert':\n          return <AlertTriangle {...iconProps} />;\n        case 'help':\n          return <HelpCircle {...iconProps} />;\n        default:\n          return null;\n      }\n    };\n\n    // Default aria-label based on icon\n    const defaultAriaLabel = icon.charAt(0).toUpperCase() + icon.slice(1);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={className}\n        style={buttonStyles}\n        onClick={onClick}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => {\n          setIsHovered(false);\n          setIsActive(false);\n        }}\n        onMouseDown={() => setIsActive(true)}\n        onMouseUp={() => setIsActive(false)}\n        aria-label={ariaLabel || defaultAriaLabel}\n        aria-pressed={selected}\n      >\n        {renderIcon()}\n      </button>\n    );\n  }\n);\n\nSideNavButton.displayName = 'SideNavButton';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,MAAM,MAAM,UAAU,MAAM,eAAe,kBAAkB;AAwG3D;AA/DV,IAAM,gBAAsB;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AAGpD,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU,QAAO;AACrB,UAAI,YAAY,UAAW,QAAO;AAClC,aAAO;AAAA,IACT;AAGA,UAAM,qBAAqB,MAAM;AAC/B,UAAI,SAAU,QAAO;AACrB,UAAI,SAAU,QAAO;AACrB,UAAI,UAAW,QAAO;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,eAAoC;AAAA,MACxC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,iBAAiB,mBAAmB;AAAA,MACpC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW,UAAU,4BAA4B;AAAA,MACjD,GAAG;AAAA,IACL;AAGA,UAAM,aAAa,MAAM;AACvB,YAAM,YAAY,aAAa;AAC/B,YAAM,WAAW;AACjB,YAAM,cAAc;AAGpB,YAAM,YAAY;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,QACP;AAAA,MACF;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,YAAU,GAAG,WAAW;AAAA,QAClC,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,iBAAe,GAAG,WAAW;AAAA,QACvC,KAAK;AACH,iBAAO,oBAAC,cAAY,GAAG,WAAW;AAAA,QACpC;AACE,iBAAO;AAAA,MACX;AAAA,IACF;AAGA,UAAM,mBAAmB,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM;AAClB,uBAAa,KAAK;AAClB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,aAAa,MAAM,YAAY,IAAI;AAAA,QACnC,WAAW,MAAM,YAAY,KAAK;AAAA,QAClC,cAAY,aAAa;AAAA,QACzB,gBAAc;AAAA,QAEb,qBAAW;AAAA;AAAA,IACd;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}