@grandbazar/ui-baza 1.2.1 → 1.2.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.
- package/README.md +69 -34
- package/dist/index.cjs +1009 -127
- package/dist/index.d.ts +154 -11
- package/dist/index.js +987 -124
- package/dist/style.css +111 -4
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ComponentProps } from 'react';
|
|
2
2
|
import { default as default_2 } from 'react';
|
|
3
3
|
import { Dispatch } from 'react';
|
|
4
|
+
import { IconGoogle } from './logos';
|
|
5
|
+
import { IconTelegram } from './logos';
|
|
6
|
+
import { IconVK } from './logos';
|
|
7
|
+
import { IconYandex } from './logos';
|
|
4
8
|
import { JSX } from 'react/jsx-runtime';
|
|
5
9
|
import { ReactPortal } from 'react';
|
|
6
10
|
import { SetStateAction } from 'react';
|
|
@@ -151,7 +155,11 @@ declare function DatePickerField({ className, month, year, renderWeekdays, child
|
|
|
151
155
|
|
|
152
156
|
declare function DatePickerWeekDays({ className, locale }: TDatePickerWeekDaysProps): JSX.Element;
|
|
153
157
|
|
|
154
|
-
declare const DROPDOWN_PORTAL_ALIGN_LIST: readonly ["start", "end"];
|
|
158
|
+
declare const DROPDOWN_PORTAL_ALIGN_LIST: readonly ["start", "center", "end"];
|
|
159
|
+
|
|
160
|
+
declare const DROPDOWN_PORTAL_POSITION_LIST: readonly ["bottom", "top", "right", "left"];
|
|
161
|
+
|
|
162
|
+
declare const DROPDOWN_TRIGGER_EVENT_LIST: readonly ["click", "hover"];
|
|
155
163
|
|
|
156
164
|
declare function DropdownContent({ className, children, ...props }: TDropdownContentProps): JSX.Element;
|
|
157
165
|
|
|
@@ -182,11 +190,11 @@ export declare namespace DropdownMenu {
|
|
|
182
190
|
var Portal: typeof DropdownPortal;
|
|
183
191
|
}
|
|
184
192
|
|
|
185
|
-
declare function DropdownPortal({ children, className, align, isNested }: TDropdownPortalProps): ReactPortal | null;
|
|
193
|
+
declare function DropdownPortal({ children, className, align, position, isNested, offset, maxWidth, maxHeight, }: TDropdownPortalProps): ReactPortal | null;
|
|
186
194
|
|
|
187
195
|
declare function DropdownRoot({ children }: TDropdownRootProps): JSX.Element;
|
|
188
196
|
|
|
189
|
-
declare function DropdownTrigger({ children, asChild, ...props }: TDropdownTriggerProps): JSX.Element;
|
|
197
|
+
declare function DropdownTrigger({ children, asChild, triggerEvent, ...props }: TDropdownTriggerProps): JSX.Element;
|
|
190
198
|
|
|
191
199
|
export declare const I18N_MONTH_LABELS: {
|
|
192
200
|
readonly en: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
@@ -206,6 +214,12 @@ export declare namespace IconArrowCircle {
|
|
|
206
214
|
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
207
215
|
}
|
|
208
216
|
|
|
217
|
+
export declare function IconArrowCircleUp(props: TSvgIconProps): JSX.Element;
|
|
218
|
+
|
|
219
|
+
export declare namespace IconArrowCircleUp {
|
|
220
|
+
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
221
|
+
}
|
|
222
|
+
|
|
209
223
|
export declare function IconArrowDiagonal(props: TSvgIconProps): JSX.Element;
|
|
210
224
|
|
|
211
225
|
export declare namespace IconArrowDiagonal {
|
|
@@ -218,12 +232,22 @@ export declare namespace IconArrowUTurn {
|
|
|
218
232
|
var Up: (props: TSvgIconProps) => JSX.Element;
|
|
219
233
|
}
|
|
220
234
|
|
|
235
|
+
export declare function IconBell(props: TSvgIconProps): JSX.Element;
|
|
236
|
+
|
|
237
|
+
export declare namespace IconBell {
|
|
238
|
+
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
export declare function IconBox(props: TSvgIconProps): JSX.Element;
|
|
242
|
+
|
|
221
243
|
export declare function IconCalendar(props: TSvgIconProps): JSX.Element;
|
|
222
244
|
|
|
223
245
|
export declare function IconCharacteristic(props: TSvgIconProps): JSX.Element;
|
|
224
246
|
|
|
225
247
|
export declare function IconCheck(props: TSvgIconProps): JSX.Element;
|
|
226
248
|
|
|
249
|
+
export declare function IconCheckCircle(props: TSvgIconProps): JSX.Element;
|
|
250
|
+
|
|
227
251
|
export declare function IconChevron(props: TSvgIconProps): JSX.Element;
|
|
228
252
|
|
|
229
253
|
export declare namespace IconChevron {
|
|
@@ -232,8 +256,20 @@ export declare namespace IconChevron {
|
|
|
232
256
|
|
|
233
257
|
export declare function IconChevronDouble(props: TSvgIconProps): JSX.Element;
|
|
234
258
|
|
|
259
|
+
export declare function IconClock(props: TSvgIconProps): JSX.Element;
|
|
260
|
+
|
|
261
|
+
export declare namespace IconClock {
|
|
262
|
+
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
263
|
+
}
|
|
264
|
+
|
|
235
265
|
export declare function IconCollapse(props: TSvgIconProps): JSX.Element;
|
|
236
266
|
|
|
267
|
+
export declare function IconCopy(props: TSvgIconProps): JSX.Element;
|
|
268
|
+
|
|
269
|
+
export declare function IconDots(props: TSvgIconProps): JSX.Element;
|
|
270
|
+
|
|
271
|
+
export declare function IconDownload(props: TSvgIconProps): JSX.Element;
|
|
272
|
+
|
|
237
273
|
export declare function IconEye(props: TSvgIconProps): JSX.Element;
|
|
238
274
|
|
|
239
275
|
export declare namespace IconEye {
|
|
@@ -242,6 +278,15 @@ export declare namespace IconEye {
|
|
|
242
278
|
|
|
243
279
|
declare function IconEyeOff(props: TSvgIconProps): JSX.Element;
|
|
244
280
|
|
|
281
|
+
export declare function IconFace(): void;
|
|
282
|
+
|
|
283
|
+
export declare namespace IconFace {
|
|
284
|
+
var Smile: (props: TSvgIconProps) => JSX.Element;
|
|
285
|
+
var Sad: (props: TSvgIconProps) => JSX.Element;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
export declare function IconFile(props: TSvgIconProps): JSX.Element;
|
|
289
|
+
|
|
245
290
|
export declare function IconFilters(props: TSvgIconProps): JSX.Element;
|
|
246
291
|
|
|
247
292
|
export declare function IconGear(props: TSvgIconProps): JSX.Element;
|
|
@@ -250,7 +295,28 @@ export declare namespace IconGear {
|
|
|
250
295
|
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
251
296
|
}
|
|
252
297
|
|
|
253
|
-
export declare function
|
|
298
|
+
export declare function IconHanger(props: TSvgIconProps): JSX.Element;
|
|
299
|
+
|
|
300
|
+
export declare function IconHome(props: TSvgIconProps): JSX.Element;
|
|
301
|
+
|
|
302
|
+
export declare namespace IconHome {
|
|
303
|
+
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
export declare function IconInfo(props: TSvgIconProps): JSX.Element;
|
|
307
|
+
|
|
308
|
+
export declare namespace IconInfo {
|
|
309
|
+
var Filled: (props: TSvgIconProps) => JSX.Element;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
export declare function IconLogo(): never;
|
|
313
|
+
|
|
314
|
+
export declare namespace IconLogo {
|
|
315
|
+
var Google: typeof IconGoogle;
|
|
316
|
+
var Telegram: typeof IconTelegram;
|
|
317
|
+
var VK: typeof IconVK;
|
|
318
|
+
var Yandex: typeof IconYandex;
|
|
319
|
+
}
|
|
254
320
|
|
|
255
321
|
export declare function IconLogOut(props: TSvgIconProps): JSX.Element;
|
|
256
322
|
|
|
@@ -258,6 +324,8 @@ export declare function IconMail(props: TSvgIconProps): JSX.Element;
|
|
|
258
324
|
|
|
259
325
|
export declare function IconMinus(props: TSvgIconProps): JSX.Element;
|
|
260
326
|
|
|
327
|
+
export declare function IconOneCircle(props: TSvgIconProps): JSX.Element;
|
|
328
|
+
|
|
261
329
|
export declare function IconPerson(props: TSvgIconProps): JSX.Element;
|
|
262
330
|
|
|
263
331
|
export declare namespace IconPerson {
|
|
@@ -280,6 +348,10 @@ export declare function IconQRCode(props: TSvgIconProps): JSX.Element;
|
|
|
280
348
|
|
|
281
349
|
export declare function IconRequest(props: TSvgIconProps): JSX.Element;
|
|
282
350
|
|
|
351
|
+
export declare function IconResizeCorner(props: TSvgIconProps): JSX.Element;
|
|
352
|
+
|
|
353
|
+
export declare function IconScan(props: TSvgIconProps): JSX.Element;
|
|
354
|
+
|
|
283
355
|
export declare function IconSearch(props: TSvgIconProps): JSX.Element;
|
|
284
356
|
|
|
285
357
|
export declare function IconShopping(props: TSvgIconProps): JSX.Element;
|
|
@@ -290,9 +362,13 @@ export declare namespace IconShopping {
|
|
|
290
362
|
|
|
291
363
|
export declare function IconSort(props: TSvgIconProps): JSX.Element;
|
|
292
364
|
|
|
293
|
-
export declare function
|
|
365
|
+
export declare function IconStar(props: TSvgIconProps): JSX.Element;
|
|
366
|
+
|
|
367
|
+
export declare function IconSticker(props: TSvgIconProps): JSX.Element;
|
|
294
368
|
|
|
295
|
-
export declare function
|
|
369
|
+
export declare function IconStop(props: TSvgIconProps): JSX.Element;
|
|
370
|
+
|
|
371
|
+
export declare function IconSwitch(props: TSvgIconProps): JSX.Element;
|
|
296
372
|
|
|
297
373
|
export declare function IconXMark(props: TSvgIconProps): JSX.Element;
|
|
298
374
|
|
|
@@ -300,9 +376,9 @@ export declare namespace IconXMark {
|
|
|
300
376
|
var Small: typeof IconXMarkSmall;
|
|
301
377
|
}
|
|
302
378
|
|
|
303
|
-
declare function
|
|
379
|
+
export declare function IconXMarkCircle(props: TSvgIconProps): JSX.Element;
|
|
304
380
|
|
|
305
|
-
|
|
381
|
+
declare function IconXMarkSmall(props: TSvgIconProps): JSX.Element;
|
|
306
382
|
|
|
307
383
|
export declare const LOCALE_FIRST_DAY_OF_WEEK: TLabel<number>;
|
|
308
384
|
|
|
@@ -576,23 +652,33 @@ declare type TDropdownItemProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
576
652
|
|
|
577
653
|
declare type TDropdownMenuContextValue = {
|
|
578
654
|
isOpen: boolean;
|
|
579
|
-
setIsOpen:
|
|
655
|
+
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
580
656
|
triggerRef: React.RefObject<HTMLButtonElement | null>;
|
|
581
657
|
portalRef: React.RefObject<HTMLDivElement | null>;
|
|
658
|
+
triggerEvent: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
|
|
659
|
+
setTriggerEvent: React.Dispatch<React.SetStateAction<TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>>>;
|
|
660
|
+
portalPlacement: TPortalPlacement | null;
|
|
661
|
+
setPortalPlacement: React.Dispatch<React.SetStateAction<TPortalPlacement | null>>;
|
|
582
662
|
};
|
|
583
663
|
|
|
584
664
|
declare type TDropdownPortalProps = {
|
|
585
665
|
children: React.ReactNode;
|
|
586
666
|
className?: string;
|
|
587
667
|
align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
|
|
668
|
+
position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
|
|
588
669
|
isNested?: boolean;
|
|
670
|
+
offset?: number;
|
|
671
|
+
maxWidth?: number;
|
|
672
|
+
maxHeight?: number;
|
|
589
673
|
};
|
|
590
674
|
|
|
591
675
|
declare type TDropdownRootProps = {
|
|
592
|
-
children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen'>) => React.ReactNode);
|
|
676
|
+
children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement'>) => React.ReactNode);
|
|
593
677
|
};
|
|
594
678
|
|
|
595
|
-
declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement
|
|
679
|
+
declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement>> & {
|
|
680
|
+
triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
|
|
681
|
+
};
|
|
596
682
|
|
|
597
683
|
declare const TEXT_FIELD_SIZES: readonly ["lg", "md"];
|
|
598
684
|
|
|
@@ -627,6 +713,37 @@ declare type TLabel<T = string> = Record<TLocale, T>;
|
|
|
627
713
|
|
|
628
714
|
declare type TLocale = TArrayElement<typeof LOCALES>;
|
|
629
715
|
|
|
716
|
+
/**
|
|
717
|
+
* Tooltip is a compound component for displaying contextual hints.
|
|
718
|
+
* Provides a trigger wrapper and content rendering for short descriptions.
|
|
719
|
+
*
|
|
720
|
+
* @param children - Trigger element for the tooltip
|
|
721
|
+
* @param className - Additional CSS classes for the tooltip content
|
|
722
|
+
* @param title - Optional title text
|
|
723
|
+
* @param description - Optional description text
|
|
724
|
+
* @param align - Alignment for the tooltip content (start, center, end)
|
|
725
|
+
* @param position - Preferred placement of the tooltip content
|
|
726
|
+
* @param triggerEvent - Trigger behavior (hover, click)
|
|
727
|
+
* @param maxWidth - Max width of the tooltip content in pixels (required for horizontal flip)
|
|
728
|
+
* @param maxHeight - Max height of the tooltip content in pixels (required for vertical flip)
|
|
729
|
+
* @param arrowOffset - Arrow offset in pixels for inline and block axes
|
|
730
|
+
* @param withoutArrow - Hide tooltip arrow
|
|
731
|
+
*
|
|
732
|
+
* @example
|
|
733
|
+
* <Tooltip title="Title" description="Details">
|
|
734
|
+
* <button>Hover me</button>
|
|
735
|
+
* </Tooltip>
|
|
736
|
+
*/
|
|
737
|
+
export declare function Tooltip(props: React.ComponentProps<typeof TooltipRoot>): JSX.Element;
|
|
738
|
+
|
|
739
|
+
export declare namespace Tooltip {
|
|
740
|
+
var Content: typeof TooltipContent;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, arrowOffset, ...props }: TTooltipContentProps): JSX.Element;
|
|
744
|
+
|
|
745
|
+
declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
|
|
746
|
+
|
|
630
747
|
declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
631
748
|
size?: TArrayElement<typeof PAGINATION_SIZES>;
|
|
632
749
|
isCurrent?: boolean;
|
|
@@ -644,6 +761,11 @@ declare type TPaginationRootProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
644
761
|
renderEllipsis?: () => React.ReactNode;
|
|
645
762
|
};
|
|
646
763
|
|
|
764
|
+
declare type TPortalPlacement = {
|
|
765
|
+
position: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
|
|
766
|
+
align: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
|
|
767
|
+
};
|
|
768
|
+
|
|
647
769
|
declare type TProgressBarLinearProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
648
770
|
size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
|
|
649
771
|
percent: number;
|
|
@@ -742,6 +864,27 @@ declare type TTextFieldRootProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
742
864
|
size?: TArrayElement<typeof TEXT_FIELD_SIZES>;
|
|
743
865
|
};
|
|
744
866
|
|
|
867
|
+
declare type TTooltipContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
868
|
+
title?: string;
|
|
869
|
+
description?: string;
|
|
870
|
+
arrowAlign?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
|
|
871
|
+
arrowPosition?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
|
|
872
|
+
arrowOffset?: {
|
|
873
|
+
inline: number;
|
|
874
|
+
block: number;
|
|
875
|
+
};
|
|
876
|
+
};
|
|
877
|
+
|
|
878
|
+
declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & {
|
|
879
|
+
children: React.ReactNode;
|
|
880
|
+
triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
|
|
881
|
+
align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
|
|
882
|
+
position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
|
|
883
|
+
maxWidth?: number;
|
|
884
|
+
maxHeight?: number;
|
|
885
|
+
withoutArrow?: boolean;
|
|
886
|
+
};
|
|
887
|
+
|
|
745
888
|
declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {
|
|
746
889
|
ref?: React.Ref<TElement>;
|
|
747
890
|
};
|