@andreagiugni/tailwind-dashboard-ui 1.0.22 → 1.0.23

package/README.md

@@ -115,6 +115,7 @@ import {
   Drawer,
   Chip,
   Progress,
+  PollResults,
   Spinner,
   Skeleton,
   Slider,
@@ -181,6 +182,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `Code` | `color` (primary/success/error/warning/info/default), `size` (sm/md), (+native code) (+override) |
 | `Snippet` | `code` (string \| string[]), `symbol?`, `hideCopyButton?`, `hideSymbol?`, `size`, (+override) |
 | `Progress` | `value`, `maxValue?`, `color`, `size` (sm/md/lg), `label?`, `showValueLabel?`, `isIndeterminate?` |
+| `PollResults` | `options` (`{ label, value?, series? }[]`), `maxValue?`, `size` (sm/md/lg), `color`, `trackColor?`, `showValueLabel?`, `showSeriesLabels?`, `valueFormatter?`, (+native div) (+override) |
 | `Spinner` | `size` (sm/md/lg), `color`, `label?` |
 | `Skeleton` | `isLoaded`, `width?`, `height?`, `className`, `children?` |
 | `Toast` | `variant` (success/danger/warning/info), `title`, `message?`, `icon?`, `hideIcon?`, `showCloseButton?`, `onClose?`, `hideAccentBar?`, (+native div) (+override) |
@@ -190,7 +192,7 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | Component | Key props |
 |---|---|
 | `Tooltip` | `content`, `placement` (top/right/bottom/left), `delay?`, `disabled?`, (+native span) (+override) |
-| `Popover` | `trigger`, `placement`, `isOpen?` / `defaultOpen?` / `onOpenChange?`, `closeOnOutsideClick?`, `closeOnEsc?` |
+| `Popover` | `trigger`, `placement`, `isOpen?` / `defaultOpen?` / `onOpenChange?`, `closeOnOutsideClick?`, `closeOnEsc?`, `portal?` (default `true`, prevents clipping inside cards/overflow containers) |
 | `Drawer` | `isOpen`, `onClose`, `placement` (left/right/top/bottom), `showCloseButton?`, `closeOnBackdrop?`, `closeOnEsc?`, `size?`, (+native div) |
 
 ### Form controls
@@ -208,8 +210,8 @@ Legend: **(+native)** = also extends the element's native HTML attributes.
 | `FileInput` | `onChange`, `accept`, `multiple`, (+native input) |
 | `PasswordInput` | password field with a show/hide eye toggle, (+native input attrs) |
 | `Dropzone` | `onDrop(files)`, `accept?`, `multiple?`, `title?`, `description?`, `browseLabel?` — drag-and-drop upload, dependency-free |
-| `DatePicker` | `id`, `mode` (single/multiple/range/time), `defaultDate`, `onChange`, `label`, `placeholder` |
-| `DateTimePicker` | `id`, `label?`, `placeholder?`, `defaultDate?`, `defaultTime?` (`"HH:MM"`), `onChange?({ date, time })` — flatpickr date calendar + a compact `HH:MM` time input |
+| `DatePicker` | `id`, `mode` (single/multiple/range/time), `defaultDate`, `onChange`, `label`, `placeholder` — calendar is appended to `document.body` to avoid clipping inside cards/overflow containers |
+| `DateTimePicker` | `id`, `label?`, `placeholder?`, `defaultDate?`, `defaultTime?` (`"HH:MM"`), `onChange?({ date, time })` — flatpickr date calendar appended to `document.body` + a compact `HH:MM` time input |
 | `Slider` | `value` / `defaultValue`, `onChange(value)`, `min`, `max`, `step`, `color`, `label?`, `showValue?`, `disabled` |
 | `ColorPicker` | `defaultValue?` (hex), `defaultFormat?` / `formats?` (`hex`/`rgb`/`rgba`/`hsl`/`hsla`), `showInput?`, `withEyeDropper?`, `label?`, `onChange?(value, color)` — compact swatch + formatted value trigger opening a saturation/hue/alpha popup with a value input, format switcher and clear-value button; built on `react-beautiful-color` (bundled), client-only, **import its CSS** (see ColorPicker note above) |
 | `Editor` (WYSIWYG) | `content`, `onChange(html)`, `placeholder?`, `editable?`, `toolbar?` (ordered tool ids or custom buttons), `rows?` (minimum visible text rows, default `8`), `editorClassName?` — optional Tiptap peers; render client-only (see Data viz) |

package/dist/index.cjs

@@ -1489,12 +1489,6 @@ var Tooltip = ({
     }
   );
 };
-var placementClasses2 = {
-  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  right: "left-full top-1/2 -translate-y-1/2 ml-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
-  left: "right-full top-1/2 -translate-y-1/2 mr-2"
-};
 var Popover = ({
   trigger,
   placement = "bottom",
@@ -1503,14 +1497,17 @@ var Popover = ({
   defaultOpen = false,
   closeOnOutsideClick = true,
   closeOnEsc = true,
+  portal = true,
   children,
   className,
   ...rest
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(defaultOpen);
+  const [panelPosition, setPanelPosition] = React5.useState();
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
   const wrapperRef = React5.useRef(null);
+  const panelRef = React5.useRef(null);
   const setOpen = (next) => {
     if (!isControlled) setUncontrolledOpen(next);
     onOpenChange?.(next);
@@ -1518,7 +1515,7 @@ var Popover = ({
   React5.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (event) => {
-      if (closeOnOutsideClick && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+      if (closeOnOutsideClick && wrapperRef.current && !wrapperRef.current.contains(event.target) && !panelRef.current?.contains(event.target)) {
         setOpen(false);
       }
     };
@@ -1534,6 +1531,82 @@ var Popover = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open, closeOnOutsideClick, closeOnEsc]);
+  const updatePanelPosition = React5.useCallback(() => {
+    const trigger2 = wrapperRef.current;
+    const panel2 = panelRef.current;
+    if (!trigger2 || !panel2) return;
+    const rect = trigger2.getBoundingClientRect();
+    const panelWidth = panel2.offsetWidth;
+    const panelHeight = panel2.offsetHeight;
+    const viewportPadding = 8;
+    const gap = 8;
+    const centeredLeft = rect.left + rect.width / 2 - panelWidth / 2;
+    const centeredTop = rect.top + rect.height / 2 - panelHeight / 2;
+    const canFitAbove = rect.top - gap - panelHeight >= viewportPadding;
+    const canFitBelow = rect.bottom + gap + panelHeight <= window.innerHeight - viewportPadding;
+    const canFitLeft = rect.left - gap - panelWidth >= viewportPadding;
+    const canFitRight = rect.right + gap + panelWidth <= window.innerWidth - viewportPadding;
+    let effectivePlacement = placement;
+    if (placement === "bottom" && !canFitBelow && canFitAbove) {
+      effectivePlacement = "top";
+    } else if (placement === "top" && !canFitAbove && canFitBelow) {
+      effectivePlacement = "bottom";
+    } else if (placement === "left" && !canFitLeft && canFitRight) {
+      effectivePlacement = "right";
+    } else if (placement === "right" && !canFitRight && canFitLeft) {
+      effectivePlacement = "left";
+    }
+    let top = rect.bottom + gap;
+    let left = centeredLeft;
+    if (effectivePlacement === "top") {
+      top = rect.top - gap - panelHeight;
+      left = centeredLeft;
+    } else if (effectivePlacement === "right") {
+      top = centeredTop;
+      left = rect.right + gap;
+    } else if (effectivePlacement === "left") {
+      top = centeredTop;
+      left = rect.left - gap - panelWidth;
+    }
+    setPanelPosition({
+      top: Math.min(
+        Math.max(viewportPadding, top),
+        window.innerHeight - panelHeight - viewportPadding
+      ),
+      left: Math.min(
+        Math.max(viewportPadding, left),
+        window.innerWidth - panelWidth - viewportPadding
+      )
+    });
+  }, [placement]);
+  React5.useLayoutEffect(() => {
+    if (!open || !portal) return;
+    updatePanelPosition();
+    window.addEventListener("resize", updatePanelPosition);
+    window.addEventListener("scroll", updatePanelPosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePanelPosition);
+      window.removeEventListener("scroll", updatePanelPosition, true);
+    };
+  }, [open, portal, updatePanelPosition]);
+  const panel = open ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      className: chunkYERNSNT4_cjs.cn(
+        "min-w-48 rounded-xl border border-gray-200 bg-white p-4 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white/90",
+        portal ? chunkYERNSNT4_cjs.cn("fixed", chunkTF3G3E72_cjs.layers.portal) : chunkYERNSNT4_cjs.cn("absolute top-full left-1/2 mt-2 -translate-x-1/2", chunkTF3G3E72_cjs.layers.floating),
+        className
+      ),
+      style: {
+        ...portal && !panelPosition ? { visibility: "hidden" } : void 0,
+        ...portal ? panelPosition : void 0
+      },
+      ...rest,
+      children
+    }
+  ) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative inline-block", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -1545,20 +1618,7 @@ var Popover = ({
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        role: "dialog",
-        className: chunkYERNSNT4_cjs.cn(
-          "absolute min-w-[12rem] rounded-xl border border-gray-200 bg-white p-4 shadow-theme-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white/90",
-          chunkTF3G3E72_cjs.layers.floating,
-          placementClasses2[placement],
-          className
-        ),
-        ...rest,
-        children
-      }
-    )
+    portal && typeof document !== "undefined" ? panel && reactDom.createPortal(panel, document.body) : panel
   ] });
 };
 var panelBaseByPlacement = {
@@ -1818,12 +1878,134 @@ var Progress = ({
     )
   ] });
 };
+var trackSizes = {
+  sm: "h-2",
+  md: "h-2.5",
+  lg: "h-3.5"
+};
+var colorStyles = {
+  primary: "bg-brand-500",
+  success: "bg-success-500",
+  error: "bg-error-500",
+  warning: "bg-warning-500",
+  info: "bg-blue-light-500",
+  light: "bg-gray-400",
+  dark: "bg-gray-700 dark:bg-gray-300"
+};
+var defaultColorCycle = [
+  "primary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "dark"
+];
+var defaultSeriesColorCycle = ["primary", "success"];
+var clampValue = (value, maxValue) => {
+  return Math.min(Math.max(value, 0), maxValue);
+};
+var toPercent = (value, maxValue) => {
+  return Math.round(clampValue(value, maxValue) / maxValue * 100);
+};
+var nodeToLabel = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  return void 0;
+};
+var defaultValueFormatter = (_value, percent) => `${percent}%`;
+var PollResults = ({
+  options,
+  maxValue = 100,
+  size = "md",
+  color = "primary",
+  trackColor,
+  showValueLabel = true,
+  showSeriesLabels = true,
+  valueFormatter = defaultValueFormatter,
+  className,
+  bgColor,
+  textColor,
+  borderColor,
+  style,
+  ...rest
+}) => {
+  const safeMax = maxValue <= 0 ? 100 : maxValue;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunkYERNSNT4_cjs.cn("w-full space-y-7 text-gray-800 dark:text-white/90", className),
+      style: { ...styleOverride({ bgColor, textColor, borderColor }), ...style },
+      ...rest,
+      children: options.map((option, optionIndex) => {
+        const optionText = nodeToLabel(option.label);
+        const series = option.series?.length ? option.series : [
+          {
+            value: option.value ?? 0,
+            color: option.color ?? defaultColorCycle[optionIndex % defaultColorCycle.length] ?? color,
+            fillColor: option.fillColor,
+            ariaLabel: option.ariaLabel
+          }
+        ];
+        const isGrouped = series.length > 1;
+        const singlePercent = toPercent(series[0]?.value ?? 0, safeMax);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words text-xl font-semibold leading-snug text-gray-800 dark:text-white/90", children: option.label }),
+            !isGrouped && showValueLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xl font-semibold leading-snug text-gray-600 dark:text-gray-300", children: valueFormatter(series[0]?.value ?? 0, singlePercent) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkYERNSNT4_cjs.cn("flex flex-col", isGrouped ? "gap-3" : "gap-0"), children: series.map((entry, seriesIndex) => {
+            const percent = toPercent(entry.value, safeMax);
+            const fillColor = entry.fillColor;
+            const entryColor = entry.color ?? (isGrouped ? defaultSeriesColorCycle[seriesIndex % defaultSeriesColorCycle.length] : option.color ?? defaultColorCycle[optionIndex % defaultColorCycle.length]) ?? color;
+            const entryLabel = nodeToLabel(entry.label);
+            const ariaLabel = entry.ariaLabel ?? [optionText, isGrouped ? entryLabel : void 0].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              isGrouped && (showSeriesLabels || showValueLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-3", children: [
+                showSeriesLabels ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 break-words text-xs font-medium text-gray-500 dark:text-gray-400", children: entry.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                showValueLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs font-semibold text-gray-600 dark:text-gray-300", children: valueFormatter(entry.value, percent) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-label": ariaLabel || void 0,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": safeMax,
+                  "aria-valuenow": clampValue(entry.value, safeMax),
+                  className: chunkYERNSNT4_cjs.cn(
+                    "relative w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800",
+                    trackSizes[size]
+                  ),
+                  style: trackColor ? { backgroundColor: trackColor } : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkYERNSNT4_cjs.cn(
+                        "h-full rounded-full transition-all duration-300",
+                        fillColor ? void 0 : colorStyles[entryColor]
+                      ),
+                      style: {
+                        width: `${percent}%`,
+                        ...fillColor ? { backgroundColor: fillColor } : {}
+                      }
+                    }
+                  )
+                }
+              )
+            ] }, `${entryLabel ?? "series"}-${seriesIndex}`);
+          }) })
+        ] }, `${optionText ?? "poll-option"}-${optionIndex}`);
+      })
+    }
+  );
+};
 var sizeStyles4 = {
   sm: "h-4 w-4 border-2",
   md: "h-6 w-6 border-2",
   lg: "h-8 w-8 border-[3px]"
 };
-var colorStyles = {
+var colorStyles2 = {
   primary: "text-brand-500",
   success: "text-success-500",
   error: "text-error-500",
@@ -1860,7 +2042,7 @@ var Spinner = ({
             className: chunkYERNSNT4_cjs.cn(
               "inline-block animate-spin rounded-full border-current border-t-transparent",
               sizeStyles4[size],
-              !textColor && colorStyles[color]
+              !textColor && colorStyles2[color]
             ),
             style: textColor ? { color: textColor } : void 0
           }
@@ -2686,7 +2868,7 @@ var DatePicker = ({
   React5.useEffect(() => {
     const flatPickr = flatpickr__default.default(`#${id}`, {
       mode: mode || "single",
-      static: true,
+      appendTo: document.body,
       monthSelectorType: "static",
       dateFormat: "Y-m-d",
       defaultDate,
@@ -2742,7 +2924,7 @@ var DateTimePicker = ({
   React5.useEffect(() => {
     const flatPickr = flatpickr__default.default(`#${id}-date`, {
       mode: "single",
-      static: true,
+      appendTo: document.body,
       monthSelectorType: "static",
       dateFormat: "Y-m-d",
       defaultDate,
@@ -3004,6 +3186,7 @@ exports.Label = Label;
 exports.MultiSelect = MultiSelect;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
+exports.PollResults = PollResults;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.Radio = Radio;