import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import * as React from "react";
import { createContext, forwardRef, useState, useMemo, Children, useEffect, isValidElement, useContext } from "react";
import { S as StClose } from "../../StClose-BQuYK7Le.js";
import { S as StChevronDown } from "../../StChevronDown-CE5TIu_U.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
import { Badge } from "../badge/badge.js";
import { Button } from "../button/button.js";
import { Input } from "../input/input.js";
import { Popover, PopoverTrigger, PopoverContent } from "../popover/popover.js";
import { Checkbox } from "../checkbox/checkbox.js";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../accordion/accordion.js";
import { C as CalendarPicker } from "../../calendar-picker-BA_dIl4K.js";
const StFilter2 = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsxs("svg", { id: "icon_StFilter2", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: [
  /* @__PURE__ */ jsx("line", { x1: 3.75, y1: 6.25, x2: 20.25, y2: 6.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" }),
  /* @__PURE__ */ jsx("line", { x1: 6.75, y1: 12.25, x2: 17.25, y2: 12.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" }),
  /* @__PURE__ */ jsx("line", { x1: 10.75, y1: 18.25, x2: 13.25, y2: 18.25, stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", strokeLinecap: "square" })
] });
StFilter2.displayName = "StFilter2";
function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = React.useState(
    void 0
  );
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const onChange = () => {
      setIsMobile(window.innerWidth < breakpoint);
    };
    mql.addEventListener("change", onChange);
    setIsMobile(window.innerWidth < breakpoint);
    return () => mql.removeEventListener("change", onChange);
  }, [breakpoint]);
  return !!isMobile;
}
const FilterToolbarContext = createContext(void 0);
const useFilterToolbar = () => {
  const context = useContext(FilterToolbarContext);
  if (context === void 0) {
    throw new Error("useFilterToolbar must be used within FilterToolbar");
  }
  return context;
};
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debouncedValue;
}
const FilterCountBadge = ({ count }) => /* @__PURE__ */ jsx(Badge, { className: "h-4 min-w-[16px] flex items-center justify-center p-0", children: count });
const EmptyFilterState = ({
  message = "No options available"
}) => /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: message });
const FilterToolbar = forwardRef(
  ({ className, children, variant = "horizontal", ...props }, ref) => {
    const [activeFilters, setActiveFilters] = useState(
      /* @__PURE__ */ new Map()
    );
    const [clearButtonInfo, setClearButtonInfo] = useState(null);
    const isMobile = useIsMobile();
    const contextValue = useMemo(
      () => ({
        isMobile,
        variant,
        activeFilters,
        setActiveFilters,
        clearButtonInfo,
        setClearButtonInfo
      }),
      [isMobile, variant, activeFilters, clearButtonInfo, setClearButtonInfo]
    );
    const childArray = Children.toArray(children);
    const firstChild = childArray[0];
    const restChildren = childArray.slice(1);
    if (variant === "vertical") {
      return /* @__PURE__ */ jsx(FilterToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          role: "toolbar",
          className: cn("flex flex-col gap-2 w-full", className),
          ...props,
          children
        }
      ) });
    }
    if (variant === "compact") {
      return /* @__PURE__ */ jsx(FilterToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          role: "toolbar",
          className: cn(
            // Mobile: Stack vertically
            "flex flex-col gap-4",
            // Desktop: Horizontal layout - title on left, controls on right
            "md:flex-row md:items-center md:justify-between md:gap-4",
            className
          ),
          ...props,
          children: [
            firstChild,
            restChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: restChildren })
          ]
        }
      ) });
    }
    return /* @__PURE__ */ jsx(FilterToolbarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        role: "toolbar",
        className: cn(
          // Mobile: Stack vertically
          "flex flex-col gap-4",
          // Desktop: Horizontal layout - title on left, controls on right
          "md:flex-row md:items-center md:justify-between md:gap-4",
          className
        ),
        ...props,
        children: [
          firstChild,
          restChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: restChildren })
        ]
      }
    ) });
  }
);
FilterToolbar.displayName = "FilterToolbar";
const FilterToolbarTitle = forwardRef(({ className, children, ...props }, ref) => {
  const { variant, clearButtonInfo } = useFilterToolbar();
  if (variant === "vertical" && clearButtonInfo && clearButtonInfo.activeCount > 0) {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("flex items-center justify-between gap-2", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx("h2", { className: "headline-md line-clamp-1", children }),
          /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              onClick: clearButtonInfo.onClearAll,
              size: "sm",
              leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
              children: "Clear"
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn("flex items-center gap-2", className),
      ...props,
      children: /* @__PURE__ */ jsx("h2", { className: "headline-md line-clamp-1", children })
    }
  );
});
FilterToolbarTitle.displayName = "FilterToolbarTitle";
const FilterToolbarSearch = forwardRef(
  ({
    onSearch,
    debounceMs = 300,
    className,
    placeholder = "Search...",
    width,
    ...props
  }, ref) => {
    const [value, setValue] = useState("");
    const debouncedValue = useDebounce(value, debounceMs);
    const { isMobile, variant } = useFilterToolbar();
    useEffect(() => {
      onSearch?.(debouncedValue);
    }, [debouncedValue, onSearch]);
    const containerClassName = useMemo(() => {
      if (typeof width === "string") return width;
      if (typeof width === "number") return `w-[${width}px]`;
      if (isMobile || variant === "vertical") return "w-full";
      return "w-[180px]";
    }, [isMobile, variant, width]);
    return /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsx(
      Input,
      {
        ref,
        type: "search",
        role: "searchbox",
        "aria-label": "Search",
        value,
        onChange: (e) => setValue(e.target.value),
        placeholder,
        className: cn("h-8 pl-8 pr-2 w-full", className),
        ...props
      }
    ) });
  }
);
FilterToolbarSearch.displayName = "FilterToolbarSearch";
const FilterGroup = forwardRef(
  ({ activeCount, onClearAll, className, children, ...props }, ref) => {
    const { isMobile, variant, setClearButtonInfo } = useFilterToolbar();
    const [popoverOpen, setPopoverOpen] = useState(false);
    const childFilterCount = useMemo(() => {
      let count = 0;
      Children.forEach(children, (child) => {
        if (isValidElement(child) && isFilter(child)) {
          const value = child.props.value;
          if (Array.isArray(value)) {
            count += value.length;
          }
        }
      });
      return count;
    }, [children]);
    const totalFilterCount = activeCount ?? childFilterCount;
    useEffect(() => {
      if (variant === "vertical") {
        if (onClearAll && totalFilterCount > 0) {
          setClearButtonInfo({
            activeCount: totalFilterCount,
            onClearAll
          });
        } else {
          setClearButtonInfo(null);
        }
      } else {
        setClearButtonInfo(null);
      }
      return () => {
        setClearButtonInfo(null);
      };
    }, [variant, onClearAll, totalFilterCount, setClearButtonInfo]);
    if (variant === "vertical") {
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(FilterToolbarAnnouncer, { filterCount: totalFilterCount }),
        /* @__PURE__ */ jsx(
          "div",
          {
            ref,
            className: cn("flex flex-col gap-4 w-full", className),
            ...props,
            children
          }
        )
      ] });
    }
    if (variant === "compact") {
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(FilterToolbarAnnouncer, { filterCount: totalFilterCount }),
        /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
            Button,
            {
              variant: "ghost",
              size: "sm",
              "aria-expanded": popoverOpen,
              "aria-label": `Filter${totalFilterCount > 0 ? ` (${totalFilterCount} active)` : ""}`,
              className: cn(
                "p-2",
                // Ensure button is easily tappable on mobile
                "min-h-[32px] md:min-h-0",
                "relative"
              ),
              children: [
                /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
                totalFilterCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1", children: /* @__PURE__ */ jsx(FilterCountBadge, { count: totalFilterCount }) })
              ]
            }
          ) }),
          /* @__PURE__ */ jsx(
            PopoverContent,
            {
              className: cn(
                // Mobile: Responsive width with padding
                "w-[calc(100vw-2rem)] max-w-[320px]",
                // Desktop: Fixed width
                "md:w-[320px]",
                // Height constraints - more space on mobile for better UX
                "max-h-[calc(100vh-8rem)] md:max-h-[400px]",
                "overflow-y-auto",
                // Responsive padding
                "p-3 md:p-4"
              ),
              align: isMobile ? "start" : "start",
              side: isMobile ? "bottom" : "bottom",
              sideOffset: isMobile ? 8 : 6,
              children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 md:space-y-4", children: [
                children,
                totalFilterCount > 0 && onClearAll && /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "ghost",
                    onClick: onClearAll,
                    className: "w-full",
                    size: isMobile ? "sm" : "sm",
                    leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
                    children: "Clear"
                  }
                )
              ] })
            }
          )
        ] })
      ] });
    }
    if (isMobile) {
      return /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(FilterToolbarAnnouncer, { filterCount: totalFilterCount }),
        /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
            Button,
            {
              variant: "ghost",
              size: "sm",
              "aria-expanded": popoverOpen,
              "aria-label": `Filter${totalFilterCount > 0 ? ` (${totalFilterCount} active)` : ""}`,
              className: "px-3",
              leftIcon: totalFilterCount > 0 ? /* @__PURE__ */ jsx(FilterCountBadge, { count: totalFilterCount }) : /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
              children: "Filter"
            }
          ) }),
          /* @__PURE__ */ jsx(
            PopoverContent,
            {
              className: cn("w-[320px]", "max-h-[400px]", "overflow-y-auto"),
              align: "start",
              children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                children,
                totalFilterCount > 0 && onClearAll && /* @__PURE__ */ jsx(
                  Button,
                  {
                    variant: "ghost",
                    onClick: onClearAll,
                    className: "w-full",
                    leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
                    children: "Clear"
                  }
                )
              ] })
            }
          )
        ] })
      ] });
    }
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(FilterToolbarAnnouncer, { filterCount: totalFilterCount }),
      /* @__PURE__ */ jsxs(
        "div",
        {
          ref,
          className: cn("flex items-center gap-1", className),
          ...props,
          children: [
            totalFilterCount > 0 && onClearAll && /* @__PURE__ */ jsx(
              Button,
              {
                variant: "ghost",
                size: "sm",
                onClick: onClearAll,
                "aria-label": "Clear all filters",
                leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
                children: "Clear"
              }
            ),
            children
          ]
        }
      )
    ] });
  }
);
FilterGroup.displayName = "FilterGroup";
const Filter = forwardRef(
  ({
    label,
    options,
    value,
    onChange,
    multiple = true,
    displayVariant = "checkbox",
    maxVisibleOptions,
    defaultOpen = true
  }, ref) => {
    const { isMobile, variant } = useFilterToolbar();
    const [open, setOpen] = useState(false);
    const [showAllOptions, setShowAllOptions] = useState(false);
    const handleSelect = (optionValue) => {
      if (multiple) {
        const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
        onChange(newValue);
      } else {
        onChange([optionValue]);
        setOpen(false);
      }
    };
    const visibleOptions = useMemo(() => {
      if (!maxVisibleOptions || showAllOptions) {
        return options;
      }
      return options.slice(0, maxVisibleOptions);
    }, [options, maxVisibleOptions, showAllOptions]);
    const remainingCount = options.length - (maxVisibleOptions || 0);
    const showMoreButton = maxVisibleOptions && options.length > maxVisibleOptions;
    const renderCheckboxVariant = () => /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": label, children: visibleOptions.map((option) => /* @__PURE__ */ jsxs(
      "label",
      {
        className: "flex items-center gap-2 cursor-pointer hover:bg-subtle p-2 rounded-md transition-colors",
        children: [
          /* @__PURE__ */ jsx(
            Checkbox,
            {
              checked: value.includes(option.value),
              onCheckedChange: () => handleSelect(option.value),
              "aria-label": `Select ${option.label}`
            }
          ),
          /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
        ]
      },
      option.value
    )) });
    const renderToggleVariant = () => /* @__PURE__ */ jsx(
      "div",
      {
        className: "grid grid-cols-2 gap-2",
        role: multiple ? "group" : "radiogroup",
        "aria-label": label,
        children: options.map((option) => {
          const isSelected = value.includes(option.value);
          return /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              role: multiple ? "checkbox" : "radio",
              "aria-checked": isSelected,
              onClick: () => handleSelect(option.value),
              className: cn(
                "px-4 py-2 rounded-md font-medium transition-all cursor-pointer",
                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
                isSelected ? "bg-accent text-white" : "bg-subtle text-default hover:bg-accent/10"
              ),
              children: option.label
            },
            option.value
          );
        })
      }
    );
    const renderPillsVariant = () => /* @__PURE__ */ jsx(
      "div",
      {
        className: "flex flex-wrap gap-2",
        role: multiple ? "group" : "radiogroup",
        "aria-label": label,
        children: options.map((option) => {
          const isSelected = value.includes(option.value);
          return /* @__PURE__ */ jsx(
            Button,
            {
              type: "button",
              role: multiple ? "checkbox" : "radio",
              "aria-checked": isSelected,
              onClick: () => handleSelect(option.value),
              className: cn(
                "px-4 py-2 rounded-md font-medium transition-all cursor-pointer",
                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
                isSelected ? "bg-accent text-white" : "bg-subtle text-default hover:bg-accent/10"
              ),
              children: option.label
            },
            option.value
          );
        })
      }
    );
    if (variant === "vertical") {
      return /* @__PURE__ */ jsx("div", { ref, className: "w-full", children: /* @__PURE__ */ jsx(
        Accordion,
        {
          multiple: false,
          defaultValue: defaultOpen ? label : void 0,
          children: /* @__PURE__ */ jsxs(AccordionItem, { value: label, children: [
            /* @__PURE__ */ jsx(AccordionTrigger, { children: label }),
            /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "space-y-2", children: options.length === 0 ? /* @__PURE__ */ jsx(EmptyFilterState, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
              displayVariant === "checkbox" && renderCheckboxVariant(),
              displayVariant === "toggle" && renderToggleVariant(),
              displayVariant === "pills" && renderPillsVariant(),
              showMoreButton && /* @__PURE__ */ jsx(
                "button",
                {
                  type: "button",
                  onClick: () => setShowAllOptions(!showAllOptions),
                  className: cn(
                    "flex items-center gap-1 text-sm text-accent hover:text-accent/80 cursor-pointer mt-2",
                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 rounded-md"
                  ),
                  children: showAllOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsx("span", { children: "Show less" }),
                    /* @__PURE__ */ jsx(StChevronDown, { className: "h-4 w-4 rotate-180" })
                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsxs("span", { children: [
                      "Show ",
                      remainingCount,
                      " more"
                    ] }),
                    /* @__PURE__ */ jsx(StChevronDown, { className: "h-4 w-4" })
                  ] })
                }
              )
            ] }) }) })
          ] })
        }
      ) });
    }
    if (variant === "compact") {
      return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-3", children: [
        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm md:text-base", children: label }),
        options.length === 0 ? /* @__PURE__ */ jsx(EmptyFilterState, {}) : /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs(
          "label",
          {
            className: cn(
              "flex items-center gap-2 cursor-pointer hover:bg-subtle rounded-md transition-colors",
              // Mobile: Larger touch targets
              "p-2.5 md:p-2"
            ),
            children: [
              /* @__PURE__ */ jsx(
                Checkbox,
                {
                  checked: value.includes(option.value),
                  onCheckedChange: () => handleSelect(option.value),
                  "aria-label": `Select ${option.label}`
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm md:text-base", children: option.label })
            ]
          },
          option.value
        )) })
      ] });
    }
    if (isMobile) {
      return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-3", children: [
        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: label }),
        options.length === 0 ? /* @__PURE__ */ jsx(EmptyFilterState, {}) : /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs(
          "label",
          {
            className: "flex items-center gap-2 cursor-pointer hover:bg-subtle p-2 rounded-md",
            children: [
              /* @__PURE__ */ jsx(
                Checkbox,
                {
                  checked: value.includes(option.value),
                  onCheckedChange: () => handleSelect(option.value),
                  "aria-label": `Select ${option.label}`
                }
              ),
              /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
            ]
          },
          option.value
        )) })
      ] });
    }
    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        Button,
        {
          variant: "ghost",
          size: "sm",
          role: "button",
          "aria-expanded": open,
          "aria-label": `${label} filter${value.length > 0 ? ` (${value.length} selected)` : ""}`,
          className: "whitespace-nowrap h-8",
          leftIcon: value.length > 0 ? /* @__PURE__ */ jsx(FilterCountBadge, { count: value.length }) : /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
          children: label
        }
      ) }),
      /* @__PURE__ */ jsx(PopoverContent, { className: "w-56 p-0", align: "start", children: options.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(EmptyFilterState, {}) }) : /* @__PURE__ */ jsx(
        "div",
        {
          className: cn("max-h-[300px]", "overflow-y-auto"),
          role: "listbox",
          "aria-label": label,
          children: options.map((option) => /* @__PURE__ */ jsxs(
            "div",
            {
              onClick: () => handleSelect(option.value),
              className: cn(
                "flex w-full items-center gap-2 px-3 py-2 hover:bg-subtle cursor-pointer",
                value.includes(option.value) && "bg-accent/10"
              ),
              role: "option",
              "aria-selected": value.includes(option.value),
              children: [
                multiple && /* @__PURE__ */ jsx(
                  Checkbox,
                  {
                    checked: value.includes(option.value),
                    className: "pointer-events-none",
                    tabIndex: -1
                  }
                ),
                /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: option.label })
              ]
            },
            option.value
          ))
        }
      ) })
    ] });
  }
);
Filter.displayName = "Filter";
function isFilter(child) {
  if (!isValidElement(child)) return false;
  const type = child.type;
  return (typeof type === "function" || typeof type === "object" && type !== null) && "displayName" in type && type.displayName === "Filter";
}
const FilterToolbarButtons = forwardRef(({ className, children, ...props }, ref) => {
  const { variant } = useFilterToolbar();
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn(
        "flex items-center gap-2",
        variant === "vertical" ? "flex-col w-full" : "flex-row",
        className
      ),
      ...props,
      children
    }
  );
});
FilterToolbarButtons.displayName = "FilterToolbarButtons";
const FilterToolbarButton = forwardRef(
  ({
    priority = "secondary",
    className,
    children,
    leftIcon,
    rightIcon,
    ...props
  }, ref) => {
    const { variant } = useFilterToolbar();
    return /* @__PURE__ */ jsx(
      Button,
      {
        ref,
        variant: priority === "primary" ? "default" : "secondary",
        size: "sm",
        "data-priority": priority,
        className: cn(variant === "vertical" && "w-full", className),
        leftIcon,
        rightIcon,
        ...props,
        children
      }
    );
  }
);
FilterToolbarButton.displayName = "FilterToolbarButton";
const FilterToolbarAnnouncer = ({
  filterCount
}) => {
  const [announcement, setAnnouncement] = useState("");
  useEffect(() => {
    if (filterCount > 0) {
      setAnnouncement(
        `${filterCount} filter${filterCount === 1 ? "" : "s"} applied`
      );
    } else {
      setAnnouncement("No filters applied");
    }
  }, [filterCount]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "status",
      "aria-live": "polite",
      "aria-atomic": "true",
      className: "sr-only",
      children: announcement
    }
  );
};
const FilterDateRange = forwardRef(
  ({ label, value, onChange, defaultOpen = true }, ref) => {
    const { isMobile, variant } = useFilterToolbar();
    const [open, setOpen] = useState(false);
    const handleSelect = (range) => {
      onChange(range);
    };
    const hasValue = !!(value?.from || value?.to);
    if (variant === "vertical") {
      return /* @__PURE__ */ jsx("div", { ref, className: "w-full", children: /* @__PURE__ */ jsx(
        Accordion,
        {
          multiple: false,
          defaultValue: defaultOpen ? label : void 0,
          children: /* @__PURE__ */ jsxs(AccordionItem, { value: label, children: [
            /* @__PURE__ */ jsx(AccordionTrigger, { children: label }),
            /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
              /* @__PURE__ */ jsx(
                CalendarPicker,
                {
                  mode: "range",
                  selected: value,
                  onSelect: handleSelect
                }
              ),
              hasValue && /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "sm",
                  onClick: () => onChange(void 0),
                  className: "w-full",
                  leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
                  children: "Clear dates"
                }
              )
            ] }) })
          ] })
        }
      ) });
    }
    if (variant === "compact") {
      return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-3", children: [
        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm md:text-base", children: label }),
        /* @__PURE__ */ jsx(
          CalendarPicker,
          {
            mode: "range",
            selected: value,
            onSelect: handleSelect
          }
        ),
        hasValue && /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            onClick: () => onChange(void 0),
            className: "w-full",
            leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
            children: "Clear dates"
          }
        )
      ] });
    }
    if (isMobile) {
      return /* @__PURE__ */ jsxs("div", { ref, className: "space-y-3", children: [
        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: label }),
        /* @__PURE__ */ jsx(
          CalendarPicker,
          {
            mode: "range",
            selected: value,
            onSelect: handleSelect
          }
        ),
        hasValue && /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            onClick: () => onChange(void 0),
            className: "w-full",
            leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
            children: "Clear dates"
          }
        )
      ] });
    }
    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        Button,
        {
          variant: "ghost",
          size: "sm",
          role: "button",
          "aria-expanded": open,
          "aria-label": `${label} filter${hasValue ? " (date selected)" : ""}`,
          className: "whitespace-nowrap h-8",
          leftIcon: hasValue ? /* @__PURE__ */ jsx(Badge, { className: "h-4 min-w-[16px] flex items-center justify-center p-0", children: "1" }) : /* @__PURE__ */ jsx(StFilter2, { className: "h-4 w-4" }),
          children: label
        }
      ) }),
      /* @__PURE__ */ jsxs(PopoverContent, { className: "w-auto p-3", align: "start", children: [
        /* @__PURE__ */ jsx(
          CalendarPicker,
          {
            mode: "range",
            selected: value,
            onSelect: handleSelect
          }
        ),
        hasValue && /* @__PURE__ */ jsx(
          Button,
          {
            variant: "ghost",
            size: "sm",
            onClick: () => onChange(void 0),
            className: "w-full mt-2",
            leftIcon: /* @__PURE__ */ jsx(StClose, { className: "h-4 w-4" }),
            children: "Clear dates"
          }
        )
      ] })
    ] });
  }
);
FilterDateRange.displayName = "FilterDateRange";
export {
  Filter,
  FilterDateRange,
  FilterGroup,
  FilterToolbar,
  FilterToolbarAnnouncer,
  FilterToolbarButton,
  FilterToolbarButtons,
  FilterToolbarSearch,
  FilterToolbarTitle
};
