@alexgorbatchev/shadcn 0.0.35 → 0.0.36

package/README.md

@@ -306,6 +306,8 @@ Compose `QuestionnaireItem`, `QuestionnaireTitle`, and answer controls inside `Q
 
 `VirtualDataGrid` renders a TanStack Table instance built with `dataGridFeatures` through `VirtualTable`: every filtered and sorted row, without pagination, in a fixed-layout table. Column `meta` sets `label`, `textAlign`, `truncate`, `visibleFrom`, `fill`, and `sortColumnIds`; a `fill` column takes the width the sized columns leave, and `sortColumnIds` names other columns the header sorts with its own buttons so its `aria-sort` reports them. Other resizable columns get a window-splitter handle that resizes by dragging, by the arrow keys, Home, and End, and resets on double-click. Set `columnResizeMode: "onChange"` so columns follow the pointer while dragging; TanStack's default `"onEnd"` resizes only on release. Widths change through CSS variables, so a `useTable` selector can omit `columnSizing` and `columnResizing` to keep resizing from rendering rows. `renderRow` receives each row and its measurement props; spread the props onto a `TableRow` and render `DataGridCells` inside it to wrap rows in menus or drag sources. `retainedRowIds` keeps rows mounted while they hold editors. `DataGridColumnOptions` shows, hides, and reorders the columns that allow hiding; its reset restores the table's initial visibility, order, and sizes.
 
+Column `meta.filter` offers a column in `DataGridFilters`, hidden columns included. A `range` filter edits `[min, max]` bounds, `null` for an open end, for `filterFn: "inNumberRange"`; its inputs suggest the range of the rows the other filters leave, formatted through the filter's `Intl.NumberFormatOptions`. An `options` filter chooses among labelled string values, one or several, for `filterFn: "arrHas"` (one value per row), `"arrIncludesSome"` (an array per row), or a custom `filterFn`; each option counts the rows the other filters leave with that value, so a column whose rows hold several values or values in another form supplies them through `getUniqueValues`. Column filters combine with each other and with the global filter. `DataGridFilterSummary` lists the active filters with buttons that remove them, and both controls clear every column filter at once.
+
 `StarRating` takes a controlled numeric `value` from 0 to 5, `onValueChange`, and an accessible `label`. Its native radio buttons support keyboard selection and an Unrated option to clear the rating. Set `disabled` while saving. `Avatar shape="square"` displays square artwork with matching image, fallback, and border corners.
 
 `DialogContent size="wide"` uses a desktop maximum width of 576px; `size="narrow"` uses 192px, and the default uses 384px. Dialogs remain bounded by the viewport. `FieldGroup columns={2}` arranges fields in two columns on desktop and one on mobile.

package/THIRD_PARTY_NOTICES.md

@@ -166,7 +166,7 @@ Reviewed source: https://github.com/keenthemes/reui/tree/067aa0dc7f8bbfec1cd76fc
 
 ## TanStack Table examples
 
-VirtualDataGrid and DataGridColumnOptions follow the MIT-licensed TanStack Table React examples for virtualized rows, performant column resizing through CSS variables, column ordering, and column visibility. The package implementation, styling, keyboard resizing and behavioral tests are package-owned.
+VirtualDataGrid, DataGridColumnOptions, and DataGridFilters follow the MIT-licensed TanStack Table React examples for virtualized rows, performant column resizing through CSS variables, column ordering, column visibility, and faceted filters. The package implementation, styling, keyboard resizing and behavioral tests are package-owned.
 
 Reviewed source: https://github.com/TanStack/table/tree/main/examples/react
 

package/dist/chunk-c7tnf6h7.js

@@ -0,0 +1,397 @@
+import {
+  useDensity
+} from "./chunk-e6hk39ev.js";
+import {
+  usePortalContainer2
+} from "./chunk-j89xg1ak.js";
+import {
+  usePortalNode,
+  PortalProvider2
+} from "./chunk-aa7m22zj.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-q7p28b89.js";
+import {
+  InputGroup2,
+  InputGroupAddon2,
+  InputGroupButton2,
+  InputGroupInput2
+} from "./chunk-57jj9v64.js";
+
+// src/components/Combobox.tsx
+import { useDirection } from "@base-ui/react/direction-provider";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Combobox2 = ComboboxPrimitive.Root;
+function ComboboxValue2({ ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Value, {
+    ...props
+  });
+}
+function ComboboxTrigger2({ density, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(ComboboxPrimitive.Trigger, {
+    "data-density": density,
+    "data-slot": "combobox-trigger",
+    className: (state) => cn2("[&_svg:not([class*='size-'])]:size-4", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronDownIcon, {
+        className: "pointer-events-none size-4 text-muted-foreground"
+      })
+    ]
+  });
+}
+function ComboboxClear({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Clear, {
+    "data-density": density,
+    "data-slot": "combobox-clear",
+    render: /* @__PURE__ */ jsx(InputGroupButton2, {
+      variant: "ghost",
+      size: "icon-xs"
+    }),
+    className: (state) => cn2(typeof className === "function" ? className(state) : className),
+    ...props,
+    children: /* @__PURE__ */ jsx(XIcon, {
+      className: "pointer-events-none"
+    })
+  });
+}
+function ComboboxInput2({
+  density,
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  frameClassName,
+  triggerLabel = "Open popup",
+  clearLabel = "Clear selection",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(InputGroup2, {
+    density,
+    className: cn2("w-auto", frameClassName),
+    children: [
+      /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
+        disabled,
+        className,
+        render: /* @__PURE__ */ jsx(InputGroupInput2, {}),
+        ...props
+      }),
+      /* @__PURE__ */ jsxs(InputGroupAddon2, {
+        align: "inline-end",
+        children: [
+          showTrigger && /* @__PURE__ */ jsx(InputGroupButton2, {
+            size: "icon-xs",
+            variant: "ghost",
+            render: /* @__PURE__ */ jsx(ComboboxTrigger2, {}),
+            "aria-label": triggerLabel,
+            "data-density": density,
+            "data-slot": "input-group-button",
+            className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+            disabled
+          }),
+          showClear && /* @__PURE__ */ jsx(ComboboxClear, {
+            disabled,
+            "aria-label": clearLabel
+          })
+        ]
+      }),
+      children
+    ]
+  });
+}
+function ComboboxContent2({
+  density,
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}) {
+  const resolvedDensity = useDensity(density);
+  const direction = useDirection();
+  const container = usePortalContainer2();
+  const portal = usePortalNode();
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Portal, {
+    container,
+    ref: portal.ref,
+    children: /* @__PURE__ */ jsx(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx(ComboboxPrimitive.Positioner, {
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        anchor,
+        className: "isolate ",
+        children: /* @__PURE__ */ jsx(ComboboxPrimitive.Popup, {
+          dir: direction,
+          "data-density": resolvedDensity,
+          "data-slot": "combobox-content",
+          "data-chips": !!anchor,
+          className: (state) => cn2("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground border border-frame-edge shadow-frame duration-120 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-control *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none", typeof className === "function" ? className(state) : className),
+          ...props
+        })
+      })
+    })
+  });
+}
+function ComboboxList2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.List, {
+    "data-density": density,
+    "data-slot": "combobox-list",
+    className: (state) => cn2("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxItem2({ density, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(ComboboxPrimitive.Item, {
+    "data-density": density,
+    "data-slot": "combobox-item",
+    className: (state) => cn2("relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ComboboxPrimitive.ItemIndicator, {
+        render: /* @__PURE__ */ jsx("span", {
+          className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center"
+        }),
+        children: /* @__PURE__ */ jsx(CheckIcon, {
+          className: "pointer-events-none"
+        })
+      })
+    ]
+  });
+}
+function ComboboxGroup2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Group, {
+    "data-density": density,
+    "data-slot": "combobox-group",
+    className: (state) => cn2(typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxLabel2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.GroupLabel, {
+    "data-density": density,
+    "data-slot": "combobox-label",
+    className: (state) => cn2("px-2 py-1.5 text-xs text-muted-foreground", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxCollection2({ ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Collection, {
+    ...props
+  });
+}
+function ComboboxEmpty2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Empty, {
+    "data-density": density,
+    "data-slot": "combobox-empty",
+    className: (state) => cn2("flex w-full justify-center py-2 empty:p-0 text-center text-sm text-muted-foreground", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxSeparator2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Separator, {
+    "data-density": density,
+    "data-slot": "combobox-separator",
+    className: (state) => cn2("-mx-1 my-1 h-px bg-border", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxChips2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Chips, {
+    "data-density": density,
+    "data-slot": "combobox-chips",
+    className: (state) => cn2("flex min-h-control flex-wrap items-center gap-1 rounded-sm border border-input bg-transparent bg-clip-padding px-control-x py-px text-sm transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive has-data-[slot=combobox-chip]:px-1", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function ComboboxChip2({
+  density,
+  className,
+  children,
+  showRemove = true,
+  removeLabel = "Remove item",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(ComboboxPrimitive.Chip, {
+    "data-density": density,
+    "data-slot": "combobox-chip",
+    className: (state) => cn2("flex h-tag w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: [
+      children,
+      showRemove && /* @__PURE__ */ jsx(ComboboxPrimitive.ChipRemove, {
+        render: /* @__PURE__ */ jsx(Button2, {
+          variant: "ghost",
+          size: "icon-xs"
+        }),
+        className: "size-tag -ms-1 opacity-50 hover:opacity-100",
+        "data-slot": "combobox-chip-remove",
+        "aria-label": removeLabel,
+        children: /* @__PURE__ */ jsx(XIcon, {
+          className: "pointer-events-none"
+        })
+      })
+    ]
+  });
+}
+function ComboboxChipsInput2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(ComboboxPrimitive.Input, {
+    "data-density": density,
+    "data-slot": "combobox-chip-input",
+    className: (state) => cn2("h-tag min-w-16 flex-1 py-0 text-sm leading-none outline-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+
+// src/hooks/useComboboxAnchor.ts
+import { useRef } from "react";
+function useComboboxAnchor2() {
+  return useRef(null);
+}
+
+// src/components/ScrollArea.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ScrollArea2({
+  density,
+  className,
+  children,
+  scrollbars = /* @__PURE__ */ jsx2(ScrollBar2, {}),
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(ScrollAreaPrimitive.Root, {
+    "data-density": density,
+    "data-slot": "scroll-area",
+    className: (state) => cn2("relative flex min-h-0 flex-col", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(ScrollAreaPrimitive.Viewport, {
+        "data-slot": "scroll-area-viewport",
+        className: "size-full min-h-0 flex-1 rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1",
+        children
+      }),
+      scrollbars,
+      /* @__PURE__ */ jsx2(ScrollAreaPrimitive.Corner, {})
+    ]
+  });
+}
+function ScrollBar2({ density, className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx2(ScrollAreaPrimitive.Scrollbar, {
+    "data-density": density,
+    "data-slot": "scroll-area-scrollbar",
+    "data-orientation": orientation,
+    orientation,
+    className: (state) => cn2("flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent", typeof className === "function" ? className(state) : className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(ScrollAreaPrimitive.Thumb, {
+      "data-slot": "scroll-area-thumb",
+      className: "relative flex-1 rounded-full bg-border"
+    })
+  });
+}
+
+// src/components/NumberField.tsx
+import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
+import { MinusIcon, PlusIcon, MoveHorizontalIcon } from "lucide-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function NumberField2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.Root, {
+    "data-density": density,
+    "data-slot": "number-field",
+    className: (state) => cn2("flex min-w-0 flex-col gap-field-gap", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function NumberFieldGroup2({
+  density,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.Group, {
+    "data-density": density,
+    "data-slot": "number-field-group",
+    className: (state) => cn2("flex h-control min-w-0 items-stretch rounded-sm border border-input bg-secondary text-foreground transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring data-disabled:opacity-50 motion-reduce:transition-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function NumberFieldInput2({
+  density,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.Input, {
+    "data-density": density,
+    "data-slot": "number-field-input",
+    className: (state) => cn2("min-w-0 flex-1 bg-transparent px-control-x text-center text-sm tabular-nums outline-none disabled:cursor-not-allowed", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function NumberFieldDecrement2({
+  density,
+  className,
+  children = /* @__PURE__ */ jsx3(MinusIcon, {}),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.Decrement, {
+    "data-density": density,
+    "data-slot": "number-field-decrement",
+    className: (state) => cn2("flex w-control shrink-0 items-center justify-center rounded-s-sm outline-none hover:bg-muted focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5", typeof className === "function" ? className(state) : className),
+    ...props,
+    children
+  });
+}
+function NumberFieldIncrement2({
+  density,
+  className,
+  children = /* @__PURE__ */ jsx3(PlusIcon, {}),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.Increment, {
+    "data-density": density,
+    "data-slot": "number-field-increment",
+    className: (state) => cn2("flex w-control shrink-0 items-center justify-center rounded-e-sm outline-none hover:bg-muted focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5", typeof className === "function" ? className(state) : className),
+    ...props,
+    children
+  });
+}
+function NumberFieldScrubArea2({
+  density,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.ScrubArea, {
+    "data-density": density,
+    "data-slot": "number-field-scrub-area",
+    className: (state) => cn2("flex w-fit cursor-ew-resize items-center gap-control-gap text-sm font-medium", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function NumberFieldScrubAreaCursor2({
+  density,
+  className,
+  children = /* @__PURE__ */ jsx3(MoveHorizontalIcon, {}),
+  ...props
+}) {
+  const resolvedDensity = useDensity(density);
+  return /* @__PURE__ */ jsx3(NumberFieldPrimitive.ScrubAreaCursor, {
+    "data-density": resolvedDensity,
+    "data-slot": "number-field-scrub-area-cursor",
+    className: (state) => cn2("z-50 font-sans text-sm text-foreground [&_svg]:size-5", typeof className === "function" ? className(state) : className),
+    ...props,
+    children
+  });
+}
+
+export { Combobox2, ComboboxValue2, ComboboxTrigger2, ComboboxInput2, ComboboxContent2, ComboboxList2, ComboboxItem2, ComboboxGroup2, ComboboxLabel2, ComboboxCollection2, ComboboxEmpty2, ComboboxSeparator2, ComboboxChips2, ComboboxChip2, ComboboxChipsInput2, useComboboxAnchor2, ScrollArea2, ScrollBar2, NumberField2, NumberFieldGroup2, NumberFieldInput2, NumberFieldDecrement2, NumberFieldIncrement2, NumberFieldScrubArea2, NumberFieldScrubAreaCursor2 };