@webstudio-is/sdk-components-animation 0.206.0 → 0.208.0

package/lib/__generated__/animate-text.props.js

@@ -0,0 +1,29 @@
+const e = {
+  charWindow: {
+    required: !1,
+    control: "number",
+    type: "number",
+    defaultValue: 5
+  },
+  easing: {
+    required: !1,
+    control: "select",
+    type: "string",
+    defaultValue: "linear",
+    options: [
+      "linear",
+      "easeIn",
+      "easeInCubic",
+      "easeInQuart",
+      "easeOut",
+      "easeOutCubic",
+      "easeOutQuart",
+      "ease",
+      "easeInOutCubic",
+      "easeInOutQuart"
+    ]
+  }
+};
+export {
+  e as props
+};

package/lib/animate-children.js

@@ -1,21 +1,21 @@
 import { jsx as r } from "react/jsx-runtime";
+import { animationCanPlayOnCanvasAttribute as o } from "@webstudio-is/react-sdk";
 import { forwardRef as m } from "react";
-import { animationCanPlayOnCanvasProperty as o } from "./shared/consts.js";
 const c = m(
-  ({ debug: t = !1, action: n, ...i }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...i })
+  ({ debug: n = !1, action: t, ...e }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...e })
 ), a = "AnimateChildren";
 c.displayName = a;
-const e = "@webstudio-is/sdk-components-animation", h = {
-  onNavigatorUnselect: (t, n) => {
-    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
-      n.instancePath[0],
+const i = "@webstudio-is/sdk-components-animation", h = {
+  onNavigatorUnselect: (n, t) => {
+    t.instancePath.length > 0 && t.instancePath[0].component === `${i}:${a}` && n.setMemoryProp(
+      t.instancePath[0],
       o,
       void 0
     );
   },
-  onNavigatorSelect: (t, n) => {
-    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
-      n.instancePath[0],
+  onNavigatorSelect: (n, t) => {
+    t.instancePath.length > 0 && t.instancePath[0].component === `${i}:${a}` && n.setMemoryProp(
+      t.instancePath[0],
       o,
       !0
     );

package/lib/animate-text.js

@@ -0,0 +1,9 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+const t = i(
+  ({ charWindow: m = 5, easing: n = "linear", ...e }, r) => /* @__PURE__ */ a("div", { ref: r, ...e })
+), o = "AnimateText";
+t.displayName = o;
+export {
+  t as AnimateText
+};

package/lib/animate-text.ws.js

@@ -0,0 +1,17 @@
+import { TextIcon as e } from "@webstudio-is/icons/svg";
+import { props as o } from "./__generated__/animate-text.props.js";
+const i = {
+  category: "general",
+  type: "container",
+  description: "Animate Text",
+  icon: e,
+  order: 6,
+  label: "Animate Text"
+}, n = {
+  props: o,
+  initialProps: ["charWindow", "easing"]
+};
+export {
+  i as meta,
+  n as propsMeta
+};

package/lib/components.js

@@ -1,4 +1,6 @@
-import { AnimateChildren as i } from "./animate-children.js";
+import { AnimateChildren as t } from "./animate-children.js";
+import { AnimateText as o } from "./animate-text.js";
 export {
-  i as AnimateChildren
+  t as AnimateChildren,
+  o as AnimateText
 };

package/lib/metas.js

@@ -1,4 +1,6 @@
-import { meta as m } from "./scroll.ws.js";
+import { meta as a } from "./animate-children.ws.js";
+import { meta as r } from "./animate-text.ws.js";
 export {
-  m as AnimateChildren
+  a as AnimateChildren,
+  r as AnimateText
 };

package/lib/props.js

@@ -1,4 +1,6 @@
-import { propsMeta as a } from "./scroll.ws.js";
+import { propsMeta as t } from "./animate-children.ws.js";
+import { propsMeta as o } from "./animate-text.ws.js";
 export {
-  a as AnimateChildren
+  t as AnimateChildren,
+  o as AnimateText
 };

package/lib/types/__generated__/animate-children.props.d.ts

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

package/lib/types/__generated__/animate-text.props.d.ts

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

package/lib/types/animate-children.d.ts

@@ -1,4 +1,4 @@
-import type { Hook } from "@webstudio-is/react-sdk";
+import { type Hook } from "@webstudio-is/react-sdk";
 import type { AnimationAction } from "@webstudio-is/sdk";
 type ScrollProps = {
     debug?: boolean;

package/lib/types/animate-text.d.ts

@@ -0,0 +1,19 @@
+declare const easings: {
+    linear: boolean;
+    easeIn: boolean;
+    easeInCubic: boolean;
+    easeInQuart: boolean;
+    easeOut: boolean;
+    easeOutCubic: boolean;
+    easeOutQuart: boolean;
+    ease: boolean;
+    easeInOutCubic: boolean;
+    easeInOutQuart: boolean;
+};
+type AnimateChildrenProps = {
+    charWindow?: number;
+    easing?: keyof typeof easings;
+    children: React.ReactNode;
+};
+export declare const AnimateText: import("react").ForwardRefExoticComponent<AnimateChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/animate-text.ws.d.ts

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

package/lib/types/components.d.ts

@@ -1 +1,2 @@
 export { AnimateChildren } from "./animate-children";
+export { AnimateText } from "./animate-text";

package/lib/types/metas.d.ts

@@ -1 +1,2 @@
-export { meta as AnimateChildren } from "./scroll.ws";
+export { meta as AnimateChildren } from "./animate-children.ws";
+export { meta as AnimateText } from "./animate-text.ws";

package/lib/types/props.d.ts

@@ -1 +1,2 @@
-export { propsMeta as AnimateChildren } from "./scroll.ws";
+export { propsMeta as AnimateChildren } from "./animate-children.ws";
+export { propsMeta as AnimateText } from "./animate-text.ws";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.206.0",
+  "version": "0.208.0",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,31 +46,32 @@
   },
   "dependencies": {
     "change-case": "^5.4.4",
+    "nanostores": "^0.11.3",
     "react-error-boundary": "^5.0.0",
-    "scroll-timeline-polyfill": "^1.1.0",
-    "@webstudio-is/css-engine": "0.206.0",
-    "@webstudio-is/react-sdk": "0.206.0",
-    "@webstudio-is/icons": "0.206.0",
-    "@webstudio-is/sdk": "0.206.0"
+    "shallow-equal": "^3.1.0",
+    "@webstudio-is/css-engine": "0.208.0",
+    "@webstudio-is/icons": "0.208.0",
+    "@webstudio-is/sdk": "0.208.0",
+    "@webstudio-is/react-sdk": "0.208.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
-    "@vitest/browser": "^3.0.4",
+    "@vitest/browser": "^3.0.8",
     "fast-glob": "^3.3.2",
     "playwright": "^1.50.1",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "type-fest": "^4.32.0",
-    "vitest": "^3.0.4",
+    "type-fest": "^4.37.0",
+    "vitest": "^3.0.8",
     "zod": "^3.22.4",
-    "@webstudio-is/design-system": "0.0.0",
     "@webstudio-is/css-data": "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/sdk-components-react": "0.206.0",
-    "@webstudio-is/template": "0.206.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/sdk-components-react": "0.208.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/template": "0.208.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",

package/lib/shared/consts.js

@@ -1,4 +0,0 @@
-const a = "data-ws-animation-can-play-on-canvas";
-export {
-  a as animationCanPlayOnCanvasProperty
-};

package/lib/types/shared/consts.d.ts

@@ -1 +0,0 @@
-export declare const animationCanPlayOnCanvasProperty = "data-ws-animation-can-play-on-canvas";