@astryxdesign/lab 0.7.9-canary.de1be1f → 0.7.9-canary.edf7128

package/dist/Chart/formatters.d.ts

@@ -1,10 +1,11 @@
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
-import type { Locale } from '@astryxdesign/core/i18n';
+import type { CalendarSystem, Locale } from '@astryxdesign/core/i18n';
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -25,11 +26,13 @@ export declare function currency(symbol?: string, locale?: Locale): (value: unkn
  */
 export declare function percent(value: unknown): string;
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function shortDate(value: unknown, locale?: Locale): string;
+export declare function shortDate(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function monthYear(value: unknown, locale?: Locale): string;
+export declare function monthYear(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 //# sourceMappingURL=formatters.d.ts.map

package/dist/Chart/formatters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE"}
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR"}

package/dist/Chart/formatters.js

@@ -2,11 +2,14 @@
 
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
 
+import { plainDateFormat, plainDateFromDate } from '@astryxdesign/core/utils';
+
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -74,31 +77,33 @@ export function percent(value) {
 }
 
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export function shortDate(value, locale = 'en') {
+export function shortDate(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     day: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }
 
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export function monthYear(value, locale = 'en') {
+export function monthYear(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     year: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.9-canary.de1be1f",
+  "version": "0.7.9-canary.edf7128",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.9-canary.de1be1f",
+    "@astryxdesign/core": "0.7.9-canary.edf7128",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,9 +59,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.9-canary.de1be1f",
-    "@astryxdesign/cli": "0.7.9-canary.de1be1f",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.de1be1f",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.edf7128",
+    "@astryxdesign/cli": "0.7.9-canary.edf7128",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.edf7128",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chart/formatters.test.ts

@@ -23,6 +23,42 @@ describe('Chart date formatters', () => {
     );
   });
 
+  it.each([
+    {calendar: 'persian', locale: 'en', year: '1405'},
+    {calendar: 'persian', locale: 'fa', year: '۱۴۰۵'},
+    {calendar: 'hebrew', locale: 'en', year: '5787'},
+    {calendar: 'hebrew', locale: 'he', year: '5787'},
+    {calendar: 'buddhist', locale: 'en', year: '2569'},
+    {calendar: 'buddhist', locale: 'th', year: '2569'},
+  ] as const)(
+    'formats dates in an explicit $calendar calendar under $locale',
+    ({calendar, locale, year}) => {
+      const day = new Date(2026, 9, 30, 12);
+      expect(shortDate(day, locale, calendar)).toBe(
+        new Intl.DateTimeFormat(locale, {
+          month: 'short',
+          day: 'numeric',
+          calendar,
+        }).format(day),
+      );
+      const label = monthYear(day, locale, calendar);
+      expect(label).toBe(
+        new Intl.DateTimeFormat(locale, {
+          month: 'short',
+          year: 'numeric',
+          calendar,
+        }).format(day),
+      );
+      expect(label).toContain(year);
+    },
+  );
+
+  it('writes `iso8601` dates as Gregorian ones', () => {
+    const day = new Date(2026, 9, 30, 12);
+    expect(shortDate(day, 'en', 'iso8601')).toBe(shortDate(day, 'en'));
+    expect(monthYear(day, 'en', 'iso8601')).toBe('Oct 2026');
+  });
+
   it('uses an explicit locale for unabridged currency values', () => {
     expect(currency('€', 'de-DE')(12.5)).toBe(
       `€${(12.5).toLocaleString('de-DE')}`,

package/src/Chart/formatters.ts

@@ -2,12 +2,14 @@
 
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
 
-import type {Locale} from '@astryxdesign/core/i18n';
+import type {CalendarSystem, Locale} from '@astryxdesign/core/i18n';
+import {plainDateFormat, plainDateFromDate} from '@astryxdesign/core/utils';
 
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
@@ -79,31 +81,41 @@ export function percent(value: unknown): string {
 }
 
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export function shortDate(value: unknown, locale: Locale = 'en'): string {
+export function shortDate(
+  value: unknown,
+  locale: Locale = 'en',
+  calendar: CalendarSystem = 'gregory',
+): string {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
-    month: 'short',
-    day: 'numeric',
-    calendar: 'gregory',
-  }).format(d);
+  return plainDateFormat(
+    plainDateFromDate(d),
+    {month: 'short', day: 'numeric', calendar},
+    locale,
+  );
 }
 
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export function monthYear(value: unknown, locale: Locale = 'en'): string {
+export function monthYear(
+  value: unknown,
+  locale: Locale = 'en',
+  calendar: CalendarSystem = 'gregory',
+): string {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
-    month: 'short',
-    year: 'numeric',
-    calendar: 'gregory',
-  }).format(d);
+  return plainDateFormat(
+    plainDateFromDate(d),
+    {month: 'short', year: 'numeric', calendar},
+    locale,
+  );
 }