@astryxdesign/core 0.5.0-canary.cd1a2da → 0.5.0-canary.cf77229

package/dist/AlertDialog/AlertDialog.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file AlertDialog.tsx
- * @input Uses React, Dialog, Layout, Heading, Text, Button
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
  * @output Exports AlertDialog component, AlertDialogProps type
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
  *

package/dist/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAkElB;yBApFe,WAAW"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA8FlB;yBAhHe,WAAW"}

package/dist/AlertDialog/AlertDialog.js

@@ -4,7 +4,7 @@
 
 /**
  * @file AlertDialog.tsx
- * @input Uses React, Dialog, Layout, Heading, Text, Button
+ * @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
  * @output Exports AlertDialog component, AlertDialogProps type
  * @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
  *
@@ -16,18 +16,32 @@
  * - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
  */
 import React, { useId, useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
 import { Dialog } from "../Dialog/index.js";
 import { Layout } from "../Layout/Layout.js";
 import { LayoutContent } from "../Layout/LayoutContent.js";
 import { LayoutFooter } from "../Layout/LayoutFooter.js";
-import { HStack } from "../Stack/index.js";
+import { Stack } from "../Stack/index.js";
 import { Heading } from "../Heading/Heading.js";
 import { Text } from "../Text/Text.js";
 import { Button } from "../Button/index.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
+import { useMediaQuery } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SMALL_SCREEN_QUERY = '(max-width: 640px)';
+const styles = {
+  action: {
+    ks0D6T: "x193iq5w",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  stackedAction: {
+    kzqmXN: "xh8yej3",
+    $$css: true
+  }
+};
 /**
  * A confirmation dialog for destructive or irreversible actions.
  *
@@ -77,9 +91,33 @@ export function AlertDialog({
   const cancelLabel = cancelLabelFromProps ?? t('@astryx.alertDialog.cancel');
   const titleId = useId();
   const descriptionId = useId();
+  // Width stays delegated to Dialog: this query exists only so AlertDialog can
+  // keep narrow visual, DOM, and tab order aligned for its destructive/cancel
+  // semantics without coupling action order to pointer or hover capability.
+  const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);
   const handleCancel = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
+  const buttonActionStyle = [styles.action, isSmallScreen && styles.stackedAction];
+  const cancelButton = /*#__PURE__*/_jsx(Button, {
+    variant: "ghost",
+    label: cancelLabel,
+    onClick: handleCancel,
+    xstyle: buttonActionStyle
+    // Dialog focuses [data-autofocus] itself after showModal(), because
+    // React's autoFocus runs during commit while the dialog is invisible.
+    // Cancel is least destructive, so it remains the autofocus target even
+    // when small-screen visual order places the destructive action above it.
+    ,
+    "data-autofocus": true
+  }, "cancel");
+  const actionButton = /*#__PURE__*/_jsx(Button, {
+    variant: actionVariant,
+    label: actionLabel,
+    onClick: onAction,
+    isLoading: isActionLoading,
+    xstyle: buttonActionStyle
+  }, "action");
   return /*#__PURE__*/_jsx(Dialog, {
     ...rest,
     ref: ref,
@@ -117,25 +155,12 @@ export function AlertDialog({
         })]
       }),
       footer: /*#__PURE__*/_jsx(LayoutFooter, {
-        children: /*#__PURE__*/_jsxs(HStack, {
+        children: /*#__PURE__*/_jsx(Stack, {
+          direction: isSmallScreen ? 'vertical' : 'horizontal',
           gap: 2,
-          hAlign: "end",
-          children: [/*#__PURE__*/_jsx(Button, {
-            variant: "ghost",
-            label: cancelLabel,
-            onClick: handleCancel
-            // Dialog focuses [data-autofocus] itself after showModal(),
-            // because React's autoFocus runs during commit while the
-            // dialog is still invisible. Cancel is the least destructive
-            // choice, so it is the one that should be preselected.
-            ,
-            "data-autofocus": true
-          }), /*#__PURE__*/_jsx(Button, {
-            variant: actionVariant,
-            label: actionLabel,
-            onClick: onAction,
-            isLoading: isActionLoading
-          })]
+          hAlign: isSmallScreen ? 'stretch' : 'end',
+          wrap: isSmallScreen ? 'nowrap' : 'wrap',
+          children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
         })
       })
     })

package/dist/AspectRatio/AspectRatio.d.ts

@@ -44,14 +44,14 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
      *   `astryx-base` cascade layer, and unlayered CSS wins over layered
      *   rules regardless of specificity.
      *
+     * A responsive ratio is set in CSS, not on the component. For example, a 3:1
+     * hero can become 3:2 when its container narrows by targeting the element's
+     * class from a container query:
+     * `@container gallery (max-width: 720px) { .gallery-hero { aspect-ratio: 3 / 2; } }`.
+     *
      * @example
      * ```
-     * // 3:1 hero that becomes 3:2 when its container stacks
-     * <AspectRatio ratio={3 / 1} className="gallery-hero">…</AspectRatio>
-     *
-     * // CSS: @container gallery (max-width: 720px) {
-     * //   .gallery-hero { aspect-ratio: 3 / 2; }
-     * // }
+     * <AspectRatio ratio={3 / 1} className="gallery-hero">...</AspectRatio>
      * ```
      */
     ratio: number;

package/dist/Calendar/Calendar.js

@@ -261,7 +261,7 @@ export function Calendar({
         if (plainDateIsEqual(date, startPd)) {
           setRangeSelectionStart(null);
           announce(t('@astryx.calendar.rangeClearedAnnounce', {
-            date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)
+            date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale)
           }));
           return;
         }

package/dist/Calendar/styles.d.ts

@@ -33,19 +33,9 @@ export declare const calendarStyles: Readonly<{
     }>;
     readonly monthsContainer: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
         readonly gap: stylex.StyleXClassNameFor<"gap", "16px">;
     }>;
-    readonly srOnly: Readonly<{
-        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
-        readonly width: stylex.StyleXClassNameFor<"width", "1px">;
-        readonly height: stylex.StyleXClassNameFor<"height", "1px">;
-        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
-        readonly margin: stylex.StyleXClassNameFor<"margin", "-1px">;
-        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
-        readonly clip: stylex.StyleXClassNameFor<"clip", "rect(0, 0, 0, 0)">;
-        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
-        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
-    }>;
     readonly navIcon: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
     }>;
@@ -154,7 +144,7 @@ export declare const dayCellStyles: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
-        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "50%">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "9999px">;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "pointer">;
@@ -209,8 +199,9 @@ export declare const dayCellTheme: Readonly<{
         readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<"light-dark(#0A1317, #DFE2E5)">}`>;
     }>;
     readonly daySelected: Readonly<{
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #2694FE)">;
-        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FFFFFF, #FFFFFF)">;
+        readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #2694FE)" | "Highlight">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FFFFFF, #FFFFFF)" | "HighlightText">;
         readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
             readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
         } | null>;

package/dist/Calendar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAiBH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EvB,CAAC"}

package/dist/Calendar/styles.js

@@ -46,21 +46,10 @@ export const calendarStyles = {
   },
   monthsContainer: {
     k1xSpc: "x78zum5",
+    kwnvtZ: "x1a02dak",
     kOIVth: "x18g69wz",
     $$css: true
   },
-  srOnly: {
-    kVAEAm: "x10l6tqk",
-    kzqmXN: "x1i1rx1s",
-    kZKoxP: "xjm9jq1",
-    kmVPX3: "x1717udv",
-    kogj98: "xkdpibf",
-    kVQacm: "xb3r6kr",
-    kMcinP: "xzpqnlu",
-    khDVqt: "xuxw1ft",
-    kMzoRj: "xc342km",
-    $$css: true
-  },
   navIcon: {
     k1xSpc: "x3nfvp2",
     $$css: true
@@ -122,6 +111,16 @@ export const monthGridStyles = {
 // Day Cell Styles - Structural (layout, sizing, positioning)
 // =============================================================================
 
+// Half the gap between the day button and its cell — (--size-element-md minus
+// --size-element-sm) / 2 — so the band's rounded caps line up with the button
+// and the button's ::before bleeds out to meet its neighbour's. Deliberately a
+// literal and NOT a spacing token: this is a layout value derived from the two
+// size tokens, and pinning it to --spacing-0-5 desynchronises it from them
+// (matcha sets that step to 3px, which overlaps adjacent days' hit targets by
+// 2px). Deriving it with calc() from the size tokens would be better still and
+// would close butter's 4px dead gap; that needs its own measured change.
+const BAND_INSET = '2px';
+const HIT_BLEED = '-2px';
 export const dayCellStyles = {
   cell: {
     kVAEAm: "x1n2onr6",
@@ -198,7 +197,7 @@ export const dayCellStyles = {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
     kjj79g: "xl56j7k",
-    kaIpWk: "x16rqkct",
+    kaIpWk: "xjspbzw",
     kMzoRj: "xc342km",
     ksu8eU: "xng3xce",
     kkrTdU: "x1ypdohk x16khyan",
@@ -269,8 +268,9 @@ export const dayCellTheme = {
     $$css: true
   },
   daySelected: {
-    kWkggS: "x1ewilqj",
-    kMwMTN: "x17wrial",
+    kAXs8y: "x1kzknox",
+    kWkggS: "x1ewilqj x1jzqe4",
+    kMwMTN: "x17wrial x1k5gbb1",
     kKwaWg: "xmvprkv",
     $$css: true
   },

package/dist/Card/Card.d.ts

@@ -30,14 +30,6 @@ export type CardVariant = 'default' | 'transparent' | 'muted' | 'blue' | 'cyan'
 export type { SizeValue } from '../utils/types';
 export interface CardProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
-    /**
-     * CSS class name(s) appended to the root element.
-     */
-    className?: string;
-    /**
-     * Inline styles to apply to the root element.
-     */
-    style?: React.CSSProperties;
     /**
      * Width of the card.
      * Numbers are treated as pixels, strings are used as-is.
@@ -66,7 +58,12 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
     /**
      * Internal padding of the card using the spacing scale.
      * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
-     * @default 4 (16px)
+     *
+     * Omit it and the card takes the theme's card padding rather than a step, so
+     * passing a step is a decision to override the theme, not a way to restate
+     * the default.
+     *
+     * @default the theme's card padding (spacing step 4 with no theme)
      */
     padding?: SpacingStep;
     /**

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;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,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2DX;yBAzEe,IAAI"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;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,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAgDX;yBA9De,IAAI"}

package/dist/Card/Card.js

@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { borderVars, colorVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { container } from "../Layout/container.stylex.js";
-import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
+import { spacingStepToToken } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 
@@ -216,20 +216,20 @@ export function Card({
 
   // When no explicit padding prop, use theme default (set via container tokens)
   const useThemeDefault = padding == null;
-  const effectivePadding = padding ?? 4;
-  const paddingToken = spacingStepToToken[effectivePadding];
+  const paddingToken = useThemeDefault ? undefined : spacingStepToToken[padding];
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     ...mergeProps(themeProps('card', {
-      variant
-    }), stylex.props(styles.card, variantStyles[variant], elevationStyles[elevation], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
+      variant,
+      elevation
+    }), stylex.props(styles.card, variantStyles[variant], elevationStyles[elevation], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(paddingToken == null ? {
       useThemeDefault: 'card'
     } : {
       paddingInnerX: paddingToken,
       paddingInnerY: paddingToken,
       paddingOuterX: paddingToken,
       paddingOuterY: paddingToken
-    }), !useThemeDefault && effectivePadding !== 4 && paddingStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingInlineVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockStartVarStyles[effectivePadding], !useThemeDefault && effectivePadding !== 4 && containerPaddingBlockEndVarStyles[effectivePadding],
+    }),
     // Applied after the container padding so the border-inset calc wins;
     // it reads the --container-padding-* vars set above.
     variant === 'default' && styles.withBorder, xstyle), className, style),

package/dist/CodeBlock/CodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AA2WxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA6NhB;yBArPe,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AA2WxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAqPD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA6OhB;yBArQe,SAAS"}

package/dist/CodeBlock/CodeBlock.js

@@ -510,13 +510,17 @@ export function CodeBlock({
       void handleCopy();
     },
     xstyle: [styles.copyButton, !showHeader && styles.copyButtonAbsolute],
-    ...themeProps('codeblock-copy-button')
+    ...themeProps('code-block-copy-button', undefined, {
+      legacyNames: ['codeblock-copy-button']
+    })
   }) : null;
   const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
-    ...mergeProps(themeProps('codeblock-header', {
+    ...mergeProps(themeProps('code-block-header', {
       size,
       language,
       container
+    }, {
+      legacyNames: ['codeblock-header']
     }), {
       0: {
         className: "x78zum5 x6s0dn4 x1qughib x1pzlopt xzyc27v x7wzq59 x13vifvy x1vjfegm xce4md1"
@@ -539,9 +543,11 @@ export function CodeBlock({
       } : undefined,
       ...focusOutlineProps.focusVisible(styles.header, canCollapse && styles.headerCollapsible),
       children: /*#__PURE__*/_jsxs("span", {
-        ...mergeProps(themeProps('codeblock-title', {
+        ...mergeProps(themeProps('code-block-title', {
           size,
           language
+        }, {
+          legacyNames: ['codeblock-title']
         }), {
           className: "x78zum5 x6s0dn4 x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
         }),
@@ -604,10 +610,15 @@ export function CodeBlock({
   });
   const block = /*#__PURE__*/_jsxs("pre", {
     ref: ref,
-    ...mergeProps(themeProps('codeblock', {
+    ...mergeProps(themeProps('code-block', {
       size,
       language,
       container
+    },
+    // `codeblock` ran the compound name together; themes styling it keep
+    // working until the next major.
+    {
+      legacyNames: ['codeblock']
     }), stylex.props(styles.root, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
     ...props,
     children: [headerEl, canCollapse ? /*#__PURE__*/_jsx("div", {

package/dist/CodeBlock/highlightRanges.js

@@ -54,7 +54,7 @@ function ensureDynamicHighlightType(tokenType) {
   }
   const name = `astryx-${tokenType}`;
   const colorVar = `var(--color-syntax-${tokenType}, currentColor)`;
-  dynamicStyleSheet.insertRule(`.astryx-codeblock code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`);
+  dynamicStyleSheet.insertRule(`.astryx-code-block code::highlight(${name}), .astryx-codeeditor code::highlight(${name}) { color: ${colorVar}; }`);
 }
 
 // ---------------------------------------------------------------------------

package/dist/CodeBlock/highlightStyles.js

@@ -28,31 +28,31 @@ const FALLBACK_TOKENS = `:root {\n${Object.entries(syntaxTokenDefaults).map(([na
 const HIGHLIGHT_STYLES = `
 ${FALLBACK_TOKENS}
 
-.astryx-codeblock code::highlight(astryx-keyword),
+.astryx-code-block code::highlight(astryx-keyword),
 .astryx-codeeditor code::highlight(astryx-keyword) { color: var(--color-syntax-keyword); }
-.astryx-codeblock code::highlight(astryx-string),
+.astryx-code-block code::highlight(astryx-string),
 .astryx-codeeditor code::highlight(astryx-string) { color: var(--color-syntax-string); }
-.astryx-codeblock code::highlight(astryx-comment),
+.astryx-code-block code::highlight(astryx-comment),
 .astryx-codeeditor code::highlight(astryx-comment) { color: var(--color-syntax-comment); }
-.astryx-codeblock code::highlight(astryx-number),
+.astryx-code-block code::highlight(astryx-number),
 .astryx-codeeditor code::highlight(astryx-number) { color: var(--color-syntax-number); }
-.astryx-codeblock code::highlight(astryx-function),
+.astryx-code-block code::highlight(astryx-function),
 .astryx-codeeditor code::highlight(astryx-function) { color: var(--color-syntax-function); }
-.astryx-codeblock code::highlight(astryx-type),
+.astryx-code-block code::highlight(astryx-type),
 .astryx-codeeditor code::highlight(astryx-type) { color: var(--color-syntax-type); }
-.astryx-codeblock code::highlight(astryx-tag),
+.astryx-code-block code::highlight(astryx-tag),
 .astryx-codeeditor code::highlight(astryx-tag) { color: var(--color-syntax-tag); }
-.astryx-codeblock code::highlight(astryx-attribute),
+.astryx-code-block code::highlight(astryx-attribute),
 .astryx-codeeditor code::highlight(astryx-attribute) { color: var(--color-syntax-attribute); }
-.astryx-codeblock code::highlight(astryx-property),
+.astryx-code-block code::highlight(astryx-property),
 .astryx-codeeditor code::highlight(astryx-property) { color: var(--color-syntax-property); }
-.astryx-codeblock code::highlight(astryx-operator),
+.astryx-code-block code::highlight(astryx-operator),
 .astryx-codeeditor code::highlight(astryx-operator) { color: var(--color-syntax-operator); }
-.astryx-codeblock code::highlight(astryx-constant),
+.astryx-code-block code::highlight(astryx-constant),
 .astryx-codeeditor code::highlight(astryx-constant) { color: var(--color-syntax-constant); }
-.astryx-codeblock code::highlight(astryx-punctuation),
+.astryx-code-block code::highlight(astryx-punctuation),
 .astryx-codeeditor code::highlight(astryx-punctuation) { color: var(--color-syntax-punctuation); }
-.astryx-codeblock code::highlight(astryx-variable),
+.astryx-code-block code::highlight(astryx-variable),
 .astryx-codeeditor code::highlight(astryx-variable) { color: var(--color-syntax-variable); }
 
 /* Span-based fallback classes — used when highlightMode='spans' or

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

@@ -1 +1 @@
-{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAwLhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmXhB;yBAlZe,eAAe"}
+{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0LhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAkYhB;yBAjae,eAAe"}

package/dist/DateInput/NativeDateField.js

@@ -4,7 +4,7 @@
 
 /**
  * @file NativeDateField.tsx
- * @input Uses React, Field, Icon, InputClearButton, Spinner, useCalendarConstraints
+ * @input Uses React, Field, Icon, InputClearButton, Spinner, useCalendarConstraints, hasEditableDateSegments
  * @output Exports NativeDateField — the OS-picker touch surface
  * @position One of DateInput's three surfaces. `DateInput` picks the pointer
  *   field on a mouse and, on touch, either `TouchDateField` (the default) or
@@ -22,13 +22,16 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateInput/DateInput.tsx (the `nativePicker` prop)
  * - /packages/core/src/DateInput/DateInput.doc.mjs (prop table)
- * - /packages/core/src/DateInput/DateInputNative.test.tsx (tests)
+ * - /packages/core/src/DateInput/nativeDateSegments.ts (the engine probe)
+ * - /packages/core/src/DateInput/NativeDateField.test.tsx (tests)
  */
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useCalendarConstraints } from "../Calendar/index.js";
+import { hasEditableDateSegments } from "./nativeDateSegments.js";
 import { Field, InputClearButton, inputStatusBorderStyles, inputStatusFocusWithinStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
 import { useInputStatusIcon, useMergedRefs } from "../hooks/index.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { Icon } from "../Icon/index.js";
 import { useLocale, useTranslator } from "../i18n/index.js";
@@ -129,6 +132,8 @@ export function NativeDateField({
   });
   const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
+  // Only breaks a tie the engine probe cannot: see ./nativeDateSegments.
+  const isTouchPointer = useMediaQuery('(pointer: coarse)');
   const id = useId();
   const inputLabelID = useId();
   const descriptionID = useId();
@@ -173,6 +178,10 @@ export function NativeDateField({
   // Whether the control has focus — which, on a touch device, means its
   // picker is open.
   const [isFocused, setIsFocused] = useState(false);
+  // Whether the engine draws this control as editable segments rather than a
+  // picker-only run. Latched on focus rather than read during render: the
+  // probe touches the DOM, and unfocused the answer changes nothing.
+  const [isSegmentEditable, setIsSegmentEditable] = useState(false);
   // The raw value the control last reported and we acted on, so the same edit
   // arriving through both commit paths only fires one change.
   const lastCommitRef = useRef(null);
@@ -192,10 +201,14 @@ export function NativeDateField({
   const formatValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
 
   // This field paints the closed control's text itself, which is what keeps
-  // `format` and `placeholder` applying: the OS picker has no segments to
-  // edit, so our text holds even while the picker is open, and tracks it live.
+  // `format` and `placeholder` applying: a picker-only control has no
+  // segments to edit, so our text holds even while the picker is open, and
+  // tracks it live. An editable control is the opposite case — its text IS
+  // the edit surface, and it reports no `value` until every segment is
+  // filled, so the overlay has nothing to paint mid-edit — so step aside for
+  // as long as it has focus. See ./nativeDateSegments.
   const overlayText = nativeValue ? formatValue(nativeValue) : placeholder;
-  const showsOverlay = !!overlayText;
+  const showsOverlay = !!overlayText && !(isFocused && isSegmentEditable);
   const commitValue = useCallback(newValue => {
     if (isEffectivelyDisabled) {
       return;
@@ -286,6 +299,10 @@ export function NativeDateField({
       input.value = nativeValue;
     }
   }, [isFocused, nativeValue]);
+  const handleFocus = useCallback(() => {
+    setIsSegmentEditable(hasEditableDateSegments(isTouchPointer));
+    setIsFocused(true);
+  }, [isTouchPointer]);
   const handleBlur = useCallback(() => {
     const domValue = inputRef.current?.value;
     setIsFocused(false);
@@ -368,7 +385,7 @@ export function NativeDateField({
         ,
         defaultValue: initialValueRef.current ?? '',
         onChange: handleChange,
-        onFocus: () => setIsFocused(true),
+        onFocus: handleFocus,
         onBlur: handleBlur,
         min: min,
         max: max,

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

@@ -1 +1 @@
-{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAgchD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,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,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqsBhB;yBAtuBe,cAAc"}
+{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAgehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,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,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmtBhB;yBApvBe,cAAc"}