@cerberus-design/data-grid 0.25.3

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

@@ -0,0 +1,58 @@
+'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');
+
+function MatchSortItems(props) {
+  const { sorting } = props;
+  const MenuItems = {
+    asc: SortAsc,
+    desc: SortDesc,
+    unsort: UnsortItem
+  };
+  if (!sorting) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.asc, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.desc, {})
+    ] });
+  }
+  if (sorting.desc) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.asc, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.unsort, {})
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.unsort, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(MenuItems.desc, {})
+    ] });
+  }
+}
+function UnsortItem() {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "unsort", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(jsx.Square, { size: "4" }),
+    "Unsort"
+  ] }) });
+}
+function SortAsc() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.sortAsc;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "sort_asc", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Sort ASC"
+  ] }) });
+}
+function SortDesc() {
+  const { icons } = react.useCerberusContext();
+  const Icon = icons.sortDesc;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.MenuItem, { value: "sort_desc", children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
+    "Sort DESC"
+  ] }) });
+}
+
+exports.MatchSortItems = MatchSortItems;

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

@@ -0,0 +1,4 @@
+import { SortState } from '../types';
+export declare function MatchSortItems(props: {
+    sorting: SortState | undefined;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+import { SortState } from '../types';
+export declare function MatchSortItems(props: {
+    sorting: SortState | undefined;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCerberusContext, MenuItem } from '@cerberus-design/react';
+import { HStack, Square } from 'styled-system/jsx';
+
+function MatchSortItems(props) {
+  const { sorting } = props;
+  const MenuItems = {
+    asc: SortAsc,
+    desc: SortDesc,
+    unsort: UnsortItem
+  };
+  if (!sorting) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MenuItems.asc, {}),
+      /* @__PURE__ */ jsx(MenuItems.desc, {})
+    ] });
+  }
+  if (sorting.desc) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MenuItems.asc, {}),
+      /* @__PURE__ */ jsx(MenuItems.unsort, {})
+    ] });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(MenuItems.unsort, {}),
+      /* @__PURE__ */ jsx(MenuItems.desc, {})
+    ] });
+  }
+}
+function UnsortItem() {
+  return /* @__PURE__ */ jsx(MenuItem, { value: "unsort", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Square, { size: "4" }),
+    "Unsort"
+  ] }) });
+}
+function SortAsc() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.sortAsc;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "sort_asc", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Sort ASC"
+  ] }) });
+}
+function SortDesc() {
+  const { icons } = useCerberusContext();
+  const Icon = icons.sortDesc;
+  return /* @__PURE__ */ jsx(MenuItem, { value: "sort_desc", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", w: "full", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    "Sort DESC"
+  ] }) });
+}
+
+export { MatchSortItems };

package/dist/const.cjs

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SCOPE = "data-grid";
+const PARTS = {
+  TOOLBAR: "toolbar",
+  ROOT: "root",
+  VIEWPORT: "viewport",
+  HEAD_CELL: "head-cell",
+  ROW: "row",
+  CELL: "row-cell",
+  FOOTER: "footer"
+};
+const DEFAULT_PAGE_IDX = 1;
+const SM_PAGE_SIZE = 25;
+const MD_PAGE_SIZE = 50;
+const LG_PAGE_SIZE = 100;
+const DEFAULT_PAGE_SIZES = [SM_PAGE_SIZE, MD_PAGE_SIZE, LG_PAGE_SIZE];
+const XS = "xs";
+const SM = "sm";
+const MD = "md";
+const LG = "lg";
+const XL = "xl";
+const ROW_SIZES = {
+  items: [XS, SM, MD, LG, XL],
+  results: {
+    [XS]: 32,
+    [SM]: 40,
+    [MD]: 48,
+    [LG]: 56,
+    [XL]: 64
+  }
+};
+
+exports.DEFAULT_PAGE_IDX = DEFAULT_PAGE_IDX;
+exports.DEFAULT_PAGE_SIZES = DEFAULT_PAGE_SIZES;
+exports.LG = LG;
+exports.LG_PAGE_SIZE = LG_PAGE_SIZE;
+exports.MD = MD;
+exports.MD_PAGE_SIZE = MD_PAGE_SIZE;
+exports.PARTS = PARTS;
+exports.ROW_SIZES = ROW_SIZES;
+exports.SCOPE = SCOPE;
+exports.SM = SM;
+exports.SM_PAGE_SIZE = SM_PAGE_SIZE;
+exports.XL = XL;
+exports.XS = XS;

package/dist/const.d.cts

@@ -0,0 +1,28 @@
+export declare const SCOPE = "data-grid";
+export declare const DEFAULT_COL_H = 40;
+export declare const PARTS: {
+    TOOLBAR: string;
+    ROOT: string;
+    VIEWPORT: string;
+    HEAD_CELL: string;
+    ROW: string;
+    CELL: string;
+    FOOTER: string;
+};
+export declare const DEFAULT_PAGE_IDX = 1;
+export declare const SM_PAGE_SIZE = 25;
+export declare const MD_PAGE_SIZE = 50;
+export declare const LG_PAGE_SIZE = 100;
+export declare const DEFAULT_PAGE_SIZES: number[];
+export declare const XS = "xs";
+export declare const SM = "sm";
+export declare const MD = "md";
+export declare const LG = "lg";
+export declare const XL = "xl";
+export type RowSize = typeof XS | typeof SM | typeof MD | typeof LG | typeof XL;
+type RowSizeData = {
+    items: RowSize[];
+    results: Record<RowSize, number>;
+};
+export declare const ROW_SIZES: RowSizeData;
+export {};

package/dist/const.d.ts

@@ -0,0 +1,28 @@
+export declare const SCOPE = "data-grid";
+export declare const DEFAULT_COL_H = 40;
+export declare const PARTS: {
+    TOOLBAR: string;
+    ROOT: string;
+    VIEWPORT: string;
+    HEAD_CELL: string;
+    ROW: string;
+    CELL: string;
+    FOOTER: string;
+};
+export declare const DEFAULT_PAGE_IDX = 1;
+export declare const SM_PAGE_SIZE = 25;
+export declare const MD_PAGE_SIZE = 50;
+export declare const LG_PAGE_SIZE = 100;
+export declare const DEFAULT_PAGE_SIZES: number[];
+export declare const XS = "xs";
+export declare const SM = "sm";
+export declare const MD = "md";
+export declare const LG = "lg";
+export declare const XL = "xl";
+export type RowSize = typeof XS | typeof SM | typeof MD | typeof LG | typeof XL;
+type RowSizeData = {
+    items: RowSize[];
+    results: Record<RowSize, number>;
+};
+export declare const ROW_SIZES: RowSizeData;
+export {};

package/dist/const.js

@@ -0,0 +1,33 @@
+'use client';
+const SCOPE = "data-grid";
+const PARTS = {
+  TOOLBAR: "toolbar",
+  ROOT: "root",
+  VIEWPORT: "viewport",
+  HEAD_CELL: "head-cell",
+  ROW: "row",
+  CELL: "row-cell",
+  FOOTER: "footer"
+};
+const DEFAULT_PAGE_IDX = 1;
+const SM_PAGE_SIZE = 25;
+const MD_PAGE_SIZE = 50;
+const LG_PAGE_SIZE = 100;
+const DEFAULT_PAGE_SIZES = [SM_PAGE_SIZE, MD_PAGE_SIZE, LG_PAGE_SIZE];
+const XS = "xs";
+const SM = "sm";
+const MD = "md";
+const LG = "lg";
+const XL = "xl";
+const ROW_SIZES = {
+  items: [XS, SM, MD, LG, XL],
+  results: {
+    [XS]: 32,
+    [SM]: 40,
+    [MD]: 48,
+    [LG]: 56,
+    [XL]: 64
+  }
+};
+
+export { DEFAULT_PAGE_IDX, DEFAULT_PAGE_SIZES, LG, LG_PAGE_SIZE, MD, MD_PAGE_SIZE, PARTS, ROW_SIZES, SCOPE, SM, SM_PAGE_SIZE, XL, XS };

package/dist/context.client.cjs

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const signals = require('@cerberus-design/signals');
+
+const { StoreProvider: BaseProvider, useStore: useBaseStore } = signals.createStoreContext();
+function DataGridProvider(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseProvider, { createStore: props.createStore, children: props.children });
+}
+function useDataGridContext() {
+  return useBaseStore();
+}
+
+exports.DataGridProvider = DataGridProvider;
+exports.useDataGridContext = useDataGridContext;

package/dist/context.client.d.cts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { GridStore } from './types';
+export declare function DataGridProvider<TData>(props: {
+    createStore: () => GridStore<TData>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/context.client.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { GridStore } from './types';
+export declare function DataGridProvider<TData>(props: {
+    createStore: () => GridStore<TData>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/context.client.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createStoreContext } from '@cerberus-design/signals';
+
+const { StoreProvider: BaseProvider, useStore: useBaseStore } = createStoreContext();
+function DataGridProvider(props) {
+  return /* @__PURE__ */ jsx(BaseProvider, { createStore: props.createStore, children: props.children });
+}
+function useDataGridContext() {
+  return useBaseStore();
+}
+
+export { DataGridProvider, useDataGridContext };

package/dist/hooks.client.cjs

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function usePinnedState(pinned) {
+  return pinned ? "pinned" : "unpinned";
+}
+function usePinnedAttribute(pinned) {
+  return pinned ? { "data-pinned": pinned } : void 0;
+}
+function useColumnStyles(column, pinnedVal) {
+  const styles = react.useMemo(
+    () => ({
+      order: `var(--col-${column.id}-order)`,
+      left: pinnedVal === "left" ? `var(--col-${column.id}-left)` : void 0,
+      right: pinnedVal === "right" ? `var(--col-${column.id}-right)` : void 0,
+      width: `var(--col-${column.id}-width)`
+    }),
+    [column.id, pinnedVal]
+  );
+  return styles;
+}
+
+exports.useColumnStyles = useColumnStyles;
+exports.usePinnedAttribute = usePinnedAttribute;
+exports.usePinnedState = usePinnedState;

package/dist/hooks.client.d.cts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { InternalColumn, PinnedState } from './types';
+export declare function usePinnedState(pinned: PinnedState): 'pinned' | 'unpinned';
+export declare function usePinnedAttribute(pinned: PinnedState): {
+    'data-pinned': PinnedState;
+} | undefined;
+export declare function useColumnStyles<TData>(column: InternalColumn<TData>, pinnedVal: PinnedState): CSSProperties;

package/dist/hooks.client.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { InternalColumn, PinnedState } from './types';
+export declare function usePinnedState(pinned: PinnedState): 'pinned' | 'unpinned';
+export declare function usePinnedAttribute(pinned: PinnedState): {
+    'data-pinned': PinnedState;
+} | undefined;
+export declare function useColumnStyles<TData>(column: InternalColumn<TData>, pinnedVal: PinnedState): CSSProperties;

package/dist/hooks.client.js

@@ -0,0 +1,23 @@
+'use client';
+import { useMemo } from 'react';
+
+function usePinnedState(pinned) {
+  return pinned ? "pinned" : "unpinned";
+}
+function usePinnedAttribute(pinned) {
+  return pinned ? { "data-pinned": pinned } : void 0;
+}
+function useColumnStyles(column, pinnedVal) {
+  const styles = useMemo(
+    () => ({
+      order: `var(--col-${column.id}-order)`,
+      left: pinnedVal === "left" ? `var(--col-${column.id}-left)` : void 0,
+      right: pinnedVal === "right" ? `var(--col-${column.id}-right)` : void 0,
+      width: `var(--col-${column.id}-width)`
+    }),
+    [column.id, pinnedVal]
+  );
+  return styles;
+}
+
+export { useColumnStyles, usePinnedAttribute, usePinnedState };

package/dist/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const dataGrid_client = require('./components/data-grid.client.cjs');
+const cerbyDataGrid_client = require('./components/cerby-data-grid.client.cjs');
+const context_client = require('./context.client.cjs');
+const columnHelpers = require('./column-helpers.cjs');
+
+
+
+exports.DataGrid = dataGrid_client.DataGrid;
+exports.CerberusDataGrid = cerbyDataGrid_client.CerberusDataGrid;
+exports.useDataGridContext = context_client.useDataGridContext;
+exports.createColumnHelper = columnHelpers.createColumnHelper;

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+/**
+ * This module is the entry point for the Cerberus Data Grid package.
+ * @module
+ */
+export * from './components/data-grid.client';
+export * from './components/cerby-data-grid.client';
+export { useDataGridContext } from './context.client';
+export * from './column-helpers';
+export * from './types';

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This module is the entry point for the Cerberus Data Grid package.
+ * @module
+ */
+export * from './components/data-grid.client';
+export * from './components/cerby-data-grid.client';
+export { useDataGridContext } from './context.client';
+export * from './column-helpers';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { DataGrid } from './components/data-grid.client.js';
+export { CerberusDataGrid } from './components/cerby-data-grid.client.js';
+export { useDataGridContext } from './context.client.js';
+export { createColumnHelper } from './column-helpers.js';