@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

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":"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"}

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/ContextMenu/ContextMenu.d.ts

@@ -24,7 +24,7 @@
  * - /packages/core/src/ContextMenu/ContextMenu.test.tsx
  * - /packages/core/src/ContextMenu/index.ts
  * - /apps/storybook/stories/ContextMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/ContextMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ContextMenu/ (showcase blocks)
  */
 import React from 'react';
 import type { ReactNode } from 'react';
@@ -96,7 +96,7 @@ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
  * </ContextMenu>
  * ```
  */
-export declare function ContextMenu({ children, menuWidth, size, label: labelFromProps, isDisabled, onOpenChange, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...props }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenu({ children, menuWidth, size, label: labelFromProps, isDisabled, onOpenChange, ref, className, style, xstyle, triggerXstyle, 'data-testid': testId, ...rest }: ContextMenuProps): React.JSX.Element;
 export declare namespace ContextMenu {
     var displayName: string;
 }

package/dist/ContextMenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAmRlB;yBAjSe,WAAW"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AA0BrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAqDtC,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAwSlB;yBAtTe,WAAW"}

package/dist/ContextMenu/ContextMenu.js

@@ -27,7 +27,7 @@
  * - /packages/core/src/ContextMenu/ContextMenu.test.tsx
  * - /packages/core/src/ContextMenu/index.ts
  * - /apps/storybook/stories/ContextMenu.stories.tsx
- * - /packages/cli/templates/blocks/components/ContextMenu/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ContextMenu/ (showcase blocks)
  */
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -131,12 +131,20 @@ export function ContextMenu({
   xstyle,
   triggerXstyle,
   'data-testid': testId,
-  ...props
+  ...rest
 }) {
   const t = useTranslator();
   const label = labelFromProps ?? t('@astryx.contextMenu.label');
-  const items = ('items' in props ? props.items : undefined) ?? [];
-  const menuContent = 'menuContent' in props ? props.menuContent : undefined;
+  // Separate content props (union discriminant) from DOM pass-through attrs.
+  // The union means exactly one of items/menuContent exists in rest; destructure
+  // both so triggerProps contains only DOM-safe attributes.
+  const {
+    items: itemsProp,
+    menuContent: menuContentProp,
+    ...triggerProps
+  } = rest;
+  const items = itemsProp ?? [];
+  const menuContent = menuContentProp;
   const menuId = useId();
   // Cursor point in the trigger's local coordinate space (offset from the
   // trigger's top-left, in-flow). Stored here and written to the zero-size
@@ -253,12 +261,21 @@ export function ContextMenu({
       }
       return;
     }
+    // APG menu pattern: Tab closes the menu. Menu items are tabIndex={-1}
+    // so Tab would otherwise leak focus into the page while the menu stayed
+    // open (menus-5). Do NOT preventDefault — closing restores focus to the
+    // previously focused element, and the browser's default Tab then
+    // continues from there to the next element.
+    if (e.key === 'Tab') {
+      closeMenu();
+      return;
+    }
     if (typeahead.onKeyDown(e)) {
       e.preventDefault();
       return;
     }
     listNavKeyDown(e);
-  }, [listNavKeyDown, typeahead, ownsEvent]);
+  }, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
 
   // Place the zero-size cursor anchor at a point in the trigger's local
   // coordinate space and open the menu. Positioning the anchor inside the
@@ -316,12 +333,13 @@ export function ContextMenu({
     closeMenu,
     menuSize: size
   }), [closeMenu, size]);
-  const resolvedMenuContent = props.items !== undefined ? renderDropdownItems(items) : menuContent;
+  const resolvedMenuContent = itemsProp !== undefined ? renderDropdownItems(items) : menuContent;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       ref: mergeRefs(ref, triggerRef),
       onContextMenu: handleContextMenu,
       ...longPressHandlers,
+      ...triggerProps,
       "data-testid": testId,
       ...stylex.props(styles.trigger, ...(triggerXstyle ? Array.isArray(triggerXstyle) ? triggerXstyle : [triggerXstyle] : [])),
       children: [children, /*#__PURE__*/_jsx("span", {

package/dist/DateInput/DateInput.d.ts

@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 import { type InputStatus, type FieldStatusVariant } from '../Field';
-import { type ISODateString } from '../Calendar';
+import { type ISODateString, type DayOfWeek, type DayOfWeekName } from '../Calendar';
 import type { TimestampFormat } from '../Timestamp';
 declare const sizeStyles: Readonly<{
     readonly sm: Readonly<{
@@ -165,6 +165,13 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * @default 1
      */
     numberOfMonths?: 1 | 2;
+    /**
+     * First day of week in the calendar popover. Accepts a number
+     * (0 = Sunday … 6 = Saturday) or a three-letter day name ('sun'–'sat',
+     * case-insensitive).
+     * @default 0
+     */
+    weekStartsOn?: DayOfWeek | DayOfWeekName;
     /**
      * How the committed date value is displayed in the text field. Accepts a
      * named format reused from `Timestamp`'s `format` vocabulary (so the same
@@ -208,7 +215,7 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * />
  * ```
  */
-export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths, format, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
+export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, hasClear, numberOfMonths, weekStartsOn, format, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
 export declare namespace DateInput {
     var displayName: string;
 }

package/dist/DateInput/DateInput.d.ts.map

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

package/dist/DateInput/DateInput.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/DateInput/DateInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/DateInput/index.ts (exports if types change)
  * - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/DateInput/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DateInput/ (showcase blocks)
  */
 import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -106,6 +106,7 @@ export function DateInput({
   labelTooltip,
   hasClear = false,
   numberOfMonths = 1,
+  weekStartsOn,
   format = 'date_long',
   width,
   xstyle,
@@ -330,7 +331,8 @@ export function DateInput({
     ...rest,
     ...mergeProps(themeProps('date-input', {
       size,
-      status: status?.type ?? null
+      status: status?.type ?? null,
+      disabled: isDisabled ? 'disabled' : null
     }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
     children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
       id: inputLabelID,
@@ -441,7 +443,8 @@ export function DateInput({
       min: min,
       max: max,
       dateConstraints: dateConstraints,
-      numberOfMonths: numberOfMonths
+      numberOfMonths: numberOfMonths,
+      weekStartsOn: weekStartsOn
     }), {
       placement: 'below',
       alignment: 'start'

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -1,5 +1,5 @@
 import { type InputStatus, type FieldStatusVariant } from '../Field';
-import { type ISODateString, type DateRange } from '../Calendar';
+import { type ISODateString, type DateRange, type DayOfWeek, type DayOfWeekName } from '../Calendar';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
 export type { DateRange } from '../Calendar';
@@ -139,6 +139,13 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
      * @default 2
      */
     numberOfMonths?: 1 | 2;
+    /**
+     * First day of week in the calendar. Accepts a number
+     * (0 = Sunday … 6 = Saturday) or a three-letter day name ('sun'–'sat',
+     * case-insensitive).
+     * @default 0
+     */
+    weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 /**
  * A date range picker with a button trigger that opens a popover
@@ -156,7 +163,7 @@ export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defau
  * />
  * ```
  */
-export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
+export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
 export declare namespace DateRangeInput {
     var displayName: string;
 }