npm - @brycks/core-front - Versions diffs - 0.3.4 → 0.3.6 - Mend

@brycks/core-front 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/dist/components/data/TreeView/TreeView.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeView.cjs","sources":["../../../../src/components/data/TreeView/TreeView.tsx"],"sourcesContent":["/*\n TreeView Component\n \n A hierarchical tree structure for displaying nested data.\n * Supports selection, expansion, and keyboard navigation.\n \n @module components/data/TreeView\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentPaddingY, iconSizes } from '../../../design-system/primitives'\n\nexport interface TreeNode {\n /* Unique identifier /\n id: string\n /* Display label /\n label: string\n /* Optional icon /\n icon?: ReactNode\n /* Child nodes /\n children?: TreeNode[]\n /* Whether the node is disabled /\n disabled?: boolean\n /* Additional data /\n data?: unknown\n}\n\nexport type TreeViewSize = 'sm' \| 'md' \| 'lg'\n\nexport interface TreeViewProps {\n /* Tree data /\n data: TreeNode[]\n /* Selected node IDs (controlled) /\n selectedIds?: string[]\n /* Default selected node IDs (uncontrolled) /\n defaultSelectedIds?: string[]\n /* Expanded node IDs (controlled) /\n expandedIds?: string[]\n /* Default expanded node IDs (uncontrolled) /\n defaultExpandedIds?: string[]\n /* Callback when selection changes /\n onSelectionChange?: (selectedIds: string[]) => void\n /* Callback when expansion changes /\n onExpansionChange?: (expandedIds: string[]) => void\n /* Callback when a node is clicked /\n onNodeClick?: (node: TreeNode) => void\n /* Whether to allow multi-selection /\n multiSelect?: boolean\n /* Component size /\n size?: TreeViewSize\n /* Whether to show connecting lines /\n showLines?: boolean\n /* Custom node renderer /\n renderNode?: (node: TreeNode, isSelected: boolean, isExpanded: boolean) => ReactNode\n /* Label for accessibility /\n 'aria-label'?: string\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<TreeViewSize, { fontSize: number; iconSize: number; padding: number; indent: number }> = {\n sm: { fontSize: fontSizes.sm, iconSize: iconSizes.xs, padding: componentPaddingY.xs, indent: spacing[4] },\n md: { fontSize: fontSizes.base, iconSize: iconSizes.sm, padding: componentPaddingY.sm, indent: spacing[5] },\n lg: { fontSize: fontSizes.md, iconSize: iconSizes.md, padding: componentPaddingY.md, indent: spacing[6] },\n}\n\nfunction ChevronIcon({ expanded }: { expanded: boolean }) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n style={{\n transform: expanded ? 'rotate(90deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n }}\n >\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\ninterface TreeNodeItemProps {\n node: TreeNode\n level: number\n config: typeof sizeConfig.md\n isSelected: boolean\n isExpanded: boolean\n showLines: boolean\n onToggle: (id: string) => void\n onSelect: (id: string, multi: boolean) => void\n renderNode?: TreeViewProps['renderNode']\n selectedIds: string[]\n expandedIds: string[]\n multiSelect: boolean\n}\n\nfunction TreeNodeItem({\n node,\n level,\n config,\n isSelected,\n isExpanded,\n showLines,\n onToggle,\n onSelect,\n renderNode,\n selectedIds,\n expandedIds,\n multiSelect,\n}: TreeNodeItemProps) {\n const hasChildren = node.children && node.children.length > 0\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled) return\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n },\n [node.id, node.disabled, onSelect]\n )\n\n const handleToggle = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n if (hasChildren) {\n onToggle(node.id)\n }\n },\n [node.id, hasChildren, onToggle]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (node.disabled) return\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault()\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n break\n case 'ArrowRight':\n e.preventDefault()\n if (hasChildren && !isExpanded) {\n onToggle(node.id)\n }\n break\n case 'ArrowLeft':\n e.preventDefault()\n if (hasChildren && isExpanded) {\n onToggle(node.id)\n }\n break\n }\n },\n [node.id, node.disabled, hasChildren, isExpanded, onToggle, onSelect]\n )\n\n const itemStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1.5],\n padding: `${config.padding}px ${spacing[2]}px`,\n paddingLeft: spacing[2] + level config.indent,\n fontSize: config.fontSize,\n color: node.disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: node.disabled ? 'not-allowed' : 'pointer',\n userSelect: 'none',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n position: 'relative',\n }\n\n const toggleStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n flexShrink: 0,\n }\n\n const iconStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n flexShrink: 0,\n }\n\n const lineStyle: CSSProperties = showLines && level > 0 ? {\n position: 'absolute',\n left: spacing[2] + (level - 1) * config.indent + config.iconSize / 2,\n top: 0,\n bottom: 0,\n width: 1,\n backgroundColor: 'var(--brycks-border-default)',\n } : {}\n\n return (\n <li role=\"treeitem\" aria-selected={isSelected} aria-expanded={hasChildren ? isExpanded : undefined}>\n <div\n tabIndex={node.disabled ? -1 : 0}\n style={itemStyle}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={(e) => {\n if (!node.disabled && !isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n {showLines && level > 0 && <span style={lineStyle} aria-hidden=\"true\" />}\n <span style={toggleStyle} onClick={handleToggle}>\n {hasChildren && <ChevronIcon expanded={isExpanded} />}\n </span>\n {node.icon && <span style={iconStyle}>{node.icon}</span>}\n {renderNode ? (\n renderNode(node, isSelected, isExpanded)\n ) : (\n <span style={{ flex: 1 }}>{node.label}</span>\n )}\n </div>\n {hasChildren && isExpanded && (\n <ul role=\"group\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {node.children!.map((child) => (\n <TreeNodeItem\n key={child.id}\n node={child}\n level={level + 1}\n config={config}\n isSelected={selectedIds.includes(child.id)}\n isExpanded={expandedIds.includes(child.id)}\n showLines={showLines}\n onToggle={onToggle}\n onSelect={onSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )}\n </li>\n )\n}\n\nexport const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(function TreeView(\n {\n data,\n selectedIds: controlledSelectedIds,\n defaultSelectedIds = [],\n expandedIds: controlledExpandedIds,\n defaultExpandedIds = [],\n onSelectionChange,\n onExpansionChange,\n onNodeClick,\n multiSelect = false,\n size = 'md',\n showLines = false,\n renderNode,\n 'aria-label': ariaLabel = 'Tree',\n className,\n testId,\n },\n ref\n) {\n const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(defaultSelectedIds)\n const [internalExpandedIds, setInternalExpandedIds] = useState<string[]>(defaultExpandedIds)\n\n const selectedIds = controlledSelectedIds !== undefined ? controlledSelectedIds : internalSelectedIds\n const expandedIds = controlledExpandedIds !== undefined ? controlledExpandedIds : internalExpandedIds\n const config = sizeConfig[size]\n\n // Flatten all nodes for keyboard navigation\n const flatNodes = useMemo(() => {\n const flatten = (nodes: TreeNode[], result: TreeNode[] = []): TreeNode[] => {\n nodes.forEach((node) => {\n result.push(node)\n if (node.children && expandedIds.includes(node.id)) {\n flatten(node.children, result)\n }\n })\n return result\n }\n return flatten(data)\n }, [data, expandedIds])\n\n const handleToggle = useCallback(\n (id: string) => {\n const newExpandedIds = expandedIds.includes(id)\n ? expandedIds.filter((eid) => eid !== id)\n : [...expandedIds, id]\n\n if (controlledExpandedIds === undefined) {\n setInternalExpandedIds(newExpandedIds)\n }\n onExpansionChange?.(newExpandedIds)\n },\n [expandedIds, controlledExpandedIds, onExpansionChange]\n )\n\n const handleSelect = useCallback(\n (id: string, additive: boolean) => {\n const node = flatNodes.find((n) => n.id === id)\n if (node) {\n onNodeClick?.(node)\n }\n\n let newSelectedIds: string[]\n if (multiSelect && additive) {\n newSelectedIds = selectedIds.includes(id)\n ? selectedIds.filter((sid) => sid !== id)\n : [...selectedIds, id]\n } else {\n newSelectedIds = selectedIds.includes(id) && selectedIds.length === 1 ? [] : [id]\n }\n\n if (controlledSelectedIds === undefined) {\n setInternalSelectedIds(newSelectedIds)\n }\n onSelectionChange?.(newSelectedIds)\n },\n [flatNodes, multiSelect, selectedIds, controlledSelectedIds, onSelectionChange, onNodeClick]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const currentIndex = flatNodes.findIndex((n) => selectedIds.includes(n.id))\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault()\n const nextIndex = currentIndex < flatNodes.length - 1 ? currentIndex + 1 : 0\n handleSelect(flatNodes[nextIndex].id, false)\n break\n }\n case 'ArrowUp': {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : flatNodes.length - 1\n handleSelect(flatNodes[prevIndex].id, false)\n break\n }\n case 'Home':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[0].id, false)\n }\n break\n case 'End':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[flatNodes.length - 1].id, false)\n }\n break\n }\n },\n [flatNodes, selectedIds, handleSelect]\n )\n\n const containerStyle: CSSProperties = {\n listStyle: 'none',\n margin: 0,\n padding: spacing[1],\n outline: 'none',\n }\n\n return (\n <ul\n ref={ref}\n role=\"tree\"\n aria-label={ariaLabel}\n aria-multiselectable={multiSelect}\n tabIndex={0}\n className={cx('brycks-treeview', `brycks-treeview--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n onKeyDown={handleKeyDown}\n >\n {data.map((node) => (\n <TreeNodeItem\n key={node.id}\n node={node}\n level={0}\n config={config}\n isSelected={selectedIds.includes(node.id)}\n isExpanded={expandedIds.includes(node.id)}\n showLines={showLines}\n onToggle={handleToggle}\n onSelect={handleSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )\n})\n\nTreeView.displayName = 'TreeView'\n"],"names":["sizeConfig","fontSizes","iconSizes","componentPaddingY","spacing","ChevronIcon","expanded","jsx","durations","easings","TreeNodeItem","node","level","config","isSelected","isExpanded","showLines","onToggle","onSelect","renderNode","selectedIds","expandedIds","multiSelect","hasChildren","handleClick","useCallback","e","handleToggle","handleKeyDown","itemStyle","toggleStyle","iconStyle","lineStyle","jsxs","child","TreeView","forwardRef","data","controlledSelectedIds","defaultSelectedIds","controlledExpandedIds","defaultExpandedIds","onSelectionChange","onExpansionChange","onNodeClick","size","ariaLabel","className","testId","ref","internalSelectedIds","setInternalSelectedIds","useState","internalExpandedIds","setInternalExpandedIds","flatNodes","useMemo","flatten","nodes","result","id","newExpandedIds","eid","handleSelect","additive","n","newSelectedIds","sid","currentIndex","nextIndex","prevIndex","containerStyle","cx"],"mappings":"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"}
1	+ {"version":3,"file":"TreeView.cjs","sources":["../../../../src/components/data/TreeView/TreeView.tsx"],"sourcesContent":["/*\n TreeView Component\n \n A hierarchical tree structure for displaying nested data.\n * Supports selection, expansion, and keyboard navigation.\n \n @module components/data/TreeView\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentPaddingY, iconSizes } from '../../../design-system/primitives'\n\nexport interface TreeNode {\n /* Unique identifier /\n id: string\n /* Display label /\n label: string\n /* Optional icon /\n icon?: ReactNode\n /* Child nodes /\n children?: TreeNode[]\n /* Whether the node is disabled /\n disabled?: boolean\n /* Additional data /\n data?: unknown\n}\n\nexport type TreeViewSize = 'sm' \| 'md' \| 'lg'\n\nexport interface TreeViewProps {\n /* Tree data /\n data: TreeNode[]\n /* Selected node IDs (controlled) /\n selectedIds?: string[]\n /* Default selected node IDs (uncontrolled) /\n defaultSelectedIds?: string[]\n /* Expanded node IDs (controlled) /\n expandedIds?: string[]\n /* Default expanded node IDs (uncontrolled) /\n defaultExpandedIds?: string[]\n /* Callback when selection changes /\n onSelectionChange?: (selectedIds: string[]) => void\n /* Callback when expansion changes /\n onExpansionChange?: (expandedIds: string[]) => void\n /* Callback when a node is clicked /\n onNodeClick?: (node: TreeNode) => void\n /* Whether to allow multi-selection /\n multiSelect?: boolean\n /* Component size /\n size?: TreeViewSize\n /* Whether to show connecting lines /\n showLines?: boolean\n /* Custom node renderer /\n renderNode?: (node: TreeNode, isSelected: boolean, isExpanded: boolean) => ReactNode\n /* Label for accessibility /\n 'aria-label'?: string\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<TreeViewSize, { fontSize: number; iconSize: number; padding: number; indent: number }> = {\n sm: { fontSize: fontSizes.sm, iconSize: iconSizes.xs, padding: componentPaddingY.xs, indent: spacing[4] },\n md: { fontSize: fontSizes.base, iconSize: iconSizes.sm, padding: componentPaddingY.sm, indent: spacing[5] },\n lg: { fontSize: fontSizes.md, iconSize: iconSizes.md, padding: componentPaddingY.md, indent: spacing[6] },\n}\n\nfunction ChevronIcon({ expanded }: { expanded: boolean }) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n style={{\n transform: expanded ? 'rotate(90deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n }}\n >\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\ninterface TreeNodeItemProps {\n node: TreeNode\n level: number\n config: typeof sizeConfig.md\n isSelected: boolean\n isExpanded: boolean\n showLines: boolean\n onToggle: (id: string) => void\n onSelect: (id: string, multi: boolean) => void\n renderNode?: TreeViewProps['renderNode']\n selectedIds: string[]\n expandedIds: string[]\n multiSelect: boolean\n}\n\nfunction TreeNodeItem({\n node,\n level,\n config,\n isSelected,\n isExpanded,\n showLines,\n onToggle,\n onSelect,\n renderNode,\n selectedIds,\n expandedIds,\n multiSelect,\n}: TreeNodeItemProps) {\n const hasChildren = node.children && node.children.length > 0\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled) return\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n },\n [node.id, node.disabled, onSelect]\n )\n\n const handleToggle = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n if (hasChildren) {\n onToggle(node.id)\n }\n },\n [node.id, hasChildren, onToggle]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (node.disabled) return\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault()\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n break\n case 'ArrowRight':\n e.preventDefault()\n if (hasChildren && !isExpanded) {\n onToggle(node.id)\n }\n break\n case 'ArrowLeft':\n e.preventDefault()\n if (hasChildren && isExpanded) {\n onToggle(node.id)\n }\n break\n }\n },\n [node.id, node.disabled, hasChildren, isExpanded, onToggle, onSelect]\n )\n\n const itemStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1.5],\n padding: `${config.padding}px ${spacing[2]}px`,\n paddingLeft: spacing[2] + level config.indent,\n fontSize: config.fontSize,\n color: node.disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n backgroundColor: isSelected ? 'var(--brycks-primary-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: node.disabled ? 'not-allowed' : 'pointer',\n userSelect: 'none',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n position: 'relative',\n }\n\n const toggleStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n flexShrink: 0,\n }\n\n const iconStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n flexShrink: 0,\n }\n\n const lineStyle: CSSProperties = showLines && level > 0 ? {\n position: 'absolute',\n left: spacing[2] + (level - 1) * config.indent + config.iconSize / 2,\n top: 0,\n bottom: 0,\n width: 1,\n backgroundColor: 'var(--brycks-border-default)',\n } : {}\n\n return (\n <li role=\"treeitem\" aria-selected={isSelected} aria-expanded={hasChildren ? isExpanded : undefined}>\n <div\n tabIndex={node.disabled ? -1 : 0}\n style={itemStyle}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={(e) => {\n if (!node.disabled && !isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n {showLines && level > 0 && <span style={lineStyle} aria-hidden=\"true\" />}\n <span style={toggleStyle} onClick={handleToggle}>\n {hasChildren && <ChevronIcon expanded={isExpanded} />}\n </span>\n {node.icon && <span style={iconStyle}>{node.icon}</span>}\n {renderNode ? (\n renderNode(node, isSelected, isExpanded)\n ) : (\n <span style={{ flex: 1 }}>{node.label}</span>\n )}\n </div>\n {hasChildren && isExpanded && (\n <ul role=\"group\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {node.children!.map((child) => (\n <TreeNodeItem\n key={child.id}\n node={child}\n level={level + 1}\n config={config}\n isSelected={selectedIds.includes(child.id)}\n isExpanded={expandedIds.includes(child.id)}\n showLines={showLines}\n onToggle={onToggle}\n onSelect={onSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )}\n </li>\n )\n}\n\nexport const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(function TreeView(\n {\n data,\n selectedIds: controlledSelectedIds,\n defaultSelectedIds = [],\n expandedIds: controlledExpandedIds,\n defaultExpandedIds = [],\n onSelectionChange,\n onExpansionChange,\n onNodeClick,\n multiSelect = false,\n size = 'md',\n showLines = false,\n renderNode,\n 'aria-label': ariaLabel = 'Tree',\n className,\n testId,\n },\n ref\n) {\n const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(defaultSelectedIds)\n const [internalExpandedIds, setInternalExpandedIds] = useState<string[]>(defaultExpandedIds)\n\n const selectedIds = controlledSelectedIds !== undefined ? controlledSelectedIds : internalSelectedIds\n const expandedIds = controlledExpandedIds !== undefined ? controlledExpandedIds : internalExpandedIds\n const config = sizeConfig[size]\n\n // Flatten all nodes for keyboard navigation\n const flatNodes = useMemo(() => {\n const flatten = (nodes: TreeNode[], result: TreeNode[] = []): TreeNode[] => {\n nodes.forEach((node) => {\n result.push(node)\n if (node.children && expandedIds.includes(node.id)) {\n flatten(node.children, result)\n }\n })\n return result\n }\n return flatten(data)\n }, [data, expandedIds])\n\n const handleToggle = useCallback(\n (id: string) => {\n const newExpandedIds = expandedIds.includes(id)\n ? expandedIds.filter((eid) => eid !== id)\n : [...expandedIds, id]\n\n if (controlledExpandedIds === undefined) {\n setInternalExpandedIds(newExpandedIds)\n }\n onExpansionChange?.(newExpandedIds)\n },\n [expandedIds, controlledExpandedIds, onExpansionChange]\n )\n\n const handleSelect = useCallback(\n (id: string, additive: boolean) => {\n const node = flatNodes.find((n) => n.id === id)\n if (node) {\n onNodeClick?.(node)\n }\n\n let newSelectedIds: string[]\n if (multiSelect && additive) {\n newSelectedIds = selectedIds.includes(id)\n ? selectedIds.filter((sid) => sid !== id)\n : [...selectedIds, id]\n } else {\n newSelectedIds = selectedIds.includes(id) && selectedIds.length === 1 ? [] : [id]\n }\n\n if (controlledSelectedIds === undefined) {\n setInternalSelectedIds(newSelectedIds)\n }\n onSelectionChange?.(newSelectedIds)\n },\n [flatNodes, multiSelect, selectedIds, controlledSelectedIds, onSelectionChange, onNodeClick]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const currentIndex = flatNodes.findIndex((n) => selectedIds.includes(n.id))\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault()\n const nextIndex = currentIndex < flatNodes.length - 1 ? currentIndex + 1 : 0\n handleSelect(flatNodes[nextIndex].id, false)\n break\n }\n case 'ArrowUp': {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : flatNodes.length - 1\n handleSelect(flatNodes[prevIndex].id, false)\n break\n }\n case 'Home':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[0].id, false)\n }\n break\n case 'End':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[flatNodes.length - 1].id, false)\n }\n break\n }\n },\n [flatNodes, selectedIds, handleSelect]\n )\n\n const containerStyle: CSSProperties = {\n listStyle: 'none',\n margin: 0,\n padding: spacing[1],\n outline: 'none',\n }\n\n return (\n <ul\n ref={ref}\n role=\"tree\"\n aria-label={ariaLabel}\n aria-multiselectable={multiSelect}\n tabIndex={0}\n className={cx('brycks-treeview', `brycks-treeview--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n onKeyDown={handleKeyDown}\n >\n {data.map((node) => (\n <TreeNodeItem\n key={node.id}\n node={node}\n level={0}\n config={config}\n isSelected={selectedIds.includes(node.id)}\n isExpanded={expandedIds.includes(node.id)}\n showLines={showLines}\n onToggle={handleToggle}\n onSelect={handleSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )\n})\n\nTreeView.displayName = 'TreeView'\n"],"names":["sizeConfig","fontSizes","iconSizes","componentPaddingY","spacing","ChevronIcon","expanded","jsx","durations","easings","TreeNodeItem","node","level","config","isSelected","isExpanded","showLines","onToggle","onSelect","renderNode","selectedIds","expandedIds","multiSelect","hasChildren","handleClick","useCallback","e","handleToggle","handleKeyDown","itemStyle","toggleStyle","iconStyle","lineStyle","jsxs","child","TreeView","forwardRef","data","controlledSelectedIds","defaultSelectedIds","controlledExpandedIds","defaultExpandedIds","onSelectionChange","onExpansionChange","onNodeClick","size","ariaLabel","className","testId","ref","internalSelectedIds","setInternalSelectedIds","useState","internalExpandedIds","setInternalExpandedIds","flatNodes","useMemo","flatten","nodes","result","id","newExpandedIds","eid","handleSelect","additive","n","newSelectedIds","sid","currentIndex","nextIndex","prevIndex","containerStyle","cx"],"mappings":"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"}

package/dist/components/data/TreeView/TreeView.js CHANGED Viewed

@@ -76,7 +76,7 @@ function H({
     paddingLeft: h[2] + f * i.indent,
     fontSize: i.fontSize,
     color: e.disabled ? "var(--brycks-foreground-disabled)" : "var(--brycks-foreground-default)",
-    backgroundColor: m ? "var(--brycks-primary-50)" : "transparent",
+    backgroundColor: m ? "var(--brycks-primary-muted)" : "transparent",
     borderRadius: "var(--brycks-radius-md)",
     cursor: e.disabled ? "not-allowed" : "pointer",
     userSelect: "none",

package/dist/components/data/TreeView/TreeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeView.js","sources":["../../../../src/components/data/TreeView/TreeView.tsx"],"sourcesContent":["/*\n TreeView Component\n \n A hierarchical tree structure for displaying nested data.\n * Supports selection, expansion, and keyboard navigation.\n \n @module components/data/TreeView\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentPaddingY, iconSizes } from '../../../design-system/primitives'\n\nexport interface TreeNode {\n /* Unique identifier /\n id: string\n /* Display label /\n label: string\n /* Optional icon /\n icon?: ReactNode\n /* Child nodes /\n children?: TreeNode[]\n /* Whether the node is disabled /\n disabled?: boolean\n /* Additional data /\n data?: unknown\n}\n\nexport type TreeViewSize = 'sm' \| 'md' \| 'lg'\n\nexport interface TreeViewProps {\n /* Tree data /\n data: TreeNode[]\n /* Selected node IDs (controlled) /\n selectedIds?: string[]\n /* Default selected node IDs (uncontrolled) /\n defaultSelectedIds?: string[]\n /* Expanded node IDs (controlled) /\n expandedIds?: string[]\n /* Default expanded node IDs (uncontrolled) /\n defaultExpandedIds?: string[]\n /* Callback when selection changes /\n onSelectionChange?: (selectedIds: string[]) => void\n /* Callback when expansion changes /\n onExpansionChange?: (expandedIds: string[]) => void\n /* Callback when a node is clicked /\n onNodeClick?: (node: TreeNode) => void\n /* Whether to allow multi-selection /\n multiSelect?: boolean\n /* Component size /\n size?: TreeViewSize\n /* Whether to show connecting lines /\n showLines?: boolean\n /* Custom node renderer /\n renderNode?: (node: TreeNode, isSelected: boolean, isExpanded: boolean) => ReactNode\n /* Label for accessibility /\n 'aria-label'?: string\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<TreeViewSize, { fontSize: number; iconSize: number; padding: number; indent: number }> = {\n sm: { fontSize: fontSizes.sm, iconSize: iconSizes.xs, padding: componentPaddingY.xs, indent: spacing[4] },\n md: { fontSize: fontSizes.base, iconSize: iconSizes.sm, padding: componentPaddingY.sm, indent: spacing[5] },\n lg: { fontSize: fontSizes.md, iconSize: iconSizes.md, padding: componentPaddingY.md, indent: spacing[6] },\n}\n\nfunction ChevronIcon({ expanded }: { expanded: boolean }) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n style={{\n transform: expanded ? 'rotate(90deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n }}\n >\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\ninterface TreeNodeItemProps {\n node: TreeNode\n level: number\n config: typeof sizeConfig.md\n isSelected: boolean\n isExpanded: boolean\n showLines: boolean\n onToggle: (id: string) => void\n onSelect: (id: string, multi: boolean) => void\n renderNode?: TreeViewProps['renderNode']\n selectedIds: string[]\n expandedIds: string[]\n multiSelect: boolean\n}\n\nfunction TreeNodeItem({\n node,\n level,\n config,\n isSelected,\n isExpanded,\n showLines,\n onToggle,\n onSelect,\n renderNode,\n selectedIds,\n expandedIds,\n multiSelect,\n}: TreeNodeItemProps) {\n const hasChildren = node.children && node.children.length > 0\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled) return\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n },\n [node.id, node.disabled, onSelect]\n )\n\n const handleToggle = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n if (hasChildren) {\n onToggle(node.id)\n }\n },\n [node.id, hasChildren, onToggle]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (node.disabled) return\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault()\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n break\n case 'ArrowRight':\n e.preventDefault()\n if (hasChildren && !isExpanded) {\n onToggle(node.id)\n }\n break\n case 'ArrowLeft':\n e.preventDefault()\n if (hasChildren && isExpanded) {\n onToggle(node.id)\n }\n break\n }\n },\n [node.id, node.disabled, hasChildren, isExpanded, onToggle, onSelect]\n )\n\n const itemStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1.5],\n padding: `${config.padding}px ${spacing[2]}px`,\n paddingLeft: spacing[2] + level config.indent,\n fontSize: config.fontSize,\n color: node.disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n backgroundColor: isSelected ? 'var(--brycks-primary-50)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: node.disabled ? 'not-allowed' : 'pointer',\n userSelect: 'none',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n position: 'relative',\n }\n\n const toggleStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n flexShrink: 0,\n }\n\n const iconStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n flexShrink: 0,\n }\n\n const lineStyle: CSSProperties = showLines && level > 0 ? {\n position: 'absolute',\n left: spacing[2] + (level - 1) * config.indent + config.iconSize / 2,\n top: 0,\n bottom: 0,\n width: 1,\n backgroundColor: 'var(--brycks-border-default)',\n } : {}\n\n return (\n <li role=\"treeitem\" aria-selected={isSelected} aria-expanded={hasChildren ? isExpanded : undefined}>\n <div\n tabIndex={node.disabled ? -1 : 0}\n style={itemStyle}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={(e) => {\n if (!node.disabled && !isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n {showLines && level > 0 && <span style={lineStyle} aria-hidden=\"true\" />}\n <span style={toggleStyle} onClick={handleToggle}>\n {hasChildren && <ChevronIcon expanded={isExpanded} />}\n </span>\n {node.icon && <span style={iconStyle}>{node.icon}</span>}\n {renderNode ? (\n renderNode(node, isSelected, isExpanded)\n ) : (\n <span style={{ flex: 1 }}>{node.label}</span>\n )}\n </div>\n {hasChildren && isExpanded && (\n <ul role=\"group\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {node.children!.map((child) => (\n <TreeNodeItem\n key={child.id}\n node={child}\n level={level + 1}\n config={config}\n isSelected={selectedIds.includes(child.id)}\n isExpanded={expandedIds.includes(child.id)}\n showLines={showLines}\n onToggle={onToggle}\n onSelect={onSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )}\n </li>\n )\n}\n\nexport const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(function TreeView(\n {\n data,\n selectedIds: controlledSelectedIds,\n defaultSelectedIds = [],\n expandedIds: controlledExpandedIds,\n defaultExpandedIds = [],\n onSelectionChange,\n onExpansionChange,\n onNodeClick,\n multiSelect = false,\n size = 'md',\n showLines = false,\n renderNode,\n 'aria-label': ariaLabel = 'Tree',\n className,\n testId,\n },\n ref\n) {\n const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(defaultSelectedIds)\n const [internalExpandedIds, setInternalExpandedIds] = useState<string[]>(defaultExpandedIds)\n\n const selectedIds = controlledSelectedIds !== undefined ? controlledSelectedIds : internalSelectedIds\n const expandedIds = controlledExpandedIds !== undefined ? controlledExpandedIds : internalExpandedIds\n const config = sizeConfig[size]\n\n // Flatten all nodes for keyboard navigation\n const flatNodes = useMemo(() => {\n const flatten = (nodes: TreeNode[], result: TreeNode[] = []): TreeNode[] => {\n nodes.forEach((node) => {\n result.push(node)\n if (node.children && expandedIds.includes(node.id)) {\n flatten(node.children, result)\n }\n })\n return result\n }\n return flatten(data)\n }, [data, expandedIds])\n\n const handleToggle = useCallback(\n (id: string) => {\n const newExpandedIds = expandedIds.includes(id)\n ? expandedIds.filter((eid) => eid !== id)\n : [...expandedIds, id]\n\n if (controlledExpandedIds === undefined) {\n setInternalExpandedIds(newExpandedIds)\n }\n onExpansionChange?.(newExpandedIds)\n },\n [expandedIds, controlledExpandedIds, onExpansionChange]\n )\n\n const handleSelect = useCallback(\n (id: string, additive: boolean) => {\n const node = flatNodes.find((n) => n.id === id)\n if (node) {\n onNodeClick?.(node)\n }\n\n let newSelectedIds: string[]\n if (multiSelect && additive) {\n newSelectedIds = selectedIds.includes(id)\n ? selectedIds.filter((sid) => sid !== id)\n : [...selectedIds, id]\n } else {\n newSelectedIds = selectedIds.includes(id) && selectedIds.length === 1 ? [] : [id]\n }\n\n if (controlledSelectedIds === undefined) {\n setInternalSelectedIds(newSelectedIds)\n }\n onSelectionChange?.(newSelectedIds)\n },\n [flatNodes, multiSelect, selectedIds, controlledSelectedIds, onSelectionChange, onNodeClick]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const currentIndex = flatNodes.findIndex((n) => selectedIds.includes(n.id))\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault()\n const nextIndex = currentIndex < flatNodes.length - 1 ? currentIndex + 1 : 0\n handleSelect(flatNodes[nextIndex].id, false)\n break\n }\n case 'ArrowUp': {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : flatNodes.length - 1\n handleSelect(flatNodes[prevIndex].id, false)\n break\n }\n case 'Home':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[0].id, false)\n }\n break\n case 'End':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[flatNodes.length - 1].id, false)\n }\n break\n }\n },\n [flatNodes, selectedIds, handleSelect]\n )\n\n const containerStyle: CSSProperties = {\n listStyle: 'none',\n margin: 0,\n padding: spacing[1],\n outline: 'none',\n }\n\n return (\n <ul\n ref={ref}\n role=\"tree\"\n aria-label={ariaLabel}\n aria-multiselectable={multiSelect}\n tabIndex={0}\n className={cx('brycks-treeview', `brycks-treeview--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n onKeyDown={handleKeyDown}\n >\n {data.map((node) => (\n <TreeNodeItem\n key={node.id}\n node={node}\n level={0}\n config={config}\n isSelected={selectedIds.includes(node.id)}\n isExpanded={expandedIds.includes(node.id)}\n showLines={showLines}\n onToggle={handleToggle}\n onSelect={handleSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )\n})\n\nTreeView.displayName = 'TreeView'\n"],"names":["sizeConfig","fontSizes","iconSizes","componentPaddingY","spacing","ChevronIcon","expanded","jsx","durations","easings","TreeNodeItem","node","level","config","isSelected","isExpanded","showLines","onToggle","onSelect","renderNode","selectedIds","expandedIds","multiSelect","hasChildren","handleClick","useCallback","e","handleToggle","handleKeyDown","itemStyle","toggleStyle","iconStyle","lineStyle","jsxs","child","TreeView","forwardRef","data","controlledSelectedIds","defaultSelectedIds","controlledExpandedIds","defaultExpandedIds","onSelectionChange","onExpansionChange","onNodeClick","size","ariaLabel","className","testId","ref","internalSelectedIds","setInternalSelectedIds","useState","internalExpandedIds","setInternalExpandedIds","flatNodes","useMemo","flatten","nodes","result","id","newExpandedIds","eid","handleSelect","additive","n","newSelectedIds","sid","currentIndex","nextIndex","prevIndex","containerStyle","cx"],"mappings":";;;;;;;AAwEA,MAAMA,IAA4G;AAAA,EAChH,IAAI,EAAE,UAAUC,EAAU,IAAI,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AAAA,EACtG,IAAI,EAAE,UAAUH,EAAU,MAAM,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AAAA,EACxG,IAAI,EAAE,UAAUH,EAAU,IAAI,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AACxG;AAEA,SAASC,EAAY,EAAE,UAAAC,KAAmC;AACxD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,OAAO;AAAA,QACL,WAAWD,IAAW,kBAAkB;AAAA,QACxC,YAAY,aAAaE,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,MAAA;AAAA,MAG9D,UAAA,gBAAAF,EAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGlH;AAiBA,SAASG,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,GAAsB;AACpB,QAAMC,IAAcZ,EAAK,YAAYA,EAAK,SAAS,SAAS,GAEtDa,IAAcC;AAAA,IAClB,CAACC,MAAwB;AACvB,MAAIf,EAAK,YACTO,EAASP,EAAK,IAAIe,EAAE,WAAWA,EAAE,OAAO;AAAA,IAC1C;AAAA,IACA,CAACf,EAAK,IAAIA,EAAK,UAAUO,CAAQ;AAAA,EAAA,GAG7BS,IAAeF;AAAA,IACnB,CAACC,MAAwB;AACvB,MAAAA,EAAE,gBAAA,GACEH,KACFN,EAASN,EAAK,EAAE;AAAA,IAEpB;AAAA,IACA,CAACA,EAAK,IAAIY,GAAaN,CAAQ;AAAA,EAAA,GAG3BW,IAAgBH;AAAA,IACpB,CAACC,MAAqC;AACpC,UAAI,CAAAf,EAAK;AAET,gBAAQe,EAAE,KAAA;AAAA,UACR,KAAK;AAAA,UACL,KAAK;AACH,YAAAA,EAAE,eAAA,GACFR,EAASP,EAAK,IAAIe,EAAE,WAAWA,EAAE,OAAO;AACxC;AAAA,UACF,KAAK;AACH,YAAAA,EAAE,eAAA,GACEH,KAAe,CAACR,KAClBE,EAASN,EAAK,EAAE;AAElB;AAAA,UACF,KAAK;AACH,YAAAe,EAAE,eAAA,GACEH,KAAeR,KACjBE,EAASN,EAAK,EAAE;AAElB;AAAA,QAAA;AAAA,IAEN;AAAA,IACA,CAACA,EAAK,IAAIA,EAAK,UAAUY,GAAaR,GAAYE,GAAUC,CAAQ;AAAA,EAAA,GAGhEW,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKzB,EAAQ,GAAG;AAAA,IAChB,SAAS,GAAGS,EAAO,OAAO,MAAMT,EAAQ,CAAC,CAAC;AAAA,IAC1C,aAAaA,EAAQ,CAAC,IAAIQ,IAAQC,EAAO;AAAA,IACzC,UAAUA,EAAO;AAAA,IACjB,OAAOF,EAAK,WAAW,sCAAsC;AAAA,IAC7D,iBAAiBG,IAAa,6BAA6B;AAAA,IAC3D,cAAc;AAAA,IACd,QAAQH,EAAK,WAAW,gBAAgB;AAAA,IACxC,YAAY;AAAA,IACZ,YAAY,oBAAoBH,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IACnE,UAAU;AAAA,EAAA,GAGNqB,IAA6B;AAAA,IACjC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOjB,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA,GAGRkB,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOlB,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,OAAOC,IAAa,kCAAkC;AAAA,IACtD,YAAY;AAAA,EAAA,GAGRkB,IAA2BhB,KAAaJ,IAAQ,IAAI;AAAA,IACxD,UAAU;AAAA,IACV,MAAMR,EAAQ,CAAC,KAAKQ,IAAQ,KAAKC,EAAO,SAASA,EAAO,WAAW;AAAA,IACnE,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,iBAAiB;AAAA,EAAA,IACf,CAAA;AAEJ,SACE,gBAAAoB,EAAC,QAAG,MAAK,YAAW,iBAAenB,GAAY,iBAAeS,IAAcR,IAAa,QACvF,UAAA;AAAA,IAAA,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUtB,EAAK,WAAW,KAAK;AAAA,QAC/B,OAAOkB;AAAA,QACP,SAASL;AAAA,QACT,WAAWI;AAAA,QACX,cAAc,CAACF,MAAM;AACnB,UAAI,CAACf,EAAK,YAAY,CAACG,MACrBY,EAAE,cAAc,MAAM,kBAAkB;AAAA,QAE5C;AAAA,QACA,cAAc,CAACA,MAAM;AACnB,UAAKZ,MACHY,EAAE,cAAc,MAAM,kBAAkB;AAAA,QAE5C;AAAA,QAEC,UAAA;AAAA,UAAAV,KAAaJ,IAAQ,KAAK,gBAAAL,EAAC,UAAK,OAAOyB,GAAW,eAAY,QAAO;AAAA,UACtE,gBAAAzB,EAAC,QAAA,EAAK,OAAOuB,GAAa,SAASH,GAChC,UAAAJ,KAAe,gBAAAhB,EAACF,GAAA,EAAY,UAAUU,EAAA,CAAY,EAAA,CACrD;AAAA,UACCJ,EAAK,QAAQ,gBAAAJ,EAAC,UAAK,OAAOwB,GAAY,YAAK,MAAK;AAAA,UAChDZ,IACCA,EAAWR,GAAMG,GAAYC,CAAU,IAEvC,gBAAAR,EAAC,QAAA,EAAK,OAAO,EAAE,MAAM,EAAA,GAAM,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGzCgB,KAAeR,KACd,gBAAAR,EAAC,QAAG,MAAK,SAAQ,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAA,GAC9D,YAAK,SAAU,IAAI,CAAC2B,MACnB,gBAAA3B;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,MAAMwB;AAAA,QACN,OAAOtB,IAAQ;AAAA,QACf,QAAAC;AAAA,QACA,YAAYO,EAAY,SAASc,EAAM,EAAE;AAAA,QACzC,YAAYb,EAAY,SAASa,EAAM,EAAE;AAAA,QACzC,WAAAlB;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,aAAAC;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAZKY,EAAM;AAAA,IAAA,CAcd,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAMC,IAAWC,EAA4C,SAClE;AAAA,EACE,MAAAC;AAAA,EACA,aAAaC;AAAA,EACb,oBAAAC,IAAqB,CAAA;AAAA,EACrB,aAAaC;AAAA,EACb,oBAAAC,IAAqB,CAAA;AAAA,EACrB,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAtB,IAAc;AAAA,EACd,MAAAuB,IAAO;AAAA,EACP,WAAA7B,IAAY;AAAA,EACZ,YAAAG;AAAA,EACA,cAAc2B,IAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,QAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAmBb,CAAkB,GACrF,CAACc,GAAqBC,CAAsB,IAAIF,EAAmBX,CAAkB,GAErFrB,IAAckB,MAA0B,SAAYA,IAAwBY,GAC5E7B,IAAcmB,MAA0B,SAAYA,IAAwBa,GAC5ExC,IAASb,EAAW6C,CAAI,GAGxBU,IAAYC,EAAQ,MAAM;AAC9B,UAAMC,IAAU,CAACC,GAAmBC,IAAqB,CAAA,OACvDD,EAAM,QAAQ,CAAC/C,MAAS;AACtB,MAAAgD,EAAO,KAAKhD,CAAI,GACZA,EAAK,YAAYU,EAAY,SAASV,EAAK,EAAE,KAC/C8C,EAAQ9C,EAAK,UAAUgD,CAAM;AAAA,IAEjC,CAAC,GACMA;AAET,WAAOF,EAAQpB,CAAI;AAAA,EACrB,GAAG,CAACA,GAAMhB,CAAW,CAAC,GAEhBM,IAAeF;AAAA,IACnB,CAACmC,MAAe;AACd,YAAMC,IAAiBxC,EAAY,SAASuC,CAAE,IAC1CvC,EAAY,OAAO,CAACyC,MAAQA,MAAQF,CAAE,IACtC,CAAC,GAAGvC,GAAauC,CAAE;AAEvB,MAAIpB,MAA0B,UAC5Bc,EAAuBO,CAAc,GAEvClB,IAAoBkB,CAAc;AAAA,IACpC;AAAA,IACA,CAACxC,GAAamB,GAAuBG,CAAiB;AAAA,EAAA,GAGlDoB,IAAetC;AAAA,IACnB,CAACmC,GAAYI,MAAsB;AACjC,YAAMrD,IAAO4C,EAAU,KAAK,CAACU,MAAMA,EAAE,OAAOL,CAAE;AAC9C,MAAIjD,KACFiC,IAAcjC,CAAI;AAGpB,UAAIuD;AACJ,MAAI5C,KAAe0C,IACjBE,IAAiB9C,EAAY,SAASwC,CAAE,IACpCxC,EAAY,OAAO,CAAC+C,MAAQA,MAAQP,CAAE,IACtC,CAAC,GAAGxC,GAAawC,CAAE,IAEvBM,IAAiB9C,EAAY,SAASwC,CAAE,KAAKxC,EAAY,WAAW,IAAI,KAAK,CAACwC,CAAE,GAG9EtB,MAA0B,UAC5Ba,EAAuBe,CAAc,GAEvCxB,IAAoBwB,CAAc;AAAA,IACpC;AAAA,IACA,CAACX,GAAWjC,GAAaF,GAAakB,GAAuBI,GAAmBE,CAAW;AAAA,EAAA,GAGvFhB,IAAgBH;AAAA,IACpB,CAACC,MAAuC;AACtC,YAAM0C,IAAeb,EAAU,UAAU,CAAC,MAAMnC,EAAY,SAAS,EAAE,EAAE,CAAC;AAE1E,cAAQM,EAAE,KAAA;AAAA,QACR,KAAK,aAAa;AAChB,UAAAA,EAAE,eAAA;AACF,gBAAM2C,IAAYD,IAAeb,EAAU,SAAS,IAAIa,IAAe,IAAI;AAC3E,UAAAL,EAAaR,EAAUc,CAAS,EAAE,IAAI,EAAK;AAC3C;AAAA,QACF;AAAA,QACA,KAAK,WAAW;AACd,UAAA3C,EAAE,eAAA;AACF,gBAAM4C,IAAYF,IAAe,IAAIA,IAAe,IAAIb,EAAU,SAAS;AAC3E,UAAAQ,EAAaR,EAAUe,CAAS,EAAE,IAAI,EAAK;AAC3C;AAAA,QACF;AAAA,QACA,KAAK;AACH,UAAA5C,EAAE,eAAA,GACE6B,EAAU,SAAS,KACrBQ,EAAaR,EAAU,CAAC,EAAE,IAAI,EAAK;AAErC;AAAA,QACF,KAAK;AACH,UAAA7B,EAAE,eAAA,GACE6B,EAAU,SAAS,KACrBQ,EAAaR,EAAUA,EAAU,SAAS,CAAC,EAAE,IAAI,EAAK;AAExD;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,CAACA,GAAWnC,GAAa2C,CAAY;AAAA,EAAA,GAGjCQ,IAAgC;AAAA,IACpC,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAASnE,EAAQ,CAAC;AAAA,IAClB,SAAS;AAAA,EAAA;AAGX,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAA0C;AAAA,MACA,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,wBAAsBxB;AAAA,MACtB,UAAU;AAAA,MACV,WAAWkD,EAAG,mBAAmB,oBAAoB3B,CAAI,IAAIE,CAAS;AAAA,MACtE,OAAOwB;AAAA,MACP,eAAavB;AAAA,MACb,WAAWpB;AAAA,MAEV,UAAAS,EAAK,IAAI,CAAC1B,MACT,gBAAAJ;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,MAAAC;AAAA,UACA,OAAO;AAAA,UACP,QAAAE;AAAA,UACA,YAAYO,EAAY,SAAST,EAAK,EAAE;AAAA,UACxC,YAAYU,EAAY,SAASV,EAAK,EAAE;AAAA,UACxC,WAAAK;AAAA,UACA,UAAUW;AAAA,UACV,UAAUoC;AAAA,UACV,YAAA5C;AAAA,UACA,aAAAC;AAAA,UACA,aAAAC;AAAA,UACA,aAAAC;AAAA,QAAA;AAAA,QAZKX,EAAK;AAAA,MAAA,CAcb;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDwB,EAAS,cAAc;"}
1	+ {"version":3,"file":"TreeView.js","sources":["../../../../src/components/data/TreeView/TreeView.tsx"],"sourcesContent":["/*\n TreeView Component\n \n A hierarchical tree structure for displaying nested data.\n * Supports selection, expansion, and keyboard navigation.\n \n @module components/data/TreeView\n /\n\nimport {\n forwardRef,\n useState,\n useCallback,\n useMemo,\n type CSSProperties,\n type ReactNode,\n type KeyboardEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\nimport { spacing, fontSizes, durations, easings } from '../../../design-system'\nimport { componentPaddingY, iconSizes } from '../../../design-system/primitives'\n\nexport interface TreeNode {\n /* Unique identifier /\n id: string\n /* Display label /\n label: string\n /* Optional icon /\n icon?: ReactNode\n /* Child nodes /\n children?: TreeNode[]\n /* Whether the node is disabled /\n disabled?: boolean\n /* Additional data /\n data?: unknown\n}\n\nexport type TreeViewSize = 'sm' \| 'md' \| 'lg'\n\nexport interface TreeViewProps {\n /* Tree data /\n data: TreeNode[]\n /* Selected node IDs (controlled) /\n selectedIds?: string[]\n /* Default selected node IDs (uncontrolled) /\n defaultSelectedIds?: string[]\n /* Expanded node IDs (controlled) /\n expandedIds?: string[]\n /* Default expanded node IDs (uncontrolled) /\n defaultExpandedIds?: string[]\n /* Callback when selection changes /\n onSelectionChange?: (selectedIds: string[]) => void\n /* Callback when expansion changes /\n onExpansionChange?: (expandedIds: string[]) => void\n /* Callback when a node is clicked /\n onNodeClick?: (node: TreeNode) => void\n /* Whether to allow multi-selection /\n multiSelect?: boolean\n /* Component size /\n size?: TreeViewSize\n /* Whether to show connecting lines /\n showLines?: boolean\n /* Custom node renderer /\n renderNode?: (node: TreeNode, isSelected: boolean, isExpanded: boolean) => ReactNode\n /* Label for accessibility /\n 'aria-label'?: string\n /* Custom class name /\n className?: string\n /* Test ID /\n testId?: string\n}\n\nconst sizeConfig: Record<TreeViewSize, { fontSize: number; iconSize: number; padding: number; indent: number }> = {\n sm: { fontSize: fontSizes.sm, iconSize: iconSizes.xs, padding: componentPaddingY.xs, indent: spacing[4] },\n md: { fontSize: fontSizes.base, iconSize: iconSizes.sm, padding: componentPaddingY.sm, indent: spacing[5] },\n lg: { fontSize: fontSizes.md, iconSize: iconSizes.md, padding: componentPaddingY.md, indent: spacing[6] },\n}\n\nfunction ChevronIcon({ expanded }: { expanded: boolean }) {\n return (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n style={{\n transform: expanded ? 'rotate(90deg)' : 'rotate(0)',\n transition: `transform ${durations.fast}ms ${easings.easeOut}`,\n }}\n >\n <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\ninterface TreeNodeItemProps {\n node: TreeNode\n level: number\n config: typeof sizeConfig.md\n isSelected: boolean\n isExpanded: boolean\n showLines: boolean\n onToggle: (id: string) => void\n onSelect: (id: string, multi: boolean) => void\n renderNode?: TreeViewProps['renderNode']\n selectedIds: string[]\n expandedIds: string[]\n multiSelect: boolean\n}\n\nfunction TreeNodeItem({\n node,\n level,\n config,\n isSelected,\n isExpanded,\n showLines,\n onToggle,\n onSelect,\n renderNode,\n selectedIds,\n expandedIds,\n multiSelect,\n}: TreeNodeItemProps) {\n const hasChildren = node.children && node.children.length > 0\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (node.disabled) return\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n },\n [node.id, node.disabled, onSelect]\n )\n\n const handleToggle = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n if (hasChildren) {\n onToggle(node.id)\n }\n },\n [node.id, hasChildren, onToggle]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (node.disabled) return\n\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault()\n onSelect(node.id, e.ctrlKey \|\| e.metaKey)\n break\n case 'ArrowRight':\n e.preventDefault()\n if (hasChildren && !isExpanded) {\n onToggle(node.id)\n }\n break\n case 'ArrowLeft':\n e.preventDefault()\n if (hasChildren && isExpanded) {\n onToggle(node.id)\n }\n break\n }\n },\n [node.id, node.disabled, hasChildren, isExpanded, onToggle, onSelect]\n )\n\n const itemStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: spacing[1.5],\n padding: `${config.padding}px ${spacing[2]}px`,\n paddingLeft: spacing[2] + level config.indent,\n fontSize: config.fontSize,\n color: node.disabled ? 'var(--brycks-foreground-disabled)' : 'var(--brycks-foreground-default)',\n backgroundColor: isSelected ? 'var(--brycks-primary-muted)' : 'transparent',\n borderRadius: 'var(--brycks-radius-md)',\n cursor: node.disabled ? 'not-allowed' : 'pointer',\n userSelect: 'none',\n transition: `background-color ${durations.fast}ms ${easings.easeOut}`,\n position: 'relative',\n }\n\n const toggleStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: 'var(--brycks-foreground-muted)',\n cursor: 'pointer',\n flexShrink: 0,\n }\n\n const iconStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: config.iconSize,\n height: config.iconSize,\n color: isSelected ? 'var(--brycks-primary-default)' : 'var(--brycks-foreground-muted)',\n flexShrink: 0,\n }\n\n const lineStyle: CSSProperties = showLines && level > 0 ? {\n position: 'absolute',\n left: spacing[2] + (level - 1) * config.indent + config.iconSize / 2,\n top: 0,\n bottom: 0,\n width: 1,\n backgroundColor: 'var(--brycks-border-default)',\n } : {}\n\n return (\n <li role=\"treeitem\" aria-selected={isSelected} aria-expanded={hasChildren ? isExpanded : undefined}>\n <div\n tabIndex={node.disabled ? -1 : 0}\n style={itemStyle}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n onMouseEnter={(e) => {\n if (!node.disabled && !isSelected) {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.backgroundColor = 'transparent'\n }\n }}\n >\n {showLines && level > 0 && <span style={lineStyle} aria-hidden=\"true\" />}\n <span style={toggleStyle} onClick={handleToggle}>\n {hasChildren && <ChevronIcon expanded={isExpanded} />}\n </span>\n {node.icon && <span style={iconStyle}>{node.icon}</span>}\n {renderNode ? (\n renderNode(node, isSelected, isExpanded)\n ) : (\n <span style={{ flex: 1 }}>{node.label}</span>\n )}\n </div>\n {hasChildren && isExpanded && (\n <ul role=\"group\" style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {node.children!.map((child) => (\n <TreeNodeItem\n key={child.id}\n node={child}\n level={level + 1}\n config={config}\n isSelected={selectedIds.includes(child.id)}\n isExpanded={expandedIds.includes(child.id)}\n showLines={showLines}\n onToggle={onToggle}\n onSelect={onSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )}\n </li>\n )\n}\n\nexport const TreeView = forwardRef<HTMLUListElement, TreeViewProps>(function TreeView(\n {\n data,\n selectedIds: controlledSelectedIds,\n defaultSelectedIds = [],\n expandedIds: controlledExpandedIds,\n defaultExpandedIds = [],\n onSelectionChange,\n onExpansionChange,\n onNodeClick,\n multiSelect = false,\n size = 'md',\n showLines = false,\n renderNode,\n 'aria-label': ariaLabel = 'Tree',\n className,\n testId,\n },\n ref\n) {\n const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(defaultSelectedIds)\n const [internalExpandedIds, setInternalExpandedIds] = useState<string[]>(defaultExpandedIds)\n\n const selectedIds = controlledSelectedIds !== undefined ? controlledSelectedIds : internalSelectedIds\n const expandedIds = controlledExpandedIds !== undefined ? controlledExpandedIds : internalExpandedIds\n const config = sizeConfig[size]\n\n // Flatten all nodes for keyboard navigation\n const flatNodes = useMemo(() => {\n const flatten = (nodes: TreeNode[], result: TreeNode[] = []): TreeNode[] => {\n nodes.forEach((node) => {\n result.push(node)\n if (node.children && expandedIds.includes(node.id)) {\n flatten(node.children, result)\n }\n })\n return result\n }\n return flatten(data)\n }, [data, expandedIds])\n\n const handleToggle = useCallback(\n (id: string) => {\n const newExpandedIds = expandedIds.includes(id)\n ? expandedIds.filter((eid) => eid !== id)\n : [...expandedIds, id]\n\n if (controlledExpandedIds === undefined) {\n setInternalExpandedIds(newExpandedIds)\n }\n onExpansionChange?.(newExpandedIds)\n },\n [expandedIds, controlledExpandedIds, onExpansionChange]\n )\n\n const handleSelect = useCallback(\n (id: string, additive: boolean) => {\n const node = flatNodes.find((n) => n.id === id)\n if (node) {\n onNodeClick?.(node)\n }\n\n let newSelectedIds: string[]\n if (multiSelect && additive) {\n newSelectedIds = selectedIds.includes(id)\n ? selectedIds.filter((sid) => sid !== id)\n : [...selectedIds, id]\n } else {\n newSelectedIds = selectedIds.includes(id) && selectedIds.length === 1 ? [] : [id]\n }\n\n if (controlledSelectedIds === undefined) {\n setInternalSelectedIds(newSelectedIds)\n }\n onSelectionChange?.(newSelectedIds)\n },\n [flatNodes, multiSelect, selectedIds, controlledSelectedIds, onSelectionChange, onNodeClick]\n )\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const currentIndex = flatNodes.findIndex((n) => selectedIds.includes(n.id))\n\n switch (e.key) {\n case 'ArrowDown': {\n e.preventDefault()\n const nextIndex = currentIndex < flatNodes.length - 1 ? currentIndex + 1 : 0\n handleSelect(flatNodes[nextIndex].id, false)\n break\n }\n case 'ArrowUp': {\n e.preventDefault()\n const prevIndex = currentIndex > 0 ? currentIndex - 1 : flatNodes.length - 1\n handleSelect(flatNodes[prevIndex].id, false)\n break\n }\n case 'Home':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[0].id, false)\n }\n break\n case 'End':\n e.preventDefault()\n if (flatNodes.length > 0) {\n handleSelect(flatNodes[flatNodes.length - 1].id, false)\n }\n break\n }\n },\n [flatNodes, selectedIds, handleSelect]\n )\n\n const containerStyle: CSSProperties = {\n listStyle: 'none',\n margin: 0,\n padding: spacing[1],\n outline: 'none',\n }\n\n return (\n <ul\n ref={ref}\n role=\"tree\"\n aria-label={ariaLabel}\n aria-multiselectable={multiSelect}\n tabIndex={0}\n className={cx('brycks-treeview', `brycks-treeview--${size}`, className)}\n style={containerStyle}\n data-testid={testId}\n onKeyDown={handleKeyDown}\n >\n {data.map((node) => (\n <TreeNodeItem\n key={node.id}\n node={node}\n level={0}\n config={config}\n isSelected={selectedIds.includes(node.id)}\n isExpanded={expandedIds.includes(node.id)}\n showLines={showLines}\n onToggle={handleToggle}\n onSelect={handleSelect}\n renderNode={renderNode}\n selectedIds={selectedIds}\n expandedIds={expandedIds}\n multiSelect={multiSelect}\n />\n ))}\n </ul>\n )\n})\n\nTreeView.displayName = 'TreeView'\n"],"names":["sizeConfig","fontSizes","iconSizes","componentPaddingY","spacing","ChevronIcon","expanded","jsx","durations","easings","TreeNodeItem","node","level","config","isSelected","isExpanded","showLines","onToggle","onSelect","renderNode","selectedIds","expandedIds","multiSelect","hasChildren","handleClick","useCallback","e","handleToggle","handleKeyDown","itemStyle","toggleStyle","iconStyle","lineStyle","jsxs","child","TreeView","forwardRef","data","controlledSelectedIds","defaultSelectedIds","controlledExpandedIds","defaultExpandedIds","onSelectionChange","onExpansionChange","onNodeClick","size","ariaLabel","className","testId","ref","internalSelectedIds","setInternalSelectedIds","useState","internalExpandedIds","setInternalExpandedIds","flatNodes","useMemo","flatten","nodes","result","id","newExpandedIds","eid","handleSelect","additive","n","newSelectedIds","sid","currentIndex","nextIndex","prevIndex","containerStyle","cx"],"mappings":";;;;;;;AAwEA,MAAMA,IAA4G;AAAA,EAChH,IAAI,EAAE,UAAUC,EAAU,IAAI,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AAAA,EACtG,IAAI,EAAE,UAAUH,EAAU,MAAM,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AAAA,EACxG,IAAI,EAAE,UAAUH,EAAU,IAAI,UAAUC,EAAU,IAAI,SAASC,EAAkB,IAAI,QAAQC,EAAQ,CAAC,EAAA;AACxG;AAEA,SAASC,EAAY,EAAE,UAAAC,KAAmC;AACxD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,OAAO;AAAA,QACL,WAAWD,IAAW,kBAAkB;AAAA,QACxC,YAAY,aAAaE,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,MAAA;AAAA,MAG9D,UAAA,gBAAAF,EAAC,QAAA,EAAK,GAAE,gBAAe,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGlH;AAiBA,SAASG,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,GAAsB;AACpB,QAAMC,IAAcZ,EAAK,YAAYA,EAAK,SAAS,SAAS,GAEtDa,IAAcC;AAAA,IAClB,CAACC,MAAwB;AACvB,MAAIf,EAAK,YACTO,EAASP,EAAK,IAAIe,EAAE,WAAWA,EAAE,OAAO;AAAA,IAC1C;AAAA,IACA,CAACf,EAAK,IAAIA,EAAK,UAAUO,CAAQ;AAAA,EAAA,GAG7BS,IAAeF;AAAA,IACnB,CAACC,MAAwB;AACvB,MAAAA,EAAE,gBAAA,GACEH,KACFN,EAASN,EAAK,EAAE;AAAA,IAEpB;AAAA,IACA,CAACA,EAAK,IAAIY,GAAaN,CAAQ;AAAA,EAAA,GAG3BW,IAAgBH;AAAA,IACpB,CAACC,MAAqC;AACpC,UAAI,CAAAf,EAAK;AAET,gBAAQe,EAAE,KAAA;AAAA,UACR,KAAK;AAAA,UACL,KAAK;AACH,YAAAA,EAAE,eAAA,GACFR,EAASP,EAAK,IAAIe,EAAE,WAAWA,EAAE,OAAO;AACxC;AAAA,UACF,KAAK;AACH,YAAAA,EAAE,eAAA,GACEH,KAAe,CAACR,KAClBE,EAASN,EAAK,EAAE;AAElB;AAAA,UACF,KAAK;AACH,YAAAe,EAAE,eAAA,GACEH,KAAeR,KACjBE,EAASN,EAAK,EAAE;AAElB;AAAA,QAAA;AAAA,IAEN;AAAA,IACA,CAACA,EAAK,IAAIA,EAAK,UAAUY,GAAaR,GAAYE,GAAUC,CAAQ;AAAA,EAAA,GAGhEW,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKzB,EAAQ,GAAG;AAAA,IAChB,SAAS,GAAGS,EAAO,OAAO,MAAMT,EAAQ,CAAC,CAAC;AAAA,IAC1C,aAAaA,EAAQ,CAAC,IAAIQ,IAAQC,EAAO;AAAA,IACzC,UAAUA,EAAO;AAAA,IACjB,OAAOF,EAAK,WAAW,sCAAsC;AAAA,IAC7D,iBAAiBG,IAAa,gCAAgC;AAAA,IAC9D,cAAc;AAAA,IACd,QAAQH,EAAK,WAAW,gBAAgB;AAAA,IACxC,YAAY;AAAA,IACZ,YAAY,oBAAoBH,EAAU,IAAI,MAAMC,EAAQ,OAAO;AAAA,IACnE,UAAU;AAAA,EAAA,GAGNqB,IAA6B;AAAA,IACjC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOjB,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EAAA,GAGRkB,IAA2B;AAAA,IAC/B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAOlB,EAAO;AAAA,IACd,QAAQA,EAAO;AAAA,IACf,OAAOC,IAAa,kCAAkC;AAAA,IACtD,YAAY;AAAA,EAAA,GAGRkB,IAA2BhB,KAAaJ,IAAQ,IAAI;AAAA,IACxD,UAAU;AAAA,IACV,MAAMR,EAAQ,CAAC,KAAKQ,IAAQ,KAAKC,EAAO,SAASA,EAAO,WAAW;AAAA,IACnE,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,iBAAiB;AAAA,EAAA,IACf,CAAA;AAEJ,SACE,gBAAAoB,EAAC,QAAG,MAAK,YAAW,iBAAenB,GAAY,iBAAeS,IAAcR,IAAa,QACvF,UAAA;AAAA,IAAA,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUtB,EAAK,WAAW,KAAK;AAAA,QAC/B,OAAOkB;AAAA,QACP,SAASL;AAAA,QACT,WAAWI;AAAA,QACX,cAAc,CAACF,MAAM;AACnB,UAAI,CAACf,EAAK,YAAY,CAACG,MACrBY,EAAE,cAAc,MAAM,kBAAkB;AAAA,QAE5C;AAAA,QACA,cAAc,CAACA,MAAM;AACnB,UAAKZ,MACHY,EAAE,cAAc,MAAM,kBAAkB;AAAA,QAE5C;AAAA,QAEC,UAAA;AAAA,UAAAV,KAAaJ,IAAQ,KAAK,gBAAAL,EAAC,UAAK,OAAOyB,GAAW,eAAY,QAAO;AAAA,UACtE,gBAAAzB,EAAC,QAAA,EAAK,OAAOuB,GAAa,SAASH,GAChC,UAAAJ,KAAe,gBAAAhB,EAACF,GAAA,EAAY,UAAUU,EAAA,CAAY,EAAA,CACrD;AAAA,UACCJ,EAAK,QAAQ,gBAAAJ,EAAC,UAAK,OAAOwB,GAAY,YAAK,MAAK;AAAA,UAChDZ,IACCA,EAAWR,GAAMG,GAAYC,CAAU,IAEvC,gBAAAR,EAAC,QAAA,EAAK,OAAO,EAAE,MAAM,EAAA,GAAM,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGzCgB,KAAeR,KACd,gBAAAR,EAAC,QAAG,MAAK,SAAQ,OAAO,EAAE,WAAW,QAAQ,QAAQ,GAAG,SAAS,EAAA,GAC9D,YAAK,SAAU,IAAI,CAAC2B,MACnB,gBAAA3B;AAAA,MAACG;AAAA,MAAA;AAAA,QAEC,MAAMwB;AAAA,QACN,OAAOtB,IAAQ;AAAA,QACf,QAAAC;AAAA,QACA,YAAYO,EAAY,SAASc,EAAM,EAAE;AAAA,QACzC,YAAYb,EAAY,SAASa,EAAM,EAAE;AAAA,QACzC,WAAAlB;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,aAAAC;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAZKY,EAAM;AAAA,IAAA,CAcd,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAMC,IAAWC,EAA4C,SAClE;AAAA,EACE,MAAAC;AAAA,EACA,aAAaC;AAAA,EACb,oBAAAC,IAAqB,CAAA;AAAA,EACrB,aAAaC;AAAA,EACb,oBAAAC,IAAqB,CAAA;AAAA,EACrB,mBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAtB,IAAc;AAAA,EACd,MAAAuB,IAAO;AAAA,EACP,WAAA7B,IAAY;AAAA,EACZ,YAAAG;AAAA,EACA,cAAc2B,IAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,QAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAmBb,CAAkB,GACrF,CAACc,GAAqBC,CAAsB,IAAIF,EAAmBX,CAAkB,GAErFrB,IAAckB,MAA0B,SAAYA,IAAwBY,GAC5E7B,IAAcmB,MAA0B,SAAYA,IAAwBa,GAC5ExC,IAASb,EAAW6C,CAAI,GAGxBU,IAAYC,EAAQ,MAAM;AAC9B,UAAMC,IAAU,CAACC,GAAmBC,IAAqB,CAAA,OACvDD,EAAM,QAAQ,CAAC/C,MAAS;AACtB,MAAAgD,EAAO,KAAKhD,CAAI,GACZA,EAAK,YAAYU,EAAY,SAASV,EAAK,EAAE,KAC/C8C,EAAQ9C,EAAK,UAAUgD,CAAM;AAAA,IAEjC,CAAC,GACMA;AAET,WAAOF,EAAQpB,CAAI;AAAA,EACrB,GAAG,CAACA,GAAMhB,CAAW,CAAC,GAEhBM,IAAeF;AAAA,IACnB,CAACmC,MAAe;AACd,YAAMC,IAAiBxC,EAAY,SAASuC,CAAE,IAC1CvC,EAAY,OAAO,CAACyC,MAAQA,MAAQF,CAAE,IACtC,CAAC,GAAGvC,GAAauC,CAAE;AAEvB,MAAIpB,MAA0B,UAC5Bc,EAAuBO,CAAc,GAEvClB,IAAoBkB,CAAc;AAAA,IACpC;AAAA,IACA,CAACxC,GAAamB,GAAuBG,CAAiB;AAAA,EAAA,GAGlDoB,IAAetC;AAAA,IACnB,CAACmC,GAAYI,MAAsB;AACjC,YAAMrD,IAAO4C,EAAU,KAAK,CAACU,MAAMA,EAAE,OAAOL,CAAE;AAC9C,MAAIjD,KACFiC,IAAcjC,CAAI;AAGpB,UAAIuD;AACJ,MAAI5C,KAAe0C,IACjBE,IAAiB9C,EAAY,SAASwC,CAAE,IACpCxC,EAAY,OAAO,CAAC+C,MAAQA,MAAQP,CAAE,IACtC,CAAC,GAAGxC,GAAawC,CAAE,IAEvBM,IAAiB9C,EAAY,SAASwC,CAAE,KAAKxC,EAAY,WAAW,IAAI,KAAK,CAACwC,CAAE,GAG9EtB,MAA0B,UAC5Ba,EAAuBe,CAAc,GAEvCxB,IAAoBwB,CAAc;AAAA,IACpC;AAAA,IACA,CAACX,GAAWjC,GAAaF,GAAakB,GAAuBI,GAAmBE,CAAW;AAAA,EAAA,GAGvFhB,IAAgBH;AAAA,IACpB,CAACC,MAAuC;AACtC,YAAM0C,IAAeb,EAAU,UAAU,CAAC,MAAMnC,EAAY,SAAS,EAAE,EAAE,CAAC;AAE1E,cAAQM,EAAE,KAAA;AAAA,QACR,KAAK,aAAa;AAChB,UAAAA,EAAE,eAAA;AACF,gBAAM2C,IAAYD,IAAeb,EAAU,SAAS,IAAIa,IAAe,IAAI;AAC3E,UAAAL,EAAaR,EAAUc,CAAS,EAAE,IAAI,EAAK;AAC3C;AAAA,QACF;AAAA,QACA,KAAK,WAAW;AACd,UAAA3C,EAAE,eAAA;AACF,gBAAM4C,IAAYF,IAAe,IAAIA,IAAe,IAAIb,EAAU,SAAS;AAC3E,UAAAQ,EAAaR,EAAUe,CAAS,EAAE,IAAI,EAAK;AAC3C;AAAA,QACF;AAAA,QACA,KAAK;AACH,UAAA5C,EAAE,eAAA,GACE6B,EAAU,SAAS,KACrBQ,EAAaR,EAAU,CAAC,EAAE,IAAI,EAAK;AAErC;AAAA,QACF,KAAK;AACH,UAAA7B,EAAE,eAAA,GACE6B,EAAU,SAAS,KACrBQ,EAAaR,EAAUA,EAAU,SAAS,CAAC,EAAE,IAAI,EAAK;AAExD;AAAA,MAAA;AAAA,IAEN;AAAA,IACA,CAACA,GAAWnC,GAAa2C,CAAY;AAAA,EAAA,GAGjCQ,IAAgC;AAAA,IACpC,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAASnE,EAAQ,CAAC;AAAA,IAClB,SAAS;AAAA,EAAA;AAGX,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAA0C;AAAA,MACA,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,wBAAsBxB;AAAA,MACtB,UAAU;AAAA,MACV,WAAWkD,EAAG,mBAAmB,oBAAoB3B,CAAI,IAAIE,CAAS;AAAA,MACtE,OAAOwB;AAAA,MACP,eAAavB;AAAA,MACb,WAAWpB;AAAA,MAEV,UAAAS,EAAK,IAAI,CAAC1B,MACT,gBAAAJ;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,MAAAC;AAAA,UACA,OAAO;AAAA,UACP,QAAAE;AAAA,UACA,YAAYO,EAAY,SAAST,EAAK,EAAE;AAAA,UACxC,YAAYU,EAAY,SAASV,EAAK,EAAE;AAAA,UACxC,WAAAK;AAAA,UACA,UAAUW;AAAA,UACV,UAAUoC;AAAA,UACV,YAAA5C;AAAA,UACA,aAAAC;AAAA,UACA,aAAAC;AAAA,UACA,aAAAC;AAAA,QAAA;AAAA,QAZKX,EAAK;AAAA,MAAA,CAcb;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAEDwB,EAAS,cAAc;"}

package/dist/components/feedback/Alert/Alert.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),p=require("../../../utils/styles.cjs"),v={info:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),success:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),error:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})},i=y.forwardRef(function({intent:e="info",variant:l="subtle",title:s,icon:n,showIcon:d=!0,action:t,isDismissible:o,onDismiss:a,className:h,style:k,testId:x,children:c,...u},j){return r.jsxs("div",{ref:j,role:"alert",className:p.cx("brycks-alert",`brycks-alert--${e}`,`brycks-alert--${l}`,h),style:k,"data-testid":x,...u,children:[d&&r.jsx("span",{className:"brycks-alert__icon",children:n??v[e]}),r.jsxs("div",{className:"brycks-alert__content",children:[s&&r.jsx("div",{className:"brycks-alert__title",children:s}),c&&r.jsx("div",{className:"brycks-alert__description",children:c})]}),(t||o)&&r.jsxs("div",{className:"brycks-alert__actions",children:[t,o&&r.jsx("button",{type:"button",className:"brycks-alert__dismiss",onClick:a,"aria-label":"Dismiss alert",children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});i.displayName="Alert";exports.Alert=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("react"),v=require("../../../utils/styles.cjs"),L={info:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),success:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),error:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})},i=p.forwardRef(function({intent:e="info",variant:l="subtle",title:s,icon:n,showIcon:d=!0,action:t,isDismissible:o,onDismiss:a,dismissLabel:h="Dismiss alert",className:k,style:x,testId:u,children:c,...j},y){return r.jsxs("div",{ref:y,role:"alert",className:v.cx("brycks-alert",`brycks-alert--${e}`,`brycks-alert--${l}`,k),style:x,"data-testid":u,...j,children:[d&&r.jsx("span",{className:"brycks-alert__icon",children:n??L[e]}),r.jsxs("div",{className:"brycks-alert__content",children:[s&&r.jsx("div",{className:"brycks-alert__title",children:s}),c&&r.jsx("div",{className:"brycks-alert__description",children:c})]}),(t||o)&&r.jsxs("div",{className:"brycks-alert__actions",children:[t,o&&r.jsx("button",{type:"button",className:"brycks-alert__dismiss",onClick:a,"aria-label":h,children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});i.displayName="Alert";exports.Alert=i;
 //# sourceMappingURL=Alert.cjs.map

package/dist/components/feedback/Alert/Alert.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/*\r\n Alert Component\r\n \r\n Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n \r\n All color styles are handled via CSS classes for easy customization.\r\n /\r\n\r\nimport React, {\r\n forwardRef,\r\n type ReactNode,\r\n type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' \| 'success' \| 'warning' \| 'error'\r\nexport type AlertVariant = 'subtle' \| 'solid' \| 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n /* Visual intent/status /\r\n intent?: AlertIntent\r\n /* Visual variant /\r\n variant?: AlertVariant\r\n /* Alert title /\r\n title?: ReactNode\r\n /* Custom icon /\r\n icon?: ReactNode\r\n /* Whether to show default icon /\r\n showIcon?: boolean\r\n /* Action element (button, link) /\r\n action?: ReactNode\r\n /* Whether alert can be dismissed /\r\n isDismissible?: boolean\r\n /* Callback when dismissed /\r\n onDismiss?: () => void\r\n /* Custom class name /\r\n className?: string\r\n /* Test ID /\r\n testId?: string\r\n /* Alert content */\r\n children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n info: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n success: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n </svg>\r\n ),\r\n warning: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n error: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n {\r\n intent = 'info',\r\n variant = 'subtle',\r\n title,\r\n icon,\r\n showIcon = true,\r\n action,\r\n isDismissible,\r\n onDismiss,\r\n className,\r\n style,\r\n testId,\r\n children,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cx(\r\n 'brycks-alert',\r\n `brycks-alert--${intent}`,\r\n `brycks-alert--${variant}`,\r\n className\r\n )}\r\n style={style}\r\n data-testid={testId}\r\n {...props}\r\n >\r\n {showIcon && (\r\n <span className=\"brycks-alert__icon\">\r\n {icon ?? defaultIcons[intent]}\r\n </span>\r\n )}\r\n\r\n <div className=\"brycks-alert__content\">\r\n {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n </div>\r\n\r\n {(action \|\| isDismissible) && (\r\n <div className=\"brycks-alert__actions\">\r\n {action}\r\n {isDismissible && (\r\n <button\r\n type=\"button\"\r\n className=\"brycks-alert__dismiss\"\r\n onClick={onDismiss}\r\n aria-label~~=\"Dismiss alert~~\"\r\n >\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":"+~~KA4CMA~~,EAAuD,CAC3D,KACEC,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,OAAO,eAAe,YAAY,KAAA,CAAM,EACtEA,EAAAA,IAAC,QAAK,EAAE,UAAU,OAAO,eAAe,YAAY,MAAM,cAAc,OAAA,CAAQ,EAChFA,EAAAA,IAAC,UAAO,GAAG,IAAI,GAAG,MAAM,EAAE,OAAO,KAAK,cAAA,CAAe,CAAA,EACvD,EAEF,QACED,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,OAAO,eAAe,YAAY,KAAA,CAAM,EACtEA,EAAAA,IAAC,OAAA,CAAK,EAAE,iBAAiB,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,OAAA,CAAQ,CAAA,EAChH,EAEF,QACED,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAK,EAAE,wBAAwB,OAAO,eAAe,YAAY,MAAM,eAAe,OAAA,CAAQ,EAC/FA,EAAAA,IAAC,QAAK,EAAE,UAAU,OAAO,eAAe,YAAY,MAAM,cAAc,OAAA,CAAQ,EAChFA,EAAAA,IAAC,UAAO,GAAG,IAAI,GAAG,OAAO,EAAE,OAAO,KAAK,cAAA,CAAe,CAAA,EACxD,EAEF,MACED,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAO,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,OAAO,eAAe,YAAY,KAAA,CAAM,EACtEA,EAAAA,IAAC,QAAK,EAAE,uCAAuC,OAAO,eAAe,YAAY,MAAM,cAAc,OAAA,CAAQ,CAAA,CAAA,CAC/G,CAEJ,EAEaC,EAAQC,EAAAA,WAAuC,SAC1D,CACE,OAAAC,EAAS,OACT,QAAAC,EAAU,SACV,MAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,~~OACEjB~~,EAAAA,KAAC,MAAA,CACC,~~IAAAiB~~,EACA,KAAK,QACL,UAAWC,EAAAA,GACT,eACA,~~iBAAiBd~~,CAAM,GACvB,iBAAiBC,CAAO,~~GACxBO~~,CAAA,EAEF,MAAAC,EACA,cAAaC,EACZ,GAAGE,EAEH,SAAA,~~CAAAR~~,SACE,OAAA,CAAK,UAAU,qBACb,SAAAD,GAAQR,EAAaK,CAAM,EAC9B,EAGFJ,EAAAA,KAAC,MAAA,CAAI,UAAU,wBACZ,SAAA,CAAAM,GAASL,EAAAA,IAAC,MAAA,CAAI,UAAU,sBAAuB,SAAAK,EAAM,~~EACrDS~~,~~GAAYd~~,EAAAA,IAAC,MAAA,CAAI,UAAU,4BAA6B,~~SAAAc~~,CAAA,CAAS,CAAA,EACpE,~~GAEEN~~,GAAUC,IACVV,EAAAA,KAAC,MAAA,CAAI,UAAU,wBACZ,SAAA,CAAAS,EACAC,GACCT,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,wBACV,QAASU,EACT,~~aAAW~~,~~gBAEX~~,~~SAAAV~~,EAAAA,IAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACnD,eAAC,OAAA,CAAK,EAAE,uBAAuB,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,CAAA,CAC/F,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CAAA,CAAA,CAIR,CAAC,EAEDC,EAAM,YAAc"}
1	+ {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/*\r\n Alert Component\r\n \r\n Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n \r\n All color styles are handled via CSS classes for easy customization.\r\n /\r\n\r\nimport React, {\r\n forwardRef,\r\n type ReactNode,\r\n type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' \| 'success' \| 'warning' \| 'error'\r\nexport type AlertVariant = 'subtle' \| 'solid' \| 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n /* Visual intent/status /\r\n intent?: AlertIntent\r\n /* Visual variant /\r\n variant?: AlertVariant\r\n /* Alert title /\r\n title?: ReactNode\r\n /* Custom icon /\r\n icon?: ReactNode\r\n /* Whether to show default icon /\r\n showIcon?: boolean\r\n /* Action element (button, link) /\r\n action?: ReactNode\r\n /* Whether alert can be dismissed /\r\n isDismissible?: boolean\r\n /* Callback when dismissed /\r\n onDismiss?: () => void\r\n /* Accessible label of the dismiss button /\r\n dismissLabel?: string\r\n /* Custom class name /\r\n className?: string\r\n /* Test ID /\r\n testId?: string\r\n /* Alert content */\r\n children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n info: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n success: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n </svg>\r\n ),\r\n warning: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n error: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n {\r\n intent = 'info',\r\n variant = 'subtle',\r\n title,\r\n icon,\r\n showIcon = true,\r\n action,\r\n isDismissible,\r\n onDismiss,\r\n dismissLabel = 'Dismiss alert',\r\n className,\r\n style,\r\n testId,\r\n children,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cx(\r\n 'brycks-alert',\r\n `brycks-alert--${intent}`,\r\n `brycks-alert--${variant}`,\r\n className\r\n )}\r\n style={style}\r\n data-testid={testId}\r\n {...props}\r\n >\r\n {showIcon && (\r\n <span className=\"brycks-alert__icon\">\r\n {icon ?? defaultIcons[intent]}\r\n </span>\r\n )}\r\n\r\n <div className=\"brycks-alert__content\">\r\n {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n </div>\r\n\r\n {(action \|\| isDismissible) && (\r\n <div className=\"brycks-alert__actions\">\r\n {action}\r\n {isDismissible && (\r\n <button\r\n type=\"button\"\r\n className=\"brycks-alert__dismiss\"\r\n onClick={onDismiss}\r\n aria-label={dismissLabel}\r\n >\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","dismissLabel","className","style","testId","children","props","ref","cx"],"mappings":"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"}

package/dist/components/feedback/Alert/Alert.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { cx as m } from "../../../utils/styles.js";
-const v = {
+import { forwardRef as m } from "react";
+import { cx as v } from "../../../utils/styles.js";
+const L = {
   info: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
     /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ r("path", { d: "M9 8V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
@@ -20,7 +20,7 @@ const v = {
     /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ r("path", { d: "M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] })
-}, L = y(function({
+}, x = m(function({
   intent: t = "info",
   variant: l = "subtle",
   title: o,
@@ -29,28 +29,29 @@ const v = {
   action: c,
   isDismissible: i,
   onDismiss: a,
-  className: h,
-  style: k,
-  testId: u,
+  dismissLabel: h = "Dismiss alert",
+  className: k,
+  style: u,
+  testId: p,
   children: s,
-  ...p
-}, f) {
+  ...f
+}, y) {
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: f,
+      ref: y,
       role: "alert",
-      className: m(
+      className: v(
         "brycks-alert",
         `brycks-alert--${t}`,
         `brycks-alert--${l}`,
-        h
+        k
       ),
-      style: k,
-      "data-testid": u,
-      ...p,
+      style: u,
+      "data-testid": p,
+      ...f,
       children: [
-        d && /* @__PURE__ */ r("span", { className: "brycks-alert__icon", children: n ?? v[t] }),
+        d && /* @__PURE__ */ r("span", { className: "brycks-alert__icon", children: n ?? L[t] }),
         /* @__PURE__ */ e("div", { className: "brycks-alert__content", children: [
           o && /* @__PURE__ */ r("div", { className: "brycks-alert__title", children: o }),
           s && /* @__PURE__ */ r("div", { className: "brycks-alert__description", children: s })
@@ -63,7 +64,7 @@ const v = {
               type: "button",
               className: "brycks-alert__dismiss",
               onClick: a,
-              "aria-label": "Dismiss alert",
+              "aria-label": h,
               children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ r("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
             }
           )
@@ -72,8 +73,8 @@ const v = {
     }
   );
 });
-L.displayName = "Alert";
+x.displayName = "Alert";
 export {
-  L as Alert
+  x as Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/feedback/Alert/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/*\r\n Alert Component\r\n \r\n Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n \r\n All color styles are handled via CSS classes for easy customization.\r\n /\r\n\r\nimport React, {\r\n forwardRef,\r\n type ReactNode,\r\n type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' \| 'success' \| 'warning' \| 'error'\r\nexport type AlertVariant = 'subtle' \| 'solid' \| 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n /* Visual intent/status /\r\n intent?: AlertIntent\r\n /* Visual variant /\r\n variant?: AlertVariant\r\n /* Alert title /\r\n title?: ReactNode\r\n /* Custom icon /\r\n icon?: ReactNode\r\n /* Whether to show default icon /\r\n showIcon?: boolean\r\n /* Action element (button, link) /\r\n action?: ReactNode\r\n /* Whether alert can be dismissed /\r\n isDismissible?: boolean\r\n /* Callback when dismissed /\r\n onDismiss?: () => void\r\n /* Custom class name /\r\n className?: string\r\n /* Test ID /\r\n testId?: string\r\n /* Alert content */\r\n children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n info: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n success: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n </svg>\r\n ),\r\n warning: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n error: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n {\r\n intent = 'info',\r\n variant = 'subtle',\r\n title,\r\n icon,\r\n showIcon = true,\r\n action,\r\n isDismissible,\r\n onDismiss,\r\n className,\r\n style,\r\n testId,\r\n children,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cx(\r\n 'brycks-alert',\r\n `brycks-alert--${intent}`,\r\n `brycks-alert--${variant}`,\r\n className\r\n )}\r\n style={style}\r\n data-testid={testId}\r\n {...props}\r\n >\r\n {showIcon && (\r\n <span className=\"brycks-alert__icon\">\r\n {icon ?? defaultIcons[intent]}\r\n </span>\r\n )}\r\n\r\n <div className=\"brycks-alert__content\">\r\n {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n </div>\r\n\r\n {(action \|\| isDismissible) && (\r\n <div className=\"brycks-alert__actions\">\r\n {action}\r\n {isDismissible && (\r\n <button\r\n type=\"button\"\r\n className=\"brycks-alert__dismiss\"\r\n onClick={onDismiss}\r\n aria-label~~=\"Dismiss alert~~\"\r\n >\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":";;;~~AA4CA~~,MAAMA,IAAuD;AAAA,EAC3D,MACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,UAAK,GAAE,WAAU,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,IAChF,gBAAAA,EAAC,YAAO,IAAG,KAAI,IAAG,OAAM,GAAE,QAAO,MAAK,eAAA,CAAe;AAAA,EAAA,GACvD;AAAA,EAEF,SACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,QAAA,EAAK,GAAE,kBAAiB,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,QAAA,CAAQ;AAAA,EAAA,GAChH;AAAA,EAEF,SACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,GAAE,yBAAwB,QAAO,gBAAe,aAAY,OAAM,gBAAe,QAAA,CAAQ;AAAA,IAC/F,gBAAAA,EAAC,UAAK,GAAE,WAAU,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,IAChF,gBAAAA,EAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,QAAO,MAAK,eAAA,CAAe;AAAA,EAAA,GACxD;AAAA,EAEF,OACE,gBAAAD,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,QAAO,gBAAe,aAAY,MAAA,CAAM;AAAA,IACtE,gBAAAA,EAAC,UAAK,GAAE,wCAAuC,QAAO,gBAAe,aAAY,OAAM,eAAc,QAAA,CAAQ;AAAA,EAAA,EAAA,CAC/G;AAEJ,GAEaC,IAAQC,EAAuC,SAC1D;AAAA,EACE,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,~~gBAAAjB~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,~~KAAAiB~~;AAAA,MACA,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACA,~~iBAAiBd~~,CAAM;AAAA,QACvB,iBAAiBC,CAAO;AAAA,~~QACxBO~~;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MACA,eAAaC;AAAA,MACZ,GAAGE;AAAA,MAEH,UAAA;AAAA,~~QAAAR~~,uBACE,QAAA,EAAK,WAAU,sBACb,UAAAD,KAAQR,EAAaK,CAAM,GAC9B;AAAA,QAGF,gBAAAJ,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAM,KAAS,gBAAAL,EAAC,OAAA,EAAI,WAAU,uBAAuB,UAAAK,GAAM;AAAA,~~UACrDS~~,KAAY,~~gBAAAd~~,EAAC,OAAA,EAAI,WAAU,6BAA6B,~~UAAAc~~,EAAA,CAAS;AAAA,QAAA,GACpE;AAAA,~~SAEEN~~,KAAUC,MACV,gBAAAV,EAAC,OAAA,EAAI,WAAU,yBACZ,UAAA;AAAA,UAAAS;AAAA,UACAC,KACC,gBAAAT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASU;AAAA,cACT,~~cAAW~~;AAAA,~~cAEX~~,UAAA,~~gBAAAV~~,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QACnD,4BAAC,QAAA,EAAK,GAAE,wBAAuB,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,EAAA,CAC/F;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAEDC,EAAM,cAAc;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/*\r\n Alert Component\r\n \r\n Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n \r\n All color styles are handled via CSS classes for easy customization.\r\n /\r\n\r\nimport React, {\r\n forwardRef,\r\n type ReactNode,\r\n type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' \| 'success' \| 'warning' \| 'error'\r\nexport type AlertVariant = 'subtle' \| 'solid' \| 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n /* Visual intent/status /\r\n intent?: AlertIntent\r\n /* Visual variant /\r\n variant?: AlertVariant\r\n /* Alert title /\r\n title?: ReactNode\r\n /* Custom icon /\r\n icon?: ReactNode\r\n /* Whether to show default icon /\r\n showIcon?: boolean\r\n /* Action element (button, link) /\r\n action?: ReactNode\r\n /* Whether alert can be dismissed /\r\n isDismissible?: boolean\r\n /* Callback when dismissed /\r\n onDismiss?: () => void\r\n /* Accessible label of the dismiss button /\r\n dismissLabel?: string\r\n /* Custom class name /\r\n className?: string\r\n /* Test ID /\r\n testId?: string\r\n /* Alert content */\r\n children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n info: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n success: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n </svg>\r\n ),\r\n warning: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n </svg>\r\n ),\r\n error: (\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n {\r\n intent = 'info',\r\n variant = 'subtle',\r\n title,\r\n icon,\r\n showIcon = true,\r\n action,\r\n isDismissible,\r\n onDismiss,\r\n dismissLabel = 'Dismiss alert',\r\n className,\r\n style,\r\n testId,\r\n children,\r\n ...props\r\n },\r\n ref\r\n) {\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"alert\"\r\n className={cx(\r\n 'brycks-alert',\r\n `brycks-alert--${intent}`,\r\n `brycks-alert--${variant}`,\r\n className\r\n )}\r\n style={style}\r\n data-testid={testId}\r\n {...props}\r\n >\r\n {showIcon && (\r\n <span className=\"brycks-alert__icon\">\r\n {icon ?? defaultIcons[intent]}\r\n </span>\r\n )}\r\n\r\n <div className=\"brycks-alert__content\">\r\n {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n </div>\r\n\r\n {(action \|\| isDismissible) && (\r\n <div className=\"brycks-alert__actions\">\r\n {action}\r\n {isDismissible && (\r\n <button\r\n type=\"button\"\r\n className=\"brycks-alert__dismiss\"\r\n onClick={onDismiss}\r\n aria-label={dismissLabel}\r\n >\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","dismissLabel","className","style","testId","children","props","ref","cx"],"mappings":"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"}

package/dist/components/feedback/Drawer/Drawer.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),X=require("react-dom"),Y=require("../../../utils/styles.cjs"),K={sm:"320px",md:"400px",lg:"560px",xl:"720px",full:"100%"};function W(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:r.jsx("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const x=t.forwardRef(function({isOpen:s,onClose:n,placement:o="right",size:u="md",title:c,closeOnOverlayClick:f=!0,closeOnEscape:y=!0,showCloseButton:b=!0,showOverlay:p=!0,className:j,style:S,children:E,testId:D,...R},l){const i=t.useRef(null),m=t.useRef(null),k=t.useRef(n);t.useEffect(()=>{k.current=n},[n]),t.useEffect(()=>{if(!s)return;m.current=document.activeElement;const e=i.current;e&&e.focus()},[s]),t.useEffect(()=>{if(!s)return;const e=i.current,v=a=>{if(a.key==="Escape"&&y){k.current();return}if(a.key==="Tab"&&e){const d=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),h=d[0],g=d[d.length-1];a.shiftKey&&document.activeElement===h?(a.preventDefault(),g?.focus()):!a.shiftKey&&document.activeElement===g&&(a.preventDefault(),h?.focus())}};return document.addEventListener("keydown",v),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",v),document.body.style.overflow="",m.current?.focus()}},[s,y]);const C=t.useCallback(e=>{e.target===e.currentTarget&&f&&n()},[f,n]);if(!s)return null;const T=o==="left"||o==="right",w=K[u],z={position:"fixed",inset:0,zIndex:"var(--brycks-z-drawer)",display:"flex",backgroundColor:p?"var(--brycks-background-overlay)":"transparent",animation:"brycks-drawer-overlay-in 200ms ease-out"},M={...(()=>{const e={position:"absolute",backgroundColor:"var(--brycks-background-elevated)",boxShadow:"var(--brycks-shadow-2xl)",display:"flex",flexDirection:"column",overflow:"hidden"};return T?{...e,top:0,bottom:0,[o]:0,width:w,maxWidth:"100vw"}:{...e,left:0,right:0,[o]:0,height:w,maxHeight:"100vh"}})(),animation:`brycks-drawer-${o}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,outline:"none",...S},N={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid var(--brycks-border-muted)",flexShrink:0},q={fontSize:18,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0},I={display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"var(--brycks-radius-md)",color:"var(--brycks-foreground-muted)",transition:"all 150ms ease-out"},L={flex:1,overflow:"auto",padding:20},P=r.jsxs(r.Fragment,{children:[r.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),K=require("react-dom"),W=require("../../../utils/styles.cjs"),$=require("../../../hooks/useId.cjs"),A={sm:"320px",md:"400px",lg:"560px",xl:"720px",full:"100%"};function B(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}const p=t.forwardRef(function({isOpen:s,onClose:n,placement:o="right",size:u="md",title:c,closeOnOverlayClick:f=!0,closeOnEscape:y=!0,showCloseButton:b=!0,closeLabel:j="Close drawer",showOverlay:S=!0,className:E,style:D,children:R,testId:C,...I},l){const d=t.useRef(null),m=$.useId("drawer-title"),k=t.useRef(null),v=t.useRef(n);t.useEffect(()=>{v.current=n},[n]),t.useEffect(()=>{if(!s)return;k.current=document.activeElement;const e=d.current;e&&e.focus()},[s]),t.useEffect(()=>{if(!s)return;const e=d.current,h=a=>{if(a.key==="Escape"&&y){v.current();return}if(a.key==="Tab"&&e){const i=e.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([tabindex="-1"])'),g=i[0],x=i[i.length-1];a.shiftKey&&document.activeElement===g?(a.preventDefault(),x?.focus()):!a.shiftKey&&document.activeElement===x&&(a.preventDefault(),g?.focus())}};return document.addEventListener("keydown",h),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",h),document.body.style.overflow="",k.current?.focus()}},[s,y]);const T=t.useCallback(e=>{e.target===e.currentTarget&&f&&n()},[f,n]);if(!s)return null;const q=o==="left"||o==="right",w=A[u],z={position:"fixed",inset:0,zIndex:"var(--brycks-z-drawer)",display:"flex",backgroundColor:S?"var(--brycks-background-overlay)":"transparent",animation:"brycks-drawer-overlay-in 200ms ease-out"},M={...(()=>{const e={position:"absolute",backgroundColor:"var(--brycks-background-elevated)",boxShadow:"var(--brycks-shadow-2xl)",display:"flex",flexDirection:"column",overflow:"hidden"};return q?{...e,top:0,bottom:0,[o]:0,width:w,maxWidth:"100vw"}:{...e,left:0,right:0,[o]:0,height:w,maxHeight:"100vh"}})(),animation:`brycks-drawer-${o}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,outline:"none",...D},N={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px 20px",borderBottom:"1px solid var(--brycks-border-muted)",flexShrink:0},L={fontSize:18,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0},P={display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:"var(--brycks-radius-md)",color:"var(--brycks-foreground-muted)",transition:"all 150ms ease-out"},X={flex:1,overflow:"auto",padding:20},Y=r.jsxs(r.Fragment,{children:[r.jsx("style",{children:`
           @keyframes brycks-drawer-overlay-in {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -19,5 +19,5 @@
             from { transform: translateY(100%); }
             to { transform: translateY(0); }
           }
-        `}),r.jsx("div",{className:"brycks-drawer-overlay",style:z,onClick:C,"aria-hidden":"true",children:r.jsxs("div",{ref:e=>{i.current=e,typeof l=="function"?l(e):l&&(l.current=e)},role:"dialog","aria-modal":"true","aria-labelledby":c?"brycks-drawer-title":void 0,className:Y.cx("brycks-drawer",`brycks-drawer--${o}`,`brycks-drawer--${u}`,j),style:M,tabIndex:-1,"data-testid":D,...R,children:[(c||b)&&r.jsxs("div",{className:"brycks-drawer-header",style:N,children:[c&&r.jsx("h2",{id:"brycks-drawer-title",style:q,children:c}),b&&r.jsx("button",{type:"button",className:"brycks-drawer-close",style:I,onClick:n,"aria-label":"Close drawer",onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(W,{})})]}),r.jsx("div",{className:"brycks-drawer-content",style:L,children:E})]})})]});return X.createPortal(P,document.body)});x.displayName="Drawer";exports.Drawer=x;
+        `}),r.jsx("div",{className:"brycks-drawer-overlay",style:z,onClick:T,children:r.jsxs("div",{ref:e=>{d.current=e,typeof l=="function"?l(e):l&&(l.current=e)},role:"dialog","aria-modal":"true","aria-labelledby":c?m:void 0,className:W.cx("brycks-drawer",`brycks-drawer--${o}`,`brycks-drawer--${u}`,E),style:M,tabIndex:-1,"data-testid":C,...I,children:[(c||b)&&r.jsxs("div",{className:"brycks-drawer-header",style:N,children:[c&&r.jsx("h2",{id:m,style:L,children:c}),b&&r.jsx("button",{type:"button",className:"brycks-drawer-close",style:P,onClick:n,"aria-label":j,onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(B,{})})]}),r.jsx("div",{className:"brycks-drawer-content",style:X,children:R})]})})]});return K.createPortal(Y,document.body)});p.displayName="Drawer";exports.Drawer=p;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/feedback/Drawer/Drawer.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["/*\n Drawer Component\n \n A slide-out panel that can appear from any edge of the screen.\n * Supports focus trapping and keyboard navigation.\n /\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useCallback,\n type CSSProperties,\n type ReactNode,\n type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\n\nexport type DrawerPlacement = 'left' \| 'right' \| 'top' \| 'bottom'\nexport type DrawerSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /* Whether the drawer is open /\n isOpen: boolean\n /* Callback when drawer should close /\n onClose: () => void\n /* Drawer placement /\n placement?: DrawerPlacement\n /* Drawer size /\n size?: DrawerSize\n /* Drawer title /\n title?: ReactNode\n /* Whether to close on overlay click /\n closeOnOverlayClick?: boolean\n /* Whether to close on escape key /\n closeOnEscape?: boolean\n /* Whether to show close button /\n showCloseButton?: boolean\n /* Whether to show overlay /\n showOverlay?: boolean\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeMap: Record<DrawerSize, string> = {\n sm: '320px',\n md: '400px',\n lg: '560px',\n xl: '720px',\n full: '100%',\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n {\n isOpen,\n onClose,\n placement = 'right',\n size = 'md',\n title,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n showCloseButton = true,\n showOverlay = true,\n className,\n style,\n children,\n testId,\n ...props\n },\n ref\n) {\n const drawerRef = useRef<HTMLDivElement>(null)\n const previousActiveElement = useRef<HTMLElement \| null>(null)\n\n // Store onClose in a ref to avoid re-running effects when it changes\n const onCloseRef = useRef(onClose)\n useEffect(() => {\n onCloseRef.current = onClose\n }, [onClose])\n\n // Focus drawer when it opens (only once)\n useEffect(() => {\n if (!isOpen) return\n\n previousActiveElement.current = document.activeElement as HTMLElement\n const drawer = drawerRef.current\n if (drawer) {\n drawer.focus()\n }\n }, [isOpen])\n\n // Keyboard handling and body scroll lock\n useEffect(() => {\n if (!isOpen) return\n\n const drawer = drawerRef.current\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && closeOnEscape) {\n onCloseRef.current()\n return\n }\n\n if (e.key === 'Tab' && drawer) {\n const focusableElements = drawer.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n )\n const firstElement = focusableElements[0]\n const lastElement = focusableElements[focusableElements.length - 1]\n\n if (e.shiftKey && document.activeElement === firstElement) {\n e.preventDefault()\n lastElement?.focus()\n } else if (!e.shiftKey && document.activeElement === lastElement) {\n e.preventDefault()\n firstElement?.focus()\n }\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n document.body.style.overflow = 'hidden'\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.body.style.overflow = ''\n previousActiveElement.current?.focus()\n }\n }, [isOpen, closeOnEscape])\n\n const handleOverlayClick = useCallback(\n (e: React.MouseEvent) => {\n if (e.target === e.currentTarget && closeOnOverlayClick) {\n onClose()\n }\n },\n [closeOnOverlayClick, onClose]\n )\n\n if (!isOpen) return null\n\n const isHorizontal = placement === 'left' \|\| placement === 'right'\n const drawerSize = sizeMap[size]\n\n const overlayStyle: CSSProperties = {\n position: 'fixed',\n inset: 0,\n zIndex: 'var(--brycks-z-drawer)' as unknown as number,\n display: 'flex',\n backgroundColor: showOverlay ? 'var(--brycks-background-overlay)' : 'transparent',\n animation: 'brycks-drawer-overlay-in 200ms ease-out',\n }\n\n const getPositionStyles = (): CSSProperties => {\n const base: CSSProperties = {\n position: 'absolute',\n backgroundColor: 'var(--brycks-background-elevated)',\n boxShadow: 'var(--brycks-shadow-2xl)',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n }\n\n if (isHorizontal) {\n return {\n ...base,\n top: 0,\n bottom: 0,\n [placement]: 0,\n width: drawerSize,\n maxWidth: '100vw',\n }\n }\n\n return {\n ...base,\n left: 0,\n right: 0,\n [placement]: 0,\n height: drawerSize,\n maxHeight: '100vh',\n }\n }\n\n const drawerStyle: CSSProperties = {\n ...getPositionStyles(),\n animation: `brycks-drawer-${placement}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,\n outline: 'none',\n ...style,\n }\n\n const headerStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '16px 20px',\n borderBottom: '1px solid var(--brycks-border-muted)',\n flexShrink: 0,\n }\n\n const titleStyle: CSSProperties = {\n fontSize: 18,\n fontWeight: 600,\n color: 'var(--brycks-foreground-default)',\n margin: 0,\n }\n\n const closeButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 32,\n height: 32,\n borderRadius: 'var(--brycks-radius-md)',\n color: 'var(--brycks-foreground-muted)',\n transition: 'all 150ms ease-out',\n }\n\n const contentStyle: CSSProperties = {\n flex: 1,\n overflow: 'auto',\n padding: 20,\n }\n\n const drawerContent = (\n <>\n <style>\n {`\n @keyframes brycks-drawer-overlay-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes brycks-drawer-left-in {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n }\n @keyframes brycks-drawer-right-in {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n }\n @keyframes brycks-drawer-top-in {\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n }\n @keyframes brycks-drawer-bottom-in {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n }\n `}\n </style>\n <div\n className=\"brycks-drawer-overlay\"\n style={overlayStyle}\n onClick={handleOverlayClick}\n aria-hidden=\"true\"\n >\n <div\n ref={(node) => {\n (drawerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? 'brycks-drawer-title' : undefined}\n className={cx('brycks-drawer', `brycks-drawer--${placement}`, `brycks-drawer--${size}`, className)}\n style={drawerStyle}\n tabIndex={-1}\n data-testid={testId}\n {...props}\n >\n {(title \|\| showCloseButton) && (\n <div className=\"brycks-drawer-header\" style={headerStyle}>\n {title && <h2 id=\"brycks-drawer-title\" style={titleStyle}>{title}</h2>}\n {showCloseButton && (\n <button\n type=\"button\"\n className=\"brycks-drawer-close\"\n style={closeButtonStyle}\n onClick={onClose}\n aria-label=\"Close drawer\"\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n </div>\n )}\n <div className=\"brycks-drawer-content\" style={contentStyle}>\n {children}\n </div>\n </div>\n </div>\n </>\n )\n\n return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["sizeMap","CloseIcon","jsx","Drawer","forwardRef","isOpen","onClose","placement","size","title","closeOnOverlayClick","closeOnEscape","showCloseButton","showOverlay","className","style","children","testId","props","ref","drawerRef","useRef","previousActiveElement","onCloseRef","useEffect","drawer","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","isHorizontal","drawerSize","overlayStyle","drawerStyle","base","headerStyle","titleStyle","closeButtonStyle","contentStyle","drawerContent","jsxs","Fragment","node","cx","createPortal"],"mappings":"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"}
1	+ {"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"sourcesContent":["/*\n Drawer Component\n \n A slide-out panel that can appear from any edge of the screen.\n * Supports focus trapping and keyboard navigation.\n /\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useCallback,\n type CSSProperties,\n type ReactNode,\n type HTMLAttributes,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\nimport { useId } from '../../../hooks/useId'\n\nexport type DrawerPlacement = 'left' \| 'right' \| 'top' \| 'bottom'\nexport type DrawerSize = 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /* Whether the drawer is open /\n isOpen: boolean\n /* Callback when drawer should close /\n onClose: () => void\n /* Drawer placement /\n placement?: DrawerPlacement\n /* Drawer size /\n size?: DrawerSize\n /* Drawer title /\n title?: ReactNode\n /* Whether to close on overlay click /\n closeOnOverlayClick?: boolean\n /* Whether to close on escape key /\n closeOnEscape?: boolean\n /* Whether to show close button /\n showCloseButton?: boolean\n /* Accessible label of the close button /\n closeLabel?: string\n /* Whether to show overlay /\n showOverlay?: boolean\n /* Custom class name /\n className?: string\n /* Test ID */\n testId?: string\n}\n\nconst sizeMap: Record<DrawerSize, string> = {\n sm: '320px',\n md: '400px',\n lg: '560px',\n xl: '720px',\n full: '100%',\n}\n\nfunction CloseIcon() {\n return (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n )\n}\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n {\n isOpen,\n onClose,\n placement = 'right',\n size = 'md',\n title,\n closeOnOverlayClick = true,\n closeOnEscape = true,\n showCloseButton = true,\n closeLabel = 'Close drawer',\n showOverlay = true,\n className,\n style,\n children,\n testId,\n ...props\n },\n ref\n) {\n const drawerRef = useRef<HTMLDivElement>(null)\n const titleId = useId('drawer-title')\n const previousActiveElement = useRef<HTMLElement \| null>(null)\n\n // Store onClose in a ref to avoid re-running effects when it changes\n const onCloseRef = useRef(onClose)\n useEffect(() => {\n onCloseRef.current = onClose\n }, [onClose])\n\n // Focus drawer when it opens (only once)\n useEffect(() => {\n if (!isOpen) return\n\n previousActiveElement.current = document.activeElement as HTMLElement\n const drawer = drawerRef.current\n if (drawer) {\n drawer.focus()\n }\n }, [isOpen])\n\n // Keyboard handling and body scroll lock\n useEffect(() => {\n if (!isOpen) return\n\n const drawer = drawerRef.current\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && closeOnEscape) {\n onCloseRef.current()\n return\n }\n\n if (e.key === 'Tab' && drawer) {\n const focusableElements = drawer.querySelectorAll<HTMLElement>(\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])'\n )\n const firstElement = focusableElements[0]\n const lastElement = focusableElements[focusableElements.length - 1]\n\n if (e.shiftKey && document.activeElement === firstElement) {\n e.preventDefault()\n lastElement?.focus()\n } else if (!e.shiftKey && document.activeElement === lastElement) {\n e.preventDefault()\n firstElement?.focus()\n }\n }\n }\n\n document.addEventListener('keydown', handleKeyDown)\n document.body.style.overflow = 'hidden'\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.body.style.overflow = ''\n previousActiveElement.current?.focus()\n }\n }, [isOpen, closeOnEscape])\n\n const handleOverlayClick = useCallback(\n (e: React.MouseEvent) => {\n if (e.target === e.currentTarget && closeOnOverlayClick) {\n onClose()\n }\n },\n [closeOnOverlayClick, onClose]\n )\n\n if (!isOpen) return null\n\n const isHorizontal = placement === 'left' \|\| placement === 'right'\n const drawerSize = sizeMap[size]\n\n const overlayStyle: CSSProperties = {\n position: 'fixed',\n inset: 0,\n zIndex: 'var(--brycks-z-drawer)' as unknown as number,\n display: 'flex',\n backgroundColor: showOverlay ? 'var(--brycks-background-overlay)' : 'transparent',\n animation: 'brycks-drawer-overlay-in 200ms ease-out',\n }\n\n const getPositionStyles = (): CSSProperties => {\n const base: CSSProperties = {\n position: 'absolute',\n backgroundColor: 'var(--brycks-background-elevated)',\n boxShadow: 'var(--brycks-shadow-2xl)',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n }\n\n if (isHorizontal) {\n return {\n ...base,\n top: 0,\n bottom: 0,\n [placement]: 0,\n width: drawerSize,\n maxWidth: '100vw',\n }\n }\n\n return {\n ...base,\n left: 0,\n right: 0,\n [placement]: 0,\n height: drawerSize,\n maxHeight: '100vh',\n }\n }\n\n const drawerStyle: CSSProperties = {\n ...getPositionStyles(),\n animation: `brycks-drawer-${placement}-in 250ms cubic-bezier(0.32, 0.72, 0, 1)`,\n outline: 'none',\n ...style,\n }\n\n const headerStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '16px 20px',\n borderBottom: '1px solid var(--brycks-border-muted)',\n flexShrink: 0,\n }\n\n const titleStyle: CSSProperties = {\n fontSize: 18,\n fontWeight: 600,\n color: 'var(--brycks-foreground-default)',\n margin: 0,\n }\n\n const closeButtonStyle: CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 32,\n height: 32,\n borderRadius: 'var(--brycks-radius-md)',\n color: 'var(--brycks-foreground-muted)',\n transition: 'all 150ms ease-out',\n }\n\n const contentStyle: CSSProperties = {\n flex: 1,\n overflow: 'auto',\n padding: 20,\n }\n\n const drawerContent = (\n <>\n <style>\n {`\n @keyframes brycks-drawer-overlay-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes brycks-drawer-left-in {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n }\n @keyframes brycks-drawer-right-in {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n }\n @keyframes brycks-drawer-top-in {\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n }\n @keyframes brycks-drawer-bottom-in {\n from { transform: translateY(100%); }\n to { transform: translateY(0); }\n }\n `}\n </style>\n <div\n className=\"brycks-drawer-overlay\"\n style={overlayStyle}\n onClick={handleOverlayClick}\n >\n <div\n ref={(node) => {\n (drawerRef as React.MutableRefObject<HTMLDivElement \| null>).current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) ref.current = node\n }}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={cx('brycks-drawer', `brycks-drawer--${placement}`, `brycks-drawer--${size}`, className)}\n style={drawerStyle}\n tabIndex={-1}\n data-testid={testId}\n {...props}\n >\n {(title \|\| showCloseButton) && (\n <div className=\"brycks-drawer-header\" style={headerStyle}>\n {title && <h2 id={titleId} style={titleStyle}>{title}</h2>}\n {showCloseButton && (\n <button\n type=\"button\"\n className=\"brycks-drawer-close\"\n style={closeButtonStyle}\n onClick={onClose}\n aria-label={closeLabel}\n onMouseEnter={(e) => {\n e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n e.currentTarget.style.color = 'var(--brycks-foreground-default)'\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.backgroundColor = 'transparent'\n e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\n }}\n >\n <CloseIcon />\n </button>\n )}\n </div>\n )}\n <div className=\"brycks-drawer-content\" style={contentStyle}>\n {children}\n </div>\n </div>\n </div>\n </>\n )\n\n return createPortal(drawerContent, document.body)\n})\n\nDrawer.displayName = 'Drawer'\n"],"names":["sizeMap","CloseIcon","jsx","Drawer","forwardRef","isOpen","onClose","placement","size","title","closeOnOverlayClick","closeOnEscape","showCloseButton","closeLabel","showOverlay","className","style","children","testId","props","ref","drawerRef","useRef","titleId","useId","previousActiveElement","onCloseRef","useEffect","drawer","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","isHorizontal","drawerSize","overlayStyle","drawerStyle","base","headerStyle","titleStyle","closeButtonStyle","contentStyle","drawerContent","jsxs","Fragment","node","cx","createPortal"],"mappings":"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"}