@arbidocs/blocks 0.4.32 → 0.4.33

package/dist/facts/FactsToolbar.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type FactsFilterInputLabels, type FactsFilterInputTestIds, type FactsSearchField } from './FactsFilterInput';
+import { type FilterInputLabels, type FilterInputTestIds, type FilterField } from '../shell/FilterInput';
 import { type FactsViewMode, type FactsViewToggleLabels } from './FactsViewToggle';
 export interface FactsToolbarLabels {
     tags: string;
@@ -20,8 +20,8 @@ export interface FactsToolbarProps {
     hasActiveFilters: boolean;
     filterText: string;
     onFilterTextChange: (text: string) => void;
-    searchFields: FactsSearchField[];
-    onSearchFieldsChange: (fields: FactsSearchField[]) => void;
+    searchFields: FilterField[];
+    onSearchFieldsChange: (fields: FilterField[]) => void;
     /** The quick-filter dropdown, embedded inside the filter box. */
     quickFilter?: ReactNode;
     /** Open the Labels panel. Omit it to hide the Tags button. */
@@ -40,8 +40,8 @@ export interface FactsToolbarProps {
     labels?: Partial<FactsToolbarLabels>;
     testIds?: Partial<FactsToolbarTestIds>;
     /** Overrides for the embedded filter box. */
-    filterLabels?: Partial<FactsFilterInputLabels>;
-    filterTestIds?: Partial<FactsFilterInputTestIds>;
+    filterLabels?: Partial<FilterInputLabels>;
+    filterTestIds?: Partial<FilterInputTestIds>;
     /** Overrides for the embedded view toggle. */
     viewToggleLabels?: Partial<FactsViewToggleLabels>;
     viewToggleTestIdPrefix?: string;

package/dist/facts/index.cjs

@@ -2,10 +2,11 @@
 'use strict';
 
 var chunkZPERNIMP_cjs = require('../chunk-ZPERNIMP.cjs');
-var chunkVPPX5XUF_cjs = require('../chunk-VPPX5XUF.cjs');
 var chunkOUW6G4O2_cjs = require('../chunk-OUW6G4O2.cjs');
-var chunkJGZTRLKL_cjs = require('../chunk-JGZTRLKL.cjs');
-var chunk5B4PXAKI_cjs = require('../chunk-5B4PXAKI.cjs');
+var chunkVPPX5XUF_cjs = require('../chunk-VPPX5XUF.cjs');
+var chunkIA7RTPT3_cjs = require('../chunk-IA7RTPT3.cjs');
+var chunkMZL67U2E_cjs = require('../chunk-MZL67U2E.cjs');
+var chunk6DNYPLCD_cjs = require('../chunk-6DNYPLCD.cjs');
 require('../chunk-FX3K6LNZ.cjs');
 var chunkPPCATBOY_cjs = require('../chunk-PPCATBOY.cjs');
 require('../chunk-C54XEN5T.cjs');
@@ -512,7 +513,7 @@ function FactsTable({
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkJGZTRLKL_cjs.GridView,
+    chunkIA7RTPT3_cjs.GridView,
     {
       testId,
       items: facts,
@@ -1322,111 +1323,6 @@ function FactsViewToggle({
     }
   );
 }
-var FACTS_SEARCH_FIELD_OPTIONS = [
-  { value: "text", label: "Fact" },
-  { value: "labels", label: "Labels" }
-];
-var DEFAULT_FACTS_FILTER_INPUT_LABELS = {
-  placeholder: "Filter...",
-  clear: "Clear filter",
-  chooseFields: "Choose fields to filter",
-  fieldsHeading: "Filter fields",
-  fieldNames: { text: "Fact", labels: "Labels" }
-};
-function FactsFilterInput({
-  value,
-  onChange,
-  fields,
-  onFieldsChange,
-  filter,
-  className,
-  labels,
-  testIds
-}) {
-  const l = { ...DEFAULT_FACTS_FILTER_INPUT_LABELS, ...labels };
-  const toggleField = (field) => onFieldsChange(fields.includes(field) ? fields.filter((f) => f !== field) : [...fields, field]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: ui.cn("flex min-w-0 items-center", className ?? "w-44 pointer-coarse:w-56"),
-      "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.root, { testId: "facts-filter" }),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [
-        filter ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "absolute left-1 top-1/2 z-10 -translate-y-1/2",
-            "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.quick, { testId: "facts-filter-quick" }),
-            children: filter
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Input,
-          {
-            value,
-            onChange: (e) => onChange(e.target.value),
-            placeholder: l.placeholder,
-            "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.input, { testId: "facts-filter-input" }),
-            className: ui.cn(
-              "h-7 bg-muted pr-12 text-sm shadow-none focus-visible:bg-muted focus-visible:ring-0 pointer-coarse:h-11 pointer-coarse:pr-24",
-              filter ? "pl-11" : "pl-7"
-            )
-          }
-        ),
-        value && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onChange(""),
-            "aria-label": l.clear,
-            className: "absolute right-7 top-1/2 z-10 -translate-y-1/2 text-muted-foreground hover:text-foreground pointer-coarse:right-11 pointer-coarse:flex pointer-coarse:size-11 pointer-coarse:items-center pointer-coarse:justify-center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": l.chooseFields,
-              "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.fieldsButton, {
-                testId: "facts-filter-fields-button"
-              }),
-              className: "absolute right-1.5 top-1/2 z-10 -translate-y-1/2 !h-5 !w-5 !p-0 text-muted-foreground/60 transition-colors hover:text-foreground pointer-coarse:right-0 pointer-coarse:!flex pointer-coarse:!h-11 pointer-coarse:!w-11 pointer-coarse:items-center pointer-coarse:justify-center",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "size-3.5" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverContent, { className: "w-44 p-0", align: "end", sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Command, { shouldFilter: false, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CommandList, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CommandGroup, { heading: l.fieldsHeading, children: FACTS_SEARCH_FIELD_OPTIONS.map((option) => {
-            const isSelected = fields.includes(option.value);
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              ui.CommandItem,
-              {
-                onSelect: () => toggleField(option.value),
-                className: "cursor-pointer text-sm",
-                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.field?.(option.value), {
-                  testId: `facts-filter-field-${option.value}`
-                }),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: ui.cn(
-                        "mr-2 flex size-3.5 items-center justify-center rounded-sm border border-primary",
-                        isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3" })
-                    }
-                  ),
-                  l.fieldNames[option.value]
-                ]
-              },
-              option.value
-            );
-          }) }) }) }) })
-        ] })
-      ] })
-    }
-  );
-}
 var DEFAULT_FACTS_FIELDS_BUTTON_LABELS = {
   fields: "Fields",
   defaultView: "Default view",
@@ -1623,7 +1519,7 @@ function FactsEmptyState({ onUseExample, labels, testIds }) {
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: l.intro }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-7 grid gap-3 text-left @xl:grid-cols-3", children: l.kinds.map(({ label, desc }, i) => {
           const KindIcon = KIND_ICONS[i % KIND_ICONS.length];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-muted p-3", children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border bg-card p-3 shadow-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm font-medium text-foreground", children: [
               /* @__PURE__ */ jsxRuntime.jsx(KindIcon, { className: "size-4 text-primary" }),
               label
@@ -1631,13 +1527,13 @@ function FactsEmptyState({ onUseExample, labels, testIds }) {
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs leading-snug text-muted-foreground", children: desc })
           ] }, label);
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-10 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: l.tryAdding }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-10 text-sm font-medium text-muted-foreground", children: l.tryAdding }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2.5", children: l.examples.map((fact) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             onClick: () => onUseExample(fact),
-            className: "group inline-flex items-center gap-1.5 rounded-full bg-muted px-3.5 py-2 text-sm text-foreground transition-colors hover:bg-accent pointer-coarse:min-h-11",
+            className: "group inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3.5 py-2 text-sm text-foreground transition-colors hover:border-ring/50 hover:bg-accent/40 pointer-coarse:min-h-11",
             "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.example, { testId: "facts-page-example" }),
             children: [
               fact,
@@ -1869,7 +1765,7 @@ function FactsBulkBar({
   const l = { ...DEFAULT_FACTS_BULK_BAR_LABELS, ...labels };
   const none = count === 0;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-3", "data-slot": "facts-bulk-bar", children: /* @__PURE__ */ jsxRuntime.jsx(
-    chunkJGZTRLKL_cjs.SelectionBar,
+    chunkIA7RTPT3_cjs.SelectionBar,
     {
       count,
       onClear,
@@ -1887,7 +1783,7 @@ function FactsBulkBar({
       ) : null,
       children: (isCompact) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkJGZTRLKL_cjs.SelectionBarAction,
+          chunkIA7RTPT3_cjs.SelectionBarAction,
           {
             icon: allSelectedPinned ? lucideReact.PinOff : lucideReact.Pin,
             label: allSelectedPinned ? l.unpin : l.pin,
@@ -1900,7 +1796,7 @@ function FactsBulkBar({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkJGZTRLKL_cjs.SelectionBarAction,
+          chunkIA7RTPT3_cjs.SelectionBarAction,
           {
             icon: lucideReact.Tags,
             label: l.label,
@@ -2017,13 +1913,12 @@ function FactsToolbar({
       countPlacement: "leading",
       hasActiveFilters,
       testId: chunkMHVNT4J3_cjs.testIdOr(testIds?.tab, { testId: "facts-tab" }),
-      // Strip the folder-tab chrome: just the glyph and count, as in the Files header.
-      tabClassName: "!bg-transparent hover:!bg-transparent !border-transparent !rounded-none !mb-0 !pl-0 before:!hidden after:!hidden shadow-none!"
+      presentation: "count"
     }
   ];
   const filterControls = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isNarrow ? "flex w-full items-center gap-1.5" : "flex items-center gap-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      FactsFilterInput,
+      chunkMZL67U2E_cjs.FilterInput,
       {
         value: filterText,
         onChange: onFilterTextChange,
@@ -2052,14 +1947,13 @@ function FactsToolbar({
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: headerRef, className: "sticky top-0 z-10 bg-background", "data-slot": "facts-toolbar", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5B4PXAKI_cjs.TabHeader,
+      chunk6DNYPLCD_cjs.TabHeader,
       {
         tabs,
-        className: "pr-3",
         activeTabId: "notes",
         onTabChange: () => {
         },
-        afterTabs: isNarrow ? null : filterControls,
+        firstTabContent: isNarrow ? null : filterControls,
         centerContent: isNarrow ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           FactsViewToggle,
           {
@@ -2350,10 +2244,21 @@ function FactSearchResult({
   ] });
 }
 
+Object.defineProperty(exports, "DEFAULT_FACTS_FILTER_INPUT_LABELS", {
+  enumerable: true,
+  get: function () { return chunkMZL67U2E_cjs.DEFAULT_FILTER_INPUT_LABELS; }
+});
+Object.defineProperty(exports, "FACTS_SEARCH_FIELD_OPTIONS", {
+  enumerable: true,
+  get: function () { return chunkMZL67U2E_cjs.DEFAULT_FILTER_FIELDS; }
+});
+Object.defineProperty(exports, "FactsFilterInput", {
+  enumerable: true,
+  get: function () { return chunkMZL67U2E_cjs.FilterInput; }
+});
 exports.DEFAULT_FACTS_BULK_BAR_LABELS = DEFAULT_FACTS_BULK_BAR_LABELS;
 exports.DEFAULT_FACTS_EMPTY_STATE_LABELS = DEFAULT_FACTS_EMPTY_STATE_LABELS;
 exports.DEFAULT_FACTS_FIELDS_BUTTON_LABELS = DEFAULT_FACTS_FIELDS_BUTTON_LABELS;
-exports.DEFAULT_FACTS_FILTER_INPUT_LABELS = DEFAULT_FACTS_FILTER_INPUT_LABELS;
 exports.DEFAULT_FACTS_TOOLBAR_LABELS = DEFAULT_FACTS_TOOLBAR_LABELS;
 exports.DEFAULT_FACTS_VIEW_TOGGLE_LABELS = DEFAULT_FACTS_VIEW_TOGGLE_LABELS;
 exports.DEFAULT_FACT_COLUMN_LABELS = DEFAULT_FACT_COLUMN_LABELS;
@@ -2369,7 +2274,6 @@ exports.DEFAULT_FACT_SOURCES_ROW_LABELS = DEFAULT_FACT_SOURCES_ROW_LABELS;
 exports.DEFAULT_FACT_SOURCE_GROUP_LABELS = DEFAULT_FACT_SOURCE_GROUP_LABELS;
 exports.DEFAULT_FACT_TIMELINE_LABELS = DEFAULT_FACT_TIMELINE_LABELS;
 exports.EMPTY_FACT_DATE_FIELDS = EMPTY_FACT_DATE_FIELDS;
-exports.FACTS_SEARCH_FIELD_OPTIONS = FACTS_SEARCH_FIELD_OPTIONS;
 exports.FactComposer = FactComposer;
 exports.FactDateInput = FactDateInput;
 exports.FactFieldRow = FactFieldRow;
@@ -2388,7 +2292,6 @@ exports.FactsBulkBar = FactsBulkBar;
 exports.FactsCalendar = FactsCalendar;
 exports.FactsEmptyState = FactsEmptyState;
 exports.FactsFieldsButton = FactsFieldsButton;
-exports.FactsFilterInput = FactsFilterInput;
 exports.FactsGanttPane = FactsGanttPane;
 exports.FactsLoadError = FactsLoadError;
 exports.FactsLoading = FactsLoading;