@webstudio-is/sdk-components-react 0.252.2 → 0.253.0

package/lib/__generated__/time.props.js

@@ -214,9 +214,16 @@ const e = {
     options: ["full", "long", "medium", "short", "none"]
   },
   format: {
-    description: `Custom format template string. When provided, overrides Date Style and Time Style.
-Supports tokens: YYYY, YY, MM, M, DD, D, HH, H, mm, m, ss, s.
-Example: "YYYY-MM-DD HH:mm:ss" displays as "2025-11-03 18:47:25"`,
+    description: `Custom format template. Overrides Date Style and Time Style.
+
+Tokens: YYYY/YY (year), MMMM/MMM/MM/M (month), DDDD/DDD/DD/D (day), HH/H (hours), mm/m (minutes), ss/s (seconds)
+
+Examples:
+"YYYY-MM-DD" → 2025-11-03
+"DDDD, MMMM D" → Monday, November 3
+"DDD, D. MMM YYYY" → Mon, 3. Nov 2025
+
+Day and month names use the selected language.`,
     required: !1,
     control: "text",
     type: "string"

package/lib/time.js

@@ -1,5 +1,5 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
+import { jsx as S } from "react/jsx-runtime";
+import { forwardRef as A } from "react";
 const N = [
   "af",
   "am",
@@ -72,7 +72,7 @@ const N = [
   "uz",
   "vi",
   "zh"
-], E = [
+], g = [
   "AF",
   "AL",
   "DZ",
@@ -272,75 +272,84 @@ const N = [
   "YE",
   "ZM",
   "ZW"
-], G = "dateTime attribute is not set", L = "", M = "en", u = "GB", f = "medium", Y = "none", g = (t) => N.includes(t) ? t : M, I = (t) => E.includes(t) ? t : u, B = (t) => {
+], f = "dateTime attribute is not set", E = "", c = "en", u = "GB", G = "medium", I = "none", L = (t) => N.includes(t) ? t : c, h = (t) => g.includes(t) ? t : u, B = (t) => {
   if (["full", "long", "medium", "short"].includes(t))
     return t;
 }, R = (t) => {
   if (["full", "long", "medium", "short"].includes(t))
     return t;
-}, C = (t) => {
+}, U = (t) => {
   if (t === "")
     return;
-  let n = new Date(t);
-  if (Number.isNaN(n.getTime()) === !1)
-    return n;
+  let e = new Date(t);
+  if (Number.isNaN(e.getTime()) === !1)
+    return e;
   if (/^\d+$/.test(t)) {
-    let e = Number(t);
-    t.length === 10 && (e *= 1e3), n = new Date(e);
+    let n = Number(t);
+    t.length === 10 && (n *= 1e3), e = new Date(n);
   }
-  if (Number.isNaN(n.getTime()) === !1)
-    return n;
-}, U = (t, n) => {
-  const e = (s, r = 2) => String(s).padStart(r, "0"), o = {
+  if (Number.isNaN(e.getTime()) === !1)
+    return e;
+}, Y = (t, e, n = "en-US") => {
+  const r = (o, s = 2) => String(o).padStart(s, "0"), D = new Intl.DateTimeFormat(n, {
+    weekday: "long"
+  }).format(t), T = new Intl.DateTimeFormat(n, {
+    weekday: "short"
+  }).format(t), l = new Intl.DateTimeFormat(n, {
+    month: "long"
+  }).format(t), M = new Intl.DateTimeFormat(n, {
+    month: "short"
+  }).format(t), m = {
     YYYY: t.getFullYear(),
     YY: String(t.getFullYear()).slice(-2),
-    MM: e(t.getMonth() + 1),
+    MMMM: l,
+    MMM: M,
+    MM: r(t.getMonth() + 1),
     M: t.getMonth() + 1,
-    DD: e(t.getDate()),
+    DDDD: D,
+    DDD: T,
+    DD: r(t.getDate()),
     D: t.getDate(),
-    HH: e(t.getHours()),
+    HH: r(t.getHours()),
     H: t.getHours(),
-    mm: e(t.getMinutes()),
+    mm: r(t.getMinutes()),
     m: t.getMinutes(),
-    ss: e(t.getSeconds()),
+    ss: r(t.getSeconds()),
     s: t.getSeconds()
-  };
-  return n.replace(
-    /\b(YYYY|YY|MM|M|DD|D|HH|H|mm|m|ss|s)\b/g,
-    (s) => String(o[s])
-  );
-}, h = a(
+  }, a = Object.keys(m).sort((o, s) => s.length - o.length), i = new RegExp(`\\b(${a.join("|")})\\b`, "g");
+  return e.replace(i, (o) => String(m[o]));
+}, H = A(
   ({
-    language: t = M,
-    country: n = u,
-    dateStyle: e = f,
-    timeStyle: o = Y,
-    format: s,
+    language: t = c,
+    country: e = u,
+    dateStyle: n = G,
+    timeStyle: r = I,
+    format: D,
     // native html attribute in react style
-    dateTime: r = G,
-    ...c
-  }, S) => {
-    const A = `${g(t)}-${I(
-      n
-    )}`, D = {
-      dateStyle: B(e),
-      timeStyle: R(o)
-    }, i = r === null ? L : r.toString(), l = C(i);
-    let T = i;
-    if (l)
-      if (s)
+    dateTime: T = f,
+    ...l
+  }, M) => {
+    const m = `${L(t)}-${h(
+      e
+    )}`, a = {
+      dateStyle: B(n),
+      timeStyle: R(r)
+    }, i = T === null ? E : T.toString(), o = U(i);
+    let s = i;
+    if (o)
+      if (D)
         try {
-          T = U(l, s);
+          s = Y(o, D, m);
         } catch {
         }
       else
         try {
-          T = new Intl.DateTimeFormat(A, D).format(l);
+          s = new Intl.DateTimeFormat(m, a).format(o);
         } catch {
         }
-    return /* @__PURE__ */ m("time", { ref: S, dateTime: i, ...c, children: T });
+    return /* @__PURE__ */ S("time", { ref: M, dateTime: i, ...l, children: s });
   }
 );
 export {
-  h as Time
+  H as Time
 };

package/lib/types/time.d.ts

@@ -10,14 +10,21 @@ export declare const Time: import("react").ForwardRefExoticComponent<Pick<import
     dateStyle?: DateStyle;
     timeStyle?: TimeStyle;
     /**
-     * Custom format template string. When provided, overrides Date Style and Time Style.
-     * Supports tokens: YYYY, YY, MM, M, DD, D, HH, H, mm, m, ss, s.
-     * Example: "YYYY-MM-DD HH:mm:ss" displays as "2025-11-03 18:47:25"
+     * Custom format template. Overrides Date Style and Time Style.
+     *
+     * Tokens: YYYY/YY (year), MMMM/MMM/MM/M (month), DDDD/DDD/DD/D (day), HH/H (hours), mm/m (minutes), ss/s (seconds)
+     *
+     * Examples:
+     * - "YYYY-MM-DD" → 2025-11-03
+     * - "DDDD, MMMM D" → Monday, November 3
+     * - "DDD, D. MMM YYYY" → Mon, 3. Nov 2025
+     *
+     * Day and month names use the selected language.
      */
     format?: string;
 } & import("react").RefAttributes<HTMLTimeElement>>;
 export declare const __testing__: {
     parseDate: (datetimeString: string) => Date | undefined;
-    formatDate: (date: Date, template: string) => string;
+    formatDate: (date: Date, template: string, locale?: string) => string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.252.2",
+  "version": "0.253.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,10 +44,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.252.2",
-    "@webstudio-is/image": "0.252.2",
-    "@webstudio-is/sdk": "0.252.2",
-    "@webstudio-is/react-sdk": "0.252.2"
+    "@webstudio-is/icons": "0.253.0",
+    "@webstudio-is/react-sdk": "0.253.0",
+    "@webstudio-is/image": "0.253.0",
+    "@webstudio-is/sdk": "0.253.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -60,8 +60,8 @@
     "vitest": "^3.1.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.252.2",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/template": "0.253.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",