@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/dist/CodeBlock/CodeBlock.js

@@ -4,28 +4,26 @@
 
 /**
  * @file CodeBlock.tsx
- * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API, SyntaxTheme provider
+ * @input Uses React, StyleX, theme tokens, CSS Custom Highlight API
  * @output Exports CodeBlock component and CodeBlockProps
  * @position Core implementation; read-only syntax-highlighted code display
  */
-import { useInsertionEffect, useEffect, useId, useRef, useState, useCallback, useMemo } from 'react';
+import { useInsertionEffect, useEffect, 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 { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const containerStyles = {
   card: {
     kaIpWk: "xh6dtrn",
@@ -133,10 +131,10 @@ const CodeChunk = /*#__PURE__*/React.memo(function CodeChunk({
   highlightSet,
   renderLineContent
 }) {
-  return /*#__PURE__*/_jsxDEV(_Fragment, {
+  return /*#__PURE__*/_jsx(_Fragment, {
     children: lines.map((line, j) => {
       const i = startIndex + j;
-      return /*#__PURE__*/_jsxDEV("div", {
+      return /*#__PURE__*/_jsx("div", {
         "data-line": i + 1,
         ...{
           0: {
@@ -147,26 +145,26 @@ const CodeChunk = /*#__PURE__*/React.memo(function CodeChunk({
           }
         }[!!(highlightSet?.has(i + 1) ?? false) << 0],
         children: renderLineContent(line, i)
-      }, i, false);
+      }, i);
     })
-  }, 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__*/_jsxDEV(CodeChunk, {
+    return /*#__PURE__*/_jsx(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__*/_jsxDEV("div", {
+    chunks.push(/*#__PURE__*/_jsx("div", {
       ...mergeProps({
         className: "xb5mbof"
       }, {
@@ -174,13 +172,13 @@ function renderLines(lines, highlightSet, renderLineContent, chunkSize = LINE_CH
           containIntrinsicBlockSize: `auto ${estimatedHeight}`
         }
       }),
-      children: /*#__PURE__*/_jsxDEV(CodeChunk, {
+      children: /*#__PURE__*/_jsx(CodeChunk, {
         lines: chunkLines,
         startIndex: start,
         highlightSet: highlightSet,
         renderLineContent: renderLineContent
-      }, void 0, false)
-    }, start, false));
+      })
+    }, start));
   }
   return chunks;
 }
@@ -278,10 +276,10 @@ function buildSpanLine(lineText, tokens) {
       parts.push(lineText.slice(cursor, token.start));
     }
     const end = Math.min(token.end, lineText.length);
-    parts.push(/*#__PURE__*/_jsxDEV("span", {
+    parts.push(/*#__PURE__*/_jsx("span", {
       className: `astryx-token-${token.type} xds-token-${token.type}`,
       children: lineText.slice(token.start, end)
-    }, `${token.start}-${token.type}`, false));
+    }, `${token.start}-${token.type}`));
     cursor = end;
   }
   if (cursor < lineText.length) {
@@ -303,10 +301,10 @@ function SpanCodeContent({
     const tokens = tokenLines[lineIndex] ?? [];
     return buildSpanLine(line, tokens);
   }, [tokenLines]);
-  return /*#__PURE__*/_jsxDEV("code", {
+  return /*#__PURE__*/_jsx("code", {
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped),
     children: renderLines(lines, highlightSet, renderLineContent)
-  }, void 0, false);
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -333,11 +331,11 @@ function RangeCodeContent({
     return applyHighlightRangesChunked(codeEl, tokenLines);
   }, [tokenLines]);
   const renderLineContent = useCallback(line => line || '\u200b', []);
-  return /*#__PURE__*/_jsxDEV("code", {
+  return /*#__PURE__*/_jsx("code", {
     ref: codeRef,
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped),
     children: renderLines(lines, highlightSet, renderLineContent)
-  }, void 0, false);
+  });
 }
 
 // ---------------------------------------------------------------------------
@@ -371,7 +369,6 @@ export function CodeBlock({
   container = 'card',
   tokenizer: customTokenizer,
   highlightMode = 'auto',
-  syntaxTheme,
   xstyle,
   className,
   style,
@@ -379,17 +376,6 @@ 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');
@@ -404,44 +390,28 @@ 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?.();
-      // 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);
+      setTimeout(() => setCopied(false), 2000);
     } catch {
       // Clipboard failures leave the copied state unchanged.
     }
-  }, [code, onCopy, announce]);
+  }, [code, onCopy]);
   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__*/_jsxDEV(Icon, {
+  const copyIcon = /*#__PURE__*/_jsx(Icon, {
     icon: copied ? 'check' : 'copy',
     size: "sm",
     color: "inherit"
-  }, void 0, false);
-  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsxDEV("button", {
+  });
+  const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx("button", {
     type: "button",
     onClick: e => {
       // Stop propagation so copying does not toggle the collapsible header.
@@ -458,8 +428,8 @@ export function CodeBlock({
       }
     }[!!!showHeader << 0],
     children: copyIcon
-  }, void 0, false) : null;
-  const headerEl = showHeader ? /*#__PURE__*/_jsxDEV("div", {
+  }) : null;
+  const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
     ...{
       0: {
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1"
@@ -468,11 +438,10 @@ export function CodeBlock({
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1 x92x3c3 x1q0q8m5 xw8gpjh"
       }
     }[!!hasLineNumbers << 0],
-    children: [/*#__PURE__*/_jsxDEV("div", {
+    children: [/*#__PURE__*/_jsx("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 === ' ') {
@@ -485,14 +454,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 x17nn4n9 x1wfwxd8 x7s97pk"
+          className: "x78zum5 x6s0dn4 x98rzlu xeuugli x1717udv xjbqb8w x1heor9g xln7xf2 x1yc453h x1ypdohk x87ps6o"
         }
       }[!!canCollapse << 0],
-      children: /*#__PURE__*/_jsxDEV("span", {
+      children: /*#__PURE__*/_jsxs("span", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
         },
-        children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsxDEV("span", {
+        children: [title, title && languageLabel ? ' — ' : '', languageLabel, canCollapse && /*#__PURE__*/_jsx("span", {
           ...{
             0: {
               className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92"
@@ -501,16 +470,16 @@ export function CodeBlock({
               className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x6jxa94 x1v9usgg x1mjzq1q x11xpdln xuedmi6 xlr8y92 x19jd1h0"
             }
           }[!!isCollapsed << 0],
-          children: /*#__PURE__*/_jsxDEV(Icon, {
+          children: /*#__PURE__*/_jsx(Icon, {
             icon: "chevronDown",
             size: "xsm",
             color: "inherit"
-          }, void 0, false)
-        }, void 0, false)]
-      }, void 0, true)
-    }, void 0, false), copyButtonEl]
-  }, void 0, true) : null;
-  const codeBody = /*#__PURE__*/_jsxDEV("div", {
+          })
+        })]
+      })
+    }), copyButtonEl]
+  }) : null;
+  const codeBody = /*#__PURE__*/_jsx("div", {
     ref: scrollContainerRef
     // The scroll container is keyboard-focusable so keyboard users can
     // scroll long or wide code that overflows the viewport. Uses
@@ -525,7 +494,7 @@ export function CodeBlock({
     }, {
       style: scrollStyle
     }),
-    children: /*#__PURE__*/_jsxDEV("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       ...{
         0: {
           className: "x78zum5 x1pshirs"
@@ -534,34 +503,34 @@ export function CodeBlock({
           className: "x78zum5 x1pshirs x1ajqlyv"
         }
       }[!!(showHeader && !hasLineNumbers) << 0],
-      children: [hasLineNumbers && /*#__PURE__*/_jsxDEV("div", {
+      children: [hasLineNumbers && /*#__PURE__*/_jsx("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
-        _jsxDEV("div", {
+        _jsx("div", {
           ...{
             className: "x9m5x89 x17iicif"
           },
           children: i + 1
-        }, i, false))
-      }, void 0, false), useSpans ? /*#__PURE__*/_jsxDEV(SpanCodeContent, {
+        }, i))
+      }), useSpans ? /*#__PURE__*/_jsx(SpanCodeContent, {
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle
-      }, void 0, false) : /*#__PURE__*/_jsxDEV(RangeCodeContent, {
+      }) : /*#__PURE__*/_jsx(RangeCodeContent, {
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle
-      }, void 0, false)]
-    }, void 0, true)
-  }, void 0, false);
-  const block = /*#__PURE__*/_jsxDEV("pre", {
+      })]
+    })
+  });
+  return /*#__PURE__*/_jsxs("pre", {
     ref: ref,
     ...mergeProps(themeProps('codeblock', {
       size,
@@ -569,8 +538,7 @@ export function CodeBlock({
       container
     }), stylex.props(styles.root, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
     ...props,
-    children: [headerEl, canCollapse ? /*#__PURE__*/_jsxDEV("div", {
-      id: regionId,
+    children: [headerEl, canCollapse ? /*#__PURE__*/_jsx("div", {
       ...{
         0: {
           className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz xlr8y92"
@@ -579,17 +547,13 @@ export function CodeBlock({
           className: "xrvj5dj x1qn9uv2 x80gvsz xlr8y92 xihq33y"
         }
       }[!!isCollapsed << 0],
-      children: /*#__PURE__*/_jsxDEV("div", {
+      children: /*#__PURE__*/_jsx("div", {
         ...{
           className: "xb3r6kr x2lwn1j"
         },
         children: codeBody
-      }, 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;
+      })
+    }) : codeBody, !showHeader && copyButtonEl]
+  });
 }
 CodeBlock.displayName = 'CodeBlock';

package/dist/Collapsible/Collapsible.d.ts

@@ -1,20 +1,14 @@
 /**
  * @file Collapsible.tsx
- * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
+ * @input Uses React, StyleX, useCollapsible hook, 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 + aria-controls linking
- * the trigger to its content region), and chevron indicator.
+ * Handles state management, accessibility (aria-expanded), and chevron indicator.
  *
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
- * When the surrounding CollapsibleGroup enables `dividers`, 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)
@@ -22,7 +16,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;;;;;;;;;;;;;;;;;;;;;;;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,+BAsElB;yBAlFe,WAAW"}
+{"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"}

package/dist/Collapsible/Collapsible.js

@@ -4,21 +4,15 @@
 
 /**
  * @file Collapsible.tsx
- * @input Uses React, StyleX, useCollapsible hook, CollapsibleGroupPresentationContext, getIcon, theme tokens
+ * @input Uses React, StyleX, useCollapsible hook, 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 + aria-controls linking
- * the trigger to its content region), and chevron indicator.
+ * Handles state management, accessibility (aria-expanded), and chevron indicator.
  *
  * Works standalone or coordinated by CollapsibleGroup via the `value` prop.
- * When the surrounding CollapsibleGroup enables `dividers`, 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)
@@ -26,93 +20,20 @@
  * - /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 { borderVars, colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { 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 { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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.
  *
@@ -178,33 +99,24 @@ export function Collapsible({
     isCollapsible: collapsibleConfig,
     value
   });
-  const presentation = use(CollapsibleGroupPresentationContext);
-  const isDivided = presentation != null && presentation.dividers !== 'none';
-  const density = presentation?.density ?? null;
   const chevronIcon = getIcon('chevronDown');
-
-  // 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", {
+  return /*#__PURE__*/_jsxs("div", {
     ref: ref,
-    ...mergeProps(themeProps('collapsible', {
-      dividers: isDivided ? presentation.dividers : undefined,
-      density: density ?? undefined
-    }), stylex.props(styles.root, isDivided && styles.divided, xstyle), className, style),
+    ...mergeProps(themeProps('collapsible'), stylex.props(styles.root, xstyle), className, style),
     ...props,
-    children: [/*#__PURE__*/_jsxDEV("button", {
+    children: [/*#__PURE__*/_jsxs("button", {
       type: "button",
       onClick: toggle,
       "aria-expanded": isOpen,
-      "aria-controls": contentId,
-      ...stylex.props(styles.trigger, density != null && triggerDensity[density]),
-      children: [/*#__PURE__*/_jsxDEV("span", {
+      ...{
+        className: "x9f619 x78zum5 x6s0dn4 x1qughib xh8yej3 x1ypdohk x9ynric x18juvz8 x2mo6ok x1tgivj0 x1yc453h xt970qd"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
         ...{
           className: "x1b2iylo xwgcxoh"
         },
         children: trigger
-      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
+      }), /*#__PURE__*/_jsx("span", {
         ...{
           0: {
             className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s x11xpdln xuedmi6 xlr8y92 xv9yike x7p49u4"
@@ -214,15 +126,15 @@ export function Collapsible({
           }
         }[!!isOpen << 0],
         children: chevronIcon
-      }, 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);
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      ...(isOpen ? {
+        className: "xfsso4q"
+      } : {
+        className: "xfsso4q x1s85apg"
+      }),
+      children: children
+    })]
+  });
 }
 Collapsible.displayName = 'Collapsible';

package/dist/Collapsible/CollapsibleGroup.d.ts

@@ -1,17 +1,12 @@
 /**
  * @file CollapsibleGroup.tsx
- * @input Uses React useState, useCallback, CollapsibleGroupContext, StyleX, theme tokens
+ * @input Uses React useState, useCallback, CollapsibleGroupContext
  * @output Exports CollapsibleGroup component and CollapsibleGroupProps
- * @position Core collapsible group coordination provider — renders no wrapper
- *   DOM unless `dividers` is enabled
+ * @position Core collapsible group coordination provider — renders no wrapper DOM
  *
  * CollapsibleGroup groups collapsible components (Card, etc.) with
- * coordinated open/close behavior. By default it renders only `{children}` —
- * no wrapper DOM element. When `dividers` is 'between' or 'all' it renders a
- * wrapper div that anchors the divider chrome (outer borders, reliable
- * :first-child suppression) and provides dividers/density to items via
- * CollapsibleGroupPresentationContext — each Collapsible draws its own
- * borders since StyleX has no child selectors.
+ * coordinated open/close behavior. It renders only `{children}` — no wrapper
+ * DOM element.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -24,7 +19,6 @@
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { CollapsibleGroupDensity, CollapsibleGroupDividers } from './CollapsibleGroupContext';
 import type { BaseProps } from '../BaseProps';
 export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     ref?: React.Ref<HTMLElement>;
@@ -47,22 +41,6 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
      * Callback when the open item(s) change.
      */
     onChange?: (value: string | string[]) => void;
-    /**
-     * Divider style rendered around the group's items — the accordion row
-     * chrome. 'between' draws hairlines between adjacent items; 'all' adds the
-     * group's top and bottom edges. When enabled, 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 "none"
-     */
-    dividers?: CollapsibleGroupDividers;
-    /**
-     * 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.
      *
@@ -91,26 +69,16 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
 }
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM unless `dividers` is enabled.
+ * Renders no wrapper DOM.
  *
  * 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. For FAQ-style lists,
- * use `dividers` with bare Collapsible children instead of wrapping each item
- * in Card.
+ * Each Collapsible needs a `value` prop to participate.
  *
  * @example
  * ```
- * <CollapsibleGroup type="single" dividers="between" 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>
@@ -127,7 +95,7 @@ export interface CollapsibleGroupProps extends Omit<BaseProps<HTMLElement>, 'onC
  * </CollapsibleGroup>
  * ```
  */
-export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, dividers, density, children, ref, xstyle, className, style, ...props }: CollapsibleGroupProps): React.JSX.Element;
+export declare function CollapsibleGroup({ type, defaultValue, value: controlledValue, onChange, children, }: CollapsibleGroupProps): React.JSX.Element;
 export declare namespace CollapsibleGroup {
     var displayName: string;
 }