@astryxdesign/core 0.4.0 → 0.4.1

package/dist/DateRangeInput/DateRangeInput.js

@@ -30,9 +30,51 @@ import { mergeProps } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  presetButton: {
+    k1xSpc: "x1lliihq",
+    kzqmXN: "xh8yej3",
+    kmVPX3: "xtozwh",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kaIpWk: "xh6dtrn",
+    kWkggS: "xjbqb8w xe9uy6x",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kLWn49: "x1kq96og",
+    kMwMTN: "x1tgivj0",
+    kkrTdU: "x1ypdohk",
+    k9WMMc: "x1yc453h",
+    $$css: true
+  },
+  presetButtonActive: {
+    kWkggS: "xgcxg3y",
+    kMwMTN: "xqwr325",
+    $$css: true
+  }
+};
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -229,14 +271,7 @@ export function DateRangeInput({
         disabled: isEffectivelyDisabled,
         "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
         tabIndex: -1,
-        ...{
-          0: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-          },
-          1: {
-            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
-          }
-        }[!!isEffectivelyDisabled << 0],
+        ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "calendar",
           size: "sm",
@@ -311,14 +346,7 @@ export function DateRangeInput({
             ,
             "aria-current": isActive ? 'true' : undefined,
             onClick: () => handlePresetClick(preset),
-            ...{
-              0: {
-                className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn xjbqb8w xe9uy6x x9ynric xcr08ib x1kq96og x1tgivj0 x1ypdohk x1yc453h x1a2a7pz x1p25gnr"
-              },
-              1: {
-                className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn x9ynric xcr08ib x1kq96og x1ypdohk x1yc453h x1a2a7pz x1p25gnr xgcxg3y xqwr325"
-              }
-            }[!!isActive << 0],
+            ...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive),
             children: preset.label
           }, preset.label);
         })

package/dist/DateTimeInput/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA0BrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG;IACvC,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,4EAA4E;AAC5E,MAAM,MAAM,0BAA0B,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D,YAAY,EACV,WAAW,IAAI,mBAAmB,EAClC,eAAe,IAAI,uBAAuB,GAC3C,MAAM,UAAU,CAAC;AA4ElB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,GAAG,CAAC,EAAE,iBAAiB,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,uBAAuB,CAAC;IAErC;;;;OAIG;IACH,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAqCD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,aAAiB,EACjB,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,cAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,kBAAkB,+BA8oBpB;yBA/qBe,aAAa"}

package/dist/DateTimeInput/DateTimeInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
@@ -18,7 +18,7 @@
 import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
@@ -31,8 +31,10 @@ import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 
 /** Supported minute increments for arrow-key stepping of the time field. */
@@ -43,6 +45,23 @@ const styles = {
     kOIVth: "x1txdalj",
     $$css: true
   },
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
+  iconButtonDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
   dateWrapper: {
     kUk6DE: "x98rzlu",
     kCS8Yb: "x1r8uery",
@@ -151,6 +170,10 @@ export function DateTimeInput({
   ...rest
 }) {
   const t = useTranslator();
+  // Speaks arrow-key stepping results through the persistent live regions:
+  // stepping programmatically rewrites a plain textbox's value, which screen
+  // readers do not announce on their own (WCAG 4.1.2).
+  const announce = useAnnounce();
   const placeholder = placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
   const timePlaceholder = timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
   const size = useSize(sizeProp, 'md');
@@ -465,10 +488,13 @@ export function DateTimeInput({
         const combined = combineDateTime(valueParts.date, newTime);
         if (combined) {
           fireChange(combined);
+          // Screen readers do not announce the programmatic value rewrite,
+          // so speak the new time explicitly (WCAG 4.1.2).
+          announce(formatDisplayTime(newTime, hasSeconds));
         }
       }
     }
-  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange]);
+  }, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime]);
 
   // --- Clear ---
   const handleClear = useCallback(() => {
@@ -521,14 +547,7 @@ export function DateTimeInput({
           onClick: handleCalendarToggle,
           disabled: isEffectivelyDisabled,
           "aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
-          ...{
-            0: {
-              className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-            },
-            1: {
-              className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
-            }
-          }[!!isEffectivelyDisabled << 0],
+          ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "calendar",
             size: "sm",
@@ -580,7 +599,7 @@ export function DateTimeInput({
           as: "div",
           role: "alert",
           "aria-live": "assertive",
-          children: !isDateInputValid ? 'Invalid date' : ''
+          children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
         }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
           label: t('@astryx.dateInput.clear', {
             label
@@ -648,7 +667,7 @@ export function DateTimeInput({
           as: "div",
           role: "alert",
           "aria-live": "assertive",
-          children: !isTimeInputValid ? 'Invalid time' : ''
+          children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
         })]
       })]
     }), popover.render(/*#__PURE__*/_jsx(Calendar, {

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -58,7 +58,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, xstyle, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
 export declare namespace DropdownMenuRadioGroup {
     var displayName: string;
 }

package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA1Be,sBAAsB"}
+{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA3Be,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -20,6 +20,14 @@ import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { DropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  group: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  }
+};
 /**
  * A single-select group of radio menu items (role="group" of menuitemradio).
  *
@@ -43,6 +51,7 @@ export function DropdownMenuRadioGroup({
   label,
   hasCloseOnSelect = true,
   children,
+  xstyle,
   className,
   style,
   ...rest
@@ -56,9 +65,7 @@ export function DropdownMenuRadioGroup({
     ...rest,
     role: "group",
     "aria-label": label,
-    ...mergeProps({
-      className: "x78zum5 xdt5ytf x1lsbc85"
-    }, {
+    ...mergeProps(stylex.props(styles.group, xstyle), {
       className,
       style
     }),

package/dist/Field/PanelSearchInput.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @file PanelSearchInput.tsx
+ * @input Uses React, StyleX, Icon, InputClearButton, theme tokens
+ * @output Exports PanelSearchInput — the search row that sits at the top of a
+ *   dropdown panel
+ * @position Shared internal primitive; used by Selector and MultiSelector
+ *
+ * A dropdown panel is already a bordered, elevated surface. Nesting a bordered
+ * TextInput inside it draws a second box within that box, so the field reads as
+ * a control dropped into the menu rather than part of it. This row is the
+ * seamless alternative — magnifier, borderless input, clear button — separated
+ * from the options by a divider the panel owns.
+ *
+ * The field is shaped like the option rows under it rather than like a form
+ * input: same inset from the panel edge, same `--radius-element` corners, same
+ * height. The focus ring is drawn on that rounded box, so focus reads as "this
+ * row of the panel" — the same visual language as an item's highlight — instead
+ * of ringing the whole panel header. It appears for keyboard focus only; see
+ * `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
+ *
+ *   ┌─ panel ──────────────────┐
+ *   │ ┌──────────────────────┐ │  ← field: rounded, inset, item-sized
+ *   │ │ ⌕  Search…         ✕ │ │
+ *   │ └──────────────────────┘ │
+ *   ├──────────────────────────┤  ← divider (full-bleed)
+ *   │ ┌──────────────────────┐ │
+ *   │ │ Apple                │ │  ← option row: same box
+ *
+ * The clear button is the shared `InputClearButton`, so the affordance and its
+ * ghost-button behavior match every other input's clear. It renders AFTER the
+ * input in DOM order: the selector components' Tab handling depends on that
+ * order to keep the popup open while focus moves onto it.
+ *
+ * Not exported from the package: it is an implementation detail of the panels
+ * that use it, not public API.
+ */
+import { type Ref } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>, 'onChange'> {
+    /** Ref forwarded to the input element (for focus management). */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Accessible name for the input. Rendered as `aria-label`: the panel has no
+     * visible label for the field, and a placeholder is not a reliable name.
+     */
+    label: string;
+    /** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
+    clearLabel: string;
+    /** Placeholder text shown while the query is empty. */
+    placeholder?: string;
+    /** The current query. */
+    value: string;
+    /** Called with the next query on every keystroke and on clear. */
+    onValueChange: (value: string) => void;
+    /** Key handler for the input itself. */
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    /** Focus handler for the input; runs after the ring's own bookkeeping. */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /** Blur handler for the input; runs after the ring's own bookkeeping. */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Key handler for the row. Events from the input are handled by `onKeyDown`;
+     * this one exists for keys pressed on the clear button, which has no other
+     * handler of its own.
+     */
+    onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+/**
+ * Search row for the top of a dropdown panel: magnifier, borderless input, and
+ * a clear button once a query is typed, in a rounded box shaped like the
+ * option rows beneath it.
+ *
+ * `className`/`style`/`xstyle` apply to the outer row (use them to match the
+ * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
+ * passes through to the `<input>`, so the caller owns the combobox wiring.
+ */
+export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
+export declare namespace PanelSearchInput {
+    var displayName: string;
+}
+//# sourceMappingURL=PanelSearchInput.d.ts.map

package/dist/Field/PanelSearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAmC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6E5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAkEvB;yBAjFe,gBAAgB"}

package/dist/Field/PanelSearchInput.js

@@ -0,0 +1,151 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file PanelSearchInput.tsx
+ * @input Uses React, StyleX, Icon, InputClearButton, theme tokens
+ * @output Exports PanelSearchInput — the search row that sits at the top of a
+ *   dropdown panel
+ * @position Shared internal primitive; used by Selector and MultiSelector
+ *
+ * A dropdown panel is already a bordered, elevated surface. Nesting a bordered
+ * TextInput inside it draws a second box within that box, so the field reads as
+ * a control dropped into the menu rather than part of it. This row is the
+ * seamless alternative — magnifier, borderless input, clear button — separated
+ * from the options by a divider the panel owns.
+ *
+ * The field is shaped like the option rows under it rather than like a form
+ * input: same inset from the panel edge, same `--radius-element` corners, same
+ * height. The focus ring is drawn on that rounded box, so focus reads as "this
+ * row of the panel" — the same visual language as an item's highlight — instead
+ * of ringing the whole panel header. It appears for keyboard focus only; see
+ * `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
+ *
+ *   ┌─ panel ──────────────────┐
+ *   │ ┌──────────────────────┐ │  ← field: rounded, inset, item-sized
+ *   │ │ ⌕  Search…         ✕ │ │
+ *   │ └──────────────────────┘ │
+ *   ├──────────────────────────┤  ← divider (full-bleed)
+ *   │ ┌──────────────────────┐ │
+ *   │ │ Apple                │ │  ← option row: same box
+ *
+ * The clear button is the shared `InputClearButton`, so the affordance and its
+ * ghost-button behavior match every other input's clear. It renders AFTER the
+ * input in DOM order: the selector components' Tab handling depends on that
+ * order to keep the popup open while focus moves onto it.
+ *
+ * Not exported from the package: it is an implementation detail of the panels
+ * that use it, not public API.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Icon } from "../Icon/index.js";
+import { InputClearButton } from "./InputClearButton.js";
+import { mergeProps } from "../utils/index.js";
+import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  wrapper: {
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "x7a5moj",
+    $$css: true
+  },
+  icon: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kmuXW: "x2lah0s",
+    $$css: true
+  }
+};
+/**
+ * Search row for the top of a dropdown panel: magnifier, borderless input, and
+ * a clear button once a query is typed, in a rounded box shaped like the
+ * option rows beneath it.
+ *
+ * `className`/`style`/`xstyle` apply to the outer row (use them to match the
+ * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
+ * passes through to the `<input>`, so the caller owns the combobox wiring.
+ */
+export function PanelSearchInput({
+  ref,
+  label,
+  clearLabel,
+  placeholder,
+  value,
+  onValueChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  onContainerKeyDown,
+  xstyle,
+  className,
+  style,
+  ...props
+}) {
+  // `:focus-visible` matches a text input focused by POINTER as well (CSS
+  // Selectors 4, verified in Chromium), so it cannot express "keyboard focus"
+  // by itself. Gate it on how the user last interacted; the CSS condition
+  // stays `:focus-visible`, this only narrows it.
+  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+  const handleFocus = useCallback(e => {
+    setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsKeyboardFocus(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const handleClear = useCallback(() => {
+    onValueChange('');
+    // Clearing puts the caret back where the user was typing, matching
+    // TextInput's built-in clear.
+    if (typeof ref === 'object' && ref?.current) {
+      ref.current.focus();
+    }
+  }, [onValueChange, ref]);
+  return /*#__PURE__*/_jsx("div", {
+    onKeyDown: onContainerKeyDown,
+    ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
+    children: /*#__PURE__*/_jsxs("div", {
+      "data-keyboard-focus": isKeyboardFocus ? 'true' : undefined,
+      ...{
+        0: {
+          className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92"
+        },
+        1: {
+          className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92 x1gnnqk1 x1btxeh5"
+        }
+      }[!!isKeyboardFocus << 0],
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "search",
+        size: "sm",
+        color: "secondary",
+        xstyle: styles.icon
+      }), /*#__PURE__*/_jsx("input", {
+        ref: ref,
+        type: "text",
+        "aria-label": label,
+        placeholder: placeholder,
+        value: value,
+        onChange: e => onValueChange(e.target.value),
+        onKeyDown: onKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...{
+          className: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
+        },
+        ...props
+      }), value !== '' && /*#__PURE__*/_jsx(InputClearButton, {
+        label: clearLabel,
+        onClick: handleClear
+      })]
+    })
+  });
+}
+PanelSearchInput.displayName = 'PanelSearchInput';

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA+M9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA2ZhB;yBAtbe,SAAS"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAwN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}

package/dist/FileInput/FileInput.js

@@ -40,11 +40,11 @@ function formatFileSize(bytes) {
   }
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
+function validateFiles(files, accept, maxSize, maxFiles, isMultiple, t) {
   const errors = [];
   let valid = files;
   if (accept) {
-    const acceptedTypes = accept.split(',').map(t => t.trim().toLowerCase());
+    const acceptedTypes = accept.split(',').map(s => s.trim().toLowerCase());
     valid = valid.filter(file => {
       const matches = acceptedTypes.some(type => {
         if (type.startsWith('.')) {
@@ -56,7 +56,9 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
         return file.type.toLowerCase() === type;
       });
       if (!matches) {
-        errors.push(`"${file.name}" is not an accepted file type`);
+        errors.push(t('@astryx.fileInput.errorInvalidType', {
+          fileName: file.name
+        }));
       }
       return matches;
     });
@@ -64,14 +66,19 @@ function validateFiles(files, accept, maxSize, maxFiles, isMultiple) {
   if (maxSize != null) {
     valid = valid.filter(file => {
       if (file.size > maxSize) {
-        errors.push(`"${file.name}" exceeds ${formatFileSize(maxSize)} limit`);
+        errors.push(t('@astryx.fileInput.errorMaxSize', {
+          fileName: file.name,
+          maxSize: formatFileSize(maxSize)
+        }));
         return false;
       }
       return true;
     });
   }
   if (isMultiple && maxFiles != null && valid.length > maxFiles) {
-    errors.push(`Maximum ${maxFiles} files allowed`);
+    errors.push(t('@astryx.fileInput.errorMaxFiles', {
+      maxFiles
+    }));
     valid = valid.slice(0, maxFiles);
   }
   return {
@@ -248,7 +255,7 @@ export function FileInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, conveysRequired ? requiredID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
-  const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
+  const defaultPlaceholder = isMultiple ? t('@astryx.fileInput.placeholderMultiple') : t('@astryx.fileInput.placeholder');
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
   const handleFiles = useCallback(fileList => {
     if (isDisabled) {
@@ -257,7 +264,7 @@ export function FileInput({
     const {
       valid,
       errors
-    } = validateFiles(fileList, accept, maxSize, maxFiles, isMultiple);
+    } = validateFiles(fileList, accept, maxSize, maxFiles, isMultiple, t);
     if (errors.length > 0) {
       setValidationError(errors[0]);
     } else {
@@ -275,14 +282,18 @@ export function FileInput({
     // status mounts, so only announce the attach here (do not
     // double-announce errors).
     if (errors.length === 0) {
-      announce(valid.length === 1 ? `1 file selected: ${valid[0].name}` : `${valid.length} files selected`);
+      announce(valid.length === 1 ? t('@astryx.fileInput.fileSelected', {
+        fileName: valid[0].name
+      }) : t('@astryx.fileInput.filesSelected', {
+        count: valid.length
+      }));
     }
     if (changeAction) {
       startTransition(async () => {
         await changeAction(result);
       });
     }
-  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition, announce]);
+  }, [accept, isDisabled, isMultiple, maxFiles, maxSize, onChange, changeAction, startTransition, announce, t]);
   const handleInputChange = useCallback(e => {
     const fileList = Array.from(e.target.files ?? []);
     handleFiles(fileList);
@@ -388,7 +399,7 @@ export function FileInput({
         ...{
           className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x2b8uid x87ps6o"
         },
-        children: isDragOver ? 'Drop files here' : displayPlaceholder
+        children: isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder
       })]
     });
   };

package/dist/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA6EX;yBA/Fe,IAAI"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA6EX;yBA/Fe,IAAI"}

package/dist/Grid/Grid.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Grid.tsx
  * @input Uses React, stylex, spacing tokens
@@ -14,6 +12,7 @@
  * - /apps/storybook/stories/Grid.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Grid/ (showcase blocks)
  */
+
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAC;AAElE,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AAC5B,YAAY,EAAC,SAAS,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,QAAQ,CAAC;AAElE,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC"}

package/dist/Grid/index.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Grid.tsx and GridSpan.tsx
@@ -10,5 +8,6 @@
  *
  * SYNC: When modified, update /packages/core/src/Grid/Grid.doc.mjs
  */
+
 export { Grid } from "./Grid.js";
 export { GridSpan } from "./GridSpan.js";