@cronocode/react-box 1.6.2 → 1.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/baseSvg.module.css.cjs +1 -1
  2. package/baseSvg.module.css.mjs +2 -2
  3. package/box.module.css.cjs +1 -1
  4. package/box.module.css.mjs +1 -1
  5. package/components/dox/doxStyles.d.ts +79 -10
  6. package/components/dox/doxStylesFormatters.d.ts +4 -0
  7. package/components/dox/useStyles.d.ts +1 -1
  8. package/components/dox.cjs +3 -3
  9. package/components/dox.d.ts +4 -4
  10. package/components/dox.mjs +205 -145
  11. package/package.json +1 -1
  12. package/style.css +1 -1
package/components/dox/doxStyles.d.ts CHANGED
@@ -4,11 +4,14 @@ import { DoxStylesFormatters } from './doxStylesFormatters';
4
4
  export interface StyleValues {
5
5
  values: Readonly<Array<string | number | boolean>>;
6
6
  formatClassName?: (key: string, value: string | number | boolean) => string;
7
+ formatSelector?: (selector: string) => string[];
7
8
  formatValue?: (key: string, value: string | number | boolean) => string;
8
9
  }
9
10
  export interface ThemeItem {
10
11
  cssNames: string[];
11
- formatValue: (key: string, value: string | number | boolean) => string;
12
+ formatClassName?: (key: string, value: string | number | boolean) => string;
13
+ formatSelector?: (selector: string) => string[];
14
+ formatValue?: (key: string, value: string | number | boolean) => string;
12
15
  }
13
16
  export declare const pseudoClassSuffixes: readonly ["H", "F", "A"];
14
17
  export type PseudoClassSuffix = (typeof pseudoClassSuffixes)[number];
@@ -19,9 +22,8 @@ export interface StyleItem {
19
22
  values3: StyleValues;
20
23
  pseudoSuffix?: PseudoClassSuffix;
21
24
  isThemeStyle?: boolean;
22
- isPseudoClass?: boolean;
23
25
  }
24
- export declare const themeStyles: {
26
+ export declare const doxThemeStyles: {
25
27
  shadow: {
26
28
  cssNames: string[];
27
29
  formatValue: (key: string, value: string | number | boolean) => string;
@@ -47,6 +49,18 @@ export declare const themeStyles: {
47
49
  formatValue: (key: string, value: string | number | boolean) => string;
48
50
  };
49
51
  };
52
+ export declare const svgThemeStyles: {
53
+ fill: {
54
+ cssNames: string[];
55
+ formatValue: (key: string, value: string | number | boolean) => string;
56
+ formatSelector: typeof DoxStylesFormatters.ClassName.svg;
57
+ };
58
+ stroke: {
59
+ cssNames: string[];
60
+ formatValue: (key: string, value: string | number | boolean) => string;
61
+ formatSelector: typeof DoxStylesFormatters.ClassName.svg;
62
+ };
63
+ };
50
64
  export interface PseudoClassStyleType {
51
65
  className: string;
52
66
  }
@@ -97,7 +111,6 @@ export declare const doxStyles: {
97
111
  values3: {
98
112
  values: 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"];
99
113
  formatValue: typeof DoxStylesFormatters.Value.fraction;
100
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
101
114
  };
102
115
  };
103
116
  minWidth: {
@@ -113,7 +126,6 @@ export declare const doxStyles: {
113
126
  values3: {
114
127
  values: 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"];
115
128
  formatValue: typeof DoxStylesFormatters.Value.fraction;
116
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
117
129
  };
118
130
  };
119
131
  maxWidth: {
@@ -129,7 +141,6 @@ export declare const doxStyles: {
129
141
  values3: {
130
142
  values: 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"];
131
143
  formatValue: typeof DoxStylesFormatters.Value.fraction;
132
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
133
144
  };
134
145
  };
135
146
  height: {
@@ -145,7 +156,6 @@ export declare const doxStyles: {
145
156
  values3: {
146
157
  values: 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"];
147
158
  formatValue: typeof DoxStylesFormatters.Value.fraction;
148
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
149
159
  };
150
160
  };
151
161
  minHeight: {
@@ -161,7 +171,6 @@ export declare const doxStyles: {
161
171
  values3: {
162
172
  values: 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"];
163
173
  formatValue: typeof DoxStylesFormatters.Value.fraction;
164
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
165
174
  };
166
175
  };
167
176
  maxHeight: {
@@ -177,7 +186,6 @@ export declare const doxStyles: {
177
186
  values3: {
178
187
  values: 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"];
179
188
  formatValue: typeof DoxStylesFormatters.Value.fraction;
180
- formatClassName: typeof DoxStylesFormatters.ClassName.fraction;
181
189
  };
182
190
  };
183
191
  position: {
@@ -1178,7 +1186,67 @@ export declare const doxStyles: {
1178
1186
  };
1179
1187
  };
1180
1188
  };
1189
+ export declare const svgStyles: {
1190
+ rotate: {
1191
+ cssNames: string[];
1192
+ values1: {
1193
+ values: readonly [0, 90, 180, 270, -90, -180, -270];
1194
+ formatValue: typeof DoxStylesFormatters.Value.rotate;
1195
+ };
1196
+ values2: {
1197
+ values: readonly [];
1198
+ };
1199
+ values3: {
1200
+ values: readonly [];
1201
+ };
1202
+ };
1203
+ flip: {
1204
+ cssNames: string[];
1205
+ values1: {
1206
+ values: readonly ["xAxis", "yAxis"];
1207
+ formatValue: typeof DoxStylesFormatters.Value.flip;
1208
+ };
1209
+ values2: {
1210
+ values: readonly [];
1211
+ };
1212
+ values3: {
1213
+ values: readonly [];
1214
+ };
1215
+ };
1216
+ };
1181
1217
  export declare const aliases: {
1218
+ w: {
1219
+ key: "width";
1220
+ cssNames: string[];
1221
+ values1: {
1222
+ values: readonly ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
1223
+ formatValue: typeof DoxStylesFormatters.Value.widthHeight;
1224
+ };
1225
+ values2: {
1226
+ values: 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, 84, 88, 92, 96, 100];
1227
+ formatValue: typeof DoxStylesFormatters.Value.rem;
1228
+ };
1229
+ values3: {
1230
+ values: 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"];
1231
+ formatValue: typeof DoxStylesFormatters.Value.fraction;
1232
+ };
1233
+ };
1234
+ h: {
1235
+ key: "height";
1236
+ cssNames: string[];
1237
+ values1: {
1238
+ values: readonly ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
1239
+ formatValue: typeof DoxStylesFormatters.Value.widthHeight;
1240
+ };
1241
+ values2: {
1242
+ values: 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, 84, 88, 92, 96, 100];
1243
+ formatValue: typeof DoxStylesFormatters.Value.rem;
1244
+ };
1245
+ values3: {
1246
+ values: 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"];
1247
+ formatValue: typeof DoxStylesFormatters.Value.fraction;
1248
+ };
1249
+ };
1182
1250
  m: {
1183
1251
  key: "margin";
1184
1252
  cssNames: string[];
@@ -1531,11 +1599,12 @@ type Styles<T extends Record<string, StyleItem>> = {
1531
1599
  };
1532
1600
  export type StyleKey = keyof typeof doxStyles;
1533
1601
  export type AliasKey = keyof typeof aliases;
1534
- export type ThemeKey = keyof typeof themeStyles;
1535
1602
  type DoxNormalStyles = Styles<typeof doxStyles> & Styles<typeof aliases> & ThemeComponentProps;
1536
1603
  interface DoxPseudoClasses {
1537
1604
  hover?: boolean;
1538
1605
  focus?: boolean;
1539
1606
  }
1540
1607
  export type DoxStyleProps = DoxNormalStyles & DoxPseudoClasses & Hovered<DoxNormalStyles> & Focused<DoxNormalStyles> & Activated<DoxNormalStyles> & Augmented.BoxProps;
1608
+ type SvgNormalStyles = Styles<typeof svgStyles> & ThemeComponentProps;
1609
+ export type DoxSvgStyles = SvgNormalStyles & Hovered<SvgNormalStyles> & Focused<SvgNormalStyles> & Activated<SvgNormalStyles> & Augmented.SvgProps;
1541
1610
  export {};
package/components/dox/doxStylesFormatters.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare namespace DoxStylesFormatters {
2
2
  namespace ClassName {
3
3
  function fraction(key: string, value: string | number | boolean): string;
4
+ function svg(selector: string): string[];
4
5
  }
5
6
  namespace Value {
6
7
  function rem(_key: string, value: string | number | boolean): string;
@@ -8,8 +9,11 @@ export declare namespace DoxStylesFormatters {
8
9
  function fraction(_key: string, value: string | number | boolean): string;
9
10
  function widthHeight(key: string, value: string | number | boolean): string;
10
11
  function variables(prefix: string): (key: string, value: string | number | boolean) => string;
12
+ function svgVariables(prefix: string): (key: string, value: string | number | boolean) => string;
11
13
  function gridColumns(key: string, value: string | number | boolean): string;
12
14
  function gridColumn(key: string, value: string | number | boolean): string;
13
15
  function ms(key: string, value: string | number | boolean): string;
16
+ function rotate(key: string, value: string | number | boolean): string;
17
+ function flip(key: string, value: string | number | boolean): "-1 1" | "1 -1";
14
18
  }
15
19
  }
package/components/dox/useStyles.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { DoxStyleProps } from './doxStyles';
2
- export default function useStyles(props: DoxStyleProps): (string | undefined)[];
2
+ export default function useStyles(props: DoxStyleProps, isSvg: boolean): (string | undefined)[];
package/components/dox.cjs CHANGED
@@ -1,7 +1,7 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),R=require("../utils/utils.cjs"),B=require("../theme.cjs");var e;(a=>{(u=>{function c(n,m){return`${n}${m.replace("/","-")}`}u.fraction=c})(a.ClassName||(a.ClassName={})),(u=>{function c(o,r){return`${r/4}rem`}u.rem=c;function n(o,r){return`${r}px`}u.px=n;function m(o,r){const[V,t]=r.split("/");return`${+V/+t*100}%`}u.fraction=m;function g(o,r){switch(r){case"fit":return"100%";case"fit-screen":return o.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return r}}u.widthHeight=g;function h(o){return(r,V)=>`var(--${o}${V});`}u.variables=h;function z(o,r){return`repeat(${r},minmax(0,1fr))`}u.gridColumns=z;function w(o,r){return r==="full-row"?"1/-1":`span ${r}/span ${r}`}u.gridColumn=w;function d(o,r){return`${r}ms`}u.ms=d})(a.Value||(a.Value={}))})(e||(e={}));const O=["H","F","A"];var s;(a=>{a.positiveSizes=[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,84,88,92,96,100],a.negativeSizes=[-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,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],a.sizes=[...a.positiveSizes,...a.negativeSizes],a.borderAndOutlineStyles=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],a.overflows=["auto","hidden","scroll","visible"],a.widthHeightFractions=["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"],a.widthHeightValues=["fit","fit-screen","auto","fit-content","max-content","min-content"],a.alignSelf=["auto","flex-start","flex-end","center","baseline","stretch"]})(s||(s={}));const $={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},k={hover:{className:"_h"},focus:{className:"_f"}},l={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},minWidth:{cssNames:["min-width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},height:{cssNames:["height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},minHeight:{cssNames:["min-height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction,formatClassName:e.ClassName.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:s.borderAndOutlineStyles},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{values:["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"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},justifyContent:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},alignItems:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},flexDirection:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:s.alignSelf},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:s.alignSelf},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:s.positiveSizes,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:s.positiveSizes,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:s.borderAndOutlineStyles},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}}};Object.keys($).forEach(a=>{l[a]=$[a],l[a].isThemeStyle=!0});const b={m:{...l.margin,key:"margin"},mx:{...l.marginHorizontal,key:"marginHorizontal"},my:{...l.marginVertical,key:"marginVertical"},mt:{...l.marginTop,key:"marginTop"},mr:{...l.marginRight,key:"marginRight"},mb:{...l.marginBottom,key:"marginBottom"},ml:{...l.marginLeft,key:"marginLeft"},p:{...l.padding,key:"padding"},px:{...l.paddingHorizontal,key:"paddingHorizontal"},py:{...l.paddingVertical,key:"paddingVertical"},pt:{...l.paddingTop,key:"paddingTop"},pr:{...l.paddingRight,key:"paddingRight"},pb:{...l.paddingBottom,key:"paddingBottom"},pl:{...l.paddingLeft,key:"paddingLeft"},b:{...l.border,key:"border"},bx:{...l.borderHorizontal,key:"borderHorizontal"},by:{...l.borderVertical,key:"borderVertical"},bt:{...l.borderTop,key:"borderTop"},br:{...l.borderRight,key:"borderRight"},bb:{...l.borderBottom,key:"borderBottom"},bl:{...l.borderLeft,key:"borderLeft"},jc:{...l.justifyContent,key:"justifyContent"},ai:{...l.alignItems,key:"alignItems"},ac:{...l.alignContent,key:"alignContent"},d:{...l.flexDirection,key:"flexDirection"}},A=Object.keys(l),F=Object.keys(b);O.forEach(a=>{A.forEach(u=>{l[`${u}${a}`]={...l[u]},l[`${u}${a}`].pseudoSuffix=a}),F.forEach(u=>{b[`${u}${a}`]={...b[u],key:`${b[u].key}${a}`},b[`${u}${a}`].pseudoSuffix=a})});var y;(a=>{a.doxClassName="_dox",a.svgClassName="_svg";const u=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),L=require("../utils/utils.cjs"),I=require("../theme.cjs");var e;(a=>{(r=>{function n(o,d){return`${o}${d.replace("/","-")}`}r.fraction=n;function v(o){return[`${o} path`,`${o} circle`,`${o} rect`,`${o} line`]}r.svg=v})(a.ClassName||(a.ClassName={})),(r=>{function n(u,l){return`${l/4}rem`}r.rem=n;function v(u,l){return`${l}px`}r.px=v;function o(u,l){const[i,c]=l.split("/");return`${+i/+c*100}%`}r.fraction=o;function d(u,l){switch(l){case"fit":return"100%";case"fit-screen":return u.toLocaleLowerCase().includes("height")?"100vh":"100vw";default:return l}}r.widthHeight=d;function g(u){return(l,i)=>`var(--${u}${i});`}r.variables=g;function x(u){return(l,i)=>`var(--${u}${i});`}r.svgVariables=x;function S(u,l){return`repeat(${l},minmax(0,1fr))`}r.gridColumns=S;function f(u,l){return l==="full-row"?"1/-1":`span ${l}/span ${l}`}r.gridColumn=f;function h(u,l){return`${l}ms`}r.ms=h;function V(u,l){return`${l}deg`}r.rotate=V;function b(u,l){return l==="xAxis"?"-1 1":"1 -1"}r.flip=b})(a.Value||(a.Value={}))})(e||(e={}));const _=["H","F","A"];var s;(a=>{a.positiveSizes=[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,84,88,92,96,100],a.negativeSizes=[-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,-44,-48,-52,-56,-60,-64,-68,-72,-76,-80,-84,-88,-92,-96,-100],a.sizes=[...a.positiveSizes,...a.negativeSizes],a.borderAndOutlineStyles=["solid","dashed","dotted","double","groove","ridge","inset","outset","none","hidden"],a.overflows=["auto","hidden","scroll","visible"],a.widthHeightFractions=["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"],a.widthHeightValues=["fit","fit-screen","auto","fit-content","max-content","min-content"],a.alignSelf=["auto","flex-start","flex-end","center","baseline","stretch"]})(s||(s={}));const j={shadow:{cssNames:["box-shadow"],formatValue:e.Value.variables("shadow")},background:{cssNames:["background"],formatValue:e.Value.variables("background")},color:{cssNames:["color"],formatValue:e.Value.variables("color")},bgColor:{cssNames:["background-color"],formatValue:e.Value.variables("color")},borderColor:{cssNames:["border-color"],formatValue:e.Value.variables("color")},outlineColor:{cssNames:["outline-color"],formatValue:e.Value.variables("color")}},E={fill:{cssNames:["fill"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg},stroke:{cssNames:["stroke"],formatValue:e.Value.svgVariables("color"),formatSelector:e.ClassName.svg}},H={hover:{className:"_h"},focus:{className:"_f"}},t={display:{cssNames:["display"],values1:{values:["none","block","inline-block","flex","inline-flex","grid","inline-grid","contents"]},values2:{values:[]},values3:{values:[]}},boxSizing:{cssNames:["box-sizing"],values1:{values:["border-box","content-box"]},values2:{values:[]},values3:{values:[]}},width:{cssNames:["width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},minWidth:{cssNames:["min-width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},maxWidth:{cssNames:["max-width"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},height:{cssNames:["height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},minHeight:{cssNames:["min-height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},maxHeight:{cssNames:["max-height"],values1:{values:s.widthHeightValues,formatValue:e.Value.widthHeight},values2:{values:s.positiveSizes,formatValue:e.Value.rem},values3:{values:s.widthHeightFractions,formatValue:e.Value.fraction}},position:{cssNames:["position"],values1:{values:["static","relative","absolute","fixed","sticky"]},values2:{values:[]},values3:{values:[]}},top:{cssNames:["top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},right:{cssNames:["right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},bottom:{cssNames:["bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},left:{cssNames:["left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},inset:{cssNames:["inset"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},margin:{cssNames:["margin"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginHorizontal:{cssNames:["margin-inline"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginVertical:{cssNames:["margin-block"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginTop:{cssNames:["margin-top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginRight:{cssNames:["margin-right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginBottom:{cssNames:["margin-bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},marginLeft:{cssNames:["margin-left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:["auto"]},values3:{values:[]}},padding:{cssNames:["padding"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingHorizontal:{cssNames:["padding-inline"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingVertical:{cssNames:["padding-block"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingTop:{cssNames:["padding-top"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingRight:{cssNames:["padding-right"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingBottom:{cssNames:["padding-bottom"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},paddingLeft:{cssNames:["padding-left"],values1:{values:s.sizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},border:{cssNames:["border-width"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderHorizontal:{cssNames:["border-inline-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderVertical:{cssNames:["border-block-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderTop:{cssNames:["border-top-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderRight:{cssNames:["border-right-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderBottom:{cssNames:["border-bottom-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderLeft:{cssNames:["border-left-width"],values1:{values:s.sizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},borderStyle:{cssNames:["border-style"],values1:{values:s.borderAndOutlineStyles},values2:{values:[]},values3:{values:[]}},borderRadius:{cssNames:["border-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTop:{cssNames:["border-top-left-radius","border-top-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusRight:{cssNames:["border-top-right-radius","border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottom:{cssNames:["border-bottom-left-radius","border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusLeft:{cssNames:["border-top-left-radius","border-bottom-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopLeft:{cssNames:["border-top-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusTopRight:{cssNames:["border-top-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomLeft:{cssNames:["border-bottom-left-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},borderRadiusBottomRight:{cssNames:["border-bottom-right-radius"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},cursor:{cssNames:["cursor"],values1:{values:["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"]},values2:{values:[]},values3:{values:[]}},zIndex:{cssNames:["z-index"],values1:{values:[1,2,3,4,5,10,11,12,13,14,15,100,101,102,103,104,105,1e3,1001,1002,1003,1004,1005]},values2:{values:[]},values3:{values:[]}},overflow:{cssNames:["overflow"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},overflowX:{cssNames:["overflow-x"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},overflowY:{cssNames:["overflow-y"],values1:{values:s.overflows},values2:{values:[]},values3:{values:[]}},opacity:{cssNames:["opacity"],values1:{values:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]},values2:{values:[]},values3:{values:[]}},fontSize:{cssNames:["font-size"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:["inherit"]},values3:{values:[]}},fontStyle:{cssNames:["font-style"],values1:{values:["italic","normal","oblique"]},values2:{values:[]},values3:{values:[]}},fontWeight:{cssNames:["font-weight"],values1:{values:[100,200,300,400,500,600,700,800,900]},values2:{values:[]},values3:{values:[]}},letterSpacing:{cssNames:["letter-spacing"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},lineHeight:{cssNames:["line-height"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:["font-size"],formatValue:()=>"1"},values3:{values:[]}},textDecoration:{cssNames:["text-decoration"],values1:{values:["none","underline","overline","line-through"]},values2:{values:[]},values3:{values:[]}},textTransform:{cssNames:["text-transform"],values1:{values:["none","capitalize","lowercase","uppercase"]},values2:{values:[]},values3:{values:[]}},textAlign:{cssNames:["text-align"],values1:{values:["left","right","center","justify"]},values2:{values:[]},values3:{values:[]}},flexWrap:{cssNames:["flex-wrap"],values1:{values:["nowrap","wrap","wrap-reverse"]},values2:{values:[]},values3:{values:[]}},justifyContent:{cssNames:["justify-content"],values1:{values:["start","end","flex-start","flex-end","center","left","right","space-between","space-around","space-evenly","stretch"]},values2:{values:[]},values3:{values:[]}},alignItems:{cssNames:["align-items"],values1:{values:["stretch","flex-start","flex-end","center","baseline","start","end","self-start","self-end"]},values2:{values:[]},values3:{values:[]}},alignContent:{cssNames:["align-content"],values1:{values:["flex-start","flex-end","center","space-between","space-around","space-evenly","stretch","start","end","baseline"]},values2:{values:[]},values3:{values:[]}},flex1:{cssNames:["flex"],values1:{values:[!0],formatValue:()=>"1"},values2:{values:[]},values3:{values:[]}},flexDirection:{cssNames:["flex-direction"],values1:{values:["row","row-reverse","column","column-reverse"]},values2:{values:[]},values3:{values:[]}},gap:{cssNames:["gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},rowGap:{cssNames:["row-gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},columnGap:{cssNames:["column-gap"],values1:{values:s.positiveSizes,formatValue:e.Value.rem},values2:{values:[]},values3:{values:[]}},order:{cssNames:["order"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},flexGrow:{cssNames:["flex-grow"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},flexShrink:{cssNames:["flex-shrink"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},alignSelf:{cssNames:["align-self"],values1:{values:s.alignSelf},values2:{values:[]},values3:{values:[]}},justifySelf:{cssNames:["justify-self"],values1:{values:s.alignSelf},values2:{values:[]},values3:{values:[]}},gridColumns:{cssNames:["grid-template-columns"],values1:{values:s.positiveSizes,formatValue:e.Value.gridColumns},values2:{values:[]},values3:{values:[]}},colSpan:{cssNames:["grid-column"],values1:{values:s.positiveSizes,formatValue:e.Value.gridColumn},values2:{values:["full-row"],formatValue:e.Value.gridColumn},values3:{values:[]}},colStart:{cssNames:["grid-column-start"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},colEnd:{cssNames:["grid-column-end"],values1:{values:s.positiveSizes},values2:{values:[]},values3:{values:[]}},outline:{cssNames:["outline-width"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},outlineStyle:{cssNames:["outline-style"],values1:{values:s.borderAndOutlineStyles},values2:{values:[]},values3:{values:[]}},outlineOffset:{cssNames:["outline-offset"],values1:{values:s.positiveSizes,formatValue:e.Value.px},values2:{values:[]},values3:{values:[]}},transition:{cssNames:["transition-property"],values1:{values:["none","all"]},values2:{values:[]},values3:{values:[]}},transitionDuration:{cssNames:["transition-duration"],values1:{values:[50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950,1e3],formatValue:e.Value.ms},values2:{values:[]},values3:{values:[]}},userSelect:{cssNames:["user-select"],values1:{values:["none","auto","text","all"]},values2:{values:[]},values3:{values:[]}},appearance:{cssNames:["appearance"],values1:{values:["none"]},values2:{values:[]},values3:{values:[]}},pointerEvents:{cssNames:["pointer-events"],values1:{values:["none","auto","all"]},values2:{values:[]},values3:{values:[]}},whiteSpace:{cssNames:["white-space"],values1:{values:["break-spaces","normal","nowrap","pre","pre-line","pre-wrap"]},values2:{values:[]},values3:{values:[]}},textOverflow:{cssNames:["text-overflow"],values1:{values:["clip","ellipsis"]},values2:{values:[]},values3:{values:[]}}},T={rotate:{cssNames:["rotate"],values1:{values:[0,90,180,270,-90,-180,-270],formatValue:e.Value.rotate},values2:{values:[]},values3:{values:[]}},flip:{cssNames:["scale"],values1:{values:["xAxis","yAxis"],formatValue:e.Value.flip},values2:{values:[]},values3:{values:[]}}};Object.keys(T).forEach(a=>{t[a]=T[a]});Object.keys(j).forEach(a=>{t[a]=j[a],t[a].isThemeStyle=!0});Object.keys(E).forEach(a=>{t[a]=E[a],t[a].isThemeStyle=!0});const z={w:{...t.width,key:"width"},h:{...t.height,key:"height"},m:{...t.margin,key:"margin"},mx:{...t.marginHorizontal,key:"marginHorizontal"},my:{...t.marginVertical,key:"marginVertical"},mt:{...t.marginTop,key:"marginTop"},mr:{...t.marginRight,key:"marginRight"},mb:{...t.marginBottom,key:"marginBottom"},ml:{...t.marginLeft,key:"marginLeft"},p:{...t.padding,key:"padding"},px:{...t.paddingHorizontal,key:"paddingHorizontal"},py:{...t.paddingVertical,key:"paddingVertical"},pt:{...t.paddingTop,key:"paddingTop"},pr:{...t.paddingRight,key:"paddingRight"},pb:{...t.paddingBottom,key:"paddingBottom"},pl:{...t.paddingLeft,key:"paddingLeft"},b:{...t.border,key:"border"},bx:{...t.borderHorizontal,key:"borderHorizontal"},by:{...t.borderVertical,key:"borderVertical"},bt:{...t.borderTop,key:"borderTop"},br:{...t.borderRight,key:"borderRight"},bb:{...t.borderBottom,key:"borderBottom"},bl:{...t.borderLeft,key:"borderLeft"},jc:{...t.justifyContent,key:"justifyContent"},ai:{...t.alignItems,key:"alignItems"},ac:{...t.alignContent,key:"alignContent"},d:{...t.flexDirection,key:"flexDirection"}},M=Object.keys(t),P=Object.keys(z);_.forEach(a=>{M.forEach(r=>{t[`${r}${a}`]={...t[r]},t[`${r}${a}`].pseudoSuffix=a}),P.forEach(r=>{z[`${r}${a}`]={...z[r],key:`${z[r].key}${a}`},z[`${r}${a}`].pseudoSuffix=a})});var w;(a=>{a.doxClassName="_dox",a.svgClassName="_svg";const r=`:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
2
2
  html{font-size: 16px;font-family: Arial, sans-serif;}
3
3
  body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
4
4
  a,ul{all: unset;}
5
5
  .${a.doxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
6
- .${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);path,circle,rect,line {transition: all var(--svgTransitionTime);}}
7
- `,c=new R.IdentityFactory,n=[...Object.keys(l),...Object.keys($)],m=V();let g=!1;const h=n.reduce((t,i)=>(t[i]=new Set,t),{});function z(t,i){if(t in l)return d(t,i);if(t in k)return k[t].className}a.get=z;function w(){if(g){console.info("%c💬Flush Dox Styles","color: #00ffff");let t=o([u]);t=o(t,"H"),t=o(t,"F"),t=o(t,"A"),m.innerHTML=t.join(""),g=!1}}a.flush=w;function d(t,i){var x;h[t].has(i)||(g=!0,h[t].add(i));const v=r(t,i),f=((x=v.formatClassName)==null?void 0:x.call(v,t,i))??`${t}${i}`;return`-${c.getIdentity(f)}`}function o(t,i){return Object.entries(h).filter(([v])=>{var f;return((f=l[v])==null?void 0:f.pseudoSuffix)===i}).reduce((v,[f,x])=>(x.forEach(S=>{var T;let p=d(f,S);i==="H"&&(p=`${p}:hover,.${k.hover.className}:hover>.${p}`),i==="F"&&(p=`${p}:focus-within,.${k.focus.className}:focus-within>.${p}`),i==="A"&&(p=`${p}:active`);const C=r(f,S),j=((T=C.formatValue)==null?void 0:T.call(C,f,S))??S,L=l[f].cssNames.map(E=>`${E}:${j};`).join("");v.push(`.${p}{${L}}`)}),v),t)}function r(t,i){const v=l[t];return v.isThemeStyle?v:v.values1.values.includes(i)?v.values1:v.values2.values.includes(i)?v.values2:v.values3}function V(){const t="crono-styles";let i=document.getElementById(t);return i||(i=document.createElement("style"),i.setAttribute("id",t),i.setAttribute("type","text/css"),document.head.insertBefore(i,document.head.firstChild)),i}})(y||(y={}));function I(a){const u=B.useTheme(a);return N.useLayoutEffect(y.flush,[a]),N.useMemo(()=>{const c=[y.doxClassName],n=u?{...H(u),...H(a)}:H(a);return Object.entries(n).forEach(([m,g])=>{c.push(y.get(m,g))}),c},[a,u])}function H(a){const u={...a};return Object.keys(u).forEach(n=>{const m=b[n];m&&(m.key in u||(u[m.key]=u[n]),delete u[n])}),u}function _(a,u){const{tag:c,children:n,props:m,className:g,style:h}=a,z=I(a),w=N.useMemo(()=>R.ClassNameUtils.classNames(g,z).join(" "),[a]),d={...m,className:w};h&&(d.style=h),u&&(d.ref=u);const[o,r]=N.useState(!1),V=typeof n=="function";return V&&(d.onMouseEnter=()=>r(!0),d.onMouseLeave=()=>r(!1)),N.createElement(c||"div",d,V?n({isHover:o}):n)}const M=N.forwardRef(_);exports.default=M;
6
+ .${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
7
+ `,n=new L.IdentityFactory,v=Object.keys(t),o=b();let d=!1;const g=v.reduce((u,l)=>(u[l]=new Set,u),{});function x(u,l){if(u in t)return f(u,l);if(u in H)return H[u].className;if(u in T)return f(u,l)}a.get=x;function S(){if(d){console.info("%c💬Flush Dox Styles","color: #00ffff");let u=h([r]);u=h(u,"H"),u=h(u,"F"),u=h(u,"A"),o.innerHTML=u.join(""),d=!1}}a.flush=S;function f(u,l){var m;g[u].has(l)||(d=!0,g[u].add(l));const i=V(u,l),c=((m=i.formatClassName)==null?void 0:m.call(i,u,l))??`${u}${l}`;return`-${n.getIdentity(c)}`}function h(u,l){return Object.entries(g).filter(([c])=>{var m;return((m=t[c])==null?void 0:m.pseudoSuffix)===l}).reduce((c,[m,O])=>(O.forEach($=>{var R;const p=V(m,$),N=`.${f(m,$)}`;let k=[];l?l==="H"?k=[...i(`${N}:hover`,p),...i(`.${H.hover.className}:hover>${N}`,p)]:l==="F"?k=[...i(`${N}:focus-within`,p),...i(`.${H.focus.className}:focus-within>${N}`,p)]:l==="A"&&(k=i(`${N}:active`,p)):k=i(N,p);const A=((R=p.formatValue)==null?void 0:R.call(p,m,$))??$,B=t[m].cssNames.map(F=>`${F}:${A};`).join("");c.push(`${k.join(",")}{${B}}`)}),c),u);function i(c,m){return m.formatSelector?m.formatSelector(c):[c]}}function V(u,l){const i=t[u];return i.isThemeStyle?i:i.values1.values.includes(l)?i.values1:i.values2.values.includes(l)?i.values2:i.values3}function b(){const u="crono-styles";let l=document.getElementById(u);return l||(l=document.createElement("style"),l.setAttribute("id",u),l.setAttribute("type","text/css"),document.head.insertBefore(l,document.head.firstChild)),l}})(w||(w={}));function q(a,r){const n=I.useTheme(a);return y.useLayoutEffect(w.flush,[a]),y.useMemo(()=>{const v=[r?w.svgClassName:w.doxClassName],o=n?{...C(n),...C(a)}:C(a);return Object.entries(o).forEach(([d,g])=>{v.push(w.get(d,g))}),v},[a,n])}function C(a){const r={...a};return Object.keys(r).forEach(v=>{const o=z[v];o&&(o.key in r||(r[o.key]=r[v]),delete r[v])}),r}function D(a,r){const{tag:n,children:v,props:o,className:d,style:g}=a,x=q(a,n==="svg"),S=y.useMemo(()=>L.ClassNameUtils.classNames(d,x).join(" "),[a]),f={...o,className:S};g&&(f.style=g),r&&(f.ref=r);const[h,V]=y.useState(!1),b=typeof v=="function";return b&&(f.onMouseEnter=()=>V(!0),f.onMouseLeave=()=>V(!1)),y.createElement(n||"div",f,b?v({isHover:h}):v)}const W=y.forwardRef(D);exports.default=W;
package/components/dox.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import ClassNameUtils from '../utils/className/classNameUtils';
3
3
  import { DoxStyleProps } from './dox/doxStyles';
4
- type AllProps<TTag extends keyof React.ReactHTML> = React.ComponentProps<TTag>;
5
- type TagPropsType<TTag extends keyof React.ReactHTML> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
6
- interface Props<TTag extends keyof React.ReactHTML> extends DoxStyleProps {
4
+ type AllProps<TTag extends keyof JSX.IntrinsicElements> = React.ComponentProps<TTag>;
5
+ type TagPropsType<TTag extends keyof JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
6
+ interface Props<TTag extends keyof JSX.IntrinsicElements> extends DoxStyleProps {
7
7
  children?: React.ReactNode | ((props: {
8
8
  isHover: boolean;
9
9
  }) => React.ReactNode);
@@ -12,5 +12,5 @@ interface Props<TTag extends keyof React.ReactHTML> extends DoxStyleProps {
12
12
  className?: ClassNameUtils.ClassNameType;
13
13
  style?: React.ComponentProps<TTag>['style'];
14
14
  }
15
- declare const _default: <TTag extends keyof React.ReactHTML = "div">(props: Props<TTag>) => JSX.Element;
15
+ declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: Props<TTag>) => JSX.Element;
16
16
  export default _default;