@upbound/monarch-blocks 0.2.0 → 0.2.1

package/dist/code-block.d.ts

@@ -6,16 +6,22 @@ declare function CodeBlock({ className, variant, size, ...props }: React.Compone
     size?: 'default' | 'sm';
 }): react_jsx_runtime.JSX.Element;
 declare function CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
-declare function CodeBlockBody({ className, code, html, lineNumbers, maxHeight, copyButton, ...props }: React.ComponentProps<'div'> & {
+declare function CodeBlockBody({ className, code, html, lineNumbers, maxHeight, copyButton, downloadButton, ...props }: React.ComponentProps<'div'> & {
     code: string;
     html?: string;
     lineNumbers?: boolean;
     maxHeight?: string;
     copyButton?: React.ReactNode;
+    downloadButton?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 declare function CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
 declare function CodeBlockCopyButton({ code, className, ...props }: Omit<React.ComponentProps<'button'>, 'children'> & {
     code: string;
 }): react_jsx_runtime.JSX.Element;
+declare function CodeBlockDownloadButton({ code, fileName, mimeType, className, ...props }: Omit<React.ComponentProps<'button'>, 'children'> & {
+    code: string;
+    fileName: string;
+    mimeType?: string;
+}): react_jsx_runtime.JSX.Element;
 
-export { CodeBlock, CodeBlockBody, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader };
+export { CodeBlock, CodeBlockBody, CodeBlockCopyButton, CodeBlockDownloadButton, CodeBlockFooter, CodeBlockHeader };

package/dist/code-block.js

@@ -69,7 +69,15 @@ function cn(...inputs) {
 }
 
 // src/code-block.tsx
-import { Card, CardContent, CardFooter, CardHeader } from "@upbound/monarch-core";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "@upbound/monarch-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 function CodeBlock(_a) {
   var _b = _a, {
@@ -117,17 +125,22 @@ function CodeBlockBody(_a) {
     html,
     lineNumbers,
     maxHeight,
-    copyButton
+    copyButton,
+    downloadButton
   } = _b, props = __objRest(_b, [
     "className",
     "code",
     "html",
     "lineNumbers",
     "maxHeight",
-    "copyButton"
+    "copyButton",
+    "downloadButton"
   ]);
   return /* @__PURE__ */ jsxs(CardContent, __spreadProps(__spreadValues({ "data-line-numbers": lineNumbers || void 0, className: cn("relative p-0!", className) }, props), { children: [
-    copyButton && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover/code-block:opacity-100", children: copyButton }),
+    (copyButton || downloadButton) && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100", children: [
+      copyButton,
+      downloadButton
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -173,28 +186,79 @@ function CodeBlockCopyButton(_a) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      "data-slot": "code-block-copy-button",
-      onClick: handleCopy,
-      className: cn(
-        "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
-        "text-muted-foreground hover:bg-accent hover:text-foreground",
-        "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
-        "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg",
-        className
-      ),
-      "aria-label": copied ? "Copied" : "Copy code"
-    }, props), {
-      children: copied ? /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm", className: "text-green-500" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", size: "sm" })
-    })
-  );
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        "data-slot": "code-block-copy-button",
+        onClick: handleCopy,
+        className: cn(
+          "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
+          "text-muted-foreground hover:bg-accent hover:text-foreground",
+          "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
+          "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg",
+          className
+        ),
+        "aria-label": copied ? "Copied" : "Copy code"
+      }, props), {
+        children: copied ? /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm", className: "text-green-500" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", size: "sm" })
+      })
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: copied ? "Copied" : "Copy" })
+  ] });
+}
+function CodeBlockDownloadButton(_a) {
+  var _b = _a, {
+    code,
+    fileName,
+    mimeType = "text/plain",
+    className
+  } = _b, props = __objRest(_b, [
+    "code",
+    "fileName",
+    "mimeType",
+    "className"
+  ]);
+  const [downloaded, setDownloaded] = useState(false);
+  const handleDownload = () => {
+    const blob = new Blob([code], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    setDownloaded(true);
+    setTimeout(() => setDownloaded(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        "data-slot": "code-block-download-button",
+        onClick: handleDownload,
+        className: cn(
+          "border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors",
+          "text-muted-foreground hover:bg-accent hover:text-foreground",
+          "focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none",
+          "group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg",
+          className
+        ),
+        "aria-label": downloaded ? "Downloaded" : "Download code"
+      }, props), {
+        children: downloaded ? /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm", className: "text-green-500" }) : /* @__PURE__ */ jsx(Icon, { name: "download", size: "sm" })
+      })
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: downloaded ? "Downloaded" : "Download" })
+  ] });
 }
 export {
   CodeBlock,
   CodeBlockBody,
   CodeBlockCopyButton,
+  CodeBlockDownloadButton,
   CodeBlockFooter,
   CodeBlockHeader
 };

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/code-block.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { Icon } from '@upbound/monarch-core';\n\nimport { cn } from '@/lib/utils';\nimport { Card, CardContent, CardFooter, CardHeader } from '@upbound/monarch-core';\n\nfunction CodeBlock({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'terminal';\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <Card\n      data-slot=\"code-block\"\n      data-variant={variant}\n      data-size={size}\n      role=\"region\"\n      className={cn(\n        'group/code-block gap-0 overflow-hidden py-0',\n        size === 'default' && 'text-[13px]',\n        size === 'sm' && 'text-body-sm',\n        variant === 'terminal' && 'border-terminal-border bg-terminal-bg text-terminal-fg ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardHeader\n      className={cn(\n        'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted flex flex-row items-center gap-2 border-b bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))] py-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockBody({\n  className,\n  code,\n  html,\n  lineNumbers,\n  maxHeight,\n  copyButton,\n  ...props\n}: React.ComponentProps<'div'> & {\n  code: string;\n  html?: string;\n  lineNumbers?: boolean;\n  maxHeight?: string;\n  copyButton?: React.ReactNode;\n}) {\n  // Layout note: the copy button must stay anchored to the top-right of the\n  // visible code area when the content scrolls horizontally. To make that\n  // work the relative containing block (CardContent) must NOT be the\n  // scrollable element — otherwise `right`-positioning is computed against\n  // the scrolled content edge and the button moves with the scroll. So the\n  // overflow lives on an inner wrapper and the absolute button is its\n  // sibling under CardContent.\n  return (\n    <CardContent data-line-numbers={lineNumbers || undefined} className={cn('relative p-0!', className)} {...props}>\n      {copyButton && (\n        <div className=\"absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover/code-block:opacity-100\">\n          {copyButton}\n        </div>\n      )}\n      <div\n        className={cn('overflow-x-auto', maxHeight && 'overflow-y-auto')}\n        style={maxHeight ? { maxHeight } : undefined}\n      >\n        {html ? (\n          <div\n            className=\"[&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3\"\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        ) : lineNumbers ? (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono\">\n              {code.split('\\n').map((line, i) => (\n                <span key={i} className=\"line\">\n                  {line}\n                  {'\\n'}\n                </span>\n              ))}\n            </code>\n          </pre>\n        ) : (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono whitespace-pre\">{code}</code>\n          </pre>\n        )}\n      </div>\n    </CardContent>\n  );\n}\n\nfunction CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardFooter\n      className={cn(\n        'text-body-sm group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-footer-bg group-data-[variant=terminal]/code-block:text-terminal-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockCopyButton({\n  code,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <button\n      data-slot=\"code-block-copy-button\"\n      onClick={handleCopy}\n      className={cn(\n        'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n        'text-muted-foreground hover:bg-accent hover:text-foreground',\n        'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n        'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n        className,\n      )}\n      aria-label={copied ? 'Copied' : 'Copy code'}\n      {...props}\n    >\n      {copied ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"copy\" size=\"sm\" />}\n    </button>\n  );\n}\n\nexport { CodeBlock, CodeBlockHeader, CodeBlockBody, CodeBlockFooter, CodeBlockCopyButton };\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/code-block.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { Icon } from '@upbound/monarch-core';\n\nimport { cn } from '@/lib/utils';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@upbound/monarch-core';\n\nfunction CodeBlock({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: React.ComponentProps<'div'> & {\n  variant?: 'default' | 'terminal';\n  size?: 'default' | 'sm';\n}) {\n  return (\n    <Card\n      data-slot=\"code-block\"\n      data-variant={variant}\n      data-size={size}\n      role=\"region\"\n      className={cn(\n        'group/code-block gap-0 overflow-hidden py-0',\n        size === 'default' && 'text-[13px]',\n        size === 'sm' && 'text-body-sm',\n        variant === 'terminal' && 'border-terminal-border bg-terminal-bg text-terminal-fg ring-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardHeader\n      className={cn(\n        'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted flex flex-row items-center gap-2 border-b bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))] py-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockBody({\n  className,\n  code,\n  html,\n  lineNumbers,\n  maxHeight,\n  copyButton,\n  downloadButton,\n  ...props\n}: React.ComponentProps<'div'> & {\n  code: string;\n  html?: string;\n  lineNumbers?: boolean;\n  maxHeight?: string;\n  copyButton?: React.ReactNode;\n  downloadButton?: React.ReactNode;\n}) {\n  // Layout note: the copy/download buttons must stay anchored to the\n  // top-right of the visible code area when the content scrolls\n  // horizontally. To make that work the relative containing block\n  // (CardContent) must NOT be the scrollable element — otherwise\n  // `right`-positioning is computed against the scrolled content edge and\n  // the buttons move with the scroll. So the overflow lives on an inner\n  // wrapper and the absolute button group is its sibling under CardContent.\n  return (\n    <CardContent data-line-numbers={lineNumbers || undefined} className={cn('relative p-0!', className)} {...props}>\n      {(copyButton || downloadButton) && (\n        <div className=\"absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition-opacity group-hover/code-block:opacity-100\">\n          {copyButton}\n          {downloadButton}\n        </div>\n      )}\n      <div\n        className={cn('overflow-x-auto', maxHeight && 'overflow-y-auto')}\n        style={maxHeight ? { maxHeight } : undefined}\n      >\n        {html ? (\n          <div\n            className=\"[&_code]:font-mono [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-4 group-data-[size=sm]/code-block:[&_pre]:p-3\"\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        ) : lineNumbers ? (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono\">\n              {code.split('\\n').map((line, i) => (\n                <span key={i} className=\"line\">\n                  {line}\n                  {'\\n'}\n                </span>\n              ))}\n            </code>\n          </pre>\n        ) : (\n          <pre className=\"p-4 group-data-[size=sm]/code-block:p-3\">\n            <code className=\"font-mono whitespace-pre\">{code}</code>\n          </pre>\n        )}\n      </div>\n    </CardContent>\n  );\n}\n\nfunction CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <CardFooter\n      className={cn(\n        'text-body-sm group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-footer-bg group-data-[variant=terminal]/code-block:text-terminal-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CodeBlockCopyButton({\n  code,\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n}) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-copy-button\"\n          onClick={handleCopy}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={copied ? 'Copied' : 'Copy code'}\n          {...props}\n        >\n          {copied ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"copy\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{copied ? 'Copied' : 'Copy'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nfunction CodeBlockDownloadButton({\n  code,\n  fileName,\n  mimeType = 'text/plain',\n  className,\n  ...props\n}: Omit<React.ComponentProps<'button'>, 'children'> & {\n  code: string;\n  fileName: string;\n  mimeType?: string;\n}) {\n  const [downloaded, setDownloaded] = useState(false);\n\n  const handleDownload = () => {\n    const blob = new Blob([code], { type: mimeType });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.download = fileName;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n    setDownloaded(true);\n    setTimeout(() => setDownloaded(false), 2000);\n  };\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          data-slot=\"code-block-download-button\"\n          onClick={handleDownload}\n          className={cn(\n            'border-border bg-background inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border motion-safe:transition-colors',\n            'text-muted-foreground hover:bg-accent hover:text-foreground',\n            'focus-visible:ring-ring/30 focus-visible:ring-2 focus-visible:outline-none',\n            'group-data-[variant=terminal]/code-block:border-terminal-border group-data-[variant=terminal]/code-block:bg-terminal-bg group-data-[variant=terminal]/code-block:text-terminal-muted group-data-[variant=terminal]/code-block:hover:bg-terminal-muted-hover-bg group-data-[variant=terminal]/code-block:hover:text-terminal-muted-hover-fg',\n            className,\n          )}\n          aria-label={downloaded ? 'Downloaded' : 'Download code'}\n          {...props}\n        >\n          {downloaded ? <Icon name=\"check\" size=\"sm\" className=\"text-green-500\" /> : <Icon name=\"download\" size=\"sm\" />}\n        </button>\n      </TooltipTrigger>\n      <TooltipContent>{downloaded ? 'Downloaded' : 'Download'}</TooltipContent>\n    </Tooltip>\n  );\n}\n\nexport { CodeBlock, CodeBlockHeader, CodeBlockBody, CodeBlockFooter, CodeBlockCopyButton, CodeBlockDownloadButton };\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/data-table.d.ts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RowData, ColumnFilter, Cell, Column, ColumnOrderState, Row, ColumnDef, CellContext, HeaderGroup, TableOptions, TableState, InitialTableState, SortingFn, FilterFn, ExpandedState, ColumnFiltersState, PaginationState, SortingState, VisibilityState, ColumnPinningState, GroupingState, OnChangeFn, ColumnSizingState } from '@tanstack/react-table';
 import * as React$1 from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentType } from 'react';
+import { DropdownMenuItem, IconName } from '@upbound/monarch-core';
 import { f as CelFilterSchema, g as CelFilterTree, k as CompileResult, i as CelRestrictedOptionSelectPayload } from './types-BULiU2qC.js';
-import { IconName } from '@upbound/monarch-core';
 
 /** A single entry (or nested submenu) in a cell's contextual right-click menu, alongside the built-in "Filter by this value" item. */
 type ContextualMenuAction<TData extends RowData = RowData, TValue = unknown> = {
@@ -56,7 +56,7 @@ declare function RowActionItem({ disabled, className, tooltip, children, onClick
     className?: string;
     tooltip?: string;
     children: React$1.ReactNode;
-    onClick?: () => void;
+    onClick?: React$1.ComponentProps<typeof DropdownMenuItem>['onClick'];
 }): react_jsx_runtime.JSX.Element;
 /** A ready-made right-pinned, non-sortable/filterable/hideable "Actions" column. */
 declare function getActionsColumnDefinition<TData extends RowData, TValue = unknown>({ cell, }: Pick<ColumnDef<TData, TValue>, 'cell'>): ColumnDef<TData, TValue>;
@@ -94,7 +94,7 @@ declare function TimestampCell({ timestamp }: {
  * Mirrors TableWrapper's `Filters/types.ts` shapes; `id` is omitted here since
  * it comes from the owning `ColumnDef.id`, not the filter definition itself.
  */
-type ColumnFilterType = 'checkbox' | 'radio' | 'dateRange' | 'scrollableCheckbox' | 'scrollableRadio' | 'text' | 'multiText';
+type ColumnFilterType = 'checkbox' | 'radio' | 'dateRange' | 'text' | 'multiText';
 type ColumnFilterOption = {
     label: string;
     value: string;
@@ -117,19 +117,25 @@ type ColumnFilterBase = {
     order?: number;
 };
 type StaticCheckboxColumnFilter = ColumnFilterBase & {
-    type: 'checkbox' | 'scrollableCheckbox';
+    type: 'checkbox';
     options: string[] | ColumnFilterOption[];
     fetchFilterOptions?: never;
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
 };
 type AsyncCheckboxColumnFilter = ColumnFilterBase & {
-    type: 'checkbox' | 'scrollableCheckbox';
+    type: 'checkbox';
     fetchFilterOptions: FetchColumnFilterOptions;
     options?: never;
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
 };
 type CheckboxColumnFilter = StaticCheckboxColumnFilter | AsyncCheckboxColumnFilter;
 type RadioColumnFilter = ColumnFilterBase & {
-    type: 'radio' | 'scrollableRadio';
+    type: 'radio';
     options: string[] | ColumnFilterOption[];
+    /** Whether the chip's value popup is a searchable Combobox. Defaults to `true`. */
+    searchable?: boolean;
 };
 type DateRangeColumnFilter = ColumnFilterBase & {
     type: 'dateRange';
@@ -495,10 +501,11 @@ type ViewFilterProps<TData extends RowData> = {
  * The plain (non-CEL) filter row — a thin state adapter over Monarch's
  * `FilterBar`, mirroring TableWrapper's own `ViewFilter` (itself just a
  * `FilterBar` adapter, not a hand-rolled UI). Every `meta.filter` shape
- * (checkbox/scrollableCheckbox, radio/scrollableRadio, dateRange, text,
- * multiText) gets a chip here, mapped onto the matching `FilterBar` chip
- * type. CEL-based filtering (`celFilterConfig`) is the richer, operator-driven
- * tier this is not meant to replace.
+ * (checkbox, radio, dateRange, text, multiText) gets a chip here, mapped onto
+ * the matching `FilterBar` chip type — checkbox and radio chips are
+ * searchable by default (opt out per column via `meta.filter.searchable:
+ * false`). CEL-based filtering (`celFilterConfig`) is the richer,
+ * operator-driven tier this is not meant to replace.
  */
 declare function ViewFilter<TData extends RowData>({ columns, columnFilters, onColumnFiltersChange, className, }: ViewFilterProps<TData>): react_jsx_runtime.JSX.Element;
 

package/dist/data-table.js

@@ -593,7 +593,7 @@ function RowActions({
 }) {
   return /* @__PURE__ */ jsxs3(DropdownMenu2, { children: [
     /* @__PURE__ */ jsx4(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsx4(Button2, { variant: "ghost", size: "icon-xs", "aria-label": "Row actions", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx4(Icon2, { name: "ellipsis", size: "sm" }) }) }),
-    /* @__PURE__ */ jsx4(DropdownMenuContent2, { align, className: contentClassName, children })
+    /* @__PURE__ */ jsx4(DropdownMenuContent2, { align, className: contentClassName, onClick: (event) => event.stopPropagation(), children })
   ] });
 }
 function RowActionItem({
@@ -2375,11 +2375,11 @@ function hasContextualFilterValue(value) {
 }
 function getDefaultContextualFilterValue(cell, filter) {
   const value = cell.getValue();
-  if (filter.type === "checkbox" || filter.type === "scrollableCheckbox" || filter.type === "multiText") {
+  if (filter.type === "checkbox" || filter.type === "multiText") {
     const values = stringArrayFromValue(value);
     return values.length > 0 ? values : void 0;
   }
-  if (filter.type === "radio" || filter.type === "scrollableRadio" || filter.type === "text") {
+  if (filter.type === "radio" || filter.type === "text") {
     return valueToString(value);
   }
   return void 0;
@@ -2399,7 +2399,7 @@ function getContextualGlobalSearch(cell) {
   return valueToString(globalSearchValue(cell));
 }
 function mergeColumnFilter(columnFilters, nextFilter, filterDefinition) {
-  const shouldMergeArrayValue = (filterDefinition == null ? void 0 : filterDefinition.type) === "checkbox" || (filterDefinition == null ? void 0 : filterDefinition.type) === "scrollableCheckbox" || (filterDefinition == null ? void 0 : filterDefinition.type) === "multiText";
+  const shouldMergeArrayValue = (filterDefinition == null ? void 0 : filterDefinition.type) === "checkbox" || (filterDefinition == null ? void 0 : filterDefinition.type) === "multiText";
   if (!shouldMergeArrayValue) {
     return [...columnFilters.filter((filter) => filter.id !== nextFilter.id), nextFilter];
   }
@@ -2415,10 +2415,10 @@ function getColumnFilterCount(filterValue, filter) {
   const isCheckboxValue = (value) => value === void 0 || Array.isArray(value) && value.every((item) => typeof item === "string");
   const isRadioValue = (value) => value === void 0 || typeof value === "string";
   const isDateRangeValue = (value) => value === void 0 || typeof value === "object" && value !== null && "startDate" in value && "endDate" in value;
-  if ((filter == null ? void 0 : filter.type) === "checkbox" || (filter == null ? void 0 : filter.type) === "scrollableCheckbox") {
+  if ((filter == null ? void 0 : filter.type) === "checkbox") {
     return isCheckboxValue(filterValue) ? (filterValue || []).length : 0;
   }
-  if ((filter == null ? void 0 : filter.type) === "radio" || (filter == null ? void 0 : filter.type) === "scrollableRadio") {
+  if ((filter == null ? void 0 : filter.type) === "radio") {
     return isRadioValue(filterValue) && filterValue !== void 0 ? 1 : 0;
   }
   if ((filter == null ? void 0 : filter.type) === "dateRange") {
@@ -4187,8 +4187,8 @@ function DateFilterChip({
 
 // src/lib/data-table/filter-types.ts
 var isDateRangeColumnFilter = (definition) => definition.type === "dateRange";
-var isRadioColumnFilter = (definition) => definition.type === "radio" || definition.type === "scrollableRadio";
-var isCheckboxColumnFilter = (definition) => definition.type === "checkbox" || definition.type === "scrollableCheckbox";
+var isRadioColumnFilter = (definition) => definition.type === "radio";
+var isCheckboxColumnFilter = (definition) => definition.type === "checkbox";
 var isMultiTextColumnFilter = (definition) => definition.type === "multiText";
 
 // src/data-table/view-filter.tsx
@@ -4197,21 +4197,21 @@ function toFilterOption(opt) {
   return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
 }
 function toFilterBarDefinition(key, filter) {
-  var _a;
+  var _a, _b, _c;
   const base = { key, label: filter.title, order: (_a = filter.order) != null ? _a : 0 };
   if (isCheckboxColumnFilter(filter)) {
     const options = "options" in filter && filter.options ? filter.options : [];
     return __spreadProps(__spreadValues({}, base), {
       type: "checkbox",
       options: options.map(toFilterOption),
-      searchable: filter.type === "scrollableCheckbox"
+      searchable: (_b = filter.searchable) != null ? _b : true
     });
   }
   if (isRadioColumnFilter(filter)) {
     return __spreadProps(__spreadValues({}, base), {
       type: "radio",
       options: filter.options.map(toFilterOption),
-      searchable: filter.type === "scrollableRadio"
+      searchable: (_c = filter.searchable) != null ? _c : true
     });
   }
   if (isDateRangeColumnFilter(filter)) {