@hanzo/ui 5.3.31 → 5.3.33

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;