@webstudio-is/sdk-components-react 0.231.0 → 0.232.0

package/lib/__generated__/html-embed.props.js

@@ -3,7 +3,7 @@ const e = {
     required: !1,
     control: "text",
     type: "string",
-    description: "Classes to which the element belongs"
+    description: ""
   },
   clientOnly: { required: !1, control: "boolean", type: "boolean" },
   code: { required: !0, control: "text", type: "string" },

package/lib/__generated__/time.props.js

@@ -213,6 +213,14 @@ const e = {
     defaultValue: "medium",
     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"`,
+    required: !1,
+    control: "text",
+    type: "string"
+  },
   language: {
     required: !1,
     control: "select",

package/lib/__generated__/xml-node.props.js

@@ -3,7 +3,7 @@ const e = {
     required: !1,
     control: "text",
     type: "string",
-    description: "Document base URL"
+    description: "Address of the hyperlink"
   },
   hreflang: {
     required: !1,

package/lib/time.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as M } from "react";
-const c = [
+import { forwardRef as a } from "react";
+const N = [
   "af",
   "am",
   "ar",
@@ -272,7 +272,7 @@ const c = [
   "YE",
   "ZM",
   "ZW"
-], D = "dateTime attribute is not set", G = "", i = "en", A = "GB", L = "medium", f = "none", I = (t) => c.includes(t) ? t : i, B = (t) => E.includes(t) ? t : A, d = (t) => {
+], 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) => {
   if (["full", "long", "medium", "short"].includes(t))
     return t;
 }, R = (t) => {
@@ -281,40 +281,66 @@ const c = [
 }, C = (t) => {
   if (t === "")
     return;
-  let e = new Date(t);
-  if (Number.isNaN(e.getTime()) === !1)
-    return e;
+  let n = new Date(t);
+  if (Number.isNaN(n.getTime()) === !1)
+    return n;
   if (/^\d+$/.test(t)) {
-    let n = Number(t);
-    t.length === 10 && (n *= 1e3), e = new Date(n);
+    let e = Number(t);
+    t.length === 10 && (e *= 1e3), n = new Date(e);
   }
-  if (Number.isNaN(e.getTime()) === !1)
-    return e;
-}, O = M(
+  if (Number.isNaN(n.getTime()) === !1)
+    return n;
+}, U = (t, n) => {
+  const e = (s, r = 2) => String(s).padStart(r, "0"), o = {
+    YYYY: t.getFullYear(),
+    YY: String(t.getFullYear()).slice(-2),
+    MM: e(t.getMonth() + 1),
+    M: t.getMonth() + 1,
+    DD: e(t.getDate()),
+    D: t.getDate(),
+    HH: e(t.getHours()),
+    H: t.getHours(),
+    mm: e(t.getMinutes()),
+    m: t.getMinutes(),
+    ss: e(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(
   ({
-    language: t = i,
-    country: e = A,
-    dateStyle: n = L,
-    timeStyle: l = f,
+    language: t = M,
+    country: n = u,
+    dateStyle: e = f,
+    timeStyle: o = Y,
+    format: s,
     // native html attribute in react style
-    dateTime: s = D,
-    ...a
-  }, u) => {
-    const S = `${I(t)}-${B(
-      e
-    )}`, N = {
-      dateStyle: d(n),
-      timeStyle: R(l)
-    }, r = s === null ? G : s.toString(), T = C(r);
-    let o = r;
-    if (T)
-      try {
-        o = new Intl.DateTimeFormat(S, N).format(T);
-      } catch {
-      }
-    return /* @__PURE__ */ m("time", { ref: u, dateTime: r, ...a, children: o });
+    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)
+        try {
+          T = U(l, s);
+        } catch {
+        }
+      else
+        try {
+          T = new Intl.DateTimeFormat(A, D).format(l);
+        } catch {
+        }
+    return /* @__PURE__ */ m("time", { ref: S, dateTime: i, ...c, children: T });
   }
 );
 export {
-  O as Time
+  h as Time
 };

package/lib/time.ws.js

@@ -1,5 +1,5 @@
-import { time as e } from "@webstudio-is/sdk/normalize.css";
-import { props as t } from "./__generated__/time.props.js";
+import { time as t } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/time.props.js";
 const r = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
@@ -8,10 +8,17 @@ const r = {
     children: []
   },
   presetStyle: {
-    time: e
+    time: t
   },
-  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"],
-  props: t
+  initialProps: [
+    "datetime",
+    "language",
+    "country",
+    "dateStyle",
+    "timeStyle",
+    "format"
+  ],
+  props: e
 };
 export {
   r as meta

package/lib/types/time.d.ts

@@ -9,8 +9,15 @@ export declare const Time: import("react").ForwardRefExoticComponent<Pick<import
     country?: Country;
     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"
+     */
+    format?: string;
 } & import("react").RefAttributes<HTMLTimeElement>>;
 export declare const __testing__: {
     parseDate: (datetimeString: string) => Date | undefined;
+    formatDate: (date: Date, template: string) => string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.231.0",
+  "version": "0.232.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.231.0",
-    "@webstudio-is/image": "0.231.0",
-    "@webstudio-is/sdk": "0.231.0",
-    "@webstudio-is/react-sdk": "0.231.0"
+    "@webstudio-is/icons": "0.232.0",
+    "@webstudio-is/image": "0.232.0",
+    "@webstudio-is/sdk": "0.232.0",
+    "@webstudio-is/react-sdk": "0.232.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -59,9 +59,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.1.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-cli": "0.94.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.231.0"
+    "@webstudio-is/template": "0.232.0",
+    "@webstudio-is/sdk-cli": "0.94.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",