@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/chunk-RFIBUWLF.cjs

@@ -0,0 +1,232 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/settings/MultiSelect.tsx
+var MultiSelect = React__namespace.forwardRef(
+  ({
+    data,
+    value,
+    onChange,
+    searchValue,
+    onSearchChange,
+    placeholder = "Select options",
+    searchable = false,
+    clearable = false,
+    size = "md",
+    autoFocus = false,
+    onDropdownOpen,
+    onDropdownClose,
+    renderOption,
+    animation = 0,
+    modalPopover = false,
+    className,
+    ...props
+  }, ref) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(false);
+    const [internalSearchValue, setInternalSearchValue] = React__namespace.useState("");
+    const currentSearchValue = searchValue ?? internalSearchValue;
+    React__namespace.useEffect(() => {
+      if (isPopoverOpen && onDropdownOpen) {
+        onDropdownOpen();
+      } else if (!isPopoverOpen && onDropdownClose) {
+        onDropdownClose();
+      }
+    }, [isPopoverOpen, onDropdownOpen, onDropdownClose]);
+    React__namespace.useEffect(() => {
+      if (autoFocus) {
+        setIsPopoverOpen(true);
+      }
+    }, [autoFocus]);
+    const handleSearchValueChange = (newValue) => {
+      if (onSearchChange) {
+        onSearchChange(newValue);
+      } else {
+        setInternalSearchValue(newValue);
+      }
+    };
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return "min-h-8 text-sm";
+        case "lg":
+          return "min-h-12 text-base";
+        default:
+          return "min-h-10 text-sm";
+      }
+    };
+    const handleInputKeyDown = (event) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...value];
+        newSelectedValues.pop();
+        onChange(newSelectedValues);
+      }
+    };
+    const toggleOption = (optionValue) => {
+      const newSelectedValues = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+      onChange(newSelectedValues);
+    };
+    const handleClear = () => {
+      onChange([]);
+    };
+    const toggleAll = () => {
+      if (value.length === data.length) {
+        handleClear();
+      } else {
+        const allValues = data.map((option) => option.value);
+        onChange(allValues);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, modal: modalPopover, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          ref,
+          ...props,
+          variant: "outline",
+          className: ui.cn(
+            "flex w-full p-1 rounded-md border h-auto items-center justify-between bg-background hover:bg-accent [&_svg]:pointer-events-auto",
+            getSizeClasses(),
+            className
+          ),
+          "data-testid": "multi-select-trigger",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground mx-3", children: placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 cursor-pointer text-muted-foreground mx-2" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.PopoverContent,
+        {
+          className: "w-[var(--radix-popover-trigger-width)] p-0",
+          align: "start",
+          side: "bottom",
+          sideOffset: 4,
+          children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Command, { shouldFilter: true, children: [
+            searchable && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.CommandInput,
+              {
+                placeholder: "Search...",
+                value: currentSearchValue,
+                onValueChange: handleSearchValueChange,
+                onKeyDown: handleInputKeyDown,
+                autoFocus
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandList, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.CommandEmpty, { children: "No results found." }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.CommandGroup, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.CommandItem,
+                  {
+                    onSelect: toggleAll,
+                    className: "cursor-pointer",
+                    "data-testid": "multi-select-all-option",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          className: ui.cn(
+                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                            value.length === data.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(Select All)" })
+                    ]
+                  },
+                  "all"
+                ),
+                data.map((option) => {
+                  const isSelected = value.includes(option.value);
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.CommandItem,
+                    {
+                      value: option.label,
+                      onSelect: () => toggleOption(option.value),
+                      className: "cursor-pointer",
+                      "data-testid": `multi-select-option-${option.value}`,
+                      children: renderOption ? renderOption({ option, checked: isSelected }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: ui.cn(
+                              "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                              isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "h-4 w-4" })
+                          }
+                        ),
+                        option.icon && /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
+                      ] })
+                    },
+                    option.value
+                  );
+                })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.CommandSeparator, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.CommandGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                clearable && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.CommandItem,
+                    {
+                      onSelect: handleClear,
+                      className: "flex-1 justify-center cursor-pointer",
+                      "data-testid": "multi-select-clear-button",
+                      children: "Clear"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Separator, { orientation: "vertical", className: "flex min-h-6 h-full" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.CommandItem,
+                  {
+                    onSelect: () => setIsPopoverOpen(false),
+                    className: "flex-1 justify-center cursor-pointer max-w-full",
+                    "data-testid": "multi-select-close-button",
+                    children: "Close"
+                  }
+                )
+              ] }) })
+            ] })
+          ] })
+        }
+      ),
+      animation > 0 && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WandSparkles, { className: "cursor-pointer my-2 text-muted-foreground bg-background w-3 h-3" })
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+exports.MultiSelect = MultiSelect;
+//# sourceMappingURL=chunk-RFIBUWLF.cjs.map
+//# sourceMappingURL=chunk-RFIBUWLF.cjs.map

package/dist/chunk-RFIBUWLF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/settings/MultiSelect.tsx"],"names":["React","Popover","jsx","PopoverTrigger","Button","cn","jsxs","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","CheckIcon","Fragment","CommandSeparator","Separator","WandSparkles"],"mappings":"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","file":"chunk-RFIBUWLF.cjs","sourcesContent":["import * as React from 'react'\nimport { CheckIcon, ChevronDown, WandSparkles } from 'lucide-react'\n\nimport {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Separator,\n  cn,\n} from '@arbidocs/react/ui'\n\n/**\n * Variants for the multi-select component to handle different styles.\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\n */\n\n/**\n * Props for MultiSelect component\n */\ninterface MultiSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  /**\n   * An array of option objects to be displayed in the multi-select component.\n   * Each option object has a label, value, and an optional icon.\n   */\n  data: {\n    /** The text to display for the option. */\n    label: string\n    /** The unique value associated with the option. */\n    value: string\n    /** Optional icon component to display alongside the option. */\n    icon?: React.ComponentType<{ className?: string }>\n  }[]\n\n  /**\n   * Current selected values.\n   */\n  value: string[]\n\n  /**\n   * Callback function triggered when the selected values change.\n   * Receives an array of the new selected values.\n   */\n  onChange: (value: string[]) => void\n\n  /**\n   * Current search value for filtering options.\n   */\n  searchValue?: string\n\n  /**\n   * Callback function triggered when the search value changes.\n   */\n  onSearchChange?: (value: string) => void\n\n  /**\n   * Placeholder text to be displayed when no values are selected.\n   * Optional, defaults to \"Select options\".\n   */\n  placeholder?: string\n\n  /**\n   * Whether the component is searchable.\n   */\n  searchable?: boolean\n\n  /**\n   * Whether the component is clearable.\n   */\n  clearable?: boolean\n\n  /**\n   * Size of the component.\n   */\n  size?: 'sm' | 'md' | 'lg'\n\n  /**\n   * Whether the component should auto focus.\n   */\n  autoFocus?: boolean\n\n  /**\n   * Callback triggered when dropdown opens.\n   */\n  onDropdownOpen?: () => void\n\n  /**\n   * Callback triggered when dropdown closes.\n   */\n  onDropdownClose?: () => void\n\n  /**\n   * Custom render function for options.\n   */\n  renderOption?: (params: {\n    option: { label: string; value: string; icon?: React.ComponentType<{ className?: string }> }\n    checked: boolean\n  }) => React.ReactNode\n\n  /**\n   * Animation duration in seconds for the visual effects (e.g., bouncing badges).\n   * Optional, defaults to 0 (no animation).\n   */\n  animation?: number\n\n  /**\n   * Maximum number of items to display. Extra selected items will be summarized.\n   * Optional, defaults to 3.\n   */\n  maxCount?: number\n\n  /**\n   * The modality of the popover. When set to true, interaction with outside elements\n   * will be disabled and only popover content will be visible to screen readers.\n   * Optional, defaults to false.\n   */\n  modalPopover?: boolean\n\n  /**\n   * If true, renders the multi-select component as a child of another component.\n   * Optional, defaults to false.\n   */\n  asChild?: boolean\n\n  /**\n   * Additional class names to apply custom styles to the multi-select component.\n   * Optional, can be used to add custom styles.\n   */\n  className?: string\n}\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n  (\n    {\n      data,\n      value,\n      onChange,\n      searchValue,\n      onSearchChange,\n      placeholder = 'Select options',\n      searchable = false,\n      clearable = false,\n      size = 'md',\n      autoFocus = false,\n      onDropdownOpen,\n      onDropdownClose,\n      renderOption,\n      animation = 0,\n      modalPopover = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)\n    const [internalSearchValue, setInternalSearchValue] = React.useState('')\n\n    const currentSearchValue = searchValue ?? internalSearchValue\n\n    React.useEffect(() => {\n      if (isPopoverOpen && onDropdownOpen) {\n        onDropdownOpen()\n      } else if (!isPopoverOpen && onDropdownClose) {\n        onDropdownClose()\n      }\n    }, [isPopoverOpen, onDropdownOpen, onDropdownClose])\n\n    // Handle autoFocus - open dropdown immediately when component mounts\n    React.useEffect(() => {\n      if (autoFocus) {\n        setIsPopoverOpen(true)\n      }\n    }, [autoFocus])\n\n    const handleSearchValueChange = (newValue: string) => {\n      if (onSearchChange) {\n        onSearchChange(newValue)\n      } else {\n        setInternalSearchValue(newValue)\n      }\n    }\n\n    const getSizeClasses = () => {\n      switch (size) {\n        case 'sm':\n          return 'min-h-8 text-sm'\n        case 'lg':\n          return 'min-h-12 text-base'\n        default:\n          return 'min-h-10 text-sm'\n      }\n    }\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        setIsPopoverOpen(true)\n      } else if (event.key === 'Backspace' && !event.currentTarget.value) {\n        const newSelectedValues = [...value]\n        newSelectedValues.pop()\n        onChange(newSelectedValues)\n      }\n    }\n\n    const toggleOption = (optionValue: string) => {\n      const newSelectedValues = value.includes(optionValue)\n        ? value.filter((v) => v !== optionValue)\n        : [...value, optionValue]\n      onChange(newSelectedValues)\n    }\n\n    const handleClear = () => {\n      onChange([])\n    }\n\n    const toggleAll = () => {\n      if (value.length === data.length) {\n        handleClear()\n      } else {\n        const allValues = data.map((option) => option.value)\n        onChange(allValues)\n      }\n    }\n\n    return (\n      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>\n        <PopoverTrigger asChild>\n          <Button\n            ref={ref}\n            {...props}\n            variant=\"outline\"\n            className={cn(\n              'flex w-full p-1 rounded-md border h-auto items-center justify-between bg-background hover:bg-accent [&_svg]:pointer-events-auto',\n              getSizeClasses(),\n              className\n            )}\n            data-testid=\"multi-select-trigger\"\n          >\n            <div className=\"flex items-center justify-between w-full mx-auto\">\n              <span className=\"text-sm text-muted-foreground mx-3\">{placeholder}</span>\n              <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\n            </div>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-[var(--radix-popover-trigger-width)] p-0\"\n          align=\"start\"\n          side=\"bottom\"\n          sideOffset={4}\n        >\n          <Command shouldFilter={true}>\n            {searchable && (\n              <CommandInput\n                placeholder=\"Search...\"\n                value={currentSearchValue}\n                onValueChange={handleSearchValueChange}\n                onKeyDown={handleInputKeyDown}\n                autoFocus={autoFocus}\n              />\n            )}\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                <CommandItem\n                  key=\"all\"\n                  onSelect={toggleAll}\n                  className=\"cursor-pointer\"\n                  data-testid=\"multi-select-all-option\"\n                >\n                  <div\n                    className={cn(\n                      'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',\n                      value.length === data.length\n                        ? 'bg-primary text-primary-foreground'\n                        : 'opacity-50 [&_svg]:invisible'\n                    )}\n                  >\n                    <CheckIcon className=\"h-4 w-4\" />\n                  </div>\n                  <span>(Select All)</span>\n                </CommandItem>\n                {data.map((option) => {\n                  const isSelected = value.includes(option.value)\n                  return (\n                    <CommandItem\n                      key={option.value}\n                      value={option.label}\n                      onSelect={() => toggleOption(option.value)}\n                      className=\"cursor-pointer\"\n                      data-testid={`multi-select-option-${option.value}`}\n                    >\n                      {renderOption ? (\n                        renderOption({ option, checked: isSelected })\n                      ) : (\n                        <>\n                          <div\n                            className={cn(\n                              'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',\n                              isSelected\n                                ? 'bg-primary text-primary-foreground'\n                                : 'opacity-50 [&_svg]:invisible'\n                            )}\n                          >\n                            <CheckIcon className=\"h-4 w-4\" />\n                          </div>\n                          {option.icon && (\n                            <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                          )}\n                          <span>{option.label}</span>\n                        </>\n                      )}\n                    </CommandItem>\n                  )\n                })}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <div className=\"flex items-center justify-between\">\n                  {clearable && value.length > 0 && (\n                    <>\n                      <CommandItem\n                        onSelect={handleClear}\n                        className=\"flex-1 justify-center cursor-pointer\"\n                        data-testid=\"multi-select-clear-button\"\n                      >\n                        Clear\n                      </CommandItem>\n                      <Separator orientation=\"vertical\" className=\"flex min-h-6 h-full\" />\n                    </>\n                  )}\n                  <CommandItem\n                    onSelect={() => setIsPopoverOpen(false)}\n                    className=\"flex-1 justify-center cursor-pointer max-w-full\"\n                    data-testid=\"multi-select-close-button\"\n                  >\n                    Close\n                  </CommandItem>\n                </div>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n        {animation > 0 && value.length > 0 && (\n          <WandSparkles className=\"cursor-pointer my-2 text-muted-foreground bg-background w-3 h-3\" />\n        )}\n      </Popover>\n    )\n  }\n)\n\nMultiSelect.displayName = 'MultiSelect'\n"]}

package/dist/chunk-S5T7ZTX2.js

@@ -0,0 +1,266 @@
+"use client";
+import { tid } from './chunk-RBXZYNVB.js';
+import { EmptyState } from './chunk-P6GHJSLR.js';
+import { ActionLink } from './chunk-S7PSMMRG.js';
+import { ArrowUp, ArrowDown, ChevronsUpDown, ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { Table, TableHeader, TableRow, TableHead, cn, TableBody, TableCell, Card } from '@arbidocs/react/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var alignClass = { left: "text-left", right: "text-right", center: "text-center" };
+var DEFAULT_SELECTION_LABELS = { selectAll: "Select all rows", selectRow: "Select row" };
+function DataTable({
+  columns,
+  rows,
+  getRowId,
+  onRowClick,
+  area = "data",
+  testIds,
+  emptyTitle = "Nothing to show",
+  emptyDescription,
+  sort,
+  onSortChange,
+  selectedIds,
+  onSelectedIdsChange,
+  selectionLabels,
+  className
+}) {
+  const ids = {
+    table: testIds?.table ?? tid(area, "table"),
+    empty: testIds?.empty ?? tid(area, "empty"),
+    row: testIds?.row ?? ((id) => tid(area, "row", id))
+  };
+  const labels = { ...DEFAULT_SELECTION_LABELS, ...selectionLabels };
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle, description: emptyDescription, testId: ids.empty });
+  }
+  const isSelectable = Boolean(onSelectedIdsChange);
+  const selected = new Set(selectedIds ?? []);
+  const rowIds = rows.map(getRowId);
+  const allSelected = rowIds.length > 0 && rowIds.every((id) => selected.has(id));
+  const toggleRow = (id) => {
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    onSelectedIdsChange?.([...next]);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border border-border bg-card", className), children: /* @__PURE__ */ jsxs(Table, { "data-testid": ids.table, children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+      isSelectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          "aria-label": labels.selectAll,
+          checked: allSelected,
+          onChange: () => onSelectedIdsChange?.(allSelected ? [] : rowIds)
+        }
+      ) }),
+      columns.map((c) => {
+        const active = sort?.key === c.key ? sort : null;
+        const isSortable = c.isSortable && onSortChange;
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "aria-sort": active ? active.direction === "asc" ? "ascending" : "descending" : void 0,
+            className: cn(c.align && alignClass[c.align], c.headClassName),
+            children: isSortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex items-center gap-1 hover:text-foreground",
+                onClick: () => onSortChange({
+                  key: c.key,
+                  direction: active?.direction === "asc" ? "desc" : "asc"
+                }),
+                children: [
+                  c.header,
+                  active ? active.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3 opacity-50" })
+                ]
+              }
+            ) : c.header
+          },
+          c.key
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
+      const id = getRowId(row);
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-testid": ids.row(id),
+          "data-state": selected.has(id) ? "selected" : void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          className: cn(onRowClick && "cursor-pointer"),
+          children: [
+            isSelectable && /* @__PURE__ */ jsx(TableCell, { className: "w-10", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                "aria-label": labels.selectRow,
+                checked: selected.has(id),
+                onChange: () => toggleRow(id)
+              }
+            ) }),
+            columns.map((c) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn(c.align && alignClass[c.align], c.className),
+                children: c.render(row)
+              },
+              c.key
+            ))
+          ]
+        },
+        id
+      );
+    }) })
+  ] }) });
+}
+function DataTableBlock({ columns, rows, caption, emptyText, testId }) {
+  const area = testId ?? "data-table-block";
+  const tableColumns = columns.map((col, index) => ({
+    key: col.field || `col-${index}`,
+    header: col.header,
+    align: col.align,
+    render: (row) => row.cells[col.field] ?? ""
+  }));
+  const tableRows = rows.map((cells, index) => ({ __id: String(index), cells }));
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+    caption ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mb-2 text-sm text-muted-foreground",
+        "data-testid": testId ? `${testId}-caption` : void 0,
+        children: caption
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns: tableColumns,
+        rows: tableRows,
+        getRowId: (row) => row.__id,
+        area,
+        emptyTitle: emptyText
+      }
+    )
+  ] });
+}
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  leading,
+  actions,
+  tabs,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+        leading && /* @__PURE__ */ jsx("div", { className: "shrink-0", "data-slot": "page-header-leading", children: leading }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
+        ] })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+    ] }),
+    tabs && /* @__PURE__ */ jsx("div", { "data-slot": "page-header-tabs", children: tabs })
+  ] });
+}
+function MetricCard({
+  label,
+  value,
+  icon: Icon,
+  hint,
+  delta,
+  accent = "default",
+  isLoading = false,
+  href,
+  onSelect,
+  className,
+  testId
+}) {
+  const accentStyle = accent && accent !== "default" ? { color: `var(--color-${accent})` } : void 0;
+  const deltaGood = delta?.good ?? delta?.direction === "up";
+  const isInteractive = Boolean(href || onSelect);
+  const card = /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "elevated",
+      className: cn("card-hover rounded-xl p-5", className),
+      "data-testid": isInteractive ? void 0 : testId,
+      "aria-busy": isLoading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", style: accentStyle })
+        ] }),
+        isLoading ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-2 h-8 w-20 animate-pulse rounded bg-muted",
+            "data-slot": "metric-card-skeleton"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "mt-2 font-display text-2xl font-semibold tracking-tight",
+            "data-testid": testId && `${testId}-value`,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+          delta && !isLoading && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-0.5 text-xs font-medium",
+                deltaGood ? "text-success" : "text-destructive"
+              ),
+              children: [
+                delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
+                delta.value
+              ]
+            }
+          ),
+          hint && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: hint })
+        ] })
+      ]
+    }
+  );
+  if (!isInteractive) return card;
+  return /* @__PURE__ */ jsx(
+    ActionLink,
+    {
+      href,
+      onSelect,
+      className: "block rounded-xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-testid": testId,
+      children: card
+    }
+  );
+}
+var GRID = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4"
+};
+function StatGroup({ items, testId }) {
+  const list = items ?? [];
+  const cols = GRID[Math.min(list.length, 4)] ?? GRID[4];
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-8", cols), "data-testid": testId, children: list.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsx("dt", { className: "sr-only", children: item.label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-4xl font-semibold tracking-tight sm:text-5xl", children: item.value }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.label }),
+    item.sub && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground/80", children: item.sub })
+  ] }, i)) });
+}
+
+export { DataTable, DataTableBlock, MetricCard, PageHeader, StatGroup };
+//# sourceMappingURL=chunk-S5T7ZTX2.js.map
+//# sourceMappingURL=chunk-S5T7ZTX2.js.map

package/dist/chunk-S5T7ZTX2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataTable.tsx","../src/components/DataTableBlock.tsx","../src/components/PageHeader.tsx","../src/components/MetricCard.tsx","../src/components/StatGroup.tsx"],"names":["jsxs","jsx","cn"],"mappings":"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","file":"chunk-S5T7ZTX2.js","sourcesContent":["import type { ReactNode } from 'react'\nimport { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@arbidocs/react/ui'\nimport { tid } from '../lib/testid'\nimport { EmptyState } from './EmptyState'\n\nexport interface Column<T> {\n  key: string\n  header: ReactNode\n  render: (row: T) => ReactNode\n  align?: 'left' | 'right' | 'center'\n  /** Header becomes a sort button (needs `sort` and `onSortChange` on the table). */\n  isSortable?: boolean\n  className?: string\n  headClassName?: string\n}\n\nexport interface DataTableSort {\n  key: string\n  direction: 'asc' | 'desc'\n}\n\nexport interface DataTableTestIds {\n  table: string\n  empty: string\n  /** Test id of a row. */\n  row: (id: string) => string\n}\n\nexport interface DataTableProps<T> {\n  columns: Column<T>[]\n  rows: T[]\n  getRowId: (row: T) => string\n  onRowClick?: (row: T) => void\n  /** Test id area prefix, e.g. \"orders\" gives rows \"orders-row-{id}\". Default \"data\". */\n  area?: string\n  /** Replaces the ids derived from `area`. */\n  testIds?: Partial<DataTableTestIds>\n  emptyTitle?: string\n  emptyDescription?: string\n  /** Controlled sort state. The host sorts `rows`; the table only renders headers. */\n  sort?: DataTableSort | null\n  onSortChange?: (sort: DataTableSort) => void\n  /** Controlled row selection: adds a leading checkbox column when `onSelectedIdsChange` is set. */\n  selectedIds?: string[]\n  onSelectedIdsChange?: (ids: string[]) => void\n  /** Accessible names of the selection checkboxes. */\n  selectionLabels?: { selectAll: string; selectRow: string }\n  className?: string\n}\n\nconst alignClass = { left: 'text-left', right: 'text-right', center: 'text-center' } as const\n\nconst DEFAULT_SELECTION_LABELS = { selectAll: 'Select all rows', selectRow: 'Select row' }\n\n/** The one true table. Column-config driven, fully test-id'd, optional navigation, sort, selection. */\nexport function DataTable<T>({\n  columns,\n  rows,\n  getRowId,\n  onRowClick,\n  area = 'data',\n  testIds,\n  emptyTitle = 'Nothing to show',\n  emptyDescription,\n  sort,\n  onSortChange,\n  selectedIds,\n  onSelectedIdsChange,\n  selectionLabels,\n  className,\n}: DataTableProps<T>) {\n  const ids = {\n    table: testIds?.table ?? tid(area, 'table'),\n    empty: testIds?.empty ?? tid(area, 'empty'),\n    row: testIds?.row ?? ((id: string) => tid(area, 'row', id)),\n  }\n  const labels = { ...DEFAULT_SELECTION_LABELS, ...selectionLabels }\n  if (rows.length === 0) {\n    return <EmptyState title={emptyTitle} description={emptyDescription} testId={ids.empty} />\n  }\n\n  const isSelectable = Boolean(onSelectedIdsChange)\n  const selected = new Set(selectedIds ?? [])\n  const rowIds = rows.map(getRowId)\n  const allSelected = rowIds.length > 0 && rowIds.every((id) => selected.has(id))\n  const toggleRow = (id: string) => {\n    const next = new Set(selected)\n    if (next.has(id)) next.delete(id)\n    else next.add(id)\n    onSelectedIdsChange?.([...next])\n  }\n\n  return (\n    <div className={cn('rounded-lg border border-border bg-card', className)}>\n      <Table data-testid={ids.table}>\n        <TableHeader>\n          <TableRow className=\"hover:bg-transparent\">\n            {isSelectable && (\n              <TableHead className=\"w-10\">\n                <input\n                  type=\"checkbox\"\n                  aria-label={labels.selectAll}\n                  checked={allSelected}\n                  onChange={() => onSelectedIdsChange?.(allSelected ? [] : rowIds)}\n                />\n              </TableHead>\n            )}\n            {columns.map((c) => {\n              const active = sort?.key === c.key ? sort : null\n              const isSortable = c.isSortable && onSortChange\n              return (\n                <TableHead\n                  key={c.key}\n                  aria-sort={\n                    active ? (active.direction === 'asc' ? 'ascending' : 'descending') : undefined\n                  }\n                  className={cn(c.align && alignClass[c.align], c.headClassName)}\n                >\n                  {isSortable ? (\n                    <button\n                      type=\"button\"\n                      className=\"inline-flex items-center gap-1 hover:text-foreground\"\n                      onClick={() =>\n                        onSortChange({\n                          key: c.key,\n                          direction: active?.direction === 'asc' ? 'desc' : 'asc',\n                        })\n                      }\n                    >\n                      {c.header}\n                      {active ? (\n                        active.direction === 'asc' ? (\n                          <ArrowUp className=\"size-3\" />\n                        ) : (\n                          <ArrowDown className=\"size-3\" />\n                        )\n                      ) : (\n                        <ChevronsUpDown className=\"size-3 opacity-50\" />\n                      )}\n                    </button>\n                  ) : (\n                    c.header\n                  )}\n                </TableHead>\n              )\n            })}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {rows.map((row) => {\n            const id = getRowId(row)\n            return (\n              <TableRow\n                key={id}\n                data-testid={ids.row(id)}\n                data-state={selected.has(id) ? 'selected' : undefined}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n                className={cn(onRowClick && 'cursor-pointer')}\n              >\n                {isSelectable && (\n                  <TableCell className=\"w-10\" onClick={(e) => e.stopPropagation()}>\n                    <input\n                      type=\"checkbox\"\n                      aria-label={labels.selectRow}\n                      checked={selected.has(id)}\n                      onChange={() => toggleRow(id)}\n                    />\n                  </TableCell>\n                )}\n                {columns.map((c) => (\n                  <TableCell\n                    key={c.key}\n                    className={cn(c.align && alignClass[c.align], c.className)}\n                  >\n                    {c.render(row)}\n                  </TableCell>\n                ))}\n              </TableRow>\n            )\n          })}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n","/**\n * A **serializable** data table for the Puck builder.\n *\n * The library's developer-facing {@link DataTable} is driven by `Column<T>` whose\n * `header`/`render` are React nodes and functions — powerful, but non-serializable,\n * so it can never be a Puck block. `DataTableBlock` closes that gap with a flat,\n * JSON-safe schema (string headers, string field keys, string cells) and rebuilds\n * the non-serializable `Column<Row>[]` internally, rendering through the very same\n * {@link DataTable} so it inherits the library's markup and tokens verbatim.\n */\nimport { DataTable, type Column } from './DataTable'\n\nexport interface DataTableBlockColumn {\n  /** Column heading text. */\n  header: string\n  /** Key used to look a cell up in each row record. */\n  field: string\n  /** Cell/heading alignment. */\n  align?: 'left' | 'right' | 'center'\n}\n\nexport interface DataTableBlockProps {\n  /** Serializable column schema. */\n  columns: DataTableBlockColumn[]\n  /** One record per row; cells are looked up by each column's `field`. */\n  rows: Array<Record<string, string>>\n  /** Optional caption rendered above the table. */\n  caption?: string\n  /** Empty-state title shown when there are no rows. */\n  emptyText?: string\n  /** testid area prefix; also set on the wrapper element. */\n  testId?: string\n}\n\n/** A row wrapper so {@link DataTable} gets a stable id without polluting the record. */\ninterface TableRowData {\n  __id: string\n  cells: Record<string, string>\n}\n\n/**\n * Renders a {@link DataTable} from a flat, serializable schema. Columns are mapped\n * to `Column<TableRowData>[]` (header string, positional-stable key, alignment) and\n * each cell is resolved by `field`; rows carry a synthetic id for React keys/testids.\n */\nexport function DataTableBlock({ columns, rows, caption, emptyText, testId }: DataTableBlockProps) {\n  const area = testId ?? 'data-table-block'\n\n  const tableColumns: Column<TableRowData>[] = columns.map((col, index) => ({\n    key: col.field || `col-${index}`,\n    header: col.header,\n    align: col.align,\n    render: (row) => row.cells[col.field] ?? '',\n  }))\n\n  const tableRows: TableRowData[] = rows.map((cells, index) => ({ __id: String(index), cells }))\n\n  return (\n    <div data-testid={testId}>\n      {caption ? (\n        <p\n          className=\"mb-2 text-sm text-muted-foreground\"\n          data-testid={testId ? `${testId}-caption` : undefined}\n        >\n          {caption}\n        </p>\n      ) : null}\n      <DataTable\n        columns={tableColumns}\n        rows={tableRows}\n        getRowId={(row) => row.__id}\n        area={area}\n        emptyTitle={emptyText}\n      />\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport interface PageHeaderProps {\n  title: ReactNode\n  eyebrow?: ReactNode\n  description?: ReactNode\n  /** Before the title block: a back button, an avatar or an icon. */\n  leading?: ReactNode\n  actions?: ReactNode\n  /** Under the whole header: a tab strip or segmented control. */\n  tabs?: ReactNode\n  className?: string\n  testId?: string\n}\n\n/** Standard page title block: leading + eyebrow + title + description + actions, then tabs. */\nexport function PageHeader({\n  title,\n  eyebrow,\n  description,\n  leading,\n  actions,\n  tabs,\n  className,\n  testId,\n}: PageHeaderProps) {\n  return (\n    <div className={cn('flex flex-col gap-3', className)} data-testid={testId}>\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between\">\n        <div className=\"flex min-w-0 items-center gap-3\">\n          {leading && (\n            <div className=\"shrink-0\" data-slot=\"page-header-leading\">\n              {leading}\n            </div>\n          )}\n          <div className=\"min-w-0\">\n            {eyebrow && (\n              <p className=\"mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                {eyebrow}\n              </p>\n            )}\n            <h1 className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n              {title}\n            </h1>\n            {description && (\n              <p className=\"mt-1 max-w-2xl text-sm text-muted-foreground\">{description}</p>\n            )}\n          </div>\n        </div>\n        {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n      </div>\n      {tabs && <div data-slot=\"page-header-tabs\">{tabs}</div>}\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { ArrowDownRight, ArrowUpRight } from 'lucide-react'\nimport { Card, cn } from '@arbidocs/react/ui'\nimport { ActionLink } from './ActionLink'\n\nexport interface MetricCardProps {\n  label: ReactNode\n  value: ReactNode\n  icon?: LucideIcon\n  hint?: ReactNode\n  delta?: { value: string; direction: 'up' | 'down'; good?: boolean }\n  /**\n   * Icon accent as a theme colour-token key (e.g. `primary`, `success`, or the host's own brand\n   * token). Resolved to `var(--color-<accent>)` at render. `'default'` inherits `foreground`.\n   */\n  accent?: string\n  /** Show a placeholder instead of the value (the figure is still being fetched). */\n  isLoading?: boolean\n  /** Makes the tile a real link (ctrl/cmd-click works). */\n  href?: string\n  /** Click handler; with `href`, a plain click calls it instead of navigating. */\n  onSelect?: () => void\n  className?: string\n  testId?: string\n}\n\n/** The one true KPI tile. Used across every dashboard and module header. */\nexport function MetricCard({\n  label,\n  value,\n  icon: Icon,\n  hint,\n  delta,\n  accent = 'default',\n  isLoading = false,\n  href,\n  onSelect,\n  className,\n  testId,\n}: MetricCardProps) {\n  const accentStyle =\n    accent && accent !== 'default' ? { color: `var(--color-${accent})` } : undefined\n  const deltaGood = delta?.good ?? delta?.direction === 'up'\n  const isInteractive = Boolean(href || onSelect)\n  const card = (\n    <Card\n      variant=\"elevated\"\n      className={cn('card-hover rounded-xl p-5', className)}\n      data-testid={isInteractive ? undefined : testId}\n      aria-busy={isLoading || undefined}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <p className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">{label}</p>\n        {Icon && <Icon className=\"size-4 shrink-0\" style={accentStyle} />}\n      </div>\n      {isLoading ? (\n        <div\n          className=\"mt-2 h-8 w-20 animate-pulse rounded bg-muted\"\n          data-slot=\"metric-card-skeleton\"\n        />\n      ) : (\n        <p\n          className=\"mt-2 font-display text-2xl font-semibold tracking-tight\"\n          data-testid={testId && `${testId}-value`}\n        >\n          {value}\n        </p>\n      )}\n      <div className=\"mt-1 flex items-center gap-2\">\n        {delta && !isLoading && (\n          <span\n            className={cn(\n              'inline-flex items-center gap-0.5 text-xs font-medium',\n              deltaGood ? 'text-success' : 'text-destructive'\n            )}\n          >\n            {delta.direction === 'up' ? (\n              <ArrowUpRight className=\"size-3\" />\n            ) : (\n              <ArrowDownRight className=\"size-3\" />\n            )}\n            {delta.value}\n          </span>\n        )}\n        {hint && <span className=\"text-xs text-muted-foreground\">{hint}</span>}\n      </div>\n    </Card>\n  )\n  if (!isInteractive) return card\n  return (\n    <ActionLink\n      href={href}\n      onSelect={onSelect}\n      className=\"block rounded-xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n      data-testid={testId}\n    >\n      {card}\n    </ActionLink>\n  )\n}\n","import { cn } from '@arbidocs/react/ui'\n\nexport interface StatItem {\n  value: string\n  label: string\n  /** Optional caption under the label (e.g. a qualifier or unit). */\n  sub?: string\n}\n\nexport interface StatGroupProps {\n  items: StatItem[]\n  testId?: string\n}\n\nconst GRID: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-2 sm:grid-cols-3',\n  4: 'grid-cols-2 lg:grid-cols-4',\n}\n\n/** Big-number stat group — headline metrics with captions. */\nexport function StatGroup({ items, testId }: StatGroupProps) {\n  const list = items ?? []\n  const cols = GRID[Math.min(list.length, 4)] ?? GRID[4]\n  return (\n    <dl className={cn('grid gap-8', cols)} data-testid={testId}>\n      {list.map((item, i) => (\n        <div key={i} className=\"text-center\" data-testid={testId && `${testId}-item-${i}`}>\n          <dt className=\"sr-only\">{item.label}</dt>\n          <dd className=\"text-4xl font-semibold tracking-tight sm:text-5xl\">{item.value}</dd>\n          <p className=\"mt-2 text-sm text-muted-foreground\">{item.label}</p>\n          {item.sub && <p className=\"mt-1 text-xs text-muted-foreground/80\">{item.sub}</p>}\n        </div>\n      ))}\n    </dl>\n  )\n}\n"]}

package/dist/chunk-S7PSMMRG.js

@@ -0,0 +1,38 @@
+"use client";
+import { useBlocksEnvironment } from './chunk-76JDDMSP.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function isModifiedClick(event) {
+  return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+}
+var ActionLink = forwardRef(function ActionLink2({ href, onSelect, disabled, children, ...rest }, ref) {
+  const { linkComponent: Link } = useBlocksEnvironment();
+  if (!href || disabled) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type: "button",
+        disabled,
+        onClick: onSelect,
+        children
+      }
+    );
+  }
+  const handleClick = (event) => {
+    if (!onSelect || event.defaultPrevented || isModifiedClick(event)) return;
+    event.preventDefault();
+    onSelect();
+  };
+  const anchorProps = { ...rest, href, onClick: handleClick };
+  if (Link) {
+    return /* @__PURE__ */ jsx(Link, { ...anchorProps, ...{ ref }, children });
+  }
+  return /* @__PURE__ */ jsx("a", { ...anchorProps, ref, children });
+});
+
+export { ActionLink };
+//# sourceMappingURL=chunk-S7PSMMRG.js.map
+//# sourceMappingURL=chunk-S7PSMMRG.js.map

package/dist/chunk-S7PSMMRG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ActionLink.tsx"],"names":["ActionLink"],"mappings":";;;;AAyBA,SAAS,gBAAgB,KAAA,EAA4B;AACnD,EAAA,OAAO,KAAA,CAAM,WAAW,CAAA,IAAK,KAAA,CAAM,WAAW,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,QAAA,IAAY,KAAA,CAAM,MAAA;AACzF;AAOO,IAAM,UAAA,GAAa,UAAA,CAAyC,SAASA,WAAAA,CAC1E,EAAE,IAAA,EAAM,QAAA,EAAU,QAAA,EAAU,QAAA,EAAU,GAAG,IAAA,EAAK,EAC9C,GAAA,EACA;AACA,EAAA,MAAM,EAAE,aAAA,EAAe,IAAA,EAAK,GAAI,oBAAA,EAAqB;AAErD,EAAA,IAAI,CAAC,QAAQ,QAAA,EAAU;AACrB,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,QAAA;AAAA,QACA,OAAA,EAAS,QAAA;AAAA,QAER;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,IAAI,CAAC,QAAA,IAAY,KAAA,CAAM,gBAAA,IAAoB,eAAA,CAAgB,KAAK,CAAA,EAAG;AACnE,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,QAAA,EAAS;AAAA,EACX,CAAA;AACA,EAAA,MAAM,cAAc,EAAE,GAAG,IAAA,EAAM,IAAA,EAAM,SAAS,WAAA,EAAY;AAC1D,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,uBACE,GAAA,CAAC,QAAM,GAAG,WAAA,EAAc,GAAI,EAAE,GAAA,IAC3B,QAAA,EACH,CAAA;AAAA,EAEJ;AACA,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAG,GAAG,WAAA,EAAa,KACjB,QAAA,EACH,CAAA;AAEJ,CAAC","file":"chunk-S7PSMMRG.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { useBlocksEnvironment } from '../provider/BlocksProvider'\nimport type { BlockLinkRenderProps } from './blockLink'\n\nexport interface ActionLinkProps extends Omit<\n  ComponentPropsWithoutRef<'button'>,\n  'onClick' | 'type' | 'children'\n> {\n  /**\n   * Destination. When set (and not `disabled`) the control is a real anchor, rendered through\n   * `BlocksProvider`'s `linkComponent` (plain `<a>` by default), so ctrl/cmd-click and \"open in new\n   * tab\" work. Without `onSelect` a plain click navigates through the link; with `onSelect`, a plain\n   * click calls it instead (it owns navigation) and modified clicks still use the link.\n   */\n  href?: string\n  onSelect?: () => void\n  children?: ReactNode\n}\n\nfunction isModifiedClick(event: MouseEvent): boolean {\n  return event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey\n}\n\n/**\n * The one \"go somewhere / do something\" control of the link-like blocks: a `<button>` without an\n * `href`, an anchor with one. Forwards its ref and any extra props so it can sit under a\n * tooltip or popover trigger `asChild`.\n */\nexport const ActionLink = forwardRef<HTMLElement, ActionLinkProps>(function ActionLink(\n  { href, onSelect, disabled, children, ...rest },\n  ref\n) {\n  const { linkComponent: Link } = useBlocksEnvironment()\n\n  if (!href || disabled) {\n    return (\n      <button\n        {...rest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        disabled={disabled}\n        onClick={onSelect}\n      >\n        {children}\n      </button>\n    )\n  }\n\n  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n    if (!onSelect || event.defaultPrevented || isModifiedClick(event)) return\n    event.preventDefault()\n    onSelect()\n  }\n  const anchorProps = { ...rest, href, onClick: handleClick } as BlockLinkRenderProps\n  if (Link) {\n    return (\n      <Link {...anchorProps} {...({ ref } as object)}>\n        {children}\n      </Link>\n    )\n  }\n  return (\n    <a {...anchorProps} ref={ref as Ref<HTMLAnchorElement>}>\n      {children}\n    </a>\n  )\n})\n"]}