@astryxdesign/core 0.2.0-canary.416db07 → 0.2.0-canary.46433cf

package/README.md

@@ -80,7 +80,7 @@ Astryx requires **React 19** or later (`react` and `react-dom` >= 19.0.0 are pee
 Install Astryx and a theme:
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-neutral
+npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
 ```
 
 Then pick your setup below based on your framework and styling approach.
@@ -228,7 +228,7 @@ export default function Page() {
 Use the pre-built dist alongside StyleX for your own styles.
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-neutral
+npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
 ```
 
 **`src/app/globals.css`**
@@ -244,7 +244,7 @@ Providers and layout are the same as the Tailwind example (use `@astryxdesign/th
 ### Vite
 
 ```bash
-npm install @astryxdesign/core @astryxdesign/theme-neutral
+npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
 ```
 
 Same CSS imports and providers as above. No build plugins needed; Astryx ships pre-built.

package/dist/AvatarGroup/AvatarGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAavD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAuE9B;yBApFe,WAAW"}
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAA2B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAavD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,wBAAwB,EAC5C,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAmE9B;yBAhFe,WAAW"}

package/dist/AvatarGroup/AvatarGroup.js

@@ -87,11 +87,9 @@ export function AvatarGroup({
   }), [size, overlap, numericSize]);
 
   // The keyboard hint and roving tab stop only make sense once the group has
-  // interactive children. Detect their presence (and the writing direction for
-  // RTL-correct arrow navigation) from the rendered DOM after commit, matching
-  // how the codebase reads direction elsewhere (`getComputedStyle(el).direction`).
+  // interactive children. Detect their presence from the rendered DOM after
+  // commit. (Arrow-key direction is auto-detected inside useListFocus.)
   const [hasInteractiveItems, setHasInteractiveItems] = useState(false);
-  const [isRtl, setIsRtl] = useState(false);
 
   // Single tab stop + roving arrow focus over the group's interactive items.
   // `itemSelector` targets the shared `[data-avatar-item]` marker stamped on
@@ -105,8 +103,7 @@ export function AvatarGroup({
   } = useListFocus({
     itemSelector: '[data-avatar-item]',
     orientation: 'horizontal',
-    hasRovingTabIndex: true,
-    isRtl
+    hasRovingTabIndex: true
   });
   useIsomorphicLayoutEffect(() => {
     const root = listRef.current;
@@ -114,7 +111,6 @@ export function AvatarGroup({
       return;
     }
     setHasInteractiveItems(root.querySelector('[data-avatar-item]') != null);
-    setIsRtl(getComputedStyle(root).direction === 'rtl');
   });
   const hintId = useId();
   const describedBy = [ariaDescribedByFromProps, hasInteractiveItems ? hintId : null].filter(Boolean).join(' ') || undefined;

package/dist/Chat/ChatComposerDrawer.js

@@ -142,10 +142,10 @@ export function ChatComposerDrawer({
       }), /*#__PURE__*/_jsx("div", {
         ...{
           0: {
-            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1hc1fzr x1e8aii2 xuedmi6 xlr8y92"
+            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xfyiiit x1b2l0oc xjspbzw x1q5y3ey x1pe4z86 x1hc1fzr x1e8aii2 xuedmi6 xlr8y92"
           },
           1: {
-            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xw4jnvo x36qwtl xjspbzw x1q5y3ey x1pe4z86 x1e8aii2 xuedmi6 xlr8y92 xg01cxk x47corl"
+            className: "x1ms6mhf xgkxs2y x7v7x1q x1y8v6su xfyiiit x1b2l0oc xjspbzw x1q5y3ey x1pe4z86 x1e8aii2 xuedmi6 xlr8y92 xg01cxk x47corl"
           }
         }[!!isCollapsed << 0]
       })]

package/dist/ComplexSelector/ComplexSelector.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @file ComplexSelector.tsx
+ * @input Uses React, StyleX, Field, usePopover
+ * @output Exports ComplexSelector component for custom selector surfaces
+ * @position Core implementation; consumed by index.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/ComplexSelector/ComplexSelector.doc.mjs
+ * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
+ * - /packages/core/src/ComplexSelector/index.ts
+ * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ */
+import React, { type ReactNode } from 'react';
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { BaseProps } from '../BaseProps';
+import { type FieldStatusVariant } from '../Field';
+import type { SizeValue } from '../utils/types';
+export type ComplexSelectorSize = 'sm' | 'md' | 'lg';
+export interface ComplexSelectorRenderState {
+    /** Whether the selector surface is open. */
+    isOpen: boolean;
+    /** Whether changeAction/isLoading is pending. */
+    isBusy: boolean;
+    /** ID of the trigger button. */
+    triggerId: string;
+    /** ID of the popup content container. */
+    contentId: string;
+}
+export interface ComplexSelectorStatus {
+    type: 'warning' | 'error' | 'success';
+    message?: string;
+}
+export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Label text for accessibility and the field label. */
+    label: string;
+    /** Current controlled value. */
+    value: Value;
+    /** Called when custom content commits a new value. */
+    onChange?: (value: Value) => void;
+    /** Optional async action after onChange; drives optimistic UI. */
+    changeAction?: (value: Value) => void | Promise<void>;
+    /** Custom selector surface content rendered inside a dialog popover. */
+    children: (value: Value, onChange: (value: Value) => void, close: () => void, state: ComplexSelectorRenderState) => ReactNode;
+    /** Label/content shown in the closed trigger. */
+    triggerLabel?: ReactNode;
+    /** Placeholder shown when triggerLabel is omitted. */
+    placeholder?: ReactNode;
+    /** Whether to visually hide the field label. */
+    isLabelHidden?: boolean;
+    /** Helper text displayed below the label. */
+    description?: string;
+    /** Marks the field optional. */
+    isOptional?: boolean;
+    /** Marks the field required. */
+    isRequired?: boolean;
+    /** Disables the selector. */
+    isDisabled?: boolean;
+    /** Shows loading state on the trigger. */
+    isLoading?: boolean;
+    /** Validation status. */
+    status?: ComplexSelectorStatus;
+    /** Status placement. */
+    statusVariant?: FieldStatusVariant;
+    /** Tooltip text displayed next to the label. */
+    labelTooltip?: string;
+    /** Trigger and field size. */
+    size?: ComplexSelectorSize;
+    /** Width of the field. */
+    width?: SizeValue;
+    /** Popup placement. */
+    placement?: 'above' | 'below' | 'start' | 'end';
+    /** StyleX styles for the popup content container. */
+    contentXstyle?: StyleXStyles;
+    /** Test ID for the trigger container. */
+    'data-testid'?: string;
+}
+/**
+ * A selector shell for rich, custom selection surfaces.
+ *
+ * ComplexSelector owns the field, trigger, popover, focus restore, and async
+ * change action flow. Consumers provide the dialog content as a render function,
+ * using the supplied `value`, `onChange`, and `close` helpers to compose the
+ * right accessible structure for the custom selector.
+ *
+ * @example
+ * ```
+ * <ComplexSelector
+ *   label="Fruit"
+ *   value={value}
+ *   onChange={setValue}
+ *   triggerLabel={`${value.fruit} ${value.ripeness}`}>
+ *   {(value, onChange, close) => (
+ *     <FruitGrid
+ *       value={value}
+ *       onChange={nextValue => {
+ *         onChange(nextValue);
+ *         close();
+ *       }}
+ *     />
+ *   )}
+ * </ComplexSelector>
+ * ```
+ */
+export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
+export declare namespace ComplexSelector {
+    var displayName: string;
+}
+//# sourceMappingURL=ComplexSelector.d.ts.map

package/dist/ComplexSelector/ComplexSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAA4B,KAAK,kBAAkB,EAAC,MAAM,UAAU,CAAC;AAiB5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAqG9C,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,CAAE,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,wEAAwE;IACxE,QAAQ,EAAE,CACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAChC,KAAK,EAAE,MAAM,IAAI,EACjB,KAAK,EAAE,0BAA0B,KAC9B,SAAS,CAAC;IACf,iDAAiD;IACjD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,wBAAwB;IACxB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;IAChD,qDAAqD;IACrD,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,EACrC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,WAAW,EAAE,oBAAoB,EACjC,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAiB,EACjB,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,IAAW,EACX,KAAK,EACL,SAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,qBA6J7B;yBAvLe,eAAe"}

package/dist/ComplexSelector/ComplexSelector.js

@@ -0,0 +1,316 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ComplexSelector.tsx
+ * @input Uses React, StyleX, Field, usePopover
+ * @output Exports ComplexSelector component for custom selector surfaces
+ * @position Core implementation; consumed by index.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/ComplexSelector/ComplexSelector.doc.mjs
+ * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
+ * - /packages/core/src/ComplexSelector/index.ts
+ * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ */
+import React, { useCallback, useId, useOptimistic, useTransition } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Field, inputWrapperStyles } from "../Field/index.js";
+import { Icon } from "../Icon/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { usePopover } from "../Popover/usePopover.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const styles = {
+  triggerContainer: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kOIVth: "x1txdalj",
+    kzqmXN: "xh8yej3",
+    k8WAf4: "xce4md1",
+    kg3NbH: "xrrkdod",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib xdk3u5w",
+    kLWn49: "x1kq96og",
+    kMwMTN: "x1tgivj0",
+    kkrTdU: "x1ypdohk",
+    $$css: true
+  },
+  trigger: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "x1qughib",
+    kOIVth: "x1txdalj",
+    kzQI83: "x1iyjqo2",
+    kmuXW: "xs83m0k",
+    kCS8Yb: "x1r8uery",
+    k7Eaqz: "xeuugli",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMv6JI: "xjb2p0i",
+    kGuDYH: "x1qlqyl8",
+    kLWn49: "x15bjb6t",
+    kMwMTN: "x1heor9g",
+    kkrTdU: "x1ypdohk",
+    kI3sdo: "x1a2a7pz",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  triggerText: {
+    kzQI83: "x1iyjqo2",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xb3r6kr",
+    kg5iWk: "xlyipyv",
+    khDVqt: "xuxw1ft",
+    k9WMMc: "x1yc453h",
+    $$css: true
+  },
+  placeholder: {
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  triggerIcon: {
+    kmuXW: "x2lah0s",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x1kky2od",
+    kZKoxP: "xlup9mm",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    k3nNDw: "x1g0ag68",
+    kMwMTN: "xv9yike",
+    $$css: true
+  },
+  triggerIconOpen: {
+    k3aq6I: "x19jd1h0",
+    $$css: true
+  },
+  popover: {
+    k7Eaqz: "xrzjruh",
+    keoZOQ: "xcsaf9d",
+    $$css: true
+  },
+  content: {
+    kB7OPa: "x9f619",
+    kskxy: "xpnbb6b",
+    kVQacm: "xysyzu8",
+    kmVPX3: "x1b2ylru",
+    $$css: true
+  },
+  sm: {
+    kAzted: "x1gdqauq",
+    $$css: true
+  },
+  md: {
+    kAzted: "x1uogy3y",
+    $$css: true
+  },
+  lg: {
+    kAzted: "x1xf4nls",
+    $$css: true
+  },
+  disabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  focusRing: {
+    k8PahR: "x1oqel4m",
+    kfQpEX: "x1fanpfn",
+    $$css: true
+  }
+};
+/**
+ * A selector shell for rich, custom selection surfaces.
+ *
+ * ComplexSelector owns the field, trigger, popover, focus restore, and async
+ * change action flow. Consumers provide the dialog content as a render function,
+ * using the supplied `value`, `onChange`, and `close` helpers to compose the
+ * right accessible structure for the custom selector.
+ *
+ * @example
+ * ```
+ * <ComplexSelector
+ *   label="Fruit"
+ *   value={value}
+ *   onChange={setValue}
+ *   triggerLabel={`${value.fruit} ${value.ripeness}`}>
+ *   {(value, onChange, close) => (
+ *     <FruitGrid
+ *       value={value}
+ *       onChange={nextValue => {
+ *         onChange(nextValue);
+ *         close();
+ *       }}
+ *     />
+ *   )}
+ * </ComplexSelector>
+ * ```
+ */
+export function ComplexSelector({
+  label,
+  value,
+  onChange,
+  changeAction,
+  children,
+  triggerLabel,
+  placeholder: placeholderFromProps,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  isLoading = false,
+  status,
+  statusVariant = 'attached',
+  labelTooltip,
+  size = 'md',
+  width,
+  placement = 'below',
+  contentXstyle,
+  xstyle,
+  className,
+  style,
+  'data-testid': testId,
+  ...props
+}) {
+  const t = useTranslator();
+  const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
+  const triggerId = useId();
+  const labelId = useId();
+  const contentId = useId();
+  const descriptionId = useId();
+  const statusMessageId = useId();
+  const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(id => id != null).join(' ') || undefined;
+  const [isPending, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || isPending;
+  const popover = usePopover({
+    dialogLabel: label,
+    hasCloseButton: false,
+    hasAutoFocus: true,
+    onHide: () => {
+      document.getElementById(triggerId)?.focus();
+    }
+  });
+  const commitValue = useCallback(nextValue => {
+    onChange?.(nextValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(nextValue);
+        await changeAction(nextValue);
+      });
+    }
+  }, [changeAction, onChange, setOptimisticValue, startTransition]);
+  const triggerContent = triggerLabel ?? placeholder;
+  const content = /*#__PURE__*/_jsx("div", {
+    id: contentId,
+    ...stylex.props(styles.content, contentXstyle),
+    children: children(optimisticValue, commitValue, popover.hide, {
+      isOpen: popover.isOpen,
+      isBusy,
+      triggerId,
+      contentId
+    })
+  });
+  const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: popover.triggerRef,
+      "data-testid": testId,
+      ...props,
+      onClick: () => {
+        if (!isDisabled) {
+          popover.toggle();
+        }
+      },
+      ...mergeProps(themeProps('complex-selector', {
+        size,
+        status: status?.type ?? null
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, styles[size], styles.focusRing, isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
+      children: [/*#__PURE__*/_jsx("button", {
+        id: triggerId,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": popover.isOpen,
+        "aria-controls": contentId,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": labelId,
+        "aria-required": isRequired ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        disabled: isDisabled,
+        onKeyDown: event => {
+          if (event.key === 'ArrowDown' && !popover.isOpen && !isDisabled) {
+            event.preventDefault();
+            popover.show();
+          }
+        },
+        ...{
+          className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz xh6dtrn"
+        },
+        children: /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x1iyjqo2 xeuugli xb3r6kr xlyipyv xuxw1ft x1yc453h"
+          },
+          children: triggerContent
+        })
+      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        size: "sm"
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
+          },
+          1: {
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
+          }
+        }[!!popover.isOpen << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronDown",
+          size: "sm",
+          color: "inherit",
+          ...themeProps('complex-selector-indicator-icon', {
+            state: popover.isOpen ? 'expanded' : 'collapsed'
+          })
+        })
+      })]
+    }), popover.render(content, {
+      placement,
+      alignment: 'start',
+      xstyle: [styles.popover, layerAnimations[placement]]
+    })]
+  });
+  return /*#__PURE__*/_jsx(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: triggerId,
+    descriptionID: description ? descriptionId : undefined,
+    labelID: labelId,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageId : undefined
+    } : undefined,
+    statusVariant: statusVariant,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: selectorContent
+  });
+}
+ComplexSelector.displayName = 'ComplexSelector';

package/dist/ComplexSelector/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @file index.ts
+ * @output Exports ComplexSelector and types
+ * @position Public API entry point
+ */
+export { ComplexSelector, type ComplexSelectorProps, type ComplexSelectorRenderState, type ComplexSelectorSize, type ComplexSelectorStatus, } from './ComplexSelector';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,GAC3B,MAAM,mBAAmB,CAAC"}

package/dist/ComplexSelector/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @output Exports ComplexSelector and types
+ * @position Public API entry point
+ */
+export { ComplexSelector } from "./ComplexSelector.js";

package/dist/Lightbox/Lightbox.d.ts

@@ -65,8 +65,8 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
      */
     onIndexChange?: (index: number) => void;
     /**
-     * Enable zoom on double-click (images only).
-     * When zoomed, drag to pan.
+     * Enable zoom on double-click, or Enter/Space/`+`/`-` via keyboard
+     * (images only). When zoomed, drag or use arrow keys to pan.
      * @default false
      */
     hasZoom?: boolean;
@@ -81,7 +81,9 @@ export interface LightboxProps extends BaseProps<HTMLDialogElement> {
  *
  * Supports single image and gallery modes. In gallery mode, provides
  * prev/next navigation via buttons and arrow keys. Optionally supports
- * zoom (double-click to toggle 2x) and pan (drag when zoomed).
+ * zoom (double-click, Enter/Space on the image, or `+`/`-` to toggle 2x)
+ * and pan (drag or arrow keys when zoomed; arrows navigate the gallery
+ * when not zoomed).
  *
  * Uses the native `<dialog>` element with `showModal()` for focus
  * trapping and top-layer placement. Dismiss via Escape, close button,

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAwVf;yBAxWe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA6JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAyYf;yBAzZe,QAAQ"}