@cronocode/react-box 1.5.6 → 1.5.9

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),o={button:{styles:{inline:!0,p:3,cursor:"pointer",b:1,borderRadius:1},disabled:{cursor:"default"}},checkbox:{styles:{inline:!0,b:1,p:2}},radioButton:{styles:{inline:!0,b:1,p:2}},textbox:{styles:{inline:!0,b:1,borderRadius:1,p:3}},textarea:{styles:{inline:!0,b:1,borderRadius:1}}};let n=o;var d;(u=>{function i(t){n=t,r()}u.setup=i;function r(){Object.keys(o).forEach(s=>{const e=n[s],l=o[s];e?(e.styles={...l.styles,...e.styles},e.disabled&&l.disabled&&(e.disabled={...l.disabled,...e.disabled})):n[s]=o[s]})}})(d||(d={}));const f=d;function m(u){const{clean:i,disabled:r,theme:t,component:s}=u;return y.useMemo(()=>{var a,b,c;if(i)return{};let e=n[s]??((a=n.components)==null?void 0:a[s]);if(!e)return{};let l=t?{...e.styles,...(b=e.themes)==null?void 0:b[t].styles}:e.styles;return r?t?{...l,...e.disabled,...(c=e.themes)==null?void 0:c[t].disabled}:{...l,...e.disabled}:l},[s,i,r,t])}exports.default=f;exports.useTheme=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),r={button:{styles:{inline:!0,p:3,cursor:"pointer",b:1,borderRadius:1},disabled:{cursor:"default"}},checkbox:{styles:{inline:!0,b:1,p:2}},radioButton:{styles:{inline:!0,b:1,p:2}},textbox:{styles:{inline:!0,b:1,borderRadius:1,p:3}},textarea:{styles:{inline:!0,b:1,borderRadius:1}}};let n=r;var u;(d=>{function i(t){n=t,o()}d.setup=i;function o(){Object.keys(r).forEach(s=>{const e=n[s],l=r[s];e?(e.styles={...l.styles,...e.styles},e.disabled&&l.disabled&&(e.disabled={...l.disabled,...e.disabled})):n[s]=r[s]})}})(u||(u={}));const f=u;function m(d){const{clean:i,disabled:o,theme:t,component:s}=d;return y.useMemo(()=>{var a,b,c;if(i)return;let e=n[s]??((a=n.components)==null?void 0:a[s]);if(!e)return;let l=t?{...e.styles,...(b=e.themes)==null?void 0:b[t].styles}:e.styles;return o?t?{...l,...e.disabled,...(c=e.themes)==null?void 0:c[t].disabled}:{...l,...e.disabled}:l},[s,i,o,t])}exports.default=f;exports.useTheme=m;

package/{src/theme.d.ts → theme.d.ts}

@@ -31,4 +31,4 @@ export interface ThemeComponentProps {
     component?: ReservedComponentName;
     theme?: string;
 }
-export declare function useTheme(props: ThemeComponentProps): BoxStyles;
+export declare function useTheme(props: ThemeComponentProps): BoxStyles | undefined;

package/theme.mjs

@@ -62,10 +62,10 @@ function p(d) {
   return y(() => {
     var a, b, c;
     if (i)
-      return {};
+      return;
     let e = n[s] ?? ((a = n.components) == null ? void 0 : a[s]);
     if (!e)
-      return {};
+      return;
     let l = t ? { ...e.styles, ...(b = e.themes) == null ? void 0 : b[t].styles } : e.styles;
     return o ? t ? { ...l, ...e.disabled, ...(c = e.themes) == null ? void 0 : c[t].disabled } : { ...l, ...e.disabled } : l;
   }, [s, i, o, t]);

package/{src/types.d.ts → types.d.ts}

@@ -1,10 +1,10 @@
-export type Hovered<T> = {
+type Hovered<T> = {
     [K in keyof T as K extends string ? `${K}H` : never]: T[K];
 };
-export type Focused<T> = {
+type Focused<T> = {
     [K in keyof T as K extends string ? `${K}F` : never]: T[K];
 };
-export type Activated<T> = {
+type Activated<T> = {
     [K in keyof T as K extends string ? `${K}A` : never]: T[K];
 };
 export declare const styleVariables: {
@@ -12,14 +12,17 @@ export declare const styleVariables: {
     boxSizing: readonly ["border-box", "content-box"];
     position: readonly ["static", "relative", "absolute", "fixed", "sticky"];
     sizeSpecialValues: readonly ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
+    widthHeightSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 88, 96, 100];
+    widthHeightStringSizes: readonly ["1/2", "1/3", "2/3", "1/4", "2/4", "3/4", "1/5", "2/5", "3/5", "4/5", "1/6", "2/6", "3/6", "4/6", "5/6", "1/12", "2/12", "3/12", "4/12", "5/12", "6/12", "7/12", "8/12", "9/12", "10/12", "11/12"];
     borderAndOutlineStyles: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
     overflows: readonly ["auto", "hidden", "scroll", "visible"];
     textDecoration: readonly ["none", "underline"];
     textTransform: readonly ["none", "capitalize", "lowercase", "uppercase"];
     textAlign: readonly ["left", "right", "center", "justify"];
-    opacity: readonly [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+    opacity: readonly [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
     cursors: readonly ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "grab", "grabbing"];
-    sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15];
+    positiveSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 88, 96, 100];
+    negativeSizes: readonly [-1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -20, -24, -28, -32, -36, -40, -44, -48, -52, -56, -60, -68, -76, -84, -92, -100];
     sizeMultiplier: number;
     borderSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     fontSizes: readonly [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 70, 78, 86, 96];
@@ -44,11 +47,13 @@ export declare const styleVariables: {
     pointerEvents: readonly ["none", "auto", "all"];
     whiteSpace: readonly ["break-spaces", "normal", "nowrap", "pre", "pre-line", "pre-wrap"];
     textOverflow: readonly ["clip", "ellipsis"];
+    gridColumns: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
 };
+export declare const sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 64, 68, 72, 76, 80, 88, 96, 100, -1, -2, -3, -4, -5, -6, -7, -8, -9, -10, -11, -12, -13, -14, -15, -16, -20, -24, -28, -32, -36, -40, -44, -48, -52, -56, -60, -68, -76, -84, -92, -100];
 type GapType = (typeof styleVariables.gap)[number];
-type BoxSizeValue = (typeof styleVariables.sizeSpecialValues)[number];
+type WidthHeightSizeType = (typeof styleVariables.sizeSpecialValues)[number] | (typeof styleVariables.widthHeightSizes)[number] | (typeof styleVariables.widthHeightStringSizes)[number];
 type BorderSizeType = (typeof styleVariables.borderSizes)[number];
-type SizeType = (typeof styleVariables.sizes)[number];
+type SizeType = (typeof sizes)[number];
 type CursorType = (typeof styleVariables.cursors)[number];
 type OverflowType = (typeof styleVariables.overflows)[number];
 type FontSizeType = (typeof styleVariables.fontSizes)[number];
@@ -79,27 +84,27 @@ interface BoxSizing {
 }
 export interface BoxPosition {
     position?: (typeof styleVariables.position)[number];
-    inset?: SizeType;
+    inset?: (typeof styleVariables.positiveSizes)[number];
     top?: SizeType;
     right?: SizeType;
     bottom?: SizeType;
     left?: SizeType;
 }
 export interface BoxSize {
-    width?: BoxSizeValue;
-    height?: BoxSizeValue;
-    minWidth?: BoxSizeValue;
-    minHeight?: BoxSizeValue;
-    maxWidth?: BoxSizeValue;
-    maxHeight?: BoxSizeValue;
+    width?: WidthHeightSizeType;
+    height?: WidthHeightSizeType;
+    minWidth?: WidthHeightSizeType;
+    minHeight?: WidthHeightSizeType;
+    maxWidth?: WidthHeightSizeType;
+    maxHeight?: WidthHeightSizeType;
 }
 interface BoxMargin {
-    margin?: SizeType | 'auto';
-    m?: SizeType | 'auto';
-    marginHorizontal?: SizeType | 'auto';
-    mx?: SizeType | 'auto';
-    marginVertical?: SizeType | 'auto';
-    my?: SizeType | 'auto';
+    margin?: (typeof styleVariables.positiveSizes)[number] | 'auto';
+    m?: (typeof styleVariables.positiveSizes)[number] | 'auto';
+    marginHorizontal?: (typeof styleVariables.positiveSizes)[number] | 'auto';
+    mx?: (typeof styleVariables.positiveSizes)[number] | 'auto';
+    marginVertical?: (typeof styleVariables.positiveSizes)[number] | 'auto';
+    my?: (typeof styleVariables.positiveSizes)[number] | 'auto';
     marginTop?: SizeType | 'auto';
     mt?: SizeType | 'auto';
     marginRight?: SizeType | 'auto';
@@ -110,12 +115,12 @@ interface BoxMargin {
     ml?: SizeType | 'auto';
 }
 interface BoxPadding {
-    padding?: SizeType;
-    p?: SizeType;
-    paddingHorizontal?: SizeType;
-    px?: SizeType;
-    paddingVertical?: SizeType;
-    py?: SizeType;
+    padding?: (typeof styleVariables.positiveSizes)[number];
+    p?: (typeof styleVariables.positiveSizes)[number];
+    paddingHorizontal?: (typeof styleVariables.positiveSizes)[number];
+    px?: (typeof styleVariables.positiveSizes)[number];
+    paddingVertical?: (typeof styleVariables.positiveSizes)[number];
+    py?: (typeof styleVariables.positiveSizes)[number];
     paddingTop?: SizeType;
     pt?: SizeType;
     paddingRight?: SizeType;
@@ -146,15 +151,15 @@ interface BoxBorder {
     borderLeft?: BorderSizeType;
     bl?: BorderSizeType;
     borderStyle?: BorderAndOutlineStyleType;
-    borderRadius?: SizeType;
-    borderRadiusTop?: SizeType;
-    borderRadiusRight?: SizeType;
-    borderRadiusBottom?: SizeType;
-    borderRadiusLeft?: SizeType;
-    borderRadiusTopLeft?: SizeType;
-    borderRadiusTopRight?: SizeType;
-    borderRadiusBottomLeft?: SizeType;
-    borderRadiusBottomRight?: SizeType;
+    borderRadius?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusTop?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusRight?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusBottom?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusLeft?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusTopLeft?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusTopRight?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusBottomLeft?: (typeof styleVariables.positiveSizes)[number];
+    borderRadiusBottomRight?: (typeof styleVariables.positiveSizes)[number];
 }
 interface BoxCursor {
     cursor?: CursorType;
@@ -172,7 +177,7 @@ interface BoxOpacity {
 }
 interface BoxFont {
     fontSize?: FontSizeType;
-    lineHeight?: FontSizeType;
+    lineHeight?: FontSizeType | 'font-size';
     fontWeight?: FontWeightType;
     letterSpacing?: SizeType;
     fontStyle?: FontStyleType;
@@ -204,6 +209,12 @@ interface BoxFlex {
     alignSelf?: (typeof styleVariables.flexSelf)[number];
     justifySelf?: (typeof styleVariables.flexSelf)[number];
 }
+interface BoxGrid {
+    gridColumns?: (typeof styleVariables.gridColumns)[number];
+    colSpan?: (typeof styleVariables.gridColumns)[number] | 'full-row';
+    colStart?: (typeof styleVariables.gridColumns)[number];
+    colEnd?: (typeof styleVariables.gridColumns)[number];
+}
 interface BoxTransition {
     transition?: TransitionType;
 }
@@ -216,7 +227,7 @@ interface BoxAppearance {
 interface BoxPointerEvents {
     pointerEvents?: PointerEventsType;
 }
-type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect & BoxAppearance & BoxPointerEvents;
+type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect & BoxAppearance & BoxPointerEvents & BoxGrid;
 export declare namespace Augmented {
     interface BoxProps {
     }

package/utils/utils.cjs

@@ -1 +1 @@
-"use strict";const h=require("react"),C={hover:"_h",focus:"_f",shadow:"shadow_",shadowH:"shadow_h_",shadowF:"shadow_f_",shadowA:"shadow_a_",background:"bg_",backgroundH:"bg_h_",backgroundF:"bg_f_",backgroundA:"bg_a_",bg:"bg_",bgH:"bg_h_",bgF:"bg_f_",bgA:"bg_a_",color:"color_",colorH:"color_h_",colorF:"color_f_",colorA:"color_a_",backgroundColor:"bgColor_",backgroundColorH:"bgColor_h_",backgroundColorF:"bgColor_f_",backgroundColorA:"bgColor_a_",bgColor:"bgColor_",bgColorH:"bgColor_h_",bgColorF:"bgColor_f_",bgColorA:"bgColor_a_",borderColor:"borderColor_",borderColorH:"borderColor_h_",borderColorF:"borderColor_f_",borderColorA:"borderColor_a_",outlineColor:"outlineColor_",outlineColorH:"outlineColor_h_",outlineColorF:"outlineColor_f_",outlineColorA:"outlineColor_a_"},p={fill:"fill_",fillH:"fill_h_",fillF:"fill_f_",fillA:"fill_a_",stroke:"stroke_",strokeH:"stroke_h_",strokeF:"stroke_f_",strokeA:"stroke_a_"};var b;(i=>{function n(...u){return u.reduce((l,s)=>s?typeof s=="string"?(l.push(s),l):Array.isArray(s)?(l.push(...n(...s)),l):(Object.entries(s).forEach(([r,e])=>{e&&l.push(r)}),l):l,[])}i.classNames=n})(b||(b={}));const F=b;var f;(i=>{function n(l,...s){const r={...l},e={};return s.forEach(o=>{o in r&&(e[o]=r[o],delete r[o])}),[e,r]}i.moveToTagProps=n;function u(l,s,r){const e={...l},o=e.props||{};return s.forEach(t=>{if(t in e){if(o[t]=e[t],t==="disabled")return;delete e[t]}}),r&&Object.entries(r).forEach(([t,c])=>{o[t]=c}),e.props=o,e}i.buildProps=u})(f||(f={}));const m=f;var g;(i=>{function n(l){const s=Array.from(l.elements).reduce((r,e)=>{const o=e.name;return o&&(r[o]||(r[o]=[]),r[o].push(e)),r},{});return Object.entries(s).reduce((r,[e,o])=>{if(o.length===1){const t=o[0];u(r,e,t.type==="checkbox"||t.type==="radio"?t.checked:t.value)}else{const t=o.reduce((c,_)=>(_.type==="checkbox"||_.type==="radio"?_.checked&&c.push(_.value):c.push(_.value),c),[]);u(r,e,t)}return r},{})}i.getFormEntries=n;function u(l,s,r){if(s.includes(".")){const e=s.split(".");let o=l;e.forEach((t,c)=>{if(e.length>c+1){const _=t.match(/^(.+)\[(\d)\]$/);if(_){const[,a,d]=_;o[a]=o[a]||[],o[a][d]=o[a][d]||{},o=o[a][d]}else o[t]=o[t]||{},o=o[t]}else o[t]=r})}else l[s]=r}})(g||(g={}));const k=g;function A(){return h.useMemo(()=>{const i="crono-box";let n=document.getElementById(i);return n||(n=document.createElement("div"),n.id=i,document.body.appendChild(n)),n},[])}exports.ClassNameUtils=F;exports.FormUtils=k;exports.ObjectUtils=m;exports.themeClasses=C;exports.themeSvgClasses=p;exports.usePortalContainer=A;
+"use strict";const g=require("react"),C={hover:"_h",focus:"_f",shadow:"shadow_",shadowH:"shadow_h_",shadowF:"shadow_f_",shadowA:"shadow_a_",background:"bg_",backgroundH:"bg_h_",backgroundF:"bg_f_",backgroundA:"bg_a_",bg:"bg_",bgH:"bg_h_",bgF:"bg_f_",bgA:"bg_a_",color:"color_",colorH:"color_h_",colorF:"color_f_",colorA:"color_a_",backgroundColor:"bgColor_",backgroundColorH:"bgColor_h_",backgroundColorF:"bgColor_f_",backgroundColorA:"bgColor_a_",bgColor:"bgColor_",bgColorH:"bgColor_h_",bgColorF:"bgColor_f_",bgColorA:"bgColor_a_",borderColor:"borderColor_",borderColorH:"borderColor_h_",borderColorF:"borderColor_f_",borderColorA:"borderColor_a_",outlineColor:"outlineColor_",outlineColorH:"outlineColor_h_",outlineColorF:"outlineColor_f_",outlineColorA:"outlineColor_a_"},p={fill:"fill_",fillH:"fill_h_",fillF:"fill_f_",fillA:"fill_a_",stroke:"stroke_",strokeH:"stroke_h_",strokeF:"stroke_f_",strokeA:"stroke_a_"};var h;(c=>{function l(...i){return i.reduce((e,s)=>s?typeof s=="string"?(e.push(s),e):Array.isArray(s)?(e.push(...l(...s)),e):(Object.entries(s).forEach(([r,t])=>{t&&e.push(r)}),e):e,[])}c.classNames=l})(h||(h={}));const F=h;class m{constructor(){this._index=0,this._cache={}}getIdentity(l){return this._cache[l]||(this._cache[l]=this.getByIndex(this._index++)),this._cache[l]}getByIndex(l){const{first:i,next:e}=y,s=l-i.length;if(s<0)return i[l];const r=Math.floor(s/e.length),t=s-r*e.length;return this.getByIndex(r)+e[t]}}const y={first:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",next:"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"};var f;(c=>{function l(e,...s){const r={...e},t={};return s.forEach(o=>{o in r&&(t[o]=r[o],delete r[o])}),[t,r]}c.moveToTagProps=l;function i(e,s,r){const t={...e},o=t.props||{};return s.forEach(n=>{if(n in t){if(o[n]=t[n],n==="disabled")return;delete t[n]}}),r&&Object.entries(r).forEach(([n,u])=>{o[n]=u}),t.props=o,t}c.buildProps=i})(f||(f={}));const A=f;var b;(c=>{function l(e){const s=Array.from(e.elements).reduce((r,t)=>{const o=t.name;return o&&(r[o]||(r[o]=[]),r[o].push(t)),r},{});return Object.entries(s).reduce((r,[t,o])=>{if(o.length===1){const n=o[0];i(r,t,n.type==="checkbox"||n.type==="radio"?n.checked:n.value)}else{const n=o.reduce((u,_)=>(_.type==="checkbox"||_.type==="radio"?_.checked&&u.push(_.value):u.push(_.value),u),[]);i(r,t,n)}return r},{})}c.getFormEntries=l;function i(e,s,r){if(s.includes(".")){const t=s.split(".");let o=e;t.forEach((n,u)=>{if(t.length>u+1){const _=n.match(/^(.+)\[(\d)\]$/);if(_){const[,a,d]=_;o[a]=o[a]||[],o[a][d]=o[a][d]||{},o=o[a][d]}else o[n]=o[n]||{},o=o[n]}else o[n]=r})}else e[s]=r}})(b||(b={}));const k=b;function x(){return g.useMemo(()=>{const c="crono-box";let l=document.getElementById(c);return l||(l=document.createElement("div"),l.id=c,document.body.appendChild(l)),l},[])}exports.ClassNameUtils=F;exports.FormUtils=k;exports.IdentityFactory=m;exports.ObjectUtils=A;exports.themeClasses=C;exports.themeSvgClasses=p;exports.usePortalContainer=x;

package/utils/utils.mjs

@@ -1,5 +1,5 @@
-import { useMemo as h } from "react";
-const p = {
+import { useMemo as g } from "react";
+const F = {
   hover: "_h",
   focus: "_f",
   shadow: "shadow_",
@@ -34,7 +34,7 @@ const p = {
   outlineColorH: "outlineColor_h_",
   outlineColorF: "outlineColor_f_",
   outlineColorA: "outlineColor_a_"
-}, F = {
+}, m = {
   fill: "fill_",
   fillH: "fill_h_",
   fillF: "fill_f_",
@@ -44,91 +44,111 @@ const p = {
   strokeF: "stroke_f_",
   strokeA: "stroke_a_"
 };
-var f;
-((_) => {
-  function n(...u) {
-    return u.reduce((l, s) => s ? typeof s == "string" ? (l.push(s), l) : Array.isArray(s) ? (l.push(...n(...s)), l) : (Object.entries(s).forEach(([r, e]) => {
-      e && l.push(r);
-    }), l) : l, []);
+var h;
+((c) => {
+  function l(...i) {
+    return i.reduce((e, n) => n ? typeof n == "string" ? (e.push(n), e) : Array.isArray(n) ? (e.push(...l(...n)), e) : (Object.entries(n).forEach(([r, t]) => {
+      t && e.push(r);
+    }), e) : e, []);
   }
-  _.classNames = n;
-})(f || (f = {}));
-const k = f;
-var b;
-((_) => {
-  function n(l, ...s) {
-    const r = { ...l }, e = {};
-    return s.forEach((o) => {
-      o in r && (e[o] = r[o], delete r[o]);
-    }), [e, r];
+  c.classNames = l;
+})(h || (h = {}));
+const x = h;
+class A {
+  constructor() {
+    this._index = 0, this._cache = {};
   }
-  _.moveToTagProps = n;
-  function u(l, s, r) {
-    const e = { ...l }, o = e.props || {};
-    return s.forEach((t) => {
-      if (t in e) {
-        if (o[t] = e[t], t === "disabled")
+  getIdentity(l) {
+    return this._cache[l] || (this._cache[l] = this.getByIndex(this._index++)), this._cache[l];
+  }
+  getByIndex(l) {
+    const { first: i, next: e } = C, n = l - i.length;
+    if (n < 0)
+      return i[l];
+    const r = Math.floor(n / e.length), t = n - r * e.length;
+    return this.getByIndex(r) + e[t];
+  }
+}
+const C = {
+  first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+};
+var f;
+((c) => {
+  function l(e, ...n) {
+    const r = { ...e }, t = {};
+    return n.forEach((o) => {
+      o in r && (t[o] = r[o], delete r[o]);
+    }), [t, r];
+  }
+  c.moveToTagProps = l;
+  function i(e, n, r) {
+    const t = { ...e }, o = t.props || {};
+    return n.forEach((s) => {
+      if (s in t) {
+        if (o[s] = t[s], s === "disabled")
           return;
-        delete e[t];
+        delete t[s];
       }
-    }), r && Object.entries(r).forEach(([t, c]) => {
-      o[t] = c;
-    }), e.props = o, e;
+    }), r && Object.entries(r).forEach(([s, a]) => {
+      o[s] = a;
+    }), t.props = o, t;
   }
-  _.buildProps = u;
-})(b || (b = {}));
-const A = b;
-var g;
-((_) => {
-  function n(l) {
-    const s = Array.from(l.elements).reduce((r, e) => {
-      const o = e.name;
-      return o && (r[o] || (r[o] = []), r[o].push(e)), r;
+  c.buildProps = i;
+})(f || (f = {}));
+const k = f;
+var b;
+((c) => {
+  function l(e) {
+    const n = Array.from(e.elements).reduce((r, t) => {
+      const o = t.name;
+      return o && (r[o] || (r[o] = []), r[o].push(t)), r;
     }, {});
-    return Object.entries(s).reduce((r, [e, o]) => {
+    return Object.entries(n).reduce((r, [t, o]) => {
       if (o.length === 1) {
-        const t = o[0];
-        u(r, e, t.type === "checkbox" || t.type === "radio" ? t.checked : t.value);
+        const s = o[0];
+        i(r, t, s.type === "checkbox" || s.type === "radio" ? s.checked : s.value);
       } else {
-        const t = o.reduce((c, i) => (i.type === "checkbox" || i.type === "radio" ? i.checked && c.push(i.value) : c.push(i.value), c), []);
-        u(r, e, t);
+        const s = o.reduce((a, _) => (_.type === "checkbox" || _.type === "radio" ? _.checked && a.push(_.value) : a.push(_.value), a), []);
+        i(r, t, s);
       }
       return r;
     }, {});
   }
-  _.getFormEntries = n;
-  function u(l, s, r) {
-    if (s.includes(".")) {
-      const e = s.split(".");
-      let o = l;
-      e.forEach((t, c) => {
-        if (e.length > c + 1) {
-          const i = t.match(/^(.+)\[(\d)\]$/);
-          if (i) {
-            const [, a, d] = i;
-            o[a] = o[a] || [], o[a][d] = o[a][d] || {}, o = o[a][d];
+  c.getFormEntries = l;
+  function i(e, n, r) {
+    if (n.includes(".")) {
+      const t = n.split(".");
+      let o = e;
+      t.forEach((s, a) => {
+        if (t.length > a + 1) {
+          const _ = s.match(/^(.+)\[(\d)\]$/);
+          if (_) {
+            const [, u, d] = _;
+            o[u] = o[u] || [], o[u][d] = o[u][d] || {}, o = o[u][d];
           } else
-            o[t] = o[t] || {}, o = o[t];
+            o[s] = o[s] || {}, o = o[s];
         } else
-          o[t] = r;
+          o[s] = r;
       });
     } else
-      l[s] = r;
+      e[n] = r;
   }
-})(g || (g = {}));
-const m = g;
-function w() {
-  return h(() => {
-    const _ = "crono-box";
-    let n = document.getElementById(_);
-    return n || (n = document.createElement("div"), n.id = _, document.body.appendChild(n)), n;
+})(b || (b = {}));
+const y = b;
+function I() {
+  return g(() => {
+    const c = "crono-box";
+    let l = document.getElementById(c);
+    return l || (l = document.createElement("div"), l.id = c, document.body.appendChild(l)), l;
   }, []);
 }
 export {
-  k as C,
-  m as F,
-  A as O,
-  p as a,
-  F as t,
-  w as u
+  x as C,
+  y as F,
+  A as I,
+  k as O,
+  F as a,
+  m as t,
+  I as u
 };

package/src/components/dataGrid.d.ts

@@ -1,13 +0,0 @@
-import { Grid } from './dataGridContract';
-export default function useGrid<T extends {}>(data?: T[]): Grid<T>;
-tends {}> {
-    key: keyof T;
-}
-export interface GridRow<T extends {}> {
-    dataRow: T;
-    cells: GridCell<T>[];
-}
-export interface Grid<T extends {}> {
-    columns: GridColumn<T>[];
-    rows: GridRow<T>[];
-}