@nexub/react 5.4.0 → 5.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.4.0",
+  "version": "5.5.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",
@@ -399,6 +399,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "filter-builder",
+      "name": "Filter Builder",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": [
+        "Field, condition and value controls are labelled; remove buttons say what they remove."
+      ]
+    },
     {
       "slug": "filter-chip",
       "name": "Filter Chip",
@@ -839,6 +850,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "saved-views",
+      "name": "Saved Views",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "scroll-area",
       "name": "Scroll Area",

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -2,6 +2,13 @@ import * as React from 'react';
 import { type DateRange } from 'react-day-picker';
 import type { Locale } from 'date-fns';
 export type { DateRange };
+export interface DateRangePreset {
+    label: string;
+    /** `today` is the current date in the picker's time zone (midnight, local Date). */
+    range: (today: Date) => DateRange;
+}
+/** Today's calendar date in `timeZone`, as a local midnight Date. */
+export declare function todayIn(timeZone?: string, now?: Date): Date;
 export interface DateRangePickerProps {
     value?: DateRange;
     onChange?: (range: DateRange | undefined) => void;
@@ -16,5 +23,15 @@ export interface DateRangePickerProps {
     'aria-label'?: string;
     /** date-fns Locale for the calendar and trigger text; wins over NexubProvider's `dateLocale`. */
     locale?: Locale;
+    /**
+     * Quick ranges beside the calendar. `true` shows Today, Last 7 days,
+     * Last 30 days, Month to date and Last month; or pass your own.
+     */
+    presets?: boolean | DateRangePreset[];
+    /**
+     * IANA time zone the dates mean, e.g. 'Europe/London'. Shown under the
+     * calendar, and presets count "today" there.
+     */
+    timeZone?: string;
 }
 export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -5,10 +5,22 @@ import * as RadixPopover from "@radix-ui/react-popover";
 import { DayPicker } from "react-day-picker";
 import { CalendarDays } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
-import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { useCalendarLocale } from "../DatePicker/DatePicker.js";
 import { field, fieldFocusVisible } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
+function todayIn(timeZone, now = /* @__PURE__ */ new Date()) {
+  if (!timeZone) return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  }).formatToParts(now);
+  const get = (t) => Number(parts.find((p) => p.type === t)?.value);
+  return new Date(get("year"), get("month") - 1, get("day"));
+}
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
 function formatRange(range, placeholder, formatDate) {
   if (!range) return placeholder;
   if (range.from && range.to) {
@@ -51,79 +63,119 @@ const calendarClassNames = {
   disabled: "",
   hidden: "invisible"
 };
-const DateRangePicker = React.forwardRef(function DateRangePicker2({
-  value,
-  onChange,
-  placeholder: placeholderProp,
-  disabled = false,
-  minDate,
-  maxDate,
-  className,
-  id,
-  "aria-label": ariaLabel,
-  locale: localeProp
-}, ref) {
-  const [open, setOpen] = React.useState(false);
-  const messages = useNexubMessages();
-  const calendar = useCalendarLocale(localeProp);
-  const placeholder = placeholderProp ?? messages.pickDateRange;
-  const display = formatRange(value, placeholder, calendar.format);
-  const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
-  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      "button",
+const DateRangePicker = React.forwardRef(
+  function DateRangePicker2({
+    value,
+    onChange,
+    placeholder: placeholderProp,
+    disabled = false,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    locale: localeProp,
+    presets: presetsProp,
+    timeZone
+  }, ref) {
+    const [open, setOpen] = React.useState(false);
+    const messages = useNexubMessages();
+    const { locale } = useLocale();
+    const presets = presetsProp === true ? [
+      { label: messages.today, range: (t) => ({ from: t, to: t }) },
+      { label: messages.last7Days, range: (t) => ({ from: addDays(t, -6), to: t }) },
+      { label: messages.last30Days, range: (t) => ({ from: addDays(t, -29), to: t }) },
       {
-        ref,
-        id,
-        disabled,
-        "aria-label": label,
-        className: cn(
-          "inline-flex h-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
-          field,
-          fieldFocusVisible,
-          // Open reads like focus: the 2px primary border (as Select).
-          "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
-          "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
-          !value && "text-[var(--color-on-surface-muted)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
-          display
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
-      RadixPopover.Content,
+        label: messages.monthToDate,
+        range: (t) => ({ from: new Date(t.getFullYear(), t.getMonth(), 1), to: t })
+      },
       {
-        align: "start",
-        className: cn(
-          "z-[var(--z-popover)] outline-none",
-          floatingSurface,
-          "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
-        ),
-        children: /* @__PURE__ */ jsx(
-          DayPicker,
-          {
-            mode: "range",
-            selected: value,
-            defaultMonth: value?.from,
-            onSelect: onChange,
-            numberOfMonths: 2,
-            startMonth: minDate,
-            endMonth: maxDate,
-            autoFocus: true,
-            showOutsideDays: false,
-            className: "relative p-3",
-            classNames: calendarClassNames,
-            ...calendar.dayPickerProps
-          }
-        )
+        label: messages.lastMonth,
+        range: (t) => ({
+          from: new Date(t.getFullYear(), t.getMonth() - 1, 1),
+          to: new Date(t.getFullYear(), t.getMonth(), 0)
+        })
       }
-    ) })
-  ] });
-});
+    ] : presetsProp || [];
+    const zoneName = timeZone ? new Intl.DateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" }).formatToParts(/* @__PURE__ */ new Date()).find((p) => p.type === "timeZoneName")?.value ?? timeZone : void 0;
+    const calendar = useCalendarLocale(localeProp);
+    const placeholder = placeholderProp ?? messages.pickDateRange;
+    const display = formatRange(value, placeholder, calendar.format);
+    const label = ariaLabel ? `${ariaLabel}: ${display}` : display;
+    return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          id,
+          disabled,
+          "aria-label": label,
+          className: cn(
+            "inline-flex h-control-md w-full items-center justify-start gap-2 px-3.5 text-body-md",
+            field,
+            fieldFocusVisible,
+            // Open reads like focus: the 2px primary border (as Select).
+            "data-[state=open]:border-[var(--color-primary)] data-[state=open]:shadow-[inset_0_0_0_1px_var(--color-primary)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--color-outline-variant)] disabled:bg-[var(--color-surface-container-low)] disabled:text-[var(--color-text-disabled)]",
+            !value && "text-[var(--color-on-surface-muted)]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarDays, { size: "sm", "aria-hidden": "true" }),
+            display
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(
+        RadixPopover.Content,
+        {
+          align: "start",
+          className: cn(
+            "z-[var(--z-popover)] outline-none",
+            floatingSurface,
+            "nx-motion nx-pop origin-[var(--radix-popover-content-transform-origin)]"
+          ),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+            presets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-1 border-b border-[var(--color-outline-variant)] p-2 sm:flex-col sm:flex-nowrap sm:border-b-0 sm:border-e", children: presets.map((p) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nx-state-layer w-full rounded-shape-control px-3 py-1.5 text-start text-body-sm text-[var(--color-on-surface)]",
+                onClick: () => {
+                  onChange?.(p.range(todayIn(timeZone)));
+                  setOpen(false);
+                },
+                children: p.label
+              }
+            ) }, p.label)) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(
+                DayPicker,
+                {
+                  mode: "range",
+                  selected: value,
+                  defaultMonth: value?.from,
+                  onSelect: onChange,
+                  numberOfMonths: 2,
+                  startMonth: minDate,
+                  endMonth: maxDate,
+                  autoFocus: true,
+                  showOutsideDays: false,
+                  className: "relative p-3",
+                  classNames: calendarClassNames,
+                  ...calendar.dayPickerProps
+                }
+              ),
+              zoneName && /* @__PURE__ */ jsx("p", { className: "px-4 pb-3 text-label-sm text-[var(--color-on-surface-muted)]", children: messages.timeZoneLabel(`${zoneName} (${timeZone})`) })
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
 DateRangePicker.displayName = "DateRangePicker";
 export {
-  DateRangePicker
+  DateRangePicker,
+  todayIn
 };

package/dist/components/DateRangePicker/index.d.ts

@@ -1,2 +1,3 @@
 export { DateRangePicker } from './DateRangePicker.js';
-export type { DateRangePickerProps, DateRange } from './DateRangePicker.js';
+export { todayIn } from './DateRangePicker.js';
+export type { DateRangePickerProps, DateRange, DateRangePreset } from './DateRangePicker.js';

package/dist/components/DateRangePicker/index.js

@@ -1,4 +1,6 @@
 import { DateRangePicker } from "./DateRangePicker.js";
+import { todayIn } from "./DateRangePicker.js";
 export {
-  DateRangePicker
+  DateRangePicker,
+  todayIn
 };

package/dist/components/FilterBuilder/FilterBuilder.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { NexubMessages } from '@nexub/core';
+export type FilterFieldType = 'text' | 'number' | 'select' | 'date';
+export type FilterOperator = keyof NexubMessages['filterOperators'];
+export interface FilterField {
+    id: string;
+    label: string;
+    type: FilterFieldType;
+    /** Choices for `type: 'select'`. */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+export interface FilterRule {
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    /** Always a string (dates as YYYY-MM-DD), so the query serialises as-is. */
+    value: string;
+}
+export interface FilterGroup {
+    id: string;
+    combinator: 'and' | 'or';
+    rules: Array<FilterRule | FilterGroup>;
+}
+/** Operators offered for each field type, in menu order. */
+export declare const filterOperators: Record<FilterFieldType, FilterOperator[]>;
+export declare const isFilterGroup: (r: FilterRule | FilterGroup) => r is FilterGroup;
+/** An empty top-level group, a starting `value`. */
+export declare const emptyFilter: () => FilterGroup;
+/** Rules with a field, operator and (unless "is empty") a value. Counts nested groups too. */
+export declare function countFilters(group: FilterGroup): number;
+export interface FilterBuilderProps {
+    fields: FilterField[];
+    value?: FilterGroup;
+    defaultValue?: FilterGroup;
+    onValueChange?: (value: FilterGroup) => void;
+    /** How many levels of nested groups "Add group" may create. Default 1; 0 hides it. */
+    maxDepth?: number;
+    className?: string;
+}
+/**
+ * Builds an AND/OR filter query as plain JSON. Nexub doesn't run it: send it
+ * to your API or evaluate it yourself.
+ */
+export declare function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange, maxDepth, className }: FilterBuilderProps): React.JSX.Element;
+export declare namespace FilterBuilder {
+    var displayName: string;
+}

package/dist/components/FilterBuilder/FilterBuilder.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Plus, X } from "@nexub/icons";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Input } from "../Input/Input.js";
+import { Select } from "../Select/Select.js";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+const filterOperators = {
+  text: ["contains", "equals", "notEquals", "startsWith", "isEmpty"],
+  number: ["equals", "notEquals", "greaterThan", "lessThan"],
+  select: ["equals", "notEquals"],
+  date: ["equals", "before", "after"]
+};
+const isFilterGroup = (r) => "rules" in r;
+let seq = 0;
+const uid = () => `f${(++seq).toString(36)}${Math.random().toString(36).slice(2, 6)}`;
+const emptyFilter = () => ({ id: uid(), combinator: "and", rules: [] });
+function countFilters(group) {
+  return group.rules.reduce(
+    (n, r) => n + (isFilterGroup(r) ? countFilters(r) : r.operator === "isEmpty" || r.value !== "" ? 1 : 0),
+    0
+  );
+}
+function FilterBuilder({ fields, value: valueProp, defaultValue, onValueChange, maxDepth = 1, className }) {
+  const [value = emptyFilter(), setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? emptyFilter(),
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(
+    GroupView,
+    {
+      group: value,
+      fields,
+      depth: 0,
+      maxDepth,
+      onChange: setValue,
+      className
+    }
+  );
+}
+FilterBuilder.displayName = "FilterBuilder";
+function GroupView({ group, fields, depth, maxDepth, onChange, onRemove, className }) {
+  const t = useNexubMessages();
+  const first = fields[0];
+  const setRules = (rules) => onChange({ ...group, rules });
+  const newRule = () => ({
+    id: uid(),
+    field: first?.id ?? "",
+    operator: filterOperators[first?.type ?? "text"][0],
+    value: ""
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": t.filterGroup(group.combinator),
+      className: cn(
+        "flex flex-col gap-2",
+        depth > 0 && "rounded-shape-container border border-[var(--color-outline-variant)] p-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            SegmentedControl.Root,
+            {
+              size: "sm",
+              "aria-label": t.filterGroup(group.combinator),
+              value: group.combinator,
+              onValueChange: (v) => v && onChange({ ...group, combinator: v }),
+              children: [
+                /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "and", children: t.matchAll }),
+                /* @__PURE__ */ jsx(SegmentedControl.Item, { value: "or", children: t.matchAny })
+              ]
+            }
+          ),
+          onRemove && /* @__PURE__ */ jsx(IconButton, { label: t.removeGroup, variant: "ghost", size: "sm", className: "ms-auto", onClick: onRemove, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
+        ] }),
+        group.rules.map((r, i) => {
+          const replace = (next) => setRules(group.rules.map((x, j) => j === i ? next : x));
+          const remove = () => setRules(group.rules.filter((_, j) => j !== i));
+          return isFilterGroup(r) ? /* @__PURE__ */ jsx(GroupView, { group: r, fields, depth: depth + 1, maxDepth, onChange: replace, onRemove: remove }, r.id) : /* @__PURE__ */ jsx(RuleRow, { rule: r, fields, onChange: replace, onRemove: remove }, r.id);
+        }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setRules([...group.rules, newRule()]), disabled: !first, children: [
+            /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+            t.addFilter
+          ] }),
+          depth < maxDepth && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setRules([...group.rules, { id: uid(), combinator: "and", rules: [newRule()] }]),
+              disabled: !first,
+              children: [
+                /* @__PURE__ */ jsx(Plus, { size: "sm", "aria-hidden": "true" }),
+                t.addGroup
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function RuleRow({
+  rule,
+  fields,
+  onChange,
+  onRemove
+}) {
+  const t = useNexubMessages();
+  const field = fields.find((f) => f.id === rule.field) ?? fields[0];
+  const ops = filterOperators[field?.type ?? "text"];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Select.Root,
+      {
+        value: field?.id,
+        onValueChange: (id) => {
+          const f = fields.find((x) => x.id === id);
+          const nextOps = filterOperators[f?.type ?? "text"];
+          onChange({ ...rule, field: id, operator: nextOps.includes(rule.operator) ? rule.operator : nextOps[0], value: "" });
+        },
+        children: [
+          /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterField, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+          /* @__PURE__ */ jsx(Select.Content, { children: fields.map((f) => /* @__PURE__ */ jsx(Select.Item, { value: f.id, children: f.label }, f.id)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Select.Root, { value: rule.operator, onValueChange: (op) => onChange({ ...rule, operator: op }), children: [
+      /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterOperator, className: "w-auto min-w-32", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+      /* @__PURE__ */ jsx(Select.Content, { children: ops.map((op) => /* @__PURE__ */ jsx(Select.Item, { value: op, children: t.filterOperators[op] }, op)) })
+    ] }),
+    rule.operator !== "isEmpty" && (field?.type === "select" ? /* @__PURE__ */ jsxs(Select.Root, { value: rule.value || void 0, onValueChange: (v) => onChange({ ...rule, value: v }), children: [
+      /* @__PURE__ */ jsx(Select.Trigger, { "aria-label": t.filterValue, className: "w-auto min-w-36", children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+      /* @__PURE__ */ jsx(Select.Content, { children: field.options?.map((o) => /* @__PURE__ */ jsx(Select.Item, { value: o.value, children: o.label }, o.value)) })
+    ] }) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": t.filterValue,
+        type: field?.type === "number" ? "number" : field?.type === "date" ? "date" : "text",
+        value: rule.value,
+        onChange: (e) => onChange({ ...rule, value: e.target.value }),
+        wrapperClassName: "w-auto min-w-36 flex-1"
+      }
+    )),
+    /* @__PURE__ */ jsx(IconButton, { label: t.removeFilter, variant: "ghost", size: "sm", onClick: onRemove, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
+  ] });
+}
+export {
+  FilterBuilder,
+  countFilters,
+  emptyFilter,
+  filterOperators,
+  isFilterGroup
+};

package/dist/components/FilterBuilder/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterBuilder, filterOperators, isFilterGroup, emptyFilter, countFilters } from './FilterBuilder.js';
+export type { FilterBuilderProps, FilterField, FilterFieldType, FilterOperator, FilterRule, FilterGroup } from './FilterBuilder.js';

package/dist/components/FilterBuilder/index.js

@@ -0,0 +1,8 @@
+import { FilterBuilder, filterOperators, isFilterGroup, emptyFilter, countFilters } from "./FilterBuilder.js";
+export {
+  FilterBuilder,
+  countFilters,
+  emptyFilter,
+  filterOperators,
+  isFilterGroup
+};

package/dist/components/SavedViews/SavedViews.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export interface SavedView {
+    id: string;
+    name: string;
+}
+export interface SavedViewsProps {
+    views: SavedView[];
+    /** The view in use; its name shows on the button. */
+    activeId?: string;
+    onSelect: (id: string) => void;
+    /** "Save as new view…": asks for a name, then calls this. Your app stores the view. */
+    onSave?: (name: string) => void;
+    /** "Update ‹view›": overwrite the active view with the current filters. */
+    onUpdate?: (id: string) => void;
+    /** "Delete ‹view›": remove the active view. */
+    onDelete?: (id: string) => void;
+    className?: string;
+}
+/**
+ * A menu of saved filter views. UI only: your app keeps the views and what
+ * each one restores (filters, sort, columns).
+ */
+export declare function SavedViews({ views, activeId, onSelect, onSave, onUpdate, onDelete, className }: SavedViewsProps): React.JSX.Element;
+export declare namespace SavedViews {
+    var displayName: string;
+}

package/dist/components/SavedViews/SavedViews.js

@@ -0,0 +1,65 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Bookmark, ChevronDown } from "@nexub/icons";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+import { Button } from "../Button/Button.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { Dialog } from "../Dialog/Dialog.js";
+import { Input } from "../Input/Input.js";
+function SavedViews({ views, activeId, onSelect, onSave, onUpdate, onDelete, className }) {
+  const t = useNexubMessages();
+  const [naming, setNaming] = React.useState(false);
+  const [name, setName] = React.useState("");
+  const active = views.find((v) => v.id === activeId);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
+        /* @__PURE__ */ jsx(Bookmark, { size: "sm", "aria-hidden": "true" }),
+        active?.name ?? t.views,
+        /* @__PURE__ */ jsx(ChevronDown, { size: "sm", "aria-hidden": "true" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "start", children: [
+        views.length > 0 && /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: activeId ?? "", onValueChange: onSelect, children: views.map((v) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: v.id, children: v.name }, v.id)) }),
+        views.length > 0 && (onSave || active && (onUpdate || onDelete)) && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+        onSave && /* @__PURE__ */ jsx(
+          DropdownMenu.Item,
+          {
+            onSelect: () => {
+              setName("");
+              setNaming(true);
+            },
+            children: t.saveView
+          }
+        ),
+        active && onUpdate && /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => onUpdate(active.id), children: t.updateView(active.name) }),
+        active && onDelete && /* @__PURE__ */ jsx(DropdownMenu.Item, { onSelect: () => onDelete(active.id), className: "text-[var(--color-error)]", children: t.deleteView(active.name) })
+      ] })
+    ] }),
+    onSave && /* @__PURE__ */ jsx(Dialog.Root, { open: naming, onOpenChange: setNaming, children: /* @__PURE__ */ jsx(Dialog.Content, { className: "max-w-sm", children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          const n = name.trim();
+          if (!n) return;
+          onSave(n);
+          setNaming(false);
+        },
+        className: "flex flex-col gap-4",
+        children: [
+          /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: t.saveView.replace(/…$/, "") }) }),
+          /* @__PURE__ */ jsx(Input, { "aria-label": t.viewName, placeholder: t.viewName, value: name, onChange: (e) => setName(e.target.value), autoFocus: true }),
+          /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+            /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", children: t.cancel }) }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !name.trim(), children: t.save })
+          ] })
+        ]
+      }
+    ) }) })
+  ] });
+}
+SavedViews.displayName = "SavedViews";
+export {
+  SavedViews
+};

package/dist/components/SavedViews/index.d.ts

@@ -0,0 +1,2 @@
+export { SavedViews } from './SavedViews.js';
+export type { SavedViewsProps, SavedView } from './SavedViews.js';

package/dist/components/SavedViews/index.js

@@ -0,0 +1,4 @@
+import { SavedViews } from "./SavedViews.js";
+export {
+  SavedViews
+};

package/dist/index.d.ts

@@ -161,6 +161,10 @@ export { Combobox } from './components/Combobox/index.js';
 export { Autocomplete } from './components/Autocomplete/index.js';
 export type { AutocompleteOption, AutocompleteProps } from './components/Autocomplete/index.js';
 export { MultiSelect } from './components/MultiSelect/index.js';
+export { FilterBuilder, filterOperators, isFilterGroup, emptyFilter, countFilters } from './components/FilterBuilder/index.js';
+export type { FilterBuilderProps, FilterField, FilterFieldType, FilterOperator, FilterRule, FilterGroup } from './components/FilterBuilder/index.js';
+export { SavedViews } from './components/SavedViews/index.js';
+export type { SavedViewsProps, SavedView } from './components/SavedViews/index.js';
 export type { MultiSelectOption, MultiSelectProps } from './components/MultiSelect/index.js';
 export { Switch } from './components/Switch/index.js';
 export type { SwitchProps } from './components/Switch/index.js';
@@ -209,7 +213,8 @@ export type { FileUploadRootProps, FileRejection } from './components/FileUpload
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';
 export { DateRangePicker } from './components/DateRangePicker/index.js';
-export type { DateRangePickerProps, DateRange } from './components/DateRangePicker/index.js';
+export { todayIn } from './components/DateRangePicker/index.js';
+export type { DateRangePickerProps, DateRange, DateRangePreset } from './components/DateRangePicker/index.js';
 export { ThemeProvider, ThemeScript, useTheme } from './components/ThemeProvider/index.js';
 export type { ThemeMode, GlassMode, ThemeContextValue, ThemeProviderProps, ThemeScriptProps } from './components/ThemeProvider/index.js';
 export { Fade, Slide, Scale, Collapse, ListTransition, SkeletonSwap, usePrefersReducedMotion, Reveal, Float, Marquee } from './components/Motion/index.js';