@zendir/ui 0.1.0

package/dist/react/core/ImageGallery.js

@@ -0,0 +1,320 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useEffect, useCallback } from "react";
+import { useBreakpoint, resolveResponsiveValue } from "./layout/useBreakpoint.js";
+import { Pagination } from "./Pagination.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const ImageGallery = memo(function ImageGallery2({
+  images,
+  columns = [2, 3, 4],
+  pageSize = 12,
+  onDownload,
+  onDelete,
+  onClick,
+  lightbox = true,
+  thumbnailHeight = 140,
+  emptyMessage = "No images captured",
+  newCount: _newCount,
+  style
+}) {
+  const { tokens } = useTheme();
+  const { breakpoint } = useBreakpoint();
+  const [currentPage, setCurrentPage] = useState(0);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const cols = Array.isArray(columns) ? resolveResponsiveValue(columns, breakpoint) : columns;
+  const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;
+  const pageImages = pageSize > 0 ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize) : images;
+  useEffect(() => {
+    if (currentPage >= totalPages && totalPages > 0) {
+      setCurrentPage(totalPages - 1);
+    }
+  }, [images.length, totalPages, currentPage]);
+  useEffect(() => {
+    if (!selectedImage) return;
+    const handler = (e) => {
+      if (e.key === "Escape") setSelectedImage(null);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [selectedImage]);
+  const handleImageClick = useCallback((img) => {
+    onClick == null ? void 0 : onClick(img);
+    if (lightbox) setSelectedImage(img);
+  }, [onClick, lightbox]);
+  const formatTime = (ts) => {
+    if (!ts) return "";
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  };
+  const ActionBtn = ({ icon, label, onClick: handler, color }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": label,
+      onClick: (e) => {
+        e.stopPropagation();
+        handler();
+      },
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 28,
+        height: 28,
+        border: `1px solid ${tokens.colors.border.muted}`,
+        borderRadius: tokens.borderRadius.sm,
+        backgroundColor: `${tokens.colors.background.elevated}e0`,
+        color: color || tokens.colors.text.secondary,
+        cursor: "pointer",
+        transition: tokens.animation.fast,
+        backdropFilter: "blur(4px)"
+      },
+      children: icon
+    }
+  );
+  const downloadIcon = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+  ] });
+  const deleteIcon = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { style: { fontFamily: tokens.typography.fontFamily.primary, ...style }, children: [
+    images.length === 0 && /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: 200,
+      color: tokens.colors.text.tertiary,
+      fontSize: tokens.typography.fontSize.sm,
+      border: `1px dashed ${tokens.colors.border.muted}`,
+      borderRadius: tokens.borderRadius.md
+    }, children: emptyMessage }),
+    pageImages.length > 0 && /* @__PURE__ */ jsx("div", { style: {
+      display: "grid",
+      gridTemplateColumns: `repeat(${cols}, 1fr)`,
+      gap: tokens.spacing.sm
+    }, children: pageImages.map((img) => {
+      const isHovered = hoveredId === img.id;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          "aria-label": `View image ${img.name || img.id}`,
+          onClick: () => handleImageClick(img),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleImageClick(img);
+            }
+          },
+          onMouseEnter: () => setHoveredId(img.id),
+          onMouseLeave: () => setHoveredId(null),
+          style: {
+            position: "relative",
+            borderRadius: tokens.borderRadius.md,
+            border: `1px solid ${tokens.colors.border.muted}`,
+            overflow: "hidden",
+            cursor: "pointer",
+            transition: tokens.animation.fast,
+            transform: isHovered ? "translateY(-2px)" : "none",
+            boxShadow: isHovered ? tokens.shadows.md : "none",
+            backgroundColor: tokens.colors.background.surface
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: {
+              height: thumbnailHeight,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              backgroundColor: tokens.colors.background.base
+            }, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: img.src,
+                alt: img.name,
+                loading: "lazy",
+                onError: (e) => {
+                  const target = e.target;
+                  target.style.display = "none";
+                  target.parentElement.innerHTML = `<span style="color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}">Image unavailable</span>`;
+                },
+                style: {
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                  objectFit: "contain"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { style: {
+              padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+              borderTop: `1px solid ${tokens.colors.border.muted}`
+            }, children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: tokens.typography.fontSize.xxs,
+                fontWeight: tokens.typography.fontWeight.medium,
+                color: tokens.colors.text.primary,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis"
+              }, children: img.name }),
+              img.timestamp && /* @__PURE__ */ jsx("div", { style: {
+                fontSize: tokens.typography.fontSize.micro,
+                color: tokens.colors.text.tertiary,
+                fontFamily: tokens.typography.fontFamily.mono
+              }, children: formatTime(img.timestamp) })
+            ] }),
+            isHovered && /* @__PURE__ */ jsxs("div", { style: {
+              position: "absolute",
+              top: tokens.spacing.xs,
+              right: tokens.spacing.xs,
+              display: "flex",
+              gap: "4px"
+            }, children: [
+              onDownload && /* @__PURE__ */ jsx(ActionBtn, { icon: downloadIcon, label: "Download", onClick: () => onDownload(img) }),
+              onDelete && /* @__PURE__ */ jsx(ActionBtn, { icon: deleteIcon, label: "Delete", onClick: () => onDelete(img), color: tokens.colors.status.critical })
+            ] })
+          ]
+        },
+        img.id
+      );
+    }) }),
+    totalPages > 1 && /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      marginTop: tokens.spacing.md
+    }, children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        currentPage: currentPage + 1,
+        totalPages,
+        onChange: (page) => setCurrentPage(Math.max(0, page - 1)),
+        showFirstLast: false,
+        displayMode: "text",
+        size: "small"
+      }
+    ) }),
+    selectedImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          onClick: () => setSelectedImage(null),
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9998,
+            backgroundColor: `${tokens.colors.background.base}e0`,
+            backdropFilter: "blur(8px)",
+            animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": `Image: ${selectedImage.name}`,
+          onClick: () => setSelectedImage(null),
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: tokens.spacing.xl
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: selectedImage.src,
+                alt: selectedImage.name,
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  maxWidth: "90vw",
+                  maxHeight: "80vh",
+                  objectFit: "contain",
+                  borderRadius: tokens.borderRadius.md,
+                  boxShadow: tokens.shadows.xl,
+                  animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: tokens.spacing.md,
+                  marginTop: tokens.spacing.md
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: {
+                    color: tokens.colors.text.primary,
+                    fontSize: tokens.typography.fontSize.sm,
+                    fontWeight: tokens.typography.fontWeight.medium
+                  }, children: selectedImage.name }),
+                  onDownload && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => onDownload(selectedImage),
+                      style: {
+                        padding: "6px 16px",
+                        fontSize: tokens.typography.fontSize.xs,
+                        color: tokens.colors.text.primary,
+                        backgroundColor: `${tokens.colors.accent.primary}20`,
+                        border: `1px solid ${tokens.colors.accent.primary}40`,
+                        borderRadius: tokens.borderRadius.md,
+                        cursor: "pointer",
+                        fontFamily: tokens.typography.fontFamily.primary
+                      },
+                      children: "Download"
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        onDelete(selectedImage);
+                        setSelectedImage(null);
+                      },
+                      style: {
+                        padding: "6px 16px",
+                        fontSize: tokens.typography.fontSize.xs,
+                        color: tokens.colors.status.critical,
+                        backgroundColor: `${tokens.colors.status.critical}15`,
+                        border: `1px solid ${tokens.colors.status.critical}30`,
+                        borderRadius: tokens.borderRadius.md,
+                        cursor: "pointer",
+                        fontFamily: tokens.typography.fontFamily.primary
+                      },
+                      children: "Delete"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `
+            @keyframes zendir-lb-fade { from { opacity: 0; } to { opacity: 1; } }
+            @keyframes zendir-lb-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+          ` })
+    ] })
+  ] });
+});
+export {
+  ImageGallery
+};
+//# sourceMappingURL=ImageGallery.js.map

package/dist/react/core/ImageGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGallery.js","sources":["../../../src/react/core/ImageGallery.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ImageGallery Component\r\n * \r\n * Grid of image thumbnails with lightbox, download, delete, and pagination.\r\n * Designed for spacecraft image capture galleries in operator dashboards.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent card styling with GlassCard\r\n * - Status-based border colors\r\n * - Keyboard navigation (Escape to close lightbox)\r\n * - Focus management\r\n * \r\n * @example\r\n * ```tsx\r\n * <ImageGallery\r\n *   images={[\r\n *     { id: '1', name: 'capture_001.png', src: dataUrl, timestamp: Date.now() },\r\n *     { id: '2', name: 'capture_002.png', src: dataUrl, timestamp: Date.now() },\r\n *   ]}\r\n *   columns={[2, 3, 4]}\r\n *   onDownload={(img) => saveAs(img.src, img.name)}\r\n *   onDelete={(img) => removeImage(img.id)}\r\n *   pageSize={12}\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useCallback, useEffect } from 'react';\r\nimport { useTheme } from '../theme';\r\nimport { useBreakpoint } from './layout/useBreakpoint';\r\nimport { resolveResponsiveValue } from './layout/useBreakpoint';\r\nimport type { ResponsiveValue } from './layout/useBreakpoint';\r\nimport { Pagination } from './Pagination';\r\n\r\n// ─── Types ───────────────────────────────────────────────────────────────────\r\n\r\nexport interface GalleryImage {\r\n  /** Unique identifier */\r\n  id: string;\r\n  /** Display name */\r\n  name: string;\r\n  /** Image source URL or data URL */\r\n  src: string;\r\n  /** Timestamp (ms since epoch) */\r\n  timestamp?: number;\r\n  /** Optional metadata */\r\n  metadata?: Record<string, unknown>;\r\n}\r\n\r\nexport interface ImageGalleryProps {\r\n  /** Array of images */\r\n  images: GalleryImage[];\r\n  /** Number of columns (responsive) */\r\n  columns?: ResponsiveValue<number>;\r\n  /** Images per page (0 = no pagination) */\r\n  pageSize?: number;\r\n  /** Download handler */\r\n  onDownload?: (image: GalleryImage) => void;\r\n  /** Delete handler (shows delete button when provided) */\r\n  onDelete?: (image: GalleryImage) => void;\r\n  /** Click handler */\r\n  onClick?: (image: GalleryImage) => void;\r\n  /** Show lightbox on click (default true) */\r\n  lightbox?: boolean;\r\n  /** Thumbnail height */\r\n  thumbnailHeight?: number;\r\n  /** Empty state message */\r\n  emptyMessage?: string;\r\n  /** New image badge count (shows badge on component) */\r\n  newCount?: number;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const ImageGallery = memo(function ImageGallery({\r\n  images,\r\n  columns = [2, 3, 4],\r\n  pageSize = 12,\r\n  onDownload,\r\n  onDelete,\r\n  onClick,\r\n  lightbox = true,\r\n  thumbnailHeight = 140,\r\n  emptyMessage = 'No images captured',\r\n  newCount: _newCount,\r\n  style,\r\n}: ImageGalleryProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { breakpoint } = useBreakpoint();\r\n  const [currentPage, setCurrentPage] = useState(0);\r\n  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);\r\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\r\n  \r\n  const cols = Array.isArray(columns) ? resolveResponsiveValue(columns, breakpoint) : columns;\r\n  const totalPages = pageSize > 0 ? Math.ceil(images.length / pageSize) : 1;\r\n  const pageImages = pageSize > 0\r\n    ? images.slice(currentPage * pageSize, (currentPage + 1) * pageSize)\r\n    : images;\r\n  \r\n  // Reset page if images change\r\n  useEffect(() => {\r\n    if (currentPage >= totalPages && totalPages > 0) {\r\n      setCurrentPage(totalPages - 1);\r\n    }\r\n  }, [images.length, totalPages, currentPage]);\r\n  \r\n  // Lightbox keyboard\r\n  useEffect(() => {\r\n    if (!selectedImage) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setSelectedImage(null);\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [selectedImage]);\r\n  \r\n  const handleImageClick = useCallback((img: GalleryImage) => {\r\n    onClick?.(img);\r\n    if (lightbox) setSelectedImage(img);\r\n  }, [onClick, lightbox]);\r\n  \r\n  const formatTime = (ts?: number) => {\r\n    if (!ts) return '';\r\n    const d = new Date(ts);\r\n    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });\r\n  };\r\n  \r\n  // Action button helper\r\n  const ActionBtn = ({ icon, label, onClick: handler, color }: { icon: React.ReactNode; label: string; onClick: () => void; color?: string }) => (\r\n    <button\r\n      aria-label={label}\r\n      onClick={(e) => { e.stopPropagation(); handler(); }}\r\n      style={{\r\n        display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n        width: 28, height: 28,\r\n        border: `1px solid ${tokens.colors.border.muted}`,\r\n        borderRadius: tokens.borderRadius.sm,\r\n        backgroundColor: `${tokens.colors.background.elevated}e0`,\r\n        color: color || tokens.colors.text.secondary,\r\n        cursor: 'pointer', transition: tokens.animation.fast,\r\n        backdropFilter: 'blur(4px)',\r\n      }}\r\n    >\r\n      {icon}\r\n    </button>\r\n  );\r\n  \r\n  // Download icon\r\n  const downloadIcon = <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><polyline points=\"7 10 12 15 17 10\"/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"/></svg>;\r\n  // Delete icon\r\n  const deleteIcon = <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>;\r\n  \r\n  return (\r\n    <div style={{ fontFamily: tokens.typography.fontFamily.primary, ...style }}>\r\n      {/* Empty state */}\r\n      {images.length === 0 && (\r\n        <div style={{\r\n          display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n          height: 200, color: tokens.colors.text.tertiary,\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          border: `1px dashed ${tokens.colors.border.muted}`,\r\n          borderRadius: tokens.borderRadius.md,\r\n        }}>\r\n          {emptyMessage}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Grid */}\r\n      {pageImages.length > 0 && (\r\n        <div style={{\r\n          display: 'grid',\r\n          gridTemplateColumns: `repeat(${cols}, 1fr)`,\r\n          gap: tokens.spacing.sm,\r\n        }}>\r\n          {pageImages.map(img => {\r\n            const isHovered = hoveredId === img.id;\r\n            return (\r\n              <div\r\n                key={img.id}\r\n                role=\"button\"\r\n                tabIndex={0}\r\n                aria-label={`View image ${img.name || img.id}`}\r\n                onClick={() => handleImageClick(img)}\r\n                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleImageClick(img); } }}\r\n                onMouseEnter={() => setHoveredId(img.id)}\r\n                onMouseLeave={() => setHoveredId(null)}\r\n                style={{\r\n                  position: 'relative',\r\n                  borderRadius: tokens.borderRadius.md,\r\n                  border: `1px solid ${tokens.colors.border.muted}`,\r\n                  overflow: 'hidden',\r\n                  cursor: 'pointer',\r\n                  transition: tokens.animation.fast,\r\n                  transform: isHovered ? 'translateY(-2px)' : 'none',\r\n                  boxShadow: isHovered ? tokens.shadows.md : 'none',\r\n                  backgroundColor: tokens.colors.background.surface,\r\n                }}\r\n              >\r\n                {/* Thumbnail */}\r\n                <div style={{\r\n                  height: thumbnailHeight,\r\n                  display: 'flex', alignItems: 'center', justifyContent: 'center',\r\n                  overflow: 'hidden',\r\n                  backgroundColor: tokens.colors.background.base,\r\n                }}>\r\n                  <img\r\n                    src={img.src}\r\n                    alt={img.name}\r\n                    loading=\"lazy\"\r\n                    onError={(e) => {\r\n                      const target = e.target as HTMLImageElement;\r\n                      target.style.display = 'none';\r\n                      target.parentElement!.innerHTML = `<span style=\"color:${tokens.colors.text.tertiary};font-size:${tokens.typography.fontSize.xxs}\">Image unavailable</span>`;\r\n                    }}\r\n                    style={{\r\n                      maxWidth: '100%', maxHeight: '100%',\r\n                      objectFit: 'contain',\r\n                    }}\r\n                  />\r\n                </div>\r\n                \r\n                {/* Info bar */}\r\n                <div style={{\r\n                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n                  borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n                }}>\r\n                  <div style={{\r\n                    fontSize: tokens.typography.fontSize.xxs,\r\n                    fontWeight: tokens.typography.fontWeight.medium,\r\n                    color: tokens.colors.text.primary,\r\n                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',\r\n                  }}>\r\n                    {img.name}\r\n                  </div>\r\n                  {img.timestamp && (\r\n                    <div style={{\r\n                      fontSize: tokens.typography.fontSize.micro,\r\n                      color: tokens.colors.text.tertiary,\r\n                      fontFamily: tokens.typography.fontFamily.mono,\r\n                    }}>\r\n                      {formatTime(img.timestamp)}\r\n                    </div>\r\n                  )}\r\n                </div>\r\n                \r\n                {/* Hover actions */}\r\n                {isHovered && (\r\n                  <div style={{\r\n                    position: 'absolute', top: tokens.spacing.xs, right: tokens.spacing.xs,\r\n                    display: 'flex', gap: '4px',\r\n                  }}>\r\n                    {onDownload && (\r\n                      <ActionBtn icon={downloadIcon} label=\"Download\" onClick={() => onDownload(img)} />\r\n                    )}\r\n                    {onDelete && (\r\n                      <ActionBtn icon={deleteIcon} label=\"Delete\" onClick={() => onDelete(img)} color={tokens.colors.status.critical} />\r\n                    )}\r\n                  </div>\r\n                )}\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      )}\r\n      \r\n      {/* Pagination */}\r\n      {totalPages > 1 && (\r\n        <div style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n          alignItems: 'center',\r\n          marginTop: tokens.spacing.md,\r\n        }}>\r\n          <Pagination\r\n            currentPage={currentPage + 1}\r\n            totalPages={totalPages}\r\n            onChange={(page) => setCurrentPage(Math.max(0, page - 1))}\r\n            showFirstLast={false}\r\n            displayMode=\"text\"\r\n            size=\"small\"\r\n          />\r\n        </div>\r\n      )}\r\n      \r\n      {/* Lightbox */}\r\n      {selectedImage && (\r\n        <>\r\n          <div\r\n            aria-hidden=\"true\"\r\n            onClick={() => setSelectedImage(null)}\r\n            style={{\r\n              position: 'fixed', inset: 0, zIndex: 9998,\r\n              backgroundColor: `${tokens.colors.background.base}e0`,\r\n              backdropFilter: 'blur(8px)',\r\n              animation: `zendir-lb-fade 200ms ${tokens.animation.easing.default}`,\r\n            }}\r\n          />\r\n          <div\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            aria-label={`Image: ${selectedImage.name}`}\r\n            onClick={() => setSelectedImage(null)}\r\n            style={{\r\n              position: 'fixed', inset: 0, zIndex: 9999,\r\n              display: 'flex', flexDirection: 'column',\r\n              alignItems: 'center', justifyContent: 'center',\r\n              padding: tokens.spacing.xl,\r\n            }}\r\n          >\r\n            <img\r\n              src={selectedImage.src}\r\n              alt={selectedImage.name}\r\n              onClick={e => e.stopPropagation()}\r\n              style={{\r\n                maxWidth: '90vw', maxHeight: '80vh',\r\n                objectFit: 'contain',\r\n                borderRadius: tokens.borderRadius.md,\r\n                boxShadow: tokens.shadows.xl,\r\n                animation: `zendir-lb-scale 250ms ${tokens.animation.easing.default}`,\r\n              }}\r\n            />\r\n            <div style={{\r\n              display: 'flex', alignItems: 'center', gap: tokens.spacing.md,\r\n              marginTop: tokens.spacing.md,\r\n            }}\r\n              onClick={e => e.stopPropagation()}\r\n            >\r\n              <span style={{\r\n                color: tokens.colors.text.primary,\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n              }}>\r\n                {selectedImage.name}\r\n              </span>\r\n              {onDownload && (\r\n                <button\r\n                  onClick={() => onDownload(selectedImage)}\r\n                  style={{\r\n                    padding: '6px 16px', fontSize: tokens.typography.fontSize.xs,\r\n                    color: tokens.colors.text.primary, backgroundColor: `${tokens.colors.accent.primary}20`,\r\n                    border: `1px solid ${tokens.colors.accent.primary}40`,\r\n                    borderRadius: tokens.borderRadius.md, cursor: 'pointer',\r\n                    fontFamily: tokens.typography.fontFamily.primary,\r\n                  }}\r\n                >\r\n                  Download\r\n                </button>\r\n              )}\r\n              {onDelete && (\r\n                <button\r\n                  onClick={() => { onDelete(selectedImage); setSelectedImage(null); }}\r\n                  style={{\r\n                    padding: '6px 16px', fontSize: tokens.typography.fontSize.xs,\r\n                    color: tokens.colors.status.critical, backgroundColor: `${tokens.colors.status.critical}15`,\r\n                    border: `1px solid ${tokens.colors.status.critical}30`,\r\n                    borderRadius: tokens.borderRadius.md, cursor: 'pointer',\r\n                    fontFamily: tokens.typography.fontFamily.primary,\r\n                  }}\r\n                >\r\n                  Delete\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          <style>{`\r\n            @keyframes zendir-lb-fade { from { opacity: 0; } to { opacity: 1; } }\r\n            @keyframes zendir-lb-scale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\r\n          `}</style>\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nexport default ImageGallery;\r\n"],"names":["ImageGallery"],"mappings":"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"}

package/dist/react/core/Input.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+
+export type InputSize = 'small' | 'medium' | 'large';
+/** Label placement relative to the input field */
+export type LabelPlacement = 'above' | 'outlined';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label text or ReactNode (supports rich content like tooltip icons) */
+    label?: React.ReactNode;
+    /** Helper text below input */
+    helperText?: string;
+    /** Error message (shows error state) */
+    error?: string;
+    /** Size variant */
+    size?: InputSize;
+    /** Status for styling */
+    status?: StatusLevel;
+    /** Icon at start of input */
+    icon?: React.ReactNode;
+    /** Icon at end of input */
+    iconEnd?: React.ReactNode;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Required indicator */
+    required?: boolean;
+    /** Optional indicator (shows "optional" text) */
+    optional?: boolean;
+    /** Custom className */
+    className?: string;
+    /**
+     * Label placement style.
+     * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**
+     * - `'above'`    — label sits above the input with a gap (classic stack).
+     */
+    labelPlacement?: LabelPlacement;
+}
+export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>>;
+export default Input;