@cronocode/react-box 3.0.21 → 3.1.1

package/components/semantics.mjs

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as e } from "react";
 import r from "../box.mjs";
-import { f as a } from "../core.mjs";
+import { e as a } from "../core.mjs";
 function o(t) {
   const n = e((s, c) => /* @__PURE__ */ i(r, { tag: t, ref: c, component: t, ...s }));
   return n.displayName = a.capitalize(t), n;

package/components/textarea.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),n=require("react"),s=require("../box.cjs"),c=require("../core.cjs"),u=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly"];function l(t,a){const r=c.ObjectUtils.buildProps(t,u);return o.jsx(s.default,{ref:a,tag:"textarea",component:"textarea",...r})}const e=n.forwardRef(l);e.displayName="Textarea";module.exports=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),s=require("../core.cjs"),l=["name","onInput","onChange","placeholder","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly"];function c(t,a){const r=s.ObjectUtils.buildProps(t,l);return o.jsx(u.default,{ref:a,tag:"textarea",component:"textarea",...r})}const e=n.forwardRef(c);e.displayName="Textarea";exports.default=e;

package/components/textbox.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),s=require("react"),u=require("../box.cjs"),a=require("../core.cjs"),c=["name","onInput","onChange","type","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(t,o){const r=a.ObjectUtils.buildProps(t,c);return n.jsx(u.default,{ref:o,tag:"input",component:"textbox",...r})}const e=s.forwardRef(i);e.displayName="Textbox";module.exports=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),u=require("react"),a=require("../box.cjs"),s=require("../core.cjs"),l=["name","onInput","onChange","type","placeholder","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(t,o){const r=s.ObjectUtils.buildProps(t,l);return n.jsx(a.default,{ref:o,tag:"input",component:"textbox",...r})}const e=u.forwardRef(c);e.displayName="Textbox";exports.default=e;

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),C=require("react-dom"),d=require("../box.cjs"),s=require("react"),R=require("../core.cjs"),c=2;function j(f,b){const{onPositionChange:a}=f,l=s.useRef(null),[t,h]=s.useState(),x=R.usePortalContainer(),g=s.useCallback((r,e)=>{const n=p=>{p.target.contains(r)&&e(r)},o=new AbortController;return document.addEventListener("scroll",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),m=s.useCallback((r,e)=>{const n=p=>{e(r)},o=new AbortController;return window.addEventListener("resize",n,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),u=s.useCallback(r=>{const e=r.getBoundingClientRect(),n=Math.round((e.top+window.scrollY)*c)/c,o=Math.round((e.left+window.scrollX)*c)/c;((t==null?void 0:t.top)!==n||(t==null?void 0:t.left)!==o)&&(a==null||a({top:n,left:o}),h({top:n,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(l.current){u(l.current);const r=g(l.current,u),e=m(l.current,u);return()=>{r(),e()}}},[t]),i.jsxs(i.Fragment,{children:[i.jsx(d.default,{ref:l}),t&&C.createPortal(i.jsx(d.default,{ref:b,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:i.jsx(d.default,{position:"absolute",width:"fit",...f})}),x)]})}const w=s.forwardRef(j);w.displayName="Tooltip";module.exports=w;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),s=require("react"),v=require("react-dom"),u=require("../box.cjs"),R=require("../core.cjs"),c=2;function j(f,w){const{onPositionChange:b,...g}=f,i=s.useRef(null),[t,h]=s.useState(),C=R.usePortalContainer(),m=s.useCallback((n,e)=>{const r=d=>{d.target.contains(n)&&e(n)},o=new AbortController;return document.addEventListener("scroll",r,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),x=s.useCallback((n,e)=>{const r=d=>{e(n)},o=new AbortController;return window.addEventListener("resize",r,{signal:o.signal,capture:!0}),()=>o.abort()},[t]),a=s.useCallback(n=>{const e=n.getBoundingClientRect(),r=Math.round((e.top+window.scrollY)*c)/c,o=Math.round((e.left+window.scrollX)*c)/c;(t?.top!==r||t?.left!==o)&&(b?.({top:r,left:o}),h({top:r,left:o,width:e.width>0?e.width:void 0}))},[t]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=m(i.current,a),e=x(i.current,a);return()=>{n(),e()}}},[t]),l.jsxs(l.Fragment,{children:[l.jsx(u.default,{ref:i}),t&&v.createPortal(l.jsx(u.default,{ref:w,position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${t.left}px,${t.top}px)`,width:t.width},children:l.jsx(u.default,{...g})}),C)]})}const p=s.forwardRef(j);p.displayName="Tooltip";exports.default=p;

package/components/tooltip.d.ts

@@ -1,9 +1,12 @@
+import { RefAttributes } from 'react';
 import { BoxProps } from '../box';
-interface Props extends BoxProps {
+import { ExtractElementFromTag } from '../core/coreTypes';
+import { ComponentsAndVariants } from '../types';
+interface TooltipProps {
     onPositionChange?(position: {
         top: number;
         left: number;
     }): void;
 }
-declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<Props, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default Tooltip;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>> & TooltipProps) => React.ReactNode;
+export default _default;

package/components/tooltip.mjs

@@ -1,61 +1,61 @@
-import { jsxs as x, Fragment as C, jsx as a } from "react/jsx-runtime";
-import { createPortal as v } from "react-dom";
-import u from "../box.mjs";
-import { forwardRef as R, useRef as y, useState as z, useCallback as d, useLayoutEffect as A } from "react";
-import { g as D } from "../core.mjs";
+import { jsxs as x, Fragment as v, jsx as a } from "react/jsx-runtime";
+import { forwardRef as P, useRef as R, useState as y, useCallback as c, useLayoutEffect as z } from "react";
+import { createPortal as A } from "react-dom";
+import p from "../box.mjs";
+import { f as D } from "../core.mjs";
 const i = 2;
-function E(f, m) {
-  const { onPositionChange: l } = f, s = y(null), [t, w] = z(), b = D(), g = d(
-    (r, o) => {
-      const n = (p) => {
-        p.target.contains(r) && o(r);
-      }, e = new AbortController();
-      return document.addEventListener("scroll", n, { signal: e.signal, capture: !0 }), () => e.abort();
+function E(d, f) {
+  const { onPositionChange: m, ...w } = d, s = R(null), [t, g] = y(), h = D(), b = c(
+    (e, o) => {
+      const n = (u) => {
+        u.target.contains(e) && o(e);
+      }, r = new AbortController();
+      return document.addEventListener("scroll", n, { signal: r.signal, capture: !0 }), () => r.abort();
     },
     [t]
-  ), h = d(
-    (r, o) => {
-      const n = (p) => {
-        o(r);
-      }, e = new AbortController();
-      return window.addEventListener("resize", n, { signal: e.signal, capture: !0 }), () => e.abort();
+  ), C = c(
+    (e, o) => {
+      const n = (u) => {
+        o(e);
+      }, r = new AbortController();
+      return window.addEventListener("resize", n, { signal: r.signal, capture: !0 }), () => r.abort();
     },
     [t]
-  ), c = d(
-    (r) => {
-      const o = r.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, e = Math.round((o.left + window.scrollX) * i) / i;
-      ((t == null ? void 0 : t.top) !== n || (t == null ? void 0 : t.left) !== e) && (l == null || l({ top: n, left: e }), w({ top: n, left: e, width: o.width > 0 ? o.width : void 0 }));
+  ), l = c(
+    (e) => {
+      const o = e.getBoundingClientRect(), n = Math.round((o.top + window.scrollY) * i) / i, r = Math.round((o.left + window.scrollX) * i) / i;
+      (t?.top !== n || t?.left !== r) && (m?.({ top: n, left: r }), g({ top: n, left: r, width: o.width > 0 ? o.width : void 0 }));
     },
     [t]
   );
-  return A(() => {
+  return z(() => {
     if (s.current) {
-      c(s.current);
-      const r = g(s.current, c), o = h(s.current, c);
+      l(s.current);
+      const e = b(s.current, l), o = C(s.current, l);
       return () => {
-        r(), o();
+        e(), o();
       };
     }
-  }, [t]), /* @__PURE__ */ x(C, { children: [
-    /* @__PURE__ */ a(u, { ref: s }),
-    t && v(
+  }, [t]), /* @__PURE__ */ x(v, { children: [
+    /* @__PURE__ */ a(p, { ref: s }),
+    t && A(
       /* @__PURE__ */ a(
-        u,
+        p,
         {
-          ref: m,
+          ref: f,
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
           style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
-          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
+          children: /* @__PURE__ */ a(p, { ...w })
         }
       ),
-      b
+      h
     )
   ] });
 }
-const H = R(E);
+const H = P(E);
 H.displayName = "Tooltip";
 export {
   H as default

package/core/boxStyles.d.ts

@@ -404,7 +404,7 @@ export declare const cssStyles: {
     } | {
         styleName: string;
         values: readonly ["font-size"];
-        valueFormat: (value: string) => string;
+        valueFormat: () => string;
     })[];
     /** The list-style CSS shorthand property allows you to set all the list style properties at once. */
     listStyle: {
@@ -674,6 +674,11 @@ export declare const cssStyles: {
         values: readonly [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000];
         valueFormat: (value: number) => string;
     }[];
+    /** The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect. */
+    transitionTimingFunction: {
+        styleName: string;
+        values: readonly ["linear", "ease", "ease-in", "ease-in-out", "ease-out"];
+    }[];
     /** The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes. */
     userSelect: {
         styleName: string;
@@ -754,53 +759,68 @@ export declare const cssStyles: {
         styleName: string;
         values: number;
     }[];
+    /** The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.  */
     color: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
     }[];
+    /** The background-color CSS property sets the background color of an element. */
     bgColor: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    /** The border-color shorthand CSS property sets the color of an element's border. */
     borderColor: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    /** The outline-color CSS property sets the color of an element's outline. */
     outlineColor: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    /** The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. */
     fill: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
     }[];
+    /** The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. */
     stroke: {
         values: Variables.ColorType[];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
     }[];
+    /** The background-image CSS property sets one or more background images on an element. */
     bgImage: {
         values: readonly ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    /** The box-shadow CSS property adds shadow effects around an element's frame */
     shadow: {
-        values: readonly ["small-shadow", "medium-shadow", "large-shadow"];
+        values: readonly ["small", "medium", "large"];
         valueFormat: (value: string, getVariableValue: (name: string) => string) => string;
         styleName: string;
     }[];
+    /** The translateY() CSS function repositions an element vertically on the 2D plane. */
     translateX: {
         values: number;
         valueFormat: (value: number) => string;
         styleName: string;
     }[];
+    /** The translateY() CSS function repositions an element vertically on the 2D plane. */
     translateY: {
         values: number;
         valueFormat: (value: number) => string;
         styleName: string;
     }[];
+    /** The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. */
+    content: {
+        values: readonly ["empty"];
+        valueFormat: () => string;
+    }[];
 };
 export declare const pseudo1: {
     hover: string;
@@ -815,6 +835,8 @@ export declare const pseudo1: {
     hasChecked: string;
     hasRequired: string;
     hasDisabled: string;
+    before: string;
+    after: string;
 };
 export declare const pseudo2: {
     indeterminate: string;
@@ -842,10 +864,12 @@ export declare const pseudoClasses: {
     hasChecked: string;
     hasRequired: string;
     hasDisabled: string;
+    before: string;
+    after: string;
 };
-export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled", number>;
+export declare const pseudoClassesWeight: Record<"theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled" | "before" | "after", number>;
 export declare const pseudoClassesByWeight: {
-    [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled")[];
+    [key: number]: ("theme" | "indeterminate" | "checked" | "required" | "disabled" | "selected" | "hover" | "focus" | "hasFocus" | "active" | "valid" | "hasValid" | "invalid" | "hasInvalid" | "optional" | "hasChecked" | "hasRequired" | "hasDisabled" | "before" | "after")[];
 };
 export declare const pseudoGroupClasses: {
     hoverGroup: "hover";

package/core/boxStylesFormatters.d.ts

@@ -4,7 +4,7 @@ export declare namespace BoxStylesFormatters {
         function svg(selector: string): string[];
     }
     namespace Value {
-        function rem(value: number, _fn?: Function, divider?: number): string;
+        function rem(value: number, _fn?: () => void, divider?: number): string;
         function px(value: number): string;
         function fraction(value: string): string;
         function widthHeight(key: string, value: string): string;

package/core/coreTypes.d.ts

@@ -1,4 +1,4 @@
-export type BoxStylesType<T> = T extends ReadonlyArray<infer U> ? T[number] : T;
+export type BoxStylesType<T> = T extends ReadonlyArray<unknown> ? T[number] : T;
 export type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
 export type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
 interface BoxStyleArrayString {

package/core/extends/boxComponents.d.ts

@@ -1,7 +1,7 @@
 import { BoxComponentStyles } from '../../types';
 export interface BoxComponent {
     clean?: boolean;
-    styles: BoxComponentStyles;
+    styles?: BoxComponentStyles;
     variants?: Record<string, BoxComponentStyles>;
     children?: Record<string, BoxComponent>;
 }
@@ -65,6 +65,28 @@ declare const boxComponents: {
                 borderColor: "gray-300";
             };
         };
+        variants: {
+            hover: {
+                position: "relative";
+                overflow: "hidden";
+                b: number;
+                before: {
+                    position: "absolute";
+                    top: number;
+                    left: number;
+                    width: number;
+                    height: "fit";
+                    bgColor: "violet-700";
+                    content: "empty";
+                    transitionDuration: 300;
+                };
+                hover: {
+                    before: {
+                        width: "fit";
+                    };
+                };
+            };
+        };
     };
     textbox: {
         styles: {
@@ -154,6 +176,9 @@ declare const boxComponents: {
                 borderColor: "gray-300";
             };
         };
+        variants: {
+            datagrid: {};
+        };
     };
     radioButton: {
         styles: {
@@ -240,7 +265,7 @@ declare const boxComponents: {
                     maxHeight: number;
                     borderColor: "violet-300";
                     color: "violet-950";
-                    shadow: "medium-shadow";
+                    shadow: "medium";
                 };
             };
             item: {
@@ -338,7 +363,7 @@ declare const boxComponents: {
             borderRadius: number;
         };
         children: {
-            columnGroups: {
+            topBar: {
                 styles: {
                     p: number;
                     bb: number;
@@ -346,28 +371,88 @@ declare const boxComponents: {
                     color: "gray-400";
                     gap: number;
                     ai: "center";
-                    height: number;
                 };
                 children: {
-                    item: {
+                    contextMenu: {
+                        clean: true;
+                        styles: {
+                            cursor: "pointer";
+                            p: number;
+                            hover: {
+                                bgColor: "gray-200";
+                                borderRadius: number;
+                            };
+                        };
+                        children: {
+                            tooltip: {
+                                styles: {
+                                    bgColor: "white";
+                                    width: number;
+                                    b: number;
+                                    borderColor: "gray-300";
+                                    borderRadius: number;
+                                    display: "flex";
+                                    d: "column";
+                                    mt: number;
+                                    py: number;
+                                    translateX: number;
+                                    shadow: "medium";
+                                    overflow: "auto";
+                                    maxHeight: number;
+                                };
+                                children: {
+                                    item: {
+                                        clean: true;
+                                        styles: {
+                                            display: "flex";
+                                            gap: number;
+                                            p: number;
+                                            cursor: "pointer";
+                                            hover: {
+                                                bgColor: "gray-200";
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                        };
+                    };
+                    columnGroups: {
                         styles: {
                             gap: number;
                             ai: "center";
-                            b: number;
-                            borderColor: "gray-400";
-                            bgColor: "gray-100";
-                            borderRadius: number;
-                            py: number;
-                            pl: number;
-                            pr: number;
-                            color: "violet-950";
                         };
                         children: {
                             icon: {
                                 styles: {
+                                    color: "violet-950";
                                     width: number;
-                                    color: "gray-400";
-                                    cursor: "pointer";
+                                };
+                            };
+                            separator: {
+                                styles: {};
+                            };
+                            item: {
+                                styles: {
+                                    gap: number;
+                                    ai: "center";
+                                    b: number;
+                                    borderColor: "gray-400";
+                                    bgColor: "gray-100";
+                                    borderRadius: number;
+                                    py: number;
+                                    pl: number;
+                                    pr: number;
+                                    color: "violet-950";
+                                };
+                                children: {
+                                    icon: {
+                                        styles: {
+                                            width: number;
+                                            color: "gray-400";
+                                            cursor: "pointer";
+                                        };
+                                    };
                                 };
                             };
                         };
@@ -381,6 +466,7 @@ declare const boxComponents: {
                     width: "max-content";
                     minWidth: "fit";
                     zIndex: 1;
+                    bgColor: "gray-200";
                 };
                 variants: {
                     isResizeMode: {
@@ -390,7 +476,6 @@ declare const boxComponents: {
                 children: {
                     cell: {
                         styles: {
-                            bgColor: "gray-200";
                             borderColor: "gray-400";
                             bb: number;
                             minHeight: number;
@@ -403,6 +488,7 @@ declare const boxComponents: {
                             isPinned: {
                                 position: "sticky";
                                 zIndex: 2;
+                                bgColor: "gray-200";
                             };
                             isFirstLeftPinned: {};
                             isLastLeftPinned: {
@@ -416,18 +502,97 @@ declare const boxComponents: {
                                 cursor: "pointer";
                             };
                         };
+                        children: {
+                            contextMenu: {
+                                clean: true;
+                                styles: {
+                                    width: number;
+                                    height: number;
+                                    cursor: "pointer";
+                                    userSelect: "none";
+                                    borderRadius: number;
+                                    borderColor: "gray-200";
+                                    display: "flex";
+                                    jc: "center";
+                                    ai: "center";
+                                    transition: "none";
+                                    bgColor: "gray-200";
+                                    hover: {
+                                        bgColor: "gray-300";
+                                    };
+                                };
+                                children: {
+                                    icon: {
+                                        styles: {};
+                                    };
+                                    tooltip: {
+                                        styles: {
+                                            bgColor: "white";
+                                            width: number;
+                                            b: number;
+                                            borderColor: "gray-300";
+                                            borderRadius: number;
+                                            display: "flex";
+                                            d: "column";
+                                            mt: number;
+                                            py: number;
+                                            overflow: "hidden";
+                                            translateX: number;
+                                            shadow: "medium";
+                                        };
+                                        variants: {
+                                            openLeft: {
+                                                translateX: number;
+                                            };
+                                        };
+                                        children: {
+                                            item: {
+                                                clean: true;
+                                                styles: {
+                                                    display: "flex";
+                                                    gap: number;
+                                                    p: number;
+                                                    cursor: "pointer";
+                                                    hover: {
+                                                        bgColor: "gray-200";
+                                                    };
+                                                };
+                                                children: {
+                                                    icon: {
+                                                        styles: {
+                                                            width: number;
+                                                            color: "violet-950";
+                                                        };
+                                                    };
+                                                };
+                                            };
+                                        };
+                                    };
+                                };
+                            };
+                            resizer: {
+                                styles: {
+                                    width: number;
+                                    height: "fit";
+                                    bgColor: "gray-400";
+                                    hoverGroup: {
+                                        resizer: {
+                                            bgColor: "gray-600";
+                                        };
+                                    };
+                                };
+                            };
+                        };
                     };
                 };
             };
             cell: {
                 styles: {
-                    bgColor: "gray-100";
                     bb: number;
                     borderColor: "gray-400";
                     transition: "none";
                     ai: "center";
                     overflow: "hidden";
-                    minHeight: number;
                     hoverGroup: {
                         'grid-row': {
                             bgColor: "gray-200";
@@ -441,6 +606,8 @@ declare const boxComponents: {
                     isRowSelection: {};
                     isPinned: {
                         position: "sticky";
+                        bgColor: "gray-100";
+                        zIndex: 1;
                     };
                     isFirstLeftPinned: {};
                     isLastLeftPinned: {
@@ -452,6 +619,15 @@ declare const boxComponents: {
                     isLastRightPinned: {};
                 };
             };
+            bottomBar: {
+                styles: {
+                    p: number;
+                    bgColor: "gray-200";
+                    bt: number;
+                    borderColor: "gray-400";
+                    gap: number;
+                };
+            };
         };
     };
 };