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

package/dist/chunk-QLYH3GCV.js

@@ -0,0 +1,294 @@
+import { Image } from './chunk-QO6TOE45.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { Check } from 'lucide-react';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var thumbnailVariants = cva(
+  "relative inline-block overflow-hidden bg-[color:var(--thumbnail-root-bg)]",
+  {
+    variants: {
+      size: {
+        xs: "w-[var(--thumbnail-size-xs-width)]",
+        sm: "w-[var(--thumbnail-size-sm-width)]",
+        default: "w-[var(--thumbnail-size-default-width)]",
+        lg: "w-[var(--thumbnail-size-lg-width)]",
+        xl: "w-[var(--thumbnail-size-xl-width)]"
+      },
+      aspectRatio: {
+        square: "aspect-square",
+        video: "aspect-video",
+        wide: "aspect-[4/3]"
+      },
+      rounded: {
+        none: "rounded-[var(--thumbnail-rounded-none)]",
+        sm: "rounded-[var(--thumbnail-rounded-sm)]",
+        default: "rounded-[var(--thumbnail-rounded-default)]",
+        lg: "rounded-[var(--thumbnail-rounded-lg)]",
+        full: "rounded-[var(--thumbnail-rounded-full)]"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      aspectRatio: "square",
+      rounded: "default"
+    }
+  }
+);
+function Thumbnail({
+  src,
+  alt,
+  size = "default",
+  aspectRatio = "square",
+  rounded = "default",
+  mode = "image",
+  tint,
+  fallback,
+  placeholder,
+  onClick,
+  selected = false,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) {
+  const handleClick = React.useCallback(() => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  }, [disabled, onClick]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (disabled || !onClick) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick();
+      }
+    },
+    [disabled, onClick]
+  );
+  const isInteractive = !!onClick;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        thumbnailVariants({ size, aspectRatio, rounded }),
+        "group/thumbnail",
+        // Interactive styles
+        isInteractive && !disabled && "cursor-pointer",
+        // Focus styles for interactive
+        isInteractive && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        // Selected state
+        selected && "ring-2 ring-primary ring-offset-2",
+        // Disabled state
+        disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+        className
+      ),
+      "aria-disabled": isInteractive && disabled ? true : void 0,
+      "aria-pressed": isInteractive ? selected : void 0,
+      "data-mode": mode,
+      "data-pinned": void 0,
+      "data-selected": selected || void 0,
+      "data-slot": "thumbnail",
+      role: isInteractive ? "button" : void 0,
+      tabIndex: isInteractive ? disabled ? -1 : 0 : void 0,
+      onClick: isInteractive ? handleClick : void 0,
+      onKeyDown: isInteractive ? handleKeyDown : void 0,
+      ...props,
+      children: [
+        mode === "image" ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            alt: alt ?? "",
+            className: "size-full",
+            "data-slot": "thumbnail-image",
+            fallback,
+            objectFit: "cover",
+            placeholder,
+            src: src ?? ""
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0",
+            "data-slot": "thumbnail-tint",
+            style: { backgroundColor: tint }
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function ThumbnailTag({
+  position = "bottom-right",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "absolute font-bold uppercase tracking-[0.04em] px-1.5 py-0.5 rounded text-[length:var(--thumbnail-label-font-size)] leading-tight",
+        "bg-white/[0.88] text-neutral-900 dark:bg-black/[0.65] dark:text-neutral-50",
+        position === "bottom-left" && "bottom-1.5 left-1.5",
+        position === "bottom-right" && "bottom-1.5 right-1.5",
+        className
+      ),
+      "data-position": position,
+      "data-slot": "thumbnail-tag",
+      ...props
+    }
+  );
+}
+function ThumbnailPlayOverlay({
+  duration,
+  size = "default",
+  className
+}) {
+  const iconSize = size === "sm" ? 24 : size === "lg" ? 48 : 36;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute inset-0 grid place-items-center text-white/90 pointer-events-none",
+          "[filter:drop-shadow(0_1px_2px_rgb(0_0_0/0.35))]",
+          className
+        ),
+        "aria-hidden": "true",
+        "data-slot": "thumbnail-play-overlay",
+        children: /* @__PURE__ */ jsx("svg", { fill: "currentColor", height: iconSize, viewBox: "0 0 24 24", width: iconSize, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) })
+      }
+    ),
+    duration && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "absolute bottom-1.5 left-1.5 px-1.5 py-0.5 rounded text-[10.5px] tabular-nums font-mono bg-black/55 text-white/95",
+        "data-slot": "thumbnail-duration",
+        children: duration
+      }
+    )
+  ] });
+}
+function ThumbnailBadge({
+  position = "top-left",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "absolute z-[2] text-[length:var(--thumbnail-badge-font-size)] font-extrabold uppercase tracking-[0.06em]",
+        "px-1.5 py-0.5 rounded-xs",
+        "bg-[color:var(--brand-primary-500,theme(colors.emerald.400))] text-[color:var(--brand-primary-950,theme(colors.emerald.950))]",
+        position === "top-left" && "top-2 left-8",
+        position === "top-right" && "top-2 right-2",
+        className
+      ),
+      "data-position": position,
+      "data-slot": "thumbnail-badge",
+      ...props
+    }
+  );
+}
+function ThumbnailCheckbox({
+  checked,
+  onChange,
+  position = "top-left",
+  className,
+  "aria-label": ariaLabel = "Selecionar"
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "absolute z-[2] grid place-items-center size-[var(--thumbnail-select-size)] rounded-sm cursor-pointer transition-[opacity,background-color,border-color]",
+        "border bg-white/[0.92] border-neutral-300",
+        position === "top-left" && "top-2 left-2",
+        position === "top-right" && "top-2 right-2",
+        // Hover-revealed when not checked; sticky visible when checked
+        checked ? "opacity-100 bg-[color:var(--brand-primary-500)] border-[color:var(--brand-primary-500)] text-[color:var(--brand-primary-900)]" : "opacity-0 text-transparent group-hover/thumbnail:opacity-100",
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-pressed": checked,
+      "data-checked": checked || void 0,
+      "data-slot": "thumbnail-checkbox",
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange(!checked, e);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onChange(!checked, e);
+        }
+      },
+      children: /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 })
+    }
+  );
+}
+function ThumbnailPin({
+  pinned,
+  onToggle,
+  position = "top-right",
+  className,
+  "aria-label": ariaLabel = "Fixar"
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "absolute z-[2] grid place-items-center size-[var(--thumbnail-action-size)] rounded-full cursor-pointer transition-opacity",
+        position === "top-left" && "top-1.5 left-1.5",
+        position === "top-right" && "top-1.5 right-1.5",
+        pinned ? "opacity-100 bg-white/95 text-[#eab308] dark:bg-black/55" : "opacity-0 bg-white/[0.82] text-neutral-500 dark:bg-black/45 dark:text-neutral-300 group-hover/thumbnail:opacity-100",
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-pressed": pinned,
+      "data-pinned": pinned || void 0,
+      "data-slot": "thumbnail-pin",
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggle(!pinned, e);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          onToggle(!pinned, e);
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          fill: pinned ? "currentColor" : "none",
+          height: "11",
+          stroke: "currentColor",
+          strokeLinejoin: "round",
+          strokeWidth: "1.6",
+          viewBox: "0 0 16 16",
+          width: "11",
+          children: /* @__PURE__ */ jsx("path", { d: "m8 1.5 1.95 4.18 4.55.5-3.4 3.13.94 4.5L8 11.5l-4.04 2.31.94-4.5L1.5 6.18l4.55-.5z" })
+        }
+      )
+    }
+  );
+}
+Thumbnail.Tag = ThumbnailTag;
+Thumbnail.PlayOverlay = ThumbnailPlayOverlay;
+Thumbnail.Badge = ThumbnailBadge;
+Thumbnail.Checkbox = ThumbnailCheckbox;
+Thumbnail.Pin = ThumbnailPin;
+
+export { Thumbnail, ThumbnailBadge, ThumbnailCheckbox, ThumbnailPin, ThumbnailPlayOverlay, ThumbnailTag, thumbnailVariants };
+//# sourceMappingURL=chunk-QLYH3GCV.js.map
+//# sourceMappingURL=chunk-QLYH3GCV.js.map

package/dist/chunk-QLYH3GCV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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","file":"chunk-QLYH3GCV.js","sourcesContent":["\"use client\"\n\nimport type { Badge } from \"../Badge\"\nimport type { ThumbnailProps } from \"./Thumbnail.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport { Check } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Image } from \"../Image\"\n\nconst thumbnailVariants = cva(\n  \"relative inline-block overflow-hidden bg-[color:var(--thumbnail-root-bg)]\",\n  {\n    variants: {\n      size: {\n        xs: \"w-[var(--thumbnail-size-xs-width)]\",\n        sm: \"w-[var(--thumbnail-size-sm-width)]\",\n        default: \"w-[var(--thumbnail-size-default-width)]\",\n        lg: \"w-[var(--thumbnail-size-lg-width)]\",\n        xl: \"w-[var(--thumbnail-size-xl-width)]\",\n      },\n      aspectRatio: {\n        square: \"aspect-square\",\n        video: \"aspect-video\",\n        wide: \"aspect-[4/3]\",\n      },\n      rounded: {\n        none: \"rounded-[var(--thumbnail-rounded-none)]\",\n        sm: \"rounded-[var(--thumbnail-rounded-sm)]\",\n        default: \"rounded-[var(--thumbnail-rounded-default)]\",\n        lg: \"rounded-[var(--thumbnail-rounded-lg)]\",\n        full: \"rounded-[var(--thumbnail-rounded-full)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      aspectRatio: \"square\",\n      rounded: \"default\",\n    },\n  }\n)\n\n/**\n * Thumbnail - A small preview component with `image` (loads src) or `tint` (colored tile) modes.\n *\n * Features:\n * - Two modes: `image` (legacy — loads `src`) and `tint` (renders a colored tile)\n * - Multiple size variants (xs, sm, default, lg, xl)\n * - Aspect ratio control (square, video, wide)\n * - Fallback content on error\n * - Placeholder during loading\n * - Click/select behavior for galleries\n * - Selected and disabled states\n * - Sub-components for overlays: Thumbnail.Tag, Thumbnail.PlayOverlay, Thumbnail.Badge, Thumbnail.Checkbox, Thumbnail.Pin\n *\n * @example\n * // Image mode (legacy, backward compatible)\n * <Thumbnail src=\"/photo.jpg\" alt=\"Photo preview\" />\n *\n * @example\n * // Tint mode for asset-type preview\n * <Thumbnail mode=\"tint\" tint=\"rgb(249 115 22 / 0.16)\">\n *   <Thumbnail.Tag>JPG</Thumbnail.Tag>\n *   <Thumbnail.PlayOverlay duration=\"0:15\" />\n * </Thumbnail>\n *\n * @example\n * // Selectable + pinnable card thumb\n * <Thumbnail mode=\"image\" src=\"...\" alt=\"hero\">\n *   <Thumbnail.Tag>JPG</Thumbnail.Tag>\n *   <Thumbnail.Checkbox checked={isSel} onChange={toggle} />\n *   <Thumbnail.Pin pinned={isPinned} onToggle={togglePin} />\n *   <Thumbnail.Badge color=\"success\">novo</Thumbnail.Badge>\n * </Thumbnail>\n */\nfunction Thumbnail({\n  src,\n  alt,\n  size = \"default\",\n  aspectRatio = \"square\",\n  rounded = \"default\",\n  mode = \"image\",\n  tint,\n  fallback,\n  placeholder,\n  onClick,\n  selected = false,\n  disabled = false,\n  className,\n  children,\n  ...props\n}: ThumbnailProps) {\n  const handleClick = React.useCallback(() => {\n    if (!disabled && onClick) {\n      onClick()\n    }\n  }, [disabled, onClick])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (disabled || !onClick) return\n\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault()\n        onClick()\n      }\n    },\n    [disabled, onClick]\n  )\n\n  const isInteractive = !!onClick\n\n  return (\n    <div\n      className={cn(\n        thumbnailVariants({ size, aspectRatio, rounded }),\n        \"group/thumbnail\",\n        // Interactive styles\n        isInteractive && !disabled && \"cursor-pointer\",\n        // Focus styles for interactive\n        isInteractive && \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        // Selected state\n        selected && \"ring-2 ring-primary ring-offset-2\",\n        // Disabled state\n        disabled && \"opacity-50 cursor-not-allowed pointer-events-none\",\n        className\n      )}\n      aria-disabled={isInteractive && disabled ? true : undefined}\n      aria-pressed={isInteractive ? selected : undefined}\n      data-mode={mode}\n      data-pinned={undefined}\n      data-selected={selected || undefined}\n      data-slot=\"thumbnail\"\n      role={isInteractive ? \"button\" : undefined}\n      tabIndex={isInteractive ? (disabled ? -1 : 0) : undefined}\n      onClick={isInteractive ? handleClick : undefined}\n      onKeyDown={isInteractive ? handleKeyDown : undefined}\n      {...props}\n    >\n      {mode === \"image\" ? (\n        <Image\n          alt={alt ?? \"\"}\n          className=\"size-full\"\n          data-slot=\"thumbnail-image\"\n          fallback={fallback}\n          objectFit=\"cover\"\n          placeholder={placeholder}\n          src={src ?? \"\"}\n        />\n      ) : (\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inset-0\"\n          data-slot=\"thumbnail-tint\"\n          style={{ backgroundColor: tint }}\n        />\n      )}\n      {children}\n    </div>\n  )\n}\n\n/* ─────────────────────────────────────────────────────────────\n * Sub-components — overlays.\n * Each is absolute-positioned inside the Thumbnail container.\n * Hover-revealed affordances rely on the parent's group-hover state\n * via group-hover/group-data attributes (we set data-slot=\"thumbnail\"\n * as the parent group anchor).\n * ─────────────────────────────────────────────────────────────*/\n\ninterface ThumbnailTagProps extends React.ComponentProps<\"span\"> {\n  position?: \"bottom-left\" | \"bottom-right\"\n}\n\nfunction ThumbnailTag({\n  position = \"bottom-right\",\n  className,\n  ...props\n}: ThumbnailTagProps) {\n  return (\n    <span\n      className={cn(\n        \"absolute font-bold uppercase tracking-[0.04em] px-1.5 py-0.5 rounded text-[length:var(--thumbnail-label-font-size)] leading-tight\",\n        \"bg-white/[0.88] text-neutral-900 dark:bg-black/[0.65] dark:text-neutral-50\",\n        position === \"bottom-left\" && \"bottom-1.5 left-1.5\",\n        position === \"bottom-right\" && \"bottom-1.5 right-1.5\",\n        className,\n      )}\n      data-position={position}\n      data-slot=\"thumbnail-tag\"\n      {...props}\n    />\n  )\n}\n\ninterface ThumbnailPlayOverlayProps {\n  className?: string\n  duration?: string\n  size?: \"default\" | \"lg\" | \"sm\"\n}\n\nfunction ThumbnailPlayOverlay({\n  duration,\n  size = \"default\",\n  className,\n}: ThumbnailPlayOverlayProps) {\n  const iconSize = size === \"sm\" ? 24 : size === \"lg\" ? 48 : 36\n  return (\n    <>\n      <span\n        className={cn(\n          \"absolute inset-0 grid place-items-center text-white/90 pointer-events-none\",\n          \"[filter:drop-shadow(0_1px_2px_rgb(0_0_0/0.35))]\",\n          className,\n        )}\n        aria-hidden=\"true\"\n        data-slot=\"thumbnail-play-overlay\"\n      >\n        <svg fill=\"currentColor\" height={iconSize} viewBox=\"0 0 24 24\" width={iconSize}>\n          <path d=\"M8 5v14l11-7z\" />\n        </svg>\n      </span>\n      {duration && (\n        <span\n          className=\"absolute bottom-1.5 left-1.5 px-1.5 py-0.5 rounded text-[10.5px] tabular-nums font-mono bg-black/55 text-white/95\"\n          data-slot=\"thumbnail-duration\"\n        >\n          {duration}\n        </span>\n      )}\n    </>\n  )\n}\n\ninterface ThumbnailBadgeProps extends React.ComponentProps<typeof Badge> {\n  position?: \"top-left\" | \"top-right\"\n}\n\nfunction ThumbnailBadge({\n  position = \"top-left\",\n  className,\n  ...props\n}: ThumbnailBadgeProps) {\n  // Use prototype's \"thumb-new\" exact styling when no `color` is overridden —\n  // 9px font, 800 weight, uppercase, mint-on-mint-dark. Consumers can override\n  // via `color` prop to get standard Badge variants.\n  return (\n    <span\n      className={cn(\n        \"absolute z-[2] text-[length:var(--thumbnail-badge-font-size)] font-extrabold uppercase tracking-[0.06em]\",\n        \"px-1.5 py-0.5 rounded-xs\",\n        \"bg-[color:var(--brand-primary-500,theme(colors.emerald.400))] text-[color:var(--brand-primary-950,theme(colors.emerald.950))]\",\n        position === \"top-left\" && \"top-2 left-8\",\n        position === \"top-right\" && \"top-2 right-2\",\n        className,\n      )}\n      data-position={position}\n      data-slot=\"thumbnail-badge\"\n      {...(props as React.HTMLAttributes<HTMLSpanElement>)}\n    />\n  )\n}\n\ninterface ThumbnailCheckboxProps {\n  \"aria-label\"?: string\n  checked: boolean\n  className?: string\n  onChange: (\n    checked: boolean,\n    event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,\n  ) => void\n  position?: \"top-left\" | \"top-right\"\n}\n\nfunction ThumbnailCheckbox({\n  checked,\n  onChange,\n  position = \"top-left\",\n  className,\n  \"aria-label\": ariaLabel = \"Selecionar\",\n}: ThumbnailCheckboxProps) {\n  return (\n    <button\n      className={cn(\n        \"absolute z-[2] grid place-items-center size-[var(--thumbnail-select-size)] rounded-sm cursor-pointer transition-[opacity,background-color,border-color]\",\n        \"border bg-white/[0.92] border-neutral-300\",\n        position === \"top-left\" && \"top-2 left-2\",\n        position === \"top-right\" && \"top-2 right-2\",\n        // Hover-revealed when not checked; sticky visible when checked\n        checked\n          ? \"opacity-100 bg-[color:var(--brand-primary-500)] border-[color:var(--brand-primary-500)] text-[color:var(--brand-primary-900)]\"\n          : \"opacity-0 text-transparent group-hover/thumbnail:opacity-100\",\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-pressed={checked}\n      data-checked={checked || undefined}\n      data-slot=\"thumbnail-checkbox\"\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation()\n        onChange(!checked, e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          e.stopPropagation()\n          onChange(!checked, e)\n        }\n      }}\n    >\n      <Check size={11} strokeWidth={3} />\n    </button>\n  )\n}\n\ninterface ThumbnailPinProps {\n  \"aria-label\"?: string\n  className?: string\n  onToggle: (\n    pinned: boolean,\n    event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,\n  ) => void\n  pinned: boolean\n  position?: \"top-left\" | \"top-right\"\n}\n\nfunction ThumbnailPin({\n  pinned,\n  onToggle,\n  position = \"top-right\",\n  className,\n  \"aria-label\": ariaLabel = \"Fixar\",\n}: ThumbnailPinProps) {\n  return (\n    <button\n      className={cn(\n        \"absolute z-[2] grid place-items-center size-[var(--thumbnail-action-size)] rounded-full cursor-pointer transition-opacity\",\n        position === \"top-left\" && \"top-1.5 left-1.5\",\n        position === \"top-right\" && \"top-1.5 right-1.5\",\n        pinned\n          ? \"opacity-100 bg-white/95 text-[#eab308] dark:bg-black/55\"\n          : \"opacity-0 bg-white/[0.82] text-neutral-500 dark:bg-black/45 dark:text-neutral-300 group-hover/thumbnail:opacity-100\",\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-pressed={pinned}\n      data-pinned={pinned || undefined}\n      data-slot=\"thumbnail-pin\"\n      type=\"button\"\n      onClick={(e) => {\n        e.stopPropagation()\n        onToggle(!pinned, e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          e.stopPropagation()\n          onToggle(!pinned, e)\n        }\n      }}\n    >\n      <svg\n        fill={pinned ? \"currentColor\" : \"none\"}\n        height=\"11\"\n        stroke=\"currentColor\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.6\"\n        viewBox=\"0 0 16 16\"\n        width=\"11\"\n      >\n        <path d=\"m8 1.5 1.95 4.18 4.55.5-3.4 3.13.94 4.5L8 11.5l-4.04 2.31.94-4.5L1.5 6.18l4.55-.5z\" />\n      </svg>\n    </button>\n  )\n}\n\n// Attach sub-components for compound API: Thumbnail.Tag etc.\n// We also keep them as named exports so users can import directly.\nThumbnail.Tag = ThumbnailTag\nThumbnail.PlayOverlay = ThumbnailPlayOverlay\nThumbnail.Badge = ThumbnailBadge\nThumbnail.Checkbox = ThumbnailCheckbox\nThumbnail.Pin = ThumbnailPin\n\nexport {\n  Thumbnail,\n  ThumbnailBadge,\n  ThumbnailCheckbox,\n  ThumbnailPin,\n  ThumbnailPlayOverlay,\n  ThumbnailTag,\n  thumbnailVariants,\n}\n"]}

package/dist/chunk-QO6TOE45.js

@@ -0,0 +1,215 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var imageVariants = cva(
+  "transition-opacity duration-300 motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "rounded-[var(--image-rounded-default)]",
+        rounded: "rounded-[var(--image-rounded-rounded)]",
+        circle: "rounded-[var(--image-rounded-circle)]",
+        square: "aspect-square"
+      },
+      size: {
+        xs: "size-[var(--image-size-xs)]",
+        sm: "size-[var(--image-size-sm)]",
+        md: "size-[var(--image-size-md)]",
+        lg: "size-[var(--image-size-lg)]",
+        xl: "size-[var(--image-size-xl)]",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "full"
+    }
+  }
+);
+function Image(props) {
+  const imageKey = props.src;
+  return /* @__PURE__ */ jsx(ImageInner, { ...props }, imageKey);
+}
+function ImageInner({
+  src,
+  alt,
+  variant,
+  size,
+  fallback,
+  placeholder,
+  aspectRatio = "auto",
+  objectFit = "cover",
+  objectPosition = "center",
+  loading = "lazy",
+  className,
+  onLoad,
+  onError,
+  ref,
+  style,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasError, setHasError] = React.useState(false);
+  const normalizedSrc = src.trim();
+  const isMissingSrc = normalizedSrc.length === 0;
+  const handleLoad = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(false);
+      onLoad?.(event);
+    },
+    [onLoad]
+  );
+  const handleError = React.useCallback(
+    (event) => {
+      setIsLoading(false);
+      setHasError(true);
+      onError?.(event);
+    },
+    [onError]
+  );
+  const aspectRatioStyle = React.useMemo(() => {
+    if (aspectRatio === "auto") return;
+    if (aspectRatio === "square") return;
+    if (aspectRatio === "video") return;
+    if (aspectRatio === "portrait") return { aspectRatio: "3/4" };
+    if (typeof aspectRatio === "number") {
+      return { aspectRatio: String(aspectRatio) };
+    }
+    return;
+  }, [aspectRatio]);
+  const objectFitClass = React.useMemo(() => {
+    switch (objectFit) {
+      case "cover":
+        return "object-cover";
+      case "contain":
+        return "object-contain";
+      case "fill":
+        return "object-fill";
+      case "none":
+        return "object-none";
+      default:
+        return "object-cover";
+    }
+  }, [objectFit]);
+  const objectPositionClass = React.useMemo(() => {
+    switch (objectPosition) {
+      case "center":
+        return "object-center";
+      case "top":
+        return "object-top";
+      case "bottom":
+        return "object-bottom";
+      case "left":
+        return "object-left";
+      case "right":
+        return "object-right";
+      default:
+        return;
+    }
+  }, [objectPosition]);
+  const objectPositionStyle = React.useMemo(() => {
+    if (!objectPositionClass && objectPosition !== "center") {
+      return { objectPosition };
+    }
+    return;
+  }, [objectPosition, objectPositionClass]);
+  const aspectRatioClass = React.useMemo(() => {
+    if (aspectRatio === "square") return "aspect-square";
+    if (aspectRatio === "video") return "aspect-video";
+    return;
+  }, [aspectRatio]);
+  const mergedStyle = React.useMemo(() => {
+    if (!aspectRatioStyle && !style) return;
+    return { ...aspectRatioStyle, ...style };
+  }, [aspectRatioStyle, style]);
+  if ((hasError || isMissingSrc) && fallback) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "flex items-center justify-center bg-muted",
+          className
+        ),
+        "data-slot": "image-fallback",
+        style: mergedStyle,
+        children: fallback
+      }
+    );
+  }
+  if (isMissingSrc) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative inline-block overflow-hidden",
+          imageVariants({ variant, size }),
+          aspectRatioClass,
+          "bg-muted",
+          className
+        ),
+        "data-slot": "image-empty",
+        style: mergedStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative inline-block overflow-hidden",
+        imageVariants({ variant, size }),
+        aspectRatioClass,
+        className
+      ),
+      style: mergedStyle,
+      children: [
+        isLoading && placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 flex items-center justify-center",
+            "data-slot": "image-skeleton",
+            children: placeholder
+          }
+        ),
+        isLoading && !placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none",
+            "data-slot": "image-skeleton"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            className: cn(
+              "size-full transition-opacity duration-300 motion-reduce:transition-none",
+              objectFitClass,
+              objectPositionClass,
+              isLoading ? "opacity-0" : "opacity-100"
+            ),
+            alt,
+            "data-slot": "image",
+            loading,
+            src: normalizedSrc,
+            style: objectPositionStyle,
+            onError: handleError,
+            onLoad: handleLoad,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Image, imageVariants };
+//# sourceMappingURL=chunk-QO6TOE45.js.map
+//# sourceMappingURL=chunk-QO6TOE45.js.map

package/dist/chunk-QO6TOE45.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Image/Image.tsx"],"names":[],"mappings":"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","file":"chunk-QO6TOE45.js","sourcesContent":["\"use client\"\n\nimport type { ImageProps } from \"./Image.types\"\n\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst imageVariants = cva(\n  \"transition-opacity duration-300 motion-reduce:transition-none\",\n  {\n    variants: {\n      variant: {\n        default: \"rounded-[var(--image-rounded-default)]\",\n        rounded: \"rounded-[var(--image-rounded-rounded)]\",\n        circle: \"rounded-[var(--image-rounded-circle)]\",\n        square: \"aspect-square\",\n      },\n      size: {\n        xs: \"size-[var(--image-size-xs)]\",\n        sm: \"size-[var(--image-size-sm)]\",\n        md: \"size-[var(--image-size-md)]\",\n        lg: \"size-[var(--image-size-lg)]\",\n        xl: \"size-[var(--image-size-xl)]\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"full\",\n    },\n  }\n)\n\n/**\n * Image - A component for displaying images with lazy loading, fallback, and aspect ratio support.\n *\n * Features:\n * - Lazy loading by default\n * - Fallback content on error\n * - Placeholder during loading\n * - Aspect ratio control\n * - Object-fit and position options\n *\n * @example\n * // Basic usage\n * <Image src=\"/photo.jpg\" alt=\"Description\" />\n *\n * @example\n * // With fallback and placeholder\n * <Image\n *   src=\"/photo.jpg\"\n *   alt=\"Product\"\n *   fallback={<div>Failed to load</div>}\n *   placeholder={<div className=\"animate-pulse bg-muted\" />}\n * />\n */\nfunction Image(props: ImageProps) {\n  const imageKey = props.src\n  return <ImageInner key={imageKey} {...props} />\n}\n\nfunction ImageInner({\n  src,\n  alt,\n  variant,\n  size,\n  fallback,\n  placeholder,\n  aspectRatio = \"auto\",\n  objectFit = \"cover\",\n  objectPosition = \"center\",\n  loading = \"lazy\",\n  className,\n  onLoad,\n  onError,\n  ref,\n  style,\n  ...props\n}: ImageProps) {\n  const [isLoading, setIsLoading] = React.useState(true)\n  const [hasError, setHasError] = React.useState(false)\n  const normalizedSrc = src.trim()\n  const isMissingSrc = normalizedSrc.length === 0\n\n  const handleLoad = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(false)\n      onLoad?.(event)\n    },\n    [onLoad]\n  )\n\n  const handleError = React.useCallback(\n    (event: React.SyntheticEvent<HTMLImageElement>) => {\n      setIsLoading(false)\n      setHasError(true)\n      onError?.(event)\n    },\n    [onError]\n  )\n\n  // Compute aspect ratio style\n  const aspectRatioStyle = React.useMemo(() => {\n    if (aspectRatio === \"auto\") return\n    if (aspectRatio === \"square\") return // handled by class\n    if (aspectRatio === \"video\") return // handled by class\n    if (aspectRatio === \"portrait\") return { aspectRatio: \"3/4\" }\n    if (typeof aspectRatio === \"number\") {\n      return { aspectRatio: String(aspectRatio) }\n    }\n    return\n  }, [aspectRatio])\n\n  // Compute object-fit class\n  const objectFitClass = React.useMemo(() => {\n    switch (objectFit) {\n      case \"cover\":\n        return \"object-cover\"\n      case \"contain\":\n        return \"object-contain\"\n      case \"fill\":\n        return \"object-fill\"\n      case \"none\":\n        return \"object-none\"\n      default:\n        return \"object-cover\"\n    }\n  }, [objectFit])\n\n  // Compute object-position class or style\n  const objectPositionClass = React.useMemo(() => {\n    switch (objectPosition) {\n      case \"center\":\n        return \"object-center\"\n      case \"top\":\n        return \"object-top\"\n      case \"bottom\":\n        return \"object-bottom\"\n      case \"left\":\n        return \"object-left\"\n      case \"right\":\n        return \"object-right\"\n      default:\n        return\n    }\n  }, [objectPosition])\n\n  const objectPositionStyle = React.useMemo(() => {\n    if (!objectPositionClass && objectPosition !== \"center\") {\n      return { objectPosition }\n    }\n    return\n  }, [objectPosition, objectPositionClass])\n\n  // Compute aspect ratio classes\n  const aspectRatioClass = React.useMemo(() => {\n    if (aspectRatio === \"square\") return \"aspect-square\"\n    if (aspectRatio === \"video\") return \"aspect-video\"\n    return\n  }, [aspectRatio])\n\n  // Merge styles (must be before any early return to respect hooks rules)\n  const mergedStyle = React.useMemo(() => {\n    if (!aspectRatioStyle && !style) return\n    return { ...aspectRatioStyle, ...style }\n  }, [aspectRatioStyle, style])\n\n  // Show fallback for missing/errored images when content is provided.\n  if ((hasError || isMissingSrc) && fallback) {\n    return (\n      <div\n        className={cn(\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"flex items-center justify-center bg-muted\",\n          className\n        )}\n        data-slot=\"image-fallback\"\n        style={mergedStyle}\n      >\n        {fallback}\n      </div>\n    )\n  }\n\n  if (isMissingSrc) {\n    return (\n      <div\n        className={cn(\n          \"relative inline-block overflow-hidden\",\n          imageVariants({ variant, size }),\n          aspectRatioClass,\n          \"bg-muted\",\n          className\n        )}\n        data-slot=\"image-empty\"\n        style={mergedStyle}\n      />\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative inline-block overflow-hidden\",\n        imageVariants({ variant, size }),\n        aspectRatioClass,\n        className\n      )}\n      style={mergedStyle}\n    >\n      {/* Placeholder shown while loading */}\n      {isLoading && placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 flex items-center justify-center\"\n          data-slot=\"image-skeleton\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      {/* Default skeleton if no placeholder provided */}\n      {isLoading && !placeholder && (\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute inset-0 animate-pulse bg-[color:var(--image-skeleton-bg)] motion-reduce:animate-none\"\n          data-slot=\"image-skeleton\"\n        />\n      )}\n\n      {/* The actual image */}\n      <img\n        ref={ref}\n        className={cn(\n          \"size-full transition-opacity duration-300 motion-reduce:transition-none\",\n          objectFitClass,\n          objectPositionClass,\n          isLoading ? \"opacity-0\" : \"opacity-100\"\n        )}\n        alt={alt}\n        data-slot=\"image\"\n        loading={loading}\n        src={normalizedSrc}\n        style={objectPositionStyle}\n        onError={handleError}\n        onLoad={handleLoad}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { Image, imageVariants }\n"]}