@astryxdesign/core 0.1.8 → 0.1.9-canary.09e9ddd

package/dist/Thumbnail/Thumbnail.js

@@ -4,14 +4,18 @@
 
 /**
  * @file Thumbnail.tsx
- * @input Uses React, stylex, Button, Skeleton, Spinner, MediaTheme, useImageMode
+ * @input Uses React, stylex, Button, Skeleton, Spinner
  * @output Exports Thumbnail component, ThumbnailProps
  * @position Core implementation; consumed by index.ts
  *
  * Square preview card for image attachments. Shows a skeleton shimmer while
  * the image loads, the image on success, or a placeholder on failure.
- * Uses useImageMode (APCA) to detect image luminance so the overlaid
- * remove button always has sufficient contrast.
+ * The overlaid remove button sits on a fixed --color-overlay scrim with an
+ * --color-on-dark icon so it always has sufficient contrast against the image.
+ *
+ * Images without `alt` are explicitly decorative (alt="" +
+ * role="presentation" + aria-hidden, matching Avatar). A dev-time warning
+ * fires once when `src` is set with no `alt` and no other name source.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Thumbnail/Thumbnail.doc.mjs
@@ -22,26 +26,19 @@
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, radiusVars, spacingVars, shadowVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
+import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import { MediaTheme } from "../theme/MediaTheme.js";
-import { useImageMode } from "../hooks/useImageMode.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
-
-/** Sample the region behind the remove button (20px button, 4px inset, in 64px container). */
+import "./thumbnail.markers.stylex.js";
+import { thumbnailScope } from "./thumbnail.markers.stylex.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const BUTTON_REGION = {
-  x: 0.5,
-  y: 0.06,
-  width: 0.44,
-  height: 0.44
-};
 // =============================================================================
 // Styles
 // =============================================================================
@@ -56,14 +53,44 @@ const styles = {
     kHBbk8: "xc8icb0",
     $$css: true
   },
+  imageContainer: {
+    kVAEAm: "x1n2onr6",
+    kzqmXN: "xh8yej3",
+    kOBAk4: "x1plog1",
+    kaIpWk: "xh6dtrn",
+    kVQacm: "xb3r6kr",
+    kWkggS: "x17x4s8c",
+    $$css: true
+  },
+  interactive: {
+    kkrTdU: "x1ypdohk",
+    kI3sdo: "x1irc7jg",
+    kInvED: "x1wfwxd8 xdjuwb3",
+    $$css: true
+  },
+  overlay: {
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xarstr8",
+    kUfP38: "x1k48kgn",
+    kloYau: "x2q1x1w",
+    kRicXK: "x1ywzrc5",
+    kPNhGg: "x97pup0",
+    kA8PQs: "x1dlmc9c",
+    ks3ayO: "xyhc2n1",
+    kAcZsS: "x1k7wiig",
+    $$css: true
+  },
+  hoverOnPointer: {
+    kJs8I2: "xi14tyy",
+    $$css: true
+  },
   removeButtonOverrides: {
-    kVAEAm: "x10l6tqk",
-    k87sOh: "x8d4r5l",
-    kCIrl2: "xs7l08f",
-    kY2c9j: "x1vjfegm",
     "--_button-radius": "xh8ntw8",
     kZKoxP: "x1qx5ct2",
     k7Eaqz: "xt4ypqs",
+    kWkggS: "x1u4601x",
+    kMwMTN: "x9e3rv5",
     $$css: true
   },
   disabled: {
@@ -99,15 +126,18 @@ function ImagePlaceholder() {
  *
  * Shows a skeleton shimmer while the image loads, the image on success, or
  * a placeholder icon on failure / when no src is provided. An overlaid
- * remove button appears when `onRemove` is set.
+ * remove button appears when `onRemove` is set — revealed on hover or
+ * keyboard focus by default (`showRemoveOn`), or always shown.
  *
- * Uses `useImageMode` (APCA) to detect image luminance and `MediaTheme`
- * to ensure the remove button always has sufficient contrast against the image.
+ * The remove button uses a fixed `--color-overlay` scrim with an
+ * `--color-on-dark` icon so it stays legible on any image without sampling
+ * the image's luminance.
  *
  * @example
  * ```
  * <Thumbnail src="/photo.jpg" alt="Vacation photo" onRemove={() => {}} />
  * <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
+ * <Thumbnail src="/logo.png" alt="Logo" onRemove={() => {}} showRemoveOn="always" />
  * ```
  */
 export function Thumbnail({
@@ -118,6 +148,7 @@ export function Thumbnail({
   onClick,
   isLoading = false,
   isDisabled = false,
+  showRemoveOn = 'hover',
   xstyle,
   className,
   style,
@@ -126,21 +157,33 @@ export function Thumbnail({
   ...props
 }) {
   const t = useTranslator();
-  const imageMode = useImageMode(src, {
-    region: BUTTON_REGION,
-    fallback: null
-  });
   const hasSrc = src != null;
   const showSkeleton = isLoading && !hasSrc;
   const showImage = hasSrc && !showSkeleton;
   const showUploadOverlay = isLoading && hasSrc;
   const showPlaceholder = !isLoading && !hasSrc;
   const isInteractive = onClick != null && !isDisabled && !isLoading;
-  const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? 'thumbnail';
+  const hasRemove = onRemove != null && !isDisabled;
+  const isHoverReveal = hasRemove && showRemoveOn === 'hover';
+  const accessibleName = label && alt ? `${label} — ${alt}` : label ?? alt ?? t('@astryx.thumbnail.fallbackName');
+
+  // Without `alt`, the image is explicitly decorative rather than silently
+  // empty-alt, matching Avatar's handling of unnamed images.
+  const isImageDecorative = !alt;
+
+  // Dev-time guardrail: `src` with no `alt` hides the image from assistive
+  // technology. That is fine when the thumbnail is otherwise named — `label`
+  // (or a consumer-provided aria name) becomes the group's accessible name —
+  // but with no name source at all the group falls back to a generic
+  // "thumbnail".
+  const hasNameSource = alt != null || label != null || props['aria-label'] != null || props['aria-labelledby'] != null;
+  useDevWarning('Thumbnail', '`src` is set without `alt` or `label`. The image is ' + 'treated as decorative and hidden from assistive technology, and ' + 'the thumbnail falls back to a generic "thumbnail" name. Pass ' + '`alt` to describe the image content, or `label` (file name) to ' + 'name the thumbnail.', hasSrc && !hasNameSource);
   const imageContent = /*#__PURE__*/_jsxs(_Fragment, {
     children: [showImage && /*#__PURE__*/_jsx("img", {
       src: src,
       alt: alt ?? '',
+      role: isImageDecorative ? 'presentation' : undefined,
+      "aria-hidden": isImageDecorative || undefined,
       ...{
         className: "xh8yej3 x5yr21d xl1xv1r x1lliihq"
       }
@@ -153,22 +196,32 @@ export function Thumbnail({
       children: /*#__PURE__*/_jsx(ImagePlaceholder, {})
     })]
   });
-  const removeButtonEl = onRemove != null && !isDisabled ? /*#__PURE__*/_jsx(Button, {
-    icon: /*#__PURE__*/_jsx(Icon, {
-      icon: "close",
-      size: "xsm"
-    }),
-    label: t('@astryx.thumbnail.remove', {
-      accessibleName
-    }),
-    variant: "secondary",
-    size: "sm",
-    isIconOnly: true,
-    onClick: e => {
-      e.stopPropagation();
-      onRemove(e);
-    },
-    xstyle: styles.removeButtonOverrides
+  const removeButtonEl = hasRemove ? /*#__PURE__*/_jsx("div", {
+    ...{
+      0: {
+        className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556"
+      },
+      1: {
+        className: "x10l6tqk x8d4r5l xy3asu9 x1vjfegm x14ju556 xg01cxk xb7nc9r x1cyvi8a xhva3ql x19991ni xuedmi6 x12w9bfk xlr8y92"
+      }
+    }[!!isHoverReveal << 0],
+    children: /*#__PURE__*/_jsx(Button, {
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "close",
+        size: "xsm"
+      }),
+      label: t('@astryx.thumbnail.remove', {
+        accessibleName
+      }),
+      variant: "secondary",
+      size: "sm",
+      isIconOnly: true,
+      onClick: e => {
+        e.stopPropagation();
+        onRemove(e);
+      },
+      xstyle: styles.removeButtonOverrides
+    })
   }) : null;
   const thumbnail = /*#__PURE__*/_jsx("div", {
     ref: ref,
@@ -178,14 +231,7 @@ export function Thumbnail({
     ...mergeProps(themeProps('thumbnail'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
     ...props,
     children: /*#__PURE__*/_jsxs("div", {
-      ...{
-        0: {
-          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c"
-        },
-        1: {
-          className: "x1n2onr6 xh8yej3 x1plog1 xh6dtrn xb3r6kr x17x4s8c x1ypdohk x1kx2cm7 xuedmi6 xlr8y92 x1gnnqk1 xhouywz x1hc1fzr xzomjkg x1tmayz8 x1irc7jg x1wfwxd8 xdjuwb3"
-        }
-      }[!!isInteractive << 0],
+      ...stylex.props(styles.imageContainer, isHoverReveal && thumbnailScope, isInteractive && styles.interactive, isInteractive && styles.overlay, isInteractive && styles.hoverOnPointer),
       children: [isInteractive ? /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: onClick,
@@ -208,10 +254,7 @@ export function Thumbnail({
           size: "sm",
           shade: "onMedia"
         })
-      }), removeButtonEl != null && imageMode != null ? /*#__PURE__*/_jsx(MediaTheme, {
-        mode: imageMode,
-        children: removeButtonEl
-      }) : removeButtonEl]
+      }), removeButtonEl]
     })
   });
   if (label != null) {

package/dist/Thumbnail/thumbnail.markers.stylex.d.ts

@@ -0,0 +1,9 @@
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Scoped marker for Thumbnail ancestor selectors. Applied to the image
+ * container so the remove button's hover/focus reveal (`showRemoveOn="hover"`)
+ * responds only to this thumbnail — not to hover/focus state from an outer
+ * container the thumbnail happens to sit inside.
+ */
+export declare const thumbnailScope: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=thumbnail.markers.stylex.d.ts.map

package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/thumbnail.markers.stylex.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC3C,CAAC"}

package/dist/Thumbnail/thumbnail.markers.stylex.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker for Thumbnail ancestor selectors. Applied to the image
+ * container so the remove button's hover/focus reveal (`showRemoveOn="hover"`)
+ * responds only to this thumbnail — not to hover/focus state from an outer
+ * container the thumbnail happens to sit inside.
+ */
+export const thumbnailScope = {
+  x9jk0ni: "x9jk0ni",
+  $$css: true
+};

package/dist/TimeInput/TimeInput.d.ts

@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { type InputStatus } from '../Field';
+import { type InputStatus, type FieldStatusVariant } from '../Field';
 import { type ISOTimeString } from '../utils';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
@@ -144,6 +144,13 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * If message is provided, displays below the input.
      */
     status?: InputStatus;
+    /**
+     * How the status message is placed relative to the input.
+     * - 'attached': message overlaps directly below the input (bordered treatment)
+     * - 'detached': message floats below as a separate element with spacing
+     * @default 'attached'
+     */
+    statusVariant?: FieldStatusVariant;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
@@ -169,7 +176,7 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * />
  * ```
  */
-export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder: placeholderFromProps, size: sizeProp, status, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
+export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
 export declare namespace TimeInput {
     var displayName: string;
 }

package/dist/TimeInput/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA8D9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,CAAC;AAIhD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;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,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,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,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,UAAkB,EAClB,SAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,+BAuXhB;yBApZe,SAAS"}

package/dist/TimeInput/TimeInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TimeInput.tsx
- * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext
+ * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext, useAnnounce
  * @output Exports TimeInput component, TimeInputProps
  * @position Core implementation; consumed by index.ts, tested by TimeInput.test.tsx
  *
@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/TimeInput.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/TimeInput/ (showcase blocks)
  */
-import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
+import { useId, useState, useCallback, useEffect, useRef, useMemo, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
@@ -25,6 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs, getInputARIA } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
@@ -88,6 +89,7 @@ export function TimeInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   width,
   xstyle,
@@ -109,6 +111,18 @@ export function TimeInput({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
 
+  // In grouped mode the status message renders as a visually-hidden node that
+  // exists only for aria-describedby. Announce it through the persistent
+  // useAnnounce live regions instead of role/aria-live on that node — a live
+  // region mounted together with its content is not reliably announced.
+  // Ungrouped mode delegates to Field -> FieldStatus, which announces itself.
+  const announce = useAnnounce();
+  useEffect(() => {
+    if (inputGroup && status?.message) {
+      announce(status.message, status.type === 'error' ? 'assertive' : 'polite');
+    }
+  }, [announce, inputGroup, status?.message, status?.type]);
+
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the input container (which already exists) and
   // the input stays perceivable via aria-disabled instead of the disabled
@@ -317,8 +331,6 @@ export function TimeInput({
     }), inputGroup && status?.message && /*#__PURE__*/_jsx(VisuallyHidden, {
       as: "div",
       id: statusMessageID,
-      role: status.type === 'error' ? 'alert' : 'status',
-      "aria-live": status.type === 'error' ? 'assertive' : 'polite',
       children: status.message
     }), /*#__PURE__*/_jsx("input", {
       ref: mergeRefs(ref, inputRef),
@@ -404,6 +416,7 @@ export function TimeInput({
       message: status.message,
       messageID: status.message ? statusMessageID : undefined
     } : undefined,
+    statusVariant: statusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]

package/dist/Timestamp/Timestamp.d.ts

@@ -1,6 +1,6 @@
 import type { TextType, TextSize, TextColor, TextWeight } from '../theme/types';
 import type { BaseProps } from '../BaseProps';
-export type TimestampFormat = 'relative' | 'auto' | 'date' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time';
+export type TimestampFormat = 'relative' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time';
 export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     /** Ref forwarded to the root `<time>` element. */
     ref?: React.Ref<HTMLTimeElement>;
@@ -11,6 +11,8 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
      * - `'relative'`: "2 hours ago", "yesterday", "now"
      * - `'auto'`: Relative for recent times, `date_time` for older
      * - `'date'`: "Mar 21, 2025"
+     * - `'date_long'`: "March 21, 2025"
+     * - `'date_weekday'`: "Wed, Mar 21, 2025"
      * - `'date_time'`: "Mar 21, 2025, 2:51 PM"
      * - `'time'`: "2:51 PM"
      * - `'system_date'`: "2025-03-21"

package/dist/Timestamp/Timestamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0OD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA0GhB;yBA1He,SAAS"}
+{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqPD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA6GhB;yBA7He,SAAS"}

package/dist/Timestamp/Timestamp.js

@@ -19,9 +19,11 @@ import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Text } from "../Text/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
+import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";
+import { SHARED_DATE_FORMAT_OPTIONS } from "../utils/plainDate.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
@@ -141,11 +143,11 @@ function pad(n) {
 function formatTimestamp(date, format, isTimezoneShown) {
   switch (format) {
     case 'date':
-      return new Intl.DateTimeFormat(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }).format(date);
+      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date).format(date);
+    case 'date_long':
+      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date_long).format(date);
+    case 'date_weekday':
+      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date_weekday).format(date);
     case 'date_time':
       return new Intl.DateTimeFormat(undefined, {
         year: 'numeric',
@@ -291,10 +293,10 @@ export function Timestamp({
     }, interval);
     return () => clearInterval(timer);
   }, [isLive, isValidDate, effectiveFormat, diffSeconds]);
+  useDevWarning('Timestamp', `could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`, !isValidDate);
 
   // Placed after all hooks so the hook order stays stable across renders.
   if (!isValidDate) {
-    console.warn(`Timestamp: could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`);
     return null;
   }
   const showTooltip = hasTooltip && effectiveFormat === 'relative';

package/dist/Toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,WAAW,EAEZ,MAAM,SAAS,CAAC;AAsIjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAetC"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/Toast/useToast.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,WAAW,EAEZ,MAAM,SAAS,CAAC;AAoIjB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,IAAI,WAAW,CAetC"}

package/dist/Toast/useToast.js

@@ -7,11 +7,11 @@ import { createRoot } from 'react-dom/client';
 import { dataAttr } from "../naming.js";
 import { ToastContext } from "./ToastContext.js";
 import { ToastViewport } from "./ToastViewport.js";
+import { warnOnce } from "../utils/devWarning.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 // Fallback singleton
 let fallbackContext = null;
 let fallbackRoot = null;
-let fallbackWarned = false;
 const ROOT_THEME_ATTRS = ['data-theme', dataAttr('theme')];
 
 // The fallback container is a detached tree with no ThemeContext, so this
@@ -57,10 +57,7 @@ function getFallbackContext() {
   if (typeof document === 'undefined') {
     throw new Error('useToast: Cannot create fallback viewport during SSR. ' + 'Wrap your app with <LayerProvider> or <AppShell>.');
   }
-  if (!fallbackWarned) {
-    fallbackWarned = true;
-    console.warn('useToast: No LayerProvider found. Using fallback viewport. ' + 'Wrap your app with <LayerProvider> or <AppShell> for full control.');
-  }
+  warnOnce('toast-fallback-viewport', 'useToast', 'No LayerProvider found. Using fallback viewport. ' + 'Wrap your app with <LayerProvider> or <AppShell> for full control.');
   const container = document.createElement('div');
   container.setAttribute('data-astryx-toast-fallback', '');
   document.body.appendChild(container);

package/dist/ToggleButton/ToggleButtonGroup.d.ts

@@ -26,7 +26,6 @@ interface ToggleButtonGroupContextValue {
     /** Group disabled state. */
     isDisabled?: boolean;
 }
-export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextValue | null>;
 /**
  * Hook for ToggleButton to read group context.
  * Returns null when used outside a group.

package/dist/ToggleButton/ToggleButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAOnD,UAAU,6BAA6B;IACrC,mCAAmC;IACnC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,6BAA6B;IAC7B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,wBAAwB,+DACsB,CAAC;AAG5D;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,6BAA6B,GAAG,IAAI,CAE3E;AAsBD,UAAU,0BAA0B;IAClC,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,WAAW,4BAA6B,SAAQ,0BAA0B;IAC9E;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA+B,SAAQ,0BAA0B;IAChF,+BAA+B;IAC/B,IAAI,EAAE,UAAU,CAAC;IAEjB,iCAAiC;IACjC,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC;AAED,8DAA8D;AAC9D,MAAM,MAAM,sBAAsB,GAC9B,4BAA4B,GAC5B,8BAA8B,CAAC;AAMnC;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,sBAAsB,GAC5B,SAAS,CAgEX;yBAlEe,iBAAiB"}
+{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAOnD,UAAU,6BAA6B;IACrC,mCAAmC;IACnC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,6BAA6B;IAC7B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAMD;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,6BAA6B,GAAG,IAAI,CAE3E;AAsBD,UAAU,0BAA0B;IAClC,8BAA8B;IAC9B,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,MAAM,WAAW,4BAA6B,SAAQ,0BAA0B;IAC9E;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA+B,SAAQ,0BAA0B;IAChF,+BAA+B;IAC/B,IAAI,EAAE,UAAU,CAAC;IAEjB,iCAAiC;IACjC,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC;AAED,8DAA8D;AAC9D,MAAM,MAAM,sBAAsB,GAC9B,4BAA4B,GAC5B,8BAA8B,CAAC;AAMnC;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,sBAAsB,GAC5B,SAAS,CAgEX;yBAlEe,iBAAiB"}

package/dist/ToggleButton/ToggleButtonGroup.js

@@ -28,7 +28,7 @@ import { themeProps } from "../utils/themeProps.js";
 // Context
 // =============================================================================
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ToggleButtonGroupContext = /*#__PURE__*/createContext(null);
+const ToggleButtonGroupContext = /*#__PURE__*/createContext(null);
 ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
 
 /**

package/dist/Tokenizer/Tokenizer.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file Tokenizer.tsx
- * @input Uses React, BaseTypeahead, Field, Token
+ * @input Uses React, BaseTypeahead, Field, Token, useAnnounce
  * @output Exports Tokenizer multi-select typeahead component
  * @position Composed component; forwards DOM ref and exposes focus control via
  *   handleRef
@@ -13,7 +13,7 @@
 import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
-import { type InputStatus } from '../Field';
+import { type InputStatus, type FieldStatusVariant } from '../Field';
 import { type IconType } from '../Icon';
 import type { SearchableItem, SearchSource } from '../Typeahead/types';
 export type { InputStatus as TokenizerStatus, InputStatusType as TokenizerStatusType, } from '../Field';
@@ -62,6 +62,13 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<BaseProps
     isOptional?: boolean;
     /** Validation status. */
     status?: InputStatus;
+    /**
+     * How the status message is placed relative to the input.
+     * - 'attached': message overlaps directly below the input (bordered treatment)
+     * - 'detached': message floats below as a separate element with spacing
+     * @default 'attached'
+     */
+    statusVariant?: FieldStatusVariant;
     /**
      * Icon to display at the start of the input.
      * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
@@ -194,7 +201,7 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<BaseProps
  * />
  * ```
  */
-export declare function Tokenizer<T extends SearchableItem>({ label, isLabelHidden, description, isRequired, isOptional, status, startIcon, labelTooltip, searchSource, value, onChange, renderItem, renderToken, maxEntries, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, htmlName, disabledMessage, hasClear, endContent, hasAutoFocus, size: sizeProp, tokenOverflowBehavior, debounceMs, hasCreate, onChangeQuery, onFocus, onBlur, width, xstyle, className, style, 'data-testid': testId, ref, handleRef, }: TokenizerProps<T>): React.JSX.Element;
+export declare function Tokenizer<T extends SearchableItem>({ label, isLabelHidden, description, isRequired, isOptional, status, statusVariant, startIcon, labelTooltip, searchSource, value, onChange, renderItem, renderToken, maxEntries, placeholder, hasEntriesOnFocus, maxMenuItems, emptySearchResultsText, isDisabled, htmlName, disabledMessage, hasClear, endContent, hasAutoFocus, size: sizeProp, tokenOverflowBehavior, debounceMs, hasCreate, onChangeQuery, onFocus, onBlur, width, xstyle, className, style, 'data-testid': testId, ref, handleRef, }: TokenizerProps<T>): React.JSX.Element;
 export declare namespace Tokenizer {
     var displayName: string;
 }

package/dist/Tokenizer/Tokenizer.d.ts.map

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