@zentauri-ui/zentauri-components 1.2.1 → 1.3.0

package/dist/ui/progress.mjs

@@ -1,231 +1,19 @@
 "use client";
-import { clamp, cn } from '../chunk-DFEZH7TC.mjs';
-import { createContext, useMemo, useContext } from 'react';
-import { motion } from 'framer-motion';
-import { cva } from 'class-variance-authority';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { ProgressBase } from '../chunk-RDSPHBHK.mjs';
+export { ProgressBar, ProgressBase, ProgressLabel, ProgressValue, progressBarVariants, progressTrackVariants, progressVariants } from '../chunk-RDSPHBHK.mjs';
+import '../chunk-DFEZH7TC.mjs';
+import { jsx } from 'react/jsx-runtime';
 
-// src/ui/progress/animations.ts
-var progressAnimationPresets = {
-  none: {},
-  shimmer: {
-    animate: { backgroundPosition: ["0% 0%", "100% 0%"] },
-    transition: { repeat: Infinity, duration: 1.2, ease: "linear" }
-  }
-};
-var progressVariants = cva("w-full text-slate-50", {
-  variants: {
-    appearance: {
-      default: "[--progress-fill:theme(colors.slate.50)]",
-      secondary: "[--progress-fill:theme(colors.slate.300)]",
-      destructive: "[--progress-fill:theme(colors.rose.400)]",
-      emerald: "[--progress-fill:theme(colors.emerald.400)]",
-      indigo: "[--progress-fill:theme(colors.indigo.400)]",
-      purple: "[--progress-fill:theme(colors.purple.400)]",
-      pink: "[--progress-fill:theme(colors.pink.400)]",
-      rose: "[--progress-fill:theme(colors.rose.400)]",
-      sky: "[--progress-fill:theme(colors.sky.400)]",
-      teal: "[--progress-fill:theme(colors.teal.400)]",
-      yellow: "[--progress-fill:theme(colors.yellow.400)]",
-      orange: "[--progress-fill:theme(colors.orange.400)]",
-      outline: "[--progress-fill:theme(colors.cyan.300)]",
-      ghost: "[--progress-fill:theme(colors.slate.200)]",
-      glass: "[--progress-fill:theme(colors.white)]",
-      "gradient-blue": "[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]",
-      "gradient-green": "[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]",
-      "gradient-red": "[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]",
-      "gradient-yellow": "[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]",
-      "gradient-purple": "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
-      "gradient-teal": "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
-      "gradient-indigo": "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
-      "gradient-pink": "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
-      "gradient-orange": "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]"
-    },
-    size: {
-      xs: "text-[0.65rem]",
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base",
-      xl: "text-lg"
-    },
-    shape: {
-      flat: "rounded-none",
-      rounded: "rounded-md",
-      pill: "rounded-full"
-    },
-    striped: {
-      true: "",
-      false: ""
-    },
-    animated: {
-      true: "",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    appearance: "default",
-    size: "md",
-    shape: "rounded",
-    striped: false,
-    animated: false
-  }
-});
-var progressTrackVariants = cva(
-  "relative w-full overflow-hidden bg-white/10",
-  {
-    variants: {
-      size: {
-        xs: "h-1",
-        sm: "h-1.5",
-        md: "h-2",
-        lg: "h-3",
-        xl: "h-4"
-      },
-      shape: {
-        flat: "rounded-none",
-        rounded: "rounded-md",
-        pill: "rounded-full"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      shape: "rounded"
-    }
-  }
-);
-var progressBarVariants = cva(
-  "h-full w-full origin-left rounded-[inherit]",
-  {
-    variants: {
-      striped: {
-        true: "bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]",
-        false: "[background:var(--progress-fill)]"
-      }
-    },
-    defaultVariants: { striped: false }
-  }
-);
-var ProgressContext = createContext(null);
-function useProgressContext(component) {
-  const ctx = useContext(ProgressContext);
-  if (!ctx) {
-    throw new Error(`${component} must be used within <Progress>`);
-  }
-  return ctx;
-}
-function Progress(props) {
-  const {
-    className,
-    appearance = "default",
-    size = "md",
-    shape = "rounded",
-    striped = false,
-    animated = false,
-    animation = "none",
-    value = 0,
-    min = 0,
-    max = 100,
-    label,
-    children,
-    ref,
-    ...rest
-  } = props;
-  const motionProps = progressAnimationPresets[animation];
-  const clamped = clamp(value, min, max);
-  const percent = max === min ? 0 : (clamped - min) / (max - min) * 100;
-  const ctx = useMemo(
-    () => ({
-      value: clamped,
-      min,
-      max,
-      size: size ?? "md",
-      shape: shape ?? "rounded",
-      striped: Boolean(striped),
-      animated: Boolean(animated),
-      appearance: appearance ?? "default"
-    }),
-    [animated, appearance, clamped, max, min, shape, size, striped]
-  );
-  return /* @__PURE__ */ jsx(ProgressContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      ref,
-      "data-slot": "progress",
-      role: "progressbar",
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": clamped,
-      "aria-label": label,
-      className: cn(
-        progressVariants({ appearance, size, shape, striped, animated }),
-        className
-      ),
-      initial: false,
-      ...motionProps,
-      ...rest,
-      children: children ?? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ProgressBar, { style: { transform: `scaleX(${percent / 100})` } }) })
-    }
-  ) });
-}
-Progress.displayName = "Progress";
-function ProgressBar({
-  className,
-  style,
-  ref,
-  ...rest
-}) {
-  const { size, shape, striped, animated } = useProgressContext("ProgressBar");
+var Progress = (props) => {
   return /* @__PURE__ */ jsx(
-    "div",
+    ProgressBase,
     {
-      "data-slot": "progress-track",
-      className: cn(progressTrackVariants({ size, shape }), "text-current"),
-      children: /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          ref,
-          "data-slot": "progress-bar",
-          className: cn(progressBarVariants({ striped }), className),
-          style: {
-            transformOrigin: "left center",
-            ...style
-          },
-          animate: animated ? { x: ["-30%", "0%"], opacity: [0.85, 1] } : void 0,
-          transition: animated ? { repeat: Infinity, duration: 1.1, ease: "easeInOut" } : void 0,
-          ...rest
-        }
-      )
+      ...props
     }
   );
-}
-ProgressBar.displayName = "ProgressBar";
-function ProgressLabel({ className, children }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "progress-label",
-      className: cn("mb-2 font-medium text-slate-200", className),
-      children
-    }
-  );
-}
-ProgressLabel.displayName = "ProgressLabel";
-function ProgressValue({ className, children }) {
-  const { value, min, max } = useProgressContext("ProgressValue");
-  const range = max - min;
-  const pct = range === 0 ? 0 : Math.round((value - min) / range * 100);
-  const content = children ?? `${pct}%`;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "progress-value",
-      className: cn("mt-2 text-right text-slate-400", className),
-      children: content
-    }
-  );
-}
-ProgressValue.displayName = "ProgressValue";
+};
+Progress.displayName = "Progress";
 
-export { Progress, ProgressBar, ProgressLabel, ProgressValue, progressAnimationPresets, progressBarVariants, progressTrackVariants, progressVariants };
+export { Progress };
 //# sourceMappingURL=progress.mjs.map
 //# sourceMappingURL=progress.mjs.map

package/dist/ui/progress.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/progress/animations.ts","../../src/ui/progress/variants.ts","../../src/ui/progress/progress.tsx"],"names":[],"mappings":"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","file":"progress.mjs","sourcesContent":["import type { HTMLMotionProps } from \"framer-motion\";\n\nimport type { ProgressAnimation } from \"./types\";\n\ntype ProgressPresetMotionProps = Pick<\n  HTMLMotionProps<\"div\">,\n  \"transition\" | \"animate\"\n>;\n\nexport type ProgressAnimationPresets = Record<\n  ProgressAnimation,\n  ProgressPresetMotionProps\n>;\n\nexport const progressAnimationPresets: ProgressAnimationPresets = {\n  none: {},\n  shimmer: {\n    animate: { backgroundPosition: [\"0% 0%\", \"100% 0%\"] },\n    transition: { repeat: Infinity, duration: 1.2, ease: \"linear\" },\n  },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const progressVariants = cva(\"w-full text-slate-50\", {\n  variants: {\n    appearance: {\n      default: \"[--progress-fill:theme(colors.slate.50)]\",\n      secondary: \"[--progress-fill:theme(colors.slate.300)]\",\n      destructive: \"[--progress-fill:theme(colors.rose.400)]\",\n      emerald: \"[--progress-fill:theme(colors.emerald.400)]\",\n      indigo: \"[--progress-fill:theme(colors.indigo.400)]\",\n      purple: \"[--progress-fill:theme(colors.purple.400)]\",\n      pink: \"[--progress-fill:theme(colors.pink.400)]\",\n      rose: \"[--progress-fill:theme(colors.rose.400)]\",\n      sky: \"[--progress-fill:theme(colors.sky.400)]\",\n      teal: \"[--progress-fill:theme(colors.teal.400)]\",\n      yellow: \"[--progress-fill:theme(colors.yellow.400)]\",\n      orange: \"[--progress-fill:theme(colors.orange.400)]\",\n      outline: \"[--progress-fill:theme(colors.cyan.300)]\",\n      ghost: \"[--progress-fill:theme(colors.slate.200)]\",\n      glass: \"[--progress-fill:theme(colors.white)]\",\n      \"gradient-blue\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]\",\n      \"gradient-green\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]\",\n      \"gradient-red\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]\",\n      \"gradient-yellow\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]\",\n      \"gradient-purple\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]\",\n      \"gradient-teal\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]\",\n      \"gradient-indigo\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]\",\n      \"gradient-pink\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]\",\n      \"gradient-orange\":\n        \"[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]\",\n    },\n    size: {\n      xs: \"text-[0.65rem]\",\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-base\",\n      xl: \"text-lg\",\n    },\n    shape: {\n      flat: \"rounded-none\",\n      rounded: \"rounded-md\",\n      pill: \"rounded-full\",\n    },\n    striped: {\n      true: \"\",\n      false: \"\",\n    },\n    animated: {\n      true: \"\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    shape: \"rounded\",\n    striped: false,\n    animated: false,\n  },\n});\n\nexport const progressTrackVariants = cva(\n  \"relative w-full overflow-hidden bg-white/10\",\n  {\n    variants: {\n      size: {\n        xs: \"h-1\",\n        sm: \"h-1.5\",\n        md: \"h-2\",\n        lg: \"h-3\",\n        xl: \"h-4\",\n      },\n      shape: {\n        flat: \"rounded-none\",\n        rounded: \"rounded-md\",\n        pill: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      shape: \"rounded\",\n    },\n  },\n);\n\nexport const progressBarVariants = cva(\n  \"h-full w-full origin-left rounded-[inherit]\",\n  {\n    variants: {\n      striped: {\n        true: \"bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]\",\n        false: \"[background:var(--progress-fill)]\",\n      },\n    },\n    defaultVariants: { striped: false },\n  },\n);\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn, clamp } from \"../../lib/utils\";\n\nimport { progressAnimationPresets } from \"./animations\";\nimport type { ProgressProps, ProgressSectionProps, ProgressCtx } from \"./types\";\nimport {\n  progressBarVariants,\n  progressTrackVariants,\n  progressVariants,\n} from \"./variants\";\n\n\nconst ProgressContext = createContext<ProgressCtx | null>(null);\n\nfunction useProgressContext(component: string): ProgressCtx {\n  const ctx = useContext(ProgressContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Progress>`);\n  }\n  return ctx;\n}\n\n\nexport function Progress(props: ProgressProps) {\n  const {\n    className,\n    appearance = \"default\",\n    size = \"md\",\n    shape = \"rounded\",\n    striped = false,\n    animated = false,\n    animation = \"none\",\n    value = 0,\n    min = 0,\n    max = 100,\n    label,\n    children,\n    ref,\n    ...rest\n  } = props;\n  const motionProps = progressAnimationPresets[animation];\n  const clamped = clamp(value, min, max);\n  const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;\n\n  const ctx = useMemo(\n    () => ({\n      value: clamped,\n      min,\n      max,\n      size: size ?? \"md\",\n      shape: shape ?? \"rounded\",\n      striped: Boolean(striped),\n      animated: Boolean(animated),\n      appearance: appearance ?? \"default\",\n    }),\n    [animated, appearance, clamped, max, min, shape, size, striped],\n  );\n\n  return (\n    <ProgressContext.Provider value={ctx}>\n      <motion.div\n        ref={ref}\n        data-slot=\"progress\"\n        role=\"progressbar\"\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={clamped}\n        aria-label={label}\n        className={cn(\n          progressVariants({ appearance, size, shape, striped, animated }),\n          className,\n        )}\n        initial={false}\n        {...motionProps}\n        {...rest}\n      >\n        {children ?? (\n          <>\n            <ProgressBar style={{ transform: `scaleX(${percent / 100})` }} />\n          </>\n        )}\n      </motion.div>\n    </ProgressContext.Provider>\n  );\n}\n\nProgress.displayName = \"Progress\";\n\nexport function ProgressBar({\n  className,\n  style,\n  ref,\n  ...rest\n}: ProgressSectionProps & {\n  style?: React.CSSProperties;\n  ref?: React.Ref<HTMLDivElement>;\n}) {\n  const { size, shape, striped, animated } = useProgressContext(\"ProgressBar\");\n\n  return (\n    <div\n      data-slot=\"progress-track\"\n      className={cn(progressTrackVariants({ size, shape }), \"text-current\")}\n    >\n      <motion.div\n        ref={ref}\n        data-slot=\"progress-bar\"\n        className={cn(progressBarVariants({ striped }), className)}\n        style={{\n          transformOrigin: \"left center\",\n          ...style,\n        }}\n        animate={\n          animated ? { x: [\"-30%\", \"0%\"], opacity: [0.85, 1] } : undefined\n        }\n        transition={\n          animated\n            ? { repeat: Infinity, duration: 1.1, ease: \"easeInOut\" }\n            : undefined\n        }\n        {...rest}\n      />\n    </div>\n  );\n}\n\nProgressBar.displayName = \"ProgressBar\";\n\nexport function ProgressLabel({ className, children }: ProgressSectionProps) {\n  return (\n    <div\n      data-slot=\"progress-label\"\n      className={cn(\"mb-2 font-medium text-slate-200\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nProgressLabel.displayName = \"ProgressLabel\";\n\nexport function ProgressValue({ className, children }: ProgressSectionProps) {\n  const { value, min, max } = useProgressContext(\"ProgressValue\");\n  const range = max - min;\n  const pct = range === 0 ? 0 : Math.round(((value - min) / range) * 100);\n  const content = children ?? `${pct}%`;\n  return (\n    <div\n      data-slot=\"progress-value\"\n      className={cn(\"mt-2 text-right text-slate-400\", className)}\n    >\n      {content}\n    </div>\n  );\n}\n\nProgressValue.displayName = \"ProgressValue\";\n"]}
+{"version":3,"sources":["../../src/ui/progress/progress.tsx"],"names":[],"mappings":";;;;;AAGO,IAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"progress.mjs","sourcesContent":["import { ProgressBase } from \"./progress-base\";\nimport type { ProgressProps } from \"./types\";\n\nexport const Progress = (props: ProgressProps) => {\n  return (\n    <ProgressBase\n      {...props}\n    />\n  );\n};\n\nProgress.displayName = \"Progress\";"]}

package/dist/ui/skeleton/animated.d.mts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLMotionProps } from 'framer-motion';
+import { ReactNode } from 'react';
+import { i as skeletonVariants, e as SkeletonAnimation } from '../../types-CK_vNRIb.mjs';
+import 'class-variance-authority/types';
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+type SkeletonPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "transition">;
+type SkeletonAnimationPresets = Record<SkeletonAnimation, SkeletonPresetMotionProps>;
+type SkeletonAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    children?: ReactNode;
+    busy?: boolean;
+};
+type SkeletonCardAnimatedProps = SkeletonAnimatedProps;
+type SkeletonTextAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    lines?: number;
+    busy?: boolean;
+};
+type SkeletonAvatarAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    busy?: boolean;
+};
+type SkeletonButtonAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    buttonSize?: "sm" | "md" | "lg";
+    busy?: boolean;
+};
+
+declare function SkeletonAnimated(props: SkeletonAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonAnimated {
+    var displayName: string;
+}
+declare function SkeletonTextAnimated(props: SkeletonTextAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonTextAnimated {
+    var displayName: string;
+}
+declare function SkeletonAvatarAnimated(props: SkeletonAvatarAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonAvatarAnimated {
+    var displayName: string;
+}
+declare function SkeletonCardAnimated(props: SkeletonCardAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonCardAnimated {
+    var displayName: string;
+}
+declare function SkeletonButtonAnimated(props: SkeletonButtonAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonButtonAnimated {
+    var displayName: string;
+}
+
+declare const skeletonAnimationPresets: SkeletonAnimationPresets;
+
+export { SkeletonAnimated, type SkeletonAnimatedProps, type SkeletonAnimationPresets, SkeletonAvatarAnimated, type SkeletonAvatarAnimatedProps, SkeletonButtonAnimated, type SkeletonButtonAnimatedProps, SkeletonCardAnimated, type SkeletonCardAnimatedProps, type SkeletonPresetMotionProps, SkeletonTextAnimated, type SkeletonTextAnimatedProps, type SkeletonVariantProps, skeletonAnimationPresets };

package/dist/ui/skeleton/animated.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLMotionProps } from 'framer-motion';
+import { ReactNode } from 'react';
+import { i as skeletonVariants, e as SkeletonAnimation } from '../../types-CK_vNRIb.js';
+import 'class-variance-authority/types';
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+type SkeletonPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "transition">;
+type SkeletonAnimationPresets = Record<SkeletonAnimation, SkeletonPresetMotionProps>;
+type SkeletonAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    children?: ReactNode;
+    busy?: boolean;
+};
+type SkeletonCardAnimatedProps = SkeletonAnimatedProps;
+type SkeletonTextAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    lines?: number;
+    busy?: boolean;
+};
+type SkeletonAvatarAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    avatarSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    busy?: boolean;
+};
+type SkeletonButtonAnimatedProps = SkeletonVariantProps & Omit<HTMLMotionProps<"div">, "children"> & {
+    animation?: SkeletonAnimation;
+    buttonSize?: "sm" | "md" | "lg";
+    busy?: boolean;
+};
+
+declare function SkeletonAnimated(props: SkeletonAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonAnimated {
+    var displayName: string;
+}
+declare function SkeletonTextAnimated(props: SkeletonTextAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonTextAnimated {
+    var displayName: string;
+}
+declare function SkeletonAvatarAnimated(props: SkeletonAvatarAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonAvatarAnimated {
+    var displayName: string;
+}
+declare function SkeletonCardAnimated(props: SkeletonCardAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonCardAnimated {
+    var displayName: string;
+}
+declare function SkeletonButtonAnimated(props: SkeletonButtonAnimatedProps): react_jsx_runtime.JSX.Element;
+declare namespace SkeletonButtonAnimated {
+    var displayName: string;
+}
+
+declare const skeletonAnimationPresets: SkeletonAnimationPresets;
+
+export { SkeletonAnimated, type SkeletonAnimatedProps, type SkeletonAnimationPresets, SkeletonAvatarAnimated, type SkeletonAvatarAnimatedProps, SkeletonButtonAnimated, type SkeletonButtonAnimatedProps, SkeletonCardAnimated, type SkeletonCardAnimatedProps, type SkeletonPresetMotionProps, SkeletonTextAnimated, type SkeletonTextAnimatedProps, type SkeletonVariantProps, skeletonAnimationPresets };

package/dist/ui/skeleton/animated.js

@@ -0,0 +1,126 @@
+"use client";
+'use strict';
+
+var chunk6I7X5BF2_js = require('../../chunk-6I7X5BF2.js');
+var chunkUOZYPWDZ_js = require('../../chunk-UOZYPWDZ.js');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/skeleton/animated/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" }
+  }
+};
+function SkeletonAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const motionProps = skeletonAnimationPresets[animation];
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6I7X5BF2_js.SkeletonBase, { ...props, as: framerMotion.motion.div, initial: false, ...motionProps });
+}
+SkeletonAnimated.displayName = "Skeleton";
+function SkeletonTextAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = chunk6I7X5BF2_js.useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6I7X5BF2_js.SkeletonTextBase, { ...props, as: framerMotion.motion.div, initial: false, ...motionProps });
+}
+SkeletonTextAnimated.displayName = "SkeletonText";
+function SkeletonAvatarAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = chunk6I7X5BF2_js.useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6I7X5BF2_js.SkeletonAvatarBase, { ...props, as: framerMotion.motion.div, initial: false, ...motionProps });
+}
+SkeletonAvatarAnimated.displayName = "SkeletonAvatar";
+function SkeletonCardAnimated(props) {
+  const {
+    className,
+    busy,
+    animation = "shimmer",
+    shimmerTone,
+    appearance,
+    size,
+    rounded,
+    ref
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "skeleton-card",
+      className: chunkUOZYPWDZ_js.cn("w-full max-w-sm", className),
+      "aria-busy": busy ? true : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        SkeletonAnimated,
+        {
+          rounded: "lg",
+          animation,
+          shimmerTone,
+          appearance,
+          size,
+          busy,
+          className: "flex flex-col gap-4 p-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonAvatarAnimated,
+                {
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone,
+                  rounded
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonTextAnimated,
+                {
+                  lines: 2,
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonTextAnimated,
+              {
+                lines: 4,
+                appearance,
+                size,
+                animation,
+                shimmerTone
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+SkeletonCardAnimated.displayName = "SkeletonCard";
+function SkeletonButtonAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = chunk6I7X5BF2_js.useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6I7X5BF2_js.SkeletonButtonBase, { ...props, as: framerMotion.motion.div, initial: false, ...motionProps });
+}
+SkeletonButtonAnimated.displayName = "SkeletonButton";
+
+exports.SkeletonAnimated = SkeletonAnimated;
+exports.SkeletonAvatarAnimated = SkeletonAvatarAnimated;
+exports.SkeletonButtonAnimated = SkeletonButtonAnimated;
+exports.SkeletonCardAnimated = SkeletonCardAnimated;
+exports.SkeletonTextAnimated = SkeletonTextAnimated;
+exports.skeletonAnimationPresets = skeletonAnimationPresets;
+//# sourceMappingURL=animated.js.map
+//# sourceMappingURL=animated.js.map

package/dist/ui/skeleton/animated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/skeleton/animated/animations.ts","../../../src/ui/skeleton/animated/skeleton-animated.tsx"],"names":["jsx","SkeletonBase","motion","useSkeletonAnimation","SkeletonTextBase","SkeletonAvatarBase","cn","jsxs","SkeletonButtonBase"],"mappings":"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","file":"animated.js","sourcesContent":["import type { SkeletonAnimationPresets } from \"./types\";\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","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport { skeletonAnimationPresets } from \"./animations\";\nimport type {\n  SkeletonAnimatedProps,\n  SkeletonAvatarAnimatedProps,\n  SkeletonButtonAnimatedProps,\n  SkeletonCardAnimatedProps,\n  SkeletonTextAnimatedProps,\n} from \"./types\";\nimport {\n  SkeletonAvatarBase,\n  SkeletonBase,\n  SkeletonButtonBase,\n  SkeletonTextBase,\n  useSkeletonAnimation,\n} from \"../skeleton-base\";\n\nexport function SkeletonAnimated(props: SkeletonAnimatedProps) {\n  const { animation = \"shimmer\" } = props;\n  const motionProps = skeletonAnimationPresets[animation];\n  return (\n    <SkeletonBase {...props} as={motion.div} initial={false} {...motionProps} />\n  );\n}\n\nSkeletonAnimated.displayName = \"Skeleton\";\n\nexport function SkeletonTextAnimated(props: SkeletonTextAnimatedProps) {\n  const { animation = \"shimmer\" } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation);\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n\n  return <SkeletonTextBase {...props} as={motion.div} initial={false} {...motionProps} />;\n}\n\nSkeletonTextAnimated.displayName = \"SkeletonText\";\n\nexport function SkeletonAvatarAnimated(props: SkeletonAvatarAnimatedProps) {\n  const { animation = \"shimmer\" } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation);\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n  return <SkeletonAvatarBase {...props} as={motion.div} initial={false} {...motionProps} />;\n}\n\nSkeletonAvatarAnimated.displayName = \"SkeletonAvatar\";\n\nexport function SkeletonCardAnimated(props: SkeletonCardAnimatedProps) {\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      <SkeletonAnimated\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          <SkeletonAvatarAnimated\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            <SkeletonTextAnimated\n              lines={2}\n              appearance={appearance}\n              size={size}\n              animation={animation}\n              shimmerTone={shimmerTone}\n            />\n          </div>\n        </div>\n        <SkeletonTextAnimated\n          lines={4}\n          appearance={appearance}\n          size={size}\n          animation={animation}\n          shimmerTone={shimmerTone}\n        />\n      </SkeletonAnimated>\n    </div>\n  );\n}\n\nSkeletonCardAnimated.displayName = \"SkeletonCard\";\n\nexport function SkeletonButtonAnimated(props: SkeletonButtonAnimatedProps) {\n  const { animation = \"shimmer\" } = props;\n  const effectiveAnimation = useSkeletonAnimation(animation);\n  const motionProps = skeletonAnimationPresets[effectiveAnimation];\n  return <SkeletonButtonBase {...props} as={motion.div} initial={false} {...motionProps} />;\n}\n\nSkeletonButtonAnimated.displayName = \"SkeletonButton\";"]}

package/dist/ui/skeleton/animated.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { SkeletonBase, useSkeletonAnimation, SkeletonTextBase, SkeletonAvatarBase, SkeletonButtonBase } from '../../chunk-2P3UU2J3.mjs';
+import { cn } from '../../chunk-DFEZH7TC.mjs';
+import { motion } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/ui/skeleton/animated/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" }
+  }
+};
+function SkeletonAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const motionProps = skeletonAnimationPresets[animation];
+  return /* @__PURE__ */ jsx(SkeletonBase, { ...props, as: motion.div, initial: false, ...motionProps });
+}
+SkeletonAnimated.displayName = "Skeleton";
+function SkeletonTextAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(SkeletonTextBase, { ...props, as: motion.div, initial: false, ...motionProps });
+}
+SkeletonTextAnimated.displayName = "SkeletonText";
+function SkeletonAvatarAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(SkeletonAvatarBase, { ...props, as: motion.div, initial: false, ...motionProps });
+}
+SkeletonAvatarAnimated.displayName = "SkeletonAvatar";
+function SkeletonCardAnimated(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(
+        SkeletonAnimated,
+        {
+          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(
+                SkeletonAvatarAnimated,
+                {
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone,
+                  rounded
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsx(
+                SkeletonTextAnimated,
+                {
+                  lines: 2,
+                  appearance,
+                  size,
+                  animation,
+                  shimmerTone
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              SkeletonTextAnimated,
+              {
+                lines: 4,
+                appearance,
+                size,
+                animation,
+                shimmerTone
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+SkeletonCardAnimated.displayName = "SkeletonCard";
+function SkeletonButtonAnimated(props) {
+  const { animation = "shimmer" } = props;
+  const effectiveAnimation = useSkeletonAnimation(animation);
+  const motionProps = skeletonAnimationPresets[effectiveAnimation];
+  return /* @__PURE__ */ jsx(SkeletonButtonBase, { ...props, as: motion.div, initial: false, ...motionProps });
+}
+SkeletonButtonAnimated.displayName = "SkeletonButton";
+
+export { SkeletonAnimated, SkeletonAvatarAnimated, SkeletonButtonAnimated, SkeletonCardAnimated, SkeletonTextAnimated, skeletonAnimationPresets };
+//# sourceMappingURL=animated.mjs.map
+//# sourceMappingURL=animated.mjs.map