@zentauri-ui/zentauri-components 0.0.84 → 0.0.91

package/dist/ui/spinner.cjs

@@ -0,0 +1,219 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui/spinner/index.ts
+var spinner_exports = {};
+__export(spinner_exports, {
+  Spinner: () => Spinner,
+  spinnerAnimationPresets: () => spinnerAnimationPresets,
+  spinnerVariants: () => spinnerVariants
+});
+module.exports = __toCommonJS(spinner_exports);
+
+// src/ui/spinner/spinner.tsx
+var import_framer_motion = require("framer-motion");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/spinner/variants.ts
+var import_class_variance_authority = require("class-variance-authority");
+var spinnerAppearances = {
+  default: "text-slate-50",
+  secondary: "text-slate-300",
+  destructive: "text-rose-400",
+  ghost: "text-slate-300",
+  emerald: "text-emerald-400",
+  indigo: "text-indigo-400",
+  purple: "text-purple-400",
+  pink: "text-pink-400",
+  rose: "text-rose-400",
+  sky: "text-sky-400",
+  teal: "text-teal-400",
+  yellow: "text-yellow-400",
+  orange: "text-orange-400",
+  "gradient-blue": "text-blue-400",
+  "gradient-green": "text-green-400",
+  "gradient-red": "text-red-400",
+  "gradient-yellow": "text-yellow-400",
+  "gradient-purple": "text-purple-400",
+  "gradient-teal": "text-teal-400",
+  "gradient-indigo": "text-indigo-400",
+  "gradient-pink": "text-pink-400",
+  "gradient-orange": "text-orange-400"
+};
+var spinnerVariants = (0, import_class_variance_authority.cva)("inline-flex items-center justify-center", {
+  variants: {
+    appearance: spinnerAppearances,
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8",
+      xl: "size-10"
+    },
+    variant: {
+      ring: "",
+      dots: "",
+      pulse: "",
+      bars: ""
+    }
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    variant: "ring"
+  }
+});
+
+// src/ui/spinner/spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Spinner(props) {
+  const {
+    className,
+    appearance,
+    size,
+    variant = "ring",
+    ref,
+    "aria-label": ariaLabel = "Loading",
+    ...rest
+  } = props;
+  const rootClass = cn(spinnerVariants({ appearance, size, variant }), className);
+  if (variant === "ring") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass, "relative"),
+        initial: false,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            className: "block size-full rounded-full border-2 border-current border-t-transparent",
+            animate: { rotate: 360 },
+            transition: { repeat: Infinity, ease: "linear", duration: 0.85 },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+  if (variant === "dots") {
+    const dotSize = size === "xs" ? "size-1" : size === "sm" ? "size-1.5" : size === "md" ? "size-2" : size === "lg" ? "size-2.5" : "size-3";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass, "gap-1"),
+        initial: false,
+        ...rest,
+        children: [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            className: cn("rounded-full bg-current", dotSize),
+            animate: { y: [0, -5, 0], opacity: [0.45, 1, 0.45] },
+            transition: {
+              repeat: Infinity,
+              duration: 0.55,
+              ease: "easeInOut",
+              delay: index * 0.12
+            },
+            "aria-hidden": true
+          },
+          index
+        ))
+      }
+    );
+  }
+  if (variant === "pulse") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass),
+        initial: false,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.span,
+          {
+            className: "block size-full rounded-full bg-current",
+            animate: { scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] },
+            transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+  const barWidth = size === "xs" ? "w-0.5" : size === "sm" ? "w-0.5" : size === "md" ? "w-1" : size === "lg" ? "w-1.5" : "w-2";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.span,
+    {
+      ref,
+      role: "status",
+      "data-slot": "spinner",
+      "aria-label": ariaLabel,
+      className: cn(rootClass, "gap-1"),
+      initial: false,
+      ...rest,
+      children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          className: cn("h-full max-h-[70%] rounded-full bg-current", barWidth),
+          animate: { scaleY: [0.35, 1, 0.35] },
+          transition: {
+            repeat: Infinity,
+            duration: 0.65,
+            ease: "easeInOut",
+            delay: index * 0.1
+          },
+          "aria-hidden": true
+        },
+        index
+      ))
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+
+// src/ui/spinner/animations.ts
+var spinnerAnimationPresets = {
+  none: {}
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spinner,
+  spinnerAnimationPresets,
+  spinnerVariants
+});
+//# sourceMappingURL=spinner.cjs.map

package/dist/ui/spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/spinner/index.ts","../../src/ui/spinner/spinner.tsx","../../src/lib/utils.ts","../../src/ui/spinner/variants.ts","../../src/ui/spinner/animations.ts"],"sourcesContent":["export { Spinner } from \"./spinner\";\nexport type { SpinnerProps } from \"./types\";\nexport { spinnerAnimationPresets } from \"./animations\";\nexport { spinnerVariants } from \"./variants\";\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n  const {\n    className,\n    appearance,\n    size,\n    variant = \"ring\",\n    ref,\n    \"aria-label\": ariaLabel = \"Loading\",\n    ...rest\n  } = props;\n  const rootClass = cn(spinnerVariants({ appearance, size, variant }), className);\n\n  if (variant === \"ring\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"relative\")}\n        initial={false}\n        {...rest}\n      >\n        <motion.span\n          className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  if (variant === \"dots\") {\n    const dotSize =\n      size === \"xs\"\n        ? \"size-1\"\n        : size === \"sm\"\n          ? \"size-1.5\"\n          : size === \"md\"\n            ? \"size-2\"\n            : size === \"lg\"\n              ? \"size-2.5\"\n              : \"size-3\";\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"gap-1\")}\n        initial={false}\n        {...rest}\n      >\n        {[0, 1, 2].map((index) => (\n          <motion.span\n            key={index}\n            className={cn(\"rounded-full bg-current\", dotSize)}\n            animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n            transition={{\n              repeat: Infinity,\n              duration: 0.55,\n              ease: \"easeInOut\",\n              delay: index * 0.12,\n            }}\n            aria-hidden\n          />\n        ))}\n      </motion.span>\n    );\n  }\n\n  if (variant === \"pulse\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass)}\n        initial={false}\n        {...rest}\n      >\n        <motion.span\n          className=\"block size-full rounded-full bg-current\"\n          animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n          transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  const barWidth =\n    size === \"xs\"\n      ? \"w-0.5\"\n      : size === \"sm\"\n        ? \"w-0.5\"\n        : size === \"md\"\n          ? \"w-1\"\n          : size === \"lg\"\n            ? \"w-1.5\"\n            : \"w-2\";\n  return (\n    <motion.span\n      ref={ref}\n      role=\"status\"\n      data-slot=\"spinner\"\n      aria-label={ariaLabel}\n      className={cn(rootClass, \"gap-1\")}\n      initial={false}\n      {...rest}\n    >\n      {[0, 1, 2, 3].map((index) => (\n        <motion.span\n          key={index}\n          className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n          animate={{ scaleY: [0.35, 1, 0.35] }}\n          transition={{\n            repeat: Infinity,\n            duration: 0.65,\n            ease: \"easeInOut\",\n            delay: index * 0.1,\n          }}\n          aria-hidden\n        />\n      ))}\n    </motion.span>\n  );\n}\n\nSpinner.displayName = \"Spinner\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n  default: \"text-slate-50\",\n  secondary: \"text-slate-300\",\n  destructive: \"text-rose-400\",\n  ghost: \"text-slate-300\",\n  emerald: \"text-emerald-400\",\n  indigo: \"text-indigo-400\",\n  purple: \"text-purple-400\",\n  pink: \"text-pink-400\",\n  rose: \"text-rose-400\",\n  sky: \"text-sky-400\",\n  teal: \"text-teal-400\",\n  yellow: \"text-yellow-400\",\n  orange: \"text-orange-400\",\n  \"gradient-blue\": \"text-blue-400\",\n  \"gradient-green\": \"text-green-400\",\n  \"gradient-red\": \"text-red-400\",\n  \"gradient-yellow\": \"text-yellow-400\",\n  \"gradient-purple\": \"text-purple-400\",\n  \"gradient-teal\": \"text-teal-400\",\n  \"gradient-indigo\": \"text-indigo-400\",\n  \"gradient-pink\": \"text-pink-400\",\n  \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n  variants: {\n    appearance: spinnerAppearances,\n    size: {\n      xs: \"size-3\",\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-8\",\n      xl: \"size-10\",\n    },\n    variant: {\n      ring: \"\",\n      dots: \"\",\n      pulse: \"\",\n      bars: \"\",\n    },\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    variant: \"ring\",\n  },\n});\n","/** Spinner variants use Framer `animate` on the root; presets reserved for future. */\nexport const spinnerAnimationPresets = {\n  none: {},\n} as const;\n"],"mappings":"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","names":[]}

package/dist/ui/spinner.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLMotionProps } from 'framer-motion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const spinnerVariants: (props?: ({
+    appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "secondary" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    variant?: "ring" | "pulse" | "dots" | "bars" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
+type SpinnerProps = SpinnerVariantProps & Omit<HTMLMotionProps<"span">, "children"> & {
+    "aria-label"?: string;
+};
+
+declare function Spinner(props: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+
+/** Spinner variants use Framer `animate` on the root; presets reserved for future. */
+declare const spinnerAnimationPresets: {
+    readonly none: {};
+};
+
+export { Spinner, type SpinnerProps, spinnerAnimationPresets, spinnerVariants };

package/dist/ui/spinner.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLMotionProps } from 'framer-motion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const spinnerVariants: (props?: ({
+    appearance?: "default" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "secondary" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    variant?: "ring" | "pulse" | "dots" | "bars" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;
+type SpinnerProps = SpinnerVariantProps & Omit<HTMLMotionProps<"span">, "children"> & {
+    "aria-label"?: string;
+};
+
+declare function Spinner(props: SpinnerProps): react_jsx_runtime.JSX.Element;
+declare namespace Spinner {
+    var displayName: string;
+}
+
+/** Spinner variants use Framer `animate` on the root; presets reserved for future. */
+declare const spinnerAnimationPresets: {
+    readonly none: {};
+};
+
+export { Spinner, type SpinnerProps, spinnerAnimationPresets, spinnerVariants };

package/dist/ui/spinner.js

@@ -0,0 +1,193 @@
+"use client";
+
+
+// src/ui/spinner/spinner.tsx
+import { motion } from "framer-motion";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/ui/spinner/variants.ts
+import { cva } from "class-variance-authority";
+var spinnerAppearances = {
+  default: "text-slate-50",
+  secondary: "text-slate-300",
+  destructive: "text-rose-400",
+  ghost: "text-slate-300",
+  emerald: "text-emerald-400",
+  indigo: "text-indigo-400",
+  purple: "text-purple-400",
+  pink: "text-pink-400",
+  rose: "text-rose-400",
+  sky: "text-sky-400",
+  teal: "text-teal-400",
+  yellow: "text-yellow-400",
+  orange: "text-orange-400",
+  "gradient-blue": "text-blue-400",
+  "gradient-green": "text-green-400",
+  "gradient-red": "text-red-400",
+  "gradient-yellow": "text-yellow-400",
+  "gradient-purple": "text-purple-400",
+  "gradient-teal": "text-teal-400",
+  "gradient-indigo": "text-indigo-400",
+  "gradient-pink": "text-pink-400",
+  "gradient-orange": "text-orange-400"
+};
+var spinnerVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    appearance: spinnerAppearances,
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8",
+      xl: "size-10"
+    },
+    variant: {
+      ring: "",
+      dots: "",
+      pulse: "",
+      bars: ""
+    }
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    variant: "ring"
+  }
+});
+
+// src/ui/spinner/spinner.tsx
+import { jsx } from "react/jsx-runtime";
+function Spinner(props) {
+  const {
+    className,
+    appearance,
+    size,
+    variant = "ring",
+    ref,
+    "aria-label": ariaLabel = "Loading",
+    ...rest
+  } = props;
+  const rootClass = cn(spinnerVariants({ appearance, size, variant }), className);
+  if (variant === "ring") {
+    return /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass, "relative"),
+        initial: false,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "block size-full rounded-full border-2 border-current border-t-transparent",
+            animate: { rotate: 360 },
+            transition: { repeat: Infinity, ease: "linear", duration: 0.85 },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+  if (variant === "dots") {
+    const dotSize = size === "xs" ? "size-1" : size === "sm" ? "size-1.5" : size === "md" ? "size-2" : size === "lg" ? "size-2.5" : "size-3";
+    return /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass, "gap-1"),
+        initial: false,
+        ...rest,
+        children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: cn("rounded-full bg-current", dotSize),
+            animate: { y: [0, -5, 0], opacity: [0.45, 1, 0.45] },
+            transition: {
+              repeat: Infinity,
+              duration: 0.55,
+              ease: "easeInOut",
+              delay: index * 0.12
+            },
+            "aria-hidden": true
+          },
+          index
+        ))
+      }
+    );
+  }
+  if (variant === "pulse") {
+    return /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        ref,
+        role: "status",
+        "data-slot": "spinner",
+        "aria-label": ariaLabel,
+        className: cn(rootClass),
+        initial: false,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "block size-full rounded-full bg-current",
+            animate: { scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] },
+            transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+  const barWidth = size === "xs" ? "w-0.5" : size === "sm" ? "w-0.5" : size === "md" ? "w-1" : size === "lg" ? "w-1.5" : "w-2";
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      ref,
+      role: "status",
+      "data-slot": "spinner",
+      "aria-label": ariaLabel,
+      className: cn(rootClass, "gap-1"),
+      initial: false,
+      ...rest,
+      children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: cn("h-full max-h-[70%] rounded-full bg-current", barWidth),
+          animate: { scaleY: [0.35, 1, 0.35] },
+          transition: {
+            repeat: Infinity,
+            duration: 0.65,
+            ease: "easeInOut",
+            delay: index * 0.1
+          },
+          "aria-hidden": true
+        },
+        index
+      ))
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+
+// src/ui/spinner/animations.ts
+var spinnerAnimationPresets = {
+  none: {}
+};
+export {
+  Spinner,
+  spinnerAnimationPresets,
+  spinnerVariants
+};
+//# sourceMappingURL=spinner.js.map

package/dist/ui/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/spinner/spinner.tsx","../../src/lib/utils.ts","../../src/ui/spinner/variants.ts","../../src/ui/spinner/animations.ts"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n  const {\n    className,\n    appearance,\n    size,\n    variant = \"ring\",\n    ref,\n    \"aria-label\": ariaLabel = \"Loading\",\n    ...rest\n  } = props;\n  const rootClass = cn(spinnerVariants({ appearance, size, variant }), className);\n\n  if (variant === \"ring\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"relative\")}\n        initial={false}\n        {...rest}\n      >\n        <motion.span\n          className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  if (variant === \"dots\") {\n    const dotSize =\n      size === \"xs\"\n        ? \"size-1\"\n        : size === \"sm\"\n          ? \"size-1.5\"\n          : size === \"md\"\n            ? \"size-2\"\n            : size === \"lg\"\n              ? \"size-2.5\"\n              : \"size-3\";\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"gap-1\")}\n        initial={false}\n        {...rest}\n      >\n        {[0, 1, 2].map((index) => (\n          <motion.span\n            key={index}\n            className={cn(\"rounded-full bg-current\", dotSize)}\n            animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n            transition={{\n              repeat: Infinity,\n              duration: 0.55,\n              ease: \"easeInOut\",\n              delay: index * 0.12,\n            }}\n            aria-hidden\n          />\n        ))}\n      </motion.span>\n    );\n  }\n\n  if (variant === \"pulse\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass)}\n        initial={false}\n        {...rest}\n      >\n        <motion.span\n          className=\"block size-full rounded-full bg-current\"\n          animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n          transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  const barWidth =\n    size === \"xs\"\n      ? \"w-0.5\"\n      : size === \"sm\"\n        ? \"w-0.5\"\n        : size === \"md\"\n          ? \"w-1\"\n          : size === \"lg\"\n            ? \"w-1.5\"\n            : \"w-2\";\n  return (\n    <motion.span\n      ref={ref}\n      role=\"status\"\n      data-slot=\"spinner\"\n      aria-label={ariaLabel}\n      className={cn(rootClass, \"gap-1\")}\n      initial={false}\n      {...rest}\n    >\n      {[0, 1, 2, 3].map((index) => (\n        <motion.span\n          key={index}\n          className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n          animate={{ scaleY: [0.35, 1, 0.35] }}\n          transition={{\n            repeat: Infinity,\n            duration: 0.65,\n            ease: \"easeInOut\",\n            delay: index * 0.1,\n          }}\n          aria-hidden\n        />\n      ))}\n    </motion.span>\n  );\n}\n\nSpinner.displayName = \"Spinner\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}","import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n  default: \"text-slate-50\",\n  secondary: \"text-slate-300\",\n  destructive: \"text-rose-400\",\n  ghost: \"text-slate-300\",\n  emerald: \"text-emerald-400\",\n  indigo: \"text-indigo-400\",\n  purple: \"text-purple-400\",\n  pink: \"text-pink-400\",\n  rose: \"text-rose-400\",\n  sky: \"text-sky-400\",\n  teal: \"text-teal-400\",\n  yellow: \"text-yellow-400\",\n  orange: \"text-orange-400\",\n  \"gradient-blue\": \"text-blue-400\",\n  \"gradient-green\": \"text-green-400\",\n  \"gradient-red\": \"text-red-400\",\n  \"gradient-yellow\": \"text-yellow-400\",\n  \"gradient-purple\": \"text-purple-400\",\n  \"gradient-teal\": \"text-teal-400\",\n  \"gradient-indigo\": \"text-indigo-400\",\n  \"gradient-pink\": \"text-pink-400\",\n  \"gradient-orange\": \"text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n  variants: {\n    appearance: spinnerAppearances,\n    size: {\n      xs: \"size-3\",\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-8\",\n      xl: \"size-10\",\n    },\n    variant: {\n      ring: \"\",\n      dots: \"\",\n      pulse: \"\",\n      bars: \"\",\n    },\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    variant: \"ring\",\n  },\n});\n","/** Spinner variants use Framer `animate` on the root; presets reserved for future. */\nexport const spinnerAnimationPresets = {\n  none: {},\n} as const;\n"],"mappings":"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","names":[]}