@webstudio-is/sdk-components-react 0.267.0 → 0.269.0

package/lib/__generated__/time.props.js

@@ -213,15 +213,22 @@ const e = {
     defaultValue: "medium",
     options: ["full", "long", "medium", "short", "none"]
   },
+  datetime: {
+    required: !1,
+    control: "text",
+    type: "string",
+    defaultValue: "dateTime attribute is not set",
+    description: "Machine-readable value"
+  },
   format: {
     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
+- "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,
@@ -313,6 +320,16 @@ Day and month names use the selected language.`,
     type: "string",
     defaultValue: "none",
     options: ["full", "long", "medium", "short", "none"]
+  },
+  timeZone: {
+    description: `Time zone used to format the date.
+
+Use "UTC" for deterministic UTC output, "visitor" to use the browser time
+zone after hydration, or an IANA time zone like "Europe/Berlin".`,
+    required: !1,
+    control: "text",
+    type: "string",
+    defaultValue: "UTC"
   }
 };
 export {

package/lib/components.js

@@ -5,9 +5,9 @@ import { MarkdownEmbed as a } from "./markdown-embed.js";
 import { Body as n } from "./body.js";
 import { Box as l } from "./box.js";
 import { Text as k } from "./text.js";
-import { Heading as T } from "./heading.js";
-import { Paragraph as c } from "./paragraph.js";
-import { Link as B, Link as L } from "./link.js";
+import { Heading as B } from "./heading.js";
+import { Paragraph as S } from "./paragraph.js";
+import { BaseLink as b, BaseLink as c } from "./link.js";
 import { Span as g } from "./span.js";
 import { Bold as I } from "./bold.js";
 import { Italic as h } from "./italic.js";
@@ -31,9 +31,9 @@ import { Vimeo as fo } from "./vimeo.js";
 import { YouTube as io } from "./youtube.js";
 import { VimeoPreviewImage as lo } from "./vimeo-preview-image.js";
 import { VimeoPlayButton as ko } from "./vimeo-play-button.js";
-import { VimeoSpinner as To } from "./vimeo-spinner.js";
-import { XmlNode as co } from "./xml-node.js";
-import { XmlTime as Bo } from "./xml-time.js";
+import { VimeoSpinner as Bo } from "./vimeo-spinner.js";
+import { XmlNode as So } from "./xml-node.js";
+import { XmlTime as bo } from "./xml-time.js";
 import { Time as Ho } from "./time.js";
 import { Select as Fo } from "./select.js";
 import { Option as Vo } from "./option.js";
@@ -56,21 +56,21 @@ export {
   Co as HeadMeta,
   Po as HeadSlot,
   Mo as HeadTitle,
-  T as Heading,
+  B as Heading,
   x as HtmlEmbed,
   Y as Image,
   X as Input,
   h as Italic,
   $ as Label,
-  B as Link,
+  b as Link,
   D as List,
   J as ListItem,
   a as MarkdownEmbed,
   Vo as Option,
-  c as Paragraph,
+  S as Paragraph,
   to as RadioButton,
   O as RemixForm,
-  L as RichTextLink,
+  c as RichTextLink,
   Fo as Select,
   Q as Separator,
   e as Slot,
@@ -84,8 +84,8 @@ export {
   fo as Vimeo,
   ko as VimeoPlayButton,
   lo as VimeoPreviewImage,
-  To as VimeoSpinner,
-  co as XmlNode,
-  Bo as XmlTime,
+  Bo as VimeoSpinner,
+  So as XmlNode,
+  bo as XmlTime,
   io as YouTube
 };

package/lib/create-link.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as f, useContext as L } from "react";
+import { ReactSdkContext as P } from "@webstudio-is/react-sdk/runtime";
+import { BaseLink as a } from "./link.js";
+import { LinkCurrentUrlContext as x } from "./link-current-url.js";
+import { isInternalHref as R } from "@webstudio-is/sdk/link-utils";
+import { getCurrentLinkProps as $, stripRouterOnlyProps as c } from "./link-utils.js";
+const g = (t, o) => t === "" ? `${o.pathname}${o.search}` : t, v = (t) => `https://webstudio.local${t.pathname}${t.search}${t.hash}`, m = ({
+  children: t,
+  location: o
+}) => /* @__PURE__ */ e(x.Provider, { value: v(o), children: t }), S = ({
+  Link: t,
+  useLocation: o,
+  useResolvedPath: u
+}) => {
+  const l = f((r, n) => {
+    const i = o(), s = g(r.href, i), { linkProps: d, currentLinkProps: C } = $(
+      r,
+      i,
+      u(r.href)
+    );
+    return /* @__PURE__ */ e(m, { location: i, children: /* @__PURE__ */ e(t, { ...d, ...C, to: s, ref: n }) });
+  }), k = f(
+    (r, n) => {
+      const i = o();
+      return /* @__PURE__ */ e(m, { location: i, children: /* @__PURE__ */ e(
+        a,
+        {
+          ...c(r),
+          href: r.href,
+          ref: n
+        }
+      ) });
+    }
+  ), h = f(
+    (r, n) => {
+      const { assetBaseUrl: i } = L(P);
+      if (r.href === void 0)
+        return /* @__PURE__ */ e(a, { ...c(r), ref: n });
+      const s = String(r.href);
+      return s.startsWith("#") === !1 && R(s, i) ? /* @__PURE__ */ e(l, { ...r, href: s, ref: n }) : s.startsWith("#") ? /* @__PURE__ */ e(k, { ...r, href: s, ref: n }) : /* @__PURE__ */ e(a, { ...c(r), ref: n });
+    }
+  );
+  return h.displayName = a.displayName, h;
+};
+export {
+  S as createLink
+};

package/lib/html-embed.js

@@ -1,15 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as b, useContext as x, useState as E, useSyncExternalStore as k, useRef as f, useMemo as T, useEffect as g } from "react";
 import { mergeRefs as L } from "@react-aria/utils";
-import { ReactSdkContext as _ } from "@webstudio-is/react-sdk/runtime";
-import { patchDomEvents as C, executeDomEvents as w } from "./html-embed-patchers.js";
-const M = {
-  scriptTestIdPrefix: "client-"
-}, O = (e) => new Promise((t, n) => {
+import { ReactSdkContext as C } from "@webstudio-is/react-sdk/runtime";
+import { patchDomEvents as w, executeDomEvents as M } from "./html-embed-patchers.js";
+const O = "client-", H = (e) => new Promise((t, n) => {
   const r = document.createElement("script"), i = e.hasAttribute("src"), a = e.type === "module";
   for (const { name: c, value: o } of e.attributes)
     r.setAttribute(c, o);
-  if (r.dataset.testid !== void 0 && (r.dataset.testid = `${M.scriptTestIdPrefix}${r.dataset.testid}`), i)
+  if (r.dataset.testid !== void 0 && (r.dataset.testid = `${O}${r.dataset.testid}`), i)
     r.addEventListener("load", () => {
       t();
     }), r.addEventListener("error", n);
@@ -31,20 +29,20 @@ const M = {
   e.replaceWith(r), i === !1 && t();
 }), d = [];
 let u = !1;
-const H = async (e) => {
+const A = async (e) => {
   if (d.push(...e), await Promise.resolve(), !u) {
-    for (C(), u = !0; d.length > 0; )
+    for (w(), u = !0; d.length > 0; )
       await d.shift()();
-    w(), u = !1;
+    M(), u = !1;
   }
 }, I = (e) => {
   const t = e.querySelectorAll("script"), n = [], r = [];
   t.forEach((i) => {
-    (i.hasAttribute("async") ? r : n).push(() => O(i));
+    (i.hasAttribute("async") ? r : n).push(() => H(i));
   });
   for (const i of r)
     i();
-  H(n);
+  A(n);
 }, P = (e) => {
   const { code: t, innerRef: n, ...r } = e;
   return /* @__PURE__ */ s("div", { ref: n, ...r, style: { display: "block", padding: 20 }, children: 'Open the "Settings" panel to insert HTML code.' });
@@ -84,9 +82,9 @@ const H = async (e) => {
       dangerouslySetInnerHTML: { __html: t ?? "" }
     }
   );
-}, h = v, A = b(
+}, h = v, U = b(
   (e, t) => {
-    const { code: n, executeScriptOnCanvas: r, clientOnly: i, children: a, ...c } = e, { renderer: o, isSafeMode: y } = x(_), R = p(), [S] = E(R);
+    const { code: n, executeScriptOnCanvas: r, clientOnly: i, children: a, ...c } = e, { renderer: o, isSafeMode: y } = x(C), R = p(), [S] = E(R);
     return n === void 0 || String(n).trim().length === 0 ? /* @__PURE__ */ s(P, { innerRef: t, ...c }) : S ? i !== !0 ? /* @__PURE__ */ s(v, { innerRef: t, code: n, ...c }) : /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(m, { innerRef: t, code: n, ...c }) }) : y ? /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(
       h,
       {
@@ -112,8 +110,7 @@ const H = async (e) => {
     ) });
   }
 );
-A.displayName = "HtmlEmbed";
+U.displayName = "HtmlEmbed";
 export {
-  A as HtmlEmbed,
-  M as __testing__
+  U as HtmlEmbed
 };

package/lib/index.js

@@ -0,0 +1,6 @@
+import { createLink as t } from "./create-link.js";
+import { LinkCurrentUrlContext as n } from "./link-current-url.js";
+export {
+  n as LinkCurrentUrlContext,
+  t as createLink
+};

package/lib/link-current-url.js

@@ -0,0 +1,7 @@
+import { createContext as t } from "react";
+const r = t(
+  void 0
+);
+export {
+  r as LinkCurrentUrlContext
+};

package/lib/link-utils.js

@@ -0,0 +1,25 @@
+import { resolveLocalLinkUrl as p, isLocalLinkActive as u } from "@webstudio-is/sdk/link-utils";
+const m = (t, r, o) => {
+  const { href: s, "aria-current": a, className: n, ...i } = t, c = p(s, r, o), e = u(r, c), l = [n, e ? "active" : void 0].filter(Boolean).join(" ");
+  return {
+    linkProps: i,
+    currentLinkProps: {
+      ...e ? { "aria-current": a ?? "page" } : {},
+      ...l === "" ? {} : { className: l }
+    }
+  };
+}, L = ({
+  prefetch: t,
+  discover: r,
+  reloadDocument: o,
+  replace: s,
+  preventScrollReset: a,
+  relative: n,
+  state: i,
+  viewTransition: c,
+  ...e
+}) => e;
+export {
+  m as getCurrentLinkProps,
+  L as stripRouterOnlyProps
+};

package/lib/link.js

@@ -1,15 +1,49 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const a = n((e, o) => {
-  const {
-    children: s,
+import { jsx as w } from "react/jsx-runtime";
+import { forwardRef as L, useContext as f } from "react";
+import { ReactSdkContext as C } from "@webstudio-is/react-sdk/runtime";
+import { isInternalHref as U } from "@webstudio-is/sdk/link-utils";
+import { stripRouterOnlyProps as p, getCurrentLinkProps as P } from "./link-utils.js";
+import { LinkCurrentUrlContext as x } from "./link-current-url.js";
+const R = () => {
+  if (!(typeof window > "u"))
+    return window.location.href;
+}, $ = (e) => {
+  if (e !== void 0)
+    return new URL(e, "https://webstudio.local");
+}, g = L((e, l) => {
+  const d = f(x), { assetBaseUrl: m } = f(C), {
+    children: h,
     // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
-    $webstudio$canvasOnly$assetId: i,
-    ...r
-  } = e;
-  return /* @__PURE__ */ t("a", { ...r, href: r.href ?? "#", ref: o, children: s });
+    $webstudio$canvasOnly$assetId: v,
+    "aria-current": o,
+    className: s,
+    ...n
+  } = e, i = n.href !== void 0, t = i ? String(n.href) : "#", k = d ?? R(), r = $(k);
+  let a = p(n), c = {
+    ...o === void 0 ? {} : { "aria-current": o },
+    ...s === void 0 ? {} : { className: s }
+  };
+  if (r && i && U(t, m)) {
+    const u = P(
+      { ...n, href: t, "aria-current": o, className: s },
+      r,
+      new URL(t, r)
+    );
+    a = p(u.linkProps), c = u.currentLinkProps;
+  }
+  return /* @__PURE__ */ w(
+    "a",
+    {
+      ...a,
+      ...c,
+      href: t === "" && r ? `${r.pathname}${r.search}` : t,
+      ref: l,
+      children: h
+    }
+  );
 });
-a.displayName = "Link";
+g.displayName = "Link";
 export {
-  a as Link
+  g as BaseLink,
+  g as Link
 };

package/lib/time.js

@@ -1,6 +1,6 @@
-import { jsx as S } from "react/jsx-runtime";
-import { forwardRef as A } from "react";
-const N = [
+import { jsx as B } from "react/jsx-runtime";
+import { forwardRef as C, useState as g, useEffect as O } from "react";
+const F = [
   "af",
   "am",
   "ar",
@@ -72,7 +72,7 @@ const N = [
   "uz",
   "vi",
   "zh"
-], g = [
+], p = [
   "AF",
   "AL",
   "DZ",
@@ -272,13 +272,24 @@ const N = [
   "YE",
   "ZM",
   "ZW"
-], 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) => {
+], Y = "dateTime attribute is not set", b = "", h = "en", L = "GB", Z = "medium", k = "none", D = "UTC", G = "visitor", K = (t) => F.includes(t) ? t : h, w = (t) => p.includes(t) ? t : L, H = (t) => {
   if (["full", "long", "medium", "short"].includes(t))
     return t;
-}, R = (t) => {
+}, V = (t) => {
   if (["full", "long", "medium", "short"].includes(t))
     return t;
-}, U = (t) => {
+}, d = (t) => {
+  if (typeof t != "string")
+    return D;
+  const e = t.trim();
+  if (e === "" || e === G)
+    return D;
+  try {
+    return new Intl.DateTimeFormat(void 0, { timeZone: e }), e;
+  } catch {
+    return D;
+  }
+}, _ = (t) => {
   if (t === "")
     return;
   let e = new Date(t);
@@ -290,65 +301,87 @@ const N = [
   }
   if (Number.isNaN(e.getTime()) === !1)
     return e;
-}, Y = (t, e, n = "en-US") => {
-  const s = (r, o = 2) => String(r).padStart(o, "0"), T = new Intl.DateTimeFormat(n, {
+}, P = (t, e, n = "en-US", s = D) => {
+  const r = (m, c = 2) => String(m).padStart(c, "0"), M = new Intl.DateTimeFormat("en-US", {
+    timeZone: s,
+    year: "numeric",
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hourCycle: "h23"
+  }).formatToParts(t), o = (m) => {
+    var c;
+    return ((c = M.find((U) => U.type === m)) == null ? void 0 : c.value) ?? "";
+  }, N = o("year"), f = Number(o("month")), S = Number(o("day")), A = Number(o("hour")), T = Number(o("minute")), i = Number(o("second")), E = new Intl.DateTimeFormat(n, {
+    timeZone: s,
     weekday: "long"
-  }).format(t), D = new Intl.DateTimeFormat(n, {
+  }).format(t), I = new Intl.DateTimeFormat(n, {
+    timeZone: s,
     weekday: "short"
-  }).format(t), l = new Intl.DateTimeFormat(n, {
+  }).format(t), u = new Intl.DateTimeFormat(n, {
+    timeZone: s,
     month: "long"
-  }).format(t), M = new Intl.DateTimeFormat(n, {
+  }).format(t), l = new Intl.DateTimeFormat(n, {
+    timeZone: s,
     month: "short"
-  }).format(t), m = {
-    YYYY: t.getFullYear(),
-    YY: String(t.getFullYear()).slice(-2),
-    MMMM: l,
-    MMM: M,
-    MM: s(t.getMonth() + 1),
-    M: t.getMonth() + 1,
-    DDDD: T,
-    DDD: D,
-    DD: s(t.getDate()),
-    D: t.getDate(),
-    HH: s(t.getHours()),
-    H: t.getHours(),
-    mm: s(t.getMinutes()),
-    m: t.getMinutes(),
-    ss: s(t.getSeconds()),
-    s: t.getSeconds()
-  }, a = Object.keys(m).sort((r, o) => o.length - r.length), i = new RegExp(`\\b(${a.join("|")})\\b`, "g");
-  return e.replace(i, (r) => String(m[r]));
-}, H = A(
+  }).format(t), a = {
+    YYYY: N,
+    YY: N.slice(-2),
+    MMMM: u,
+    MMM: l,
+    MM: r(f),
+    M: f,
+    DDDD: E,
+    DDD: I,
+    DD: r(S),
+    D: S,
+    HH: r(A),
+    H: A,
+    mm: r(T),
+    m: T,
+    ss: r(i),
+    s: i
+  }, y = Object.keys(a).sort((m, c) => c.length - m.length), R = new RegExp(`\\b(${y.join("|")})\\b`, "g");
+  return e.replace(R, (m) => String(a[m]));
+}, J = C(
   ({
-    language: t = c,
-    country: e = u,
-    dateStyle: n = G,
-    timeStyle: s = I,
-    format: T,
-    datetime: D = f,
-    ...l
-  }, M) => {
-    const m = `${L(t)}-${h(
+    language: t = h,
+    country: e = L,
+    dateStyle: n = Z,
+    timeStyle: s = k,
+    timeZone: r = D,
+    format: M,
+    datetime: o = Y,
+    ...N
+  }, f) => {
+    const [S, A] = g(), T = `${K(t)}-${w(
       e
-    )}`, a = {
-      dateStyle: B(n),
-      timeStyle: R(s)
-    }, i = D === null ? E : D.toString(), r = U(i);
-    let o = i;
-    if (r)
-      if (T)
+    )}`, i = typeof r == "string" && r.trim() === G, E = d(i ? S : r), I = {
+      dateStyle: H(n),
+      timeStyle: V(s),
+      timeZone: E
+    };
+    O(() => {
+      i && A(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    }, [i]);
+    const u = o === null ? b : o.toString(), l = _(u);
+    let a = u;
+    if (l)
+      if (M)
         try {
-          o = Y(r, T, m);
+          a = P(l, M, T, E);
         } catch {
         }
       else
         try {
-          o = new Intl.DateTimeFormat(m, a).format(r);
+          a = new Intl.DateTimeFormat(T, I).format(l);
         } catch {
         }
-    return /* @__PURE__ */ S("time", { ref: M, dateTime: i, ...l, children: o });
+    return /* @__PURE__ */ B("time", { ref: f, dateTime: u, ...N, children: a });
   }
 );
 export {
-  H as Time
+  J as Time
 };

package/lib/time.ws.js

@@ -1,6 +1,6 @@
-import { time as e } from "@webstudio-is/sdk/normalize.css";
-import { props as t } from "./__generated__/time.props.js";
-const r = {
+import { time as t } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/time.props.js";
+const n = {
   category: "localization",
   description: "Converts machine-readable date and time to a human-readable format.",
   contentModel: {
@@ -8,7 +8,7 @@ const r = {
     children: []
   },
   presetStyle: {
-    time: e
+    time: t
   },
   initialProps: [
     "datetime",
@@ -16,10 +16,11 @@ const r = {
     "country",
     "dateStyle",
     "timeStyle",
+    "timeZone",
     "format"
   ],
   props: {
-    ...t,
+    ...e,
     datetime: {
       type: "string",
       control: "text",
@@ -27,27 +28,36 @@ const r = {
       contentMode: !0
     },
     language: {
-      ...t.language,
+      ...e.language,
       contentMode: !0
     },
     country: {
-      ...t.country,
+      ...e.country,
       contentMode: !0
     },
     dateStyle: {
-      ...t.dateStyle,
+      ...e.dateStyle,
       contentMode: !0
     },
     timeStyle: {
-      ...t.timeStyle,
+      ...e.timeStyle,
+      contentMode: !0
+    },
+    timeZone: {
+      required: !1,
+      control: "timeZone",
+      type: "string",
+      defaultValue: "UTC",
+      options: ["UTC", "visitor"],
+      description: 'Timezone used to display the date. Use "visitor" to display each visitor’s browser timezone after the page loads, or select/type an IANA timezone like "Europe/Berlin".',
       contentMode: !0
     },
     format: {
-      ...t.format,
+      ...e.format,
       contentMode: !0
     }
   }
 };
 export {
-  r as meta
+  n as meta
 };

package/lib/types/checkbox.d.ts

@@ -1,4 +1,4 @@
 export declare const defaultTag = "input";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type"> & {
     value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/create-link.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef, type ComponentType, type ForwardRefExoticComponent, type LegacyRef, type RefAttributes } from "react";
+import { BaseLink } from "./link";
+import { type UrlParts } from "@webstudio-is/sdk/link-utils";
+export type LinkProps = Omit<ComponentPropsWithoutRef<typeof BaseLink>, "target"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    discover?: "render" | "none";
+    reloadDocument?: boolean;
+    replace?: boolean;
+    preventScrollReset?: boolean;
+    relative?: "route" | "path";
+    state?: unknown;
+    viewTransition?: boolean;
+};
+type LinkComponent = ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+type RouterTo = string | Partial<UrlParts>;
+type RouterLinkComponentProps = Omit<LinkProps, "href" | "target"> & {
+    target?: ComponentPropsWithoutRef<"a">["target"];
+    to: RouterTo;
+    ref?: LegacyRef<HTMLAnchorElement>;
+};
+/**
+ * Creates a framework-aware Link.
+ *
+ * Internal route links render the framework Link component so Remix/React
+ * Router keep their own navigation, discovery, prefetch, and transition
+ * behavior. Hash-only, external, and asset links fall back to BaseLink because
+ * they should behave like native anchors while still supporting current-link
+ * styling.
+ */
+export declare const createLink: ({ Link, useLocation, useResolvedPath, }: {
+    Link: ComponentType<RouterLinkComponentProps>;
+    useLocation: () => UrlParts;
+    useResolvedPath: (href: string) => UrlParts;
+}) => LinkComponent;
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,3 @@
+import { createLink, type LinkProps } from "./create-link";
+import { LinkCurrentUrlContext } from "./link-current-url";
+export { createLink, LinkCurrentUrlContext, type LinkProps };

package/lib/types/link-current-url.d.ts

@@ -0,0 +1 @@
+export declare const LinkCurrentUrlContext: import("react").Context<string | URL | undefined>;

package/lib/types/link-utils.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { type UrlParts } from "@webstudio-is/sdk/link-utils";
+type AnchorProps = ComponentPropsWithoutRef<"a">;
+export declare const getCurrentLinkProps: <Props extends {
+    href: string;
+    "aria-current"?: AnchorProps["aria-current"];
+    className?: string;
+}>(props: Props, location: UrlParts, resolvedPath: UrlParts) => {
+    linkProps: Omit<Props, "className" | "aria-current" | "href">;
+    currentLinkProps: {
+        className?: string | undefined;
+        "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    };
+};
+export declare const stripRouterOnlyProps: <Props extends {
+    prefetch?: unknown;
+    discover?: unknown;
+    reloadDocument?: unknown;
+    replace?: unknown;
+    preventScrollReset?: unknown;
+    relative?: unknown;
+    state?: unknown;
+    viewTransition?: unknown;
+}>({ prefetch, discover, reloadDocument, replace, preventScrollReset, relative, state, viewTransition, ...props }: Props) => Omit<Props, "replace" | "state" | "relative" | "prefetch" | "discover" | "reloadDocument" | "preventScrollReset" | "viewTransition">;
+export {};

package/lib/types/link.d.ts

@@ -1,11 +1,23 @@
 export declare const defaultTag = "a";
-export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
+/**
+ * Plain Webstudio anchor implementation.
+ *
+ * Used by base components, SSG, builder preview, and framework-link fallbacks.
+ * It owns current-link styling for native anchors, while framework packages
+ * keep their own Link components for route navigation and prefetch behavior.
+ */
+export declare const BaseLink: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "download" | "target"> & {
     target?: "_self" | "_blank" | "_parent" | "_top";
     download?: boolean;
     prefetch?: "none" | "intent" | "render" | "viewport";
+    discover?: "render" | "none";
     preventScrollReset?: boolean;
     reloadDocument?: boolean;
     replace?: boolean;
+    relative?: "route" | "path";
+    state?: unknown;
+    viewTransition?: boolean;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export { BaseLink as Link };

package/lib/types/radio-button.d.ts

@@ -1,4 +1,4 @@
 export declare const defaultTag = "input";
-export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
+export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value" | "type"> & {
     value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/time.d.ts

@@ -12,6 +12,13 @@ type TimeProps = {
     country?: Country;
     dateStyle?: DateStyle;
     timeStyle?: TimeStyle;
+    /**
+     * Time zone used to format the date.
+     *
+     * Use "UTC" for deterministic UTC output, "visitor" to use the browser time
+     * zone after hydration, or an IANA time zone like "Europe/Berlin".
+     */
+    timeZone?: string;
     /**
      * Custom format template. Overrides Date Style and Time Style.
      *
@@ -29,6 +36,7 @@ type TimeProps = {
 export declare const Time: import("react").ForwardRefExoticComponent<TimeProps & import("react").RefAttributes<HTMLTimeElement>>;
 export declare const __testing__: {
     parseDate: (datetimeString: string) => Date | undefined;
-    formatDate: (date: Date, template: string, locale?: string) => string;
+    formatDate: (date: Date, template: string, locale?: string, timeZone?: string) => string;
+    timeZoneOrDefault: (timeZone: unknown) => string;
 };
 export {};

package/lib/types/vimeo-preview-image.d.ts

@@ -1,8 +1,22 @@
 export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponent<Omit<{
+    src?: string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    quality?: number | undefined;
+    sizes?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
+    optimize?: boolean | undefined;
+    loading?: "eager" | "lazy" | undefined | undefined;
+    decoding?: "async" | "auto" | "sync" | undefined | undefined;
     key?: import("react").Key | null | undefined;
+    alt?: string | undefined | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    fetchPriority?: "high" | "low" | "auto" | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    srcSet?: string | undefined | undefined;
+    useMap?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -10,7 +24,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     accessKey?: string | undefined | undefined;
     autoFocus?: boolean | undefined | undefined;
     className?: string | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -265,20 +279,6 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    height?: number | string | undefined | undefined;
-    width?: number | string | undefined | undefined;
-    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    useMap?: string | undefined | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
-    alt?: string | undefined | undefined;
-    src?: string | undefined | undefined;
-    loading?: "eager" | "lazy" | undefined | undefined;
-    decoding?: "async" | "auto" | "sync" | undefined | undefined;
-    fetchPriority?: "high" | "low" | "auto" | undefined;
-    sizes?: string | undefined | undefined;
-    srcSet?: string | undefined | undefined;
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 } & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.267.0",
+  "version": "0.269.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,6 +14,11 @@
   ],
   "exports": {
     ".": {
+      "webstudio": "./src/index.ts",
+      "types": "./lib/types/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./components": {
       "webstudio": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
       "import": "./lib/components.js"
@@ -44,10 +49,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.267.0",
-    "@webstudio-is/image": "0.267.0",
-    "@webstudio-is/sdk": "0.267.0",
-    "@webstudio-is/react-sdk": "0.267.0"
+    "@webstudio-is/icons": "0.269.0",
+    "@webstudio-is/react-sdk": "0.269.0",
+    "@webstudio-is/image": "0.269.0",
+    "@webstudio-is/sdk": "0.269.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -58,10 +63,10 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.1.2",
-    "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/design-system": "0.0.0",
+    "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "0.94.0",
-    "@webstudio-is/template": "0.267.0",
+    "@webstudio-is/template": "0.269.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {