@webstudio-is/sdk-components-animation 0.0.0-588fe22 → 0.0.0-a5970cb

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

@@ -0,0 +1,48 @@
+const e = {
+  className: {
+    required: !1,
+    control: "text",
+    type: "string",
+    description: "Classes to which the element belongs"
+  },
+  easing: {
+    description: "Easing function applied within the sliding window.",
+    required: !1,
+    control: "select",
+    type: "string",
+    defaultValue: "linear",
+    options: [
+      "linear",
+      "easeIn",
+      "easeInCubic",
+      "easeInQuart",
+      "easeOut",
+      "easeOutCubic",
+      "easeOutQuart",
+      "ease",
+      "easeInOutCubic",
+      "easeInOutQuart"
+    ]
+  },
+  slidingWindow: {
+    description: `Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one part of the text at a time.
+- (1..n]: Animates multiple parts of the text within the sliding window.`,
+    required: !1,
+    control: "number",
+    type: "number",
+    defaultValue: 5
+  },
+  splitBy: {
+    description: "Defines how the text is split for animation (e.g., by character, space, or symbol).",
+    required: !1,
+    control: "select",
+    type: "string",
+    defaultValue: "char",
+    options: ["char", "space", 'symbol "#"', 'symbol "~"']
+  }
+};
+export {
+  e as props
+};

package/lib/__generated__/stagger-animation.props.js

@@ -0,0 +1,40 @@
+const e = {
+  className: {
+    required: !1,
+    control: "text",
+    type: "string",
+    description: "Classes to which the element belongs"
+  },
+  easing: {
+    description: "Easing function applied within the sliding window.",
+    required: !1,
+    control: "select",
+    type: "string",
+    defaultValue: "linear",
+    options: [
+      "linear",
+      "easeIn",
+      "easeInCubic",
+      "easeInQuart",
+      "easeOut",
+      "easeOutCubic",
+      "easeOutQuart",
+      "ease",
+      "easeInOutCubic",
+      "easeInOutQuart"
+    ]
+  },
+  slidingWindow: {
+    description: `Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one child at a time.
+- (1..n]: Animates multiple children within the sliding window.`,
+    required: !1,
+    control: "number",
+    type: "number",
+    defaultValue: 1
+  }
+};
+export {
+  e as props
+};

package/lib/__generated__/video-animation.props.js

@@ -0,0 +1,6 @@
+const e = {
+  timeline: { required: !1, control: "boolean", type: "boolean" }
+};
+export {
+  e as props
+};

package/lib/animate-children.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { animationCanPlayOnCanvasProperty as o } from "@webstudio-is/sdk/runtime";
+const c = m(
+  ({ debug: t = !1, action: n, ...i }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...i })
+), 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],
+      o,
+      void 0
+    );
+  },
+  onNavigatorSelect: (t, n) => {
+    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
+      n.instancePath[0],
+      o,
+      !0
+    );
+  }
+};
+export {
+  c as AnimateChildren,
+  h as hooksAnimateChildren
+};

package/lib/animate-children.ws.js

@@ -0,0 +1,30 @@
+import { AnimationGroupIcon as n } from "@webstudio-is/icons/svg";
+import { animation as i } from "./shared/meta.js";
+const a = {
+  category: "animations",
+  description: "Animation Group component is designed to animate its children.",
+  icon: n,
+  order: 0,
+  label: "Animation Group",
+  contentModel: {
+    category: "instance",
+    children: [
+      "instance",
+      i.AnimateText,
+      i.StaggerAnimation,
+      i.VideoAnimation
+    ]
+  },
+  initialProps: ["action"],
+  props: {
+    action: {
+      required: !1,
+      control: "animationAction",
+      type: "animationAction",
+      description: "Animation Action"
+    }
+  }
+};
+export {
+  a as meta
+};

package/lib/animate-text.js

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

package/lib/animate-text.ws.js

@@ -0,0 +1,20 @@
+import { TextAnimationIcon as o } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/animate-text.props.js";
+const a = {
+  category: "animations",
+  description: "Text animation allows you to split text by char or by word to animate it.",
+  icon: o,
+  order: 1,
+  label: "Text Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div: t },
+  initialProps: ["slidingWindow", "easing", "splitBy"],
+  props: i
+};
+export {
+  a as meta
+};

package/lib/components.js

@@ -1 +1,10 @@
-
+import { AnimateChildren as r } from "./animate-children.js";
+import { AnimateText as i } from "./animate-text.js";
+import { StaggerAnimation as n } from "./stagger-animation.js";
+import { VideoAnimation as x } from "./video-animation.js";
+export {
+  r as AnimateChildren,
+  i as AnimateText,
+  n as StaggerAnimation,
+  x as VideoAnimation
+};

package/lib/hooks.js

@@ -1,4 +1,5 @@
-const o = [];
+import { hooksAnimateChildren as o } from "./animate-children.js";
+const t = [o];
 export {
-  o as hooks
+  t as hooks
 };

package/lib/metas.js

@@ -1 +1,10 @@
-
+import { meta as a } from "./animate-children.ws.js";
+import { meta as o } from "./animate-text.ws.js";
+import { meta as i } from "./stagger-animation.ws.js";
+import { meta as x } from "./video-animation.ws.js";
+export {
+  a as AnimateChildren,
+  o as AnimateText,
+  i as StaggerAnimation,
+  x as VideoAnimation
+};

package/lib/shared/create-progress-animation.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const f = () => e((r, o) => /* @__PURE__ */ t("div", { ref: o, ...r }));
+export {
+  f as createProgressAnimation
+};

package/lib/shared/meta.js

@@ -0,0 +1,13 @@
+const n = (t) => new Proxy(
+  {},
+  {
+    get(o, e) {
+      return `${t}${e}`;
+    }
+  }
+), r = n(
+  "@webstudio-is/sdk-components-animation:"
+);
+export {
+  r as animation
+};

package/lib/shared/proxy.js

@@ -0,0 +1,5 @@
+import { createProxy as o } from "@webstudio-is/template";
+const i = o("@webstudio-is/sdk-components-animation:");
+export {
+  i as animation
+};

package/lib/stagger-animation.js

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

package/lib/stagger-animation.ws.js

@@ -0,0 +1,20 @@
+import { StaggerAnimationIcon as i } from "@webstudio-is/icons/svg";
+import { div as n } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/stagger-animation.props.js";
+const r = {
+  category: "animations",
+  description: "Stagger animation allows you to animate children elements with a sliding window.",
+  icon: i,
+  order: 4,
+  label: "Stagger Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div: n },
+  initialProps: ["slidingWindow", "easing"],
+  props: o
+};
+export {
+  r as meta
+};

package/lib/templates.js

@@ -1 +1,4 @@
-
+import { meta as e } from "./video-animation.template.js";
+export {
+  e as VideoAnimation
+};

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/__generated__/stagger-animation.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__/video-animation.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

@@ -0,0 +1,10 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+import type { AnimationAction } from "@webstudio-is/sdk";
+type ScrollProps = {
+    debug?: boolean;
+    children?: React.ReactNode;
+    action: AnimationAction;
+};
+export declare const AnimateChildren: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const hooksAnimateChildren: Hook;
+export {};

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

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

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

@@ -0,0 +1,42 @@
+declare const easings: {
+    linear: boolean;
+    easeIn: boolean;
+    easeInCubic: boolean;
+    easeInQuart: boolean;
+    easeOut: boolean;
+    easeOutCubic: boolean;
+    easeOutQuart: boolean;
+    ease: boolean;
+    easeInOutCubic: boolean;
+    easeInOutQuart: boolean;
+};
+declare const split: {
+    char: boolean;
+    space: boolean;
+    'symbol "#"': boolean;
+    'symbol "~"': boolean;
+};
+export declare const AnimateText: import("react").ForwardRefExoticComponent<{
+    /**
+     * Size of the sliding window for the animation:
+     * - 0: Typewriter effect (no animation).
+     * - (0..1]: Animates one part of the text at a time.
+     * - (1..n]: Animates multiple parts of the text within the sliding window.
+     */
+    slidingWindow?: number;
+    /**
+     * Easing function applied within the sliding window.
+     */
+    easing?: keyof typeof easings;
+    /**
+     * Text content to animate.
+     */
+    children: React.ReactNode;
+    /**
+     * Defines how the text is split for animation (e.g., by character, space, or symbol).
+     */
+    splitBy?: keyof typeof split;
+} & {
+    className?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

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

package/lib/types/components.d.ts

@@ -1 +1,4 @@
-export {};
+export { AnimateChildren } from "./animate-children";
+export { AnimateText } from "./animate-text";
+export { StaggerAnimation } from "./stagger-animation";
+export { VideoAnimation } from "./video-animation";

package/lib/types/metas.d.ts

@@ -1 +1,4 @@
-export {};
+export { meta as AnimateChildren } from "./animate-children.ws";
+export { meta as AnimateText } from "./animate-text.ws";
+export { meta as StaggerAnimation } from "./stagger-animation.ws";
+export { meta as VideoAnimation } from "./video-animation.ws";

package/lib/types/shared/create-progress-animation.d.ts

@@ -0,0 +1,5 @@
+type ProgressAnimationProps<T extends Record<string, unknown> = {}> = {
+    children: React.ReactNode;
+} & T;
+export declare const createProgressAnimation: <T extends Record<string, unknown>>() => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ProgressAnimationProps<T>> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1 @@
+export declare const animation: Record<string, string>;

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

@@ -3,15 +3,14 @@ export declare const animation: Record<string, {
 } & ((props: Record<string, unknown> & Record<`${string}:expression`, string> & {
     "ws:id"?: string;
     "ws:label"?: string;
+    "ws:tag"?: string;
     "ws:style"?: import("@webstudio-is/template").TemplateStyleDecl[];
     "ws:show"?: boolean | {
         chunks: string[];
-        variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter>;
-        serialize(variableIds: string[]): string;
+        variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
     };
-    children?: import("react").ReactNode | import("@webstudio-is/template").ExpressionValue | {
+    children?: import("react").ReactNode | {
         chunks: string[];
-        variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter>;
-        serialize(variableIds: string[]): string;
+        variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
     } | import("@webstudio-is/template").PlaceholderValue;
 }) => import("react").ReactNode)>;

package/lib/types/stagger-animation.d.ts

@@ -0,0 +1,32 @@
+declare const easings: {
+    linear: boolean;
+    easeIn: boolean;
+    easeInCubic: boolean;
+    easeInQuart: boolean;
+    easeOut: boolean;
+    easeOutCubic: boolean;
+    easeOutQuart: boolean;
+    ease: boolean;
+    easeInOutCubic: boolean;
+    easeInOutQuart: boolean;
+};
+export declare const StaggerAnimation: import("react").ForwardRefExoticComponent<{
+    /**
+     * Size of the sliding window for the animation:
+     * - 0: Typewriter effect (no animation).
+     * - (0..1]: Animates one child at a time.
+     * - (1..n]: Animates multiple children within the sliding window.
+     */
+    slidingWindow?: number;
+    /**
+     * Easing function applied within the sliding window.
+     */
+    easing?: keyof typeof easings;
+    /**
+     * Text content to animate.
+     */
+    children: React.ReactNode;
+} & {
+    className?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/stagger-animation.ws.d.ts

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

package/lib/types/templates.d.ts

@@ -1 +1 @@
-export {};
+export { meta as VideoAnimation } from "./video-animation.template";

package/lib/types/video-animation.d.ts

@@ -0,0 +1,5 @@
+export declare const VideoAnimation: import("react").ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & {
+    timeline?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/video-animation.template.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

package/lib/types/video-animation.ws.d.ts

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

package/lib/video-animation.js

@@ -0,0 +1,6 @@
+import { createProgressAnimation as i } from "./shared/create-progress-animation.js";
+const o = i(), a = "VideoAnimation";
+o.displayName = a;
+export {
+  o as VideoAnimation
+};

package/lib/video-animation.template.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import { $ as i } from "@webstudio-is/template";
+import { animation as t } from "./shared/proxy.js";
+const a = {
+  category: "animations",
+  description: "Video Animation",
+  order: 2,
+  template: /* @__PURE__ */ o(t.VideoAnimation, { children: /* @__PURE__ */ o(
+    i.Video,
+    {
+      preload: "auto",
+      autoPlay: !0,
+      muted: !0,
+      playsInline: !0,
+      crossOrigin: "anonymous"
+    }
+  ) })
+};
+export {
+  a as meta
+};

package/lib/video-animation.ws.js

@@ -0,0 +1,17 @@
+import { PlayIcon as o } from "@webstudio-is/icons/svg";
+import { props as e } from "./__generated__/video-animation.props.js";
+import { div as i } from "@webstudio-is/sdk/normalize.css";
+const m = {
+  icon: o,
+  label: "Video Animation",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { div: i },
+  props: e,
+  initialProps: ["timeline"]
+};
+export {
+  m as meta
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.0.0-588fe22",
+  "version": "0.0.0-a5970cb",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,6 +14,7 @@
   ],
   "exports": {
     ".": {
+      "webstudio-private": "./private-src/components.ts",
       "webstudio": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
       "import": "./lib/components.js"
@@ -23,11 +24,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
@@ -44,26 +40,41 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@webstudio-is/icons": "0.0.0-588fe22",
-    "@webstudio-is/sdk": "0.0.0-588fe22",
-    "@webstudio-is/react-sdk": "0.0.0-588fe22"
+    "change-case": "^5.4.4",
+    "nanostores": "^0.11.3",
+    "react-error-boundary": "^5.0.0",
+    "shallow-equal": "^3.1.0",
+    "@webstudio-is/css-engine": "0.0.0-a5970cb",
+    "@webstudio-is/icons": "0.0.0-a5970cb",
+    "@webstudio-is/sdk": "0.0.0-a5970cb",
+    "@webstudio-is/react-sdk": "0.0.0-a5970cb"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
+    "@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.37.0",
+    "vitest": "^3.1.2",
+    "zod": "^3.24.2",
+    "@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.0.0-588fe22",
-    "@webstudio-is/template": "0.0.0-588fe22",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/sdk-components-react": "0.0.0-a5970cb",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/template": "0.0.0-a5970cb"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "vitest run",
+    "playwright-init": "playwright install --with-deps"
   }
 }

package/lib/props.js

@@ -1 +0,0 @@
-

package/lib/types/props.d.ts

@@ -1 +0,0 @@
-export {};