@upbound/monarch-blocks 0.1.0

package/dist/filter-bar.d.ts

@@ -0,0 +1,80 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type FilterType = 'checkbox' | 'radio' | 'text' | 'multiText' | 'date';
+interface FilterOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface FilterDefinitionBase {
+    key: string;
+    label: string;
+}
+interface CheckboxFilterDefinition extends FilterDefinitionBase {
+    type?: 'checkbox';
+    options: FilterOption[];
+    /**
+     * When `true`, the chip's value popup becomes a searchable Combobox
+     * (multi-select with a search input). Use for long option lists where a
+     * basic dropdown becomes hard to scan. When `false` or omitted, the chip
+     * uses the standard checkbox dropdown.
+     */
+    searchable?: boolean;
+}
+interface RadioFilterDefinition extends FilterDefinitionBase {
+    type: 'radio';
+    options: FilterOption[];
+    /** Same searchable-Combobox swap as `CheckboxFilterDefinition`, constrained to a single selection. */
+    searchable?: boolean;
+}
+interface TextFilterDefinition extends FilterDefinitionBase {
+    type: 'text';
+    placeholder?: string;
+}
+interface MultiTextFilterDefinition extends FilterDefinitionBase {
+    type: 'multiText';
+    placeholder?: string;
+}
+interface DateFilterDefinition extends FilterDefinitionBase {
+    type: 'date';
+    /**
+     * `true` always shows Start/End time inputs, `false` never shows them,
+     * and omitted auto-detects from whether the current value already carries
+     * a non-midnight time component.
+     */
+    includeTime?: boolean;
+}
+type FilterDefinition = CheckboxFilterDefinition | RadioFilterDefinition | TextFilterDefinition | MultiTextFilterDefinition | DateFilterDefinition;
+type CheckboxFilterValue = string[];
+type RadioFilterValue = string;
+type TextFilterValue = string;
+type MultiTextFilterValue = string[];
+type DateFilterValue = {
+    startDate: Date | null;
+    endDate: Date | null;
+};
+type FilterValue = CheckboxFilterValue | RadioFilterValue | TextFilterValue | MultiTextFilterValue | DateFilterValue;
+interface ActiveFilter {
+    key: string;
+    value?: FilterValue;
+}
+interface FilterBarProps extends React.ComponentProps<'div'> {
+    filters: FilterDefinition[];
+    activeFilters: ActiveFilter[];
+    onAddFilter: (key: string) => void;
+    onRemoveFilter: (key: string) => void;
+    onChangeFilter: (key: string, value: FilterValue) => void;
+}
+declare function FilterBar({ filters, activeFilters, onAddFilter, onRemoveFilter, onChangeFilter, className, children, ...props }: FilterBarProps): react_jsx_runtime.JSX.Element;
+interface FilterChipProps {
+    definition: FilterDefinition;
+    value: FilterValue | undefined;
+    /** Opens the chip's value popup as soon as it mounts — used right after the filter is added. */
+    autoOpen?: boolean;
+    onChangeValue: (value: FilterValue) => void;
+    onRemove: () => void;
+}
+declare function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }: FilterChipProps): react_jsx_runtime.JSX.Element;
+
+export { type ActiveFilter, type CheckboxFilterDefinition, type CheckboxFilterValue, type DateFilterDefinition, type DateFilterValue, FilterBar, type FilterBarProps, FilterChip, type FilterDefinition, type FilterOption, type FilterType, type FilterValue, type MultiTextFilterDefinition, type MultiTextFilterValue, type RadioFilterDefinition, type RadioFilterValue, type TextFilterDefinition, type TextFilterValue };

package/dist/filter-bar.js

@@ -0,0 +1,590 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/filter-bar/filter-bar.tsx
+import * as React from "react";
+import { Icon } from "@upbound/monarch-core";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/filter-bar/filter-bar.tsx
+import { Badge } from "@upbound/monarch-core";
+import { Button } from "@upbound/monarch-core";
+import { ButtonGroup, ButtonGroupText } from "@upbound/monarch-core";
+import { Calendar } from "@upbound/monarch-core";
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxClearAll,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSelectedChips,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue
+} from "@upbound/monarch-core";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from "@upbound/monarch-core";
+import { Input } from "@upbound/monarch-core";
+import { Label } from "@upbound/monarch-core";
+import { Popover, PopoverContent, PopoverTrigger } from "@upbound/monarch-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function asCheckboxValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asRadioValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asTextValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function asMultiTextValue(value) {
+  return Array.isArray(value) ? value : [];
+}
+function asDateValue(value) {
+  if (value && typeof value === "object" && !Array.isArray(value)) return value;
+  return { startDate: null, endDate: null };
+}
+function hasExplicitTime(date) {
+  if (!date) return false;
+  return date.getHours() !== 0 || date.getMinutes() !== 0;
+}
+function formatTimeForInput(date) {
+  if (!date) return "";
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+function applyTimeToDate(date, time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  const next = new Date(date);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+}
+function formatDateLabel(date) {
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function FilterBar(_a) {
+  var _b = _a, {
+    filters,
+    activeFilters,
+    onAddFilter,
+    onRemoveFilter,
+    onChangeFilter,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "filters",
+    "activeFilters",
+    "onAddFilter",
+    "onRemoveFilter",
+    "onChangeFilter",
+    "className",
+    "children"
+  ]);
+  const usedKeys = new Set(activeFilters.map((f) => f.key));
+  const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
+  const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
+  const [pendingOpenKey, setPendingOpenKey] = React.useState(null);
+  function handleAddFilter(key) {
+    onAddFilter(key);
+    setPendingOpenKey(key);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "filter-bar",
+      "data-visible-filters": shouldShowFilters,
+      className: cn("flex flex-wrap items-center gap-2", className)
+    }, props), {
+      children: [
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+            /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
+            "Add filter"
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenuContent,
+            {
+              align: "start",
+              className: "w-48",
+              onCloseAutoFocus: (e) => e.preventDefault(),
+              children: availableFilters.map((filter) => /* @__PURE__ */ jsx(DropdownMenuItem, { onSelect: () => handleAddFilter(filter.key), children: filter.label }, filter.key))
+            }
+          )
+        ] }),
+        activeFilters.map((active) => {
+          const definition = filters.find((f) => f.key === active.key);
+          if (!definition) return null;
+          return /* @__PURE__ */ jsx(
+            FilterChip,
+            {
+              definition,
+              value: active.value,
+              autoOpen: active.key === pendingOpenKey,
+              onChangeValue: (value) => onChangeFilter(active.key, value),
+              onRemove: () => onRemoveFilter(active.key)
+            },
+            active.key
+          );
+        }),
+        children
+      ]
+    })
+  );
+}
+function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
+  var _a;
+  const type = (_a = definition.type) != null ? _a : "checkbox";
+  switch (type) {
+    case "checkbox":
+      return /* @__PURE__ */ jsx(
+        CheckboxFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx(
+        RadioFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(
+        TextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "multiText":
+      return /* @__PURE__ */ jsx(
+        MultiTextFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ jsx(
+        DateFilterChip,
+        {
+          definition,
+          value,
+          autoOpen,
+          onChangeValue,
+          onRemove
+        }
+      );
+  }
+}
+function FilterChipRemoveButton({ label, onRemove }) {
+  return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) });
+}
+function CheckboxFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b;
+  const { label, options, searchable = false } = definition;
+  const values = asCheckboxValue(value);
+  const displayLabel = values.length === 0 ? "Any" : values.length === 1 ? (_b = (_a = options.find((o) => o.value === values[0])) == null ? void 0 : _a.label) != null ? _b : values[0] : `${values.length} selected`;
+  function toggle(optionValue) {
+    const next = values.includes(optionValue) ? values.filter((v) => v !== optionValue) : [...values, optionValue];
+    onChangeValue(next);
+  }
+  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(ButtonGroupText, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        multiple: true,
+        defaultOpen: autoOpen,
+        value: options.filter((o) => values.includes(o.value)),
+        onValueChange: (selected) => onChangeValue(selected.map((s) => s.value)),
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxTrigger,
+            {
+              render: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+            /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+            values.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
+                /* @__PURE__ */ jsx(ComboboxValue, { children: (selected) => /* @__PURE__ */ jsx(Fragment, { children: selected.map((item) => /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, item.value)) }) }),
+                /* @__PURE__ */ jsx(ComboboxClearAll, { onClick: () => onChangeValue([]) })
+              ] }),
+              /* @__PURE__ */ jsx(ComboboxSeparator, {})
+            ] }),
+            /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+              "No ",
+              label.toLowerCase(),
+              " found."
+            ] }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+              item.icon,
+              item.label
+            ] }, item.value) })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs(
+        DropdownMenuCheckboxItem,
+        {
+          checked: values.includes(opt.value),
+          onCheckedChange: () => toggle(opt.value),
+          children: [
+            opt.icon,
+            opt.label
+          ]
+        },
+        opt.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function RadioFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  var _a, _b, _c;
+  const { label, options, searchable = false } = definition;
+  const selectedValue = asRadioValue(value);
+  const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
+  const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
+  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(ButtonGroupText, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        items: options,
+        itemToStringValue: (item) => item.label,
+        defaultOpen: autoOpen,
+        value: selected,
+        onValueChange: (next) => {
+          var _a2;
+          return onChangeValue((_a2 = next == null ? void 0 : next.value) != null ? _a2 : "");
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxTrigger,
+            {
+              render: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
+            }
+          ),
+          /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+            /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+            /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+              "No ",
+              label.toLowerCase(),
+              " found."
+            ] }),
+            /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsxs(ComboboxItem, { value: item, children: [
+              item.icon,
+              item.label
+            ] }, item.value) })
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+      ] }) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: opt.value, children: [
+        opt.icon,
+        opt.label
+      ] }, opt.value)) }) })
+    ] }),
+    /* @__PURE__ */ jsx(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function TextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const text = asTextValue(value);
+  const [open, setOpen] = React.useState(!!autoOpen);
+  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          value: text,
+          placeholder: placeholder != null ? placeholder : "Enter a value\u2026",
+          onChange: (e) => onChangeValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") setOpen(false);
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function MultiTextFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, placeholder } = definition;
+  const tokens = asMultiTextValue(value);
+  const [draft, setDraft] = React.useState("");
+  const displayLabel = tokens.length === 0 ? "Any" : tokens.length === 1 ? tokens[0] : `${tokens.length} values`;
+  function addToken() {
+    const token = draft.trim();
+    if (!token || tokens.includes(token)) {
+      setDraft("");
+      return;
+    }
+    onChangeValue([...tokens, token]);
+    setDraft("");
+  }
+  function removeToken(token) {
+    onChangeValue(tokens.filter((t) => t !== token));
+  }
+  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs(Popover, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        tokens.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1", children: [
+          token,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${token}`,
+              onClick: () => removeToken(token),
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsx(Icon, { name: "xmark", size: "xs" })
+            }
+          )
+        ] }, token)) }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            autoFocus: true,
+            value: draft,
+            placeholder: placeholder != null ? placeholder : "Type a value, press Enter\u2026",
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addToken();
+              } else if (e.key === "Backspace" && draft === "" && tokens.length > 0) {
+                removeToken(tokens[tokens.length - 1]);
+              }
+            }
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+function DateFilterChip({
+  definition,
+  value,
+  autoOpen,
+  onChangeValue,
+  onRemove
+}) {
+  const { label, includeTime } = definition;
+  const { startDate, endDate } = asDateValue(value);
+  const showTimeInputs = includeTime != null ? includeTime : hasExplicitTime(startDate) || hasExplicitTime(endDate);
+  const displayLabel = !startDate ? "Any" : !endDate || startDate.getTime() === endDate.getTime() ? formatDateLabel(startDate) : `${formatDateLabel(startDate)} \u2013 ${formatDateLabel(endDate)}`;
+  function pickRange(range) {
+    var _a;
+    if (!(range == null ? void 0 : range.from)) {
+      onChangeValue({ startDate: null, endDate: null });
+      return;
+    }
+    onChangeValue({ startDate: range.from, endDate: (_a = range.to) != null ? _a : range.from });
+  }
+  function pickStartTime(time) {
+    if (!startDate) return;
+    onChangeValue({ startDate: applyTimeToDate(startDate, time), endDate });
+  }
+  function pickEndTime(time) {
+    if (!endDate) return;
+    onChangeValue({ startDate, endDate: applyTimeToDate(endDate, time) });
+  }
+  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx(ButtonGroupText, { children: label }),
+    /* @__PURE__ */ jsxs(Popover, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            selected: { from: startDate != null ? startDate : void 0, to: endDate != null ? endDate : void 0 },
+            onSelect: pickRange
+          }
+        ),
+        showTimeInputs && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: `${definition.key}-start-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "Start"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${definition.key}-start-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(startDate),
+                onChange: (e) => pickStartTime(e.target.value),
+                disabled: !startDate
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: `${definition.key}-end-time`,
+                className: "text-body-sm text-muted-foreground w-10 shrink-0",
+                children: "End"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: `${definition.key}-end-time`,
+                type: "time",
+                className: "w-full",
+                value: formatTimeForInput(endDate),
+                onChange: (e) => pickEndTime(e.target.value),
+                disabled: !endDate
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(FilterChipRemoveButton, { label, onRemove })
+  ] });
+}
+export {
+  FilterBar,
+  FilterChip
+};
+//# sourceMappingURL=filter-bar.js.map