@officina/ui 0.1.0

package/dist/DateRangeFilterCalendar-D3ZM42SZ.js

@@ -0,0 +1,19 @@
+import { dayPickerClassNames } from './chunk-GE4PQEOQ.js';
+import { DayPicker } from 'react-day-picker';
+import { jsx } from 'react/jsx-runtime';
+
+function DateRangeFilterCalendar({ value, onChange }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      mode: "range",
+      resetOnSelect: true,
+      selected: value,
+      onSelect: (range) => onChange(range ?? { from: void 0, to: void 0 }),
+      numberOfMonths: 2,
+      classNames: dayPickerClassNames
+    }
+  ) });
+}
+
+export { DateRangeFilterCalendar };

package/dist/FilterGroupEditor-BHVNQUZG.js

@@ -0,0 +1 @@
+export { FilterGroupEditor } from './chunk-BNEIT5XY.js';

package/dist/FilterGroupEditorPanel-KC6INLHT.js

@@ -0,0 +1,129 @@
+import { useFiltersContext, Select, Button, isGroup, FilterBuilder, DEFAULT_OPERATOR, defaultValueForOperator } from './chunk-LMM3LYFT.js';
+import { nanoid } from 'nanoid';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var makeCondition = (fields) => {
+  const field = fields[0];
+  if (!field) return null;
+  const op = field.operators?.[0] ?? DEFAULT_OPERATOR[field.type];
+  return {
+    id: nanoid(),
+    field: field.id,
+    op,
+    value: defaultValueForOperator(op, field)
+  };
+};
+var updateGroupById = (group, id, update) => {
+  if (group.id === id) return update(group);
+  return {
+    ...group,
+    conditions: group.conditions.map(
+      (node) => isGroup(node) ? updateGroupById(node, id, update) : node
+    )
+  };
+};
+function GroupNode({
+  group,
+  fields,
+  depth,
+  maxDepth,
+  root
+}) {
+  const filters = useFiltersContext();
+  const canNest = depth + 1 < maxDepth;
+  const updateGroup = (update) => {
+    filters.setState((state) => ({
+      root: updateGroupById(state.root, group.id, update)
+    }));
+  };
+  const addCondition = () => {
+    const condition = makeCondition(fields);
+    if (!condition) return;
+    updateGroup((current) => ({
+      ...current,
+      conditions: [...current.conditions, condition]
+    }));
+  };
+  const addGroup = () => {
+    const condition = makeCondition(fields);
+    const nested = {
+      id: nanoid(),
+      combinator: group.combinator === "AND" ? "OR" : "AND",
+      conditions: condition ? [condition] : []
+    };
+    updateGroup((current) => ({
+      ...current,
+      conditions: [...current.conditions, nested]
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: root ? "space-y-3" : "space-y-3 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-subtle)] p-3",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: group.combinator,
+              onChange: (event) => updateGroup((current) => ({
+                ...current,
+                combinator: event.target.value
+              })),
+              "aria-label": root ? "Root filter combinator" : "Group filter combinator",
+              className: "h-8 w-24 text-xs",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "AND", children: "AND" }),
+                /* @__PURE__ */ jsx("option", { value: "OR", children: "OR" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "xs", onClick: addCondition, disabled: fields.length === 0, children: "Add rule" }),
+          canNest ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: addGroup, disabled: fields.length === 0, children: "Add group" }) : null,
+          !root ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onClick: () => filters.removeCondition(group.id), children: "Remove group" }) : null
+        ] }),
+        group.conditions.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-md border border-dashed border-[var(--color-border)] px-3 py-4 text-sm text-[var(--color-fg-subtle)]", children: "No rules in this group" }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: group.conditions.map(
+          (node) => isGroup(node) ? /* @__PURE__ */ jsx(
+            GroupNode,
+            {
+              group: node,
+              fields,
+              depth: depth + 1,
+              maxDepth,
+              root: false
+            },
+            node.id
+          ) : /* @__PURE__ */ jsx(
+            FilterBuilder,
+            {
+              condition: node,
+              fields,
+              onChange: filters.updateCondition,
+              onRemove: filters.removeCondition
+            },
+            node.id
+          )
+        ) })
+      ]
+    }
+  );
+}
+function FilterGroupEditorPanel({
+  fields,
+  maxDepth = 2
+}) {
+  const filters = useFiltersContext();
+  const actualFields = fields ?? filters.fields;
+  return /* @__PURE__ */ jsx(
+    GroupNode,
+    {
+      group: filters.state.root,
+      fields: actualFields,
+      depth: 0,
+      maxDepth,
+      root: true
+    }
+  );
+}
+
+export { FilterGroupEditorPanel };

package/dist/chunk-BNEIT5XY.js

@@ -0,0 +1,23 @@
+import { lazy, Suspense } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var LazyFilterGroupEditorPanel = lazy(
+  () => import('./FilterGroupEditorPanel-KC6INLHT.js').then((module) => ({ default: module.FilterGroupEditorPanel }))
+);
+function FilterGroupEditor(props) {
+  return /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-busy": "true",
+          className: "h-28 rounded-md border border-dashed border-[var(--color-border)] bg-[var(--color-bg-subtle)]"
+        }
+      ),
+      children: /* @__PURE__ */ jsx(LazyFilterGroupEditorPanel, { ...props })
+    }
+  );
+}
+
+export { FilterGroupEditor };

package/dist/chunk-GE4PQEOQ.js

@@ -0,0 +1,27 @@
+// src/components/primitives/DatePicker/dayPickerStyles.ts
+var dayPickerClassNames = {
+  root: "relative w-full text-[var(--color-fg-base)]",
+  months: "pt-9 flex flex-col gap-4 sm:flex-row sm:gap-5",
+  month: "w-full space-y-3",
+  month_caption: "flex h-8 items-center justify-center",
+  caption_label: "text-base font-semibold tracking-tight text-[var(--color-fg-base)]",
+  nav: "absolute right-0 top-0 flex items-center gap-1",
+  button_previous: "inline-flex size-8 items-center justify-center rounded-md border border-transparent text-[var(--color-accent)] transition-colors duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/30",
+  button_next: "inline-flex size-8 items-center justify-center rounded-md border border-transparent text-[var(--color-accent)] transition-colors duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/30",
+  month_grid: "w-full border-collapse",
+  weekdays: "mt-2 grid grid-cols-7",
+  weekday: "py-1 text-center text-xs font-medium text-[var(--color-fg-muted)]",
+  weeks: "block",
+  week: "mt-1 grid grid-cols-7",
+  day: "flex items-center justify-center p-0",
+  day_button: "inline-flex size-9 items-center justify-center rounded-full text-sm text-[var(--color-fg-base)] transition-colors duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]/30",
+  selected: "bg-[var(--color-accent)] text-[var(--color-accent-contrast)] hover:bg-[var(--color-accent)] focus-visible:ring-[var(--color-accent)]/40",
+  today: "font-semibold ring-1 ring-[var(--color-accent)]/45",
+  outside: "text-[var(--color-fg-muted)]/45",
+  disabled: "cursor-not-allowed text-[var(--color-fg-muted)]/30 hover:bg-transparent",
+  range_middle: "bg-[var(--color-accent)]/14 [&>.rdp-day_button]:rounded-none [&>.rdp-day_button]:bg-transparent [&>.rdp-day_button]:text-[var(--color-fg-base)]",
+  range_start: "bg-[var(--color-accent)]/14 [&>.rdp-day_button]:rounded-full [&>.rdp-day_button]:bg-[var(--color-accent)] [&>.rdp-day_button]:text-[var(--color-accent-contrast)]",
+  range_end: "bg-[var(--color-accent)]/14 [&>.rdp-day_button]:rounded-full [&>.rdp-day_button]:bg-[var(--color-accent)] [&>.rdp-day_button]:text-[var(--color-accent-contrast)]"
+};
+
+export { dayPickerClassNames };