@cronocode/react-box 0.0.8 → 0.1.1

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 (9) hide show
  1. package/box.d.ts +51 -2
  2. package/box.js +2909 -1230
  3. package/components/button/index.d.ts +5 -1
  4. package/components/button/index.js +32 -4
  5. package/components/flex/index.d.ts +15 -1
  6. package/components/flex/index.js +37 -4
  7. package/package.json +4 -4
  8. package/styles.css +1 -1
  9. package/utils/className/classNameUtils.d.ts +5 -0
package/box.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { SizeType, ColorType, CursorType, FontSizeType } from './css.variables';
3
+ import ClassNameUtils from './utils/className/classNameUtils';
3
4
  interface BoxDisplay {
4
5
  display?: 'none' | 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'grid';
5
6
  }
@@ -18,50 +19,91 @@ interface BoxSize {
18
19
  minHeight?: BoxSizeValue;
19
20
  maxWidth?: BoxSizeValue;
20
21
  maxHeight?: BoxSizeValue;
22
+ inlineWidth?: string;
23
+ inlineHeight?: string;
24
+ inlineMinWidth?: string;
25
+ inlineMinHeight?: string;
26
+ inlineMaxWidth?: string;
27
+ inlineMaxHeight?: string;
21
28
  }
22
29
  interface BoxMargin {
30
+ margin?: SizeType;
23
31
  m?: SizeType;
32
+ marginHorizontal?: SizeType;
24
33
  mx?: SizeType;
34
+ marginVertical?: SizeType;
25
35
  my?: SizeType;
36
+ marginTop?: SizeType;
26
37
  mt?: SizeType;
38
+ marginRight?: SizeType;
27
39
  mr?: SizeType;
40
+ marginBottom?: SizeType;
28
41
  mb?: SizeType;
42
+ marginLeft?: SizeType;
29
43
  ml?: SizeType;
30
44
  }
31
45
  interface BoxBorder {
46
+ border?: SizeType;
32
47
  b?: SizeType;
48
+ borderHorizontal?: SizeType;
33
49
  bx?: SizeType;
50
+ borderVertical?: SizeType;
34
51
  by?: SizeType;
52
+ borderTop?: SizeType;
35
53
  bt?: SizeType;
54
+ borderRight?: SizeType;
36
55
  br?: SizeType;
56
+ borderBottom?: SizeType;
37
57
  bb?: SizeType;
58
+ borderLeft?: SizeType;
38
59
  bl?: SizeType;
60
+ borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
39
61
  bStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
62
+ borderRadius?: SizeType;
40
63
  bRadius?: SizeType;
64
+ borderRadiusTop?: SizeType;
41
65
  bRadiusTop?: SizeType;
66
+ borderRadiusRight?: SizeType;
42
67
  bRadiusRight?: SizeType;
68
+ borderRadiusBottom?: SizeType;
43
69
  bRadiusBottom?: SizeType;
70
+ borderRadiusLeft?: SizeType;
44
71
  bRadiusLeft?: SizeType;
72
+ borderRadiusTopLeft?: SizeType;
45
73
  bRadiusTopLeft?: SizeType;
74
+ borderRadiusTopRight?: SizeType;
46
75
  bRadiusTopRight?: SizeType;
76
+ borderRadiusBottomLeft?: SizeType;
47
77
  bRadiusBottomLeft?: SizeType;
78
+ borderRadiusBottomRight?: SizeType;
48
79
  bRadiusBottomRight?: SizeType;
49
80
  }
50
81
  interface BoxPadding {
82
+ padding?: SizeType;
51
83
  p?: SizeType;
84
+ paddingHorizontal?: SizeType;
52
85
  px?: SizeType;
86
+ paddingVertical?: SizeType;
53
87
  py?: SizeType;
88
+ paddingTop?: SizeType;
54
89
  pt?: SizeType;
90
+ paddingRight?: SizeType;
55
91
  pr?: SizeType;
92
+ paddingBottom?: SizeType;
56
93
  pb?: SizeType;
94
+ paddingLeft?: SizeType;
57
95
  pl?: SizeType;
58
96
  }
59
97
  interface BoxColors {
60
98
  color?: ColorType;
61
99
  colorHover?: ColorType;
100
+ backgroundColor?: ColorType;
62
101
  bgColor?: ColorType;
102
+ backgroundColorHover?: ColorType;
63
103
  bgColorHover?: ColorType;
104
+ borderColor?: ColorType;
64
105
  bColor?: ColorType;
106
+ borderColorHover?: ColorType;
65
107
  bColorHover?: ColorType;
66
108
  }
67
109
  interface BoxLineHeightSize {
@@ -111,10 +153,18 @@ interface Props<TTag extends keyof React.ReactHTML> extends BoxDisplay, BoxPosit
111
153
  }) => React.ReactNode);
112
154
  tag?: TTag;
113
155
  props?: React.ComponentProps<TTag>;
114
- className?: string;
156
+ className?: ClassNameUtils.ClassNameType;
115
157
  }
116
158
  export default function Box<TTag extends keyof React.ReactHTML = 'div'>(boxProps: Props<TTag>): React.DetailedReactHTMLElement<{
117
159
  className: string;
160
+ style: {
161
+ width: string | undefined;
162
+ height: string | undefined;
163
+ minWidth: string | undefined;
164
+ minHeight: string | undefined;
165
+ maxWidth: string | undefined;
166
+ maxHeight: string | undefined;
167
+ };
118
168
  ref?: string | ((instance: HTMLObjectElement | null) => void) | React.RefObject<HTMLObjectElement> | ((instance: HTMLProgressElement | null) => void) | React.RefObject<HTMLProgressElement> | ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | ((instance: HTMLAreaElement | null) => void) | React.RefObject<HTMLAreaElement> | ((instance: HTMLAudioElement | null) => void) | React.RefObject<HTMLAudioElement> | ((instance: HTMLBaseElement | null) => void) | React.RefObject<HTMLBaseElement> | ((instance: HTMLQuoteElement | null) => void) | React.RefObject<HTMLQuoteElement> | ((instance: HTMLBodyElement | null) => void) | React.RefObject<HTMLBodyElement> | ((instance: HTMLBRElement | null) => void) | React.RefObject<HTMLBRElement> | ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | ((instance: HTMLCanvasElement | null) => void) | React.RefObject<HTMLCanvasElement> | ((instance: HTMLTableColElement | null) => void) | React.RefObject<HTMLTableColElement> | ((instance: HTMLDataElement | null) => void) | React.RefObject<HTMLDataElement> | ((instance: HTMLDataListElement | null) => void) | React.RefObject<HTMLDataListElement> | ((instance: HTMLModElement | null) => void) | React.RefObject<HTMLModElement> | ((instance: HTMLDetailsElement | null) => void) | React.RefObject<HTMLDetailsElement> | ((instance: HTMLDialogElement | null) => void) | React.RefObject<HTMLDialogElement> | ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | ((instance: HTMLDListElement | null) => void) | React.RefObject<HTMLDListElement> | ((instance: HTMLEmbedElement | null) => void) | React.RefObject<HTMLEmbedElement> | ((instance: HTMLFieldSetElement | null) => void) | React.RefObject<HTMLFieldSetElement> | ((instance: HTMLFormElement | null) => void) | React.RefObject<HTMLFormElement> | ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | ((instance: HTMLHeadElement | null) => void) | React.RefObject<HTMLHeadElement> | ((instance: HTMLHRElement | null) => void) | React.RefObject<HTMLHRElement> | ((instance: HTMLHtmlElement | null) => void) | React.RefObject<HTMLHtmlElement> | ((instance: HTMLIFrameElement | null) => void) | React.RefObject<HTMLIFrameElement> | ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | ((instance: HTMLLabelElement | null) => void) | React.RefObject<HTMLLabelElement> | ((instance: HTMLLegendElement | null) => void) | React.RefObject<HTMLLegendElement> | ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | ((instance: HTMLLinkElement | null) => void) | React.RefObject<HTMLLinkElement> | ((instance: HTMLMapElement | null) => void) | React.RefObject<HTMLMapElement> | ((instance: HTMLMetaElement | null) => void) | React.RefObject<HTMLMetaElement> | ((instance: HTMLMeterElement | null) => void) | React.RefObject<HTMLMeterElement> | ((instance: HTMLOListElement | null) => void) | React.RefObject<HTMLOListElement> | ((instance: HTMLOptGroupElement | null) => void) | React.RefObject<HTMLOptGroupElement> | ((instance: HTMLOptionElement | null) => void) | React.RefObject<HTMLOptionElement> | ((instance: HTMLOutputElement | null) => void) | React.RefObject<HTMLOutputElement> | ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | ((instance: HTMLParamElement | null) => void) | React.RefObject<HTMLParamElement> | ((instance: HTMLPreElement | null) => void) | React.RefObject<HTMLPreElement> | ((instance: HTMLSlotElement | null) => void) | React.RefObject<HTMLSlotElement> | ((instance: HTMLScriptElement | null) => void) | React.RefObject<HTMLScriptElement> | ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | ((instance: HTMLSourceElement | null) => void) | React.RefObject<HTMLSourceElement> | ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | ((instance: HTMLStyleElement | null) => void) | React.RefObject<HTMLStyleElement> | ((instance: HTMLTableElement | null) => void) | React.RefObject<HTMLTableElement> | ((instance: HTMLTemplateElement | null) => void) | React.RefObject<HTMLTemplateElement> | ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | ((instance: HTMLTableDataCellElement | null) => void) | React.RefObject<HTMLTableDataCellElement> | ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | ((instance: HTMLTableHeaderCellElement | null) => void) | React.RefObject<HTMLTableHeaderCellElement> | ((instance: HTMLTimeElement | null) => void) | React.RefObject<HTMLTimeElement> | ((instance: HTMLTitleElement | null) => void) | React.RefObject<HTMLTitleElement> | ((instance: HTMLTableRowElement | null) => void) | React.RefObject<HTMLTableRowElement> | ((instance: HTMLTrackElement | null) => void) | React.RefObject<HTMLTrackElement> | ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | ((instance: HTMLVideoElement | null) => void) | React.RefObject<HTMLVideoElement> | ((instance: HTMLWebViewElement | null) => void) | React.RefObject<HTMLWebViewElement> | null | undefined;
119
169
  key?: React.Key | null | undefined;
120
170
  defaultChecked?: boolean | undefined;
@@ -132,7 +182,6 @@ export default function Box<TTag extends keyof React.ReactHTML = 'div'>(boxProps
132
182
  placeholder?: string | undefined;
133
183
  slot?: string | undefined;
134
184
  spellCheck?: (boolean | "true" | "false") | undefined;
135
- style?: React.CSSProperties | undefined;
136
185
  tabIndex?: number | undefined;
137
186
  title?: string | undefined;
138
187
  translate?: "yes" | "no" | undefined;