@hanzo/ui 5.3.31 → 5.3.33

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.31",
+  "version": "5.3.33",
   "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,36 @@
       "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"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts/index.mjs",
+      "require": "./dist/charts/index.js"
+    },
+    "./kanban": {
+      "types": "./dist/kanban/index.d.ts",
+      "import": "./dist/kanban/index.mjs",
+      "require": "./dist/kanban/index.js"
+    },
+    "./mermaid": {
+      "types": "./dist/mermaid/index.d.ts",
+      "import": "./dist/mermaid/index.mjs",
+      "require": "./dist/mermaid/index.js"
+    },
+    "./calendar-ext": {
+      "types": "./dist/calendar-ext/index.d.ts",
+      "import": "./dist/calendar-ext/index.mjs",
+      "require": "./dist/calendar-ext/index.js"
+    },
     "./3d": {
       "types": "./dist/3d/index.d.ts",
       "import": "./dist/3d/index.mjs",
@@ -569,13 +599,7 @@
     }
   },
   "dependencies": {
-    "@hanzo/docs-core": "^16.2.6",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@hanzo/react-drawer": "^0.1.8",
-    "@modelcontextprotocol/sdk": "^1.10.2",
     "@next/third-parties": "^15.0.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -607,14 +631,11 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tanstack/react-table": "^8.21.3",
     "buffer": "^6.0.3",
-    "chrono-node": "^2.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
     "commander": "^12.1.0",
-    "date-fns": "^3.0.0",
     "embla-carousel-react": "^8.0.0",
     "input-otp": "^1.2.4",
     "little-date": "^1.0.0",
@@ -622,11 +643,7 @@
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
     "postcss-selector-parser": "^6.0.16",
-    "react-day-picker": "^9.0.0",
-    "react-hook-form": "^7.49.0",
     "react-intersection-observer": "^9.8.2",
-    "react-resizable-panels": "^1.0.5",
-    "recharts": "^2.10.0",
     "sonner": "^1.3.1",
     "svg-pan-zoom": "^3.6.2",
     "tailwind-merge": "^2.6.0",
@@ -637,8 +654,21 @@
     "zod-to-json-schema": "^3.23.2"
   },
   "peerDependencies": {
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@hanzo/docs-core": "^16.0.0",
     "@hookform/resolvers": "^3.3.2",
+    "@modelcontextprotocol/sdk": "^1.0.0",
     "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "chrono-node": "^2.0.0",
+    "date-fns": "^3.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-resizable-panels": "^1.0.0",
+    "recharts": "^2.0.0",
     "framer-motion": "^11.0.0",
     "lucide-react": "0.456.0",
     "mermaid": "^10.0.0",
@@ -652,9 +682,33 @@
     "validator": "^13.11.0"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/modifiers": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "@hanzo/docs-core": {
+      "optional": true
+    },
+    "@modelcontextprotocol/sdk": {
+      "optional": true
+    },
     "@tanstack/react-query": {
       "optional": true
     },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "chrono-node": {
+      "optional": true
+    },
     "cmdk": {
       "optional": true
     },
@@ -705,6 +759,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@radix-ui/react-primitive": "^2.1.3",
+    "@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",