@webstudio-is/sdk-components-react 0.189.0 → 0.191.0

package/lib/time.js

@@ -0,0 +1,319 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as M } from "react";
+const c = [
+  "af",
+  "am",
+  "ar",
+  "az",
+  "be",
+  "bg",
+  "bn",
+  "bs",
+  "ca",
+  "cs",
+  "cy",
+  "da",
+  "de",
+  "el",
+  "en",
+  "es",
+  "et",
+  "eu",
+  "fa",
+  "fi",
+  "fr",
+  "ga",
+  "gl",
+  "gu",
+  "he",
+  "hi",
+  "hr",
+  "hu",
+  "hy",
+  "id",
+  "is",
+  "it",
+  "ja",
+  "ka",
+  "kk",
+  "km",
+  "kn",
+  "ko",
+  "ky",
+  "lb",
+  "lt",
+  "lv",
+  "mk",
+  "ml",
+  "mn",
+  "mr",
+  "ms",
+  "mt",
+  "nb",
+  "nl",
+  "nn",
+  "pl",
+  "pt",
+  "ro",
+  "ru",
+  "si",
+  "sk",
+  "sl",
+  "sq",
+  "sr",
+  "sv",
+  "sw",
+  "ta",
+  "te",
+  "th",
+  "tr",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  "zh"
+], E = [
+  "AF",
+  "AL",
+  "DZ",
+  "AS",
+  "AD",
+  "AO",
+  "AI",
+  "AQ",
+  "AG",
+  "AR",
+  "AM",
+  "AW",
+  "AU",
+  "AT",
+  "AZ",
+  "BS",
+  "BH",
+  "BD",
+  "BB",
+  "BY",
+  "BE",
+  "BZ",
+  "BJ",
+  "BM",
+  "BT",
+  "BO",
+  "BA",
+  "BW",
+  "BR",
+  "BN",
+  "BG",
+  "BF",
+  "BI",
+  "CV",
+  "KH",
+  "CM",
+  "CA",
+  "KY",
+  "CF",
+  "TD",
+  "CL",
+  "CN",
+  "CO",
+  "KM",
+  "CG",
+  "CD",
+  "CR",
+  "HR",
+  "CU",
+  "CY",
+  "CZ",
+  "DK",
+  "DJ",
+  "DM",
+  "DO",
+  "EC",
+  "EG",
+  "SV",
+  "GQ",
+  "ER",
+  "EE",
+  "SZ",
+  "ET",
+  "FJ",
+  "FI",
+  "FR",
+  "GA",
+  "GM",
+  "GE",
+  "DE",
+  "GH",
+  "GR",
+  "GD",
+  "GT",
+  "GN",
+  "GW",
+  "GY",
+  "HT",
+  "HN",
+  "HU",
+  "IS",
+  "IN",
+  "ID",
+  "IR",
+  "IQ",
+  "IE",
+  "IL",
+  "IT",
+  "JM",
+  "JP",
+  "JO",
+  "KZ",
+  "KE",
+  "KI",
+  "KP",
+  "KR",
+  "KW",
+  "KG",
+  "LA",
+  "LV",
+  "LB",
+  "LS",
+  "LR",
+  "LY",
+  "LI",
+  "LT",
+  "LU",
+  "MG",
+  "MW",
+  "MY",
+  "MV",
+  "ML",
+  "MT",
+  "MH",
+  "MR",
+  "MU",
+  "MX",
+  "FM",
+  "MD",
+  "MC",
+  "MN",
+  "ME",
+  "MA",
+  "MZ",
+  "MM",
+  "NA",
+  "NR",
+  "NP",
+  "NL",
+  "NZ",
+  "NI",
+  "NE",
+  "NG",
+  "NO",
+  "OM",
+  "PK",
+  "PW",
+  "PA",
+  "PG",
+  "PY",
+  "PE",
+  "PH",
+  "PL",
+  "PT",
+  "QA",
+  "RO",
+  "RU",
+  "RW",
+  "KN",
+  "LC",
+  "VC",
+  "WS",
+  "SM",
+  "ST",
+  "SA",
+  "SN",
+  "RS",
+  "SC",
+  "SL",
+  "SG",
+  "SK",
+  "SI",
+  "SB",
+  "SO",
+  "ZA",
+  "SS",
+  "ES",
+  "LK",
+  "SD",
+  "SR",
+  "SE",
+  "CH",
+  "SY",
+  "TW",
+  "TJ",
+  "TZ",
+  "TH",
+  "TL",
+  "TG",
+  "TO",
+  "TT",
+  "TN",
+  "TR",
+  "TM",
+  "TV",
+  "UG",
+  "UA",
+  "AE",
+  "GB",
+  "US",
+  "UY",
+  "UZ",
+  "VU",
+  "VA",
+  "VE",
+  "VN",
+  "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) => {
+  if (["full", "long", "medium", "short"].includes(t))
+    return t;
+}, R = (t) => {
+  if (["full", "long", "medium", "short"].includes(t))
+    return t;
+}, C = (t) => {
+  if (t === "")
+    return;
+  let e = new Date(t);
+  if (Number.isNaN(e.getTime()) === !1)
+    return e;
+  if (/^\d+$/.test(t)) {
+    let n = Number(t);
+    t.length === 10 && (n *= 1e3), e = new Date(n);
+  }
+  if (Number.isNaN(e.getTime()) === !1)
+    return e;
+}, O = M(
+  ({
+    language: t = i,
+    country: e = A,
+    dateStyle: n = L,
+    timeStyle: l = f,
+    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 });
+  }
+);
+export {
+  O as Time
+};

package/lib/time.ws.js

@@ -0,0 +1,22 @@
+import { CalendarIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { time as a } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/time.props.js";
+const r = {
+  time: a
+}, s = {
+  category: "data",
+  type: "container",
+  description: "Converts machine-readable date and time to a human-readable format.",
+  icon: t,
+  states: e,
+  presetStyle: r,
+  order: 5
+}, d = {
+  props: o,
+  initialProps: ["datetime", "language", "country", "dateStyle", "timeStyle"]
+};
+export {
+  s as meta,
+  d as propsMeta
+};

package/lib/types/__generated__/xml-time.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/react-sdk";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components.d.ts

@@ -33,6 +33,7 @@ export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";
 export { XmlNode } from "./xml-node";
+export { XmlTime } from "./xml-time";
 export { Time } from "./time";
 export { Select } from "./select";
 export { Option } from "./option";

package/lib/types/metas.d.ts

@@ -34,6 +34,7 @@ export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { meta as XmlNode } from "./xml-node.ws";
+export { meta as XmlTime } from "./xml-time.ws";
 export { meta as Time } from "./time.ws";
 export { meta as Select } from "./select.ws";
 export { meta as Option } from "./option.ws";

package/lib/types/props.d.ts

@@ -33,6 +33,7 @@ export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
 export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { propsMeta as XmlNode } from "./xml-node.ws";
+export { propsMeta as XmlTime } from "./xml-time.ws";
 export { propsMeta as Time } from "./time.ws";
 export { propsMeta as Select } from "./select.ws";
 export { propsMeta as Option } from "./option.ws";

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

@@ -1,110 +1,110 @@
 export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponent<Omit<{
-    slot?: string | undefined;
+    slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
-    title?: string | undefined;
+    title?: string | undefined | undefined;
     key?: import("react").Key | null | undefined;
-    defaultChecked?: boolean | undefined;
+    defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
-    className?: string | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
-    id?: string | undefined;
-    lang?: string | undefined;
-    nonce?: string | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
+    tabIndex?: number | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
+    about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    color?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-    is?: string | undefined;
-    "aria-activedescendant"?: string | undefined;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCapitalize?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    color?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-    "aria-braillelabel"?: string | undefined;
-    "aria-brailleroledescription"?: string | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colindextext"?: string | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-description"?: string | undefined;
-    "aria-details"?: string | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-    "aria-errormessage"?: string | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined;
+    "aria-flowto"?: string | undefined | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-label"?: string | undefined;
-    "aria-labelledby"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
     "aria-modal"?: (boolean | "true" | "false") | undefined;
     "aria-multiline"?: (boolean | "true" | "false") | undefined;
     "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowindextext"?: string | undefined;
-    "aria-rowspan"?: number | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
     "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
-    } | undefined;
+    } | undefined | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;
     onCut?: import("react").ClipboardEventHandler<HTMLImageElement> | undefined;
@@ -265,18 +265,18 @@ 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;
-    width?: number | string | undefined;
+    height?: number | string | undefined | undefined;
+    width?: number | string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-    useMap?: string | undefined;
+    useMap?: string | undefined | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
-    alt?: string | undefined;
-    src?: string | undefined;
-    loading?: "eager" | "lazy" | undefined;
-    decoding?: "async" | "auto" | "sync" | undefined;
-    fetchPriority?: ("high" | "low" | "auto") | undefined;
-    sizes?: string | undefined;
-    srcSet?: string | 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;
 } & {

package/lib/types/xml-time.d.ts

@@ -0,0 +1,6 @@
+type XmlTimeProps = {
+    dateStyle?: "long" | "short";
+    datetime: string;
+};
+export declare const XmlTime: import("react").ForwardRefExoticComponent<XmlTimeProps & import("react").RefAttributes<HTMLTimeElement>>;
+export {};

package/lib/types/xml-time.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/vimeo-play-button.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as e, useContext as n } from "react";
+import { VimeoContext as m } from "./vimeo.js";
+import { Button as a } from "./button.js";
+const f = e(
+  (o, r) => {
+    const t = n(m);
+    if (t.status === "initial")
+      return /* @__PURE__ */ i(a, { ...o, onClick: t.onInitPlayer, ref: r });
+  }
+);
+f.displayName = "VimeoPlayButton";
+export {
+  f as VimeoPlayButton
+};

package/lib/vimeo-play-button.ws.js

@@ -0,0 +1,33 @@
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { props as o } from "./__generated__/vimeo-play-button.props.js";
+import { ButtonElementIcon as e } from "@webstudio-is/icons/svg";
+import { button as n } from "@webstudio-is/sdk/normalize.css";
+const r = {
+  button: n
+}, m = {
+  category: "hidden",
+  type: "container",
+  invalidAncestors: ["Button"],
+  requiredAncestors: ["Vimeo"],
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Vimeo" }
+    },
+    {
+      relation: "ancestor",
+      component: { $neq: "Button" }
+    }
+  ],
+  label: "Play Button",
+  icon: e,
+  presetStyle: r,
+  states: t
+}, p = {
+  props: o,
+  initialProps: ["id", "className"]
+};
+export {
+  m as meta,
+  p as propsMeta
+};

package/lib/vimeo-preview-image.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as i, useContext as t } from "react";
+import { Image as a } from "./image.js";
+import { VimeoContext as g } from "./vimeo.js";
+const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = i(({ src: A, ...e }, o) => {
+  const r = t(g);
+  return /* @__PURE__ */ m(
+    a,
+    {
+      ...e,
+      src: String(r.previewImageUrl ?? A ?? n),
+      ref: o
+    }
+  );
+});
+s.displayName = "VimeoPreviewImage";
+export {
+  s as VimeoPreviewImage
+};