@astryxdesign/core 0.4.2-canary.bb07062 → 0.4.2-canary.e60974e

package/dist/ComplexSelector/ComplexSelector.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file ComplexSelector.tsx
- * @input Uses React, StyleX, Field, usePopover
- * @output Exports ComplexSelector component for custom selector surfaces
+ * @input Uses React, StyleX, Field, Icon slots, Layer positioning, and usePopover
+ * @output Exports a rich-selector shell with exact token-sized input and ghost triggers, plus an imperative open/close handle
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
@@ -9,12 +9,16 @@
  * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
  * - /packages/core/src/ComplexSelector/index.ts
  * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/ComplexSelector/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { BaseProps } from '../BaseProps';
 import { type FieldStatusVariant } from '../Field';
+import { type IconType } from '../Icon';
+import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
 import type { SizeValue } from '../utils/types';
+export type ComplexSelectorVariant = 'input' | 'ghost';
 export type ComplexSelectorSize = 'sm' | 'md' | 'lg';
 export interface ComplexSelectorRenderState {
     /** Whether the selector surface is open. */
@@ -26,6 +30,24 @@ export interface ComplexSelectorRenderState {
     /** ID of the popup content container. */
     contentId: string;
 }
+/**
+ * Imperative control surface for ComplexSelector, accessed via the `handleRef`
+ * prop. Methods drive the same popover machinery as the built-in trigger, so
+ * they respect focus restoration, light dismiss, and Escape. Prefer these
+ * callbacks over mirroring open state in the parent — the selector owns its
+ * visibility, and imperative calls avoid the focus-management pitfalls of
+ * syncing an external `isOpen` prop.
+ */
+export interface ComplexSelectorHandle {
+    /** Open the selector surface. No-op when disabled or already open. */
+    open(): void;
+    /** Close the selector surface. Restores focus to the trigger. */
+    close(): void;
+    /** Toggle the selector surface open or closed. */
+    toggle(): void;
+    /** Whether the selector surface is currently open. Reads live state. */
+    isOpen(): boolean;
+}
 export interface ComplexSelectorStatus {
     type: 'warning' | 'error' | 'success';
     message?: string;
@@ -65,10 +87,22 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
     labelTooltip?: string;
     /** Trigger and field size. */
     size?: ComplexSelectorSize;
+    /** Visual trigger style. Ghost matches toolbar buttons. */
+    variant?: ComplexSelectorVariant;
+    /** Icon displayed at the start of the trigger. */
+    startIcon?: ReactNode | IconType;
     /** Width of the field. */
     width?: SizeValue;
     /** Popup placement. */
-    placement?: 'above' | 'below' | 'start' | 'end';
+    placement?: LayerPlacement;
+    /** Popup alignment along the placement axis. */
+    alignment?: LayerAlignment;
+    /**
+     * Imperative handle for programmatic open/close control. Exposes open,
+     * close, toggle, and the isOpen query. Use this instead of mirroring open
+     * state in the parent — the selector owns its visibility.
+     */
+    handleRef?: React.Ref<ComplexSelectorHandle>;
     /** StyleX styles for the popup content container. */
     contentXstyle?: StyleXStyles;
     /** Test ID for the trigger container. */
@@ -101,7 +135,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
  * </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, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
+export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
 export declare namespace ComplexSelector {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}

package/dist/ComplexSelector/ComplexSelector.js

@@ -4,8 +4,8 @@
 
 /**
  * @file ComplexSelector.tsx
- * @input Uses React, StyleX, Field, usePopover
- * @output Exports ComplexSelector component for custom selector surfaces
+ * @input Uses React, StyleX, Field, Icon slots, Layer positioning, and usePopover
+ * @output Exports a rich-selector shell with exact token-sized input and ghost triggers, plus an imperative open/close handle
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
@@ -13,17 +13,18 @@
  * - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
  * - /packages/core/src/ComplexSelector/index.ts
  * - /apps/storybook/stories/ComplexSelector.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/ComplexSelector/ (showcase blocks)
  */
-import React, { useCallback, useId, useOptimistic, useTransition } from 'react';
+import React, { useCallback, useId, useImperativeHandle, useOptimistic, useRef, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Field, inputWrapperStyles } from "../Field/index.js";
-import { Icon } from "../Icon/index.js";
+import { Icon, renderIconSlot } 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 { colorVars, durationVars, easeVars, fontWeightVars, radiusVars, sizeVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { composeEventHandlers } from "../utils/composeEventHandlers.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
@@ -82,6 +83,22 @@ const styles = {
     kMwMTN: "xv1l7n4",
     $$css: true
   },
+  triggerGhost: {
+    kzqmXN: "x14atkfc",
+    kMzoRj: "xc342km",
+    kWkggS: "xjbqb8w",
+    kKwaWg: "x1ilzqfv xq8i9tn",
+    kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
+    k63SB2: "x1e4wzip",
+    k1ekBW: "xrafxwg",
+    k3aq6I: "x3oybdh xk4oym4",
+    $$css: true
+  },
+  triggerGhostDisabled: {
+    kKwaWg: "x18o3ruo",
+    k3aq6I: "x1c071of x1pdlv7q",
+    $$css: true
+  },
   triggerIcon: {
     kmuXW: "x2lah0s",
     $$css: true
@@ -109,15 +126,15 @@ const styles = {
     $$css: true
   },
   sm: {
-    kAzted: "x1gdqauq",
+    kZKoxP: "x6k0iem",
     $$css: true
   },
   md: {
-    kAzted: "x1uogy3y",
+    kZKoxP: "x1ueg155",
     $$css: true
   },
   lg: {
-    kAzted: "x1xf4nls",
+    kZKoxP: "xssyfek",
     $$css: true
   },
   disabled: {
@@ -125,6 +142,16 @@ const styles = {
     $$css: true
   }
 };
+
+/**
+ * Imperative control surface for ComplexSelector, accessed via the `handleRef`
+ * prop. Methods drive the same popover machinery as the built-in trigger, so
+ * they respect focus restoration, light dismiss, and Escape. Prefer these
+ * callbacks over mirroring open state in the parent — the selector owns its
+ * visibility, and imperative calls avoid the focus-management pitfalls of
+ * syncing an external `isOpen` prop.
+ */
+
 /**
  * A selector shell for rich, custom selection surfaces.
  *
@@ -170,8 +197,12 @@ export function ComplexSelector({
   statusVariant = 'attached',
   labelTooltip,
   size = 'md',
+  variant = 'input',
+  startIcon,
   width,
   placement = 'below',
+  alignment = 'start',
+  handleRef,
   contentXstyle,
   xstyle,
   className,
@@ -182,28 +213,62 @@ export function ComplexSelector({
 }) {
   const t = useTranslator();
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
+  const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
   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 triggerRef = useRef(null);
+  const lastHideTimeRef = useRef(0);
   const [isPending, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || isPending;
+  const handlePopoverHide = useCallback(() => {
+    lastHideTimeRef.current = Date.now();
+    triggerRef.current?.focus();
+  }, []);
   const popover = usePopover({
     dialogLabel: label,
     hasCloseButton: false,
     hasAutoFocus: true,
-    // The popup's theme target belongs on the SURFACE — the element painting
-    // background, radius and elevation — which `usePopover` owns. Rendered on
-    // the content box below it, a theme's background or radius rule paints the
-    // wrong box.
     surfaceTarget: 'complex-selector-popup',
-    onHide: () => {
-      document.getElementById(triggerId)?.focus();
-    }
+    onHide: handlePopoverHide
   });
+  const isOpen = popover.isOpen;
+  const handleTriggerClick = useCallback(() => {
+    if (isDisabled || Date.now() - lastHideTimeRef.current < 50) {
+      return;
+    }
+    if (popover.isOpen) {
+      popover.hide();
+    } else {
+      popover.show();
+    }
+  }, [isDisabled, popover]);
+  const close = useCallback(() => {
+    popover.hide();
+  }, [popover]);
+  useImperativeHandle(handleRef, () => ({
+    open: () => {
+      if (!isDisabled) {
+        popover.show();
+      }
+    },
+    close: () => popover.hide(),
+    toggle: () => {
+      if (isDisabled) {
+        return;
+      }
+      if (popover.isOpen) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    isOpen: () => popover.isOpen
+  }), [isDisabled, popover]);
   const commitValue = useCallback(nextValue => {
     onChange?.(nextValue);
     if (changeAction) {
@@ -217,8 +282,8 @@ export function ComplexSelector({
   const content = /*#__PURE__*/_jsx("div", {
     id: contentId,
     ...stylex.props(styles.content, contentXstyle),
-    children: children(optimisticValue, commitValue, popover.hide, {
-      isOpen: popover.isOpen,
+    children: children(optimisticValue, commitValue, close, {
+      isOpen,
       isBusy,
       triggerId,
       contentId
@@ -229,25 +294,21 @@ export function ComplexSelector({
       ref: popover.triggerRef,
       "data-testid": testId,
       ...props,
-      onClick: composeEventHandlers(onClickProp, () => {
-        if (!isDisabled) {
-          popover.toggle();
-        }
-      }),
+      onClick: composeEventHandlers(onClickProp, handleTriggerClick),
       ...mergeProps(themeProps('complex-selector', {
+        variant,
         size,
         status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, styles[size],
-      // The ring belongs to the wrapper (the focusable `<button>` sits
-      // inside it), but it must still be a KEYBOARD ring: `:focus-within`
-      // matched a mouse click on the trigger and drew the outline for
-      // pointer users too. `focusWithin` here is `:has(:focus-visible)`.
-      focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("button", {
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, styles[size], variant === 'input' && focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, xstyle), className, style),
+      children: [startIcon && renderIconSlot(startIcon, {
+        size: 'sm',
+        color: 'secondary'
+      }), /*#__PURE__*/_jsx("button", {
+        ref: triggerRef,
         id: triggerId,
         type: "button",
         "aria-haspopup": "dialog",
-        "aria-expanded": popover.isOpen,
+        "aria-expanded": isOpen,
         "aria-controls": contentId,
         "aria-describedby": ariaDescribedBy,
         "aria-labelledby": labelId,
@@ -256,7 +317,7 @@ export function ComplexSelector({
         "aria-busy": isBusy || undefined,
         disabled: isDisabled,
         onKeyDown: event => {
-          if (event.key === 'ArrowDown' && !popover.isOpen && !isDisabled) {
+          if (event.key === 'ArrowDown' && !isOpen && !isDisabled) {
             event.preventDefault();
             popover.show();
           }
@@ -281,14 +342,14 @@ export function ComplexSelector({
         // IS the trigger's icon element — one node carrying the box, the
         // color, the rotation, and the theme target.
         ,
-        xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen],
+        xstyle: [styles.triggerIcon, styles.triggerIconRotation, isOpen && styles.triggerIconOpen],
         ...themeProps('complex-selector-indicator-icon', {
-          state: popover.isOpen ? 'expanded' : 'collapsed'
+          state: isOpen ? 'expanded' : 'collapsed'
         })
       })]
     }), popover.render(content, {
       placement,
-      alignment: 'start',
+      alignment,
       offset: spacingVars['--spacing-1'],
       xstyle: [styles.popover, layerAnimations[placement]]
     })]
@@ -308,7 +369,7 @@ export function ComplexSelector({
       message: status.message,
       messageID: status.message ? statusMessageId : undefined
     } : undefined,
-    statusVariant: statusVariant,
+    statusVariant: effectiveStatusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: selectorContent

package/dist/ComplexSelector/index.d.ts

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

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

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

package/dist/ComplexSelector/index.js

@@ -4,7 +4,7 @@
 
 /**
  * @file index.ts
- * @output Exports ComplexSelector and types
+ * @output Exports ComplexSelector and its trigger-size contract types
  * @position Public API entry point
  */
 export { ComplexSelector } from "./ComplexSelector.js";