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

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

@@ -1,11 +1,6 @@
 const e = {
-  charWindow: {
-    required: !1,
-    control: "number",
-    type: "number",
-    defaultValue: 5
-  },
   easing: {
+    description: "Easing function applied within the sliding window.",
     required: !1,
     control: "select",
     type: "string",
@@ -22,6 +17,24 @@ const e = {
       "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 {

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

@@ -0,0 +1,34 @@
+const e = {
+  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/animate-children.ws.js

@@ -1,11 +1,15 @@
-import { SlotComponentIcon as n } from "@webstudio-is/icons/svg";
-const i = {
-  category: "general",
+import { AnimationGroupIcon as i } from "@webstudio-is/icons/svg";
+const o = {
+  category: "animations",
   type: "container",
-  description: "Animate Children",
-  icon: n,
+  description: "Animation Group component is designed to animate its children.",
+  icon: i,
   order: 5,
-  label: "Animate Children"
+  label: "Animation Group",
+  constraints: {
+    relation: "child",
+    text: !1
+  }
 }, t = {
   props: {
     action: {
@@ -18,6 +22,6 @@ const i = {
   initialProps: ["action"]
 };
 export {
-  i as meta,
+  o as meta,
   t as propsMeta
 };

package/lib/animate-text.js

@@ -1,9 +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;
+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 {
-  t as AnimateText
+  a as AnimateText
 };

package/lib/animate-text.ws.js

@@ -1,17 +1,25 @@
-import { TextIcon as e } from "@webstudio-is/icons/svg";
-import { props as o } from "./__generated__/animate-text.props.js";
-const i = {
-  category: "general",
+import { TextAnimationIcon as t } from "@webstudio-is/icons/svg";
+import { animation as o } from "./shared/meta.js";
+import { props as i } from "./__generated__/animate-text.props.js";
+const r = {
+  category: "animations",
   type: "container",
-  description: "Animate Text",
-  icon: e,
+  description: "Text animation allows you to split text by char or by word to animate it.",
+  icon: t,
   order: 6,
-  label: "Animate Text"
-}, n = {
-  props: o,
-  initialProps: ["charWindow", "easing"]
+  label: "Text Animation",
+  constraints: [
+    { relation: "parent", component: { $eq: o.AnimateChildren } },
+    {
+      relation: "child",
+      text: !1
+    }
+  ]
+}, m = {
+  props: i,
+  initialProps: ["slidingWindow", "easing", "splitBy"]
 };
 export {
-  i as meta,
-  n as propsMeta
+  r as meta,
+  m as propsMeta
 };

package/lib/components.js

@@ -1,6 +1,8 @@
 import { AnimateChildren as t } from "./animate-children.js";
-import { AnimateText as o } from "./animate-text.js";
+import { AnimateText as m } from "./animate-text.js";
+import { StaggerAnimation as n } from "./stagger-animation.js";
 export {
   t as AnimateChildren,
-  o as AnimateText
+  m as AnimateText,
+  n as StaggerAnimation
 };

package/lib/metas.js

@@ -1,6 +1,8 @@
 import { meta as a } from "./animate-children.ws.js";
 import { meta as r } from "./animate-text.ws.js";
+import { meta as i } from "./stagger-animation.ws.js";
 export {
   a as AnimateChildren,
-  r as AnimateText
+  r as AnimateText,
+  i as StaggerAnimation
 };

package/lib/props.js

@@ -1,6 +1,8 @@
 import { propsMeta as t } from "./animate-children.ws.js";
 import { propsMeta as o } from "./animate-text.ws.js";
+import { propsMeta as m } from "./stagger-animation.ws.js";
 export {
   t as AnimateChildren,
-  o as AnimateText
+  o as AnimateText,
+  m as StaggerAnimation
 };

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/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,25 @@
+import { StaggerAnimationIcon as i } from "@webstudio-is/icons/svg";
+import { animation as n } from "./shared/meta.js";
+import { props as t } from "./__generated__/stagger-animation.props.js";
+const r = {
+  category: "animations",
+  type: "container",
+  description: "Stagger animation allows you to animate children elements with a sliding window.",
+  icon: i,
+  order: 6,
+  label: "Stagger Animation",
+  constraints: [
+    { relation: "parent", component: { $eq: n.AnimateChildren } },
+    {
+      relation: "child",
+      text: !1
+    }
+  ]
+}, m = {
+  props: t,
+  initialProps: ["slidingWindow", "easing"]
+};
+export {
+  r as meta,
+  m as propsMeta
+};

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/animate-text.d.ts

@@ -10,10 +10,32 @@ declare const easings: {
     easeInOutCubic: boolean;
     easeInOutQuart: boolean;
 };
+declare const split: {
+    char: boolean;
+    space: boolean;
+    'symbol "#"': boolean;
+    'symbol "~"': boolean;
+};
 type AnimateChildrenProps = {
-    charWindow?: number;
+    /**
+     * 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;
 };
 export declare const AnimateText: import("react").ForwardRefExoticComponent<AnimateChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/components.d.ts

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

package/lib/types/metas.d.ts

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

package/lib/types/props.d.ts

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

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

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

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

@@ -0,0 +1,31 @@
+declare const easings: {
+    linear: boolean;
+    easeIn: boolean;
+    easeInCubic: boolean;
+    easeInQuart: boolean;
+    easeOut: boolean;
+    easeOutCubic: boolean;
+    easeOutQuart: boolean;
+    ease: boolean;
+    easeInOutCubic: boolean;
+    easeInOutQuart: boolean;
+};
+type StaggerAnimationProps = {
+    /**
+     * 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;
+};
+export declare const StaggerAnimation: import("react").ForwardRefExoticComponent<StaggerAnimationProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/stagger-animation.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.208.0",
+  "version": "0.210.0",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "nanostores": "^0.11.3",
     "react-error-boundary": "^5.0.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"
+    "@webstudio-is/css-engine": "0.210.0",
+    "@webstudio-is/icons": "0.210.0",
+    "@webstudio-is/react-sdk": "0.210.0",
+    "@webstudio-is/sdk": "0.210.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
@@ -64,14 +64,14 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "type-fest": "^4.37.0",
     "vitest": "^3.0.8",
-    "zod": "^3.22.4",
+    "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.208.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.208.0"
+    "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.210.0",
+    "@webstudio-is/template": "0.210.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",