@js-empire/emperor-ui 1.2.2 → 1.2.4

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 (157) hide show
  1. package/.cursor/rules/code-conventions.mdc +50 -0
  2. package/README.md +0 -15
  3. package/dist/emperor-ui.js +119 -71
  4. package/dist/emperor-ui.umd.cjs +27 -13
  5. package/dist/globals.css +1 -1
  6. package/dist/index-BXtdEByK.js +5 -0
  7. package/dist/index-CDB93OLO.js +55965 -0
  8. package/dist/index-CYORMghp.js +290 -0
  9. package/dist/index.d.ts +338 -36
  10. package/dist/src-UW24ZMRV-C1Pn8-w8.js +5 -0
  11. package/package.json +32 -2
  12. package/src/animations/blink.ts +26 -0
  13. package/src/animations/floating.ts +12 -0
  14. package/src/animations/index.ts +2 -0
  15. package/src/components/atoms/brand/brand.tsx +1 -1
  16. package/src/components/atoms/color-picker/color-picker.tsx +13 -0
  17. package/src/components/atoms/color-picker/free-color-picker.tsx +60 -0
  18. package/src/components/atoms/color-picker/index.ts +3 -0
  19. package/src/components/atoms/color-picker/preset-color-picker.tsx +64 -0
  20. package/src/components/atoms/color-picker/stories/color-picker.stories.tsx +49 -0
  21. package/src/components/atoms/color-picker/styles/color-picker.css +23 -0
  22. package/src/components/atoms/copy-button/copy-button.tsx +73 -0
  23. package/src/components/atoms/copy-button/index.ts +1 -0
  24. package/src/components/atoms/copy-button/stories/copy-button.stories.tsx +21 -0
  25. package/src/components/atoms/field/field.stories.tsx +27 -0
  26. package/src/components/atoms/field/field.tsx +11 -0
  27. package/src/components/atoms/field/index.ts +1 -0
  28. package/src/components/atoms/field/styles/classes.ts +9 -0
  29. package/src/components/atoms/field/styles/index.ts +1 -0
  30. package/src/components/atoms/filter/filter.tsx +92 -0
  31. package/src/components/atoms/filter/index.ts +3 -0
  32. package/src/components/atoms/filter/stories/filter.stories.tsx +97 -0
  33. package/src/components/atoms/filter/styles/classes.ts +20 -0
  34. package/src/components/atoms/filter/styles/index.ts +1 -0
  35. package/src/components/atoms/filter/units/autocomplete-filter.tsx +39 -0
  36. package/src/components/atoms/filter/units/checkbox-filter.tsx +32 -0
  37. package/src/components/atoms/filter/units/checkbox-group-filter.tsx +37 -0
  38. package/src/components/atoms/filter/units/date-filter.tsx +50 -0
  39. package/src/components/atoms/filter/units/index.ts +9 -0
  40. package/src/components/atoms/filter/units/numeric-filter.tsx +36 -0
  41. package/src/components/atoms/filter/units/range-filter.tsx +36 -0
  42. package/src/components/atoms/filter/units/search-filter.tsx +52 -0
  43. package/src/components/atoms/filter/units/select-filter.tsx +49 -0
  44. package/src/components/atoms/filter/units/switch-filter.tsx +33 -0
  45. package/src/components/atoms/index.ts +5 -0
  46. package/src/components/atoms/theme-switch/index.ts +1 -0
  47. package/src/components/atoms/theme-switch/styles/classes.ts +16 -0
  48. package/src/components/atoms/theme-switch/styles/index.ts +1 -0
  49. package/src/components/atoms/theme-switch/theme-switch.stories.tsx +26 -0
  50. package/src/components/atoms/theme-switch/theme-switch.tsx +54 -0
  51. package/src/components/atoms/uploader/avatar-label.tsx +8 -1
  52. package/src/components/atoms/uploader/stories/uploader.stories.tsx +3 -3
  53. package/src/components/atoms/uploader/upload-file-error-box.tsx +1 -1
  54. package/src/components/atoms/uploader/upload-file-input.tsx +1 -1
  55. package/src/components/atoms/uploader/upload-file-label.tsx +8 -1
  56. package/src/components/atoms/uploader/upload-file-listing.tsx +46 -37
  57. package/src/components/atoms/uploader/view-image-modal.tsx +2 -1
  58. package/src/components/molecules/index.ts +0 -1
  59. package/src/components/molecules/item-card/index.ts +6 -0
  60. package/src/components/molecules/item-card/item-actions-dropdown.tsx +57 -0
  61. package/src/components/molecules/item-card/item-banner.tsx +22 -0
  62. package/src/components/molecules/item-card/item-card-body.tsx +68 -0
  63. package/src/components/molecules/item-card/item-card-footer.tsx +55 -0
  64. package/src/components/molecules/item-card/item-card-header.tsx +61 -0
  65. package/src/components/molecules/item-card/item-card.tsx +83 -3
  66. package/src/components/molecules/item-card/loading-item.tsx +88 -0
  67. package/src/components/molecules/item-card/stories/item-card.stories.tsx +182 -0
  68. package/src/components/molecules/item-card/styles/classes.ts +138 -0
  69. package/src/components/molecules/item-card/styles/index.ts +1 -0
  70. package/src/components/molecules/nav-bar/sub-items-box.tsx +2 -1
  71. package/src/components/molecules/scaffold/index.ts +1 -0
  72. package/src/components/molecules/scaffold/scaffold.tsx +4 -17
  73. package/src/components/molecules/scaffold/styles/index.ts +1 -0
  74. package/src/components/molecules/scaffold/styles/scaffold-classes.ts +10 -0
  75. package/src/components/molecules/side-bar/compact-side-bar.tsx +3 -1
  76. package/src/components/molecules/side-bar/side-bar-drawer.tsx +6 -17
  77. package/src/components/molecules/side-bar/side-bar.stories.tsx +1 -1
  78. package/src/components/organisms/filters/filters.stories.tsx +32 -0
  79. package/src/components/organisms/filters/filters.tsx +36 -0
  80. package/src/components/organisms/filters/index.ts +1 -0
  81. package/src/components/organisms/filters/styles/classes.ts +9 -0
  82. package/src/components/organisms/filters/styles/index.ts +1 -0
  83. package/src/components/organisms/footer/copy-rights-box.tsx +1 -1
  84. package/src/components/organisms/footer/footer.tsx +1 -1
  85. package/src/components/organisms/footer/policies-box.tsx +2 -1
  86. package/src/components/organisms/footer/quick-links-box.tsx +2 -1
  87. package/src/components/organisms/footer/social-links-box.tsx +2 -1
  88. package/src/components/organisms/footer/stories/footer.stories.tsx +1 -1
  89. package/src/components/organisms/header/header.tsx +1 -8
  90. package/src/components/organisms/index.ts +1 -0
  91. package/src/components/organisms/listings/empty-listings.tsx +80 -0
  92. package/src/components/organisms/listings/index.ts +2 -0
  93. package/src/components/organisms/listings/listings.tsx +90 -9
  94. package/src/components/organisms/listings/stories/grid-listings.stories.tsx +153 -0
  95. package/src/components/organisms/listings/stories/list-listings.stories.tsx +171 -0
  96. package/src/components/organisms/listings/styles/classes.ts +41 -3
  97. package/src/constants/animations.ts +14 -0
  98. package/src/constants/card.tsx +26 -0
  99. package/src/constants/defaults.ts +1 -16
  100. package/src/constants/index.ts +2 -0
  101. package/src/hooks/index.ts +3 -0
  102. package/src/hooks/use-filters.ts +20 -0
  103. package/src/hooks/use-search-params-handler.tsx +186 -0
  104. package/src/hooks/use-uploader.tsx +1 -1
  105. package/src/hooks/use-window-size.tsx +53 -0
  106. package/src/i18n/locales/atoms/ar.ts +3 -0
  107. package/src/i18n/locales/atoms/en.ts +3 -0
  108. package/src/i18n/locales/organisms/ar.ts +7 -1
  109. package/src/i18n/locales/organisms/en.ts +7 -1
  110. package/src/mocks/constants.ts +103 -0
  111. package/src/mocks/index.ts +2 -0
  112. package/src/mocks/listings.tsx +154 -0
  113. package/src/mocks/types.ts +64 -0
  114. package/src/providers/config-provider.tsx +0 -8
  115. package/src/providers/emperor-ui-provider.tsx +16 -5
  116. package/src/providers/index.ts +1 -0
  117. package/src/providers/theme-provider.tsx +16 -0
  118. package/src/providers/uploader-provider.tsx +1 -1
  119. package/src/styles/hero.ts +1 -1
  120. package/src/styles/index.css +23 -0
  121. package/src/types/components/atoms/color-picker/color-picker.ts +12 -0
  122. package/src/types/components/atoms/color-picker/index.ts +1 -0
  123. package/src/types/components/atoms/field/field.ts +9 -0
  124. package/src/types/components/atoms/field/index.ts +1 -0
  125. package/src/types/components/atoms/filter/filter.ts +43 -0
  126. package/src/types/components/atoms/filter/index.ts +2 -0
  127. package/src/types/components/atoms/filter/select-filter.ts +8 -0
  128. package/src/types/components/atoms/index.ts +3 -0
  129. package/src/types/components/atoms/uploader.ts +2 -1
  130. package/src/types/components/index.ts +1 -0
  131. package/src/types/components/molecules/index.ts +1 -1
  132. package/src/types/components/molecules/item-card/item-card.ts +50 -0
  133. package/src/types/components/molecules/listings/listings.ts +21 -5
  134. package/src/types/components/molecules/side-bar/side-bar.ts +1 -1
  135. package/src/types/components/molecules/theme-switch/index.ts +1 -0
  136. package/src/types/components/molecules/theme-switch/theme-switch.ts +9 -0
  137. package/src/types/components/organisms/filters/filters.ts +11 -0
  138. package/src/types/components/organisms/filters/index.ts +1 -0
  139. package/src/types/components/organisms/index.ts +1 -0
  140. package/src/types/context/config.ts +3 -4
  141. package/src/types/context/index.ts +0 -1
  142. package/src/types/context/localization.ts +1 -0
  143. package/src/types/shared/components.ts +3 -0
  144. package/src/utils/uploader.ts +1 -1
  145. package/dist/features-animation-uyo1KMg-.js +0 -1938
  146. package/dist/index-B3d8-vnJ.js +0 -1630
  147. package/dist/index-DOwkJus4.js +0 -26528
  148. package/dist/index-DrkA25TM.js +0 -5
  149. package/dist/src-UW24ZMRV-D6kiVea5.js +0 -5
  150. package/src/components/molecules/filter/filter.tsx +0 -6
  151. package/src/components/molecules/filter/index.ts +0 -1
  152. package/src/components/organisms/listings/stories/listings.stories.tsx +0 -30
  153. package/src/main.tsx +0 -3
  154. package/src/mocks/listings.ts +0 -200
  155. package/src/types/components/molecules/filter/filter.ts +0 -9
  156. package/src/types/components/molecules/filter/index.ts +0 -1
  157. package/src/types/context/theme.ts +0 -17
package/dist/index.d.ts CHANGED
@@ -1,23 +1,36 @@
1
- import { ButtonProps } from '@heroui/react';
2
- import { ButtonProps as ButtonProps_2 } from '@heroui/button';
1
+ import { AutocompleteProps } from '@heroui/autocomplete';
2
+ import { ButtonProps } from '@heroui/button';
3
+ import { CheckboxGroupProps } from '@heroui/checkbox';
4
+ import { CheckboxProps } from '@heroui/checkbox';
5
+ import { ChipProps } from '@heroui/chip';
3
6
  import { ClassAttributes } from 'react';
4
7
  import { ClassProp } from 'class-variance-authority/types';
5
8
  import { ClassValue } from 'clsx';
6
9
  import { ComponentProps } from 'react';
7
10
  import { Context } from 'react';
11
+ import { CSSProperties } from 'react';
12
+ import { DatePickerProps } from '@heroui/date-picker';
8
13
  import { Dispatch } from 'react';
14
+ import { DropdownItemProps } from '@heroui/dropdown';
9
15
  import { ElementType } from 'react';
10
16
  import { ForwardRefExoticComponent } from 'react';
11
- import { HeroUIProviderProps } from '@heroui/react';
12
17
  import { HTMLAttributes } from 'react';
18
+ import { InputProps } from '@heroui/input';
13
19
  import { JSX } from 'react/jsx-runtime';
14
20
  import { LiHTMLAttributes } from 'react';
15
- import { ModalProps } from '@heroui/react';
21
+ import { ModalProps } from '@heroui/modal';
22
+ import { MotionProps } from 'framer-motion';
23
+ import { RadioProps } from '@heroui/radio';
16
24
  import { ReactNode } from 'react';
17
25
  import { ReactPortal } from 'react';
18
26
  import { RefAttributes } from 'react';
27
+ import { SelectProps } from '@heroui/select';
19
28
  import { SetStateAction } from 'react';
29
+ import { SliderProps } from '@heroui/slider';
30
+ import { SwitchProps } from '@heroui/switch';
31
+ import { ToastProps } from '@heroui/toast';
20
32
  import { VariantProps } from 'class-variance-authority';
33
+ import { Variants } from 'framer-motion';
21
34
 
22
35
  export declare type Address = {
23
36
  country?: string;
@@ -39,6 +52,9 @@ declare const ar: {
39
52
  common: {};
40
53
  toasts: {};
41
54
  atoms: {
55
+ colorPicker: {
56
+ invalidColorFormat: string;
57
+ };
42
58
  uploader: {
43
59
  dropHere: string;
44
60
  selectFile: string;
@@ -52,11 +68,18 @@ declare const ar: {
52
68
  };
53
69
  };
54
70
  molecules: {};
55
- organisms: {};
71
+ organisms: {
72
+ listings: {
73
+ emptyTitle: string;
74
+ emptyDescription: string;
75
+ };
76
+ };
56
77
  templates: {};
57
78
  };
58
79
 
59
- export declare function AvatarLabel(): JSX.Element;
80
+ export declare function AutocompleteFilter({ classNames, autocompleteProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "autocompleteProps" | "paramKey">): JSX.Element;
81
+
82
+ export declare function AvatarLabel(): JSX.Element | null;
60
83
 
61
84
  export declare const Brand: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
62
85
  variant?: null | undefined;
@@ -84,19 +107,19 @@ export declare type BrandProps = SharedComponentProps & {
84
107
  };
85
108
  };
86
109
 
110
+ export declare function CheckboxFilter({ classNames, checkboxProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "checkboxProps" | "paramKey">): JSX.Element;
111
+
112
+ export declare function CheckboxGroupFilter({ classNames, checkboxGroupProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "checkboxGroupProps" | "paramKey">): JSX.Element;
113
+
87
114
  export declare function cn(...classes: ClassValue[]): string;
88
115
 
89
- export declare type ColorMode = "light" | "dark";
116
+ export declare function ColorPicker({ ...props }: ColorPickerProps): JSX.Element;
90
117
 
91
- export declare type ColorsPalette = {
92
- primary: string;
93
- secondary: string;
94
- success: string;
95
- danger: string;
96
- warning: string;
97
- info: string;
98
- background: string;
99
- foreground: string;
118
+ export declare type ColorPickerInputType = "free" | "preset";
119
+
120
+ export declare type ColorPickerProps = Omit<InputProps & SelectProps, "onChange" | "children"> & {
121
+ inputType: ColorPickerInputType;
122
+ presets?: string[];
100
123
  };
101
124
 
102
125
  export declare const Column: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({} & ClassProp) | undefined) => string> & SharedComponentProps, "ref"> & RefAttributes<HTMLElement>>;
@@ -136,6 +159,10 @@ export declare const Container: ForwardRefExoticComponent<Omit<ClassAttributes<H
136
159
 
137
160
  export declare type ContainerProps = SharedComponentProps & {};
138
161
 
162
+ export declare function CopyButton({ value }: {
163
+ value: string;
164
+ }): JSX.Element;
165
+
139
166
  export declare type CopyRights = {
140
167
  year: number;
141
168
  text: string;
@@ -145,15 +172,14 @@ export declare const copyRights: CopyRights;
145
172
 
146
173
  export declare function CopyRightsBox({ copyRights, classNames }: FooterProps): JSX.Element;
147
174
 
148
- export declare const defaultColorsPalette: ColorsPalette;
175
+ export declare function DateFilter({ classNames, dateProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "dateProps" | "paramKey">): JSX.Element;
149
176
 
150
177
  export declare const defaultEmperorUIConfig: EmperorUIConfig;
151
178
 
152
179
  export declare type EmperorUIConfig = {
153
- theme?: Partial<EmperorUITheme>;
154
180
  layout?: Partial<EmperorUILayout>;
155
181
  interLocalization?: Partial<EmperorUIInterLocalization>;
156
- toast?: HeroUIProviderProps;
182
+ toast?: ToastProps;
157
183
  };
158
184
 
159
185
  export declare const EmperorUIContext: Context<ConfigContextState | undefined>;
@@ -176,6 +202,7 @@ export declare type EmperorUILayout = {
176
202
  export declare type EmperorUILocales = Record<EmperorUILang, Partial<{
177
203
  atoms?: {
178
204
  uploader?: Partial<Locale["atoms"]["uploader"]>;
205
+ colorPicker?: Partial<Locale["atoms"]["colorPicker"]>;
179
206
  };
180
207
  }>>;
181
208
 
@@ -183,15 +210,25 @@ export declare function EmperorUIProvider({ children, ...props }: EmperorUIProvi
183
210
 
184
211
  declare type EmperorUIProviderProps = ConfigProviderProps & {};
185
212
 
186
- export declare type EmperorUITheme = {
187
- mode: ColorMode;
188
- colors: Partial<ColorsPalette>;
189
- };
213
+ export declare function EmptyListings({ className, classNames, }: {
214
+ className?: string;
215
+ classNames?: {
216
+ wrapper?: string;
217
+ iconWrapper?: string;
218
+ title?: string;
219
+ description?: string;
220
+ };
221
+ }): JSX.Element;
222
+
223
+ export declare const emptyListingsClasses: (props?: ({} & ClassProp) | undefined) => string;
190
224
 
191
225
  declare const en: {
192
226
  common: {};
193
227
  toasts: {};
194
228
  atoms: {
229
+ colorPicker: {
230
+ invalidColorFormat: string;
231
+ };
195
232
  uploader: {
196
233
  dropHere: string;
197
234
  selectFile: string;
@@ -205,7 +242,12 @@ declare const en: {
205
242
  };
206
243
  };
207
244
  molecules: {};
208
- organisms: {};
245
+ organisms: {
246
+ listings: {
247
+ emptyTitle: string;
248
+ emptyDescription: string;
249
+ };
250
+ };
209
251
  templates: {};
210
252
  };
211
253
 
@@ -213,6 +255,16 @@ export declare const FAKE_PARAGRAPH = "Lorem ipsum dolor sit amet, consectetuer
213
255
 
214
256
  export declare const FAKE_SENTENCE = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.";
215
257
 
258
+ export declare function Field({ className, classNames, ...props }: FieldProps): JSX.Element;
259
+
260
+ export declare type FieldClassnames = {
261
+ base?: string;
262
+ };
263
+
264
+ export declare type FieldProps = SharedComponentProps & {
265
+ classNames?: FieldClassnames;
266
+ };
267
+
216
268
  export declare type FileObject = {
217
269
  view?: string;
218
270
  type?: FileType;
@@ -226,16 +278,46 @@ export declare const fileTypesMapping: {
226
278
  [key: string]: string[];
227
279
  };
228
280
 
229
- export declare function Filter({ className }: FilterProps): JSX.Element;
281
+ export declare function Filter({ className, type, searchProps, selectProps, autocompleteProps, dateProps, numericProps, checkboxProps, checkboxGroupProps, radioProps, switchProps, rangeProps, paramKey, options, ...props }: FilterProps): JSX.Element;
282
+
283
+ export declare const filterClasses: (props?: ({
284
+ type?: "search" | "select" | "switch" | "checkbox" | "radio" | "date" | "autocomplete" | "numeric" | "checkboxGroup" | "range" | null | undefined;
285
+ } & ClassProp) | undefined) => string;
230
286
 
231
287
  export declare type FilterClassnames = {
232
288
  base?: string;
289
+ field?: string;
233
290
  };
234
291
 
235
- export declare type FilterProps = SharedComponentProps & {
292
+ export declare type FilterProps = SharedComponentProps & SelectFilterProps & {
236
293
  classNames?: FilterClassnames;
294
+ type: FilterType;
295
+ paramKey: string;
296
+ searchProps?: InputProps;
297
+ selectProps?: Omit<SelectProps, "children">;
298
+ autocompleteProps?: AutocompleteProps;
299
+ dateProps?: DatePickerProps;
300
+ numericProps?: InputProps;
301
+ checkboxProps?: CheckboxProps;
302
+ checkboxGroupProps?: CheckboxGroupProps;
303
+ radioProps?: RadioProps;
304
+ switchProps?: SwitchProps;
305
+ rangeProps?: SliderProps;
306
+ };
307
+
308
+ export declare function Filters({ className, classNames, children, ...props }: FiltersProps): JSX.Element;
309
+
310
+ export declare type FiltersClassnames = {
311
+ base?: string;
312
+ };
313
+
314
+ export declare type FiltersProps = Omit<SharedComponentProps, "children"> & {
315
+ classNames?: FiltersClassnames;
316
+ children: ReactNode;
237
317
  };
238
318
 
319
+ export declare type FilterType = "search" | "select" | "autocomplete" | "date" | "numeric" | "checkbox" | "checkboxGroup" | "switch" | "range";
320
+
239
321
  export declare const Footer: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
240
322
  variant?: "default" | null | undefined;
241
323
  } & ClassProp) | undefined) => string> & SharedComponentProps & {
@@ -274,12 +356,24 @@ export declare type FooterProps = SharedComponentProps & {
274
356
  contacts?: Contacts;
275
357
  };
276
358
 
359
+ export declare function FreeColorPicker({ className, classNames, value, onValueChange, inputType, ...props }: ColorPickerProps): JSX.Element;
360
+
277
361
  export declare const getAllowedTypes: (fileTypes: FileType[]) => string[];
278
362
 
363
+ export declare const getCardMotion: ({}: {
364
+ hoverEffect: ItemCardHoverEffect;
365
+ }) => MotionProps;
366
+
367
+ export declare const getListing: () => Promise<{
368
+ item?: MockItemType | null | undefined;
369
+ }>;
370
+
279
371
  export declare const getListings: ({ page, pageSize, }: {
280
372
  page?: number;
281
373
  pageSize?: number;
282
- }) => MockItemType[];
374
+ }) => Promise<{
375
+ items: MockItemType[];
376
+ }>;
283
377
 
284
378
  export declare const getStorybookDecorators: ({ config, }: {
285
379
  config?: EmperorUIConfig;
@@ -343,14 +437,59 @@ export declare const isMaxFileSizeExceeded: ({ fileSize, maxFileSize, }: {
343
437
  maxFileSize: number;
344
438
  }) => boolean;
345
439
 
346
- export declare function ItemCard({ className }: ItemCardProps): JSX.Element;
440
+ export declare const ITEM_CARD_ACTIONS: ItemCardAction[];
441
+
442
+ export declare function ItemActionsDropdown({ actions, classNames, onActionClick, }: Pick<ItemCardProps, "actions" | "classNames" | "onActionClick">): JSX.Element | null;
443
+
444
+ export declare function ItemBanner({ item, orientation, classNames, }: Pick<ItemCardProps, "item" | "orientation" | "classNames">): JSX.Element | null;
445
+
446
+ export declare function ItemCard({ variants, isLoading, className, classNames, item, actions, hoverEffect, onActionClick, orientation: defaultOrientation, }: ItemCardProps): JSX.Element;
447
+
448
+ export declare type ItemCardAction = DropdownItemProps & {
449
+ key: string;
450
+ label: string;
451
+ };
452
+
453
+ export declare function ItemCardBody({ item, orientation, classNames, actions, onActionClick, }: Pick<ItemCardProps, "item" | "orientation" | "classNames" | "actions" | "onActionClick">): JSX.Element;
347
454
 
348
455
  export declare type ItemCardClassnames = {
349
456
  base?: string;
457
+ image?: string;
458
+ header?: string;
459
+ footer?: string;
460
+ imageWrapper?: string;
461
+ mainWrapper?: string;
462
+ banner?: string;
463
+ dropdown?: string;
464
+ body?: string;
465
+ title?: string;
466
+ price?: string;
467
+ description?: string;
468
+ chips?: string;
469
+ chip?: string;
350
470
  };
351
471
 
472
+ export declare function ItemCardFooter({ item, orientation, classNames, }: Pick<ItemCardProps, "item" | "orientation" | "classNames">): JSX.Element;
473
+
474
+ export declare function ItemCardHeader({ item, orientation, classNames, actions, onActionClick, }: Pick<ItemCardProps, "item" | "orientation" | "classNames" | "actions" | "onActionClick">): JSX.Element;
475
+
476
+ export declare type ItemCardHoverEffect = "none" | "zoom" | "rotate";
477
+
478
+ export declare type ItemCardOrientation = "horizontal" | "vertical";
479
+
352
480
  export declare type ItemCardProps = SharedComponentProps & {
481
+ variants?: Variants;
482
+ isLoading?: boolean;
483
+ hoverEffect?: ItemCardHoverEffect;
353
484
  classNames?: ItemCardClassnames;
485
+ item: ItemProps;
486
+ actions?: ItemCardAction[];
487
+ onActionClick?: (key: string) => void;
488
+ orientation?: ItemCardOrientation;
489
+ };
490
+
491
+ export declare type ItemChipProps = ChipProps & {
492
+ label: string;
354
493
  };
355
494
 
356
495
  export declare function ItemDetails({ className }: ItemDetailsProps): JSX.Element;
@@ -363,6 +502,19 @@ export declare type ItemDetailsProps = SharedComponentProps & {
363
502
  classNames?: ItemDetailsClassnames;
364
503
  };
365
504
 
505
+ export declare type ItemProps = {
506
+ key: string;
507
+ title?: ReactNode;
508
+ description?: ReactNode;
509
+ image?: {
510
+ src: string;
511
+ alt: string;
512
+ };
513
+ chips?: ItemChipProps[];
514
+ banner?: ReactNode;
515
+ price?: ReactNode;
516
+ };
517
+
366
518
  /**
367
519
  * This component is not for general use nor it is reusable, it is intended to be used as a demo page.
368
520
  */
@@ -382,19 +534,47 @@ export declare type LandingPageProps = SharedComponentProps & {
382
534
  variant?: "default";
383
535
  };
384
536
 
385
- export declare function Listings<ListingType>({ className, variant, }: ListingsProps<ListingType>): JSX.Element;
537
+ export declare function Listings({ items, isLoading, className, classNames, layout, actions, onActionClick, pagination, }: ListingsProps): JSX.Element;
538
+
539
+ export declare const listingsClasses: (props?: ({
540
+ layout?: "grid" | "list" | "carousel" | null | undefined;
541
+ } & ClassProp) | undefined) => string;
386
542
 
387
543
  export declare type ListingsClassnames = {
388
544
  base?: string;
545
+ item?: string;
546
+ pagination?: string;
389
547
  };
390
548
 
391
- export declare type ListingsProps<ListingType> = SharedComponentProps & {
549
+ export declare const listingsItemClasses: (props?: ({
550
+ layout?: "grid" | "list" | "carousel" | null | undefined;
551
+ } & ClassProp) | undefined) => string;
552
+
553
+ export declare type ListingsLayout = "grid" | "list" | "carousel";
554
+
555
+ export declare const listingsPaginationClasses: (props?: ({
556
+ layout?: "grid" | "list" | "carousel" | null | undefined;
557
+ } & ClassProp) | undefined) => string;
558
+
559
+ export declare type ListingsProps = SharedComponentProps & {
392
560
  classNames?: ListingsClassnames;
393
- variant?: ListingsVariant;
394
- items: ListingType[];
561
+ layout?: ListingsLayout;
562
+ items: ItemCardProps[];
563
+ isLoading?: boolean;
564
+ actions?: ItemCardAction[];
565
+ onActionClick?: (key: string) => void;
566
+ pagination?: {
567
+ page: number;
568
+ setPage: (page: number) => void;
569
+ pageSize: number;
570
+ totalItemsCount: number;
571
+ pagesCount: number;
572
+ };
395
573
  };
396
574
 
397
- export declare type ListingsVariant = "default";
575
+ export declare const listingsStyles: ({}: {}) => CSSProperties;
576
+
577
+ export declare function LoadingItem({ className, classNames, hoverEffect, orientation, }: Pick<ItemCardProps, "className" | "classNames" | "hoverEffect" | "orientation">): JSX.Element;
398
578
 
399
579
  declare type Locale = typeof ar | typeof en;
400
580
 
@@ -410,6 +590,10 @@ export declare const mergeLocales: ({ defaultLocales, configLocales, }: {
410
590
  configLocales?: Partial<Locale>;
411
591
  }) => Locale;
412
592
 
593
+ export declare const MOCK_BASE_DATE: Date;
594
+
595
+ export declare const MOCK_COLORS: MockColor[];
596
+
413
597
  export declare const MOCK_HEADER_ACTIONS: SideBarAction[];
414
598
 
415
599
  export declare const MOCK_HEADER_ITEMS: NavigationItem[];
@@ -418,13 +602,58 @@ export declare const MOCK_HEADER_ITEMS_WITH_SUB_ITEMS: NavigationItem[];
418
602
 
419
603
  export declare const MOCK_HEADER_SUB_ITEMS: NavigationItem[];
420
604
 
605
+ export declare const MOCK_ITEM_BRANDS: MockItemBrand[];
606
+
607
+ export declare const MOCK_ITEM_CATEGORIES: MockItemCategory[];
608
+
609
+ export declare const MOCK_ITEM_REVIEWS_1: MockReview[];
610
+
611
+ export declare const MOCK_ITEM_REVIEWS_2: MockReview[];
612
+
613
+ export declare const MOCK_ITEM_REVIEWS_3: MockReview[];
614
+
615
+ export declare const MOCK_LISTING_DESCRIPTIONS: string[];
616
+
617
+ export declare const MOCK_LISTING_IMAGES: string[];
618
+
619
+ export declare const MOCK_LISTING_TITLES: string[];
620
+
421
621
  export declare const MOCK_LISTINGS: MockItemType[];
422
622
 
623
+ export declare const MOCK_REVIEW_AUTHORS: string[];
624
+
625
+ export declare const MOCK_REVIEW_COMMENTS: readonly string[];
626
+
627
+ export declare type MockColor = "red" | "blue" | "green" | "yellow" | "purple" | "orange" | "pink" | "brown" | "gray" | "black" | "white";
628
+
629
+ export declare type MockItemBrand = "Apple" | "Dell" | "HP" | "Lenovo" | "Asus" | "Acer" | "MSI" | "Razer" | "Samsung" | "Microsoft";
630
+
631
+ export declare type MockItemCategory = "laptops" | "desktops" | "monitors" | "keyboards" | "mice" | "headsets" | "printers" | "storage" | "components" | "networking";
632
+
423
633
  export declare type MockItemType = {
424
634
  id: number;
425
635
  title: string;
426
636
  description: string;
427
637
  image: string;
638
+ price: number;
639
+ categories: ItemChipProps[];
640
+ isAvailable: boolean;
641
+ isBestSeller: boolean;
642
+ averageRating: number;
643
+ reviews: MockReview[];
644
+ brand: MockItemBrand;
645
+ color: MockColor;
646
+ createdAt: Date;
647
+ updatedAt: Date;
648
+ };
649
+
650
+ export declare type MockReview = {
651
+ id: number;
652
+ rating: number;
653
+ comment: string;
654
+ author: string;
655
+ createdAt: Date;
656
+ updatedAt: Date;
428
657
  };
429
658
 
430
659
  export declare const NavBar: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
@@ -513,6 +742,8 @@ export declare type NavigationProviderProps = {
513
742
  children: ReactNode;
514
743
  };
515
744
 
745
+ export declare function NumericFilter({ classNames, numericProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "numericProps" | "paramKey">): JSX.Element;
746
+
516
747
  export declare const ONE_MEGABYTE = 1024;
517
748
 
518
749
  export declare enum Placeholders {
@@ -535,6 +766,8 @@ export declare enum PreservedKeys {
535
766
  COMPACT_SIDEBAR_ID = "emperor-compact-sidebar"
536
767
  }
537
768
 
769
+ export declare function PresetColorPicker({ className, classNames, value, onSelectionChange, inputType, presets, ...props }: ColorPickerProps): JSX.Element;
770
+
538
771
  export declare type QuickLink = {
539
772
  label: string;
540
773
  href: string;
@@ -550,6 +783,8 @@ export declare const quickLinks: QuickLinkCollection[];
550
783
 
551
784
  export declare function QuickLinksBox({ quickLinks, classNames }: FooterProps): JSX.Element;
552
785
 
786
+ export declare function RangeFilter({ classNames, rangeProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "rangeProps" | "paramKey">): JSX.Element;
787
+
553
788
  export declare function refineUploadedFiles({ uploadedFiles, locale, allowedTypes, isMulti, setFiles, }: {
554
789
  uploadedFiles: (File | undefined)[];
555
790
  locale?: Locale;
@@ -566,6 +801,8 @@ export declare const Scaffold: ForwardRefExoticComponent<SharedComponentProps &
566
801
  classNames?: ScaffoldClassnames;
567
802
  } & RefAttributes<HTMLDivElement>>;
568
803
 
804
+ export declare const scaffoldClasses: (props?: ({} & ClassProp) | undefined) => string;
805
+
569
806
  export declare type ScaffoldClassnames = {
570
807
  base?: string;
571
808
  };
@@ -574,12 +811,28 @@ export declare type ScaffoldProps = SharedComponentProps & {
574
811
  classNames?: ScaffoldClassnames;
575
812
  };
576
813
 
814
+ export declare function SearchFilter({ classNames, searchProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "searchProps" | "paramKey">): JSX.Element;
815
+
577
816
  export declare type SegmentedHeaderContentProps = SharedComponentProps & {
578
817
  glassEffect?: HeaderGlassEffect;
579
818
  };
580
819
 
820
+ export declare function SelectFilter({ classNames, selectProps, paramKey, options, ...props }: Pick<FilterProps, "classNames" | "selectProps" | "paramKey" | "options">): JSX.Element;
821
+
822
+ export declare type SelectFilterProps = {
823
+ options?: SelectOption[];
824
+ };
825
+
826
+ export declare type SelectOption = {
827
+ key: string;
828
+ label: string;
829
+ };
830
+
581
831
  export declare type SharedComponentProps = {
582
832
  className?: string;
833
+ classNames?: {
834
+ base?: string;
835
+ };
583
836
  children?: ReactNode;
584
837
  };
585
838
 
@@ -596,7 +849,7 @@ classNames?: SideBarClassnames;
596
849
  variant?: SideBarVariant;
597
850
  items: NavigationItem[];
598
851
  actions?: SideBarAction[];
599
- triggerProps?: Omit<ButtonProps_2, "content"> & {
852
+ triggerProps?: Omit<ButtonProps, "content"> & {
600
853
  content?: ReactNode;
601
854
  };
602
855
  isOpen?: boolean;
@@ -658,6 +911,24 @@ export declare type SubItemsBoxProps = {
658
911
  subItemsColumns?: number;
659
912
  };
660
913
 
914
+ export declare function SwitchFilter({ classNames, switchProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "switchProps" | "paramKey">): JSX.Element;
915
+
916
+ export declare function ThemeProvider({ children }: ThemeProviderProps): JSX.Element;
917
+
918
+ export declare type ThemeProviderProps = {
919
+ children: ReactNode;
920
+ };
921
+
922
+ export declare function ThemeSwitch({ className, classNames, ...props }: ThemeSwitchProps): JSX.Element;
923
+
924
+ export declare type ThemeSwitchClassnames = {
925
+ base?: string;
926
+ };
927
+
928
+ export declare type ThemeSwitchProps = SharedComponentProps & {
929
+ classNames?: ThemeSwitchClassnames;
930
+ };
931
+
661
932
  /**
662
933
  * @usage
663
934
  * ```
@@ -705,6 +976,7 @@ export declare type UploaderContextState = {
705
976
  label?: string;
706
977
  avatar?: string;
707
978
  listing?: string;
979
+ listingItem?: string;
708
980
  error?: string;
709
981
  input?: string;
710
982
  title?: string;
@@ -729,16 +1001,38 @@ export declare function UploadFileErrorBox(): JSX.Element | null;
729
1001
 
730
1002
  export declare function UploadFileInput(): JSX.Element;
731
1003
 
732
- export declare function UploadFileLabel(): JSX.Element;
1004
+ export declare function UploadFileLabel(): JSX.Element | null;
733
1005
 
734
- export declare function UploadFileListing(): (JSX.Element | null)[];
1006
+ export declare function UploadFileListing(): JSX.Element;
735
1007
 
736
1008
  export declare function useEmperorUI(): ConfigContextState;
737
1009
 
1010
+ export declare function useFilters<FiltersType extends Record<string, string | number | boolean>>(): {
1011
+ filters: FiltersType | null;
1012
+ };
1013
+
738
1014
  export declare function useNavigation(): NavigationContextState;
739
1015
 
740
1016
  export declare type UserDropdownProps = SharedComponentProps & {};
741
1017
 
1018
+ export declare function useSearchParamsHandler(): {
1019
+ getParam: (name: string) => string | null;
1020
+ allParams: Record<string, string>;
1021
+ setParams: ({ params, options, }: {
1022
+ params: Record<string, string | number | boolean | undefined | null>;
1023
+ options?: {
1024
+ replace?: boolean;
1025
+ };
1026
+ }) => void;
1027
+ deleteParam: ({ key }: {
1028
+ key: string;
1029
+ }) => void;
1030
+ deleteParams: ({ keys }: {
1031
+ keys: string[];
1032
+ }) => void;
1033
+ clearParams: () => void;
1034
+ };
1035
+
742
1036
  export declare const useUploader: ({ labelContent, labelId, fileTypes, isRequired, isDraggable, isMulti, preventDuplicates, maxCount, maxFileSize, compressFiles, onChange, }: UseUploadFileProps) => UseUploadFileReturn;
743
1037
 
744
1038
  export declare function useUploaderContext(): UploaderContextState;
@@ -771,6 +1065,14 @@ export declare type UseUploadFileReturn = {
771
1065
  onInputChange: SharedOnInputChangeType;
772
1066
  };
773
1067
 
1068
+ export declare const useWindowSize: () => {
1069
+ viewportWidth: number;
1070
+ viewportHeight: number;
1071
+ currentScreen: "base" | "sm" | "md" | "lg" | "xl" | "2xl";
1072
+ isSmallDevice: boolean;
1073
+ isExtraSmallDevice: boolean;
1074
+ };
1075
+
774
1076
  export declare function validateUploadedFiles({ uploadedFiles, maxFileSize, compressFiles, locale, preventDuplicates, files, }: {
775
1077
  uploadedFiles: File[];
776
1078
  maxFileSize?: number;
@@ -0,0 +1,5 @@
1
+ import { d as a } from "./index-CDB93OLO.js";
2
+ var r = a;
3
+ export {
4
+ r as default
5
+ };