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

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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAM5E,OAAO,KAAK,EAEV,uBAAuB,EAExB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,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;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;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,WAAmB,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAsFvB;yBAnGe,gBAAgB"}

package/dist/Collapsible/CollapsibleGroup.js

@@ -4,13 +4,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 `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.
@@ -23,8 +27,18 @@
  * - /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 { 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 = {
+  wrapper: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  }
+};
 function normalizeToArray(value) {
   if (value == null) {
     return [];
@@ -34,16 +48,26 @@ function normalizeToArray(value) {
 
 /**
  * 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>
@@ -65,7 +89,14 @@ export function CollapsibleGroup({
   defaultValue,
   value: controlledValue,
   onChange,
-  children
+  hasDividers = false,
+  density,
+  children,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...props
 }) {
   const isControlled = controlledValue !== undefined;
   const [internalValue, setInternalValue] = useState(() => normalizeToArray(defaultValue));
@@ -96,9 +127,30 @@ export function CollapsibleGroup({
     isOpen,
     toggle
   }), [isOpen, toggle]);
-  return /*#__PURE__*/_jsx(CollapsibleGroupContext, {
-    value: contextValue,
+  const resolvedDensity = density ?? (hasDividers ? 'balanced' : null);
+  const presentationValue = useMemo(() => ({
+    hasDividers,
+    density: resolvedDensity
+  }), [hasDividers, resolvedDensity]);
+
+  // The wrapper anchors divider chrome: 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', {
+      density: resolvedDensity ?? undefined
+    }), stylex.props(styles.wrapper, 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,28 @@ export interface CollapsibleGroupContextValue {
  * When present, collapsible components defer their open/close state to the group.
  */
 export declare const CollapsibleGroupContext: import("react").Context<CollapsibleGroupContextValue | null>;
+/**
+ * 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 {
+    /** Whether the group's items draw hairline dividers between one another. */
+    hasDividers: boolean;
+    /** 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;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1E;;;;GAIG;AACH,MAAM,WAAW,iCAAiC;IAChD,4EAA4E;IAC5E,WAAW,EAAE,OAAO,CAAC;IACrB,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,
+ *   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,25 @@ 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';
+
+/**
+ * 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 { 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,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAC;AAEvE,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.js

@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   empty: {
     k1xSpc: "x78zum5",
@@ -60,11 +60,11 @@ export function CommandPaletteEmpty({
   style,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('command-palette-empty'), stylex.props(styles.empty, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';

package/dist/CommandPalette/CommandPaletteFooter.js

@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
 import { Kbd } from "../Kbd/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   footer: {
     k1xSpc: "x78zum5",
@@ -61,36 +61,36 @@ export function CommandPaletteFooter({
   style,
   ...props
 }) {
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('command-palette-footer'), stylex.props(styles.footer, xstyle), className, style),
     ...props,
-    children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs("span", {
+    children: children ?? /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw"
         },
-        children: [/*#__PURE__*/_jsx(Kbd, {
+        children: [/*#__PURE__*/_jsxDEV(Kbd, {
           keys: "up"
-        }), /*#__PURE__*/_jsx(Kbd, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(Kbd, {
           keys: "down"
-        }), "Navigate"]
-      }), /*#__PURE__*/_jsxs("span", {
+        }, void 0, false), "Navigate"]
+      }, void 0, true), /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw"
         },
-        children: [/*#__PURE__*/_jsx(Kbd, {
+        children: [/*#__PURE__*/_jsxDEV(Kbd, {
           keys: "enter"
-        }), "Select"]
-      }), /*#__PURE__*/_jsxs("span", {
+        }, void 0, false), "Select"]
+      }, void 0, true), /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 xzye2dw"
         },
-        children: [/*#__PURE__*/_jsx(Kbd, {
+        children: [/*#__PURE__*/_jsxDEV(Kbd, {
           keys: "escape"
-        }), "Close"]
-      })]
-    })
-  });
+        }, void 0, false), "Close"]
+      }, void 0, true)]
+    }, void 0, true)
+  }, void 0, false);
 }
 CommandPaletteFooter.displayName = 'CommandPaletteFooter';

package/dist/CommandPalette/CommandPaletteGroup.js

@@ -17,7 +17,7 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   group: {
     k1xSpc: "x78zum5",
@@ -54,19 +54,19 @@ export function CommandPaletteGroup({
   style,
   ...props
 }) {
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: "group",
     "aria-label": heading,
     ...mergeProps(themeProps('command-palette-group'), stylex.props(styles.group, xstyle), className, style),
     ...props,
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       "aria-hidden": "true",
       ...{
         className: "xrrkdod xu0wf1k x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
       },
       children: heading
-    }), children]
-  });
+    }, void 0, false), children]
+  }, void 0, true);
 }
 CommandPaletteGroup.displayName = 'CommandPaletteGroup';

package/dist/CommandPalette/CommandPaletteInput.js

@@ -22,7 +22,7 @@ import { colorVars, typeScaleVars, spacingVars, typographyVars } from "../theme/
 import { useCommandPaletteContext } from "./CommandPaletteContext.js";
 import { useDialogContext } from "../Dialog/DialogContext.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 = {
   wrapper: {
     k1xSpc: "x78zum5",
@@ -95,18 +95,18 @@ export function CommandPaletteInput({
     // Delegate to useCombobox's keyboard handler from context
     ctx?.onKeyDown(e);
   }, [ctx, onKeyDown]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ...mergeProps(themeProps('command-palette-input'), stylex.props(styles.wrapper, xstyle)),
-    children: [/*#__PURE__*/_jsx("span", {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x78zum5 x6s0dn4 x2lah0s xv1l7n4"
       },
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: "search",
         size: "sm",
         color: "inherit"
-      })
-    }), /*#__PURE__*/_jsx("input", {
+      }, void 0, false)
+    }, void 0, false), /*#__PURE__*/_jsxDEV("input", {
       ref: mergeRefs(ref, inputRef),
       type: "text",
       role: "combobox",
@@ -126,19 +126,19 @@ export function CommandPaletteInput({
         className: "x98rzlu xeuugli x1a2a7pz xjbqb8w x1tgivj0 x9ynric xjm74w1 x6pjikd xw6l6zx x1717udv xeyghm5"
       },
       ...props
-    }), (ctx?.isBusy || endContent) && /*#__PURE__*/_jsxs("span", {
+    }, void 0, false), (ctx?.isBusy || endContent) && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x78zum5 x6s0dn4 xzye2dw x2lah0s"
       },
-      children: [ctx?.isBusy && /*#__PURE__*/_jsx("span", {
+      children: [ctx?.isBusy && /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x78zum5 x6s0dn4 x2lah0s xv1l7n4 x1hc1fzr x19991ni xjd9b36 x5h36tt x4itv7f"
         },
-        children: /*#__PURE__*/_jsx(Spinner, {
+        children: /*#__PURE__*/_jsxDEV(Spinner, {
           size: "sm"
-        })
-      }), endContent]
-    }), ' ']
-  });
+        }, void 0, false)
+      }, void 0, false), endContent]
+    }, void 0, true), ' ']
+  }, void 0, true);
 }
 CommandPaletteInput.displayName = 'CommandPaletteInput';

package/dist/CommandPalette/CommandPaletteItem.js

@@ -19,7 +19,7 @@ import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } fro
 import { useCommandPaletteContext } from "./CommandPaletteContext.js";
 import { useDialogContext } from "../Dialog/DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const HOVER_HOVER = '@media (hover: hover)';
 const styles = {
   item: {
@@ -133,7 +133,7 @@ export function CommandPaletteItem({
     }
     ctx.setHighlightedIndex(itemIndex);
   }, [isDisabled, itemIndex, ctx]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: mergeRefs(ref, itemRef),
     id: ctx && itemIndex >= 0 ? ctx.getItemId(itemIndex) : undefined,
     role: "option",
@@ -145,6 +145,6 @@ export function CommandPaletteItem({
     ...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && styles.itemHover, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 CommandPaletteItem.displayName = 'CommandPaletteItem';