@webstudio-is/sdk-components-animation 0.201.0 → 0.203.0

package/lib/components.js

@@ -1 +1,4 @@
-
+import { Scroll as l } from "./scroll.js";
+export {
+  l as Scroll
+};

package/lib/scroll.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const n = e(
+  ({ debug: s = !1, action: f, ...o }, r) => /* @__PURE__ */ t("div", { ref: r, style: { display: "contents" }, ...o })
+);
+export {
+  n as Scroll
+};

package/lib/types/components.d.ts

@@ -1 +1 @@
-export {};
+export { Scroll } from "./scroll";

package/lib/types/scroll.d.ts

@@ -0,0 +1,8 @@
+import type { AnimationAction } from "./shared/animation-types";
+type ScrollProps = {
+    debug?: boolean;
+    children?: React.ReactNode;
+    action: AnimationAction;
+};
+export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,49 @@
+import type { StyleValue } from "@webstudio-is/css-engine";
+export type KeyframeStyles = {
+    [property: string]: StyleValue | undefined;
+};
+export type AnimationKeyframe = {
+    offset: number | undefined;
+    styles: KeyframeStyles;
+};
+declare const RANGE_UNITS: readonly ["%", "px", "cm", "mm", "q", "in", "pt", "pc", "em", "rem", "ex", "rex", "cap", "rcap", "ch", "rch", "lh", "rlh", "vw", "svw", "lvw", "dvw", "vh", "svh", "lvh", "dvh", "vi", "svi", "lvi", "dvi", "vb", "svb", "lvb", "dvb", "vmin", "svmin", "lvmin", "dvmin", "vmax", "svmax", "lvmax", "dvmax"];
+export type RangeUnit = (typeof RANGE_UNITS)[number];
+export declare const isRangeUnit: (value: unknown) => value is RangeUnit;
+export type RangeUnitValue = {
+    type: "unit";
+    value: number;
+    unit: RangeUnit;
+};
+type KeyframeEffectOptions = {
+    easing?: string;
+    fill?: FillMode;
+};
+/**
+ * Scroll does not support https://drafts.csswg.org/scroll-animations/#named-ranges
+ * However, for simplicity and type unification with the view, we will use the names "start" and "end,"
+ * which will be transformed as follows:
+ * - "start" → `calc(0% + range)`
+ * - "end" → `calc(100% - range)`
+ */
+type ScrollNamedRange = "start" | "end";
+/**
+ * Scroll does not support https://drafts.csswg.org/scroll-animations/#named-ranges
+ * However, for simplicity and type unification with the view, we will use the names "start" and "end,"
+ * See ScrollNamedRange type for more information.
+ */
+export type ScrollRangeValue = [name: ScrollNamedRange, value: RangeUnitValue];
+type ScrollRangeOptions = {
+    rangeStart?: ScrollRangeValue | undefined;
+    rangeEnd?: ScrollRangeValue | undefined;
+};
+type ScrollAction = {
+    type: "scroll";
+    source?: "closest" | "nearest" | "root";
+    axis?: "block" | "inline" | "x" | "y";
+    animations: {
+        timing: KeyframeEffectOptions & ScrollRangeOptions;
+        keyframes: AnimationKeyframe[];
+    }[];
+};
+export type AnimationAction = ScrollAction;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.201.0",
+  "version": "0.203.0",
   "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"
@@ -44,20 +45,26 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@webstudio-is/icons": "0.201.0",
-    "@webstudio-is/react-sdk": "0.201.0",
-    "@webstudio-is/sdk": "0.201.0"
+    "react-error-boundary": "^5.0.0",
+    "scroll-timeline-polyfill": "^1.1.0",
+    "@webstudio-is/css-engine": "0.203.0",
+    "@webstudio-is/icons": "0.203.0",
+    "@webstudio-is/react-sdk": "0.203.0",
+    "@webstudio-is/sdk": "0.203.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "type-fest": "^4.32.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.203.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/template": "0.201.0",
+    "@webstudio-is/template": "0.203.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.201.0"
+    "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/design-system": "0.0.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",

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

@@ -1,17 +0,0 @@
-export declare const animation: Record<string, {
-    displayName: string;
-} & ((props: Record<string, unknown> & Record<`${string}:expression`, string> & {
-    "ws:id"?: string;
-    "ws:label"?: 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;
-    };
-    children?: import("react").ReactNode | import("@webstudio-is/template").ExpressionValue | {
-        chunks: string[];
-        variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter>;
-        serialize(variableIds: string[]): string;
-    } | import("@webstudio-is/template").PlaceholderValue;
-}) => import("react").ReactNode)>;