@cerberus-design/data-grid 0.25.3

package/dist/components/grid.client.js

@@ -0,0 +1,312 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { For, Show, useCerberusContext, Tooltip, IconButton } from '@cerberus-design/react';
+import { useRead } from '@cerberus-design/signals';
+import { useRef, memo, useMemo } from 'react';
+import { Scrollable, Box, HStack, Stack } from 'styled-system/jsx';
+import { PARTS, SCOPE } from '../const.js';
+import { useDataGridContext } from '../context.client.js';
+import { useColumnStyles, usePinnedAttribute, usePinnedState } from '../hooks.client.js';
+import { useVirtualizer } from '../virtualizer.client.js';
+import { HeaderCellOptions } from './features.client.js';
+
+function GridViewport() {
+  const viewportRef = useRef(null);
+  const store = useDataGridContext();
+  const { virtualRows, totalHeight } = useVirtualizer(store, viewportRef);
+  const columns = useRead(store.columns);
+  const isServerPaginated = useRead(store.isServerPaginated);
+  const staticRows = useRead(store.rows);
+  const currentPageRange = useRead(store.currentPageRange);
+  return /* @__PURE__ */ jsxs(
+    Scrollable,
+    {
+      hideScrollbar: true,
+      "data-scope": SCOPE,
+      "data-part": PARTS.VIEWPORT,
+      h: "full",
+      minH: "0",
+      minW: "full",
+      pos: "relative",
+      w: "full",
+      ref: viewportRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "grid",
+            "aria-rowcount": staticRows.length + 1,
+            "aria-colcount": columns.length,
+            h: "var(--row-height)",
+            pos: "sticky",
+            top: "0",
+            w: "var(--total-grid-width)",
+            zIndex: "sticky",
+            children: /* @__PURE__ */ jsx(
+              HStack,
+              {
+                "aria-rowIndex": "1",
+                role: "rowgroup",
+                gap: "0",
+                h: "full",
+                pos: "relative",
+                w: "full",
+                children: /* @__PURE__ */ jsx(For, { each: columns, children: (col) => /* @__PURE__ */ jsx(Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col }) }, col.id) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Show,
+          {
+            when: isServerPaginated,
+            fallback: /* @__PURE__ */ jsx(
+              Box,
+              {
+                pos: "relative",
+                w: "var(--total-grid-width)",
+                style: {
+                  height: `${totalHeight}px`
+                },
+                children: /* @__PURE__ */ jsx(For, { each: virtualRows, children: (vRow) => /* @__PURE__ */ jsx(
+                  GridRow,
+                  {
+                    row: vRow.data,
+                    index: vRow.index,
+                    offsetY: vRow.offsetY
+                  },
+                  vRow.index
+                ) })
+              }
+            ),
+            children: () => /* @__PURE__ */ jsx(Stack, { direction: "column", gap: "0", w: "var(--total-grid-width)", children: /* @__PURE__ */ jsx(
+              For,
+              {
+                each: staticRows.slice(
+                  currentPageRange.start,
+                  currentPageRange.end
+                ),
+                children: (row, index) => /* @__PURE__ */ jsx(GridRow, { row, index }, index)
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+const GridHeaderCell = memo(function GridHeaderCell2(props) {
+  const { column } = props;
+  const store = useDataGridContext();
+  const { icons } = useCerberusContext();
+  const pinnedVal = useRead(column.pinned);
+  const sortingVal = useRead(store.sorting);
+  const pinnedState = usePinnedState(pinnedVal);
+  const pinnedAttr = usePinnedAttribute(pinnedVal);
+  const style = useColumnStyles(column, pinnedVal);
+  const isSortedDesc = useMemo(() => {
+    const result = sortingVal.find((item) => item.id === column.id);
+    if (result) return result.desc;
+    return false;
+  }, [sortingVal, column.id]);
+  const SortAscIcon = icons.sortAsc;
+  const SortDescIcon = icons.sortDesc;
+  function handleToggleSorting(e) {
+    store.toggleSort(column.id, e.shiftKey);
+  }
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      role: "columnheader",
+      "data-scope": SCOPE,
+      "data-part": PARTS.HEAD_CELL,
+      "data-state": pinnedState,
+      "data-col": column.id,
+      ...pinnedAttr,
+      bgColor: "page.bg.initial",
+      borderBottom: "1px solid",
+      borderColor: "page.border.200",
+      h: "full",
+      justify: "space-between",
+      pos: "relative",
+      px: "md",
+      userSelect: "none",
+      textAlign: "left",
+      textStyle: "label-md",
+      verticalAlign: "middle",
+      w: "full",
+      zIndex: "10",
+      _first: {
+        borderTopLeftRadius: "md"
+      },
+      _last: {
+        borderTopRightRadius: "md"
+      },
+      _pinned: {
+        pos: "sticky",
+        zIndex: 20
+      },
+      _leftPinned: {
+        borderRightColor: "page.border.200",
+        borderRight: "1px solid"
+      },
+      _rightPinned: {
+        borderLeftColor: "page.border.200",
+        borderLeft: "1px solid"
+      },
+      className: "group",
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          HStack,
+          {
+            gap: "sm",
+            _groupHover: {
+              "& :is(button)": {
+                opacity: "1"
+              }
+            },
+            children: [
+              typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header,
+              /* @__PURE__ */ jsx(Show, { when: column.sortable, children: /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
+                  openDelay: 800,
+                  asChild: true,
+                  children: /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      ariaLabel: "Toggle sorting",
+                      size: "sm",
+                      opacity: {
+                        base: 1,
+                        md: 0
+                      },
+                      transitionProperty: "opacity",
+                      transitionDuration: "fast",
+                      onClick: handleToggleSorting,
+                      children: /* @__PURE__ */ jsx(Show, { when: isSortedDesc, fallback: /* @__PURE__ */ jsx(SortAscIcon, {}), children: /* @__PURE__ */ jsx(SortDescIcon, {}) })
+                    }
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderCellOptions, { ...column }),
+        /* @__PURE__ */ jsx(Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsx(ShadowFiller, { style, ...pinnedAttr }) })
+      ]
+    }
+  );
+});
+const GridCell = memo(function GridCell2(props) {
+  const { column, row } = props;
+  const value = column.getValue(row);
+  const pinnedVal = useRead(column.pinned);
+  const pinnedState = usePinnedState(pinnedVal);
+  const pinnedAttr = usePinnedAttribute(pinnedVal);
+  const style = useColumnStyles(column, pinnedVal);
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      role: "cell",
+      "data-scope": SCOPE,
+      "data-part": PARTS.CELL,
+      "data-state": pinnedState,
+      ...pinnedAttr,
+      bgColor: "inherit",
+      borderColor: "page.border.200",
+      h: "full",
+      pos: "relative",
+      px: "md",
+      userSelect: "none",
+      verticalAlign: "middle",
+      zIndex: "base",
+      _pinned: {
+        pos: "sticky",
+        zIndex: 20
+      },
+      _leftPinned: {
+        borderRightColor: "page.border.200",
+        borderRight: "1px solid"
+      },
+      _rightPinned: {
+        borderLeftColor: "page.border.200",
+        borderLeft: "1px solid"
+      },
+      style,
+      children: [
+        column.original.cell ? column.original.cell({ row, value }) : value,
+        /* @__PURE__ */ jsx(Show, { when: pinnedState === "pinned", children: () => /* @__PURE__ */ jsx(ShadowFiller, { style, ...pinnedAttr }) })
+      ]
+    }
+  );
+});
+const GridRow = memo(function GridRow2(props) {
+  const store = useDataGridContext();
+  const columns = useRead(store.columns);
+  return /* @__PURE__ */ jsx(GridRowContainer, { offsetY: props.offsetY, children: /* @__PURE__ */ jsx(For, { each: columns, children: (col) => /* @__PURE__ */ jsx(Show, { when: col.isVisible(), children: () => /* @__PURE__ */ jsx(GridCell, { row: props.row, column: col }) }, col.id) }) });
+});
+function GridRowContainer(props) {
+  const isVirtualized = props.offsetY !== void 0;
+  return /* @__PURE__ */ jsx(
+    HStack,
+    {
+      role: "row",
+      "data-scope": SCOPE,
+      "data-part": PARTS.ROW,
+      "data-render": isVirtualized ? "virtualized" : "static",
+      bgColor: "page.surface.100",
+      gap: "0",
+      h: "var(--row-height)",
+      w: "full",
+      _even: {
+        bgColor: "page.surface.initial"
+      },
+      _hover: {
+        bgColor: "page.surface.200"
+      },
+      css: {
+        "&:is([data-render=virtualized])": {
+          pos: "absolute",
+          left: 0
+        }
+      },
+      style: {
+        transform: isVirtualized ? `translateY(${props.offsetY}px)` : void 0
+      },
+      children: props.children
+    }
+  );
+}
+function ShadowFiller(props) {
+  const { style, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      bottom: "0",
+      h: "full",
+      pos: "absolute",
+      w: "0.75rem",
+      zIndex: "inherit",
+      _leftPinned: {
+        bgGradient: "to-r",
+        gradientFrom: "black/10",
+        gradientTo: "transparent"
+      },
+      _rightPinned: {
+        bgGradient: "to-l",
+        gradientFrom: "black/10",
+        gradientTo: "transparent"
+      },
+      style: {
+        left: style.left ? style.width : void 0,
+        right: style.right ? style.width : void 0
+      },
+      ...rest
+    }
+  );
+}
+
+export { GridCell, GridHeaderCell, GridRow, GridViewport };

package/dist/components/pagination.client.cjs

@@ -0,0 +1,116 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@cerberus-design/react');
+const jsx = require('styled-system/jsx');
+const context_client = require('../context.client.cjs');
+const countMenu_client = require('./count-menu.client.cjs');
+const signals = require('@cerberus-design/signals');
+
+function GridPagination() {
+  const store = context_client.useDataGridContext();
+  const pageIndex = signals.useRead(store.pageIndex);
+  const pageSize = signals.useRead(store.pageSize);
+  const rowCount = signals.useRead(store.rowCount);
+  function handlePageChange(details) {
+    store.setPage(details);
+  }
+  function handlePageSizeChange(details) {
+    store.setPageSize(details.pageSize);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Show, { when: pageSize, children: () => /* @__PURE__ */ jsxRuntime.jsx(
+    react.PaginationParts.Root,
+    {
+      defaultPage: pageIndex ? pageIndex : 1,
+      count: rowCount,
+      onPageChange: handlePageChange,
+      onPageSizeChange: handlePageSizeChange,
+      page: pageIndex,
+      pageSize,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.PaginationParts.Context, { children: (pagination) => /* @__PURE__ */ jsxRuntime.jsxs(
+        jsx.HStack,
+        {
+          bgColor: "page.surface.100",
+          borderTop: "1px solid",
+          borderTopColor: "page.border.initial",
+          justify: "space-between",
+          px: "md",
+          py: "sm",
+          w: "full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                react.Text,
+                {
+                  as: "small",
+                  color: "page.text.100",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: [
+                    pagination.pageRange.start,
+                    "-",
+                    pagination.pageRange.end,
+                    " of",
+                    " ",
+                    pagination.count
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                jsx.Divider,
+                {
+                  color: "page.border.200",
+                  orientation: "vertical",
+                  h: "1rem",
+                  thickness: "1px"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Text,
+                {
+                  as: "small",
+                  color: "page.text.initial",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: "Rows per page:"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                countMenu_client.CountMenu,
+                {
+                  onValueChange: (details) => {
+                    pagination.setPageSize(Number(details.value));
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(react.Group, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.PrevTrigger, { size: "sm" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                react.Text,
+                {
+                  as: "small",
+                  color: "page.text.200",
+                  lineHeight: "inherit",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: [
+                    pagination.page,
+                    " of ",
+                    pagination.totalPages
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(react.NextTrigger, { size: "sm" })
+            ] })
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+
+exports.GridPagination = GridPagination;

package/dist/components/pagination.client.d.cts

@@ -0,0 +1 @@
+export declare function GridPagination(): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination.client.d.ts

@@ -0,0 +1 @@
+export declare function GridPagination(): import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination.client.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Show, PaginationParts, Text, Group, PrevTrigger, NextTrigger } from '@cerberus-design/react';
+import { HStack, Divider } from 'styled-system/jsx';
+import { useDataGridContext } from '../context.client.js';
+import { CountMenu } from './count-menu.client.js';
+import { useRead } from '@cerberus-design/signals';
+
+function GridPagination() {
+  const store = useDataGridContext();
+  const pageIndex = useRead(store.pageIndex);
+  const pageSize = useRead(store.pageSize);
+  const rowCount = useRead(store.rowCount);
+  function handlePageChange(details) {
+    store.setPage(details);
+  }
+  function handlePageSizeChange(details) {
+    store.setPageSize(details.pageSize);
+  }
+  return /* @__PURE__ */ jsx(Show, { when: pageSize, children: () => /* @__PURE__ */ jsx(
+    PaginationParts.Root,
+    {
+      defaultPage: pageIndex ? pageIndex : 1,
+      count: rowCount,
+      onPageChange: handlePageChange,
+      onPageSizeChange: handlePageSizeChange,
+      page: pageIndex,
+      pageSize,
+      children: /* @__PURE__ */ jsx(PaginationParts.Context, { children: (pagination) => /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          bgColor: "page.surface.100",
+          borderTop: "1px solid",
+          borderTopColor: "page.border.initial",
+          justify: "space-between",
+          px: "md",
+          py: "sm",
+          w: "full",
+          children: [
+            /* @__PURE__ */ jsxs(HStack, { gap: "sm", children: [
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  as: "small",
+                  color: "page.text.100",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: [
+                    pagination.pageRange.start,
+                    "-",
+                    pagination.pageRange.end,
+                    " of",
+                    " ",
+                    pagination.count
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Divider,
+                {
+                  color: "page.border.200",
+                  orientation: "vertical",
+                  h: "1rem",
+                  thickness: "1px"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  as: "small",
+                  color: "page.text.initial",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: "Rows per page:"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CountMenu,
+                {
+                  onValueChange: (details) => {
+                    pagination.setPageSize(Number(details.value));
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Group, { children: [
+              /* @__PURE__ */ jsx(PrevTrigger, { size: "sm" }),
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  as: "small",
+                  color: "page.text.200",
+                  lineHeight: "inherit",
+                  textStyle: "label-sm",
+                  userSelect: "none",
+                  children: [
+                    pagination.page,
+                    " of ",
+                    pagination.totalPages
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(NextTrigger, { size: "sm" })
+            ] })
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+
+export { GridPagination };

package/dist/components/pinned-items.client.cjs

@@ -0,0 +1,70 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('@cerberus-design/react');
+const signals = require('@cerberus-design/signals');
+const jsx = require('styled-system/jsx');
+
+function MatchPinnedItems(props) {
+  const pinned = signals.useRead(props.pinned);
+  const MenuItems = {
+    right: PinRightItem,
+    left: PinLeftItem,
+    unpinRight: UnpinRightItem,
+    unpinLeft: UnpinLeftItem
+  };
+  switch (pinned) {
+    case "right":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.unpinRight, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.left, {})
+      ] });
+    case "left":
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.right, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.unpinLeft, {})
+      ] });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.right, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuItems.left, {})
+      ] });
+  }
+}
+function UnpinRightItem() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.pinRightFilled;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "unpin_right", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Unpin Right"
+  ] }) });
+}
+function UnpinLeftItem() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.pinLeftFilled;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "unpin_left", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Unpin Left"
+  ] }) });
+}
+function PinRightItem() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.pinRight;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "pin_right", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Pin Right"
+  ] }) });
+}
+function PinLeftItem() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.pinLeft;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "pin_left", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Pin Left"
+  ] }) });
+}
+
+exports.MatchPinnedItems = MatchPinnedItems;

package/dist/components/pinned-items.client.d.cts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { InternalColumn } from '../types';
+export declare function MatchPinnedItems(props: {
+    pinned: InternalColumn<ReactNode>['pinned'];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/pinned-items.client.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { InternalColumn } from '../types';
+export declare function MatchPinnedItems(props: {
+    pinned: InternalColumn<ReactNode>['pinned'];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/pinned-items.client.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCerberusContext, MenuItem } from '@cerberus-design/react';
+import { useRead } from '@cerberus-design/signals';
+import { HStack } from 'styled-system/jsx';
+
+function MatchPinnedItems(props) {
+  const pinned = useRead(props.pinned);
+  const MenuItems = {
+    right: PinRightItem,
+    left: PinLeftItem,
+    unpinRight: UnpinRightItem,
+    unpinLeft: UnpinLeftItem
+  };
+  switch (pinned) {
+    case "right":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuItems.unpinRight, {}),
+        /* @__PURE__ */ jsx(MenuItems.left, {})
+      ] });
+    case "left":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuItems.right, {}),
+        /* @__PURE__ */ jsx(MenuItems.unpinLeft, {})
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuItems.right, {}),
+        /* @__PURE__ */ jsx(MenuItems.left, {})
+      ] });
+  }
+}
+function UnpinRightItem() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.pinRightFilled;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "unpin_right", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Unpin Right"
+  ] }) });
+}
+function UnpinLeftItem() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.pinLeftFilled;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "unpin_left", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Unpin Left"
+  ] }) });
+}
+function PinRightItem() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.pinRight;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "pin_right", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Pin Right"
+  ] }) });
+}
+function PinLeftItem() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.pinLeft;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "pin_left", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Pin Left"
+  ] }) });
+}
+
+export { MatchPinnedItems };