@djangocfg/ui-tools 2.1.91

package/dist/LottiePlayer.client-LBEC2JKY.mjs

@@ -0,0 +1,161 @@
+import { useLottie } from './chunk-YFRNE2IR.mjs';
+import { __name } from './chunk-37ZI6VD4.mjs';
+import React from 'react';
+import Lottie from 'react-lottie-player';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SIZE_PRESETS = {
+  xs: { width: 64, height: 64 },
+  sm: { width: 128, height: 128 },
+  md: { width: 256, height: 256 },
+  lg: { width: 384, height: 384 },
+  xl: { width: 512, height: 512 },
+  full: { width: "100%", height: "100%" }
+};
+function LottiePlayer({
+  src,
+  size = "md",
+  width,
+  height,
+  autoplay = true,
+  loop = true,
+  speed = 1,
+  direction = 1,
+  controls = false,
+  background,
+  className,
+  showLoading = true,
+  onComplete,
+  onLoad,
+  onError
+}) {
+  const { animationData, isLoading, error, retry } = useLottie({ src });
+  React.useEffect(() => {
+    if (animationData && onLoad) {
+      onLoad();
+    }
+  }, [animationData, onLoad]);
+  React.useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  const dimensions = React.useMemo(() => {
+    if (width !== void 0 || height !== void 0) {
+      return {
+        width: width ?? SIZE_PRESETS[size].width,
+        height: height ?? SIZE_PRESETS[size].height
+      };
+    }
+    return SIZE_PRESETS[size];
+  }, [size, width, height]);
+  const handleComplete = React.useCallback(() => {
+    if (onComplete) {
+      onComplete();
+    }
+  }, [onComplete]);
+  if (isLoading && showLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex items-center justify-center ${className || ""}`,
+        style: {
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || "transparent"
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Loading animation..." })
+        ] })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `flex items-center justify-center ${className || ""}`,
+        style: {
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || "transparent"
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 p-4 text-center", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "h-8 w-8 text-red-500",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: error.message }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: retry,
+              className: "rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200",
+              children: "Retry"
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (!animationData) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: dimensions.width,
+        height: dimensions.height,
+        background: background || "transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Lottie,
+          {
+            animationData,
+            play: autoplay,
+            loop,
+            speed,
+            direction,
+            style: {
+              width: "100%",
+              height: "100%"
+            },
+            onComplete: handleComplete,
+            rendererSettings: {
+              preserveAspectRatio: "xMidYMid meet"
+            }
+          }
+        ),
+        controls && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+          "Speed: ",
+          speed,
+          "x | Direction: ",
+          direction === 1 ? "Forward" : "Reverse"
+        ] }) })
+      ]
+    }
+  );
+}
+__name(LottiePlayer, "LottiePlayer");
+
+export { LottiePlayer };
+//# sourceMappingURL=LottiePlayer.client-LBEC2JKY.mjs.map
+//# sourceMappingURL=LottiePlayer.client-LBEC2JKY.mjs.map

package/dist/LottiePlayer.client-LBEC2JKY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/LottiePlayer/LottiePlayer.client.tsx"],"names":[],"mappings":"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","file":"LottiePlayer.client-LBEC2JKY.mjs","sourcesContent":["/**\n * LottiePlayer Component\n *\n * Universal Lottie animation player component\n */\n\n'use client';\n\nimport React from 'react';\nimport Lottie from 'react-lottie-player';\n\nimport { LottiePlayerProps } from './types';\nimport { useLottie } from './useLottie';\n\n// Size presets mapping\nconst SIZE_PRESETS = {\n  xs: { width: 64, height: 64 },\n  sm: { width: 128, height: 128 },\n  md: { width: 256, height: 256 },\n  lg: { width: 384, height: 384 },\n  xl: { width: 512, height: 512 },\n  full: { width: '100%', height: '100%' },\n} as const;\n\n/**\n * LottiePlayer component for displaying Lottie animations\n *\n * Features:\n * - Loads animations from URLs or objects\n * - Size presets or custom dimensions\n * - Playback controls (speed, direction, loop)\n * - Loading and error states\n * - Event callbacks\n *\n * Usage:\n * ```tsx\n * // From URL with size preset\n * <LottiePlayer\n *   src=\"https://example.com/animation.json\"\n *   size=\"md\"\n *   autoplay\n *   loop\n * />\n *\n * // From object with custom size\n * <LottiePlayer\n *   src={animationData}\n *   width={300}\n *   height={300}\n *   speed={1.5}\n *   controls\n * />\n *\n * // With callbacks\n * <LottiePlayer\n *   src=\"https://example.com/animation.json\"\n *   onLoad={() => console.log('Animation loaded')}\n *   onComplete={() => console.log('Animation completed')}\n *   onError={(err) => console.error('Error:', err)}\n * />\n * ```\n */\nexport function LottiePlayer({\n  src,\n  size = 'md',\n  width,\n  height,\n  autoplay = true,\n  loop = true,\n  speed = 1,\n  direction = 1,\n  controls = false,\n  background,\n  className,\n  showLoading = true,\n  onComplete,\n  onLoad,\n  onError,\n}: LottiePlayerProps) {\n  // Load animation data using our custom hook\n  const { animationData, isLoading, error, retry } = useLottie({ src });\n\n  // Notify parent about load state\n  React.useEffect(() => {\n    if (animationData && onLoad) {\n      onLoad();\n    }\n  }, [animationData, onLoad]);\n\n  // Notify parent about errors\n  React.useEffect(() => {\n    if (error && onError) {\n      onError(error);\n    }\n  }, [error, onError]);\n\n  // Determine dimensions\n  const dimensions = React.useMemo(() => {\n    // Custom dimensions override size preset\n    if (width !== undefined || height !== undefined) {\n      return {\n        width: width ?? SIZE_PRESETS[size].width,\n        height: height ?? SIZE_PRESETS[size].height,\n      };\n    }\n\n    // Use size preset\n    return SIZE_PRESETS[size];\n  }, [size, width, height]);\n\n  // Handle complete event\n  const handleComplete = React.useCallback(() => {\n    if (onComplete) {\n      onComplete();\n    }\n  }, [onComplete]);\n\n  // Loading state\n  if (isLoading && showLoading) {\n    return (\n      <div\n        className={`flex items-center justify-center ${className || ''}`}\n        style={{\n          width: dimensions.width,\n          height: dimensions.height,\n          background: background || 'transparent',\n        }}\n      >\n        <div className=\"flex flex-col items-center gap-2\">\n          <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900\" />\n          <span className=\"text-sm text-gray-500\">Loading animation...</span>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div\n        className={`flex items-center justify-center ${className || ''}`}\n        style={{\n          width: dimensions.width,\n          height: dimensions.height,\n          background: background || 'transparent',\n        }}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-4 text-center\">\n          <svg\n            className=\"h-8 w-8 text-red-500\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <div className=\"text-sm text-red-600\">{error.message}</div>\n          <button\n            onClick={retry}\n            className=\"rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200\"\n          >\n            Retry\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // No animation data\n  if (!animationData) {\n    return null;\n  }\n\n  // Render the Lottie player\n  return (\n    <div\n      className={className}\n      style={{\n        width: dimensions.width,\n        height: dimensions.height,\n        background: background || 'transparent',\n      }}\n    >\n      <Lottie\n        animationData={animationData}\n        play={autoplay}\n        loop={loop}\n        speed={speed}\n        direction={direction}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n        onComplete={handleComplete}\n        rendererSettings={{\n          preserveAspectRatio: 'xMidYMid meet',\n        }}\n      />\n      {controls && (\n        <div className=\"mt-2 flex items-center justify-center gap-2\">\n          <span className=\"text-xs text-gray-500\">\n            Speed: {speed}x | Direction: {direction === 1 ? 'Forward' : 'Reverse'}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/LottiePlayer.client-WFMG2OOW.cjs

@@ -0,0 +1,168 @@
+'use strict';
+
+var chunk3HK2OE62_cjs = require('./chunk-3HK2OE62.cjs');
+var chunkUQ3XI5MY_cjs = require('./chunk-UQ3XI5MY.cjs');
+var React = require('react');
+var Lottie = require('react-lottie-player');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
+
+var SIZE_PRESETS = {
+  xs: { width: 64, height: 64 },
+  sm: { width: 128, height: 128 },
+  md: { width: 256, height: 256 },
+  lg: { width: 384, height: 384 },
+  xl: { width: 512, height: 512 },
+  full: { width: "100%", height: "100%" }
+};
+function LottiePlayer({
+  src,
+  size = "md",
+  width,
+  height,
+  autoplay = true,
+  loop = true,
+  speed = 1,
+  direction = 1,
+  controls = false,
+  background,
+  className,
+  showLoading = true,
+  onComplete,
+  onLoad,
+  onError
+}) {
+  const { animationData, isLoading, error, retry } = chunk3HK2OE62_cjs.useLottie({ src });
+  React__default.default.useEffect(() => {
+    if (animationData && onLoad) {
+      onLoad();
+    }
+  }, [animationData, onLoad]);
+  React__default.default.useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+  const dimensions = React__default.default.useMemo(() => {
+    if (width !== void 0 || height !== void 0) {
+      return {
+        width: width ?? SIZE_PRESETS[size].width,
+        height: height ?? SIZE_PRESETS[size].height
+      };
+    }
+    return SIZE_PRESETS[size];
+  }, [size, width, height]);
+  const handleComplete = React__default.default.useCallback(() => {
+    if (onComplete) {
+      onComplete();
+    }
+  }, [onComplete]);
+  if (isLoading && showLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex items-center justify-center ${className || ""}`,
+        style: {
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || "transparent"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Loading animation..." })
+        ] })
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `flex items-center justify-center ${className || ""}`,
+        style: {
+          width: dimensions.width,
+          height: dimensions.height,
+          background: background || "transparent"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 p-4 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "h-8 w-8 text-red-500",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-red-600", children: error.message }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: retry,
+              className: "rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200",
+              children: "Retry"
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (!animationData) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: dimensions.width,
+        height: dimensions.height,
+        background: background || "transparent"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Lottie__default.default,
+          {
+            animationData,
+            play: autoplay,
+            loop,
+            speed,
+            direction,
+            style: {
+              width: "100%",
+              height: "100%"
+            },
+            onComplete: handleComplete,
+            rendererSettings: {
+              preserveAspectRatio: "xMidYMid meet"
+            }
+          }
+        ),
+        controls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex items-center justify-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
+          "Speed: ",
+          speed,
+          "x | Direction: ",
+          direction === 1 ? "Forward" : "Reverse"
+        ] }) })
+      ]
+    }
+  );
+}
+chunkUQ3XI5MY_cjs.__name(LottiePlayer, "LottiePlayer");
+
+exports.LottiePlayer = LottiePlayer;
+//# sourceMappingURL=LottiePlayer.client-WFMG2OOW.cjs.map
+//# sourceMappingURL=LottiePlayer.client-WFMG2OOW.cjs.map

package/dist/LottiePlayer.client-WFMG2OOW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tools/LottiePlayer/LottiePlayer.client.tsx"],"names":["useLottie","React","jsx","jsxs","Lottie","__name"],"mappings":"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","file":"LottiePlayer.client-WFMG2OOW.cjs","sourcesContent":["/**\n * LottiePlayer Component\n *\n * Universal Lottie animation player component\n */\n\n'use client';\n\nimport React from 'react';\nimport Lottie from 'react-lottie-player';\n\nimport { LottiePlayerProps } from './types';\nimport { useLottie } from './useLottie';\n\n// Size presets mapping\nconst SIZE_PRESETS = {\n  xs: { width: 64, height: 64 },\n  sm: { width: 128, height: 128 },\n  md: { width: 256, height: 256 },\n  lg: { width: 384, height: 384 },\n  xl: { width: 512, height: 512 },\n  full: { width: '100%', height: '100%' },\n} as const;\n\n/**\n * LottiePlayer component for displaying Lottie animations\n *\n * Features:\n * - Loads animations from URLs or objects\n * - Size presets or custom dimensions\n * - Playback controls (speed, direction, loop)\n * - Loading and error states\n * - Event callbacks\n *\n * Usage:\n * ```tsx\n * // From URL with size preset\n * <LottiePlayer\n *   src=\"https://example.com/animation.json\"\n *   size=\"md\"\n *   autoplay\n *   loop\n * />\n *\n * // From object with custom size\n * <LottiePlayer\n *   src={animationData}\n *   width={300}\n *   height={300}\n *   speed={1.5}\n *   controls\n * />\n *\n * // With callbacks\n * <LottiePlayer\n *   src=\"https://example.com/animation.json\"\n *   onLoad={() => console.log('Animation loaded')}\n *   onComplete={() => console.log('Animation completed')}\n *   onError={(err) => console.error('Error:', err)}\n * />\n * ```\n */\nexport function LottiePlayer({\n  src,\n  size = 'md',\n  width,\n  height,\n  autoplay = true,\n  loop = true,\n  speed = 1,\n  direction = 1,\n  controls = false,\n  background,\n  className,\n  showLoading = true,\n  onComplete,\n  onLoad,\n  onError,\n}: LottiePlayerProps) {\n  // Load animation data using our custom hook\n  const { animationData, isLoading, error, retry } = useLottie({ src });\n\n  // Notify parent about load state\n  React.useEffect(() => {\n    if (animationData && onLoad) {\n      onLoad();\n    }\n  }, [animationData, onLoad]);\n\n  // Notify parent about errors\n  React.useEffect(() => {\n    if (error && onError) {\n      onError(error);\n    }\n  }, [error, onError]);\n\n  // Determine dimensions\n  const dimensions = React.useMemo(() => {\n    // Custom dimensions override size preset\n    if (width !== undefined || height !== undefined) {\n      return {\n        width: width ?? SIZE_PRESETS[size].width,\n        height: height ?? SIZE_PRESETS[size].height,\n      };\n    }\n\n    // Use size preset\n    return SIZE_PRESETS[size];\n  }, [size, width, height]);\n\n  // Handle complete event\n  const handleComplete = React.useCallback(() => {\n    if (onComplete) {\n      onComplete();\n    }\n  }, [onComplete]);\n\n  // Loading state\n  if (isLoading && showLoading) {\n    return (\n      <div\n        className={`flex items-center justify-center ${className || ''}`}\n        style={{\n          width: dimensions.width,\n          height: dimensions.height,\n          background: background || 'transparent',\n        }}\n      >\n        <div className=\"flex flex-col items-center gap-2\">\n          <div className=\"h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-gray-900\" />\n          <span className=\"text-sm text-gray-500\">Loading animation...</span>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div\n        className={`flex items-center justify-center ${className || ''}`}\n        style={{\n          width: dimensions.width,\n          height: dimensions.height,\n          background: background || 'transparent',\n        }}\n      >\n        <div className=\"flex flex-col items-center gap-2 p-4 text-center\">\n          <svg\n            className=\"h-8 w-8 text-red-500\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <div className=\"text-sm text-red-600\">{error.message}</div>\n          <button\n            onClick={retry}\n            className=\"rounded bg-red-100 px-3 py-1 text-sm text-red-700 hover:bg-red-200\"\n          >\n            Retry\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // No animation data\n  if (!animationData) {\n    return null;\n  }\n\n  // Render the Lottie player\n  return (\n    <div\n      className={className}\n      style={{\n        width: dimensions.width,\n        height: dimensions.height,\n        background: background || 'transparent',\n      }}\n    >\n      <Lottie\n        animationData={animationData}\n        play={autoplay}\n        loop={loop}\n        speed={speed}\n        direction={direction}\n        style={{\n          width: '100%',\n          height: '100%',\n        }}\n        onComplete={handleComplete}\n        rendererSettings={{\n          preserveAspectRatio: 'xMidYMid meet',\n        }}\n      />\n      {controls && (\n        <div className=\"mt-2 flex items-center justify-center gap-2\">\n          <span className=\"text-xs text-gray-500\">\n            Speed: {speed}x | Direction: {direction === 1 ? 'Forward' : 'Reverse'}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}