react-better-html 1.1.216 → 1.1.217

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 (8) hide show
  1. package/README.md +2 -0
  2. package/dist/index.d.mts +307 -422
  3. package/dist/index.d.ts +307 -422
  4. package/dist/index.js +3443 -5945
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +3475 -5924
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +3 -2
package/dist/index.d.mts CHANGED
@@ -1,7 +1,9 @@
1
- import { WebTarget } from 'styled-components';
1
+ import { Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, OmitProps, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, Country } from 'react-better-core';
2
+ export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
2
3
  import * as react from 'react';
3
4
  import { ComponentProps, ReactNode } from 'react';
4
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
+ import { WebTarget } from 'styled-components';
5
7
  import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
6
8
 
7
9
  type PluginName = "alerts" | "react-router-dom" | "localStorage";
@@ -22,21 +24,258 @@ type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
22
24
  ref?: React.Ref<ComponentRef>;
23
25
  };
24
26
 
25
- /** Removes the given props from type */
26
- type OmitProps<T, K extends keyof T> = Omit<T, K>;
27
- /** Removes the given options from type */
28
- type ExcludeOptions<T, K extends T> = Exclude<T, K>;
29
- /** Picks only the selected values */
30
- type PickValue<T, K extends T> = K;
31
- /** Makes all object props optional (On the root) */
32
- type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
33
- /** Makes all object props optional (On the root and nested) */
34
- type DeepPartialRecord<T> = {
35
- [K in keyof T]?: T[K] extends object ? DeepPartialRecord<T[K]> : T[K];
36
- };
37
- /** returns only the required props */
38
- type PickAllRequired<T, K extends keyof T> = Required<Pick<T, K>>;
39
- type AnyOtherString = Omit<string & {}, "">;
27
+ type ComponentStyleConfig<Subcomponents extends string> = {
28
+ [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
29
+ };
30
+ type ComponentTagReplacementConfig<Subcomponents extends string> = {
31
+ [key in Subcomponents]?: React.ElementType;
32
+ };
33
+ type AppConfig = {
34
+ contentMaxWidth: number;
35
+ };
36
+ type BetterHtmlConfig = {
37
+ app: AppConfig;
38
+ sideMenuIsCollapsed: boolean;
39
+ sideMenuIsOpenMobile: boolean;
40
+ components: {
41
+ button?: {
42
+ style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
43
+ tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
44
+ };
45
+ sideMenu?: {
46
+ /** @default 300 */
47
+ width?: number;
48
+ };
49
+ };
50
+ };
51
+
52
+ type AlertType = "info" | "success" | "warning" | "error";
53
+ type AlertDuration = number | "auto";
54
+ type Alert = {
55
+ id: string;
56
+ type: AlertType;
57
+ title?: string;
58
+ message?: string;
59
+ duration?: AlertDuration;
60
+ onClose?: (alert: Alert) => void;
61
+ };
62
+
63
+ type TabGroup = {
64
+ name: string;
65
+ selectedTab: string;
66
+ };
67
+ type TabsProps = {
68
+ tabs: string[];
69
+ name?: string;
70
+ accentColor?: Color;
71
+ style?: "default" | "borderRadiusTop" | "box";
72
+ onChange?: (tab: string) => void;
73
+ children?: React.ReactNode;
74
+ } & ComponentMarginProps;
75
+ type TabsRef = {
76
+ selectedTab: string;
77
+ selectTab: (tab: string) => void;
78
+ };
79
+ type TabsComponent = {
80
+ (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
81
+ content: (props: TabsContentProps) => React.ReactElement;
82
+ };
83
+ declare const TabsComponent: TabsComponent;
84
+ type TabsContentProps = {
85
+ tab: string;
86
+ tabWithDot?: boolean;
87
+ tabsGroupName?: string;
88
+ isInitialTab?: boolean;
89
+ children?: React.ReactNode;
90
+ };
91
+ declare const Tabs: typeof TabsComponent & {
92
+ content: typeof TabsComponent.content;
93
+ };
94
+
95
+ declare const useBetterHtmlContext: () => BetterHtmlConfig & BetterCoreConfig;
96
+ declare const useAlertControls: () => {
97
+ createAlert: (alert: OmitProps<Alert, "id">) => Alert;
98
+ removeAlert: (alertId: string) => void;
99
+ };
100
+ type BetterHtmlProviderConfig = DeepPartialRecord<BetterHtmlConfig>;
101
+ type BetterProviderCommonProps = {
102
+ plugins?: BetterHtmlPlugin[];
103
+ children?: React.ReactNode;
104
+ };
105
+ type BetterHtmlProviderProps = BetterProviderCommonProps & {
106
+ config?: BetterCoreProviderConfig & BetterHtmlProviderConfig;
107
+ };
108
+ declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
109
+ declare const _default$5: react.MemoExoticComponent<typeof BetterHtmlProvider>;
110
+
111
+ declare const isMobileDevice: boolean;
112
+
113
+ type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
114
+
115
+ type InputFieldProps = {
116
+ label?: string;
117
+ labelColor?: string;
118
+ errorText?: string;
119
+ infoText?: string;
120
+ leftIcon?: IconName | AnyOtherString;
121
+ rightIcon?: IconName | AnyOtherString;
122
+ prefix?: React.ReactNode;
123
+ prefixBackgroundColor?: string;
124
+ suffix?: React.ReactNode;
125
+ suffixBackgroundColor?: string;
126
+ insideInputFieldBeforeComponent?: React.ReactNode;
127
+ insideInputFieldAfterComponent?: React.ReactNode;
128
+ /** @default false */
129
+ withDebounce?: boolean;
130
+ /** @default 0.5s */
131
+ debounceDelay?: number;
132
+ onChangeValue?: (value: string) => void;
133
+ onClickRightIcon?: () => void;
134
+ holderRef?: React.ForwardedRef<HTMLDivElement>;
135
+ } & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
136
+ type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
137
+ type InputFieldComponentType = {
138
+ (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
139
+ multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
140
+ email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
141
+ password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
142
+ /** @default "current-password" */
143
+ autoComplete?: React.ComponentProps<"input">["autoComplete"];
144
+ }>) => React.ReactElement;
145
+ search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
146
+ phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
147
+ date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
148
+ minDate?: Date;
149
+ maxDate?: Date;
150
+ }>) => React.ReactElement;
151
+ dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
152
+ minDate?: Date;
153
+ maxDate?: Date;
154
+ /** @default today */
155
+ defaultDateAfterTimePick?: `${number}-${number}-${number}`;
156
+ /** @default "00:00" */
157
+ defaultTimeAfterDatePick?: `${number}:${number}`;
158
+ }>) => React.ReactElement;
159
+ time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
160
+ color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
161
+ };
162
+ declare const InputFieldComponent: InputFieldComponentType;
163
+ declare const InputField: typeof InputFieldComponent & {
164
+ multiline: typeof InputFieldComponent.multiline;
165
+ email: typeof InputFieldComponent.email;
166
+ password: typeof InputFieldComponent.password;
167
+ search: typeof InputFieldComponent.search;
168
+ phoneNumber: typeof InputFieldComponent.phoneNumber;
169
+ date: typeof InputFieldComponent.date;
170
+ dateTime: typeof InputFieldComponent.dateTime;
171
+ time: typeof InputFieldComponent.time;
172
+ color: typeof InputFieldComponent.color;
173
+ };
174
+
175
+ type ToggleInputRef = {};
176
+ type InternalToggleInputProps<Value> = {
177
+ label?: string;
178
+ labelColor?: string;
179
+ text?: string;
180
+ textAdvanced?: React.ReactNode;
181
+ errorText?: string;
182
+ infoText?: string;
183
+ value?: Value;
184
+ onChange?: (checked: boolean, value?: Value) => void;
185
+ } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
186
+ type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
187
+ type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
188
+ declare const _default$4: {
189
+ checkbox: ToggleInputComponentType;
190
+ radiobutton: ToggleInputComponentType;
191
+ switch: ToggleInputComponentType;
192
+ };
193
+
194
+ declare function usePageResize(): {
195
+ width: number;
196
+ height: number;
197
+ };
198
+ declare function usePageScroll(): {
199
+ scrollX: number;
200
+ scrollY: number;
201
+ };
202
+ declare function useMediaQuery(): {
203
+ screenWidth: number;
204
+ size320: boolean;
205
+ size400: boolean;
206
+ size500: boolean;
207
+ size600: boolean;
208
+ size700: boolean;
209
+ size800: boolean;
210
+ size900: boolean;
211
+ size1000: boolean;
212
+ size1100: boolean;
213
+ size1200: boolean;
214
+ size1300: boolean;
215
+ size1400: boolean;
216
+ size1500: boolean;
217
+ size1600: boolean;
218
+ };
219
+ type FormFieldValue = string | number | boolean;
220
+ declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
221
+ defaultValues: FormFields;
222
+ requiredFields?: (keyof FormFields)[];
223
+ onSubmit?: (values: FormFields) => void | Promise<void>;
224
+ validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
225
+ }): {
226
+ values: FormFields;
227
+ errors: Partial<Record<keyof FormFields, string>>;
228
+ isSubmitting: boolean;
229
+ setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
230
+ setFieldsValue: (values: Partial<FormFields>) => void;
231
+ getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
232
+ getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
233
+ getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
234
+ getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
235
+ getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
236
+ getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
237
+ focusField: (field: keyof FormFields) => void;
238
+ inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
239
+ textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
240
+ dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
241
+ toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
242
+ validate: () => {};
243
+ onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
244
+ reset: () => void;
245
+ requiredFields: (keyof FormFields)[] | undefined;
246
+ isDirty: boolean;
247
+ isValid: boolean;
248
+ canSubmit: boolean;
249
+ };
250
+ declare function useUrlQuery(): {
251
+ setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
252
+ getQuery: (name: string) => string | null;
253
+ removeQuery: (name: string, keepHistory?: boolean) => void;
254
+ };
255
+
256
+ declare const getBrowser: () => BrowserName | undefined;
257
+ declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
258
+
259
+ declare const alertControls: {
260
+ createAlert: (alert: OmitProps<Alert, "id">) => Alert;
261
+ removeAlert: (alertId: string) => void;
262
+ };
263
+ declare const sideMenuControls: {
264
+ expand: () => void;
265
+ collapse: () => void;
266
+ toggleExpanded: () => void;
267
+ open: () => void;
268
+ close: () => void;
269
+ toggleOpened: () => void;
270
+ };
271
+ declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
272
+
273
+ declare function generateLocalStorage<LocalStorage extends object>(): {
274
+ setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
275
+ getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
276
+ removeItem: (name: keyof LocalStorage) => void;
277
+ removeAllItems: () => void;
278
+ };
40
279
 
41
280
  type TextAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "label";
42
281
  type TextProps<As extends TextAs = "p"> = {
@@ -111,26 +350,6 @@ declare const Div: typeof DivComponent & {
111
350
  box: typeof DivComponent.box;
112
351
  };
113
352
 
114
- type Color = `#${string}` | "transparent";
115
- type ColorName = "textPrimary" | "textSecondary" | "textLink" | "label" | "primary" | "secondary" | "accent" | "success" | "info" | "warn" | "error" | "base" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border";
116
- type ColorTheme = "light" | "dark";
117
- type Styles = {
118
- space: number;
119
- gap: number;
120
- borderRadius: number;
121
- fontFamily: string;
122
- transition: string;
123
- };
124
- type Colors = Record<ColorName, Color>;
125
- type Theme = {
126
- styles: Styles;
127
- colors: Colors;
128
- };
129
- type ThemeConfig = {
130
- styles: Styles;
131
- colors: Record<ColorTheme, Colors>;
132
- };
133
-
134
353
  type LoaderProps = {
135
354
  /** @default textPrimary */
136
355
  color?: Color;
@@ -162,18 +381,6 @@ declare const Loader: typeof LoaderComponent & {
162
381
  text: typeof LoaderComponent.text;
163
382
  };
164
383
 
165
- type IconName = "XMark" | "uploadCloud" | "trash" | "chevronDown" | "chevronLeft" | "chevronRight" | "doubleChevronLeft" | "doubleChevronRight" | "eye" | "eyeDashed" | "magnifyingGlass" | "check" | "infoI" | "warningTriangle" | "filter";
166
- type IconData = {
167
- width: number;
168
- height: number;
169
- paths: (React.ComponentProps<"path"> & {
170
- type: "fill" | "stroke";
171
- })[];
172
- };
173
- type IconsConfig = Record<IconName, IconData> & {
174
- [key: string]: IconData;
175
- };
176
-
177
384
  type IconProps = {
178
385
  name: IconName | AnyOtherString;
179
386
  /** @default 16 */
@@ -182,12 +389,7 @@ type IconProps = {
182
389
  type IconComponent = {
183
390
  (props: ComponentPropWithRef<SVGSVGElement, IconProps>): React.ReactElement;
184
391
  };
185
- declare const _default$5: IconComponent;
186
-
187
- type AssetName = "logo";
188
- type AssetsConfig = Record<AssetName, string> & {
189
- [key: string]: string;
190
- };
392
+ declare const _default$3: IconComponent;
191
393
 
192
394
  type ImageProps = {
193
395
  name?: AssetName | AnyOtherString;
@@ -202,15 +404,10 @@ type ImageComponent = {
202
404
  }>) => React.ReactElement;
203
405
  };
204
406
  declare const Image: ImageComponent;
205
- declare const _default$4: ImageComponent & {
407
+ declare const _default$2: ImageComponent & {
206
408
  profileImage: typeof Image.profileImage;
207
409
  };
208
410
 
209
- type LoaderName = "";
210
- type LoaderConfig = Record<LoaderName, boolean | undefined> & {
211
- [key: string]: boolean | undefined;
212
- };
213
-
214
411
  type ButtonProps<Value> = {
215
412
  text?: string;
216
413
  value?: Value;
@@ -290,7 +487,7 @@ type DividerComponentType = {
290
487
  vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
291
488
  horizontal: (props: ComponentPropWithRef<HTMLDivElement, HorizontalDividerProps>) => React.ReactElement;
292
489
  };
293
- declare const _default$3: {
490
+ declare const _default$1: {
294
491
  vertical: DividerComponentType["vertical"];
295
492
  horizontal: DividerComponentType["horizontal"];
296
493
  };
@@ -348,125 +545,57 @@ declare const Modal: typeof ModalComponent & {
348
545
  destructive: typeof ModalComponent.destructive;
349
546
  };
350
547
 
351
- type PageHolderProps = {
352
- /** @default false */
353
- noMaxContentWidth?: boolean;
354
- backgroundColor?: React.CSSProperties["backgroundColor"];
355
- backgroundImage?: React.CSSProperties["backgroundImage"];
356
- children?: React.ReactNode;
357
- } & ComponentPaddingProps;
358
- type PageHolderComponentType = {
359
- (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
360
- center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
361
- pageBackgroundColor?: React.CSSProperties["backgroundColor"];
362
- pageBackgroundImage?: React.CSSProperties["backgroundImage"];
363
- contentMaxWidth?: React.CSSProperties["maxWidth"];
364
- /** @default true */
365
- contentInsideBox?: boolean;
366
- behindComponent?: React.ReactNode;
367
- sideComponent?: React.ReactNode;
368
- /** @default "right" */
369
- sideComponentPosition?: "left" | "right";
370
- }>) => React.ReactElement;
371
- };
372
- declare const PageHolderComponent: PageHolderComponentType;
373
- declare const PageHolder: typeof PageHolderComponent & {
374
- center: typeof PageHolderComponent.center;
375
- };
376
-
377
- type ChipProps<Value = unknown> = {
378
- text: string;
379
- /** @default theme.colors.textPrimary */
380
- color?: string;
381
- /** @default backgroundSecondary */
382
- backgroundColor?: string;
383
- /** @default theme.styles.borderRadius / 1.3 */
384
- borderRadius?: number;
385
- /** @default false */
386
- isCircle?: boolean;
387
- value?: Value;
388
- onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
389
- onClickWithValue?: (value: Value) => void;
390
- } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
391
- type ChipComponentType = {
392
- <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
393
- colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
394
- color?: string;
395
- /** @default false */
396
- withWhiteBackground?: boolean;
397
- }>) => React.ReactElement;
398
- };
399
- declare const ChipComponent: ChipComponentType;
400
- declare const Chip: typeof ChipComponent & {
401
- colored: typeof ChipComponent.colored;
402
- };
403
-
404
- type InputFieldProps = {
405
- label?: string;
406
- labelColor?: string;
407
- errorText?: string;
408
- infoText?: string;
409
- leftIcon?: IconName | AnyOtherString;
410
- rightIcon?: IconName | AnyOtherString;
411
- prefix?: React.ReactNode;
412
- prefixBackgroundColor?: string;
413
- suffix?: React.ReactNode;
414
- suffixBackgroundColor?: string;
415
- insideInputFieldBeforeComponent?: React.ReactNode;
416
- insideInputFieldAfterComponent?: React.ReactNode;
417
- /** @default false */
418
- withDebounce?: boolean;
419
- /** @default 0.5s */
420
- debounceDelay?: number;
421
- onChangeValue?: (value: string) => void;
422
- onClickRightIcon?: () => void;
423
- holderRef?: React.ForwardedRef<HTMLDivElement>;
424
- } & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
425
- type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
426
- type InputFieldComponentType = {
427
- (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
428
- multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
429
- email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
430
- password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
431
- /** @default "current-password" */
432
- autoComplete?: React.ComponentProps<"input">["autoComplete"];
433
- }>) => React.ReactElement;
434
- search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
435
- phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
436
- date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
437
- minDate?: Date;
438
- maxDate?: Date;
439
- }>) => React.ReactElement;
440
- dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
441
- minDate?: Date;
442
- maxDate?: Date;
443
- /** @default today */
444
- defaultDateAfterTimePick?: `${number}-${number}-${number}`;
445
- /** @default "00:00" */
446
- defaultTimeAfterDatePick?: `${number}:${number}`;
548
+ type PageHolderProps = {
549
+ /** @default false */
550
+ noMaxContentWidth?: boolean;
551
+ backgroundColor?: React.CSSProperties["backgroundColor"];
552
+ backgroundImage?: React.CSSProperties["backgroundImage"];
553
+ children?: React.ReactNode;
554
+ } & ComponentPaddingProps;
555
+ type PageHolderComponentType = {
556
+ (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
557
+ center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
558
+ pageBackgroundColor?: React.CSSProperties["backgroundColor"];
559
+ pageBackgroundImage?: React.CSSProperties["backgroundImage"];
560
+ contentMaxWidth?: React.CSSProperties["maxWidth"];
561
+ /** @default true */
562
+ contentInsideBox?: boolean;
563
+ behindComponent?: React.ReactNode;
564
+ sideComponent?: React.ReactNode;
565
+ /** @default "right" */
566
+ sideComponentPosition?: "left" | "right";
447
567
  }>) => React.ReactElement;
448
- time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
449
- color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
450
568
  };
451
- declare const InputFieldComponent: InputFieldComponentType;
452
- declare const InputField: typeof InputFieldComponent & {
453
- multiline: typeof InputFieldComponent.multiline;
454
- email: typeof InputFieldComponent.email;
455
- password: typeof InputFieldComponent.password;
456
- search: typeof InputFieldComponent.search;
457
- phoneNumber: typeof InputFieldComponent.phoneNumber;
458
- date: typeof InputFieldComponent.date;
459
- dateTime: typeof InputFieldComponent.dateTime;
460
- time: typeof InputFieldComponent.time;
461
- color: typeof InputFieldComponent.color;
569
+ declare const PageHolderComponent: PageHolderComponentType;
570
+ declare const PageHolder: typeof PageHolderComponent & {
571
+ center: typeof PageHolderComponent.center;
462
572
  };
463
573
 
464
- type Country = {
465
- code: string;
466
- name: string;
467
- timeZone: string;
468
- phoneNumberExtension: string;
469
- phoneNumberFormat?: string;
574
+ type ChipProps<Value = unknown> = {
575
+ text: string;
576
+ /** @default theme.colors.textPrimary */
577
+ color?: string;
578
+ /** @default backgroundSecondary */
579
+ backgroundColor?: string;
580
+ /** @default theme.styles.borderRadius / 1.3 */
581
+ borderRadius?: number;
582
+ /** @default false */
583
+ isCircle?: boolean;
584
+ value?: Value;
585
+ onClick?: (event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => void;
586
+ onClickWithValue?: (value: Value) => void;
587
+ } & Pick<DivProps, "border" | "borderColor" | "borderWidth" | "borderStyle"> & Pick<TextProps, "fontFamily" | "fontSize" | "fontWeight" | "fontStyle">;
588
+ type ChipComponentType = {
589
+ <Value>(props: ComponentPropWithRef<HTMLDivElement, ChipProps<Value>>): React.ReactElement;
590
+ colored: <Value>(props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps<Value>, "color" | "backgroundColor"> & {
591
+ color?: string;
592
+ /** @default false */
593
+ withWhiteBackground?: boolean;
594
+ }>) => React.ReactElement;
595
+ };
596
+ declare const ChipComponent: ChipComponentType;
597
+ declare const Chip: typeof ChipComponent & {
598
+ colored: typeof ChipComponent.colored;
470
599
  };
471
600
 
472
601
  type DropdownOption<Value, Data = unknown> = {
@@ -535,97 +664,6 @@ declare const Dropdown: typeof DropdownComponent & {
535
664
  countries: typeof DropdownComponent.countries;
536
665
  };
537
666
 
538
- type ToggleInputRef = {};
539
- type InternalToggleInputProps<Value> = {
540
- label?: string;
541
- labelColor?: string;
542
- text?: string;
543
- textAdvanced?: React.ReactNode;
544
- errorText?: string;
545
- infoText?: string;
546
- value?: Value;
547
- onChange?: (checked: boolean, value?: Value) => void;
548
- } & OmitProps<React.ComponentProps<"input">, "style" | "value" | "ref" | "onChange"> & ComponentStyle & ComponentHoverStyle;
549
- type ToggleInputProps<Value> = ComponentPropWithRef<ToggleInputRef, OmitProps<InternalToggleInputProps<Value>, "type">>;
550
- type ToggleInputComponentType = <Value>(props: ToggleInputProps<Value>) => React.ReactElement;
551
- declare const _default$2: {
552
- checkbox: ToggleInputComponentType;
553
- radiobutton: ToggleInputComponentType;
554
- switch: ToggleInputComponentType;
555
- };
556
-
557
- declare function usePageResize(): {
558
- width: number;
559
- height: number;
560
- };
561
- declare function usePageScroll(): {
562
- scrollX: number;
563
- scrollY: number;
564
- };
565
- declare function useMediaQuery(): {
566
- screenWidth: number;
567
- size320: boolean;
568
- size400: boolean;
569
- size500: boolean;
570
- size600: boolean;
571
- size700: boolean;
572
- size800: boolean;
573
- size900: boolean;
574
- size1000: boolean;
575
- size1100: boolean;
576
- size1200: boolean;
577
- size1300: boolean;
578
- size1400: boolean;
579
- size1500: boolean;
580
- size1600: boolean;
581
- };
582
- declare function useBooleanState(initialValue?: boolean): [
583
- state: boolean,
584
- actions: {
585
- setState: React.Dispatch<React.SetStateAction<boolean>>;
586
- setTrue: () => void;
587
- setFalse: () => void;
588
- toggle: () => void;
589
- }
590
- ];
591
- declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
592
- type FormFieldValue = string | number | boolean;
593
- declare function useForm<FormFields extends Record<string | number, FormFieldValue | FormFieldValue[] | undefined>>(options: {
594
- defaultValues: FormFields;
595
- requiredFields?: (keyof FormFields)[];
596
- onSubmit?: (values: FormFields) => void | Promise<void>;
597
- validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
598
- }): {
599
- values: FormFields;
600
- errors: Partial<Record<keyof FormFields, string>>;
601
- isSubmitting: boolean;
602
- setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
603
- setFieldsValue: (values: Partial<FormFields>) => void;
604
- getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
605
- getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
606
- getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => any;
607
- getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
608
- getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
609
- getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
610
- focusField: (field: keyof FormFields) => void;
611
- inputFieldRefs: Record<keyof FormFields, HTMLInputElement | undefined>;
612
- textAreaRefs: Record<keyof FormFields, HTMLTextAreaElement | undefined>;
613
- dropdownRefs: Record<keyof FormFields, HTMLDivElement | undefined>;
614
- toggleInputRefs: Record<keyof FormFields, ToggleInputRef | undefined>;
615
- validate: () => {};
616
- onSubmit: (event?: React.FormEvent<HTMLFormElement>) => Promise<void>;
617
- reset: () => void;
618
- requiredFields: (keyof FormFields)[] | undefined;
619
- isDirty: boolean;
620
- isValid: boolean;
621
- canSubmit: boolean;
622
- };
623
- declare function useUrlQuery(): {
624
- setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
625
- getQuery: (name: string) => string | null;
626
- removeQuery: (name: string, keepHistory?: boolean) => void;
627
- };
628
-
629
667
  type FormProps = {
630
668
  form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
631
669
  name?: string;
@@ -669,7 +707,7 @@ type LabelProps = {
669
707
  htmlFor?: string;
670
708
  };
671
709
  declare function Label({ text, required, isError, color, htmlFor }: LabelProps): react_jsx_runtime.JSX.Element;
672
- declare const _default$1: react.MemoExoticComponent<typeof Label>;
710
+ declare const _default: react.MemoExoticComponent<typeof Label>;
673
711
 
674
712
  type FormRowProps = {
675
713
  oneItemOnly?: boolean;
@@ -903,38 +941,6 @@ declare const Tooltip: typeof TooltipComponent & {
903
941
  sectionTitle: typeof TooltipComponent.sectionTitle;
904
942
  };
905
943
 
906
- type TabGroup = {
907
- name: string;
908
- selectedTab: string;
909
- };
910
- type TabsProps = {
911
- tabs: string[];
912
- name?: string;
913
- accentColor?: Color;
914
- style?: "default" | "borderRadiusTop" | "box";
915
- onChange?: (tab: string) => void;
916
- children?: React.ReactNode;
917
- } & ComponentMarginProps;
918
- type TabsRef = {
919
- selectedTab: string;
920
- selectTab: (tab: string) => void;
921
- };
922
- type TabsComponent = {
923
- (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
924
- content: (props: TabsContentProps) => React.ReactElement;
925
- };
926
- declare const TabsComponent: TabsComponent;
927
- type TabsContentProps = {
928
- tab: string;
929
- tabWithDot?: boolean;
930
- tabsGroupName?: string;
931
- isInitialTab?: boolean;
932
- children?: React.ReactNode;
933
- };
934
- declare const Tabs: typeof TabsComponent & {
935
- content: typeof TabsComponent.content;
936
- };
937
-
938
944
  type FoldableProps = {
939
945
  isOpen?: boolean;
940
946
  defaultOpen?: boolean;
@@ -1031,127 +1037,6 @@ type PaginationComponentType = {
1031
1037
  declare const PaginationComponent: PaginationComponentType;
1032
1038
  declare const Pagination: typeof PaginationComponent & {};
1033
1039
 
1034
- type AppConfig = {
1035
- contentMaxWidth: number;
1036
- };
1037
- type ComponentStyleConfig<Subcomponents extends string> = {
1038
- [key in Subcomponents]?: ComponentStyle & ComponentHoverStyle;
1039
- };
1040
- type ComponentTagReplacementConfig<Subcomponents extends string> = {
1041
- [key in Subcomponents]?: React.ElementType;
1042
- };
1043
- type BetterHtmlConfig = {
1044
- app: AppConfig;
1045
- theme: ThemeConfig;
1046
- colorTheme: ColorTheme;
1047
- icons: Partial<IconsConfig>;
1048
- assets: Partial<AssetsConfig>;
1049
- loaders: Partial<LoaderConfig>;
1050
- sideMenuIsCollapsed: boolean;
1051
- sideMenuIsOpenMobile: boolean;
1052
- components: {
1053
- button?: {
1054
- style?: ComponentStyleConfig<"default" | "secondary" | "destructive" | "icon" | "upload">;
1055
- tagReplacement?: ComponentTagReplacementConfig<"buttonComponent" | "linkComponent">;
1056
- };
1057
- sideMenu?: {
1058
- /** @default 300 */
1059
- width?: number;
1060
- };
1061
- };
1062
- };
1063
-
1064
- type AlertType = "info" | "success" | "warning" | "error";
1065
- type AlertDuration = number | "auto";
1066
- type Alert = {
1067
- id: string;
1068
- type: AlertType;
1069
- title?: string;
1070
- message?: string;
1071
- duration?: AlertDuration;
1072
- onClose?: (alert: Alert) => void;
1073
- };
1074
-
1075
- declare const useBetterHtmlContext: () => BetterHtmlConfig;
1076
- declare const useTheme: () => {
1077
- colors: Colors;
1078
- styles: Styles;
1079
- };
1080
- declare const useLoader: (loaderName?: LoaderName | AnyOtherString) => boolean;
1081
- declare const useLoaderControls: () => {
1082
- startLoading: (loaderName: LoaderName | AnyOtherString) => void;
1083
- stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
1084
- };
1085
- declare const useAlertControls: () => {
1086
- createAlert: (alert: OmitProps<Alert, "id">) => Alert;
1087
- removeAlert: (alertId: string) => void;
1088
- };
1089
- type BetterHtmlProviderConfig = DeepPartialRecord<BetterHtmlConfig>;
1090
- type BetterHtmlProviderProps = {
1091
- config?: BetterHtmlProviderConfig;
1092
- plugins?: BetterHtmlPlugin[];
1093
- children?: React.ReactNode;
1094
- };
1095
- declare function BetterHtmlProvider({ config, plugins, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
1096
- declare const _default: typeof BetterHtmlProvider;
1097
-
1098
- type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
1099
-
1100
- declare const generateRandomString: (stringLength: number, options?: {
1101
- /** @default true */
1102
- includeCapitalLetters?: boolean;
1103
- /** @default true */
1104
- includeLowerLetters?: boolean;
1105
- /** @default true */
1106
- includeNumbers?: boolean;
1107
- /** @default 1 */
1108
- dashSections?: number;
1109
- }) => string;
1110
- declare const getBrowser: () => BrowserName | undefined;
1111
- declare const formatPhoneNumber: (phoneNumber: string) => string;
1112
- declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;
1113
- declare const eventPreventDefault: (event: React.MouseEvent) => void;
1114
- declare const eventStopPropagation: (event: React.MouseEvent) => void;
1115
- declare const eventPreventStop: (event: React.MouseEvent) => void;
1116
- declare const getPluralWord: (word: string, count: number) => string;
1117
-
1118
- declare const lightenColor: (hexColor: string, amount: number) => string;
1119
- declare const darkenColor: (hexColor: string, amount: number) => string;
1120
- declare const saturateColor: (hexColor: string, amount: number) => string;
1121
- declare const desaturateColor: (hexColor: string, amount: number) => string;
1122
-
1123
- declare const loaderControls: {
1124
- startLoading: (loaderName: LoaderName | AnyOtherString) => void;
1125
- stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
1126
- };
1127
- declare const alertControls: {
1128
- createAlert: (alert: OmitProps<Alert, "id">) => Alert;
1129
- removeAlert: (alertId: string) => void;
1130
- };
1131
- declare const sideMenuControls: {
1132
- expand: () => void;
1133
- collapse: () => void;
1134
- toggleExpanded: () => void;
1135
- open: () => void;
1136
- close: () => void;
1137
- toggleOpened: () => void;
1138
- };
1139
- declare const colorThemeControls: {
1140
- toggleTheme: (theme?: ColorTheme) => void;
1141
- };
1142
- declare const filterHover: () => Record<"z05" | "z1" | "z2" | "z3", React.CSSProperties["filter"]>;
1143
-
1144
- declare function generateLocalStorage<LocalStorage extends object>(): {
1145
- setItem: <StorageName extends keyof LocalStorage>(name: StorageName, value: LocalStorage[StorageName]) => void;
1146
- getItem: <StorageName extends keyof LocalStorage>(name: StorageName) => LocalStorage[StorageName] | undefined;
1147
- removeItem: (name: keyof LocalStorage) => void;
1148
- removeAllItems: () => void;
1149
- };
1150
-
1151
- declare const countries: Country[];
1152
-
1153
- declare const isMobileDevice: boolean;
1154
-
1155
1040
  type AlertsPluginOptions = {
1156
1041
  /** @default "bottom" */
1157
1042
  position?: "top" | "bottom";
@@ -1193,4 +1078,4 @@ type LocalStoragePluginOptions = {
1193
1078
  declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
1194
1079
  declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
1195
1080
 
1196
- export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type Styles, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, getPluralWord, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, sideMenuControls, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
1081
+ export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default$5 as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, ColorThemeSwitch, type ColorThemeSwitchProps, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, Div, type DivProps, _default$1 as Divider, Dropdown, type DropdownOption, type DropdownProps, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$3 as Icon, type IconProps, _default$2 as Image, type ImageProps, InputField, type InputFieldProps, _default as Label, type LabelProps, Loader, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, Pagination, type PluginName, type ReactRouterDomPluginOptions, SideMenu, type SideMenuItem, type TabGroup, Table, type TableColumn, type TableFilterData, type TableListFilterListItem, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, _default$4 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, filterHover, generateLocalStorage, getBrowser, getFormErrorObject, isMobileDevice, localStoragePlugin, reactRouterDomPlugin, sideMenuControls, useAlertControls, useBetterHtmlContext, useForm, useMediaQuery, usePageResize, usePageScroll, useUrlQuery };