@tonyarbor/components 0.6.0 → 0.7.1

package/dist/chunk-GIQDPHZQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ModalHeader/ModalHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { SectionIcon, SectionIconVariant } from '../SectionIcon';\n\nexport interface ModalHeaderProps {\n  /**\n   * The title text for the modal header\n   */\n  title: string;\n  /**\n   * Optional icon variant to display before the title\n   * Uses the SectionIcon component variants: 'warning', 'danger', 'info', 'success'\n   */\n  icon?: SectionIconVariant;\n  /**\n   * Callback when close button is clicked\n   * If not provided, close button will not be shown\n   */\n  onClose?: () => void;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Close X icon\nconst CloseIcon = () => (\n  <svg\n    width=\"10\"\n    height=\"10\"\n    viewBox=\"0 0 10 10\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M1 1L9 9M9 1L1 9\"\n      stroke=\"#2f2f2f\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n// Arbor Design System modal header styles\nconst modalHeaderStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '16px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    minHeight: '56px',\n  },\n  leftContent: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '16px',\n    flex: 1,\n  },\n  title: {\n    fontSize: '22px',\n    fontWeight: '600',\n    color: '#2f2f2f',\n    lineHeight: '1.25',\n    margin: 0,\n  },\n  closeButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    borderRadius: '16px',\n    backgroundColor: '#ffffff',\n    border: 'none',\n    cursor: 'pointer',\n    padding: 0,\n    flexShrink: 0,\n    transition: 'background-color 0.15s ease-in-out',\n  },\n  closeButtonHover: {\n    backgroundColor: '#f8f8f8',\n  },\n  closeButtonFocus: {\n    outline: '3px solid #3cad51',\n    outlineOffset: '-3px',\n  },\n};\n\n/**\n * ModalHeader component - Arbor Design System\n *\n * The header part of a modal dialog with title, optional icon, and close button.\n * The icon uses SectionIcon variants (warning, danger, info, success).\n *\n * @example\n * ```tsx\n * // Basic modal header with close button\n * <ModalHeader\n *   title=\"What would you like to do?\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header with warning icon\n * <ModalHeader\n *   title=\"Are you sure?\"\n *   icon=\"warning\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header with danger icon (error state)\n * <ModalHeader\n *   title=\"Sorry, we can't find this page\"\n *   icon=\"danger\"\n *   onClose={() => setIsOpen(false)}\n * />\n *\n * // Modal header without close button\n * <ModalHeader\n *   title=\"Processing...\"\n *   icon=\"info\"\n * />\n * ```\n */\nexport const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ title, icon, onClose, className, style, ...props }, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const closeButtonStyle: React.CSSProperties = {\n      ...modalHeaderStyles.closeButton,\n      ...(isHovered && modalHeaderStyles.closeButtonHover),\n      ...(isFocused && modalHeaderStyles.closeButtonFocus),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal-header', className)}\n        style={{ ...modalHeaderStyles.container, ...style }}\n        {...props}\n      >\n        <div style={modalHeaderStyles.leftContent}>\n          {icon && <SectionIcon variant={icon} />}\n          <h2 style={modalHeaderStyles.title}>{title}</h2>\n        </div>\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            style={closeButtonStyle}\n            aria-label=\"Close modal\"\n          >\n            <CloseIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nModalHeader.displayName = 'ModalHeader';\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAqCjB,cAgHI,YAhHJ;AARJ,IAAM,YAAY,MAChB;AAAA,EAAC;AAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA;AAAA,IACjB;AAAA;AACF;AAIF,IAAM,oBAAoB;AAAA,EACxB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,IAChB,iBAAiB;AAAA,EACnB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF;AAqCO,IAAM,cAAoB;AAAA,EAC/B,CAAC,EAAE,OAAO,MAAM,SAAS,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC7D,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAEtD,UAAM,mBAAwC;AAAA,MAC5C,GAAG,kBAAkB;AAAA,MACrB,GAAI,aAAa,kBAAkB;AAAA,MACnC,GAAI,aAAa,kBAAkB;AAAA,IACrC;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAS;AAAA,QAC/C,OAAO,EAAE,GAAG,kBAAkB,WAAW,GAAG,MAAM;AAAA,QACjD,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,OAAO,kBAAkB,aAC3B;AAAA,oBAAQ,oBAAC,eAAY,SAAS,MAAM;AAAA,YACrC,oBAAC,QAAG,OAAO,kBAAkB,OAAQ,iBAAM;AAAA,aAC7C;AAAA,UACC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,cAAc,MAAM,aAAa,IAAI;AAAA,cACrC,cAAc,MAAM,aAAa,KAAK;AAAA,cACtC,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAChC,OAAO;AAAA,cACP,cAAW;AAAA,cAEX,8BAAC,aAAU;AAAA;AAAA,UACb;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-HG2ORLLW.mjs

@@ -0,0 +1,116 @@
+import {
+  Logo
+} from "./chunk-NNYU4DPD.mjs";
+import {
+  Avatar
+} from "./chunk-JSG27ZZS.mjs";
+
+// src/AvatarLogoLockup/AvatarLogoLockup.tsx
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AvatarLogoLockup = React.forwardRef(
+  ({
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const containerStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "4px",
+      height: "40px",
+      backgroundColor: isHovered ? "#f8f8f8" : "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "99px",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      transition: "background-color 0.15s ease-in-out",
+      ...style
+    };
+    const avatarSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      borderRadius: "99px",
+      cursor: onAvatarClick ? "pointer" : "default",
+      backgroundColor: "transparent",
+      border: "none",
+      padding: 0
+    };
+    const dividerStyles = {
+      width: "1px",
+      height: "24px",
+      backgroundColor: "#efefef",
+      flexShrink: 0
+    };
+    const logoSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      cursor: onLogoClick ? "pointer" : "default",
+      padding: 0
+    };
+    const AvatarSection = onAvatarClick ? "button" : "div";
+    const LogoSection = onLogoClick ? "button" : "div";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsxs(
+            AvatarSection,
+            {
+              style: {
+                ...avatarSectionStyles,
+                ...onAvatarClick ? { outline: "none" } : {}
+              },
+              onClick: onAvatarClick,
+              ...onAvatarClick ? { type: "button" } : {},
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    size: "medium",
+                    src: avatarSrc,
+                    initials: avatarInitials,
+                    alt: avatarAlt
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: dividerStyles }),
+          /* @__PURE__ */ jsx(
+            LogoSection,
+            {
+              style: {
+                ...logoSectionStyles,
+                ...onLogoClick ? { outline: "none", backgroundColor: "transparent", border: "none" } : {}
+              },
+              onClick: onLogoClick,
+              ...onLogoClick ? { type: "button" } : {},
+              children: /* @__PURE__ */ jsx(Logo, { withText: true, light: true, height: 25 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarLogoLockup.displayName = "AvatarLogoLockup";
+
+export {
+  AvatarLogoLockup
+};
+//# sourceMappingURL=chunk-HG2ORLLW.mjs.map

package/dist/chunk-HG2ORLLW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AvatarLogoLockup/AvatarLogoLockup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { Avatar } from '../Avatar';\nimport { Logo } from '../Logo';\n\nexport interface AvatarLogoLockupProps {\n  /**\n   * Image source URL for the avatar\n   */\n  avatarSrc?: string;\n  /**\n   * Initials to display in avatar when no image is provided\n   */\n  avatarInitials?: string;\n  /**\n   * Alt text for the avatar image\n   */\n  avatarAlt?: string;\n  /**\n   * Click handler for the avatar section\n   */\n  onAvatarClick?: () => void;\n  /**\n   * Click handler for the logo section\n   */\n  onLogoClick?: () => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * AvatarLogoLockup component - Arbor Design System\n *\n * A navigation component combining user avatar with Arbor logo,\n * typically used in the top navigation bar.\n */\nexport const AvatarLogoLockup = React.forwardRef<HTMLDivElement, AvatarLogoLockupProps>(\n  (\n    {\n      avatarSrc,\n      avatarInitials,\n      avatarAlt = 'User avatar',\n      onAvatarClick,\n      onLogoClick,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n\n    const containerStyles: React.CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '4px',\n      padding: '4px',\n      height: '40px',\n      backgroundColor: isHovered ? '#f8f8f8' : '#ffffff',\n      border: '1px solid #efefef',\n      borderRadius: '99px',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      boxSizing: 'border-box',\n      transition: 'background-color 0.15s ease-in-out',\n      ...style,\n    };\n\n    const avatarSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '4px',\n      borderRadius: '99px',\n      cursor: onAvatarClick ? 'pointer' : 'default',\n      backgroundColor: 'transparent',\n      border: 'none',\n      padding: 0,\n    };\n\n    const dividerStyles: React.CSSProperties = {\n      width: '1px',\n      height: '24px',\n      backgroundColor: '#efefef',\n      flexShrink: 0,\n    };\n\n    const logoSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      cursor: onLogoClick ? 'pointer' : 'default',\n      padding: 0,\n    };\n\n    const AvatarSection = onAvatarClick ? 'button' : 'div';\n    const LogoSection = onLogoClick ? 'button' : 'div';\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        style={containerStyles}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <AvatarSection\n          style={{\n            ...avatarSectionStyles,\n            ...(onAvatarClick ? { outline: 'none' } : {}),\n          }}\n          onClick={onAvatarClick}\n          {...(onAvatarClick ? { type: 'button' } : {})}\n        >\n          <Avatar\n            size=\"medium\"\n            src={avatarSrc}\n            initials={avatarInitials}\n            alt={avatarAlt}\n          />\n          <ChevronDown size={12} color=\"#2f2f2f\" strokeWidth={2} />\n        </AvatarSection>\n\n        <div style={dividerStyles} />\n\n        <LogoSection\n          style={{\n            ...logoSectionStyles,\n            ...(onLogoClick ? { outline: 'none', backgroundColor: 'transparent', border: 'none' } : {}),\n          }}\n          onClick={onLogoClick}\n          {...(onLogoClick ? { type: 'button' } : {})}\n        >\n          <Logo withText={true} light={true} height={25} />\n        </LogoSection>\n      </div>\n    );\n  }\n);\n\nAvatarLogoLockup.displayName = 'AvatarLogoLockup';\n"],"mappings":";;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AA2GpB,SAQE,KARF;AAlED,IAAM,mBAAyB;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAEtD,UAAM,kBAAuC;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiB,YAAY,YAAY;AAAA,MACzC,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,GAAG;AAAA,IACL;AAEA,UAAM,sBAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,QAAQ,gBAAgB,YAAY;AAAA,MACpC,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAEA,UAAM,gBAAqC;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,YAAY;AAAA,IACd;AAEA,UAAM,oBAAyC;AAAA,MAC7C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,cAAc,YAAY;AAAA,MAClC,SAAS;AAAA,IACX;AAEA,UAAM,gBAAgB,gBAAgB,WAAW;AACjD,UAAM,cAAc,cAAc,WAAW;AAE7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QAEtC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,GAAI,gBAAgB,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,cAC7C;AAAA,cACA,SAAS;AAAA,cACR,GAAI,gBAAgB,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,cAE3C;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,KAAK;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA;AAAA,gBACP;AAAA,gBACA,oBAAC,eAAY,MAAM,IAAI,OAAM,WAAU,aAAa,GAAG;AAAA;AAAA;AAAA,UACzD;AAAA,UAEA,oBAAC,SAAI,OAAO,eAAe;AAAA,UAE3B;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,GAAI,cAAc,EAAE,SAAS,QAAQ,iBAAiB,eAAe,QAAQ,OAAO,IAAI,CAAC;AAAA,cAC3F;AAAA,cACA,SAAS;AAAA,cACR,GAAI,cAAc,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,cAEzC,8BAAC,QAAK,UAAU,MAAM,OAAO,MAAM,QAAQ,IAAI;AAAA;AAAA,UACjD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/{chunk-ALEJXAZY.mjs → chunk-NOUFR6W2.mjs}

@@ -66,6 +66,32 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    tertiary: {
+      backgroundColor: "#efefef",
+      // grey-100
+      color: "#2f2f2f",
+      // grey-900
+      ":hover": {
+        backgroundColor: "#dfdfdf"
+        // grey-200
+      },
+      ":active": {
+        backgroundColor: "#d1d1d1"
+        // grey-300
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#f8f8f8",
+        // grey-050
+        color: "#b3b3b3",
+        // grey-400
+        cursor: "not-allowed"
+      }
+    },
     destructive: {
       backgroundColor: "#c93232",
       // destructive-500
@@ -88,6 +114,36 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    "destructive-secondary": {
+      backgroundColor: "#ffffff",
+      color: "#a62323",
+      // destructive-600
+      border: "1px solid #c93232",
+      // destructive-500
+      ":hover": {
+        backgroundColor: "#a62323",
+        // destructive-600
+        color: "#ffffff",
+        border: "1px solid #a62323"
+      },
+      ":active": {
+        backgroundColor: "#920a0a",
+        // destructive-700
+        color: "#ffffff",
+        border: "1px solid #920a0a"
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500 (green focus ring)
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#ffffff",
+        color: "#b3b3b3",
+        border: "1px solid #d1d1d1",
+        cursor: "not-allowed"
+      }
+    },
     ghost: {
       backgroundColor: "transparent",
       color: "#0b800b",
@@ -191,4 +247,4 @@ Button.displayName = "Button";
 export {
   Button
 };
-//# sourceMappingURL=chunk-ALEJXAZY.mjs.map
+//# sourceMappingURL=chunk-NOUFR6W2.mjs.map

package/dist/chunk-NOUFR6W2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { clsx } from 'clsx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary' | 'ghost';\nexport type ButtonSize = 'small' | 'medium';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The visual style variant of the button\n   * @default 'primary'\n   */\n  variant?: ButtonVariant;\n  /**\n   * The size of the button\n   * @default 'medium'\n   */\n  size?: ButtonSize;\n  /**\n   * If true, the component will be rendered as a child element\n   * and merge its props with the child\n   */\n  asChild?: boolean;\n  /**\n   * The content of the button\n   */\n  children: React.ReactNode;\n}\n\n// Arbor Design System button styles\nconst buttonStyles = {\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    fontWeight: '500',\n    borderRadius: '99px', // Pill shape\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'all 0.2s ease-in-out',\n    outline: 'none',\n  },\n  variants: {\n    primary: {\n      backgroundColor: '#0e8a0e', // brand-600\n      color: '#ffffff',\n      ':hover': {\n        backgroundColor: '#005700', // brand-800\n      },\n      ':active': {\n        backgroundColor: '#024002', // brand-900\n      },\n      ':focus-visible': {\n        outline: '3px solid #3cad51', // brand-500\n        outlineOffset: '0px',\n      },\n      ':disabled': {\n        backgroundColor: '#b3b3b3', // grey-400\n        cursor: 'not-allowed',\n      },\n    },\n    secondary: {\n      backgroundColor: '#ffffff',\n      color: '#2f2f2f', // grey-900\n      border: '1px solid #d1d1d1', // grey-300\n      ':hover': {\n        backgroundColor: '#f8f8f8', // grey-050\n      },\n      ':active': {\n        backgroundColor: '#efefef', // grey-100\n      },\n      ':focus-visible': {\n        outline: '3px solid #3cad51', // brand-500\n        outlineOffset: '0px',\n      },\n      ':disabled': {\n        backgroundColor: '#f8f8f8',\n        color: '#b3b3b3',\n        cursor: 'not-allowed',\n      },\n    },\n    tertiary: {\n      backgroundColor: '#efefef', // grey-100\n      color: '#2f2f2f', // grey-900\n      ':hover': {\n        backgroundColor: '#dfdfdf', // grey-200\n      },\n      ':active': {\n        backgroundColor: '#d1d1d1', // grey-300\n      },\n      ':focus-visible': {\n        outline: '3px solid #3cad51', // brand-500\n        outlineOffset: '0px',\n      },\n      ':disabled': {\n        backgroundColor: '#f8f8f8', // grey-050\n        color: '#b3b3b3', // grey-400\n        cursor: 'not-allowed',\n      },\n    },\n    destructive: {\n      backgroundColor: '#c93232', // destructive-500\n      color: '#ffffff',\n      ':hover': {\n        backgroundColor: '#920a0a', // destructive-700\n      },\n      ':active': {\n        backgroundColor: '#610202', // destructive-800\n      },\n      ':focus-visible': {\n        outline: '3px solid #e86565', // destructive-300\n        outlineOffset: '0px',\n      },\n      ':disabled': {\n        backgroundColor: '#b3b3b3',\n        cursor: 'not-allowed',\n      },\n    },\n    'destructive-secondary': {\n      backgroundColor: '#ffffff',\n      color: '#a62323', // destructive-600\n      border: '1px solid #c93232', // destructive-500\n      ':hover': {\n        backgroundColor: '#a62323', // destructive-600\n        color: '#ffffff',\n        border: '1px solid #a62323',\n      },\n      ':active': {\n        backgroundColor: '#920a0a', // destructive-700\n        color: '#ffffff',\n        border: '1px solid #920a0a',\n      },\n      ':focus-visible': {\n        outline: '3px solid #3cad51', // brand-500 (green focus ring)\n        outlineOffset: '0px',\n      },\n      ':disabled': {\n        backgroundColor: '#ffffff',\n        color: '#b3b3b3',\n        border: '1px solid #d1d1d1',\n        cursor: 'not-allowed',\n      },\n    },\n    ghost: {\n      backgroundColor: 'transparent',\n      color: '#0b800b', // brand-700 for link style\n      textDecoration: 'underline',\n      ':hover': {\n        color: '#005700', // brand-800\n      },\n      ':active': {\n        color: '#024002', // brand-900\n      },\n      ':focus-visible': {\n        outline: '3px solid #3cad51',\n        outlineOffset: '2px',\n      },\n      ':disabled': {\n        color: '#b3b3b3',\n        cursor: 'not-allowed',\n      },\n    },\n  },\n  sizes: {\n    small: {\n      height: '32px',\n      fontSize: '13px',\n      padding: '8px 16px',\n    },\n    medium: {\n      height: '36px',\n      fontSize: '13px',\n      padding: '8px 16px',\n    },\n  },\n};\n\n/**\n * Button component - Arbor Design System\n *\n * A flexible button component with pill-shaped design following Arbor's design system.\n * Supports primary (green), secondary (outlined), destructive (red), and ghost (link-style) variants.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"medium\">\n *   Save Changes\n * </Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'medium',\n      asChild = false,\n      className,\n      disabled,\n      style,\n      children,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const variantStyles = buttonStyles.variants[variant];\n    const sizeStyles = buttonStyles.sizes[size];\n\n    const combinedStyle: React.CSSProperties = {\n      ...buttonStyles.base,\n      ...variantStyles,\n      ...sizeStyles,\n      ...(isHovered && !disabled && variantStyles[':hover']),\n      ...(isFocused && !disabled && variantStyles[':focus-visible']),\n      ...(disabled && variantStyles[':disabled']),\n      ...style,\n    };\n\n    const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setIsHovered(true);\n      onMouseEnter?.(e);\n    };\n\n    const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setIsHovered(false);\n      onMouseLeave?.(e);\n    };\n\n    const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    };\n\n    return (\n      <Comp\n        ref={ref}\n        className={clsx('arbor-button', className)}\n        style={combinedStyle}\n        disabled={disabled}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"mappings":"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","names":[]}

package/dist/chunk-P7RKUESQ.mjs

@@ -0,0 +1,37 @@
+// src/ModalFooter/ModalFooter.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+var modalFooterStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "16px",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    maxHeight: "56px"
+  }
+};
+var ModalFooter = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-modal-footer", className),
+        style: { ...modalFooterStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+
+export {
+  ModalFooter
+};
+//# sourceMappingURL=chunk-P7RKUESQ.mjs.map

package/dist/chunk-P7RKUESQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ModalFooter/ModalFooter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface ModalFooterProps {\n  /**\n   * The content of the footer, typically buttons\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Arbor Design System modal footer styles\nconst modalFooterStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: '16px',\n    width: '100%',\n    padding: '16px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    maxHeight: '56px',\n  },\n};\n\n/**\n * ModalFooter component - Arbor Design System\n *\n * The footer part of a modal dialog, typically containing action buttons.\n * Buttons are right-aligned by default.\n *\n * @example\n * ```tsx\n * // Footer with two buttons\n * <ModalFooter>\n *   <Button variant=\"tertiary\">Cancel</Button>\n *   <Button variant=\"primary\">Save</Button>\n * </ModalFooter>\n *\n * // Footer with destructive action\n * <ModalFooter>\n *   <Button variant=\"tertiary\">Cancel</Button>\n *   <Button variant=\"destructive-secondary\">Delete</Button>\n * </ModalFooter>\n * ```\n */\nexport const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal-footer', className)}\n        style={{ ...modalFooterStyles.container, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nModalFooter.displayName = 'ModalFooter';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAwDf;AAtCN,IAAM,oBAAoB;AAAA,EACxB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACF;AAuBO,IAAM,cAAoB;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAS;AAAA,QAC/C,OAAO,EAAE,GAAG,kBAAkB,WAAW,GAAG,MAAM;AAAA,QACjD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-YUXQQX7M.mjs

@@ -0,0 +1,182 @@
+import {
+  AvatarLogoLockup
+} from "./chunk-HG2ORLLW.mjs";
+import {
+  TopNavItem
+} from "./chunk-AVYGOALO.mjs";
+import {
+  SearchGlobal
+} from "./chunk-UPBHDBAK.mjs";
+import {
+  Button
+} from "./chunk-NOUFR6W2.mjs";
+
+// src/TopNavBar/TopNavBar.tsx
+import * as React from "react";
+import { Sparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TopNavBar = React.forwardRef(
+  ({
+    schoolLogoSrc,
+    schoolLogoAlt = "School logo",
+    onSchoolLogoClick,
+    navItems = [],
+    onNavItemClick,
+    searchValue = "",
+    onSearchChange,
+    onSearchSubmit,
+    onSearchClear,
+    actionButtonLabel = "Ask Arbor",
+    onActionButtonClick,
+    showActionButton = true,
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const containerStyles = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "4px 8px",
+      backgroundColor: "#ffffff",
+      boxShadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      zIndex: 1e3,
+      height: "48px",
+      ...style
+    };
+    const leftSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const schoolLogoContainerStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "64px",
+      height: "40px",
+      backgroundColor: "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "8px",
+      overflow: "hidden",
+      padding: "2px",
+      boxSizing: "border-box",
+      cursor: onSchoolLogoClick ? "pointer" : "default"
+    };
+    const schoolLogoImageStyles = {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      objectFit: "contain"
+    };
+    const placeholderStyles = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#f8f8f8",
+      color: "#949494",
+      fontSize: "10px",
+      fontWeight: 500,
+      textAlign: "center"
+    };
+    const navItemsGroupStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const rightSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const actionButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const SchoolLogoElement = onSchoolLogoClick ? "button" : "div";
+    return /* @__PURE__ */ jsxs("nav", { ref, className, style: containerStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: leftSectionStyles, children: [
+        /* @__PURE__ */ jsx(
+          SchoolLogoElement,
+          {
+            style: {
+              ...schoolLogoContainerStyles,
+              ...onSchoolLogoClick ? { outline: "none", border: "1px solid #efefef" } : {}
+            },
+            onClick: onSchoolLogoClick,
+            ...onSchoolLogoClick ? { type: "button" } : {},
+            children: schoolLogoSrc ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: schoolLogoSrc,
+                alt: schoolLogoAlt,
+                style: schoolLogoImageStyles
+              }
+            ) : /* @__PURE__ */ jsx("div", { style: placeholderStyles, children: "Logo" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: navItemsGroupStyles, children: navItems.map((item) => /* @__PURE__ */ jsx(
+          TopNavItem,
+          {
+            active: item.active,
+            onClick: () => onNavItemClick?.(item),
+            children: item.label
+          },
+          item.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: rightSectionStyles, children: [
+        /* @__PURE__ */ jsx(
+          SearchGlobal,
+          {
+            value: searchValue,
+            onChange: onSearchChange,
+            onSubmit: onSearchSubmit,
+            onClear: onSearchClear
+          }
+        ),
+        showActionButton && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            onClick: onActionButtonClick,
+            style: actionButtonStyles,
+            children: [
+              /* @__PURE__ */ jsx(Sparkles, { size: 16, strokeWidth: 2 }),
+              actionButtonLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AvatarLogoLockup,
+          {
+            avatarSrc,
+            avatarInitials,
+            avatarAlt,
+            onAvatarClick,
+            onLogoClick
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TopNavBar.displayName = "TopNavBar";
+
+export {
+  TopNavBar
+};
+//# sourceMappingURL=chunk-YUXQQX7M.mjs.map

package/dist/chunk-YUXQQX7M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TopNavBar/TopNavBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Sparkles } from 'lucide-react';\nimport { TopNavItem } from '../TopNavItem';\nimport { SearchGlobal } from '../SearchGlobal';\nimport { Button } from '../Button';\nimport { AvatarLogoLockup } from '../AvatarLogoLockup';\n\nexport interface NavItem {\n  /**\n   * Unique identifier for the nav item\n   */\n  id: string;\n  /**\n   * Display label for the nav item\n   */\n  label: string;\n  /**\n   * Whether this nav item is currently active\n   */\n  active?: boolean;\n}\n\nexport interface TopNavBarProps {\n  /**\n   * School logo image source URL\n   */\n  schoolLogoSrc?: string;\n  /**\n   * Alt text for school logo\n   */\n  schoolLogoAlt?: string;\n  /**\n   * Click handler for school logo\n   */\n  onSchoolLogoClick?: () => void;\n  /**\n   * Array of navigation items\n   */\n  navItems?: NavItem[];\n  /**\n   * Callback when a nav item is clicked\n   */\n  onNavItemClick?: (item: NavItem) => void;\n  /**\n   * Search value\n   */\n  searchValue?: string;\n  /**\n   * Search change handler\n   */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Search submit handler\n   */\n  onSearchSubmit?: (value: string) => void;\n  /**\n   * Search clear handler\n   */\n  onSearchClear?: () => void;\n  /**\n   * Action button label (e.g., \"Ask Arbor\")\n   */\n  actionButtonLabel?: string;\n  /**\n   * Action button click handler\n   */\n  onActionButtonClick?: () => void;\n  /**\n   * Whether to show the action button\n   */\n  showActionButton?: boolean;\n  /**\n   * User avatar image source URL\n   */\n  avatarSrc?: string;\n  /**\n   * User avatar initials (fallback when no image)\n   */\n  avatarInitials?: string;\n  /**\n   * User avatar alt text\n   */\n  avatarAlt?: string;\n  /**\n   * Avatar section click handler\n   */\n  onAvatarClick?: () => void;\n  /**\n   * Logo section click handler\n   */\n  onLogoClick?: () => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * TopNavBar component - Arbor Design System\n *\n * A full-width navigation bar fixed to the top of the page.\n * Contains school logo, navigation items, search, action button, and avatar-logo lockup.\n */\nexport const TopNavBar = React.forwardRef<HTMLElement, TopNavBarProps>(\n  (\n    {\n      schoolLogoSrc,\n      schoolLogoAlt = 'School logo',\n      onSchoolLogoClick,\n      navItems = [],\n      onNavItemClick,\n      searchValue = '',\n      onSearchChange,\n      onSearchSubmit,\n      onSearchClear,\n      actionButtonLabel = 'Ask Arbor',\n      onActionButtonClick,\n      showActionButton = true,\n      avatarSrc,\n      avatarInitials,\n      avatarAlt = 'User avatar',\n      onAvatarClick,\n      onLogoClick,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const containerStyles: React.CSSProperties = {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      right: 0,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '4px 8px',\n      backgroundColor: '#ffffff',\n      boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.08)',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      boxSizing: 'border-box',\n      zIndex: 1000,\n      height: '48px',\n      ...style,\n    };\n\n    const leftSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '16px',\n    };\n\n    const schoolLogoContainerStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '64px',\n      height: '40px',\n      backgroundColor: '#ffffff',\n      border: '1px solid #efefef',\n      borderRadius: '8px',\n      overflow: 'hidden',\n      padding: '2px',\n      boxSizing: 'border-box',\n      cursor: onSchoolLogoClick ? 'pointer' : 'default',\n    };\n\n    const schoolLogoImageStyles: React.CSSProperties = {\n      maxWidth: '100%',\n      maxHeight: '100%',\n      objectFit: 'contain',\n    };\n\n    const placeholderStyles: React.CSSProperties = {\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: '#f8f8f8',\n      color: '#949494',\n      fontSize: '10px',\n      fontWeight: 500,\n      textAlign: 'center',\n    };\n\n    const navItemsGroupStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n    };\n\n    const rightSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '16px',\n    };\n\n    const actionButtonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n    };\n\n    const SchoolLogoElement = onSchoolLogoClick ? 'button' : 'div';\n\n    return (\n      <nav ref={ref} className={className} style={containerStyles}>\n        {/* Left section: School logo + Nav items */}\n        <div style={leftSectionStyles}>\n          <SchoolLogoElement\n            style={{\n              ...schoolLogoContainerStyles,\n              ...(onSchoolLogoClick ? { outline: 'none', border: '1px solid #efefef' } : {}),\n            }}\n            onClick={onSchoolLogoClick}\n            {...(onSchoolLogoClick ? { type: 'button' } : {})}\n          >\n            {schoolLogoSrc ? (\n              <img\n                src={schoolLogoSrc}\n                alt={schoolLogoAlt}\n                style={schoolLogoImageStyles}\n              />\n            ) : (\n              <div style={placeholderStyles}>Logo</div>\n            )}\n          </SchoolLogoElement>\n\n          <div style={navItemsGroupStyles}>\n            {navItems.map((item) => (\n              <TopNavItem\n                key={item.id}\n                active={item.active}\n                onClick={() => onNavItemClick?.(item)}\n              >\n                {item.label}\n              </TopNavItem>\n            ))}\n          </div>\n        </div>\n\n        {/* Right section: Search + Action button + Avatar-Logo lockup */}\n        <div style={rightSectionStyles}>\n          <SearchGlobal\n            value={searchValue}\n            onChange={onSearchChange}\n            onSubmit={onSearchSubmit}\n            onClear={onSearchClear}\n          />\n\n          {showActionButton && (\n            <Button\n              variant=\"secondary\"\n              size=\"small\"\n              onClick={onActionButtonClick}\n              style={actionButtonStyles}\n            >\n              <Sparkles size={16} strokeWidth={2} />\n              {actionButtonLabel}\n            </Button>\n          )}\n\n          <AvatarLogoLockup\n            avatarSrc={avatarSrc}\n            avatarInitials={avatarInitials}\n            avatarAlt={avatarAlt}\n            onAvatarClick={onAvatarClick}\n            onLogoClick={onLogoClick}\n          />\n        </div>\n      </nav>\n    );\n  }\n);\n\nTopNavBar.displayName = 'TopNavBar';\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -31,12 +31,18 @@ export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.m
 export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.mjs';
 export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.mjs';
 export { Section, SectionProps } from './Section.mjs';
+export { ModalHeader, ModalHeaderProps } from './ModalHeader.mjs';
+export { ModalFooter, ModalFooterProps } from './ModalFooter.mjs';
+export { Modal, ModalContent, ModalContentProps, ModalProps } from './Modal.mjs';
+export { AvatarLogoLockup, AvatarLogoLockupProps } from './AvatarLogoLockup.mjs';
+export { TopNavItem, TopNavItemProps } from './TopNavItem.mjs';
+export { NavItem, TopNavBar, TopNavBarProps } from './TopNavBar.mjs';
 import 'react';
 
 /**
  * Shared TypeScript types for Arbor Design System components
  */
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary' | 'ghost';
 type ButtonSize = 'small' | 'medium';
 type InputSize = 'small' | 'medium';
 type ValidationState = 'default' | 'error' | 'success';

package/dist/index.d.ts

@@ -31,12 +31,18 @@ export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.j
 export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.js';
 export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.js';
 export { Section, SectionProps } from './Section.js';
+export { ModalHeader, ModalHeaderProps } from './ModalHeader.js';
+export { ModalFooter, ModalFooterProps } from './ModalFooter.js';
+export { Modal, ModalContent, ModalContentProps, ModalProps } from './Modal.js';
+export { AvatarLogoLockup, AvatarLogoLockupProps } from './AvatarLogoLockup.js';
+export { TopNavItem, TopNavItemProps } from './TopNavItem.js';
+export { NavItem, TopNavBar, TopNavBarProps } from './TopNavBar.js';
 import 'react';
 
 /**
  * Shared TypeScript types for Arbor Design System components
  */
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'destructive-secondary' | 'ghost';
 type ButtonSize = 'small' | 'medium';
 type InputSize = 'small' | 'medium';
 type ValidationState = 'default' | 'error' | 'success';