@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/CodeBlock/CodeBlock.js

@@ -4,26 +4,28 @@
 
 /**
  * @file CodeBlock.tsx
- * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API, SyntaxTheme provider
  * @output Exports CodeBlock component and CodeBlockProps
  * @position Core implementation; read-only syntax-highlighted code display
  */
-import { useInsertionEffect, useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { useInsertionEffect, useEffect, useId, useRef, useState, useCallback, useMemo } from 'react';
 import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { Icon } from "../Icon/index.js";
 import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
 import { ensureHighlightStyles } from "./highlightStyles.js";
 import { applyHighlightRangesChunked } from "./highlightRanges.js";
 import { themeProps } from "../utils/themeProps.js";
+import { SyntaxTheme } from "../theme/syntax/index.js";
 
 // ---------------------------------------------------------------------------
 // Styles
 // ---------------------------------------------------------------------------
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const containerStyles = {
   card: {
     kaIpWk: "xh6dtrn",
@@ -131,10 +133,10 @@ const CodeChunk = /*#__PURE__*/React.memo(function CodeChunk({
   highlightSet,
   renderLineContent
 }) {
-  return /*#__PURE__*/_jsx(_Fragment, {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
     children: lines.map((line, j) => {
       const i = startIndex + j;
-      return /*#__PURE__*/_jsx("div", {
+      return /*#__PURE__*/_jsxDEV("div", {
         "data-line": i + 1,
         ...{
           0: {
@@ -145,26 +147,26 @@ const CodeChunk = /*#__PURE__*/React.memo(function CodeChunk({
           }
         }[!!(highlightSet?.has(i + 1) ?? false) << 0],
         children: renderLineContent(line, i)
-      }, i);
+      }, i, false);
     })
-  });
+  }, void 0, false);
 });
 function renderLines(lines, highlightSet, renderLineContent, chunkSize = LINE_CHUNK_SIZE) {
   chunkSize = Math.max(1, Math.floor(chunkSize));
   if (lines.length < LINE_CHUNK_THRESHOLD) {
-    return /*#__PURE__*/_jsx(CodeChunk, {
+    return /*#__PURE__*/_jsxDEV(CodeChunk, {
       lines: lines,
       startIndex: 0,
       highlightSet: highlightSet,
       renderLineContent: renderLineContent
-    });
+    }, void 0, false);
   }
   const chunks = [];
   for (let start = 0; start < lines.length; start += chunkSize) {
     const end = Math.min(start + chunkSize, lines.length);
     const chunkLines = lines.slice(start, end);
     const estimatedHeight = `${chunkLines.length}lh`;
-    chunks.push(/*#__PURE__*/_jsx("div", {
+    chunks.push(/*#__PURE__*/_jsxDEV("div", {
       ...mergeProps({
         className: "xb5mbof"
       }, {
@@ -172,13 +174,13 @@ function renderLines(lines, highlightSet, renderLineContent, chunkSize = LINE_CH
           containIntrinsicBlockSize: `auto ${estimatedHeight}`
         }
       }),
-      children: /*#__PURE__*/_jsx(CodeChunk, {
+      children: /*#__PURE__*/_jsxDEV(CodeChunk, {
         lines: chunkLines,
         startIndex: start,
         highlightSet: highlightSet,
         renderLineContent: renderLineContent
-      })
-    }, start));
+      }, void 0, false)
+    }, start, false));
   }
   return chunks;
 }
@@ -276,10 +278,10 @@ function buildSpanLine(lineText, tokens) {
       parts.push(lineText.slice(cursor, token.start));
     }
     const end = Math.min(token.end, lineText.length);
-    parts.push(/*#__PURE__*/_jsx("span", {
+    parts.push(/*#__PURE__*/_jsxDEV("span", {
       className: `astryx-token-${token.type} xds-token-${token.type}`,
       children: lineText.slice(token.start, end)
-    }, `${token.start}-${token.type}`));
+    }, `${token.start}-${token.type}`, false));
     cursor = end;
   }
   if (cursor < lineText.length) {
@@ -301,10 +303,10 @@ function SpanCodeContent({
     const tokens = tokenLines[lineIndex] ?? [];
     return buildSpanLine(line, tokens);
   }, [tokenLines]);
-  return /*#__PURE__*/_jsx("code", {
+  return /*#__PURE__*/_jsxDEV("code", {
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped),
     children: renderLines(lines, highlightSet, renderLineContent)
-  });
+  }, void 0, false);
 }
 
 // ---------------------------------------------------------------------------
@@ -331,11 +333,11 @@ function RangeCodeContent({
     return applyHighlightRangesChunked(codeEl, tokenLines);
   }, [tokenLines]);
   const renderLineContent = useCallback(line => line || '\u200b', []);
-  return /*#__PURE__*/_jsx("code", {
+  return /*#__PURE__*/_jsxDEV("code", {
     ref: codeRef,
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped),
     children: renderLines(lines, highlightSet, renderLineContent)
-  });
+  }, void 0, false);
 }
 
 // ---------------------------------------------------------------------------
@@ -369,6 +371,7 @@ export function CodeBlock({
   container = 'card',
   tokenizer: customTokenizer,
   highlightMode = 'auto',
+  syntaxTheme,
   xstyle,
   className,
   style,
@@ -376,6 +379,17 @@ export function CodeBlock({
   ...props
 }) {
   const [copied, setCopied] = useState(false);
+  const copyResetTimerRef = useRef(null);
+  const announce = useAnnounce();
+
+  // Clear a pending "copied" reset when the block unmounts.
+  useEffect(() => {
+    return () => {
+      if (copyResetTimerRef.current != null) {
+        clearTimeout(copyResetTimerRef.current);
+      }
+    };
+  }, []);
   const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
   const lines = useMemo(() => {
     const l = code.split('\n');
@@ -390,28 +404,44 @@ export function CodeBlock({
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
+      // Swapping the button's aria-label alone isn't reliably announced by
+      // screen readers, so confirm the copy via a polite live region.
+      announce('Copied');
       onCopy?.();
-      setTimeout(() => setCopied(false), 2000);
+      // Restart the reset timer on every copy — otherwise a rapid re-copy
+      // is reverted early by the previous click's timer.
+      if (copyResetTimerRef.current != null) {
+        clearTimeout(copyResetTimerRef.current);
+      }
+      copyResetTimerRef.current = setTimeout(() => {
+        copyResetTimerRef.current = null;
+        setCopied(false);
+      }, 2000);
     } catch {
       // Clipboard failures leave the copied state unchanged.
     }
-  }, [code, onCopy]);
+  }, [code, onCopy, announce]);
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
   const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
   const languageLabel = hasLanguageLabel && language !== 'plaintext' ? language : null;
   const showHeader = title != null || languageLabel != null;
   const canCollapse = isCollapsible && lines.length >= collapsibleThreshold;
   const [isCollapsed, setIsCollapsed] = useState(false);
+  // Links the collapsible header to the code region it shows/hides so assistive
+  // tech can move from the button to its controlled content (disclosure
+  // pattern). The region stays mounted when collapsed (CSS grid animation), so
+  // this is always a resolvable reference — aria-controls can be unconditional.
+  const regionId = useId();
   const scrollContainerRef = useRef(null);
   const scrollStyle = maxHeight ? {
     maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
   } : undefined;
-  const copyIcon = /*#__PURE__*/_jsx(Icon, {
+  const copyIcon = /*#__PURE__*/_jsxDEV(Icon, {
     icon: copied ? 'check' : 'copy',
     size: "sm",
     color: "inherit"
-  });
-  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx("button", {
+  }, void 0, false);
+  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsxDEV("button", {
     type: "button",
     onClick: e => {
       // Stop propagation so copying does not toggle the collapsible header.
@@ -428,8 +458,8 @@ export function CodeBlock({
       }
     }[!!!showHeader << 0],
     children: copyIcon
-  }) : null;
-  const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
+  }, void 0, false) : null;
+  const headerEl = showHeader ? /*#__PURE__*/_jsxDEV("div", {
     ...{
       0: {
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1"
@@ -438,10 +468,11 @@ export function CodeBlock({
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x92x3c3 x1q0q8m5 xw8gpjh"
       }
     }[!!hasLineNumbers << 0],
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       role: canCollapse ? 'button' : undefined,
       tabIndex: canCollapse ? 0 : undefined,
       "aria-expanded": canCollapse ? !isCollapsed : undefined,
+      "aria-controls": canCollapse ? regionId : undefined,
       onClick: canCollapse ? () => setIsCollapsed(prev => !prev) : undefined,
       onKeyDown: canCollapse ? e => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -454,14 +485,14 @@ export function CodeBlock({
           className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h"
         },
         1: {
-          className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o"
+          className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o x17nn4n9 x1wfwxd8 x7s97pk"
         }
       }[!!canCollapse << 0],
-      children: /*#__PURE__*/_jsxs("span", {
+      children: /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
         },
-        children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsx("span", {
+        children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsxDEV("span", {
           ...{
             0: {
               className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92"
@@ -470,16 +501,16 @@ export function CodeBlock({
               className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92 x19jd1h0"
             }
           }[!!isCollapsed << 0],
-          children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/_jsxDEV(Icon, {
             icon: "chevronDown",
             size: "xsm",
             color: "inherit"
-          })
-        })]
-      })
-    }), copyButtonEl]
-  }) : null;
-  const codeBody = /*#__PURE__*/_jsx("div", {
+          }, void 0, false)
+        }, void 0, false)]
+      }, void 0, true)
+    }, void 0, false), copyButtonEl]
+  }, void 0, true) : null;
+  const codeBody = /*#__PURE__*/_jsxDEV("div", {
     ref: scrollContainerRef
     // The scroll container is keyboard-focusable so keyboard users can
     // scroll long or wide code that overflows the viewport. Uses
@@ -494,7 +525,7 @@ export function CodeBlock({
     }, {
       style: scrollStyle
     }),
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...{
         0: {
           className: "x78zum5 x1pshirs"
@@ -503,34 +534,34 @@ export function CodeBlock({
           className: "x78zum5 x1pshirs x1ajqlyv"
         }
       }[!!(showHeader && !hasLineNumbers) << 0],
-      children: [hasLineNumbers && /*#__PURE__*/_jsx("div", {
+      children: [hasLineNumbers && /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(styles.gutter, gutterSizeStyle),
         "aria-hidden": "true",
         children: lines.map((_, i) =>
         /*#__PURE__*/
         // eslint-disable-next-line @eslint-react/no-array-index-key -- gutter line numbers are positional by definition
-        _jsx("div", {
+        _jsxDEV("div", {
           ...{
             className: "x9m5x89 x17iicif"
           },
           children: i + 1
-        }, i))
-      }), useSpans ? /*#__PURE__*/_jsx(SpanCodeContent, {
+        }, i, false))
+      }, void 0, false), useSpans ? /*#__PURE__*/_jsxDEV(SpanCodeContent, {
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle
-      }) : /*#__PURE__*/_jsx(RangeCodeContent, {
+      }, void 0, false) : /*#__PURE__*/_jsxDEV(RangeCodeContent, {
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle
-      })]
-    })
-  });
-  return /*#__PURE__*/_jsxs("pre", {
+      }, void 0, false)]
+    }, void 0, true)
+  }, void 0, false);
+  const block = /*#__PURE__*/_jsxDEV("pre", {
     ref: ref,
     ...mergeProps(themeProps('codeblock', {
       size,
@@ -538,7 +569,8 @@ export function CodeBlock({
       container
     }), stylex.props(styles.root, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
     ...props,
-    children: [headerEl, canCollapse ? /*#__PURE__*/_jsx("div", {
+    children: [headerEl, canCollapse ? /*#__PURE__*/_jsxDEV("div", {
+      id: regionId,
       ...{
         0: {
           className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"
@@ -547,13 +579,17 @@ export function CodeBlock({
           className: "xrvj5dj x1qn9uv2 x80gvsz xlr8y92 xihq33y"
         }
       }[!!isCollapsed << 0],
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "xb3r6kr x2lwn1j"
         },
         children: codeBody
-      })
-    }) : codeBody, !showHeader && copyButtonEl]
-  });
+      }, void 0, false)
+    }, void 0, false) : codeBody, !showHeader && copyButtonEl]
+  }, void 0, true);
+  return syntaxTheme ? /*#__PURE__*/_jsxDEV(SyntaxTheme, {
+    theme: syntaxTheme,
+    children: block
+  }, void 0, false) : block;
 }
 CodeBlock.displayName = 'CodeBlock';

package/dist/Collapsible/Collapsible.d.ts

@@ -1,14 +1,20 @@
 /**
  * @file Collapsible.tsx
- * @input Uses React, StyleX, useCollapsible hook, getIcon, theme tokens
+ * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
  * @output Exports Collapsible component and CollapsibleProps
  * @position Collapsible content primitive — trigger toggles visibility of children
  *
  * Collapsible is a standalone primitive that makes any content collapsible.
  * It renders a trigger area (always visible) and a content area that toggles.
- * Handles state management, accessibility (aria-expanded), and chevron indicator.
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
+ * the trigger to its content region), and chevron indicator.
  *
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
+ * When the surrounding CollapsibleGroup sets `hasDividers`, each Collapsible
+ * draws its own row chrome (borderBlockStart suppressed on :first-child, plus
+ * density padding) from CollapsibleGroupPresentationContext — StyleX has no
+ * child selectors, so the group cannot draw it from outside. The presentation
+ * context is reset around children so nested collapsibles stay chrome-free.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/index.ts (exports)
@@ -16,7 +22,7 @@
  * - /apps/storybook/stories/Collapsible.stories.tsx
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 export interface CollapsibleProps extends BaseProps {
     /** Ref forwarded to the root element */

package/dist/Collapsible/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsD5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA8ClB;yBA1De,WAAW"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/Collapsible.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkG5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,aAAa,EACb,MAAM,EAAE,gBAAgB,EACxB,YAAY,EACZ,KAAK,EACL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAqElB;yBAjFe,WAAW"}

package/dist/Collapsible/Collapsible.js

@@ -4,15 +4,21 @@
 
 /**
  * @file Collapsible.tsx
- * @input Uses React, StyleX, useCollapsible hook, getIcon, theme tokens
+ * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
  * @output Exports Collapsible component and CollapsibleProps
  * @position Collapsible content primitive — trigger toggles visibility of children
  *
  * Collapsible is a standalone primitive that makes any content collapsible.
  * It renders a trigger area (always visible) and a content area that toggles.
- * Handles state management, accessibility (aria-expanded), and chevron indicator.
+ * Handles state management, accessibility (aria-expanded + aria-controls linking
+ * the trigger to its content region), and chevron indicator.
  *
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
+ * When the surrounding CollapsibleGroup sets `hasDividers`, each Collapsible
+ * draws its own row chrome (borderBlockStart suppressed on :first-child, plus
+ * density padding) from CollapsibleGroupPresentationContext — StyleX has no
+ * child selectors, so the group cannot draw it from outside. The presentation
+ * context is reset around children so nested collapsibles stay chrome-free.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/index.ts (exports)
@@ -20,20 +26,93 @@
  * - /apps/storybook/stories/Collapsible.stories.tsx
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
+import { use, useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { borderVars, colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useCollapsible } from "./useCollapsible.js";
+import { CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
 import { getIcon } from "../Icon/globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   root: {
     kzqmXN: "xh8yej3",
     $$css: true
+  },
+  trigger: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kzqmXN: "xh8yej3",
+    kkrTdU: "x1ypdohk",
+    kMv6JI: "x9ynric",
+    kGuDYH: "x18juvz8",
+    k63SB2: "x2mo6ok",
+    kMwMTN: "x1tgivj0",
+    k9WMMc: "x1yc453h",
+    k8WAf4: "xt970qd",
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
+  },
+  contentHidden: {
+    k1xSpc: "x1s85apg",
+    $$css: true
+  },
+  content: {
+    kLKAdn: "xfsso4q",
+    $$css: true
+  },
+  divided: {
+    kEafiO: "x11xkdxz x1g31smg",
+    kPef9Z: "x13fuv20",
+    kLZC3w: "x1pc3f07",
+    $$css: true
+  }
+};
+
+// Density padding for divided/padded accordion rows. paddingBlock mapping
+// follows Table's density scale (spacing-1/2/3); content only pads its end
+// so text doesn't sit on the divider below (block-start stays spacing-1).
+const densityStyles = {
+  triggerCompact: {
+    k8WAf4: "xu0wf1k",
+    $$css: true
+  },
+  triggerBalanced: {
+    k8WAf4: "xce4md1",
+    $$css: true
+  },
+  triggerSpacious: {
+    k8WAf4: "x8o8v82",
+    $$css: true
+  },
+  contentCompact: {
+    kGO01o: "xy143xn",
+    $$css: true
+  },
+  contentBalanced: {
+    kGO01o: "x1wesfrj",
+    $$css: true
+  },
+  contentSpacious: {
+    kGO01o: "xvmdzux",
+    $$css: true
   }
 };
+const triggerDensity = {
+  compact: densityStyles.triggerCompact,
+  balanced: densityStyles.triggerBalanced,
+  spacious: densityStyles.triggerSpacious
+};
+const contentDensity = {
+  compact: densityStyles.contentCompact,
+  balanced: densityStyles.contentBalanced,
+  spacious: densityStyles.contentSpacious
+};
 /**
  * A primitive that makes any content collapsible.
  *
@@ -99,24 +178,32 @@ export function Collapsible({
     isCollapsible: collapsibleConfig,
     value
   });
+  const presentation = use(CollapsibleGroupPresentationContext);
+  const isDivided = presentation?.hasDividers ?? false;
+  const density = presentation?.density ?? null;
   const chevronIcon = getIcon('chevronDown');
-  return /*#__PURE__*/_jsxs("div", {
+
+  // Links the trigger to the region it shows/hides so assistive tech can move
+  // from the button to its controlled content (disclosure pattern).
+  const contentId = useId();
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
-    ...mergeProps(themeProps('collapsible'), stylex.props(styles.root, xstyle), className, style),
+    ...mergeProps(themeProps('collapsible', {
+      density: density ?? undefined
+    }), stylex.props(styles.root, isDivided && styles.divided, xstyle), className, style),
     ...props,
-    children: [/*#__PURE__*/_jsxs("button", {
+    children: [/*#__PURE__*/_jsxDEV("button", {
       type: "button",
       onClick: toggle,
       "aria-expanded": isOpen,
-      ...{
-        className: "x9f619 x78zum5 x6s0dn4 x1qughib xh8yej3 x1ypdohk x9ynric x18juvz8 x2mo6ok x1tgivj0 x1yc453h xt970qd"
-      },
-      children: [/*#__PURE__*/_jsx("span", {
+      "aria-controls": contentId,
+      ...stylex.props(styles.trigger, density != null && triggerDensity[density]),
+      children: [/*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x1b2iylo xwgcxoh"
         },
         children: trigger
-      }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...{
           0: {
             className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x11xpdln xuedmi6 xlr8y92 xv9yike x7p49u4"
@@ -126,15 +213,15 @@ export function Collapsible({
           }
         }[!!isOpen << 0],
         children: chevronIcon
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      ...(isOpen ? {
-        className: "xfsso4q"
-      } : {
-        className: "xfsso4q x1s85apg"
-      }),
-      children: children
-    })]
-  });
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
+      id: contentId,
+      ...stylex.props(styles.content, density != null && contentDensity[density], !isOpen && styles.contentHidden),
+      children: presentation != null ? /*#__PURE__*/_jsxDEV(CollapsibleGroupPresentationContext, {
+        value: null,
+        children: children
+      }, void 0, false) : children
+    }, void 0, false)]
+  }, void 0, true);
 }
 Collapsible.displayName = 'Collapsible';

package/dist/Collapsible/CollapsibleGroup.d.ts

@@ -1,12 +1,16 @@
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext
+ * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper DOM
+ * @position Core collapsible group coordination provider — renders no wrapper
+ *   DOM unless `hasDividers` is set
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. It renders only `{children}` — no wrapper
- * DOM element.
+ * coordinated open/close behavior. By default it renders only `{children}` —
+ * no wrapper DOM element. When `hasDividers` is set it renders a wrapper div
+ * that anchors reliable :first-child divider suppression and provides
+ * hasDividers/density to items via CollapsibleGroupPresentationContext — each
+ * Collapsible draws its own borders since StyleX has no child selectors.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -19,6 +23,7 @@
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
+import type { CollapsibleGroupDensity } from './CollapsibleGroupContext';
 import type { BaseProps } from '../BaseProps';
 export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     ref?: React.Ref<HTMLElement>;
@@ -41,6 +46,21 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
      * Callback when the open item(s) change.
      */
     onChange?: (value: string | string[]) => void;
+    /**
+     * Whether to draw hairline dividers between the group's items — the
+     * accordion row chrome. When set, the group renders a wrapper div (it
+     * otherwise renders no DOM) and items get 'balanced' density unless
+     * `density` says otherwise. Pair with bare Collapsible children; Card-wrapped
+     * items provide their own separation.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * Row density controlling trigger and content block padding on the group's
+     * items. Defaults to 'balanced' when dividers are shown; otherwise items
+     * keep their default unpadded look.
+     */
+    density?: CollapsibleGroupDensity;
     /**
      * Children — any components that support isCollapsible + value.
      *
@@ -69,16 +89,26 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
 }
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM.
+ * Renders no wrapper DOM unless `hasDividers` is set.
  *
  * In "single" mode (default), opening one item closes the others.
  * In "multiple" mode, items toggle independently.
  *
  * @compositionHint Wrap Collapsible instances to coordinate their open/close state.
- * Each Collapsible needs a `value` prop to participate.
+ * Each Collapsible needs a `value` prop to participate. For FAQ-style lists,
+ * use `hasDividers` with bare Collapsible children instead of wrapping each
+ * item in Card.
  *
  * @example
  * ```
+ * <CollapsibleGroup type="single" hasDividers defaultValue="faq1">
+ *   <Collapsible trigger="What is Astryx?" value="faq1">
+ *     Astryx is a design system for building internal tools.
+ *   </Collapsible>
+ *   <Collapsible trigger="How do I start?" value="faq2">
+ *     Install the package and import components.
+ *   </Collapsible>
+ * </CollapsibleGroup>
  * <CollapsibleGroup type="single" defaultValue="faq1">
  *   <VStack gap={2}>
  *     <Card>
@@ -95,7 +125,7 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
  * </CollapsibleGroup>
  * ```
  */
-export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, children, }: CollapsibleGroupProps): React.JSX.Element;
+export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, hasDividers, density, children, ref, xstyle, className, style, ...props }: CollapsibleGroupProps): React.JSX.Element;
 export declare namespace CollapsibleGroup {
     var displayName: string;
 }