@andreagiugni/tailwind-dashboard-ui 1.0.22 → 1.0.24

package/dist/index.d.cts

@@ -365,6 +365,8 @@ interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "conte
     closeOnOutsideClick?: boolean;
     /** Close when pressing Escape. */
     closeOnEsc?: boolean;
+    /** Render panel under document.body to avoid clipping inside cards/overflow containers. */
+    portal?: boolean;
     /** Panel content. */
     children: React.ReactNode;
 }
@@ -418,6 +420,50 @@ interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "colo
 }
 declare const Progress: React.FC<ProgressProps>;
 
+type PollResultsColor = "primary" | "success" | "error" | "warning" | "info" | "light" | "dark";
+type PollResultsSize = "sm" | "md" | "lg";
+type PollResultsTextSize = React.CSSProperties["fontSize"];
+type PollResultsTextColor = React.CSSProperties["color"];
+type PollResultsTextWeight = React.CSSProperties["fontWeight"];
+interface PollResultsSeries {
+    label?: React.ReactNode;
+    value: number;
+    color?: PollResultsColor;
+    fillColor?: string;
+    ariaLabel?: string;
+}
+interface PollResultsOption {
+    label: React.ReactNode;
+    value?: number;
+    color?: PollResultsColor;
+    fillColor?: string;
+    ariaLabel?: string;
+    series?: PollResultsSeries[];
+}
+interface PollResultsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, ColorOverrideProps {
+    options: PollResultsOption[];
+    maxValue?: number;
+    size?: PollResultsSize;
+    color?: PollResultsColor;
+    trackColor?: string;
+    showValueLabel?: boolean;
+    showSeriesLabels?: boolean;
+    valueFormatter?: (value: number, percent: number) => React.ReactNode;
+    labelTextSize?: PollResultsTextSize;
+    labelTextColor?: PollResultsTextColor;
+    labelTextWeight?: PollResultsTextWeight;
+    valueTextSize?: PollResultsTextSize;
+    valueTextColor?: PollResultsTextColor;
+    valueTextWeight?: PollResultsTextWeight;
+    seriesLabelTextSize?: PollResultsTextSize;
+    seriesLabelTextColor?: PollResultsTextColor;
+    seriesLabelTextWeight?: PollResultsTextWeight;
+    seriesValueTextSize?: PollResultsTextSize;
+    seriesValueTextColor?: PollResultsTextColor;
+    seriesValueTextWeight?: PollResultsTextWeight;
+}
+declare const PollResults: React.FC<PollResultsProps>;
+
 type SpinnerColor = "primary" | "success" | "error" | "warning" | "info" | "light" | "dark";
 type SpinnerSize = "sm" | "md" | "lg";
 interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, ColorOverrideProps {
@@ -636,4 +682,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, PollResults, type PollResultsColor, type PollResultsOption, type PollResultsProps, type PollResultsSeries, type PollResultsSize, type PollResultsTextColor, type PollResultsTextSize, type PollResultsTextWeight, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.d.ts

@@ -365,6 +365,8 @@ interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "conte
     closeOnOutsideClick?: boolean;
     /** Close when pressing Escape. */
     closeOnEsc?: boolean;
+    /** Render panel under document.body to avoid clipping inside cards/overflow containers. */
+    portal?: boolean;
     /** Panel content. */
     children: React.ReactNode;
 }
@@ -418,6 +420,50 @@ interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "colo
 }
 declare const Progress: React.FC<ProgressProps>;
 
+type PollResultsColor = "primary" | "success" | "error" | "warning" | "info" | "light" | "dark";
+type PollResultsSize = "sm" | "md" | "lg";
+type PollResultsTextSize = React.CSSProperties["fontSize"];
+type PollResultsTextColor = React.CSSProperties["color"];
+type PollResultsTextWeight = React.CSSProperties["fontWeight"];
+interface PollResultsSeries {
+    label?: React.ReactNode;
+    value: number;
+    color?: PollResultsColor;
+    fillColor?: string;
+    ariaLabel?: string;
+}
+interface PollResultsOption {
+    label: React.ReactNode;
+    value?: number;
+    color?: PollResultsColor;
+    fillColor?: string;
+    ariaLabel?: string;
+    series?: PollResultsSeries[];
+}
+interface PollResultsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, ColorOverrideProps {
+    options: PollResultsOption[];
+    maxValue?: number;
+    size?: PollResultsSize;
+    color?: PollResultsColor;
+    trackColor?: string;
+    showValueLabel?: boolean;
+    showSeriesLabels?: boolean;
+    valueFormatter?: (value: number, percent: number) => React.ReactNode;
+    labelTextSize?: PollResultsTextSize;
+    labelTextColor?: PollResultsTextColor;
+    labelTextWeight?: PollResultsTextWeight;
+    valueTextSize?: PollResultsTextSize;
+    valueTextColor?: PollResultsTextColor;
+    valueTextWeight?: PollResultsTextWeight;
+    seriesLabelTextSize?: PollResultsTextSize;
+    seriesLabelTextColor?: PollResultsTextColor;
+    seriesLabelTextWeight?: PollResultsTextWeight;
+    seriesValueTextSize?: PollResultsTextSize;
+    seriesValueTextColor?: PollResultsTextColor;
+    seriesValueTextWeight?: PollResultsTextWeight;
+}
+declare const PollResults: React.FC<PollResultsProps>;
+
 type SpinnerColor = "primary" | "success" | "error" | "warning" | "info" | "light" | "dark";
 type SpinnerSize = "sm" | "md" | "lg";
 interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, ColorOverrideProps {
@@ -636,4 +682,4 @@ interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Slider: React.FC<SliderProps>;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSelectionMode, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, AvatarText, type AvatarTextProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, Code, type CodeColor, type CodeProps, type CodeSize, ColorOverrideProps, DatePicker, type DatePickerProps, DateTimePicker, type DateTimePickerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, DropdownItem, type DropdownItemProps, type DropdownItemVariant, type DropdownProps, Dropzone, type DropzoneProps, FileInput, type FileInputProps, Form, type FormProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type ModalVariant, MultiSelect, type MultiSelectProps, Pagination, type PaginationAlign, type PaginationProps, PasswordInput, type PasswordInputProps, PollResults, type PollResultsColor, type PollResultsOption, type PollResultsProps, type PollResultsSeries, type PollResultsSize, type PollResultsTextColor, type PollResultsTextSize, type PollResultsTextWeight, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, type RadioProps, RadioSm, type RadioSmProps, Ribbon, type RibbonColor, type RibbonPosition, type RibbonProps, type RibbonVariant, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, Snippet, type SnippetProps, type SnippetSize, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, TableCell, type TableCellProps, type TableColumn, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSectionProps, Tabs, type TabsProps, type TabsVariant, TextArea, type TextAreaProps, ThemeToggleButton, type ThemeToggleButtonProps, Toast, type ToastProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, cn };

package/dist/index.js

@@ -1483,12 +1483,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",
@@ -1497,14 +1491,17 @@ var Popover = ({
   defaultOpen = false,
   closeOnOutsideClick = true,
   closeOnEsc = true,
+  portal = true,
   children,
   className,
   ...rest
 }) => {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [panelPosition, setPanelPosition] = useState();
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
   const wrapperRef = useRef(null);
+  const panelRef = useRef(null);
   const setOpen = (next) => {
     if (!isControlled) setUncontrolledOpen(next);
     onOpenChange?.(next);
@@ -1512,7 +1509,7 @@ var Popover = ({
   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);
       }
     };
@@ -1528,6 +1525,82 @@ var Popover = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open, closeOnOutsideClick, closeOnEsc]);
+  const updatePanelPosition = 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]);
+  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__ */ jsx(
+    "div",
+    {
+      ref: panelRef,
+      role: "dialog",
+      className: 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 ? cn("fixed", layers.portal) : cn("absolute top-full left-1/2 mt-2 -translate-x-1/2", layers.floating),
+        className
+      ),
+      style: {
+        ...portal && !panelPosition ? { visibility: "hidden" } : void 0,
+        ...portal ? panelPosition : void 0
+      },
+      ...rest,
+      children
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: "relative inline-block", children: [
     /* @__PURE__ */ jsx(
       "span",
@@ -1539,20 +1612,7 @@ var Popover = ({
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "dialog",
-        className: 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",
-          layers.floating,
-          placementClasses2[placement],
-          className
-        ),
-        ...rest,
-        children
-      }
-    )
+    portal && typeof document !== "undefined" ? panel && createPortal(panel, document.body) : panel
   ] });
 };
 var panelBaseByPlacement = {
@@ -1812,12 +1872,203 @@ 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 textStyle = ({
+  size,
+  color,
+  weight
+}) => ({
+  ...size ? { fontSize: size } : {},
+  ...color ? { color } : {},
+  ...weight ? { fontWeight: weight } : {}
+});
+var PollResults = ({
+  options,
+  maxValue = 100,
+  size = "md",
+  color = "primary",
+  trackColor,
+  showValueLabel = true,
+  showSeriesLabels = true,
+  valueFormatter = defaultValueFormatter,
+  labelTextSize,
+  labelTextColor,
+  labelTextWeight,
+  valueTextSize,
+  valueTextColor,
+  valueTextWeight,
+  seriesLabelTextSize,
+  seriesLabelTextColor,
+  seriesLabelTextWeight,
+  seriesValueTextSize,
+  seriesValueTextColor,
+  seriesValueTextWeight,
+  className,
+  bgColor,
+  textColor,
+  borderColor,
+  style,
+  ...rest
+}) => {
+  const safeMax = maxValue <= 0 ? 100 : maxValue;
+  const optionLabelStyle = textStyle({
+    size: labelTextSize,
+    color: labelTextColor,
+    weight: labelTextWeight
+  });
+  const optionValueStyle = textStyle({
+    size: valueTextSize,
+    color: valueTextColor,
+    weight: valueTextWeight
+  });
+  const groupedLabelStyle = textStyle({
+    size: seriesLabelTextSize,
+    color: seriesLabelTextColor,
+    weight: seriesLabelTextWeight
+  });
+  const groupedValueStyle = textStyle({
+    size: seriesValueTextSize ?? valueTextSize,
+    color: seriesValueTextColor ?? valueTextColor,
+    weight: seriesValueTextWeight ?? valueTextWeight
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "min-w-0 break-words text-xl font-semibold leading-snug text-gray-800 dark:text-white/90",
+                style: optionLabelStyle,
+                children: option.label
+              }
+            ),
+            !isGrouped && showValueLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "shrink-0 text-xl font-semibold leading-snug text-gray-600 dark:text-gray-300",
+                style: optionValueStyle,
+                children: valueFormatter(series[0]?.value ?? 0, singlePercent)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: 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__ */ jsxs("div", { children: [
+              isGrouped && (showSeriesLabels || showValueLabel) && /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between gap-3", children: [
+                showSeriesLabels ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "min-w-0 break-words text-xs font-medium text-gray-500 dark:text-gray-400",
+                    style: groupedLabelStyle,
+                    children: entry.label
+                  }
+                ) : /* @__PURE__ */ jsx("span", {}),
+                showValueLabel && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "shrink-0 text-xs font-semibold text-gray-600 dark:text-gray-300",
+                    style: groupedValueStyle,
+                    children: valueFormatter(entry.value, percent)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "progressbar",
+                  "aria-label": ariaLabel || void 0,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": safeMax,
+                  "aria-valuenow": clampValue(entry.value, safeMax),
+                  className: 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__ */ jsx(
+                    "div",
+                    {
+                      className: 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",
@@ -1854,7 +2105,7 @@ var Spinner = ({
             className: 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
           }
@@ -2680,7 +2931,7 @@ var DatePicker = ({
   useEffect(() => {
     const flatPickr = flatpickr(`#${id}`, {
       mode: mode || "single",
-      static: true,
+      appendTo: document.body,
       monthSelectorType: "static",
       dateFormat: "Y-m-d",
       defaultDate,
@@ -2736,7 +2987,7 @@ var DateTimePicker = ({
   useEffect(() => {
     const flatPickr = flatpickr(`#${id}-date`, {
       mode: "single",
-      static: true,
+      appendTo: document.body,
       monthSelectorType: "static",
       dateFormat: "Y-m-d",
       defaultDate,
@@ -2945,6 +3196,6 @@ var Slider = ({
   ] });
 };
 
-export { Accordion, AccordionItem, Alert, Avatar, AvatarText, Badge, Breadcrumb, Button, Card, Checkbox, Chip, Code, DatePicker, DateTimePicker, Drawer, Dropdown, DropdownItem, Dropzone, FileInput, Form, Input, Label, MultiSelect, Pagination, PasswordInput, Popover, Progress, Radio, RadioSm, Ribbon, Select, Skeleton, Slider, Snippet, Spinner, Switch, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TextArea, ThemeToggleButton, Toast, Tooltip, styleOverride };
+export { Accordion, AccordionItem, Alert, Avatar, AvatarText, Badge, Breadcrumb, Button, Card, Checkbox, Chip, Code, DatePicker, DateTimePicker, Drawer, Dropdown, DropdownItem, Dropzone, FileInput, Form, Input, Label, MultiSelect, Pagination, PasswordInput, PollResults, Popover, Progress, Radio, RadioSm, Ribbon, Select, Skeleton, Slider, Snippet, Spinner, Switch, Tab, Table, TableBody, TableCell, TableHeader, TableRow, Tabs, TextArea, ThemeToggleButton, Toast, Tooltip, styleOverride };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map