@webstudio-is/sdk-components-animation 0.0.0-017f1bd

package/LICENSE

@@ -0,0 +1,49 @@
+Webstudio, Inc. End User License Agreement (EULA)
+
+Last updated: August 3, 2025
+
+1. Definitions
+   “Agreement” means this End User License Agreement.
+   “Company” means Webstudio, Inc., its successors and assigns.
+   “Software” means the computer programs identified by this Agreement, including any updates, upgrades, and accompanying documentation.
+   “Licensee” or “You” means the individual or legal entity that has downloaded, installed, or is using the Software.
+
+2. Grant of License
+   Subject to the terms of this Agreement, Company grants You a non-exclusive, non-transferable, revocable, limited license to:
+   a. Use the Software solely for Your internal business purposes on the number of devices or seats for which You have purchased licenses.
+   b. Run the Software in object code form only.
+   No other rights are granted.
+
+3. Restrictions
+   You shall not, and shall not permit any third party to:
+   a. Copy, reproduce, or distribute the Software, in whole or in part, except as expressly authorized in writing by Company.
+   b. Modify, adapt, translate, or create derivative works of the Software, or merge the Software into any other program.
+   c. Reverse-engineer, decompile, disassemble, or otherwise attempt to discover the source code of the Software.
+   d. Rent, lease, sell, sublicense, or otherwise transfer rights to the Software.
+   e. Remove, alter, or obscure any proprietary notices, including copyright notices, on the Software.
+
+4. Ownership
+   The Software is licensed, not sold. Company and its licensors retain all right, title, and interest in and to the Software, including intellectual property rights.
+
+5. Updates and Support
+   Company may, in its sole discretion, provide updates, upgrades, or support services for the Software under a separate support agreement.
+
+6. Term and Termination
+   This Agreement remains in effect until terminated. Your rights under this Agreement terminate automatically if You fail to comply with any term. Upon termination, You must cease all use of the Software and destroy all copies in Your possession.
+
+7. Warranty Disclaimer
+   THE SOFTWARE IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND. TO THE MAXIMUM EXTENT PERMITTED BY LAW, COMPANY DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT.
+
+8. Limitation of Liability
+   IN NO EVENT WILL COMPANY BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, OR CONSEQUENTIAL DAMAGES ARISING FROM OR RELATED TO THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. COMPANY’S AGGREGATE LIABILITY UNDER THIS AGREEMENT WILL NOT EXCEED THE LICENSE FEES PAID BY YOU.
+
+9. Governing Law and Dispute Resolution
+   This Agreement will be governed by the laws of the State of Delaware without regard to conflict of law principles. Any dispute will be resolved in the state or federal courts in the State of Delaware.
+
+10. Export Compliance
+    You agree to comply with all export laws and regulations of the United States and any other applicable jurisdiction.
+
+11. Entire Agreement
+    This Agreement constitutes the entire agreement between You and Company regarding the Software and supersedes all prior understandings.
+
+SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary

package/README.md

@@ -0,0 +1,4 @@
+# Radix Components for Webstudio
+
+Radix Primitives is a low-level UI component library with a focus on accessibility and customization.
+Default styling is inspired by https://ui.shadcn.com/docs.

package/lib/animate-children-4Ikuk4xp.js

@@ -0,0 +1,2 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{jsx as c}from"react/jsx-runtime";import{forwardRef as m}from"react";import{animationCanPlayOnCanvasProperty as o}from"@webstudio-is/sdk/runtime";const e=m(({debug:a=!1,action:t,...i},r)=>c("div",{ref:r,style:{display:"contents"},...i})),n="AnimateChildren";e.displayName=n;const s="@webstudio-is/sdk-components-animation",p={onNavigatorUnselect:(a,t)=>{t.instancePath.length>0&&t.instancePath[0].component===`${s}:${n}`&&a.setMemoryProp(t.instancePath[0],o,void 0)},onNavigatorSelect:(a,t)=>{t.instancePath.length>0&&t.instancePath[0].component===`${s}:${n}`&&a.setMemoryProp(t.instancePath[0],o,!0)}};export{e as A,p as h};

package/lib/components.js

@@ -0,0 +1,2 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{A as l}from"./animate-children-4Ikuk4xp.js";import{jsx as e}from"react/jsx-runtime";import{forwardRef as o}from"react";const t=o(({slidingWindow:i=5,easing:a="linear",splitBy:s="char",...n},d)=>e("div",{ref:d,...n})),g="AnimateText";t.displayName=g;const r=o(({slidingWindow:i=1,easing:a="linear",...s},n)=>e("div",{ref:n,...s})),p="StaggerAnimation";r.displayName=p;const f=()=>o((i,a)=>e("div",{ref:a,...i})),m=f(),A="VideoAnimation";m.displayName=A;export{l as AnimateChildren,t as AnimateText,r as StaggerAnimation,m as VideoAnimation};

package/lib/hooks.js

@@ -0,0 +1,2 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{h as o}from"./animate-children-4Ikuk4xp.js";const r=[o];export{r as hooks};

package/lib/metas.js

@@ -0,0 +1,8 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{AnimationGroupIcon as o,TextAnimationIcon as a,StaggerAnimationIcon as s,PlayIcon as r}from"@webstudio-is/icons/svg";import{div as e}from"@webstudio-is/sdk/normalize.css";const l=n=>new Proxy({},{get(w,t){return`${n}${t}`}}),i=l("@webstudio-is/sdk-components-animation:"),c={category:"animations",description:"Animation Group component is designed to animate its children.",icon:o,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"}}},d={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 "~"']}},p={category:"animations",description:"Text animation allows you to split text by char or by word to animate it.",icon:a,order:1,label:"Text Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},initialProps:["slidingWindow","easing","splitBy"],props:d},m={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}},u={category:"animations",description:"Stagger animation allows you to animate children elements with a sliding window.",icon:s,order:4,label:"Stagger Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},initialProps:["slidingWindow","easing"],props:m},g={timeline:{required:!1,control:"boolean",type:"boolean"}},h={icon:r,label:"Video Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},props:g,initialProps:["timeline"]};export{c as AnimateChildren,p as AnimateText,u as StaggerAnimation,h as VideoAnimation};

package/lib/templates.js

@@ -0,0 +1,2 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{jsx as o}from"react/jsx-runtime";import{createProxy as i,$ as n}from"@webstudio-is/template";const a=i("@webstudio-is/sdk-components-animation:"),t={category:"animations",description:"Video Animation",order:2,template:o(a.VideoAnimation,{children:o(n.Video,{preload:"auto",autoPlay:!0,muted:!0,playsInline:!0,crossOrigin:"anonymous"})})};export{t 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

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

package/lib/types/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+export declare const hooks: Hook[];

package/lib/types/metas.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,16 @@
+export declare const animation: Record<string, {
+    displayName: 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 | import("@webstudio-is/template").ResourceValue>;
+    };
+    children?: import("react").ReactNode | {
+        chunks: 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

@@ -0,0 +1 @@
+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/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@webstudio-is/sdk-components-animation",
+  "version": "0.0.0-017f1bd",
+  "description": "Webstudio components for animation",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "lib/*",
+    "!*.{test,stories}.*"
+  ],
+  "exports": {
+    ".": {
+      "webstudio-private": "./private-src/components.ts",
+      "webstudio": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js"
+    },
+    "./metas": {
+      "webstudio": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js"
+    },
+    "./hooks": {
+      "webstudio": "./src/hooks.ts",
+      "types": "./lib/types/hooks.d.ts",
+      "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "dependencies": {
+    "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-017f1bd",
+    "@webstudio-is/icons": "0.0.0-017f1bd",
+    "@webstudio-is/react-sdk": "0.0.0-017f1bd",
+    "@webstudio-is/sdk": "0.0.0-017f1bd"
+  },
+  "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/design-system": "0.0.0",
+    "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-cli": "^0.94.0",
+    "@webstudio-is/template": "0.0.0-017f1bd",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react": "0.0.0-017f1bd"
+  },
+  "scripts": {
+    "build": "vite build && esbuild './lib/*' --outdir=./lib --minify --allow-overwrite --banner:js='//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary'",
+    "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",
+    "test": "vitest run",
+    "playwright-init": "playwright install --with-deps"
+  }
+}