@scattered-light/loomiere-base-ui 0.19.0 → 0.20.0

package/dist/chunk-Z6SR3KMB.js

@@ -0,0 +1,77 @@
+import { cnState, styledPart, styledPartUnless, cn } from './chunk-43IJNNXK.js';
+import * as React from 'react';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+
+var Input = React.forwardRef(function Input2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(Input$1, { ref, ...props, className: (state) => cnState("Input", className, state) });
+});
+Input.displayName = "Input";
+var Root = styledPart(
+  Checkbox$1.Root,
+  "CheckboxRoot",
+  "CheckboxRoot"
+);
+var Indicator = styledPart(
+  Checkbox$1.Indicator,
+  "CheckboxIndicator",
+  "CheckboxIndicator"
+);
+function CheckboxLabel({ className, ...props }) {
+  return (
+    // The checkbox is a child of this label, which is what associates them.
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    /* @__PURE__ */ jsx("label", { className: cn("CheckboxLabel", className), ...props })
+  );
+}
+var Checkbox = {
+  Root,
+  Indicator,
+  Label: CheckboxLabel
+};
+var Toggle = styledPart(
+  Toggle$1,
+  "Toggle",
+  "Toggle"
+);
+var ToggleGroup = styledPartUnless(
+  ToggleGroup$1,
+  "ToggleGroup",
+  "ToggleGroup",
+  "ToolbarGroup"
+);
+var Root2 = styledPart(
+  Tabs$1.Root,
+  "TabsRoot",
+  "TabsRoot"
+);
+var List = styledPart(
+  Tabs$1.List,
+  "TabsList",
+  "TabsList"
+);
+var Tab = styledPart(
+  Tabs$1.Tab,
+  "TabsTab",
+  "TabsTab"
+);
+var Panel = styledPart(
+  Tabs$1.Panel,
+  "TabsPanel",
+  "TabsPanel"
+);
+var Tabs = {
+  Root: Root2,
+  List,
+  Tab,
+  Panel,
+  Indicator: Tabs$1.Indicator
+};
+
+export { Checkbox, CheckboxLabel, Input, Tabs, Toggle, ToggleGroup };
+//# sourceMappingURL=chunk-Z6SR3KMB.js.map
+//# sourceMappingURL=chunk-Z6SR3KMB.js.map

package/dist/chunk-Z6SR3KMB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input.tsx","../src/components/checkbox.tsx","../src/components/toggle.tsx","../src/components/toggle-group.tsx","../src/components/tabs.tsx"],"names":["Input","BaseInput","BaseCheckbox","jsx","BaseToggle","BaseToggleGroup","Root","BaseTabs"],"mappings":";;;;;;;;;AAUO,IAAM,KAAA,GAAc,iBAAyC,SAASA,MAAAA,CAC3E,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EACtB,GAAA,EACA;AACA,EAAA,uBACE,GAAA,CAACC,OAAA,EAAA,EAAU,GAAA,EAAW,GAAG,KAAA,EAAO,SAAA,EAAW,CAAC,KAAA,KAAU,OAAA,CAAQ,OAAA,EAAS,SAAA,EAAW,KAAK,CAAA,EAAG,CAAA;AAE9F,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;ACdpB,IAAM,IAAA,GAAO,UAAA;AAAA,EACXC,UAAA,CAAa,IAAA;AAAA,EACb,cAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,SAAA,GAAY,UAAA;AAAA,EAChBA,UAAA,CAAa,SAAA;AAAA,EACb,mBAAA;AAAA,EACA;AACF,CAAA;AAKO,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAAuB;AACzE,EAAA;AAAA;AAAA;AAAA,oBAGEC,IAAC,OAAA,EAAA,EAAM,SAAA,EAAW,GAAG,eAAA,EAAiB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAAA;AAEjE;AAMO,IAAM,QAAA,GAAW;AAAA,EACtB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,EAAO;AACT;AC1BO,IAAM,MAAA,GAAS,UAAA;AAAA,EACpBC,QAAA;AAAA,EAGA,QAAA;AAAA,EACA;AACF;ACNO,IAAM,WAAA,GAAc,gBAAA;AAAA,EACzBC,aAAA;AAAA,EAGA,aAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF;ACZA,IAAMC,KAAAA,GAAO,UAAA;AAAA,EACXC,MAAA,CAAS,IAAA;AAAA,EACT,UAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,IAAA,GAAO,UAAA;AAAA,EACXA,MAAA,CAAS,IAAA;AAAA,EACT,UAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,GAAA,GAAM,UAAA;AAAA,EACVA,MAAA,CAAS,GAAA;AAAA,EACT,SAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,KAAA,GAAQ,UAAA;AAAA,EACZA,MAAA,CAAS,KAAA;AAAA,EACT,WAAA;AAAA,EACA;AACF,CAAA;AAMO,IAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAAD,KAAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAWC,MAAA,CAAS;AACtB","file":"chunk-Z6SR3KMB.js","sourcesContent":["import * as React from 'react';\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { cnState } from '../utils/cn';\n\nexport type InputProps = React.ComponentProps<typeof BaseInput>;\n\n/**\n * Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.\n * Pairs with {@link Field} for labels, validation, and descriptions.\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseInput ref={ref} {...props} className={(state) => cnState('Input', className, state)} />\n  );\n});\n\nInput.displayName = 'Input';\n","import * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { cn } from '../utils/cn';\nimport { styledPart } from '../utils/styled-part';\n\nconst Root = styledPart<HTMLElement, React.ComponentProps<typeof BaseCheckbox.Root>>(\n  BaseCheckbox.Root,\n  'CheckboxRoot',\n  'CheckboxRoot',\n);\nconst Indicator = styledPart<HTMLSpanElement, React.ComponentProps<typeof BaseCheckbox.Indicator>>(\n  BaseCheckbox.Indicator,\n  'CheckboxIndicator',\n  'CheckboxIndicator',\n);\n\nexport type CheckboxLabelProps = React.ComponentProps<'label'>;\n\n/** The row around a checkbox. The control sits inside the label, so it needs no htmlFor. */\nexport function CheckboxLabel({ className, ...props }: CheckboxLabelProps) {\n  return (\n    // The checkbox is a child of this label, which is what associates them.\n    // eslint-disable-next-line jsx-a11y/label-has-associated-control\n    <label className={cn('CheckboxLabel', className)} {...props} />\n  );\n}\n\n/**\n * Base UI [Checkbox](https://base-ui.com/react/components/checkbox) with design-system classes.\n * The mark icon stays yours: give it `className=\"CheckboxIcon\"`.\n */\nexport const Checkbox = {\n  Root,\n  Indicator,\n  Label: CheckboxLabel,\n};\n","import * as React from 'react';\nimport { Toggle as BaseToggle } from '@base-ui/react/toggle';\nimport { styledPart } from '../utils/styled-part';\n\n/**\n * Base UI [Toggle](https://base-ui.com/react/components/toggle) with design-system classes.\n * Same height, padding, and trigger text as a Button of the same size. Pressed takes the\n * emphasis level (standard unless `data-emphasis` says otherwise).\n */\nexport const Toggle = styledPart<HTMLButtonElement, React.ComponentProps<typeof BaseToggle>>(\n  BaseToggle as React.ComponentType<\n    React.ComponentProps<typeof BaseToggle> & React.RefAttributes<HTMLButtonElement>\n  >,\n  'Toggle',\n  'Toggle',\n);\n","import * as React from 'react';\nimport { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { styledPartUnless } from '../utils/styled-part';\n\n/**\n * Base UI [Toggle Group](https://base-ui.com/react/components/toggle-group) with design-system classes.\n * The strip is a bar. Each child is a {@link Toggle}, with item corners so it nests in the strip.\n * A group inside a toolbar passes `className=\"ToolbarGroup\"` and does not also become a strip.\n */\nexport const ToggleGroup = styledPartUnless<HTMLDivElement, React.ComponentProps<typeof BaseToggleGroup>>(\n  BaseToggleGroup as React.ComponentType<\n    React.ComponentProps<typeof BaseToggleGroup> & React.RefAttributes<HTMLDivElement>\n  >,\n  'ToggleGroup',\n  'ToggleGroup',\n  'ToolbarGroup',\n) as unknown as typeof BaseToggleGroup; // keeps Base UI's generic value type\n","import * as React from 'react';\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { styledPart } from '../utils/styled-part';\n\nconst Root = styledPart<HTMLDivElement, React.ComponentProps<typeof BaseTabs.Root>>(\n  BaseTabs.Root,\n  'TabsRoot',\n  'TabsRoot',\n);\nconst List = styledPart<HTMLDivElement, React.ComponentProps<typeof BaseTabs.List>>(\n  BaseTabs.List,\n  'TabsList',\n  'TabsList',\n);\nconst Tab = styledPart<HTMLElement, React.ComponentProps<typeof BaseTabs.Tab>>(\n  BaseTabs.Tab,\n  'TabsTab',\n  'TabsTab',\n);\nconst Panel = styledPart<HTMLDivElement, React.ComponentProps<typeof BaseTabs.Panel>>(\n  BaseTabs.Panel,\n  'TabsPanel',\n  'TabsPanel',\n);\n\n/**\n * Base UI [Tabs](https://base-ui.com/react/components/tabs) with design-system classes.\n * `data-size` and `data-orientation` go on the root.\n */\nexport const Tabs = {\n  Root,\n  List,\n  Tab,\n  Panel,\n  Indicator: BaseTabs.Indicator,\n};\n"]}

package/dist/custom/collection/index.d.ts

@@ -518,6 +518,22 @@ interface CollectionPaginationProps {
  */
 declare function CollectionPagination({ page, pageCount, pageSize, total, filtered, onPageChange, onPageSizeChange, pageSizeOptions, label, previousLabel, nextLabel, rowsPerPageLabel, className, }: CollectionPaginationProps): react_jsx_runtime.JSX.Element;
 
+/** One segmented group in the toolbar: a quick filter, a sort or a grouping, as a row of toggles. */
+interface ToolbarSegment {
+    /** Names the group for screen readers and, with `showLabel`, sits before it. */
+    label: string;
+    showLabel?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    /** `count` reads "All (12)" in the toggle. */
+    options: Array<{
+        value: string;
+        label: string;
+        count?: number;
+    }>;
+    /** Pushes this group, and the ones after it, to the far end of the row. */
+    end?: boolean;
+}
 interface CollectionToolbarProps<T> {
     collection: CollectionApi<T>;
     /** Required when any column is searchable. */
@@ -542,13 +558,21 @@ interface CollectionToolbarProps<T> {
     metaEnd?: React.ReactNode;
     /** Pads the toolbar and rules it from the table below, for a toolbar inside a Sheet above an edge-to-edge table. */
     framed?: boolean;
+    /**
+     * Segmented toggle groups for quick filters, sort and grouping. When set, the toolbar is one row:
+     * search, then the groups, then `meta`. Tabs, trailing selects and the sort select are not drawn.
+     * Build the groups with `segmentFilter` and `segmentSort`.
+     */
+    segments?: ToolbarSegment[];
+    /** Rules the toolbar from the content above it with the sheet rule. For directory pages. */
+    ruled?: boolean;
     className?: string;
 }
 /**
  * Tabs and search stay put while rows are selected. The trailing controls swap for the
  * selection bar, so the bar takes their place and the row does not grow.
  */
-declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, searchPlaceholder, showSort, groupOptions, actions, bulkActions, searchWidth, meta, metaEnd, framed, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
+declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, searchPlaceholder, showSort, groupOptions, actions, bulkActions, searchWidth, meta, metaEnd, framed, segments, ruled, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
 declare function ToolbarTabs<T>({ collection, column }: {
     collection: CollectionApi<T>;
     column: CollectionColumn<T>;
@@ -572,6 +596,17 @@ declare function FilterControl<T>({ collection, column }: {
 declare function SortControl<T>({ collection }: {
     collection: CollectionApi<T>;
 }): react_jsx_runtime.JSX.Element;
+/** A segmented quick filter on a column: "All (12)", "Open items (4)". Include an `all` option to clear it. */
+declare function segmentFilter<T>(collection: CollectionApi<T>, columnId: string, label: string, options: Array<{
+    value: string;
+    label: string;
+}>): ToolbarSegment;
+/** A segmented sort: each option names a column and a direction. */
+declare function segmentSort<T>(collection: CollectionApi<T>, label: string, options: Array<{
+    value: string;
+    label: string;
+    desc?: boolean;
+}>): ToolbarSegment;
 declare function ToolbarClear<T>({ collection }: {
     collection: CollectionApi<T>;
 }): react_jsx_runtime.JSX.Element | null;
@@ -604,4 +639,4 @@ declare const CollectionToolbar: typeof CollectionToolbarImpl & {
  */
 declare function totalText<T>(column: CollectionColumn<T>, rows: readonly T[], locale: string): string;
 
-export { type CellContext, type CollectionAlign, type CollectionApi, CollectionCards, type CollectionCardsProps, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type DataTableTotalRow, type FilterKind, type FilterOption, type ListSlot, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };
+export { type CellContext, type CollectionAlign, type CollectionApi, CollectionCards, type CollectionCardsProps, type CollectionColumn, type CollectionFilter, type CollectionKind, CollectionPagination, type CollectionPaginationProps, type CollectionSort, CollectionToolbar, type CollectionToolbarProps, DataList, type DataListProps, DataTable, type DataTableProps, type DataTableTotalRow, type FilterKind, type FilterOption, type ListSlot, type ToolbarSegment, type UseCollectionOptions, balanceOf, collectionTableOptions, compareDecimal, countFacets, defineColumns, formatDate, formatMoney, headerLabel, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, segmentFilter, segmentSort, selectableIds, sortRows, sumMoney, toMinor, totalText, treeVisibleIds, useCollection };

package/dist/custom/collection/index.js

@@ -1,6 +1,6 @@
-import { Input, Tabs, Checkbox, Menu } from '../../chunk-Y2CPBMFJ.js';
-import { useUnderWidth, Button, cn, Select, Combobox, isEmptyValue, formatPercent, formatNumber, sumMoney, fractionDigitsOf, formatMoney, minorToDecimal, EmptyState, selectableIds, pageFlat, hiddenSelectedCount, nextSort, pageBounds, searchMatches, treeVisibleIds, isoDate, toMinor, comparePresent, collatorFor, formatDate, moneySearchForms, searchHaystack } from '../../chunk-M7KJASGK.js';
-export { balanceOf, compareDecimal, countFacets, formatDate, formatMoney, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, treeVisibleIds } from '../../chunk-M7KJASGK.js';
+import { Input, Tabs, ToggleGroup, Toggle, Checkbox } from '../../chunk-Z6SR3KMB.js';
+import { useUnderWidth, cn, Button, Select, Combobox, isEmptyValue, formatPercent, formatNumber, sumMoney, fractionDigitsOf, formatMoney, minorToDecimal, EmptyState, selectableIds, pageFlat, hiddenSelectedCount, nextSort, pageBounds, searchMatches, treeVisibleIds, isoDate, toMinor, Menu, comparePresent, collatorFor, formatDate, moneySearchForms, searchHaystack } from '../../chunk-43IJNNXK.js';
+export { balanceOf, compareDecimal, countFacets, formatDate, formatMoney, hiddenSelectedCount, nextSort, pageBounds, pageFlat, searchMatches, selectableIds, sortRows, sumMoney, toMinor, treeVisibleIds } from '../../chunk-43IJNNXK.js';
 import * as React4 from 'react';
 import { useMemo, useRef, useState, useDeferredValue, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -844,7 +844,7 @@ function CollectionPagination({
   ] });
 }
 var COMBOBOX_AT = 12;
-function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, searchPlaceholder, showSort, groupOptions, actions, bulkActions, searchWidth = "fill", meta, metaEnd, framed, className }) {
+function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, searchPlaceholder, showSort, groupOptions, actions, bulkActions, searchWidth = "fill", meta, metaEnd, framed, segments, ruled, className }) {
   const tabs = collection.columns.find((column) => column.filter?.kind === "tabs");
   const selects = collection.columns.filter((column) => column.filter && column.filter.kind !== "tabs");
   const searchable = collection.columns.some((column) => column.searchable);
@@ -870,6 +870,24 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, se
   }, [collection.selection, collection.hiddenSelectedCount, collection.messages]);
   const selecting = collection.selection.length > 0;
   const narrow = useUnderWidth("--sl-collection-narrow-width");
+  if (segments) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("CollectionToolbar", className), "data-segmented": "", "data-ruled": ruled ? "" : void 0, children: [
+      searchable ? /* @__PURE__ */ jsx(
+        SearchField,
+        {
+          label: searchLabel ?? "Search",
+          visible: searchLabelVisible,
+          placeholder: searchPlaceholder,
+          value: collection.search,
+          onChange: collection.setSearch,
+          clearLabel: collection.messages.clearSearch
+        }
+      ) : null,
+      segments.map((segment, index) => /* @__PURE__ */ jsx(ToolbarSegments, { segment, first: Boolean(segment.end) && !segments.slice(0, index).some((other) => other.end) }, segment.label)),
+      meta ? /* @__PURE__ */ jsx("p", { className: "CollectionToolbarMeta", "aria-live": "polite", children: meta }) : null,
+      /* @__PURE__ */ jsx("div", { className: "visually-hidden", "aria-live": "polite", children: announced })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, "data-search": searchWidth === "fixed" ? "fixed" : void 0, "data-framed": framed ? "" : void 0, children: [
     tabs ? /* @__PURE__ */ jsx(ToolbarTabs, { collection, column: tabs }) : null,
     /* @__PURE__ */ jsxs("div", { className: "CollectionToolbarMain", children: [
@@ -1083,6 +1101,53 @@ function SortControl({ collection }) {
     )
   ] });
 }
+function ToolbarSegments({ segment, first }) {
+  return /* @__PURE__ */ jsxs("div", { className: "CollectionSegment", "data-end": first ? "" : void 0, children: [
+    segment.showLabel ? /* @__PURE__ */ jsx("span", { className: "CollectionSegmentLabel", children: segment.label }) : null,
+    /* @__PURE__ */ jsx(
+      ToggleGroup,
+      {
+        "data-variant": "segmented",
+        "aria-label": segment.label,
+        value: segment.value ? [segment.value] : [],
+        onValueChange: (next) => {
+          if (next[0] && next[0] !== segment.value) segment.onChange(String(next[0]));
+        },
+        children: segment.options.map((option) => /* @__PURE__ */ jsxs(Toggle, { value: option.value, children: [
+          option.label,
+          option.count !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " (",
+            option.count,
+            ")"
+          ] }) : null
+        ] }, option.value))
+      }
+    )
+  ] });
+}
+function segmentFilter(collection, columnId, label, options) {
+  const counts = collection.facetCounts(columnId);
+  const total = [...counts.values()].reduce((sum, count) => sum + count, 0);
+  const current = collection.filters[columnId];
+  return {
+    label,
+    value: current == null || current === "" ? "all" : String(current),
+    onChange: (value) => collection.setFilter(columnId, value === "all" ? void 0 : value),
+    options: options.map((option) => ({ ...option, count: option.value === "all" ? total : counts.get(option.value) ?? 0 }))
+  };
+}
+function segmentSort(collection, label, options) {
+  const active = options.find((option) => option.value === collection.sort?.id);
+  return {
+    label,
+    value: active?.value ?? "",
+    onChange: (value) => {
+      const option = options.find((o) => o.value === value);
+      if (option) collection.setSort({ id: option.value, desc: option.desc ?? false });
+    },
+    options
+  };
+}
 function ToolbarClear({ collection }) {
   if (!collection.isFiltered) return null;
   return /* @__PURE__ */ jsx(Button, { emphasis: "quiet", onClick: collection.clearFilters, children: collection.messages.clearFilters });
@@ -1562,6 +1627,6 @@ function leafRows(row) {
   return children.flatMap(leafRows);
 }
 
-export { CollectionCards, CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, totalText, useCollection };
+export { CollectionCards, CollectionPagination, CollectionToolbar, DataList, DataTable, collectionTableOptions, defineColumns, headerLabel, segmentFilter, segmentSort, totalText, useCollection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map