@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-QHKOBGLW.js

@@ -0,0 +1,119 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var skeletonLoaderVariants = cva(
+  "bg-[color:var(--skeleton-bg)]",
+  {
+    variants: {
+      /**
+       * Shape variant determines the skeleton's visual form
+       */
+      shape: {
+        /** Rectangular shape with rounded corners (default) */
+        rectangle: "rounded-[var(--skeleton-shape-rectangle-border-radius)]",
+        /** Circular shape for avatars */
+        circle: "rounded-[var(--skeleton-shape-circle-border-radius)] aspect-[var(--skeleton-shape-circle-aspect-ratio)]",
+        /** Single line of text */
+        text: "h-[var(--skeleton-shape-text-height)] rounded-[var(--skeleton-shape-text-border-radius)]",
+        /** Heading text */
+        heading: "h-[var(--skeleton-shape-heading-height)] rounded-[var(--skeleton-shape-heading-border-radius)]",
+        /** Square shape */
+        square: "aspect-[var(--skeleton-shape-square-aspect-ratio)] rounded-[var(--skeleton-shape-square-border-radius)]",
+        /** Pill shape for tags/badges */
+        pill: "rounded-[var(--skeleton-shape-pill-border-radius)]"
+      },
+      /**
+       * Size preset for common use cases
+       */
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        full: "w-full"
+      },
+      /**
+       * Animation variant
+       * - pulse: Subtle opacity fade (default)
+       * - shimmer: Left-to-right shine effect
+       * - wave: PrimeVue-style wave animation with gradient
+       * - none: No animation
+       */
+      animation: {
+        pulse: "animate-pulse",
+        shimmer: "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent",
+        wave: "relative overflow-hidden before:absolute before:inset-0 before:animate-[wave_1.5s_ease-in-out_infinite] before:bg-gradient-to-r before:from-transparent before:via-[color:var(--skeleton-wave-color,rgba(255,255,255,0.4))] before:to-transparent",
+        none: "animate-none"
+      }
+    },
+    compoundVariants: [
+      // Rectangle sizes (default shape) — per Bowser audit SkeletonLoader: rectangle+md rendered 0x0 (no default dims)
+      { shape: "rectangle", size: "xs", class: "h-3 w-24" },
+      { shape: "rectangle", size: "sm", class: "h-4 w-32" },
+      { shape: "rectangle", size: "md", class: "h-5 w-48" },
+      { shape: "rectangle", size: "lg", class: "h-8 w-64" },
+      { shape: "rectangle", size: "xl", class: "h-12 w-80" },
+      // Circle sizes
+      { shape: "circle", size: "xs", class: "size-[var(--skeleton-size-circle-xs)]" },
+      { shape: "circle", size: "sm", class: "size-[var(--skeleton-size-circle-sm)]" },
+      { shape: "circle", size: "md", class: "size-[var(--skeleton-size-circle-md)]" },
+      { shape: "circle", size: "lg", class: "size-[var(--skeleton-size-circle-lg)]" },
+      { shape: "circle", size: "xl", class: "size-[var(--skeleton-size-circle-xl)]" },
+      // Square sizes
+      // Reuse circle sizes for square since they are typically same dimensions
+      { shape: "square", size: "xs", class: "size-[var(--skeleton-size-circle-xs)]" },
+      { shape: "square", size: "sm", class: "size-[var(--skeleton-size-circle-sm)]" },
+      { shape: "square", size: "md", class: "size-[var(--skeleton-size-circle-md)]" },
+      { shape: "square", size: "lg", class: "size-[var(--skeleton-size-circle-lg)]" },
+      { shape: "square", size: "xl", class: "size-[var(--skeleton-size-circle-xl)]" },
+      // Text line sizes (width)
+      { shape: "text", size: "xs", class: "w-[var(--skeleton-size-text-xs)]" },
+      { shape: "text", size: "sm", class: "w-[var(--skeleton-size-text-sm)]" },
+      { shape: "text", size: "md", class: "w-[var(--skeleton-size-text-md)]" },
+      { shape: "text", size: "lg", class: "w-[var(--skeleton-size-text-lg)]" },
+      { shape: "text", size: "xl", class: "w-[var(--skeleton-size-text-xl)]" },
+      // Heading sizes (width) - reusing text widths but slightly adjusted or mapped if needed
+      // For now mapping to text sizes but could be separate tokens if design demands
+      { shape: "heading", size: "xs", class: "w-[var(--skeleton-size-text-sm)]" },
+      { shape: "heading", size: "sm", class: "w-[var(--skeleton-size-text-md)]" },
+      { shape: "heading", size: "md", class: "w-[var(--skeleton-size-text-lg)]" },
+      { shape: "heading", size: "lg", class: "w-[var(--skeleton-size-text-xl)]" },
+      { shape: "heading", size: "xl", class: "w-full" },
+      // fallback
+      // Pill sizes
+      { shape: "pill", size: "xs", class: "h-[var(--skeleton-size-pill-xs-height)] w-[var(--skeleton-size-pill-xs-width)]" },
+      { shape: "pill", size: "sm", class: "h-[var(--skeleton-size-pill-sm-height)] w-[var(--skeleton-size-pill-sm-width)]" },
+      { shape: "pill", size: "md", class: "h-[var(--skeleton-size-pill-md-height)] w-[var(--skeleton-size-pill-md-width)]" },
+      { shape: "pill", size: "lg", class: "h-[var(--skeleton-size-pill-lg-height)] w-[var(--skeleton-size-pill-lg-width)]" },
+      { shape: "pill", size: "xl", class: "h-[var(--skeleton-size-pill-xl-height)] w-[var(--skeleton-size-pill-xl-width)]" }
+    ],
+    defaultVariants: {
+      shape: "rectangle",
+      size: "md",
+      animation: "pulse"
+    }
+  }
+);
+function SkeletonLoader({
+  className,
+  shape,
+  size,
+  animation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(skeletonLoaderVariants({ shape, size, animation }), className),
+      "data-slot": "skeleton-loader",
+      ...props
+    }
+  );
+}
+
+export { SkeletonLoader, skeletonLoaderVariants };
+//# sourceMappingURL=chunk-QHKOBGLW.js.map
+//# sourceMappingURL=chunk-QHKOBGLW.js.map

package/dist/chunk-QHKOBGLW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/SkeletonLoader/SkeletonLoader.variants.ts","../src/components/primitives/SkeletonLoader/SkeletonLoader.tsx"],"names":[],"mappings":"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","file":"chunk-QHKOBGLW.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * SkeletonLoader variants using CVA\n */\nexport const skeletonLoaderVariants = cva(\"bg-[color:var(--skeleton-bg)]\", {\n  variants: {\n    /**\n     * Shape variant determines the skeleton's visual form\n     */\n    shape: {\n      /** Rectangular shape with rounded corners (default) */\n      rectangle: \"rounded-[var(--skeleton-shape-rectangle-border-radius)]\",\n      /** Circular shape for avatars */\n      circle: \"rounded-[var(--skeleton-shape-circle-border-radius)] aspect-[var(--skeleton-shape-circle-aspect-ratio)]\",\n      /** Single line of text */\n      text: \"h-[var(--skeleton-shape-text-height)] rounded-[var(--skeleton-shape-text-border-radius)]\",\n      /** Heading text */\n      heading: \"h-[var(--skeleton-shape-heading-height)] rounded-[var(--skeleton-shape-heading-border-radius)]\",\n      /** Square shape */\n      square: \"aspect-[var(--skeleton-shape-square-aspect-ratio)] rounded-[var(--skeleton-shape-square-border-radius)]\",\n      /** Pill shape for tags/badges */\n      pill: \"rounded-[var(--skeleton-shape-pill-border-radius)]\",\n    },\n    /**\n     * Size preset for common use cases\n     */\n    size: {\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      full: \"w-full\",\n    },\n    /**\n     * Animation variant\n     * - pulse: Subtle opacity fade (default)\n     * - shimmer: Left-to-right shine effect\n     * - wave: PrimeVue-style wave animation with gradient\n     * - none: No animation\n     */\n    animation: {\n      pulse: \"animate-pulse\",\n      shimmer:\n        \"relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent\",\n      wave: \"relative overflow-hidden before:absolute before:inset-0 before:animate-[wave_1.5s_ease-in-out_infinite] before:bg-gradient-to-r before:from-transparent before:via-[color:var(--skeleton-wave-color,rgba(255,255,255,0.4))] before:to-transparent\",\n      none: \"animate-none\",\n    },\n  },\n    compoundVariants: [\n      // Rectangle sizes (default shape) — per Bowser audit SkeletonLoader: rectangle+md rendered 0x0 (no default dims)\n      { shape: \"rectangle\", size: \"xs\", class: \"h-3 w-24\" },\n      { shape: \"rectangle\", size: \"sm\", class: \"h-4 w-32\" },\n      { shape: \"rectangle\", size: \"md\", class: \"h-5 w-48\" },\n      { shape: \"rectangle\", size: \"lg\", class: \"h-8 w-64\" },\n      { shape: \"rectangle\", size: \"xl\", class: \"h-12 w-80\" },\n      // Circle sizes\n      { shape: \"circle\", size: \"xs\", class: \"size-[var(--skeleton-size-circle-xs)]\" },\n      { shape: \"circle\", size: \"sm\", class: \"size-[var(--skeleton-size-circle-sm)]\" },\n      { shape: \"circle\", size: \"md\", class: \"size-[var(--skeleton-size-circle-md)]\" },\n      { shape: \"circle\", size: \"lg\", class: \"size-[var(--skeleton-size-circle-lg)]\" },\n      { shape: \"circle\", size: \"xl\", class: \"size-[var(--skeleton-size-circle-xl)]\" },\n      // Square sizes\n      // Reuse circle sizes for square since they are typically same dimensions\n      { shape: \"square\", size: \"xs\", class: \"size-[var(--skeleton-size-circle-xs)]\" },\n      { shape: \"square\", size: \"sm\", class: \"size-[var(--skeleton-size-circle-sm)]\" },\n      { shape: \"square\", size: \"md\", class: \"size-[var(--skeleton-size-circle-md)]\" },\n      { shape: \"square\", size: \"lg\", class: \"size-[var(--skeleton-size-circle-lg)]\" },\n      { shape: \"square\", size: \"xl\", class: \"size-[var(--skeleton-size-circle-xl)]\" },\n      // Text line sizes (width)\n      { shape: \"text\", size: \"xs\", class: \"w-[var(--skeleton-size-text-xs)]\" },\n      { shape: \"text\", size: \"sm\", class: \"w-[var(--skeleton-size-text-sm)]\" },\n      { shape: \"text\", size: \"md\", class: \"w-[var(--skeleton-size-text-md)]\" },\n      { shape: \"text\", size: \"lg\", class: \"w-[var(--skeleton-size-text-lg)]\" },\n      { shape: \"text\", size: \"xl\", class: \"w-[var(--skeleton-size-text-xl)]\" },\n      // Heading sizes (width) - reusing text widths but slightly adjusted or mapped if needed\n      // For now mapping to text sizes but could be separate tokens if design demands\n      { shape: \"heading\", size: \"xs\", class: \"w-[var(--skeleton-size-text-sm)]\" },\n      { shape: \"heading\", size: \"sm\", class: \"w-[var(--skeleton-size-text-md)]\" },\n      { shape: \"heading\", size: \"md\", class: \"w-[var(--skeleton-size-text-lg)]\" },\n      { shape: \"heading\", size: \"lg\", class: \"w-[var(--skeleton-size-text-xl)]\" },\n      { shape: \"heading\", size: \"xl\", class: \"w-full\" }, // fallback\n      // Pill sizes\n      { shape: \"pill\", size: \"xs\", class: \"h-[var(--skeleton-size-pill-xs-height)] w-[var(--skeleton-size-pill-xs-width)]\" },\n      { shape: \"pill\", size: \"sm\", class: \"h-[var(--skeleton-size-pill-sm-height)] w-[var(--skeleton-size-pill-sm-width)]\" },\n      { shape: \"pill\", size: \"md\", class: \"h-[var(--skeleton-size-pill-md-height)] w-[var(--skeleton-size-pill-md-width)]\" },\n      { shape: \"pill\", size: \"lg\", class: \"h-[var(--skeleton-size-pill-lg-height)] w-[var(--skeleton-size-pill-lg-width)]\" },\n      { shape: \"pill\", size: \"xl\", class: \"h-[var(--skeleton-size-pill-xl-height)] w-[var(--skeleton-size-pill-xl-width)]\" },\n    ],\n    defaultVariants: {\n      shape: \"rectangle\",\n      size: \"md\",\n      animation: \"pulse\",\n    },\n  }\n)\n\nexport type SkeletonLoaderVariants = VariantProps<typeof skeletonLoaderVariants>\n","import type { SkeletonLoaderProps } from \"./SkeletonLoader.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { skeletonLoaderVariants } from \"./SkeletonLoader.variants\"\n\n/**\n * SkeletonLoader component for displaying placeholder loading states.\n *\n * Provides visual feedback during content loading with multiple shape\n * and animation variants.\n *\n * @example\n * ```tsx\n * // Text line placeholder\n * <SkeletonLoader shape=\"text\" size=\"md\" />\n *\n * // Avatar placeholder\n * <SkeletonLoader shape=\"circle\" size=\"lg\" />\n *\n * // Card content placeholder\n * <div className=\"space-y-2\">\n *   <SkeletonLoader shape=\"heading\" size=\"lg\" />\n *   <SkeletonLoader shape=\"text\" size=\"full\" />\n *   <SkeletonLoader shape=\"text\" size=\"lg\" />\n * </div>\n * ```\n */\nfunction SkeletonLoader({\n  className,\n  shape,\n  size,\n  animation,\n  ...props\n}: SkeletonLoaderProps) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(skeletonLoaderVariants({ shape, size, animation }), className)}\n      data-slot=\"skeleton-loader\"\n      {...props}\n    />\n  )\n}\n\nexport { SkeletonLoader, skeletonLoaderVariants }\n"]}