@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/dist/Collapsible/CollapsibleGroup.d.ts

@@ -1,12 +1,17 @@
 /**
  * @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 `dividers` is enabled
  *
  * 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 `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.
  *
  * 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 +24,7 @@
  * - /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>;
@@ -41,6 +47,22 @@ 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.
      *
@@ -69,16 +91,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 `dividers` is enabled.
  *
  * 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 `dividers` with bare Collapsible children instead of wrapping each item
+ * in Card.
  *
  * @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>
@@ -95,7 +127,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, dividers, density, children, ref, xstyle, className, style, ...props }: CollapsibleGroupProps): React.JSX.Element;
 export declare namespace CollapsibleGroup {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAe,EACf,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,qBAuDvB;yBA7De,gBAAgB"}
+{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAO5E,OAAO,KAAK,EAEV,uBAAuB,EACvB,wBAAwB,EAEzB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,wBAAwB,CAAC;IAEpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAElC;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAe,EACf,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,QAAiB,EACjB,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAwFvB;yBArGe,gBAAgB"}

package/dist/Collapsible/CollapsibleGroup.js

@@ -4,13 +4,18 @@
 
 /**
  * @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 `dividers` is enabled
  *
  * 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 `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.
  *
  * In "single" mode (default), only one item can be open at a time.
  * In "multiple" mode, any number of items can be open simultaneously.
@@ -23,8 +28,24 @@
  * - /packages/cli/templates/blocks/components/Collapsible/ (showcase blocks)
  */
 import React, { useCallback, useMemo, useState } from 'react';
-import { CollapsibleGroupContext } from "./CollapsibleGroupContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { borderVars, colorVars } from "../theme/tokens.stylex.js";
+import { CollapsibleGroupContext, CollapsibleGroupPresentationContext } from "./CollapsibleGroupContext.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+const styles = {
+  wrapperAll: {
+    kEafiO: "x11xkdxz",
+    kPef9Z: "x13fuv20",
+    kLZC3w: "x1pc3f07",
+    kt9PQ7: "x92x3c3",
+    kfdmCh: "x1q0q8m5",
+    kL6WhQ: "xw8gpjh",
+    $$css: true
+  }
+};
 function normalizeToArray(value) {
   if (value == null) {
     return [];
@@ -34,16 +55,26 @@ function normalizeToArray(value) {
 
 /**
  * Groups collapsible components with coordinated open/close behavior.
- * Renders no wrapper DOM.
+ * Renders no wrapper DOM unless `dividers` is enabled.
  *
  * 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 `dividers` with bare Collapsible children instead of wrapping each item
+ * in Card.
  *
  * @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>
@@ -65,7 +96,14 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
-  children
+  dividers = 'none',
+  density,
+  children,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...props
 }) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState(() => normalizeToArray(defaultValue));
@@ -96,9 +134,32 @@ export function CollapsibleGroup({
     isOpen,
     toggle
   }), [isOpen, toggle]);
-  return /*#__PURE__*/_jsx(CollapsibleGroupContext, {
-    value: contextValue,
+  const hasDividers = dividers !== 'none';
+  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
+  const presentationValue = useMemo(() => ({
+    dividers,
+    density: resolvedDensity
+  }), [dividers, resolvedDensity]);
+
+  // The wrapper anchors divider chrome: 'all' outer borders live here, and it
+  // makes the items' :first-child suppression independent of surrounding
+  // siblings. Without dividers the group stays DOM-less (documented contract),
+  // so ref/xstyle/className/style only take effect in wrapper mode.
+  const content = hasDividers ? /*#__PURE__*/_jsxDEV("div", {
+    ref: ref,
+    ...mergeProps(themeProps('collapsible-group', {
+      dividers,
+      density: resolvedDensity ?? undefined
+    }), stylex.props(dividers === 'all' && styles.wrapperAll, xstyle), className, style),
+    ...props,
     children: children
-  });
+  }, void 0, false) : children;
+  return /*#__PURE__*/_jsxDEV(CollapsibleGroupContext, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxDEV(CollapsibleGroupPresentationContext, {
+      value: presentationValue,
+      children: content
+    }, void 0, false)
+  }, void 0, false);
 }
 CollapsibleGroup.displayName = 'CollapsibleGroup';

package/dist/Collapsible/CollapsibleGroupContext.d.ts

@@ -12,4 +12,35 @@ export interface CollapsibleGroupContextValue {
  * When present, collapsible components defer their open/close state to the group.
  */
 export declare const CollapsibleGroupContext: import("react").Context<CollapsibleGroupContextValue | null>;
+/**
+ * Divider style rendered around the items of a CollapsibleGroup.
+ * - 'between': hairlines between adjacent items only.
+ * - 'all': hairlines between items plus the group's top and bottom edges.
+ * - 'none': no dividers (default).
+ */
+export type CollapsibleGroupDividers = 'between' | 'all' | 'none';
+/**
+ * Row density for the items of a CollapsibleGroup, controlling trigger and
+ * content block padding. Shares the repo-wide density vocabulary
+ * (Table, List, Item).
+ */
+export type CollapsibleGroupDensity = 'compact' | 'balanced' | 'spacious';
+/**
+ * Presentation value provided by CollapsibleGroup so each Collapsible can
+ * draw its own group chrome (StyleX has no child selectors, so the group
+ * cannot style items from the outside).
+ */
+export interface CollapsibleGroupPresentationValue {
+    /** Resolved divider style for the group's items. */
+    dividers: CollapsibleGroupDividers;
+    /** Resolved row density, or null to keep the default (unpadded) look. */
+    density: CollapsibleGroupDensity | null;
+}
+/**
+ * Context for collapsible group presentation (dividers, density).
+ * Kept separate from CollapsibleGroupContext so the public useCollapsible
+ * state API is unaffected. Collapsible resets this context around its
+ * children so nested collapsibles never inherit row chrome.
+ */
+export declare const CollapsibleGroupPresentationContext: import("react").Context<CollapsibleGroupPresentationValue | null>;
 //# sourceMappingURL=CollapsibleGroupContext.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleGroupContext.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroupContext.tsx"],"names":[],"mappings":"AAkBA;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8DACsB,CAAC"}
+{"version":3,"file":"CollapsibleGroupContext.d.ts","sourceRoot":"","sources":["../../src/Collapsible/CollapsibleGroupContext.tsx"],"names":[],"mappings":"AAoBA;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,gDAAgD;IAChD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,8CAA8C;IAC9C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAElE;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1E;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD,oDAAoD;IACpD,QAAQ,EAAE,wBAAwB,CAAC;IACnC,yEAAyE;IACzE,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAAC;CACzC;AAED;;;;;GAKG;AACH,eAAO,MAAM,mCAAmC,mEACe,CAAC"}

package/dist/Collapsible/CollapsibleGroupContext.js

@@ -5,8 +5,10 @@
 /**
  * @file CollapsibleGroupContext.tsx
  * @input Uses React createContext
- * @output Exports CollapsibleGroupContext and CollapsibleGroupContextValue type
- * @position Context definition for collapsible group coordination
+ * @output Exports CollapsibleGroupContext, CollapsibleGroupContextValue,
+ *   CollapsibleGroupPresentationContext, CollapsibleGroupPresentationValue,
+ *   CollapsibleGroupDividers, and CollapsibleGroupDensity types
+ * @position Context definitions for collapsible group coordination and presentation
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Collapsible/CollapsibleGroup.tsx (provider)
@@ -24,4 +26,32 @@ import { createContext } from 'react';
  * When present, collapsible components defer their open/close state to the group.
  */
 export const CollapsibleGroupContext = /*#__PURE__*/createContext(null);
-CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
+CollapsibleGroupContext.displayName = 'CollapsibleGroupContext';
+
+/**
+ * Divider style rendered around the items of a CollapsibleGroup.
+ * - 'between': hairlines between adjacent items only.
+ * - 'all': hairlines between items plus the group's top and bottom edges.
+ * - 'none': no dividers (default).
+ */
+
+/**
+ * Row density for the items of a CollapsibleGroup, controlling trigger and
+ * content block padding. Shares the repo-wide density vocabulary
+ * (Table, List, Item).
+ */
+
+/**
+ * Presentation value provided by CollapsibleGroup so each Collapsible can
+ * draw its own group chrome (StyleX has no child selectors, so the group
+ * cannot style items from the outside).
+ */
+
+/**
+ * Context for collapsible group presentation (dividers, density).
+ * Kept separate from CollapsibleGroupContext so the public useCollapsible
+ * state API is unaffected. Collapsible resets this context around its
+ * children so nested collapsibles never inherit row chrome.
+ */
+export const CollapsibleGroupPresentationContext = /*#__PURE__*/createContext(null);
+CollapsibleGroupPresentationContext.displayName = 'CollapsibleGroupPresentationContext';

package/dist/Collapsible/index.d.ts

@@ -10,6 +10,7 @@ export { Collapsible } from './Collapsible';
 export type { CollapsibleProps } from './Collapsible';
 export { CollapsibleGroup } from './CollapsibleGroup';
 export type { CollapsibleGroupProps } from './CollapsibleGroup';
+export type { CollapsibleGroupDividers, CollapsibleGroupDensity, } from './CollapsibleGroupContext';
 export { useCollapsible } from './useCollapsible';
 export type { CollapsibleConfig, UseCollapsibleOptions, UseCollapsibleReturn, } from './useCollapsible';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Collapsible/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAE9D,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Collapsible/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}

package/dist/Collapsible/useCollapsible.d.ts

@@ -36,8 +36,11 @@ export interface UseCollapsibleReturn {
  *
  * Supports three modes:
  * 1. **Group-controlled**: When inside a CollapsibleGroup with a `value`, defers to group.
- * 2. **Controlled**: When `isOpen` and `onOpenChange` are provided in config.
+ * 2. **Controlled**: When `isOpen` is provided in config, the parent owns state;
+ *    `toggle` only calls `onOpenChange` and never mutates internal state.
  * 3. **Uncontrolled**: Self-managed internal state with optional `defaultIsOpen`.
+ *    `onOpenChange`, if supplied, is invoked in addition to the internal update —
+ *    it is a notification callback, not a signal that the component is controlled.
  *
  * @example
  * ```

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

@@ -1 +1 @@
-{"version":3,"file":"useCollapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/useCollapsible.ts"],"names":[],"mappings":"AA0BA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,qBAAqB,GAC7B,oBAAoB,CA6CtB"}
+{"version":3,"file":"useCollapsible.d.ts","sourceRoot":"","sources":["../../src/Collapsible/useCollapsible.ts"],"names":[],"mappings":"AA0BA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,+DAA+D;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,oCAAoC;IACpC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,qBAAqB,GAC7B,oBAAoB,CAwDtB"}

package/dist/Collapsible/useCollapsible.js

@@ -32,8 +32,11 @@ import { CollapsibleGroupContext } from "./CollapsibleGroupContext.js";
  *
  * Supports three modes:
  * 1. **Group-controlled**: When inside a CollapsibleGroup with a `value`, defers to group.
- * 2. **Controlled**: When `isOpen` and `onOpenChange` are provided in config.
+ * 2. **Controlled**: When `isOpen` is provided in config, the parent owns state;
+ *    `toggle` only calls `onOpenChange` and never mutates internal state.
  * 3. **Uncontrolled**: Self-managed internal state with optional `defaultIsOpen`.
+ *    `onOpenChange`, if supplied, is invoked in addition to the internal update —
+ *    it is a notification callback, not a signal that the component is controlled.
  *
  * @example
  * ```
@@ -78,15 +81,26 @@ export function useCollapsible(options) {
     isOpen = internalIsOpen;
   }
 
-  // Toggle handler dispatches to the appropriate controller
+  // Toggle handler dispatches to the appropriate controller.
+  //
+  // Controlled vs uncontrolled is decided by whether `isOpen` was provided —
+  // mirroring how `isOpen` is derived above. `onOpenChange` is a notification
+  // callback, not a signal of control: an uncontrolled component may still want
+  // to observe changes. So in uncontrolled mode we drive internal state AND
+  // fire the callback; only in controlled mode do we defer entirely to the
+  // parent via the callback.
   const toggle = () => {
     if (isControlledByGroup && value != null) {
       group.toggle(value);
-    } else if (config?.onOpenChange) {
-      config.onOpenChange(!isOpen);
-    } else {
-      setInternalIsOpen(prev => !prev);
+      return;
     }
+    const next = !isOpen;
+    // Uncontrolled: internal state is the source of truth, so update it.
+    if (config?.isOpen === undefined) {
+      setInternalIsOpen(next);
+    }
+    // Always notify — for both controlled and uncontrolled usage.
+    config?.onOpenChange?.(next);
   };
   return {
     isEnabled,

package/dist/CommandPalette/CommandPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA6GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAA8B,EAC9B,kBAAqC,EACrC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAyB,EACzB,KAAW,EACX,SAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAkRxB;yBAlSe,cAAc"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA6GD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAA8B,EAC9B,kBAAqC,EACrC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAyB,EACzB,KAAW,EACX,SAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAoRxB;yBApSe,cAAc"}

package/dist/CommandPalette/CommandPalette.js

@@ -23,7 +23,7 @@ import { CommandPaletteGroup } from "./CommandPaletteGroup.js";
 import { CommandPaletteInput } from "./CommandPaletteInput.js";
 import { CommandPaletteFooter } from "./CommandPaletteFooter.js";
 import { CommandPaletteEmpty } from "./CommandPaletteEmpty.js";
-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";
 function getGroup(item) {
   const aux = item.auxiliaryData;
   return typeof aux?.group === 'string' ? aux.group : undefined;
@@ -86,15 +86,15 @@ function ItemRenderer({
   value,
   renderItem
 }) {
-  const renderOne = item => /*#__PURE__*/_jsx(CommandPaletteItem, {
+  const renderOne = item => /*#__PURE__*/_jsxDEV(CommandPaletteItem, {
     value: item.id,
     children: renderItem ? renderItem(item, item.id === value) : item.label
-  }, item.id);
+  }, item.id, false);
   const hasGroups = items.some(item => getGroup(item) != null);
   if (!hasGroups) {
-    return /*#__PURE__*/_jsx(_Fragment, {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
       children: items.map(renderOne)
-    });
+    }, void 0, false);
   }
   const groupOrder = [];
   const groups = new Map();
@@ -111,12 +111,12 @@ function ItemRenderer({
       ungrouped.push(item);
     }
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [groupOrder.map(heading => /*#__PURE__*/_jsx(CommandPaletteGroup, {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [groupOrder.map(heading => /*#__PURE__*/_jsxDEV(CommandPaletteGroup, {
       heading: heading,
       children: (groups.get(heading) ?? []).map(renderOne)
-    }, heading)), ungrouped.map(renderOne)]
-  });
+    }, heading, false)), ungrouped.map(renderOne)]
+  }, void 0, true);
 }
 
 /**
@@ -292,11 +292,13 @@ export function CommandPalette({
   }, [combobox, handleClose, selectableItems, selectItem]);
   const contextValue = useMemo(() => ({
     // Input uses optimisticSearch — reflects keystrokes immediately.
-    // setSearch calls setOptimisticSearch for instant feedback then
-    // triggers the async search directly (no effect indirection).
+    // setSearch calls setOptimisticSearch inside a transition for instant
+    // feedback then triggers the async search directly (no effect indirection).
     search: optimisticSearch,
     setSearch: query => {
-      setOptimisticSearch(query);
+      startTransition(() => {
+        setOptimisticSearch(query);
+      });
       runSearch(query);
     },
     value,
@@ -322,21 +324,21 @@ export function CommandPalette({
   const showEmptySearch = search !== '' && optimisticResults.length === 0;
   let listContent;
   if (showEmptyBootstrap) {
-    listContent = /*#__PURE__*/_jsx(CommandPaletteEmpty, {
+    listContent = /*#__PURE__*/_jsxDEV(CommandPaletteEmpty, {
       children: emptyBootstrapText
-    });
+    }, void 0, false);
   } else if (showEmptySearch) {
-    listContent = /*#__PURE__*/_jsx(CommandPaletteEmpty, {
+    listContent = /*#__PURE__*/_jsxDEV(CommandPaletteEmpty, {
       children: emptySearchText
-    });
+    }, void 0, false);
   } else {
-    listContent = /*#__PURE__*/_jsx(ItemRenderer, {
+    listContent = /*#__PURE__*/_jsxDEV(ItemRenderer, {
       items: optimisticResults,
       value: value,
       renderItem: renderItem
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx(Dialog, {
+  return /*#__PURE__*/_jsxDEV(Dialog, {
     ref: ref,
     isOpen: isOpen,
     isInline: isInline,
@@ -351,28 +353,28 @@ export function CommandPalette({
     maxHeight: maxHeight,
     purpose: "info",
     "aria-label": label,
-    children: /*#__PURE__*/_jsx(CommandPaletteContext, {
+    children: /*#__PURE__*/_jsxDEV(CommandPaletteContext, {
       value: contextValue,
-      children: /*#__PURE__*/_jsx(Layout, {
+      children: /*#__PURE__*/_jsxDEV(Layout, {
         defaultHasDividers: true,
-        header: /*#__PURE__*/_jsx(LayoutHeader, {
+        header: /*#__PURE__*/_jsxDEV(LayoutHeader, {
           hasDivider: true,
           padding: 0,
-          children: input ?? /*#__PURE__*/_jsx(CommandPaletteInput, {})
-        }),
-        content: /*#__PURE__*/_jsx(LayoutContent, {
+          children: input ?? /*#__PURE__*/_jsxDEV(CommandPaletteInput, {}, void 0, false)
+        }, void 0, false),
+        content: /*#__PURE__*/_jsxDEV(LayoutContent, {
           padding: 0,
-          children: /*#__PURE__*/_jsx(CommandPaletteList, {
+          children: /*#__PURE__*/_jsxDEV(CommandPaletteList, {
             children: listContent
-          })
-        }),
-        footer: /*#__PURE__*/_jsx(LayoutFooter, {
+          }, void 0, false)
+        }, void 0, false),
+        footer: /*#__PURE__*/_jsxDEV(LayoutFooter, {
           hasDivider: true,
           padding: 0,
-          children: footer ?? /*#__PURE__*/_jsx(CommandPaletteFooter, {})
-        })
-      })
-    })
-  });
+          children: footer ?? /*#__PURE__*/_jsxDEV(CommandPaletteFooter, {}, void 0, false)
+        }, void 0, false)
+      }, void 0, false)
+    }, void 0, false)
+  }, void 0, false);
 }
 CommandPalette.displayName = 'CommandPalette';

package/dist/CommandPalette/CommandPaletteEmpty.d.ts

@@ -23,7 +23,7 @@ export interface CommandPaletteEmptyProps extends BaseProps<HTMLDivElement> {
  * />
  * ```
  */
-export declare function CommandPaletteEmpty({ ref, children, }: CommandPaletteEmptyProps): React.JSX.Element;
+export declare function CommandPaletteEmpty({ ref, children, xstyle, className, style, ...props }: CommandPaletteEmptyProps): React.JSX.Element;
 export declare namespace CommandPaletteEmpty {
     var displayName: string;
 }

package/dist/CommandPalette/CommandPaletteEmpty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPaletteEmpty.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteEmpty.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,QAAQ,GACT,EAAE,wBAAwB,qBAM1B;yBATe,mBAAmB"}
+{"version":3,"file":"CommandPaletteEmpty.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteEmpty.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,qBAc1B;yBArBe,mBAAmB"}

package/dist/CommandPalette/CommandPaletteEmpty.js

@@ -16,7 +16,24 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+const styles = {
+  empty: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    k8WAf4: "xmfvnks",
+    kg3NbH: "x1pzlopt",
+    kMv6JI: "x9ynric",
+    kGuDYH: "x141an7d",
+    kLWn49: "x1ltkj2j",
+    kMwMTN: "xv1l7n4",
+    k9WMMc: "x2b8uid",
+    $$css: true
+  }
+};
 /**
  * Empty state for the command palette list area.
  *
@@ -37,14 +54,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 export function CommandPaletteEmpty({
   ref,
-  children
+  children,
+  xstyle,
+  className,
+  style,
+  ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
-    ...{
-      className: "x78zum5 x6s0dn4 xl56j7k xmfvnks x1pzlopt x9ynric x141an7d x1ltkj2j xv1l7n4 x2b8uid"
-    },
+    ...mergeProps(themeProps('command-palette-empty'), stylex.props(styles.empty, xstyle), className, style),
+    ...props,
     children: children
-  });
+  }, void 0, false);
 }
 CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';