@tonyarbor/components 0.4.0 → 0.6.0

package/dist/chunk-ODKT7LGV.mjs

@@ -0,0 +1,146 @@
+// src/ListRowMultiLine/ListRowMultiLine.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CaretIcon = ({ isHovered }) => {
+  if (isHovered) {
+    return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6 4L10 8L6 12",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 4L10 8L6 12",
+      stroke: "#b3b3b3",
+      strokeWidth: "1.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+};
+var listRowMultiLineStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #f8f8f8",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+    outline: "none"
+  },
+  containerHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  containerFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  containerClickable: {
+    cursor: "pointer"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "4px 8px",
+    minHeight: "44px"
+  },
+  textContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flex: 1,
+    gap: "0px"
+  },
+  title: {
+    fontSize: "16px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    margin: 0
+  },
+  description: {
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5",
+    margin: 0
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0,
+    marginLeft: "8px"
+  }
+};
+var ListRowMultiLine = React.forwardRef(
+  ({ title, description, icon = false, onClick, className, style, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const showHoverState = icon && isHovered;
+    const isClickable = icon && onClick;
+    const containerStyle = {
+      ...listRowMultiLineStyles.container,
+      ...showHoverState && listRowMultiLineStyles.containerHover,
+      ...isFocused && listRowMultiLineStyles.containerFocus,
+      ...isClickable && listRowMultiLineStyles.containerClickable,
+      ...style
+    };
+    const handleClick = () => {
+      if (isClickable && onClick) {
+        onClick();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (isClickable && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        onClick?.();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-list-row-multi-line", className),
+        style: containerStyle,
+        onClick: handleClick,
+        onMouseEnter: () => icon && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        onKeyDown: handleKeyDown,
+        tabIndex: isClickable ? 0 : void 0,
+        role: isClickable ? "button" : void 0,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { style: listRowMultiLineStyles.content, children: [
+          /* @__PURE__ */ jsxs("div", { style: listRowMultiLineStyles.textContent, children: [
+            /* @__PURE__ */ jsx("span", { style: listRowMultiLineStyles.title, children: title }),
+            /* @__PURE__ */ jsx("span", { style: listRowMultiLineStyles.description, children: description })
+          ] }),
+          icon && /* @__PURE__ */ jsx("div", { style: listRowMultiLineStyles.iconWrapper, children: /* @__PURE__ */ jsx(CaretIcon, { isHovered }) })
+        ] })
+      }
+    );
+  }
+);
+ListRowMultiLine.displayName = "ListRowMultiLine";
+
+export {
+  ListRowMultiLine
+};
+//# sourceMappingURL=chunk-ODKT7LGV.mjs.map

package/dist/chunk-ODKT7LGV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ListRowMultiLine/ListRowMultiLine.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface ListRowMultiLineProps {\n  /**\n   * The heading/title text (displayed on line 1, larger and bold)\n   */\n  title: string;\n  /**\n   * The description text (displayed on line 2, smaller and regular weight)\n   */\n  description: string;\n  /**\n   * Show the right arrow icon - enables hover state and indicates row is clickable\n   * @default false\n   */\n  icon?: boolean;\n  /**\n   * Click handler - typically used with icon prop for navigation\n   */\n  onClick?: () => void;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Caret/Arrow icon - transforms on hover\nconst CaretIcon = ({ isHovered }: { isHovered: boolean }) => {\n  if (isHovered) {\n    // Arrow pointing right on hover\n    return (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"#2f2f2f\"\n          strokeWidth=\"1.2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    );\n  }\n  // Default caret (chevron right)\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M6 4L10 8L6 12\"\n        stroke=\"#b3b3b3\"\n        strokeWidth=\"1.2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n};\n\n// Arbor Design System list row multiple lines styles\nconst listRowMultiLineStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    borderBottom: '1px solid #f8f8f8',\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    boxSizing: 'border-box' as const,\n    borderRadius: '8px',\n    transition: 'background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',\n    outline: 'none',\n  },\n  containerHover: {\n    backgroundColor: '#f8f8f8',\n  },\n  containerFocus: {\n    outline: '3px solid #3cad51',\n    outlineOffset: '-3px',\n  },\n  containerClickable: {\n    cursor: 'pointer',\n  },\n  content: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '4px 8px',\n    minHeight: '44px',\n  },\n  textContent: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    alignItems: 'flex-start',\n    justifyContent: 'center',\n    flex: 1,\n    gap: '0px',\n  },\n  title: {\n    fontSize: '16px',\n    fontWeight: '600',\n    color: '#2f2f2f',\n    lineHeight: '1.5',\n    margin: 0,\n  },\n  description: {\n    fontSize: '13px',\n    fontWeight: '400',\n    color: '#2f2f2f',\n    lineHeight: '1.5',\n    margin: 0,\n  },\n  iconWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '16px',\n    height: '16px',\n    flexShrink: 0,\n    marginLeft: '8px',\n  },\n};\n\n/**\n * ListRowMultiLine component - Arbor Design System\n *\n * A list row component with content displayed on two vertical lines.\n * Cannot be mixed with single-line ListRow in the same section.\n * Hover state is only enabled when icon is present (indicating clickable row).\n *\n * @example\n * ```tsx\n * // Basic multi-line row (not clickable)\n * <ListRowMultiLine\n *   title=\"Section Title\"\n *   description=\"A brief description of this section\"\n * />\n *\n * // Clickable multi-line row with icon\n * <ListRowMultiLine\n *   title=\"View Details\"\n *   description=\"Click to see more information\"\n *   icon\n *   onClick={() => navigate('/details')}\n * />\n * ```\n */\nexport const ListRowMultiLine = React.forwardRef<HTMLDivElement, ListRowMultiLineProps>(\n  ({ title, description, icon = false, onClick, className, style, ...props }, ref) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    // Only enable hover state when icon is present\n    const showHoverState = icon && isHovered;\n    const isClickable = icon && onClick;\n\n    const containerStyle: React.CSSProperties = {\n      ...listRowMultiLineStyles.container,\n      ...(showHoverState && listRowMultiLineStyles.containerHover),\n      ...(isFocused && listRowMultiLineStyles.containerFocus),\n      ...(isClickable && listRowMultiLineStyles.containerClickable),\n      ...style,\n    };\n\n    const handleClick = () => {\n      if (isClickable && onClick) {\n        onClick();\n      }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (isClickable && (event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        onClick?.();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-list-row-multi-line', className)}\n        style={containerStyle}\n        onClick={handleClick}\n        onMouseEnter={() => icon && setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={handleKeyDown}\n        tabIndex={isClickable ? 0 : undefined}\n        role={isClickable ? 'button' : undefined}\n        {...props}\n      >\n        <div style={listRowMultiLineStyles.content}>\n          <div style={listRowMultiLineStyles.textContent}>\n            <span style={listRowMultiLineStyles.title}>{title}</span>\n            <span style={listRowMultiLineStyles.description}>{description}</span>\n          </div>\n          {icon && (\n            <div style={listRowMultiLineStyles.iconWrapper}>\n              <CaretIcon isHovered={isHovered} />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nListRowMultiLine.displayName = 'ListRowMultiLine';\n"],"mappings":"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","names":[]}

package/dist/chunk-RL4G7MR3.mjs

@@ -0,0 +1,189 @@
+// src/SectionHeadingInteractive/SectionHeadingInteractive.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s ease-in-out"
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var sectionHeadingInteractiveStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    border: "none",
+    background: "transparent",
+    padding: 0,
+    margin: 0,
+    textAlign: "left",
+    outline: "none"
+  },
+  // When collapsed, no bottom border
+  headerContainerCollapsed: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  // When expanded, has bottom border
+  headerContainerExpanded: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    borderBottom: "1px solid #f8f8f8"
+  },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "12px 8px",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out",
+    minHeight: "16px",
+    gap: "12px"
+  },
+  headerContentHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  headerContentFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0,
+    flex: 1,
+    whiteSpace: "nowrap"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  content: {
+    overflow: "hidden",
+    transition: "max-height 0.3s ease-in-out, opacity 0.2s ease-in-out"
+  },
+  contentExpanded: {
+    maxHeight: "5000px",
+    opacity: 1
+  },
+  contentCollapsed: {
+    maxHeight: "0px",
+    opacity: 0
+  },
+  contentInner: {
+    // Content area styling - children go here
+  }
+};
+var SectionHeadingInteractive = React.forwardRef(
+  ({
+    title,
+    children,
+    expanded: controlledExpanded,
+    defaultExpanded = true,
+    onExpandedChange,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const handleToggle = () => {
+      const newExpanded = !isExpanded;
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+    const headerContainerStyle = isExpanded ? sectionHeadingInteractiveStyles.headerContainerExpanded : sectionHeadingInteractiveStyles.headerContainerCollapsed;
+    const headerContentStyle = {
+      ...sectionHeadingInteractiveStyles.headerContent,
+      ...isHovered && sectionHeadingInteractiveStyles.headerContentHover,
+      ...isFocused && sectionHeadingInteractiveStyles.headerContentFocus
+    };
+    const contentStyle = {
+      ...sectionHeadingInteractiveStyles.content,
+      ...isExpanded ? sectionHeadingInteractiveStyles.contentExpanded : sectionHeadingInteractiveStyles.contentCollapsed
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-section-heading-interactive", className),
+        style: { ...sectionHeadingInteractiveStyles.container, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: headerContainerStyle, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: sectionHeadingInteractiveStyles.header,
+              onClick: handleToggle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              onKeyDown: handleKeyDown,
+              "aria-expanded": isExpanded,
+              children: /* @__PURE__ */ jsxs("div", { style: headerContentStyle, children: [
+                /* @__PURE__ */ jsx("h2", { style: sectionHeadingInteractiveStyles.title, children: title }),
+                /* @__PURE__ */ jsx("span", { style: sectionHeadingInteractiveStyles.iconWrapper, children: /* @__PURE__ */ jsx(ChevronIcon, { expanded: isExpanded }) })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ jsx("div", { style: sectionHeadingInteractiveStyles.contentInner, children }) })
+        ]
+      }
+    );
+  }
+);
+SectionHeadingInteractive.displayName = "SectionHeadingInteractive";
+
+export {
+  SectionHeadingInteractive
+};
+//# sourceMappingURL=chunk-RL4G7MR3.mjs.map

package/dist/chunk-RL4G7MR3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SectionHeadingInteractive/SectionHeadingInteractive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface SectionHeadingInteractiveProps {\n  /**\n   * The heading text (required)\n   */\n  title: string;\n  /**\n   * Content to display when expanded (sub-sections, list rows, etc.)\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether the section is expanded (controlled mode)\n   */\n  expanded?: boolean;\n  /**\n   * Default expanded state (uncontrolled mode)\n   * @default true\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Chevron icon - rotates based on expanded state\nconst ChevronIcon = ({ expanded }: { expanded: boolean }) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style={{\n      transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',\n      transition: 'transform 0.2s ease-in-out',\n    }}\n  >\n    <path\n      d=\"M4 6L8 10L12 6\"\n      stroke=\"#2f2f2f\"\n      strokeWidth=\"1.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n// Arbor Design System section heading interactive styles\nconst sectionHeadingInteractiveStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    width: '100%',\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    boxSizing: 'border-box' as const,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    cursor: 'pointer',\n    border: 'none',\n    background: 'transparent',\n    padding: 0,\n    margin: 0,\n    textAlign: 'left' as const,\n    outline: 'none',\n  },\n  // When collapsed, no bottom border\n  headerContainerCollapsed: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n  // When expanded, has bottom border\n  headerContainerExpanded: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    borderBottom: '1px solid #f8f8f8',\n  },\n  headerContent: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '12px 8px',\n    borderRadius: '8px',\n    transition: 'background-color 0.15s ease-in-out',\n    minHeight: '16px',\n    gap: '12px',\n  },\n  headerContentHover: {\n    backgroundColor: '#f8f8f8',\n  },\n  headerContentFocus: {\n    outline: '3px solid #3cad51',\n    outlineOffset: '-3px',\n  },\n  title: {\n    fontSize: '22px',\n    fontWeight: '600',\n    color: '#2f2f2f',\n    lineHeight: '1.25',\n    margin: 0,\n    flex: 1,\n    whiteSpace: 'nowrap' as const,\n  },\n  iconWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '16px',\n    height: '16px',\n    flexShrink: 0,\n  },\n  content: {\n    overflow: 'hidden',\n    transition: 'max-height 0.3s ease-in-out, opacity 0.2s ease-in-out',\n  },\n  contentExpanded: {\n    maxHeight: '5000px',\n    opacity: 1,\n  },\n  contentCollapsed: {\n    maxHeight: '0px',\n    opacity: 0,\n  },\n  contentInner: {\n    // Content area styling - children go here\n  },\n};\n\n/**\n * SectionHeadingInteractive component - Arbor Design System\n *\n * A collapsible section heading component that can contain sub-sections,\n * list rows, and other content. Click the header to expand/collapse.\n * Uses h2 heading style (22px) for main section level.\n *\n * @example\n * ```tsx\n * // Basic collapsible section\n * <SectionHeadingInteractive title=\"Personal Information\">\n *   <SubSectionInteractive title=\"Contact Details\">\n *     <ListRow label=\"Email\" value=\"john@example.com\" />\n *   </SubSectionInteractive>\n * </SectionHeadingInteractive>\n *\n * // Initially collapsed\n * <SectionHeadingInteractive title=\"Additional Settings\" defaultExpanded={false}>\n *   <ListRow label=\"Theme\" value=\"Dark\" />\n * </SectionHeadingInteractive>\n *\n * // Controlled mode\n * <SectionHeadingInteractive\n *   title=\"Account\"\n *   expanded={isExpanded}\n *   onExpandedChange={setIsExpanded}\n * >\n *   <ListRow label=\"Status\" value=\"Active\" />\n * </SectionHeadingInteractive>\n * ```\n */\nexport const SectionHeadingInteractive = React.forwardRef<HTMLDivElement, SectionHeadingInteractiveProps>(\n  (\n    {\n      title,\n      children,\n      expanded: controlledExpanded,\n      defaultExpanded = true,\n      onExpandedChange,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Support both controlled and uncontrolled modes\n    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n    const isControlled = controlledExpanded !== undefined;\n    const isExpanded = isControlled ? controlledExpanded : internalExpanded;\n\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const handleToggle = () => {\n      const newExpanded = !isExpanded;\n      if (!isControlled) {\n        setInternalExpanded(newExpanded);\n      }\n      onExpandedChange?.(newExpanded);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleToggle();\n      }\n    };\n\n    const headerContainerStyle: React.CSSProperties = isExpanded\n      ? sectionHeadingInteractiveStyles.headerContainerExpanded\n      : sectionHeadingInteractiveStyles.headerContainerCollapsed;\n\n    const headerContentStyle: React.CSSProperties = {\n      ...sectionHeadingInteractiveStyles.headerContent,\n      ...(isHovered && sectionHeadingInteractiveStyles.headerContentHover),\n      ...(isFocused && sectionHeadingInteractiveStyles.headerContentFocus),\n    };\n\n    const contentStyle: React.CSSProperties = {\n      ...sectionHeadingInteractiveStyles.content,\n      ...(isExpanded\n        ? sectionHeadingInteractiveStyles.contentExpanded\n        : sectionHeadingInteractiveStyles.contentCollapsed),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-section-heading-interactive', className)}\n        style={{ ...sectionHeadingInteractiveStyles.container, ...style }}\n        {...props}\n      >\n        <div style={headerContainerStyle}>\n          <button\n            type=\"button\"\n            style={sectionHeadingInteractiveStyles.header}\n            onClick={handleToggle}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            onFocus={() => setIsFocused(true)}\n            onBlur={() => setIsFocused(false)}\n            onKeyDown={handleKeyDown}\n            aria-expanded={isExpanded}\n          >\n            <div style={headerContentStyle}>\n              <h2 style={sectionHeadingInteractiveStyles.title}>{title}</h2>\n              <span style={sectionHeadingInteractiveStyles.iconWrapper}>\n                <ChevronIcon expanded={isExpanded} />\n              </span>\n            </div>\n          </button>\n        </div>\n        <div style={contentStyle} aria-hidden={!isExpanded}>\n          {children && (\n            <div style={sectionHeadingInteractiveStyles.contentInner}>{children}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSectionHeadingInteractive.displayName = 'SectionHeadingInteractive';\n"],"mappings":"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","names":[]}

package/dist/chunk-X2CW5GF3.mjs

@@ -0,0 +1,175 @@
+// src/SubSectionInteractive/SubSectionInteractive.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transform: expanded ? "rotate(0deg)" : "rotate(180deg)",
+      transition: "transform 0.2s ease-in-out"
+    },
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var subSectionInteractiveStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    boxSizing: "border-box"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    cursor: "pointer",
+    border: "none",
+    background: "transparent",
+    padding: 0,
+    margin: 0,
+    textAlign: "left",
+    outline: "none"
+  },
+  headerContent: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "12px 8px",
+    borderRadius: "8px",
+    transition: "background-color 0.15s ease-in-out",
+    minHeight: "16px",
+    gap: "12px"
+  },
+  headerContentHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  headerContentFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0,
+    flex: 1,
+    whiteSpace: "nowrap"
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    flexShrink: 0
+  },
+  content: {
+    overflow: "hidden",
+    transition: "max-height 0.3s ease-in-out, opacity 0.2s ease-in-out"
+  },
+  contentExpanded: {
+    maxHeight: "2000px",
+    opacity: 1
+  },
+  contentCollapsed: {
+    maxHeight: "0px",
+    opacity: 0
+  },
+  contentInner: {
+    borderBottom: "1px solid #f8f8f8"
+  }
+};
+var SubSectionInteractive = React.forwardRef(
+  ({
+    title,
+    children,
+    expanded: controlledExpanded,
+    defaultExpanded = true,
+    onExpandedChange,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+    const isControlled = controlledExpanded !== void 0;
+    const isExpanded = isControlled ? controlledExpanded : internalExpanded;
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const handleToggle = () => {
+      const newExpanded = !isExpanded;
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+    const headerContentStyle = {
+      ...subSectionInteractiveStyles.headerContent,
+      ...isHovered && subSectionInteractiveStyles.headerContentHover,
+      ...isFocused && subSectionInteractiveStyles.headerContentFocus
+    };
+    const contentStyle = {
+      ...subSectionInteractiveStyles.content,
+      ...isExpanded ? subSectionInteractiveStyles.contentExpanded : subSectionInteractiveStyles.contentCollapsed
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-sub-section-interactive", className),
+        style: { ...subSectionInteractiveStyles.container, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: subSectionInteractiveStyles.header,
+              onClick: handleToggle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              onKeyDown: handleKeyDown,
+              "aria-expanded": isExpanded,
+              children: /* @__PURE__ */ jsxs("div", { style: headerContentStyle, children: [
+                /* @__PURE__ */ jsx("h3", { style: subSectionInteractiveStyles.title, children: title }),
+                /* @__PURE__ */ jsx("span", { style: subSectionInteractiveStyles.iconWrapper, children: /* @__PURE__ */ jsx(ChevronIcon, { expanded: isExpanded }) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: contentStyle, "aria-hidden": !isExpanded, children: children && /* @__PURE__ */ jsx("div", { style: subSectionInteractiveStyles.contentInner, children }) })
+        ]
+      }
+    );
+  }
+);
+SubSectionInteractive.displayName = "SubSectionInteractive";
+
+export {
+  SubSectionInteractive
+};
+//# sourceMappingURL=chunk-X2CW5GF3.mjs.map

package/dist/chunk-X2CW5GF3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SubSectionInteractive/SubSectionInteractive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface SubSectionInteractiveProps {\n  /**\n   * The heading text (required)\n   */\n  title: string;\n  /**\n   * Content to display when expanded (list rows, etc.)\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether the section is expanded (controlled mode)\n   */\n  expanded?: boolean;\n  /**\n   * Default expanded state (uncontrolled mode)\n   * @default true\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback when expanded state changes\n   */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Chevron icon - rotates based on expanded state\nconst ChevronIcon = ({ expanded }: { expanded: boolean }) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style={{\n      transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',\n      transition: 'transform 0.2s ease-in-out',\n    }}\n  >\n    <path\n      d=\"M4 6L8 10L12 6\"\n      stroke=\"#2f2f2f\"\n      strokeWidth=\"1.2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n// Arbor Design System sub-section interactive styles\nconst subSectionInteractiveStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    width: '100%',\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n    boxSizing: 'border-box' as const,\n  },\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    cursor: 'pointer',\n    border: 'none',\n    background: 'transparent',\n    padding: 0,\n    margin: 0,\n    textAlign: 'left' as const,\n    outline: 'none',\n  },\n  headerContent: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    width: '100%',\n    padding: '12px 8px',\n    borderRadius: '8px',\n    transition: 'background-color 0.15s ease-in-out',\n    minHeight: '16px',\n    gap: '12px',\n  },\n  headerContentHover: {\n    backgroundColor: '#f8f8f8',\n  },\n  headerContentFocus: {\n    outline: '3px solid #3cad51',\n    outlineOffset: '-3px',\n  },\n  title: {\n    fontSize: '18px',\n    fontWeight: '600',\n    color: '#2f2f2f',\n    lineHeight: '1.25',\n    margin: 0,\n    flex: 1,\n    whiteSpace: 'nowrap' as const,\n  },\n  iconWrapper: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '16px',\n    height: '16px',\n    flexShrink: 0,\n  },\n  content: {\n    overflow: 'hidden',\n    transition: 'max-height 0.3s ease-in-out, opacity 0.2s ease-in-out',\n  },\n  contentExpanded: {\n    maxHeight: '2000px',\n    opacity: 1,\n  },\n  contentCollapsed: {\n    maxHeight: '0px',\n    opacity: 0,\n  },\n  contentInner: {\n    borderBottom: '1px solid #f8f8f8',\n  },\n};\n\n/**\n * SubSectionInteractive component - Arbor Design System\n *\n * A collapsible sub-section component that can contain list rows and other content.\n * Click the header to expand/collapse the content area.\n *\n * @example\n * ```tsx\n * // Basic collapsible section\n * <SubSectionInteractive title=\"Personal Details\">\n *   <ListRow label=\"Name\" value=\"John Smith\" />\n *   <ListRow label=\"Email\" value=\"john@example.com\" />\n * </SubSectionInteractive>\n *\n * // Initially collapsed\n * <SubSectionInteractive title=\"Additional Info\" defaultExpanded={false}>\n *   <ListRow label=\"Notes\" value=\"Some notes here\" />\n * </SubSectionInteractive>\n *\n * // Controlled mode\n * <SubSectionInteractive\n *   title=\"Settings\"\n *   expanded={isExpanded}\n *   onExpandedChange={setIsExpanded}\n * >\n *   <ListRow label=\"Theme\" value=\"Dark\" />\n * </SubSectionInteractive>\n * ```\n */\nexport const SubSectionInteractive = React.forwardRef<HTMLDivElement, SubSectionInteractiveProps>(\n  (\n    {\n      title,\n      children,\n      expanded: controlledExpanded,\n      defaultExpanded = true,\n      onExpandedChange,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Support both controlled and uncontrolled modes\n    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n    const isControlled = controlledExpanded !== undefined;\n    const isExpanded = isControlled ? controlledExpanded : internalExpanded;\n\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    const handleToggle = () => {\n      const newExpanded = !isExpanded;\n      if (!isControlled) {\n        setInternalExpanded(newExpanded);\n      }\n      onExpandedChange?.(newExpanded);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleToggle();\n      }\n    };\n\n    const headerContentStyle: React.CSSProperties = {\n      ...subSectionInteractiveStyles.headerContent,\n      ...(isHovered && subSectionInteractiveStyles.headerContentHover),\n      ...(isFocused && subSectionInteractiveStyles.headerContentFocus),\n    };\n\n    const contentStyle: React.CSSProperties = {\n      ...subSectionInteractiveStyles.content,\n      ...(isExpanded\n        ? subSectionInteractiveStyles.contentExpanded\n        : subSectionInteractiveStyles.contentCollapsed),\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-sub-section-interactive', className)}\n        style={{ ...subSectionInteractiveStyles.container, ...style }}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          style={subSectionInteractiveStyles.header}\n          onClick={handleToggle}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={handleKeyDown}\n          aria-expanded={isExpanded}\n        >\n          <div style={headerContentStyle}>\n            <h3 style={subSectionInteractiveStyles.title}>{title}</h3>\n            <span style={subSectionInteractiveStyles.iconWrapper}>\n              <ChevronIcon expanded={isExpanded} />\n            </span>\n          </div>\n        </button>\n        <div style={contentStyle} aria-hidden={!isExpanded}>\n          {children && (\n            <div style={subSectionInteractiveStyles.contentInner}>{children}</div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSubSectionInteractive.displayName = 'SubSectionInteractive';\n"],"mappings":"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","names":[]}

package/dist/chunk-YJ36ZZJQ.mjs

@@ -0,0 +1,36 @@
+// src/Section/Section.tsx
+import * as React from "react";
+import { clsx } from "clsx";
+import { jsx } from "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__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("arbor-section", className),
+        style: { ...sectionStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+
+export {
+  Section
+};
+//# sourceMappingURL=chunk-YJ36ZZJQ.mjs.map

package/dist/chunk-YJ36ZZJQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Section/Section.tsx"],"sourcesContent":["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,YAAY,WAAW;AACvB,SAAS,YAAY;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,WAAW,KAAK,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/index.d.mts

@@ -21,6 +21,16 @@ export { Avatar, AvatarProps, AvatarSize } from './Avatar.mjs';
 export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.mjs';
 export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.mjs';
 export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.mjs';
+export { Logo, LogoProps } from './Logo.mjs';
+export { ButtonSegmented, ButtonSegmentedItem, ButtonSegmentedProps } from './ButtonSegmented.mjs';
+export { SectionHeading, SectionHeadingButton, SectionHeadingButtonGroupItem, SectionHeadingProps } from './SectionHeading.mjs';
+export { SectionIcon, SectionIconProps, SectionIconVariant } from './SectionIcon.mjs';
+export { ListRow, ListRowProps } from './ListRow.mjs';
+export { ListRowMultiLine, ListRowMultiLineProps } from './ListRowMultiLine.mjs';
+export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.mjs';
+export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.mjs';
+export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.mjs';
+export { Section, SectionProps } from './Section.mjs';
 import 'react';
 
 /**

package/dist/index.d.ts

@@ -21,6 +21,16 @@ export { Avatar, AvatarProps, AvatarSize } from './Avatar.js';
 export { SearchGlobal, SearchGlobalProps } from './SearchGlobal.js';
 export { SearchOnPage, SearchOnPageProps } from './SearchOnPage.js';
 export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs.js';
+export { Logo, LogoProps } from './Logo.js';
+export { ButtonSegmented, ButtonSegmentedItem, ButtonSegmentedProps } from './ButtonSegmented.js';
+export { SectionHeading, SectionHeadingButton, SectionHeadingButtonGroupItem, SectionHeadingProps } from './SectionHeading.js';
+export { SectionIcon, SectionIconProps, SectionIconVariant } from './SectionIcon.js';
+export { ListRow, ListRowProps } from './ListRow.js';
+export { ListRowMultiLine, ListRowMultiLineProps } from './ListRowMultiLine.js';
+export { SubSectionHeading, SubSectionHeadingProps } from './SubSectionHeading.js';
+export { SubSectionInteractive, SubSectionInteractiveProps } from './SubSectionInteractive.js';
+export { SectionHeadingInteractive, SectionHeadingInteractiveProps } from './SectionHeadingInteractive.js';
+export { Section, SectionProps } from './Section.js';
 import 'react';
 
 /**