{"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 \n \n \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 * \n * \n * \n * \n * \n *\n * // Initially collapsed\n * \n * \n * \n *\n * // Controlled mode\n * \n * \n * \n * ```\n */\nexport const SectionHeadingInteractive = React.forwardRef(\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 \n
\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n onKeyDown={handleKeyDown}\n aria-expanded={isExpanded}\n >\n
\n

{title}

\n \n \n \n
\n \n
\n
\n {children && (\n
{children}
\n )}\n
\n \n );\n }\n);\n\nSectionHeadingInteractive.displayName = 'SectionHeadingInteractive';\n"],"mappings":"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","names":[]}