@zentauri-ui/zentauri-components 0.0.84 → 0.0.92

package/dist/ui/skeleton.mjs

@@ -0,0 +1,540 @@
+"use client";
+
+import {
+  cn
+} from "../chunk-MEWYFWBX.mjs";
+
+// src/ui/skeleton/skeleton.tsx
+import { createContext, useContext, useMemo } from "react";
+import { motion } from "framer-motion";
+
+// src/ui/skeleton/animations.ts
+var skeletonAnimationPresets = {
+  none: {},
+  shimmer: {
+    initial: { backgroundPosition: "100% 0%" },
+    animate: { backgroundPosition: ["100% 0%", "0% 0%"] },
+    transition: { repeat: Infinity, duration: 1.35, ease: "linear" }
+  },
+  pulse: {
+    initial: { opacity: 1 },
+    animate: { opacity: [1, 0.5, 1] },
+    transition: { repeat: Infinity, duration: 1.35, ease: "easeInOut" }
+  }
+};
+
+// src/ui/skeleton/variants.ts
+import { cva } from "class-variance-authority";
+var shimmerLayer = "[background-size:220%_100%] [background-repeat:no-repeat] [background-position:100%_0%]";
+var skeletonShimmerGradientClasses = {
+  default: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.22),rgba(255,255,255,0.04))]`,
+  subtle: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.14),rgba(255,255,255,0.03))]`,
+  muted: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.1),rgba(255,255,255,0.02))]`,
+  sky: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(56,189,248,0.1),rgba(56,189,248,0.42),rgba(56,189,248,0.1))]`,
+  rose: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,113,133,0.1),rgba(251,113,133,0.42),rgba(251,113,133,0.1))]`,
+  purple: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(192,132,252,0.1),rgba(192,132,252,0.42),rgba(192,132,252,0.1))]`,
+  pink: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
+  orange: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,
+  yellow: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.4),rgba(250,204,21,0.12))]`,
+  teal: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
+  indigo: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
+  emerald: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
+  gray: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(161,161,170,0.1),rgba(161,161,170,0.38),rgba(161,161,170,0.1))]`,
+  amber: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,191,36,0.12),rgba(251,191,36,0.42),rgba(251,191,36,0.12))]`,
+  violet: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
+  "gradient-blue": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(100,149,237,0.1),rgba(100,149,237,0.42),rgba(100,149,237,0.1))]`,
+  "gradient-green": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,
+  "gradient-red": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(239,68,68,0.42),rgba(239,68,68,0.1))]`,
+  "gradient-yellow": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.42),rgba(250,204,21,0.12))]`,
+  "gradient-purple": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,
+  "gradient-teal": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,
+  "gradient-indigo": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,
+  "gradient-pink": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,
+  "gradient-orange": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`
+};
+var skeletonVariants = cva(
+  "relative overflow-hidden bg-white/10 text-transparent",
+  {
+    variants: {
+      appearance: {
+        default: "bg-white/10",
+        subtle: "bg-white/[0.07]",
+        muted: "bg-slate-800/80",
+        sky: "bg-sky-500/10",
+        rose: "bg-rose-500/10",
+        purple: "bg-purple-500/10",
+        pink: "bg-pink-500/10",
+        orange: "bg-orange-500/10",
+        yellow: "bg-yellow-500/10",
+        teal: "bg-teal-500/10",
+        indigo: "bg-indigo-500/10",
+        emerald: "bg-emerald-500/10",
+        gray: "bg-gray-500/10",
+        amber: "bg-amber-500/10",
+        violet: "bg-violet-500/10",
+        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600"
+      },
+      size: {
+        sm: "min-h-3",
+        md: "min-h-4",
+        lg: "min-h-6"
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-md",
+        md: "rounded-lg",
+        lg: "rounded-xl",
+        full: "rounded-full"
+      },
+      animation: {
+        none: "",
+        shimmer: "",
+        pulse: ""
+      },
+      shimmerTone: {
+        default: "",
+        subtle: "",
+        muted: "",
+        sky: "",
+        rose: "",
+        purple: "",
+        pink: "",
+        orange: "",
+        yellow: "",
+        teal: "",
+        indigo: "",
+        emerald: "",
+        gray: "",
+        amber: "",
+        violet: "",
+        "gradient-blue": "",
+        "gradient-green": "",
+        "gradient-red": "",
+        "gradient-yellow": "",
+        "gradient-purple": "",
+        "gradient-teal": "",
+        "gradient-indigo": "",
+        "gradient-pink": "",
+        "gradient-orange": ""
+      }
+    },
+    compoundVariants: [
+      {
+        animation: "shimmer",
+        shimmerTone: "default",
+        class: skeletonShimmerGradientClasses.default
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "muted",
+        class: skeletonShimmerGradientClasses.subtle
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "subtle",
+        class: skeletonShimmerGradientClasses.subtle
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "sky",
+        class: skeletonShimmerGradientClasses.sky
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "rose",
+        class: skeletonShimmerGradientClasses.rose
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "purple",
+        class: skeletonShimmerGradientClasses.purple
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "pink",
+        class: skeletonShimmerGradientClasses.pink
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "orange",
+        class: skeletonShimmerGradientClasses.orange
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "yellow",
+        class: skeletonShimmerGradientClasses.yellow
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "teal",
+        class: skeletonShimmerGradientClasses.teal
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "indigo",
+        class: skeletonShimmerGradientClasses.indigo
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "emerald",
+        class: skeletonShimmerGradientClasses.emerald
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gray",
+        class: skeletonShimmerGradientClasses.gray
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "amber",
+        class: skeletonShimmerGradientClasses.amber
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "violet",
+        class: skeletonShimmerGradientClasses.violet
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-blue",
+        class: skeletonShimmerGradientClasses["gradient-blue"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-green",
+        class: skeletonShimmerGradientClasses["gradient-green"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-red",
+        class: skeletonShimmerGradientClasses["gradient-red"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-yellow",
+        class: skeletonShimmerGradientClasses["gradient-yellow"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-purple",
+        class: skeletonShimmerGradientClasses["gradient-purple"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-teal",
+        class: skeletonShimmerGradientClasses["gradient-teal"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-indigo",
+        class: skeletonShimmerGradientClasses["gradient-indigo"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-pink",
+        class: skeletonShimmerGradientClasses["gradient-pink"]
+      },
+      {
+        animation: "shimmer",
+        shimmerTone: "gradient-orange",
+        class: skeletonShimmerGradientClasses["gradient-orange"]
+      },
+      {
+        animation: "pulse",
+        class: ""
+      }
+    ],
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      rounded: "md",
+      animation: "shimmer",
+      shimmerTone: "default"
+    }
+  }
+);
+var skeletonTextLineVariants = cva("block w-full", {
+  variants: {
+    size: {
+      sm: "h-2.5",
+      md: "h-3",
+      lg: "h-4"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/ui/skeleton/skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SkeletonAnimationContext = createContext(
+  void 0
+);
+function useSkeletonAnimation(fallback) {
+  return useContext(SkeletonAnimationContext) ?? fallback;
+}
+function Skeleton(props) {
+  const {
+    className,
+    appearance,
+    size,
+    rounded,
+    animation = "shimmer",
+    shimmerTone,
+    busy,
+    children,
+    ref,
+    ...rest
+  } = props;
+  const motionProps = skeletonAnimationPresets[animation];
+  const ctx = useMemo(() => animation, [animation]);
+  return /* @__PURE__ */ jsx(SkeletonAnimationContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      "data-slot": "skeleton",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation,
+          shimmerTone
+        }),
+        className
+      ),
+      initial: false,
+      ...motionProps,
+      ...rest,
+      children
+    }
+  ) });
+}
+Skeleton.displayName = "Skeleton";
+function SkeletonText(props) {
+  const {
+    lines = 3,
+    className,
+    appearance,
+    size,
+    rounded,
+    animation = "shimmer",
+    shimmerTone,
+    busy,
+    ref
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton-text",
+      className: cn("flex w-full flex-col gap-2", className),
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: index === 0 ? ref : void 0,
+          className: cn(
+            skeletonVariants({
+              appearance,
+              size,
+              rounded,
+              animation: effectiveAnimation,
+              shimmerTone
+            }),
+            skeletonTextLineVariants({ size }),
+            index === lines - 1 ? "w-3/5" : "w-full"
+          ),
+          initial: false,
+          ...motionProps
+        },
+        index
+      ))
+    }
+  );
+}
+SkeletonText.displayName = "SkeletonText";
+var avatarSizeClass = {
+  xs: "size-6",
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+  xl: "size-14",
+  "2xl": "size-16"
+};
+function SkeletonAvatar(props) {
+  const {
+    avatarSize = "md",
+    className,
+    appearance,
+    size,
+    rounded = "full",
+    animation,
+    shimmerTone,
+    busy,
+    ref,
+    ...rest
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      "data-slot": "skeleton-avatar",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation: effectiveAnimation,
+          shimmerTone
+        }),
+        avatarSizeClass[avatarSize],
+        className
+      ),
+      initial: false,
+      ...motionProps,
+      ...rest
+    }
+  );
+}
+SkeletonAvatar.displayName = "SkeletonAvatar";
+function SkeletonCard(props) {
+  const {
+    className,
+    busy,
+    animation = "shimmer",
+    shimmerTone,
+    appearance,
+    size,
+    rounded,
+    ref
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "skeleton-card",
+      className: cn("w-full max-w-sm", className),
+      "aria-busy": busy ? true : void 0,
+      children: /* @__PURE__ */ jsxs(
+        Skeleton,
+        {
+          rounded: "lg",
+          animation,
+          shimmerTone,
+          appearance,
+          size,
+          busy,
+          className: "flex flex-col gap-4 p-4",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                SkeletonAvatar,
+                {
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone,
+                  rounded
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsx(
+                SkeletonText,
+                {
+                  lines: 2,
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              SkeletonText,
+              {
+                lines: 4,
+                appearance,
+                size,
+                animation,
+                shimmerTone
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+SkeletonCard.displayName = "SkeletonCard";
+var buttonHeight = {
+  sm: "h-8 w-24",
+  md: "h-10 w-32",
+  lg: "h-12 w-40"
+};
+function SkeletonButton(props) {
+  const {
+    buttonSize = "md",
+    className,
+    appearance,
+    size,
+    rounded = "md",
+    animation,
+    shimmerTone,
+    busy,
+    ref,
+    ...rest
+  } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      "data-slot": "skeleton-button",
+      "aria-hidden": true,
+      "aria-busy": busy ? true : void 0,
+      className: cn(
+        skeletonVariants({
+          appearance,
+          size,
+          rounded,
+          animation: effectiveAnimation,
+          shimmerTone
+        }),
+        buttonHeight[buttonSize],
+        className
+      ),
+      initial: false,
+      ...motionProps,
+      ...rest
+    }
+  );
+}
+SkeletonButton.displayName = "SkeletonButton";
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonCard,
+  SkeletonText,
+  skeletonAnimationPresets,
+  skeletonShimmerGradientClasses,
+  skeletonTextLineVariants,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.mjs.map

package/dist/ui/skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/skeleton/skeleton.tsx","../../src/ui/skeleton/animations.ts","../../src/ui/skeleton/variants.ts"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { skeletonAnimationPresets } from \"./animations\";\nimport type {\n  SkeletonAnimation,\n  SkeletonAvatarProps,\n  SkeletonButtonProps,\n  SkeletonCardProps,\n  SkeletonProps,\n  SkeletonTextProps,\n} from \"./types\";\nimport { skeletonTextLineVariants, skeletonVariants } from \"./variants\";\n\nconst SkeletonAnimationContext = createContext<SkeletonAnimation | undefined>(\n  undefined,\n);\n\nfunction useSkeletonAnimation(fallback: SkeletonAnimation): SkeletonAnimation {\n  return useContext(SkeletonAnimationContext) ?? fallback;\n}\n\nexport function Skeleton(props: SkeletonProps) {\n  const {\n    className,\n    appearance,\n    size,\n    rounded,\n    animation = \"shimmer\",\n    shimmerTone,\n    busy,\n    children,\n    ref,\n    ...rest\n  } = props;\n  const motionProps = skeletonAnimationPresets[animation];\n  const ctx = useMemo(() => animation, [animation]);\n\n  return (\n    <SkeletonAnimationContext.Provider value={ctx}>\n      <motion.div\n        ref={ref}\n        data-slot=\"skeleton\"\n        aria-hidden\n        aria-busy={busy ? true : undefined}\n        className={cn(\n          skeletonVariants({\n            appearance,\n            size,\n            rounded,\n            animation,\n            shimmerTone,\n          }),\n          className,\n        )}\n        initial={false}\n        {...motionProps}\n        {...rest}\n      >\n        {children}\n      </motion.div>\n    </SkeletonAnimationContext.Provider>\n  );\n}\n\nSkeleton.displayName = \"Skeleton\";\n\nexport function SkeletonText(props: SkeletonTextProps) {\n  const {\n    lines = 3,\n    className,\n    appearance,\n    size,\n    rounded,\n    animation = \"shimmer\",\n    shimmerTone,\n    busy,\n    ref,\n  } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation);\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n\n  return (\n    <div\n      data-slot=\"skeleton-text\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      aria-hidden\n      aria-busy={busy ? true : undefined}\n    >\n      {Array.from({ length: lines }).map((_, index) => (\n        <motion.div\n          key={index}\n          ref={index === 0 ? ref : undefined}\n          className={cn(\n            skeletonVariants({\n              appearance,\n              size,\n              rounded,\n              animation: effectiveAnimation,\n              shimmerTone,\n            }),\n            skeletonTextLineVariants({ size }),\n            index === lines - 1 ? \"w-3/5\" : \"w-full\",\n          )}\n          initial={false}\n          {...motionProps}\n        />\n      ))}\n    </div>\n  );\n}\n\nSkeletonText.displayName = \"SkeletonText\";\n\nconst avatarSizeClass: Record<\n  NonNullable<SkeletonAvatarProps[\"avatarSize\"]>,\n  string\n> = {\n  xs: \"size-6\",\n  sm: \"size-8\",\n  md: \"size-10\",\n  lg: \"size-12\",\n  xl: \"size-14\",\n  \"2xl\": \"size-16\",\n};\n\nexport function SkeletonAvatar(props: SkeletonAvatarProps) {\n  const {\n    avatarSize = \"md\",\n    className,\n    appearance,\n    size,\n    rounded = \"full\",\n    animation,\n    shimmerTone,\n    busy,\n    ref,\n    ...rest\n  } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation ?? \"shimmer\");\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n\n  return (\n    <motion.div\n      ref={ref}\n      data-slot=\"skeleton-avatar\"\n      aria-hidden\n      aria-busy={busy ? true : undefined}\n      className={cn(\n        skeletonVariants({\n          appearance,\n          size,\n          rounded,\n          animation: effectiveAnimation,\n          shimmerTone,\n        }),\n        avatarSizeClass[avatarSize],\n        className,\n      )}\n      initial={false}\n      {...motionProps}\n      {...rest}\n    />\n  );\n}\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\nexport function SkeletonCard(props: SkeletonCardProps) {\n  const {\n    className,\n    busy,\n    animation = \"shimmer\",\n    shimmerTone,\n    appearance,\n    size,\n    rounded,\n    ref,\n  } = props;\n\n  return (\n    <div\n      ref={ref as never}\n      data-slot=\"skeleton-card\"\n      className={cn(\"w-full max-w-sm\", className)}\n      aria-busy={busy ? true : undefined}\n    >\n      <Skeleton\n        rounded=\"lg\"\n        animation={animation}\n        shimmerTone={shimmerTone}\n        appearance={appearance}\n        size={size}\n        busy={busy}\n        className=\"flex flex-col gap-4 p-4\"\n      >\n        <div className=\"flex items-center gap-3\">\n          <SkeletonAvatar\n            appearance={appearance}\n            size={size}\n            animation={animation}\n            shimmerTone={shimmerTone}\n            rounded={rounded}\n          />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <SkeletonText\n              lines={2}\n              appearance={appearance}\n              size={size}\n              animation={animation}\n              shimmerTone={shimmerTone}\n            />\n          </div>\n        </div>\n        <SkeletonText\n          lines={4}\n          appearance={appearance}\n          size={size}\n          animation={animation}\n          shimmerTone={shimmerTone}\n        />\n      </Skeleton>\n    </div>\n  );\n}\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\nconst buttonHeight: Record<NonNullable<SkeletonButtonProps[\"buttonSize\"]>, string> = {\n  sm: \"h-8 w-24\",\n  md: \"h-10 w-32\",\n  lg: \"h-12 w-40\",\n};\n\nexport function SkeletonButton(props: SkeletonButtonProps) {\n  const {\n    buttonSize = \"md\",\n    className,\n    appearance,\n    size,\n    rounded = \"md\",\n    animation,\n    shimmerTone,\n    busy,\n    ref,\n    ...rest\n  } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation ?? \"shimmer\");\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n\n  return (\n    <motion.div\n      ref={ref}\n      data-slot=\"skeleton-button\"\n      aria-hidden\n      aria-busy={busy ? true : undefined}\n      className={cn(\n        skeletonVariants({\n          appearance,\n          size,\n          rounded,\n          animation: effectiveAnimation,\n          shimmerTone,\n        }),\n        buttonHeight[buttonSize],\n        className,\n      )}\n      initial={false}\n      {...motionProps}\n      {...rest}\n    />\n  );\n}\n\nSkeletonButton.displayName = \"SkeletonButton\";\n","import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { SkeletonAnimation } from \"./types\";\n\ntype SkeletonPresetMotionProps = Pick<\n  HTMLMotionProps<\"div\">,\n  \"initial\" | \"animate\" | \"transition\"\n>;\n\nexport type SkeletonAnimationPresets = Record<\n  SkeletonAnimation,\n  SkeletonPresetMotionProps\n>;\n\nexport const skeletonAnimationPresets: SkeletonAnimationPresets = {\n  none: {},\n  shimmer: {\n    initial: { backgroundPosition: \"100% 0%\" },\n    animate: { backgroundPosition: [\"100% 0%\", \"0% 0%\"] },\n    transition: { repeat: Infinity, duration: 1.35, ease: \"linear\" },\n  },\n  pulse: {\n    initial: { opacity: 1 },\n    animate: { opacity: [1, 0.5, 1] },\n    transition: { repeat: Infinity, duration: 1.35, ease: \"easeInOut\" },\n  },\n};\n","import { cva } from \"class-variance-authority\";\n\nconst shimmerLayer =\n  \"[background-size:220%_100%] [background-repeat:no-repeat] [background-position:100%_0%]\";\n\nexport const skeletonShimmerGradientClasses = {\n  default: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.04),rgba(255,255,255,0.22),rgba(255,255,255,0.04))]`,\n  subtle: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.14),rgba(255,255,255,0.03))]`,\n  muted: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.1),rgba(255,255,255,0.02))]`,\n  sky: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(56,189,248,0.1),rgba(56,189,248,0.42),rgba(56,189,248,0.1))]`,\n  rose: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,113,133,0.1),rgba(251,113,133,0.42),rgba(251,113,133,0.1))]`,\n  purple: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(192,132,252,0.1),rgba(192,132,252,0.42),rgba(192,132,252,0.1))]`,\n  pink: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,\n  orange: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,\n  yellow: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.4),rgba(250,204,21,0.12))]`,\n  teal: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,\n  indigo: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,\n  emerald: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,\n  gray: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(161,161,170,0.1),rgba(161,161,170,0.38),rgba(161,161,170,0.1))]`,\n  amber: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,191,36,0.12),rgba(251,191,36,0.42),rgba(251,191,36,0.12))]`,\n  violet: `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,\n  \"gradient-blue\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(100,149,237,0.1),rgba(100,149,237,0.42),rgba(100,149,237,0.1))]`,\n  \"gradient-green\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(52,211,153,0.1),rgba(52,211,153,0.42),rgba(52,211,153,0.1))]`,\n  \"gradient-red\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(239,68,68,0.1),rgba(239,68,68,0.42),rgba(239,68,68,0.1))]`,\n  \"gradient-yellow\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(250,204,21,0.12),rgba(250,204,21,0.42),rgba(250,204,21,0.12))]`,\n  \"gradient-purple\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(167,139,250,0.1),rgba(167,139,250,0.42),rgba(167,139,250,0.1))]`,\n  \"gradient-teal\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(45,212,191,0.1),rgba(45,212,191,0.42),rgba(45,212,191,0.1))]`,\n  \"gradient-indigo\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(129,140,248,0.1),rgba(129,140,248,0.42),rgba(129,140,248,0.1))]`,\n  \"gradient-pink\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(244,114,182,0.1),rgba(244,114,182,0.42),rgba(244,114,182,0.1))]`,\n  \"gradient-orange\": `${shimmerLayer} [background-image:linear-gradient(90deg,rgba(251,146,60,0.1),rgba(251,146,60,0.42),rgba(251,146,60,0.1))]`,\n} as const;\n\nexport type SkeletonShimmerTone = keyof typeof skeletonShimmerGradientClasses;\n\nexport const skeletonVariants = cva(\n  \"relative overflow-hidden bg-white/10 text-transparent\",\n  {\n    variants: {\n      appearance: {\n        default: \"bg-white/10\",\n        subtle: \"bg-white/[0.07]\",\n        muted: \"bg-slate-800/80\",\n        sky: \"bg-sky-500/10\",\n        rose: \"bg-rose-500/10\",\n        purple: \"bg-purple-500/10\",\n        pink: \"bg-pink-500/10\",\n        orange: \"bg-orange-500/10\",\n        yellow: \"bg-yellow-500/10\",\n        teal: \"bg-teal-500/10\",\n        indigo: \"bg-indigo-500/10\",\n        emerald: \"bg-emerald-500/10\",\n        gray: \"bg-gray-500/10\",\n        amber: \"bg-amber-500/10\",\n        violet: \"bg-violet-500/10\",\n        \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600\",\n        \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600\",\n        \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600\",\n        \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600\",\n        \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600\",\n        \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600\",\n        \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600\",\n        \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600\",\n        \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600\",\n      },\n      size: {\n        sm: \"min-h-3\",\n        md: \"min-h-4\",\n        lg: \"min-h-6\",\n      },\n      rounded: {\n        none: \"rounded-none\",\n        sm: \"rounded-md\",\n        md: \"rounded-lg\",\n        lg: \"rounded-xl\",\n        full: \"rounded-full\",\n      },\n      animation: {\n        none: \"\",\n        shimmer: \"\",\n        pulse: \"\",\n      },\n      shimmerTone: {\n        default: \"\",\n        subtle: \"\",\n        muted: \"\",\n        sky: \"\",\n        rose: \"\",\n        purple: \"\",\n        pink: \"\",\n        orange: \"\",\n        yellow: \"\",\n        teal: \"\",\n        indigo: \"\",\n        emerald: \"\",\n        gray: \"\",\n        amber: \"\",\n        violet: \"\",\n        \"gradient-blue\": \"\",\n        \"gradient-green\": \"\",\n        \"gradient-red\": \"\",\n        \"gradient-yellow\": \"\",\n        \"gradient-purple\": \"\",\n        \"gradient-teal\": \"\",\n        \"gradient-indigo\": \"\",\n        \"gradient-pink\": \"\",\n        \"gradient-orange\": \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"default\",\n        class: skeletonShimmerGradientClasses.default,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"muted\",\n        class: skeletonShimmerGradientClasses.subtle,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"subtle\",\n        class: skeletonShimmerGradientClasses.subtle,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"sky\",\n        class: skeletonShimmerGradientClasses.sky,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"rose\",\n        class: skeletonShimmerGradientClasses.rose,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"purple\",\n        class: skeletonShimmerGradientClasses.purple,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"pink\",\n        class: skeletonShimmerGradientClasses.pink,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"orange\",\n        class: skeletonShimmerGradientClasses.orange,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"yellow\",\n        class: skeletonShimmerGradientClasses.yellow,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"teal\",\n        class: skeletonShimmerGradientClasses.teal,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"indigo\",\n        class: skeletonShimmerGradientClasses.indigo,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"emerald\",\n        class: skeletonShimmerGradientClasses.emerald,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gray\",\n        class: skeletonShimmerGradientClasses.gray,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"amber\",\n        class: skeletonShimmerGradientClasses.amber,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"violet\",\n        class: skeletonShimmerGradientClasses.violet,\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-blue\",\n        class: skeletonShimmerGradientClasses[\"gradient-blue\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-green\",\n        class: skeletonShimmerGradientClasses[\"gradient-green\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-red\",\n        class: skeletonShimmerGradientClasses[\"gradient-red\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-yellow\",\n        class: skeletonShimmerGradientClasses[\"gradient-yellow\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-purple\",\n        class: skeletonShimmerGradientClasses[\"gradient-purple\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-teal\",\n        class: skeletonShimmerGradientClasses[\"gradient-teal\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-indigo\",\n        class: skeletonShimmerGradientClasses[\"gradient-indigo\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-pink\",\n        class: skeletonShimmerGradientClasses[\"gradient-pink\"],\n      },\n      {\n        animation: \"shimmer\",\n        shimmerTone: \"gradient-orange\",\n        class: skeletonShimmerGradientClasses[\"gradient-orange\"],\n      },\n      {\n        animation: \"pulse\",\n        class: \"\",\n      },\n    ],\n    defaultVariants: {\n      appearance: \"default\",\n      size: \"md\",\n      rounded: \"md\",\n      animation: \"shimmer\",\n      shimmerTone: \"default\",\n    },\n  },\n);\n\nexport const skeletonTextLineVariants = cva(\"block w-full\", {\n  variants: {\n    size: {\n      sm: \"h-2.5\",\n      md: \"h-3\",\n      lg: \"h-4\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n"],"mappings":";;;;;;;AAEA,SAAS,eAAe,YAAY,eAAe;AACnD,SAAS,cAAc;;;ACWhB,IAAM,2BAAqD;AAAA,EAChE,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS,EAAE,oBAAoB,UAAU;AAAA,IACzC,SAAS,EAAE,oBAAoB,CAAC,WAAW,OAAO,EAAE;AAAA,IACpD,YAAY,EAAE,QAAQ,UAAU,UAAU,MAAM,MAAM,SAAS;AAAA,EACjE;AAAA,EACA,OAAO;AAAA,IACL,SAAS,EAAE,SAAS,EAAE;AAAA,IACtB,SAAS,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE;AAAA,IAChC,YAAY,EAAE,QAAQ,UAAU,UAAU,MAAM,MAAM,YAAY;AAAA,EACpE;AACF;;;AC1BA,SAAS,WAAW;AAEpB,IAAM,eACJ;AAEK,IAAM,iCAAiC;AAAA,EAC5C,SAAS,GAAG,YAAY;AAAA,EACxB,QAAQ,GAAG,YAAY;AAAA,EACvB,OAAO,GAAG,YAAY;AAAA,EACtB,KAAK,GAAG,YAAY;AAAA,EACpB,MAAM,GAAG,YAAY;AAAA,EACrB,QAAQ,GAAG,YAAY;AAAA,EACvB,MAAM,GAAG,YAAY;AAAA,EACrB,QAAQ,GAAG,YAAY;AAAA,EACvB,QAAQ,GAAG,YAAY;AAAA,EACvB,MAAM,GAAG,YAAY;AAAA,EACrB,QAAQ,GAAG,YAAY;AAAA,EACvB,SAAS,GAAG,YAAY;AAAA,EACxB,MAAM,GAAG,YAAY;AAAA,EACrB,OAAO,GAAG,YAAY;AAAA,EACtB,QAAQ,GAAG,YAAY;AAAA,EACvB,iBAAiB,GAAG,YAAY;AAAA,EAChC,kBAAkB,GAAG,YAAY;AAAA,EACjC,gBAAgB,GAAG,YAAY;AAAA,EAC/B,mBAAmB,GAAG,YAAY;AAAA,EAClC,mBAAmB,GAAG,YAAY;AAAA,EAClC,iBAAiB,GAAG,YAAY;AAAA,EAChC,mBAAmB,GAAG,YAAY;AAAA,EAClC,iBAAiB,GAAG,YAAY;AAAA,EAChC,mBAAmB,GAAG,YAAY;AACpC;AAIO,IAAM,mBAAmB;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,YAAY;AAAA,QACV,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,MACrB;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,gBAAgB;AAAA,QAChB,mBAAmB;AAAA,QACnB,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,MACrB;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA,MAChB;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B;AAAA,MACxC;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,eAAe;AAAA,MACvD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,gBAAgB;AAAA,MACxD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,cAAc;AAAA,MACtD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,iBAAiB;AAAA,MACzD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,iBAAiB;AAAA,MACzD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,eAAe;AAAA,MACvD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,iBAAiB;AAAA,MACzD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,eAAe;AAAA,MACvD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,aAAa;AAAA,QACb,OAAO,+BAA+B,iBAAiB;AAAA,MACzD;AAAA,MACA;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEO,IAAM,2BAA2B,IAAI,gBAAgB;AAAA,EAC1D,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;AFjNK,cA4JE,YA5JF;AA1BN,IAAM,2BAA2B;AAAA,EAC/B;AACF;AAEA,SAAS,qBAAqB,UAAgD;AAC5E,SAAO,WAAW,wBAAwB,KAAK;AACjD;AAEO,SAAS,SAAS,OAAsB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,yBAAyB,SAAS;AACtD,QAAM,MAAM,QAAQ,MAAM,WAAW,CAAC,SAAS,CAAC;AAEhD,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,KACxC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,eAAW;AAAA,MACX,aAAW,OAAO,OAAO;AAAA,MACzB,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,SAAS,cAAc;AAEhB,SAAS,aAAa,OAA0B;AACrD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,qBAAqB,SAAS;AACzD,QAAM,cAAc,yBAAyB,kBAAkB;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,eAAW;AAAA,MACX,aAAW,OAAO,OAAO;AAAA,MAExB,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEC,KAAK,UAAU,IAAI,MAAM;AAAA,UACzB,WAAW;AAAA,YACT,iBAAiB;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX;AAAA,YACF,CAAC;AAAA,YACD,yBAAyB,EAAE,KAAK,CAAC;AAAA,YACjC,UAAU,QAAQ,IAAI,UAAU;AAAA,UAClC;AAAA,UACA,SAAS;AAAA,UACR,GAAG;AAAA;AAAA,QAdC;AAAA,MAeP,CACD;AAAA;AAAA,EACH;AAEJ;AAEA,aAAa,cAAc;AAE3B,IAAM,kBAGF;AAAA,EACF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAEO,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,qBAAqB,aAAa,SAAS;AACtE,QAAM,cAAc,yBAAyB,kBAAkB;AAE/D,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,eAAW;AAAA,MACX,aAAW,OAAO,OAAO;AAAA,MACzB,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF,CAAC;AAAA,QACD,gBAAgB,UAAU;AAAA,QAC1B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,eAAe,cAAc;AAEtB,SAAS,aAAa,OAA0B;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,aAAW,OAAO,OAAO;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACA,oBAAC,SAAI,WAAU,8BACb;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAE3B,IAAM,eAA+E;AAAA,EACnF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAAS,eAAe,OAA4B;AACzD,QAAM;AAAA,IACJ,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,qBAAqB,aAAa,SAAS;AACtE,QAAM,cAAc,yBAAyB,kBAAkB;AAE/D,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,eAAW;AAAA,MACX,aAAW,OAAO,OAAO;AAAA,MACzB,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF,CAAC;AAAA,QACD,aAAa,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,eAAe,cAAc;","names":[]}

package/dist/ui/spinner.d.mts

@@ -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" | "secondary" | "destructive" | "ghost" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "ring" | "dots" | "pulse" | "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" | "secondary" | "destructive" | "ghost" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "ring" | "dots" | "pulse" | "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 };