@geomak/ui 5.0.3 → 5.1.0

package/dist/index.js

@@ -3,6 +3,7 @@ export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } fr
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -185,6 +186,417 @@ function Portal({ children, target }) {
   }, [target]);
   return resolved ? createPortal(children, resolved) : null;
 }
+var SPACING_MAP = {
+  "none": "0",
+  "xs": "1",
+  "sm": "2",
+  "md": "4",
+  "lg": "6",
+  "xl": "8",
+  "2xl": "12"
+};
+var padding = (s, axis = "p") => s == null ? "" : `${axis}-${SPACING_MAP[s]}`;
+var margin = (s, axis = "m") => s == null ? "" : `${axis}-${SPACING_MAP[s]}`;
+var BG_MAP = {
+  "none": "",
+  "background": "bg-background",
+  "surface": "bg-surface",
+  "surface-raised": "bg-surface-raised",
+  "accent": "bg-accent text-accent-fg"
+};
+var BORDER_MAP = {
+  "none": "",
+  "border": "border border-border",
+  "border-strong": "border border-border-strong",
+  "accent": "border border-accent",
+  "status-error": "border border-status-error"
+};
+var RADIUS_MAP = {
+  "none": "rounded-none",
+  "sm": "rounded-sm",
+  "md": "rounded-md",
+  "lg": "rounded-lg",
+  "xl": "rounded-xl",
+  "2xl": "rounded-2xl",
+  "full": "rounded-full"
+};
+var SHADOW_MAP = {
+  "none": "",
+  "sm": "shadow-sm",
+  "md": "shadow-md",
+  "lg": "shadow-lg",
+  "xl": "shadow-xl"
+};
+function Box({
+  as,
+  p,
+  px: px2,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  background = "none",
+  border = "none",
+  radius,
+  shadow = "none",
+  width,
+  height,
+  onClick,
+  className = "",
+  style,
+  children
+}) {
+  const Element = as ?? "div";
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      onClick,
+      className: [
+        padding(p, "p"),
+        padding(px2, "px"),
+        padding(py, "py"),
+        padding(pt, "pt"),
+        padding(pr, "pr"),
+        padding(pb, "pb"),
+        padding(pl, "pl"),
+        margin(m, "m"),
+        margin(mx, "mx"),
+        margin(my, "my"),
+        margin(mt, "mt"),
+        margin(mr, "mr"),
+        margin(mb, "mb"),
+        margin(ml, "ml"),
+        BG_MAP[background],
+        BORDER_MAP[border],
+        radius ? RADIUS_MAP[radius] : "",
+        SHADOW_MAP[shadow],
+        className
+      ].filter(Boolean).join(" "),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height,
+        ...style
+      },
+      children
+    }
+  );
+}
+var GAP_MAP = {
+  "none": "gap-0",
+  "xs": "gap-1",
+  "sm": "gap-2",
+  "md": "gap-4",
+  "lg": "gap-6",
+  "xl": "gap-8",
+  "2xl": "gap-12"
+};
+var DIRECTION_CLASS = {
+  "row": "flex-row",
+  "row-reverse": "flex-row-reverse",
+  "col": "flex-col",
+  "col-reverse": "flex-col-reverse"
+};
+var ALIGN_CLASS = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var JUSTIFY_CLASS = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var WRAP_CLASS = {
+  "nowrap": "flex-nowrap",
+  "wrap": "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse"
+};
+function Flex({
+  direction = "row",
+  align,
+  justify,
+  wrap,
+  gap,
+  inline,
+  className = "",
+  ...boxProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...boxProps,
+      className: [
+        inline ? "inline-flex" : "flex",
+        DIRECTION_CLASS[direction],
+        align ? ALIGN_CLASS[align] : "",
+        justify ? JUSTIFY_CLASS[justify] : "",
+        wrap ? WRAP_CLASS[wrap] : "",
+        gap ? GAP_MAP[gap] : "",
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+var GAP_MAP2 = {
+  "none": "gap-0",
+  "xs": "gap-1",
+  "sm": "gap-2",
+  "md": "gap-4",
+  "lg": "gap-6",
+  "xl": "gap-8",
+  "2xl": "gap-12"
+};
+var COL_MAP = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12"
+};
+var ROW_MAP = {
+  1: "grid-rows-1",
+  2: "grid-rows-2",
+  3: "grid-rows-3",
+  4: "grid-rows-4",
+  5: "grid-rows-5",
+  6: "grid-rows-6"
+};
+var ALIGN_CLASS2 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var JUSTIFY_CLASS2 = {
+  start: "justify-items-start",
+  center: "justify-items-center",
+  end: "justify-items-end",
+  stretch: "justify-items-stretch"
+};
+function Grid2({
+  cols,
+  rows,
+  gap,
+  gapX,
+  gapY,
+  align,
+  justify,
+  className = "",
+  style,
+  ...boxProps
+}) {
+  const colClass = typeof cols === "number" ? COL_MAP[cols] ?? "" : "";
+  const rowClass = typeof rows === "number" ? ROW_MAP[rows] ?? "" : "";
+  const inlineCols = typeof cols === "string" ? cols : void 0;
+  const inlineRows = typeof rows === "string" ? rows : void 0;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...boxProps,
+      className: [
+        "grid",
+        colClass,
+        rowClass,
+        gap ? GAP_MAP2[gap] : "",
+        gapX ? GAP_MAP2[gapX].replace("gap-", "gap-x-") : "",
+        gapY ? GAP_MAP2[gapY].replace("gap-", "gap-y-") : "",
+        align ? ALIGN_CLASS2[align] : "",
+        justify ? JUSTIFY_CLASS2[justify] : "",
+        className
+      ].filter(Boolean).join(" "),
+      style: {
+        gridTemplateColumns: inlineCols,
+        gridTemplateRows: inlineRows,
+        ...style
+      }
+    }
+  );
+}
+var SIZE_PX = {
+  xs: 20,
+  sm: 28,
+  md: 36,
+  lg: 48,
+  xl: 64
+};
+var TEXT_CLASS = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var STATUS_CLASS = {
+  online: "bg-status-success",
+  offline: "bg-foreground-muted",
+  away: "bg-status-warning",
+  busy: "bg-status-error"
+};
+function Avatar({
+  src,
+  alt,
+  fallback,
+  size = "md",
+  shape = "circle",
+  status,
+  className = ""
+}) {
+  const px2 = SIZE_PX[size];
+  const initialsFallback = (() => {
+    if (fallback) return fallback;
+    if (alt) {
+      const parts = alt.trim().split(/\s+/).slice(0, 2);
+      const initials = parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
+      if (initials) return initials;
+    }
+    return /* @__PURE__ */ jsx(PersonSilhouette, {});
+  })();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `relative inline-block flex-shrink-0 ${className}`,
+      style: { width: px2, height: px2 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          AvatarPrimitive.Root,
+          {
+            className: `flex w-full h-full items-center justify-center overflow-hidden bg-surface-raised text-foreground-secondary select-none ${shape === "circle" ? "rounded-full" : "rounded-md"}`,
+            children: [
+              src && /* @__PURE__ */ jsx(
+                AvatarPrimitive.Image,
+                {
+                  src,
+                  alt: alt ?? "",
+                  className: "h-full w-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AvatarPrimitive.Fallback,
+                {
+                  delayMs: src ? 300 : 0,
+                  className: `flex h-full w-full items-center justify-center font-semibold ${TEXT_CLASS[size]}`,
+                  children: initialsFallback
+                }
+              )
+            ]
+          }
+        ),
+        status && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `absolute bottom-0 right-0 block rounded-full ring-2 ring-background ${STATUS_CLASS[status]}`,
+            style: {
+              width: Math.max(6, Math.round(px2 / 4)),
+              height: Math.max(6, Math.round(px2 / 4))
+            },
+            "aria-label": `Status: ${status}`,
+            role: "status"
+          }
+        )
+      ]
+    }
+  );
+}
+function PersonSilhouette() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-[60%] h-[60%]", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 12a4 4 0 100-8 4 4 0 000 8zM4 20a8 8 0 1116 0H4z" }) });
+}
+var VARIANT_CLASS = {
+  display: "text-3xl font-bold leading-tight tracking-tight",
+  h1: "text-2xl font-bold leading-tight tracking-tight",
+  h2: "text-xl font-semibold leading-snug tracking-tight",
+  h3: "text-lg font-semibold leading-snug",
+  h4: "text-base font-semibold leading-snug",
+  subtitle: "text-sm font-medium leading-snug",
+  body: "text-sm leading-normal",
+  caption: "text-xs leading-normal",
+  overline: "text-[10px] font-semibold leading-normal uppercase tracking-wider",
+  code: "text-xs leading-normal font-mono bg-surface-raised text-foreground rounded px-1 py-0.5"
+};
+var DEFAULT_ELEMENT = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  subtitle: "p",
+  body: "p",
+  caption: "span",
+  overline: "span",
+  code: "code"
+};
+var COLOR_CLASS = {
+  "foreground": "text-foreground",
+  "foreground-secondary": "text-foreground-secondary",
+  "foreground-muted": "text-foreground-muted",
+  "accent": "text-accent",
+  "status-error": "text-status-error",
+  "status-warning": "text-status-warning",
+  "status-success": "text-status-success",
+  "status-info": "text-status-info",
+  "inherit": ""
+};
+var WEIGHT_CLASS = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var ALIGN_CLASS3 = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+function Typography({
+  variant = "body",
+  as,
+  color = "inherit",
+  weight,
+  align,
+  truncate,
+  muted,
+  className = "",
+  style,
+  children
+}) {
+  const Element = as ?? DEFAULT_ELEMENT[variant];
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: [
+        VARIANT_CLASS[variant],
+        COLOR_CLASS[color],
+        weight ? WEIGHT_CLASS[weight] : "",
+        align ? ALIGN_CLASS3[align] : "",
+        truncate ? "truncate" : "",
+        muted ? "opacity-60" : "",
+        className
+      ].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
+}
 function IconButton({
   icon,
   onClick,
@@ -1105,30 +1517,53 @@ function FadingBase({
     )
   );
 }
-function List2({ items, onItemClick, activeKey }) {
-  return /* @__PURE__ */ jsx("div", { role: "listbox", children: items.map((item) => (
-    // tabIndex + Enter/Space onKeyDown makes each option
-    // keyboard-activatable. Previously the items were only mouse-
-    // clickable — keyboard-only users couldn't select anything.
-    /* @__PURE__ */ jsx(
+var DENSITY_PADDING = {
+  "compact": "py-1.5 px-2",
+  "comfortable": "py-2.5 px-3",
+  "spacious": "py-3.5 px-4"
+};
+function List2({
+  items,
+  onItemClick,
+  activeKey,
+  density = "comfortable"
+}) {
+  return /* @__PURE__ */ jsx("div", { role: "listbox", className: "flex flex-col", children: items.map((item) => {
+    const isActive = activeKey === item.key;
+    const isDisabled = !!item.disabled;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         role: "option",
-        "aria-selected": activeKey === item.key,
-        tabIndex: 0,
-        className: `hover:bg-surface-raised cursor-pointer p-3 border-b border-border transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${activeKey === item.key ? "bg-surface-raised text-foreground" : "text-foreground-secondary"}`,
-        onClick: () => onItemClick(item),
+        "aria-selected": isActive,
+        "aria-disabled": isDisabled || void 0,
+        tabIndex: isDisabled ? -1 : 0,
+        onClick: () => !isDisabled && onItemClick(item),
         onKeyDown: (e) => {
+          if (isDisabled) return;
           if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             onItemClick(item);
           }
         },
-        children: item.label
+        className: [
+          "flex items-center gap-3 cursor-pointer border-b border-border transition-colors duration-150",
+          DENSITY_PADDING[density],
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
+          isDisabled ? "opacity-50 cursor-not-allowed" : isActive ? "bg-surface-raised text-foreground" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+        ].join(" "),
+        children: [
+          item.avatar && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: item.avatar }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground truncate", children: item.label }),
+            item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground-secondary mt-0.5 truncate", children: item.description })
+          ] }),
+          item.trailing && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-foreground-muted", children: item.trailing })
+        ]
       },
       item.key
-    )
-  )) });
+    );
+  }) });
 }
 var TOGGLE_POSITION_CLASS = {
   "top-left": "top-2 left-2",
@@ -1567,21 +2002,50 @@ function Wizard({
   const handlePrev = () => {
     if (activeIndex > 0) setActiveIndex((i) => i - 1);
   };
+  const SPOT_PAD = 6;
   const highlightStyle = bbox ? {
-    left: bbox.left - 4,
-    top: bbox.top - 4,
-    width: bbox.width + 8,
-    height: bbox.height + 8
+    left: bbox.left - SPOT_PAD,
+    top: bbox.top - SPOT_PAD,
+    width: bbox.width + SPOT_PAD * 2,
+    height: bbox.height + SPOT_PAD * 2
+  } : { display: "none" };
+  const backdropTop = bbox ? { left: 0, top: 0, right: 0, height: Math.max(0, bbox.top - SPOT_PAD) } : { display: "none" };
+  const backdropBottom = bbox ? { left: 0, top: bbox.bottom + SPOT_PAD, right: 0, bottom: 0 } : { display: "none" };
+  const backdropLeft = bbox ? {
+    left: 0,
+    top: bbox.top - SPOT_PAD,
+    width: Math.max(0, bbox.left - SPOT_PAD),
+    height: bbox.height + SPOT_PAD * 2
+  } : { display: "none" };
+  const backdropRight = bbox ? {
+    left: bbox.right + SPOT_PAD,
+    top: bbox.top - SPOT_PAD,
+    right: 0,
+    height: bbox.height + SPOT_PAD * 2
   } : { display: "none" };
   const tooltipStyle = bbox ? tooltipStyleFor(bbox, step?.placement) : { display: "none" };
   const isLast = activeIndex === steps.length - 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
     /* @__PURE__ */ jsx(AnimatePresence, { children: open && step && /* @__PURE__ */ jsxs(Portal, { children: [
+      ["top", "bottom", "left", "right"].map((side) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "fixed z-[7000000] bg-foreground/40 backdrop-blur-[2px] pointer-events-auto",
+          style: side === "top" ? backdropTop : side === "bottom" ? backdropBottom : side === "left" ? backdropLeft : backdropRight,
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" },
+          "aria-hidden": "true"
+        },
+        side
+      )),
       /* @__PURE__ */ jsx(
         motion.div,
         {
-          className: "fixed inset-0 z-[7000000] bg-foreground/40 backdrop-blur-[1px] pointer-events-auto",
+          className: "fixed z-[7000001] pointer-events-auto",
+          style: highlightStyle,
           initial: { opacity: 0 },
           animate: { opacity: 1 },
           exit: { opacity: 0 },
@@ -1592,7 +2056,7 @@ function Wizard({
       /* @__PURE__ */ jsx(
         motion.div,
         {
-          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background",
+          className: "fixed z-[7000002] pointer-events-none rounded-md ring-2 ring-accent",
           style: highlightStyle,
           initial: { opacity: 0, scale: 1.08 },
           animate: { opacity: 1, scale: 1 },
@@ -1613,7 +2077,7 @@ function Wizard({
           "aria-modal": "true",
           "aria-labelledby": step.title ? tooltipTitleId : void 0,
           "aria-describedby": tooltipBodyId,
-          className: "fixed z-[7000002] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
+          className: "fixed z-[7000003] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
           style: tooltipStyle,
           initial: { opacity: 0, scale: 0.96, y: 6 },
           animate: { opacity: 1, scale: 1, y: 0 },
@@ -3883,6 +4347,6 @@ function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
 
-export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, FileInput, Flex, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map