@hanzo/ui 5.3.30 → 5.3.32

package/dist/index.js

@@ -44,7 +44,6 @@ var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var NextImage = require('next/image');
 var Link2 = require('next/link');
-var Spline = require('@splinetool/react-spline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -96,7 +95,6 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 var Link2__default = /*#__PURE__*/_interopDefault(Link2);
-var Spline__default = /*#__PURE__*/_interopDefault(Spline);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3715,24 +3713,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Spline__default.default,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3744,7 +3726,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/index.mjs

@@ -44,7 +44,6 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import NextImage from 'next/image';
 import Link2 from 'next/link';
-import Spline from '@splinetool/react-spline';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3663,24 +3662,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsx(
-      Spline,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsx(
@@ -3692,7 +3675,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/primitives/index.js

@@ -44,7 +44,6 @@ var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var NextImage = require('next/image');
 var Link2 = require('next/link');
-var Spline = require('@splinetool/react-spline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -96,7 +95,6 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 var Link2__default = /*#__PURE__*/_interopDefault(Link2);
-var Spline__default = /*#__PURE__*/_interopDefault(Spline);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3715,24 +3713,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Spline__default.default,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3744,7 +3726,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/primitives/index.mjs

@@ -44,7 +44,6 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import NextImage from 'next/image';
 import Link2 from 'next/link';
-import Spline from '@splinetool/react-spline';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3663,24 +3662,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsx(
-      Spline,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsx(
@@ -3692,7 +3675,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/primitives-export.js

@@ -44,7 +44,6 @@ var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var NextImage = require('next/image');
 var Link2 = require('next/link');
-var Spline = require('@splinetool/react-spline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -96,7 +95,6 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
 var Link2__default = /*#__PURE__*/_interopDefault(Link2);
-var Spline__default = /*#__PURE__*/_interopDefault(Spline);
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3715,24 +3713,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Spline__default.default,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3744,7 +3726,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/primitives-export.mjs

@@ -44,7 +44,6 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import NextImage from 'next/image';
 import Link2 from 'next/link';
-import Spline from '@splinetool/react-spline';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
@@ -3663,24 +3662,8 @@ var MediaStack = /* @__PURE__ */ __name(({
   constrainTo: cnst = { w: 250, h: 250 },
   clx = ""
 }) => {
-  const { img, video, animation, mediaTransform } = media;
+  const { img, video, mediaTransform } = media;
   const transform = mediaTransform ?? {};
-  if (animation) {
-    return /* @__PURE__ */ jsx(
-      Spline,
-      {
-        scene: animation,
-        className: cn(clx, "pointer-events-none"),
-        "data-vaul-no-drag": true,
-        style: {
-          // // !aspect-[12/10] 
-          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
-          height: cnst.h,
-          ...spread_to_transform_default(transform)
-        }
-      }
-    );
-  }
   if (video) {
     const dim = constrain(video.dim.md, cnst);
     return /* @__PURE__ */ jsx(
@@ -3692,7 +3675,6 @@ var MediaStack = /* @__PURE__ */ __name(({
         height: dim.h,
         style: {
           minHeight: dim.h,
-          // prevents layout jumps
           ...spread_to_transform_default(transform)
         },
         ...video.videoProps

package/dist/spline/index.js

@@ -0,0 +1,211 @@
+"use client";
+'use strict';
+
+var Spline = require('@splinetool/react-spline');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var NextImage = require('next/image');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Spline__default = /*#__PURE__*/_interopDefault(Spline);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// util/spread-to-transform.ts
+function spreadToTransform(t) {
+  let transformStrings = [];
+  const scaleVal = "scale" in t ? t.scale : void 0;
+  if (scaleVal) {
+    if (typeof scaleVal === "number") {
+      transformStrings.push(`scale(${scaleVal})`);
+    } else if (Array.isArray(scaleVal) && scaleVal.length == 2 && typeof scaleVal[0] === "number") {
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
+    } else {
+      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
+    }
+  }
+  return transformStrings.length > 0 ? { transform: transformStrings.join(" ") } : {};
+}
+__name(spreadToTransform, "spreadToTransform");
+var spread_to_transform_default = spreadToTransform;
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+
+// util/index.ts
+function constrain(value, minOrConstrainTo, max) {
+  if (typeof value === "number" && typeof minOrConstrainTo === "number" && typeof max === "number") {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+  if (typeof value === "object" && typeof minOrConstrainTo === "object") {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+    if (aspectRatio > constrainAspectRatio) {
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+  throw new Error("Invalid parameters for constrain function");
+}
+__name(constrain, "constrain");
+var Image = /* @__PURE__ */ __name(({
+  def,
+  constrainTo,
+  transform = {},
+  fullWidth = false,
+  className = "",
+  preload = false
+}) => {
+  const {
+    src,
+    alt: _alt,
+    dim,
+    sizes,
+    svgFillClass: _svgFillClass
+  } = def;
+  const toSpread = {};
+  if (fullWidth) {
+    toSpread.style = {
+      width: "100%",
+      height: "auto",
+      ...spread_to_transform_default(transform)
+    };
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w;
+      toSpread.style.maxHeight = constrainTo.h;
+    }
+  } else {
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim;
+    toSpread.width = resolved.w;
+    toSpread.height = resolved.h;
+    toSpread.style = { ...spread_to_transform_default(transform) };
+  }
+  if (sizes) {
+    toSpread.sizes = sizes;
+  }
+  let alt;
+  if (_alt) {
+    alt = _alt;
+  } else {
+    const tokens = src.split("/");
+    alt = tokens.length > 0 ? tokens[tokens.length - 1] : src;
+  }
+  const svgFillClass = _svgFillClass ?? "";
+  return fullWidth ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col items-center justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    NextImage__default.default,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    NextImage__default.default,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  );
+}, "Image");
+var image_default = Image;
+var VideoPlayer = React__default.default.forwardRef(
+  ({
+    sources,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("video", { ref, ...rest, children: sources.map((source, index) => /* @__PURE__ */ jsxRuntime.jsx("source", { src: source }, index)) });
+  }
+);
+var video_player_default = VideoPlayer;
+var MediaStack = /* @__PURE__ */ __name(({
+  media,
+  constrainTo: cnst = { w: 250, h: 250 },
+  clx = ""
+}) => {
+  const { img, video, animation, mediaTransform } = media;
+  const transform = mediaTransform ?? {};
+  if (animation) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Spline__default.default,
+      {
+        scene: animation,
+        className: cn(clx, "pointer-events-none"),
+        "data-vaul-no-drag": true,
+        style: {
+          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
+          height: cnst.h,
+          ...spread_to_transform_default(transform)
+        }
+      }
+    );
+  }
+  if (video) {
+    const dim = constrain(video.dim.md, cnst);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      video_player_default,
+      {
+        className: clx,
+        sources: video.sources,
+        width: dim.w,
+        height: dim.h,
+        style: {
+          minHeight: dim.h,
+          ...spread_to_transform_default(transform)
+        },
+        ...video.videoProps
+      }
+    );
+  }
+  return img ? /* @__PURE__ */ jsxRuntime.jsx(
+    image_default,
+    {
+      def: img,
+      constrainTo: cnst,
+      className: clx,
+      transform
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: cnst.w, height: cnst.h }, className: cn("bg-level-2", clx) });
+}, "MediaStack");
+var media_stack_default = MediaStack;
+var SplinePlayer = /* @__PURE__ */ __name(({
+  scene,
+  className,
+  style,
+  onLoad
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Spline__default.default,
+    {
+      scene,
+      className: cn("pointer-events-none", className),
+      style,
+      onLoad
+    }
+  );
+}, "SplinePlayer");
+var player_default = SplinePlayer;
+
+exports.MediaStack = media_stack_default;
+exports.SplinePlayer = player_default;

package/dist/spline/index.mjs

@@ -0,0 +1,202 @@
+"use client";
+import Spline from '@splinetool/react-spline';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import NextImage from 'next/image';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// util/spread-to-transform.ts
+function spreadToTransform(t) {
+  let transformStrings = [];
+  const scaleVal = "scale" in t ? t.scale : void 0;
+  if (scaleVal) {
+    if (typeof scaleVal === "number") {
+      transformStrings.push(`scale(${scaleVal})`);
+    } else if (Array.isArray(scaleVal) && scaleVal.length == 2 && typeof scaleVal[0] === "number") {
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
+    } else {
+      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
+    }
+  }
+  return transformStrings.length > 0 ? { transform: transformStrings.join(" ") } : {};
+}
+__name(spreadToTransform, "spreadToTransform");
+var spread_to_transform_default = spreadToTransform;
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+
+// util/index.ts
+function constrain(value, minOrConstrainTo, max) {
+  if (typeof value === "number" && typeof minOrConstrainTo === "number" && typeof max === "number") {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+  if (typeof value === "object" && typeof minOrConstrainTo === "object") {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+    if (aspectRatio > constrainAspectRatio) {
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+  throw new Error("Invalid parameters for constrain function");
+}
+__name(constrain, "constrain");
+var Image = /* @__PURE__ */ __name(({
+  def,
+  constrainTo,
+  transform = {},
+  fullWidth = false,
+  className = "",
+  preload = false
+}) => {
+  const {
+    src,
+    alt: _alt,
+    dim,
+    sizes,
+    svgFillClass: _svgFillClass
+  } = def;
+  const toSpread = {};
+  if (fullWidth) {
+    toSpread.style = {
+      width: "100%",
+      height: "auto",
+      ...spread_to_transform_default(transform)
+    };
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w;
+      toSpread.style.maxHeight = constrainTo.h;
+    }
+  } else {
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim;
+    toSpread.width = resolved.w;
+    toSpread.height = resolved.h;
+    toSpread.style = { ...spread_to_transform_default(transform) };
+  }
+  if (sizes) {
+    toSpread.sizes = sizes;
+  }
+  let alt;
+  if (_alt) {
+    alt = _alt;
+  } else {
+    const tokens = src.split("/");
+    alt = tokens.length > 0 ? tokens[tokens.length - 1] : src;
+  }
+  const svgFillClass = _svgFillClass ?? "";
+  return fullWidth ? /* @__PURE__ */ jsx("div", { className: "relative flex flex-col items-center justify-center w-full", children: /* @__PURE__ */ jsx(
+    NextImage,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    NextImage,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  );
+}, "Image");
+var image_default = Image;
+var VideoPlayer = React.forwardRef(
+  ({
+    sources,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx("video", { ref, ...rest, children: sources.map((source, index) => /* @__PURE__ */ jsx("source", { src: source }, index)) });
+  }
+);
+var video_player_default = VideoPlayer;
+var MediaStack = /* @__PURE__ */ __name(({
+  media,
+  constrainTo: cnst = { w: 250, h: 250 },
+  clx = ""
+}) => {
+  const { img, video, animation, mediaTransform } = media;
+  const transform = mediaTransform ?? {};
+  if (animation) {
+    return /* @__PURE__ */ jsx(
+      Spline,
+      {
+        scene: animation,
+        className: cn(clx, "pointer-events-none"),
+        "data-vaul-no-drag": true,
+        style: {
+          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
+          height: cnst.h,
+          ...spread_to_transform_default(transform)
+        }
+      }
+    );
+  }
+  if (video) {
+    const dim = constrain(video.dim.md, cnst);
+    return /* @__PURE__ */ jsx(
+      video_player_default,
+      {
+        className: clx,
+        sources: video.sources,
+        width: dim.w,
+        height: dim.h,
+        style: {
+          minHeight: dim.h,
+          ...spread_to_transform_default(transform)
+        },
+        ...video.videoProps
+      }
+    );
+  }
+  return img ? /* @__PURE__ */ jsx(
+    image_default,
+    {
+      def: img,
+      constrainTo: cnst,
+      className: clx,
+      transform
+    }
+  ) : /* @__PURE__ */ jsx("div", { style: { width: cnst.w, height: cnst.h }, className: cn("bg-level-2", clx) });
+}, "MediaStack");
+var media_stack_default = MediaStack;
+var SplinePlayer = /* @__PURE__ */ __name(({
+  scene,
+  className,
+  style,
+  onLoad
+}) => {
+  return /* @__PURE__ */ jsx(
+    Spline,
+    {
+      scene,
+      className: cn("pointer-events-none", className),
+      style,
+      onLoad
+    }
+  );
+}, "SplinePlayer");
+var player_default = SplinePlayer;
+
+export { media_stack_default as MediaStack, player_default as SplinePlayer };

package/dist/spline/media-stack.js

@@ -0,0 +1,193 @@
+"use client";
+'use strict';
+
+var Spline = require('@splinetool/react-spline');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var NextImage = require('next/image');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Spline__default = /*#__PURE__*/_interopDefault(Spline);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// util/spread-to-transform.ts
+function spreadToTransform(t) {
+  let transformStrings = [];
+  const scaleVal = "scale" in t ? t.scale : void 0;
+  if (scaleVal) {
+    if (typeof scaleVal === "number") {
+      transformStrings.push(`scale(${scaleVal})`);
+    } else if (Array.isArray(scaleVal) && scaleVal.length == 2 && typeof scaleVal[0] === "number") {
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
+    } else {
+      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
+    }
+  }
+  return transformStrings.length > 0 ? { transform: transformStrings.join(" ") } : {};
+}
+__name(spreadToTransform, "spreadToTransform");
+var spread_to_transform_default = spreadToTransform;
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+
+// util/index.ts
+function constrain(value, minOrConstrainTo, max) {
+  if (typeof value === "number" && typeof minOrConstrainTo === "number" && typeof max === "number") {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+  if (typeof value === "object" && typeof minOrConstrainTo === "object") {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+    if (aspectRatio > constrainAspectRatio) {
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+  throw new Error("Invalid parameters for constrain function");
+}
+__name(constrain, "constrain");
+var Image = /* @__PURE__ */ __name(({
+  def,
+  constrainTo,
+  transform = {},
+  fullWidth = false,
+  className = "",
+  preload = false
+}) => {
+  const {
+    src,
+    alt: _alt,
+    dim,
+    sizes,
+    svgFillClass: _svgFillClass
+  } = def;
+  const toSpread = {};
+  if (fullWidth) {
+    toSpread.style = {
+      width: "100%",
+      height: "auto",
+      ...spread_to_transform_default(transform)
+    };
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w;
+      toSpread.style.maxHeight = constrainTo.h;
+    }
+  } else {
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim;
+    toSpread.width = resolved.w;
+    toSpread.height = resolved.h;
+    toSpread.style = { ...spread_to_transform_default(transform) };
+  }
+  if (sizes) {
+    toSpread.sizes = sizes;
+  }
+  let alt;
+  if (_alt) {
+    alt = _alt;
+  } else {
+    const tokens = src.split("/");
+    alt = tokens.length > 0 ? tokens[tokens.length - 1] : src;
+  }
+  const svgFillClass = _svgFillClass ?? "";
+  return fullWidth ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col items-center justify-center w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    NextImage__default.default,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    NextImage__default.default,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  );
+}, "Image");
+var image_default = Image;
+var VideoPlayer = React__default.default.forwardRef(
+  ({
+    sources,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("video", { ref, ...rest, children: sources.map((source, index) => /* @__PURE__ */ jsxRuntime.jsx("source", { src: source }, index)) });
+  }
+);
+var video_player_default = VideoPlayer;
+var MediaStack = /* @__PURE__ */ __name(({
+  media,
+  constrainTo: cnst = { w: 250, h: 250 },
+  clx = ""
+}) => {
+  const { img, video, animation, mediaTransform } = media;
+  const transform = mediaTransform ?? {};
+  if (animation) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Spline__default.default,
+      {
+        scene: animation,
+        className: cn(clx, "pointer-events-none"),
+        "data-vaul-no-drag": true,
+        style: {
+          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
+          height: cnst.h,
+          ...spread_to_transform_default(transform)
+        }
+      }
+    );
+  }
+  if (video) {
+    const dim = constrain(video.dim.md, cnst);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      video_player_default,
+      {
+        className: clx,
+        sources: video.sources,
+        width: dim.w,
+        height: dim.h,
+        style: {
+          minHeight: dim.h,
+          ...spread_to_transform_default(transform)
+        },
+        ...video.videoProps
+      }
+    );
+  }
+  return img ? /* @__PURE__ */ jsxRuntime.jsx(
+    image_default,
+    {
+      def: img,
+      constrainTo: cnst,
+      className: clx,
+      transform
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: cnst.w, height: cnst.h }, className: cn("bg-level-2", clx) });
+}, "MediaStack");
+var media_stack_default = MediaStack;
+
+module.exports = media_stack_default;

package/dist/spline/media-stack.mjs

@@ -0,0 +1,185 @@
+"use client";
+import Spline from '@splinetool/react-spline';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import NextImage from 'next/image';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// util/spread-to-transform.ts
+function spreadToTransform(t) {
+  let transformStrings = [];
+  const scaleVal = "scale" in t ? t.scale : void 0;
+  if (scaleVal) {
+    if (typeof scaleVal === "number") {
+      transformStrings.push(`scale(${scaleVal})`);
+    } else if (Array.isArray(scaleVal) && scaleVal.length == 2 && typeof scaleVal[0] === "number") {
+      transformStrings.push(`scale(${scaleVal[0]}, ${scaleVal[1]})`);
+    } else {
+      throw new Error("parsing MediaTransform: Unrecognized value for 'scale'!");
+    }
+  }
+  return transformStrings.length > 0 ? { transform: transformStrings.join(" ") } : {};
+}
+__name(spreadToTransform, "spreadToTransform");
+var spread_to_transform_default = spreadToTransform;
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+
+// util/index.ts
+function constrain(value, minOrConstrainTo, max) {
+  if (typeof value === "number" && typeof minOrConstrainTo === "number" && typeof max === "number") {
+    return Math.min(Math.max(value, minOrConstrainTo), max);
+  }
+  if (typeof value === "object" && typeof minOrConstrainTo === "object") {
+    const dim = value;
+    const constrainTo = minOrConstrainTo;
+    const aspectRatio = dim.w / dim.h;
+    const constrainAspectRatio = constrainTo.w / constrainTo.h;
+    if (aspectRatio > constrainAspectRatio) {
+      return {
+        w: constrainTo.w,
+        h: constrainTo.w / aspectRatio
+      };
+    } else {
+      return {
+        w: constrainTo.h * aspectRatio,
+        h: constrainTo.h
+      };
+    }
+  }
+  throw new Error("Invalid parameters for constrain function");
+}
+__name(constrain, "constrain");
+var Image = /* @__PURE__ */ __name(({
+  def,
+  constrainTo,
+  transform = {},
+  fullWidth = false,
+  className = "",
+  preload = false
+}) => {
+  const {
+    src,
+    alt: _alt,
+    dim,
+    sizes,
+    svgFillClass: _svgFillClass
+  } = def;
+  const toSpread = {};
+  if (fullWidth) {
+    toSpread.style = {
+      width: "100%",
+      height: "auto",
+      ...spread_to_transform_default(transform)
+    };
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w;
+      toSpread.style.maxHeight = constrainTo.h;
+    }
+  } else {
+    const resolved = constrainTo ? constrain(dim, constrainTo) : dim;
+    toSpread.width = resolved.w;
+    toSpread.height = resolved.h;
+    toSpread.style = { ...spread_to_transform_default(transform) };
+  }
+  if (sizes) {
+    toSpread.sizes = sizes;
+  }
+  let alt;
+  if (_alt) {
+    alt = _alt;
+  } else {
+    const tokens = src.split("/");
+    alt = tokens.length > 0 ? tokens[tokens.length - 1] : src;
+  }
+  const svgFillClass = _svgFillClass ?? "";
+  return fullWidth ? /* @__PURE__ */ jsx("div", { className: "relative flex flex-col items-center justify-center w-full", children: /* @__PURE__ */ jsx(
+    NextImage,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    NextImage,
+    {
+      src,
+      alt,
+      ...toSpread,
+      priority: preload,
+      loading: preload ? "eager" : "lazy",
+      className: cn(svgFillClass, className)
+    }
+  );
+}, "Image");
+var image_default = Image;
+var VideoPlayer = React.forwardRef(
+  ({
+    sources,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx("video", { ref, ...rest, children: sources.map((source, index) => /* @__PURE__ */ jsx("source", { src: source }, index)) });
+  }
+);
+var video_player_default = VideoPlayer;
+var MediaStack = /* @__PURE__ */ __name(({
+  media,
+  constrainTo: cnst = { w: 250, h: 250 },
+  clx = ""
+}) => {
+  const { img, video, animation, mediaTransform } = media;
+  const transform = mediaTransform ?? {};
+  if (animation) {
+    return /* @__PURE__ */ jsx(
+      Spline,
+      {
+        scene: animation,
+        className: cn(clx, "pointer-events-none"),
+        "data-vaul-no-drag": true,
+        style: {
+          width: 6 / 5 * (typeof cnst.h === "number" ? cnst.h : parseInt(cnst.h)),
+          height: cnst.h,
+          ...spread_to_transform_default(transform)
+        }
+      }
+    );
+  }
+  if (video) {
+    const dim = constrain(video.dim.md, cnst);
+    return /* @__PURE__ */ jsx(
+      video_player_default,
+      {
+        className: clx,
+        sources: video.sources,
+        width: dim.w,
+        height: dim.h,
+        style: {
+          minHeight: dim.h,
+          ...spread_to_transform_default(transform)
+        },
+        ...video.videoProps
+      }
+    );
+  }
+  return img ? /* @__PURE__ */ jsx(
+    image_default,
+    {
+      def: img,
+      constrainTo: cnst,
+      className: clx,
+      transform
+    }
+  ) : /* @__PURE__ */ jsx("div", { style: { width: cnst.w, height: cnst.h }, className: cn("bg-level-2", clx) });
+}, "MediaStack");
+var media_stack_default = MediaStack;
+
+export { media_stack_default as default };

package/dist/spline/player.js

@@ -0,0 +1,37 @@
+"use client";
+'use strict';
+
+var Spline = require('@splinetool/react-spline');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Spline__default = /*#__PURE__*/_interopDefault(Spline);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+__name(cn, "cn");
+var SplinePlayer = /* @__PURE__ */ __name(({
+  scene,
+  className,
+  style,
+  onLoad
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Spline__default.default,
+    {
+      scene,
+      className: cn("pointer-events-none", className),
+      style,
+      onLoad
+    }
+  );
+}, "SplinePlayer");
+var player_default = SplinePlayer;
+
+module.exports = player_default;

package/dist/spline/player.mjs

@@ -0,0 +1,31 @@
+"use client";
+import Spline from '@splinetool/react-spline';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+__name(cn, "cn");
+var SplinePlayer = /* @__PURE__ */ __name(({
+  scene,
+  className,
+  style,
+  onLoad
+}) => {
+  return /* @__PURE__ */ jsx(
+    Spline,
+    {
+      scene,
+      className: cn("pointer-events-none", className),
+      style,
+      onLoad
+    }
+  );
+}, "SplinePlayer");
+var player_default = SplinePlayer;
+
+export { player_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "5.3.30",
+  "version": "5.3.32",
   "description": "Multi-framework UI library with React, Vue, Svelte, and React Native support. Based on shadcn/ui with comprehensive framework coverage.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -424,6 +424,16 @@
       "import": "./dist/code/*.mjs",
       "require": "./dist/code/*.js"
     },
+    "./spline": {
+      "types": "./dist/spline/index.d.ts",
+      "import": "./dist/spline/index.mjs",
+      "require": "./dist/spline/index.js"
+    },
+    "./spline/*": {
+      "types": "./dist/spline/*.d.ts",
+      "import": "./dist/spline/*.mjs",
+      "require": "./dist/spline/*.js"
+    },
     "./3d": {
       "types": "./dist/3d/index.d.ts",
       "import": "./dist/3d/index.mjs",
@@ -705,7 +715,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@radix-ui/react-primitive": "^2.1.3",
-    "@splinetool/react-spline": "^4.1.0",
+    "@splinetool/react-spline": "^4.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/facebook-pixel": "^0.0.30",