impact-nova 2.0.8 → 2.1.0-alpha.1

package/dist/components/flows/filter-strip/filter-strip.types.d.ts

@@ -0,0 +1,47 @@
+import type * as React from "react";
+export interface FilterItem {
+    id: string;
+    label: string;
+    value: string | number | string[];
+    required?: boolean;
+    removable?: boolean;
+    copyable?: boolean;
+    viewAllTrigger?: "expand" | "custom";
+    overflow?: {
+        count?: number;
+        label?: string;
+    };
+}
+export type SavedFilterType = "All" | "Global" | "Personal";
+export interface SavedFilterItem {
+    id: string;
+    label: string;
+    type: SavedFilterType;
+    isDefault?: boolean;
+}
+export interface FilterStripProps {
+    filters: FilterItem[];
+    onFilterRemove: (id: string, value?: string | number) => void;
+    onOverflowClick?: (id: string) => void;
+    onClearAll?: () => void;
+    onAllFiltersClick?: () => void;
+    selectedFilter?: string;
+    onSelectedFilterChange?: (label: string) => void;
+    savedFilters?: SavedFilterItem[];
+    recentFilters?: FilterItem[][];
+    onApplySavedFilter?: (filter: SavedFilterItem) => void;
+    onSavedFilterSearch?: (query: string, type?: SavedFilterType) => void;
+    onSavedFiltersScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    onViewAll?: () => void;
+    onDropdownOpenChange?: (isOpen: boolean) => void;
+    isLoadingFilterPreferencesList?: boolean;
+    isLoading?: boolean;
+    onEditSavedFilter?: (filter: SavedFilterItem) => void;
+    onDeleteSavedFilter?: (filter: SavedFilterItem) => void;
+    onSetDefaultSavedFilter?: (filter: SavedFilterItem) => void;
+    className?: string;
+    allFiltersKeybinding?: import('../filter-panel/filter-panel.types').FilterSidebarItem["tooltipKeybinding"];
+    allFiltersShortcutId?: string;
+    showAllFiltersButton?: boolean;
+    showSavedFilters?: boolean;
+}

package/dist/components/flows/filter-strip/filter-summary.d.ts

@@ -0,0 +1,18 @@
+import { FilterItem, SavedFilterItem } from './filter-strip.types';
+import * as React from "react";
+interface FilterSummaryProps {
+    selectedFilter?: string;
+    onSelectedFilterChange?: (label: string) => void;
+    savedFilters?: SavedFilterItem[];
+    recentFilters?: FilterItem[][];
+    onApplySavedFilter?: (filter: SavedFilterItem) => void;
+    onSavedFilterSearch?: (query: string, type?: "Global" | "Personal") => void;
+    onSavedFiltersScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    onDropdownOpenChange?: (isOpen: boolean) => void;
+    isLoadingFilterPreferencesList?: boolean;
+    onEditSavedFilter?: (filter: SavedFilterItem) => void;
+    onDeleteSavedFilter?: (filter: SavedFilterItem) => void;
+    onSetDefaultSavedFilter?: (filter: SavedFilterItem) => void;
+}
+declare const FilterSummary: ({ selectedFilter, onSelectedFilterChange, savedFilters, recentFilters, onApplySavedFilter, onSavedFilterSearch, onSavedFiltersScroll, onDropdownOpenChange, isLoadingFilterPreferencesList, onEditSavedFilter, onDeleteSavedFilter, onSetDefaultSavedFilter, }: FilterSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export { FilterSummary };

package/dist/components/flows/filter-strip/filter-summary.js

@@ -0,0 +1,348 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import * as l from "react";
+import { ChevronRight as ee, Search as te, Bin as ae, Pencil as re, Star as ne } from "impact-nova-icons";
+import { cn as s } from "../../../lib/utils.js";
+import { useImpactNovaI18n as le } from "../../../i18n/use-impact-nova-i18n.js";
+import { Popover as ie, PopoverTrigger as oe, PopoverContent as se } from "../../feedback/popover/popover.js";
+import { Tooltip as f, TooltipTrigger as h, TooltipContent as m } from "../../feedback/tooltip/tooltip.js";
+import { Button as Q } from "../../primitives/button/button.js";
+import { Separator as M } from "../../data-display/separator/separator.js";
+import { Tabs as ce, TabsList as de, TabsTrigger as $ } from "../../primitives/tabs/tabs.js";
+import { Input as pe } from "../../forms/input/input.js";
+import { Badge as ue } from "../../data-display/badge/badge.js";
+import { Skeleton as fe } from "../../data-display/skeleton/skeleton.js";
+const Ie = ({
+  selectedFilter: u,
+  onSelectedFilterChange: _,
+  savedFilters: C,
+  recentFilters: S,
+  onApplySavedFilter: B,
+  onSavedFilterSearch: N,
+  onSavedFiltersScroll: z,
+  onDropdownOpenChange: E,
+  isLoadingFilterPreferencesList: R = !1,
+  onEditSavedFilter: k,
+  onDeleteSavedFilter: I,
+  onSetDefaultSavedFilter: P
+}) => {
+  const { t: n } = le(), [b, T] = l.useState(!1), [O, G] = l.useState(null), [A, U] = l.useState(null);
+  l.useEffect(() => {
+    const a = C?.find((d) => d.isDefault);
+    a && a.id !== A && U(a.id);
+  }, [C, A]);
+  const V = (a) => {
+    T(a), E?.(a);
+  }, [D, Y] = l.useState(""), [x, q] = l.useState(""), [c, H] = l.useState("All"), [p, j] = l.useState(null);
+  l.useEffect(() => {
+    const a = setTimeout(() => {
+      q(D);
+    }, 300);
+    return () => clearTimeout(a);
+  }, [D]), l.useEffect(() => {
+    N && N(
+      x,
+      c === "All" ? void 0 : c
+    );
+  }, [x, c, N]), l.useEffect(() => {
+    b && j(u != null ? { label: u } : null);
+  }, [b, u]);
+  const J = (a) => {
+    Y(a.target.value);
+  }, K = () => {
+    p && (_?.(p.label), p.savedItem && B?.(p.savedItem), T(!1));
+  }, W = () => {
+    T(!1);
+  }, X = () => !S || S.length === 0 ? null : /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-secondary-foreground font-['Manrope']", children: "Recent" }),
+    /* @__PURE__ */ e("div", { className: "mb-[6px] flex flex-col", children: S.map((a, d) => {
+      const o = a.map((w) => w.label).join(", "), g = p?.label === o;
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: s(
+            "flex cursor-pointer flex-row px-3 py-2 rounded-lg hover:bg-secondary w-full text-start bg-transparent border-none",
+            g && "bg-accent"
+          ),
+          onClick: () => j({ label: o }),
+          children: /* @__PURE__ */ r(f, { children: [
+            /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-sm font-['Manrope'] truncate text-foreground", children: o }) }),
+            /* @__PURE__ */ e(m, { variant: "tertiary", side: "right", children: o })
+          ] })
+        },
+        d
+      );
+    }) }),
+    /* @__PURE__ */ e(M, { className: "mb-2" })
+  ] }), Z = () => {
+    if (R)
+      return /* @__PURE__ */ e("div", { className: "flex max-h-[160px] flex-col overflow-y-auto px-3 py-2 space-y-2", children: [1, 2, 3, 4, 5].map((t) => /* @__PURE__ */ e(fe, { className: "h-9 w-full rounded-lg" }, t)) });
+    let a = C?.filter(
+      (t) => c === "All" || t.type === c
+    );
+    if (!N && x && (a = a?.filter(
+      (t) => t.label.toLowerCase().includes(x.toLowerCase())
+    )), !a || a.length === 0) {
+      let t = "No saved filters found";
+      if (!!x)
+        switch (c) {
+          case "Personal":
+            t = "No personal filters match your search";
+            break;
+          case "Global":
+            t = "No global filters match your search";
+            break;
+          default:
+            t = "No saved filters match your search";
+        }
+      else
+        switch (c) {
+          case "Personal":
+            t = "You haven't created any personal filters yet.";
+            break;
+          case "Global":
+            t = "No global filters are currently available.";
+            break;
+          default:
+            t = "No filters have been saved yet.";
+        }
+      return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center py-8 text-center min-h-[100px] px-6", children: /* @__PURE__ */ e("span", { className: "text-sm text-secondary-foreground font-['Manrope'] leading-relaxed", children: t }) });
+    }
+    const d = k || I || P, o = a.find((t) => t.isDefault), g = a.filter((t) => !t.isDefault), w = (t, y = !1) => {
+      const L = p?.label === t.label, i = O === t.id;
+      return /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          className: s(
+            "group mb-1 flex items-center justify-between cursor-pointer rounded-lg px-3 py-2 text-sm font-medium font-['Manrope'] w-full text-start bg-transparent border-none transition-all duration-300 relative overflow-hidden",
+            !i && "hover:bg-secondary",
+            !i && L && "bg-accent",
+            !i && !L && "text-foreground",
+            i && "pointer-events-none"
+          ),
+          onClick: () => !i && j({ label: t.label, savedItem: t }),
+          disabled: i,
+          children: [
+            i && /* @__PURE__ */ e(
+              "div",
+              {
+                className: "absolute inset-0 bg-gradient-to-r from-stroke-hairline via-accent to-stroke-hairline opacity-60",
+                style: {
+                  animation: "shimmer 1.5s ease-in-out infinite",
+                  backgroundSize: "200% 100%"
+                }
+              }
+            ),
+            /* @__PURE__ */ r(f, { children: [
+              /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate flex-1 min-w-0", children: t.label }) }),
+              /* @__PURE__ */ e(m, { variant: "tertiary", side: "right", children: t.label })
+            ] }),
+            d && /* @__PURE__ */ r("div", { className: s(
+              "flex items-center gap-1 ms-2 transition-opacity shrink-0",
+              y ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+            ), children: [
+              I && /* @__PURE__ */ r(f, { children: [
+                /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    "aria-label": `${n("filterStrip.deleteFilter")} ${t.label}`,
+                    className: s(
+                      "p-1 rounded transition-colors hover:bg-stroke-hairline",
+                      y && "opacity-0 group-hover:opacity-100"
+                    ),
+                    onClick: (v) => {
+                      v.stopPropagation(), I(t);
+                    },
+                    children: /* @__PURE__ */ e(ae, { className: "h-3.5 w-3.5 text-secondary-foreground" })
+                  }
+                ) }),
+                /* @__PURE__ */ e(m, { variant: "tertiary", side: "top", children: n("filterStrip.deleteFilter") })
+              ] }),
+              k && /* @__PURE__ */ r(f, { children: [
+                /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    "aria-label": `${n("filterStrip.editFilter")} ${t.label}`,
+                    className: s(
+                      "p-1 rounded transition-colors hover:bg-stroke-hairline",
+                      y && "opacity-0 group-hover:opacity-100"
+                    ),
+                    onClick: (v) => {
+                      v.stopPropagation(), k(t);
+                    },
+                    children: /* @__PURE__ */ e(re, { className: "h-3.5 w-3.5 text-secondary-foreground" })
+                  }
+                ) }),
+                /* @__PURE__ */ e(m, { variant: "tertiary", side: "top", children: n("filterStrip.editFilter") })
+              ] }),
+              P && /* @__PURE__ */ r(f, { children: [
+                /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: y ? 0 : -1,
+                    "aria-label": `${t.isDefault ? n("filterStrip.defaultFilter") : n("filterStrip.setAsDefault")} ${t.label}`,
+                    className: "p-1 rounded hover:bg-stroke-hairline transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+                    disabled: i,
+                    onClick: (v) => {
+                      v.stopPropagation(), G(t.id), P(t), setTimeout(() => G(null), 1200);
+                    },
+                    children: i ? /* @__PURE__ */ e("div", { className: "h-3.5 w-3.5 animate-spin motion-reduce:animate-none rounded-full border-2 border-yellow-500 border-t-transparent" }) : /* @__PURE__ */ e(
+                      ne,
+                      {
+                        className: s(
+                          "h-3.5 w-3.5 transition-all duration-300",
+                          t.isDefault ? "fill-yellow-500 text-yellow-500" : "text-secondary-foreground"
+                        )
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ e(m, { variant: "tertiary", side: "top", children: i ? n("filterStrip.updating") : t.isDefault ? n("filterStrip.defaultFilter") : n("filterStrip.setAsDefault") })
+              ] })
+            ] })
+          ]
+        },
+        t.id
+      );
+    };
+    return /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+      o && /* @__PURE__ */ r(
+        "div",
+        {
+          className: s(
+            "transition-all duration-500 ease-out",
+            A === o.id && "animate-in fade-in slide-in-from-bottom-2 motion-reduce:animate-none"
+          ),
+          children: [
+            w(o, !0),
+            g.length > 0 && /* @__PURE__ */ e(M, { className: "my-1" })
+          ]
+        },
+        `default-${o.id}`
+      ),
+      g.length > 0 && /* @__PURE__ */ e(
+        "div",
+        {
+          className: "flex max-h-[160px] flex-col overflow-y-auto",
+          onScroll: z,
+          children: g.map((t) => /* @__PURE__ */ e(
+            "div",
+            {
+              className: s(
+                "transition-all duration-300",
+                O === t.id && "opacity-50"
+              ),
+              children: w(t, !1)
+            },
+            t.id
+          ))
+        }
+      )
+    ] });
+  }, F = p?.label !== u;
+  return /* @__PURE__ */ r(ie, { open: b, onOpenChange: V, children: [
+    /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: "flex cursor-pointer items-center gap-2 bg-transparent border-none p-0",
+        "aria-expanded": b,
+        "aria-haspopup": "dialog",
+        children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-secondary-foreground font-['Manrope']", children: n("filterStrip.filtersApplied") }),
+          /* @__PURE__ */ r(f, { children: [
+            /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(
+              ue,
+              {
+                color: "primary",
+                variant: "outline",
+                className: "font-['Manrope'] max-w-[140px] inline-block",
+                children: /* @__PURE__ */ e("span", { className: "block truncate", children: u || n("filterStrip.notSelected") })
+              }
+            ) }),
+            /* @__PURE__ */ e(m, { variant: "tertiary", side: "top", children: u || n("filterStrip.notSelected") })
+          ] }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: s(
+                "flex h-8 w-8 items-center justify-center rounded-lg bg-secondary transition-transform duration-200",
+                b && "rotate-180"
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(ee, { className: "h-4 w-4 rotate-90 text-foreground" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      se,
+      {
+        align: "start",
+        className: "w-[280px] p-0 shadow-[0_0_4px_0_rgba(0,0,0,0.12)] overflow-visible",
+        sideOffset: 8,
+        onInteractOutside: (a) => {
+          const d = a.target;
+          (d.closest('[role="dialog"]') || d.closest("[data-radix-dialog-content]")) && a.preventDefault();
+        },
+        children: /* @__PURE__ */ r("div", { className: "flex w-full flex-col py-[8px] px-[6px]", children: [
+          X(),
+          /* @__PURE__ */ r("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ e("div", { className: "px-1 py-[6px] text-xs font-medium text-secondary-foreground font-['Manrope']", children: n("filterStrip.savedFilters") }),
+            /* @__PURE__ */ r(
+              ce,
+              {
+                value: c,
+                onValueChange: (a) => H(a),
+                variant: "outline",
+                size: "sm",
+                className: "w-full px-1",
+                children: [
+                  /* @__PURE__ */ e("div", { className: "py-[8px]", children: /* @__PURE__ */ r(de, { children: [
+                    /* @__PURE__ */ e($, { value: "All", children: "All" }),
+                    /* @__PURE__ */ e($, { value: "Global", children: "Global" }),
+                    /* @__PURE__ */ e($, { value: "Personal", children: "Personal" })
+                  ] }) }),
+                  /* @__PURE__ */ e("div", { className: "pb-[8px]", children: /* @__PURE__ */ e(
+                    pe,
+                    {
+                      prefix: /* @__PURE__ */ e(te, { className: "h-4 w-4 text-gray-500" }),
+                      placeholder: n("filterStrip.searchFiltersPlaceholder"),
+                      value: D,
+                      onChange: J,
+                      className: "h-9 px-1 border-none shadow-none focus-visible:ring-0"
+                    }
+                  ) }),
+                  /* @__PURE__ */ e("div", { className: "mt-0", children: Z() })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(M, { className: "my-2" }),
+          /* @__PURE__ */ r("div", { className: "flex justify-end gap-2 px-3 pb-1", children: [
+            /* @__PURE__ */ e(Q, { variant: "secondary", onClick: W, children: n("prompt.cancel") }),
+            /* @__PURE__ */ e(
+              Q,
+              {
+                variant: "default",
+                onClick: K,
+                disabled: !F,
+                children: n("filterStrip.applyFilter")
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  Ie as FilterSummary
+};

package/dist/components/flows/filter-strip/filter-tag-list.d.ts

@@ -0,0 +1,24 @@
+import { FilterItem } from './filter-strip.types';
+import * as React from "react";
+interface FilterTagListProps {
+    filters: FilterItem[];
+    onFilterRemove: (id: string, value?: string | number) => void;
+    onOverflowClick?: (id: string) => void;
+    onViewAll?: () => void;
+}
+interface ExternalCopyFunctionProps {
+    e: React.MouseEvent<HTMLButtonElement>;
+    val: string | number;
+    index: number;
+}
+declare const FilterPopoverContent: ({ remainingValues, viewAllTrigger, onViewAll, onItemRemove, isRemovable, isCopyable, externalCopyFunction }: {
+    remainingValues: (string | number)[];
+    viewAllTrigger?: "expand" | "custom";
+    onViewAll?: () => void;
+    onItemRemove: (val: string | number) => void;
+    isRemovable?: boolean;
+    isCopyable?: boolean;
+    externalCopyFunction?: (props: ExternalCopyFunctionProps) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const FilterTagList: ({ filters, onFilterRemove: _onFilterRemove, onOverflowClick, onViewAll, }: FilterTagListProps) => import("react/jsx-runtime").JSX.Element;
+export { FilterTagList, FilterPopoverContent };

package/dist/components/flows/filter-strip/filter-tag-list.js

@@ -0,0 +1,183 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as C from "react";
+import { HorizontalScroller as S } from "../../layout/horizontal-scroller/horizontal-scroller.js";
+import { TagGroup as z } from "../../primitives/tag-group/tag-group.js";
+import { Tag as k } from "../../primitives/tag/tag.js";
+import { Tooltip as b, TooltipTrigger as w, TooltipContent as y } from "../../feedback/tooltip/tooltip.js";
+import { Popover as $, PopoverTrigger as O, PopoverContent as j } from "../../feedback/popover/popover.js";
+import { Button as P } from "../../primitives/button/button.js";
+import { Checkmark as A, Copy as R, Cross as F } from "impact-nova-icons";
+const T = "whitespace-nowrap bg-accent text-accent-foreground hover:bg-accent/80 border-0 h-5 px-2 text-xs font-medium font-['Manrope'] cursor-pointer", I = ({
+  remainingValues: n,
+  viewAllTrigger: c = "expand",
+  onViewAll: h,
+  onItemRemove: u,
+  isRemovable: N,
+  isCopyable: r = !1,
+  externalCopyFunction: m
+}) => {
+  const [l, g] = C.useState(!1), [a, d] = C.useState(null), x = (o, i, s) => {
+    navigator.clipboard.writeText(String(i)), d(s), o.currentTarget.blur(), setTimeout(() => d(null), 1500);
+  }, v = l ? n : n.slice(0, 3), f = n.length > 3, p = () => {
+    c === "custom" ? h?.() : g(!0);
+  };
+  return /* @__PURE__ */ e(
+    j,
+    {
+      className: "w-[200px] p-0 rounded-[8px] bg-white shadow-[0_0_4px_0_rgba(0,0,0,0.12)] border-none",
+      align: "start",
+      sideOffset: 8,
+      onOpenAutoFocus: (o) => o.preventDefault(),
+      children: /* @__PURE__ */ t("div", { className: "flex flex-col py-2 px-[6px]", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `flex flex-col gap-1 mb-2 ${l ? "max-h-[180px] overflow-y-auto" : ""}`,
+            children: v.map((o, i) => /* @__PURE__ */ t(
+              "div",
+              {
+                className: "flex items-center justify-between text-[14px] font-medium leading-[20px] text-foreground px-3 py-2 overflow-hidden hover:bg-secondary rounded group shrink-0",
+                children: [
+                  /* @__PURE__ */ t(b, { children: [
+                    /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "truncate", children: String(o) }) }),
+                    /* @__PURE__ */ e(y, { variant: "tertiary", side: "right", children: String(o) })
+                  ] }),
+                  /* @__PURE__ */ t("div", { className: "flex items-center shrink-0", children: [
+                    r && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: (s) => {
+                          s.stopPropagation(), m ? m({ e: s, val: o, index: i }) : x(s, o, i);
+                        },
+                        "aria-label": `Copy ${String(o)}`,
+                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-black/5 hover:text-gray-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
+                        children: a === i ? /* @__PURE__ */ e(A, { size: 12, className: "text-green-500" }) : /* @__PURE__ */ e(R, { size: 12 })
+                      }
+                    ),
+                    N && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: (s) => {
+                          s.stopPropagation(), u(o);
+                        },
+                        "aria-label": `Remove ${String(o)}`,
+                        className: "ms-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-gray-400 hover:bg-black/5 hover:text-gray-600 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity",
+                        children: /* @__PURE__ */ e(F, { size: 12 })
+                      }
+                    )
+                  ] })
+                ]
+              },
+              i
+            ))
+          }
+        ),
+        !l && f && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "h-px bg-stroke-hairline w-full" }),
+          /* @__PURE__ */ e(
+            P,
+            {
+              variant: "secondary",
+              size: "md",
+              className: "w-full justify-center",
+              onClick: p,
+              children: c === "custom" ? "View all" : `View all (${n.length})`
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, G = ({
+  filters: n,
+  onFilterRemove: c,
+  onOverflowClick: h,
+  onViewAll: u
+}) => /* @__PURE__ */ e("div", { className: "flex flex-1 items-center min-w-0", children: /* @__PURE__ */ e(
+  S,
+  {
+    items: n,
+    renderItem: (r, m) => {
+      const l = Array.isArray(r.value) ? r.value : [r.value], g = l.slice(0, 2), a = l.slice(2), d = !!r.overflow, x = r.overflow?.label ? r.overflow.label : r.overflow?.count ? `+${r.overflow.count}` : null, v = a.length > 0, f = d || v, p = `+${a.length}`;
+      return /* @__PURE__ */ t("div", { className: "flex items-center px-1", children: [
+        m > 0 && /* @__PURE__ */ e("div", { className: "mx-3 h-4 w-px bg-stroke-hairline shrink-0" }),
+        /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ t("span", { className: "text-xs font-medium leading-[21px] text-secondary-foreground whitespace-nowrap", children: [
+            r.label,
+            r.required && /* @__PURE__ */ e("span", { className: "text-red-500 ms-0.5", children: "*" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e(
+              z,
+              {
+                spacing: "sm",
+                tags: g.map((o) => ({
+                  label: String(o),
+                  variant: "secondary",
+                  size: "md",
+                  shape: "rounded",
+                  removable: r.removable,
+                  onRemove: () => c(r.id, o)
+                }))
+              }
+            ),
+            f && (d ? /* @__PURE__ */ t(b, { children: [
+              /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
+                k,
+                {
+                  asButton: !0,
+                  variant: "secondary",
+                  size: "md",
+                  shape: "rounded",
+                  className: T,
+                  "aria-label": `${r.overflow?.count || a.length} more filters for ${r.label}`,
+                  onClick: () => h?.(r.id),
+                  children: x || p
+                }
+              ) }),
+              /* @__PURE__ */ t(y, { variant: "tertiary", side: "top", children: [
+                r.overflow?.count || a.length,
+                " more filters"
+              ] })
+            ] }) : /* @__PURE__ */ t($, { children: [
+              /* @__PURE__ */ t(b, { children: [
+                /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ e(
+                  k,
+                  {
+                    asButton: !0,
+                    variant: "secondary",
+                    size: "md",
+                    shape: "rounded",
+                    className: T,
+                    children: p
+                  }
+                ) }) }),
+                /* @__PURE__ */ t(y, { variant: "tertiary", side: "top", children: [
+                  a.length,
+                  " more filters"
+                ] })
+              ] }),
+              /* @__PURE__ */ e(
+                I,
+                {
+                  remainingValues: a,
+                  viewAllTrigger: r.viewAllTrigger,
+                  onViewAll: u,
+                  onItemRemove: (o) => c(r.id, o),
+                  isRemovable: r.removable,
+                  isCopyable: r.copyable
+                }
+              )
+            ] }))
+          ] })
+        ] })
+      ] });
+    },
+    estimateSize: 200,
+    hideScrollbar: !0
+  }
+) });
+export {
+  I as FilterPopoverContent,
+  G as FilterTagList
+};

package/dist/components/flows/filter-strip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './filter-strip';
+export * from './filter-strip.types';

package/dist/components/flows/notification-panel/index.d.ts

@@ -0,0 +1,5 @@
+export * from './notification-panel';
+export { useNotificationContext } from './notification-panel-context';
+export * from './notification-list';
+export * from './notification-item';
+export * from './notification-panel.types';

package/dist/components/flows/notification-panel/index.js

@@ -0,0 +1,21 @@
+import { NotificationPanel as o, NotificationPanelBody as n, NotificationPanelContent as e, NotificationPanelFooter as a, NotificationPanelHeader as f } from "./notification-panel.js";
+import { useNotificationContext as N } from "./notification-panel-context.js";
+import { NotificationEmpty as m, NotificationGroup as p, NotificationList as I } from "./notification-list.js";
+import { NotificationItem as x, NotificationItemActions as P, NotificationItemContent as s, NotificationItemDescription as C, NotificationItemIcon as d, NotificationItemTitle as u } from "./notification-item.js";
+export {
+  m as NotificationEmpty,
+  p as NotificationGroup,
+  x as NotificationItem,
+  P as NotificationItemActions,
+  s as NotificationItemContent,
+  C as NotificationItemDescription,
+  d as NotificationItemIcon,
+  u as NotificationItemTitle,
+  I as NotificationList,
+  o as NotificationPanel,
+  n as NotificationPanelBody,
+  e as NotificationPanelContent,
+  a as NotificationPanelFooter,
+  f as NotificationPanelHeader,
+  N as useNotificationContext
+};

package/dist/components/flows/notification-panel/notification-item.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { NotificationItemProps } from './notification-panel.types';
+export declare const NotificationItem: ({ children, className, read, selected, onSelect, selectable, ...props }: NotificationItemProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItemIcon: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItemContent: ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItemTitle: ({ className, children, ml, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    ml?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItemDescription: ({ className, children, isTime, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+    isTime?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItemActions: ({ className, children, alwaysVisible, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    alwaysVisible?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;