@tonyarbor/components 0.2.1 → 0.6.0

package/dist/SearchOnPage.js

@@ -0,0 +1,171 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/SearchOnPage/index.ts
+var SearchOnPage_exports = {};
+__export(SearchOnPage_exports, {
+  SearchOnPage: () => SearchOnPage
+});
+module.exports = __toCommonJS(SearchOnPage_exports);
+
+// src/SearchOnPage/SearchOnPage.tsx
+var React = __toESM(require("react"));
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SearchOnPage = React.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onSubmit,
+    onClear,
+    placeholder = "Search Reports",
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+    const handleChange = (e) => {
+      onChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSubmit?.(value);
+      }
+    };
+    const handleClear = () => {
+      onChange?.("");
+      onClear?.();
+      inputRef.current?.focus();
+    };
+    const containerStyles = {
+      position: "relative",
+      width: "200px",
+      height: "32px",
+      backgroundColor: isFocused ? "#ffffff" : isHovered ? "#efefef" : "#ffffff",
+      borderRadius: "16px",
+      padding: "8px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      cursor: "text",
+      transition: "all 0.2s ease-in-out",
+      boxSizing: "border-box",
+      border: isFocused ? "1px solid #efefef" : "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const iconContainerStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      padding: "2px"
+    };
+    const inputStyles = {
+      border: "none",
+      outline: "none",
+      backgroundColor: "transparent",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      fontSize: "13px",
+      fontWeight: 400,
+      color: "#2f2f2f",
+      lineHeight: "1.5",
+      flex: 1,
+      width: "100%",
+      minWidth: 0
+    };
+    const clearButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      width: "16px",
+      height: "16px",
+      cursor: "pointer",
+      border: "none",
+      background: "none",
+      padding: 0
+    };
+    const showClearButton = isFocused && value.length > 0;
+    const iconColor = isFocused || isHovered ? "#2f2f2f" : "#595959";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className,
+        style: containerStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: () => inputRef.current?.focus(),
+        "data-testid": dataTestId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: iconContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { size: 12, color: iconColor, strokeWidth: 2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              placeholder: isFocused ? "" : placeholder,
+              style: inputStyles
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              style: clearButtonStyles,
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { size: 13.333, color: "#2f2f2f", strokeWidth: 2 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchOnPage.displayName = "SearchOnPage";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchOnPage
+});
+//# sourceMappingURL=SearchOnPage.js.map

package/dist/SearchOnPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SearchOnPage/index.ts","../src/SearchOnPage/SearchOnPage.tsx"],"sourcesContent":["export { SearchOnPage } from './SearchOnPage';\nexport type { SearchOnPageProps } from './SearchOnPage';\n","import * as React from 'react';\nimport { Search, X } from 'lucide-react';\n\nexport interface SearchOnPageProps {\n  /**\n   * Value of the search input\n   */\n  value?: string;\n  /**\n   * Callback when value changes\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Callback when search is submitted\n   */\n  onSubmit?: (value: string) => void;\n  /**\n   * Callback when clear button is clicked\n   */\n  onClear?: () => void;\n  /**\n   * Placeholder text\n   */\n  placeholder?: string;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n  /**\n   * Test ID for testing\n   */\n  'data-testid'?: string;\n}\n\n/**\n * SearchOnPage component - Arbor Design System\n *\n * A search input with fixed 200px width for filtering content on the current page.\n * Shows green focus ring when active and X button to clear.\n */\nexport const SearchOnPage = React.forwardRef<HTMLInputElement, SearchOnPageProps>(\n  (\n    {\n      value = '',\n      onChange,\n      onSubmit,\n      onClear,\n      placeholder = 'Search Reports',\n      className,\n      style,\n      'data-testid': dataTestId,\n    },\n    ref\n  ) => {\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [isHovered, setIsHovered] = React.useState(false);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge refs\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleFocus = () => {\n      setIsFocused(true);\n    };\n\n    const handleBlur = () => {\n      setIsFocused(false);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.value);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        onSubmit?.(value);\n      }\n    };\n\n    const handleClear = () => {\n      onChange?.('');\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const containerStyles: React.CSSProperties = {\n      position: 'relative',\n      width: '200px',\n      height: '32px',\n      backgroundColor: isFocused ? '#ffffff' : isHovered ? '#efefef' : '#ffffff',\n      borderRadius: '16px',\n      padding: '8px 16px',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n      cursor: 'text',\n      transition: 'all 0.2s ease-in-out',\n      boxSizing: 'border-box',\n      border: isFocused ? '1px solid #efefef' : 'none',\n      boxShadow: isFocused ? '0px 0px 0px 3px #3cad51' : 'none',\n      ...style,\n    };\n\n    const iconContainerStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      padding: '2px',\n    };\n\n    const inputStyles: React.CSSProperties = {\n      border: 'none',\n      outline: 'none',\n      backgroundColor: 'transparent',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      fontSize: '13px',\n      fontWeight: 400,\n      color: '#2f2f2f',\n      lineHeight: '1.5',\n      flex: 1,\n      width: '100%',\n      minWidth: 0,\n    };\n\n    const clearButtonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      width: '16px',\n      height: '16px',\n      cursor: 'pointer',\n      border: 'none',\n      background: 'none',\n      padding: 0,\n    };\n\n    const showClearButton = isFocused && value.length > 0;\n    const iconColor = isFocused || isHovered ? '#2f2f2f' : '#595959';\n\n    return (\n      <div\n        className={className}\n        style={containerStyles}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onClick={() => inputRef.current?.focus()}\n        data-testid={dataTestId}\n      >\n        <div style={iconContainerStyles}>\n          <Search size={12} color={iconColor} strokeWidth={2} />\n        </div>\n\n        <input\n          ref={inputRef}\n          type=\"text\"\n          value={value}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={isFocused ? '' : placeholder}\n          style={inputStyles}\n        />\n\n        {showClearButton && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={clearButtonStyles}\n            aria-label=\"Clear search\"\n          >\n            <X size={13.333} color=\"#2f2f2f\" strokeWidth={2} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nSearchOnPage.displayName = 'SearchOnPage';\n"],"mappings":"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","names":[]}

package/dist/SearchOnPage.mjs

@@ -0,0 +1,7 @@
+import {
+  SearchOnPage
+} from "./chunk-B7RX3TPX.mjs";
+export {
+  SearchOnPage
+};
+//# sourceMappingURL=SearchOnPage.mjs.map

package/dist/SearchOnPage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Section.d.mts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface SectionProps {
+    /**
+     * Content to display inside the section
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Section component - Arbor Design System
+ *
+ * A container component that provides consistent styling for content sections.
+ * Has 8px padding, 8px border radius, and white background.
+ * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.
+ *
+ * @example
+ * ```tsx
+ * // Basic section with heading and list rows
+ * <Section>
+ *   <SectionHeading title="Contact Information" />
+ *   <ListRow label="Email" value="john@example.com" />
+ *   <ListRow label="Phone" value="+44 123 456 7890" />
+ * </Section>
+ *
+ * // Section with interactive heading
+ * <Section>
+ *   <SectionHeadingInteractive title="Personal Details">
+ *     <SubSectionInteractive title="Profile">
+ *       <ListRow label="Name" value="John Smith" />
+ *     </SubSectionInteractive>
+ *   </SectionHeadingInteractive>
+ * </Section>
+ *
+ * // Multiple sections on a page
+ * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+ *   <Section>
+ *     <SectionHeading title="Section 1" />
+ *     <ListRow label="Field" value="Value" />
+ *   </Section>
+ *   <Section>
+ *     <SectionHeading title="Section 2" />
+ *     <ListRow label="Field" value="Value" />
+ *   </Section>
+ * </div>
+ * ```
+ */
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Section, type SectionProps };

package/dist/Section.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+interface SectionProps {
+    /**
+     * Content to display inside the section
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Section component - Arbor Design System
+ *
+ * A container component that provides consistent styling for content sections.
+ * Has 8px padding, 8px border radius, and white background.
+ * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.
+ *
+ * @example
+ * ```tsx
+ * // Basic section with heading and list rows
+ * <Section>
+ *   <SectionHeading title="Contact Information" />
+ *   <ListRow label="Email" value="john@example.com" />
+ *   <ListRow label="Phone" value="+44 123 456 7890" />
+ * </Section>
+ *
+ * // Section with interactive heading
+ * <Section>
+ *   <SectionHeadingInteractive title="Personal Details">
+ *     <SubSectionInteractive title="Profile">
+ *       <ListRow label="Name" value="John Smith" />
+ *     </SubSectionInteractive>
+ *   </SectionHeadingInteractive>
+ * </Section>
+ *
+ * // Multiple sections on a page
+ * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+ *   <Section>
+ *     <SectionHeading title="Section 1" />
+ *     <ListRow label="Field" value="Value" />
+ *   </Section>
+ *   <Section>
+ *     <SectionHeading title="Section 2" />
+ *     <ListRow label="Field" value="Value" />
+ *   </Section>
+ * </div>
+ * ```
+ */
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Section, type SectionProps };

package/dist/Section.js

@@ -0,0 +1,72 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Section/index.ts
+var Section_exports = {};
+__export(Section_exports, {
+  Section: () => Section
+});
+module.exports = __toCommonJS(Section_exports);
+
+// src/Section/Section.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var sectionStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "8px",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  }
+};
+var Section = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("arbor-section", className),
+        style: { ...sectionStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Section
+});
+//# sourceMappingURL=Section.js.map

package/dist/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Section/index.ts","../src/Section/Section.tsx"],"sourcesContent":["export { Section } from './Section';\nexport type { SectionProps } from './Section';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface SectionProps {\n  /**\n   * Content to display inside the section\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 section container styles\nconst sectionStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    width: '100%',\n    padding: '8px',\n    borderRadius: '8px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  },\n};\n\n/**\n * Section component - Arbor Design System\n *\n * A container component that provides consistent styling for content sections.\n * Has 8px padding, 8px border radius, and white background.\n * Used to wrap SectionHeadings, SubSectionHeadings, ListRows, and other content.\n *\n * @example\n * ```tsx\n * // Basic section with heading and list rows\n * <Section>\n *   <SectionHeading title=\"Contact Information\" />\n *   <ListRow label=\"Email\" value=\"john@example.com\" />\n *   <ListRow label=\"Phone\" value=\"+44 123 456 7890\" />\n * </Section>\n *\n * // Section with interactive heading\n * <Section>\n *   <SectionHeadingInteractive title=\"Personal Details\">\n *     <SubSectionInteractive title=\"Profile\">\n *       <ListRow label=\"Name\" value=\"John Smith\" />\n *     </SubSectionInteractive>\n *   </SectionHeadingInteractive>\n * </Section>\n *\n * // Multiple sections on a page\n * <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n *   <Section>\n *     <SectionHeading title=\"Section 1\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n *   <Section>\n *     <SectionHeading title=\"Section 2\" />\n *     <ListRow label=\"Field\" value=\"Value\" />\n *   </Section>\n * </div>\n * ```\n */\nexport const Section = React.forwardRef<HTMLDivElement, SectionProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-section', className)}\n        style={{ ...sectionStyles.container, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nSection.displayName = 'Section';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,kBAAqB;AAwEf;AAtDN,IAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,IACT,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;AAwCO,IAAM,UAAgB;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAK,iBAAiB,SAAS;AAAA,QAC1C,OAAO,EAAE,GAAG,cAAc,WAAW,GAAG,MAAM;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/Section.mjs

@@ -0,0 +1,7 @@
+import {
+  Section
+} from "./chunk-YJ36ZZJQ.mjs";
+export {
+  Section
+};
+//# sourceMappingURL=Section.mjs.map

package/dist/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/SectionHeading.d.mts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { SectionIconVariant } from './SectionIcon.mjs';
+
+interface SectionHeadingButton {
+    /**
+     * The label for the button
+     */
+    label: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Click handler for the button
+     */
+    onClick?: () => void;
+}
+interface SectionHeadingButtonGroupItem {
+    /**
+     * The label for the button
+     */
+    label: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional value identifier
+     */
+    value?: string;
+}
+interface SectionHeadingProps {
+    /**
+     * The heading title text
+     */
+    title: string;
+    /**
+     * Show an icon badge next to the title.
+     * Can be a boolean (defaults to 'info') or a specific variant.
+     * Available variants: 'warning', 'danger', 'info', 'success'
+     */
+    icon?: boolean | SectionIconVariant;
+    /**
+     * Avatar configuration - can be an image URL or initials
+     */
+    avatar?: {
+        src?: string;
+        initials?: string;
+        alt?: string;
+    };
+    /**
+     * Primary button configuration (mutually exclusive with buttonGroup)
+     */
+    button?: SectionHeadingButton;
+    /**
+     * Button group configuration (mutually exclusive with button)
+     */
+    buttonGroup?: {
+        items: SectionHeadingButtonGroupItem[];
+        activeIndex?: number;
+        onChange?: (index: number) => void;
+    };
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * SectionHeading component - Arbor Design System
+ *
+ * A flexible section heading component that can include an icon, avatar,
+ * button, or button group. Button and button group are mutually exclusive.
+ *
+ * @example
+ * ```tsx
+ * // Basic heading
+ * <SectionHeading title="Section Title" />
+ *
+ * // With icon
+ * <SectionHeading title="Section Title" icon />
+ *
+ * // With avatar
+ * <SectionHeading
+ *   title="User Profile"
+ *   avatar={{ src: "/avatar.jpg", alt: "User" }}
+ * />
+ *
+ * // With button
+ * <SectionHeading
+ *   title="Section Title"
+ *   button={{ label: "Add Item", onClick: () => {} }}
+ * />
+ *
+ * // With button group
+ * <SectionHeading
+ *   title="Section Title"
+ *   buttonGroup={{
+ *     items: [{ label: "Day" }, { label: "Week" }],
+ *     activeIndex: 0,
+ *     onChange: (index) => {}
+ *   }}
+ * />
+ * ```
+ */
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SectionHeading, type SectionHeadingButton, type SectionHeadingButtonGroupItem, type SectionHeadingProps };

package/dist/SectionHeading.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { SectionIconVariant } from './SectionIcon.js';
+
+interface SectionHeadingButton {
+    /**
+     * The label for the button
+     */
+    label: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Click handler for the button
+     */
+    onClick?: () => void;
+}
+interface SectionHeadingButtonGroupItem {
+    /**
+     * The label for the button
+     */
+    label: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional value identifier
+     */
+    value?: string;
+}
+interface SectionHeadingProps {
+    /**
+     * The heading title text
+     */
+    title: string;
+    /**
+     * Show an icon badge next to the title.
+     * Can be a boolean (defaults to 'info') or a specific variant.
+     * Available variants: 'warning', 'danger', 'info', 'success'
+     */
+    icon?: boolean | SectionIconVariant;
+    /**
+     * Avatar configuration - can be an image URL or initials
+     */
+    avatar?: {
+        src?: string;
+        initials?: string;
+        alt?: string;
+    };
+    /**
+     * Primary button configuration (mutually exclusive with buttonGroup)
+     */
+    button?: SectionHeadingButton;
+    /**
+     * Button group configuration (mutually exclusive with button)
+     */
+    buttonGroup?: {
+        items: SectionHeadingButtonGroupItem[];
+        activeIndex?: number;
+        onChange?: (index: number) => void;
+    };
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * SectionHeading component - Arbor Design System
+ *
+ * A flexible section heading component that can include an icon, avatar,
+ * button, or button group. Button and button group are mutually exclusive.
+ *
+ * @example
+ * ```tsx
+ * // Basic heading
+ * <SectionHeading title="Section Title" />
+ *
+ * // With icon
+ * <SectionHeading title="Section Title" icon />
+ *
+ * // With avatar
+ * <SectionHeading
+ *   title="User Profile"
+ *   avatar={{ src: "/avatar.jpg", alt: "User" }}
+ * />
+ *
+ * // With button
+ * <SectionHeading
+ *   title="Section Title"
+ *   button={{ label: "Add Item", onClick: () => {} }}
+ * />
+ *
+ * // With button group
+ * <SectionHeading
+ *   title="Section Title"
+ *   buttonGroup={{
+ *     items: [{ label: "Day" }, { label: "Week" }],
+ *     activeIndex: 0,
+ *     onChange: (index) => {}
+ *   }}
+ * />
+ * ```
+ */
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SectionHeading, type SectionHeadingButton, type SectionHeadingButtonGroupItem, type SectionHeadingProps };