@grandbazar/ui-baza 1.2.0 → 1.2.2

package/dist/index.d.ts

@@ -79,7 +79,7 @@ export declare namespace Breadcrumbs {
  * @param asChild - When true, merges props onto the child element instead of rendering a button
  * @param children - Content to display inside the button
  */
-export declare function Button({ children, className, color, size, mode, asChild, ...props }: TButtonProps): JSX.Element;
+export declare function Button({ children, className, color, size, mode, asChild, ...props }: TButtonPropsWithAsChild): JSX.Element;
 
 export declare namespace Button {
     var Function: typeof ButtonFunction;
@@ -151,7 +151,11 @@ declare function DatePickerField({ className, month, year, renderWeekdays, child
 
 declare function DatePickerWeekDays({ className, locale }: TDatePickerWeekDaysProps): JSX.Element;
 
-declare const DROPDOWN_PORTAL_ALIGN_LIST: readonly ["start", "end"];
+declare const DROPDOWN_PORTAL_ALIGN_LIST: readonly ["start", "center", "end"];
+
+declare const DROPDOWN_PORTAL_POSITION_LIST: readonly ["bottom", "top", "right", "left"];
+
+declare const DROPDOWN_TRIGGER_EVENT_LIST: readonly ["click", "hover"];
 
 declare function DropdownContent({ className, children, ...props }: TDropdownContentProps): JSX.Element;
 
@@ -182,11 +186,11 @@ export declare namespace DropdownMenu {
     var Portal: typeof DropdownPortal;
 }
 
-declare function DropdownPortal({ children, className, align, isNested }: TDropdownPortalProps): ReactPortal | null;
+declare function DropdownPortal({ children, className, align, position, isNested, offset, maxWidth, maxHeight, }: TDropdownPortalProps): ReactPortal | null;
 
 declare function DropdownRoot({ children }: TDropdownRootProps): JSX.Element;
 
-declare function DropdownTrigger({ children, asChild, ...props }: TDropdownTriggerProps): JSX.Element;
+declare function DropdownTrigger({ children, asChild, triggerEvent, ...props }: TDropdownTriggerProps): JSX.Element;
 
 export declare const I18N_MONTH_LABELS: {
     readonly en: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
@@ -206,6 +210,12 @@ export declare namespace IconArrowCircle {
     var Filled: (props: TSvgIconProps) => JSX.Element;
 }
 
+export declare function IconArrowCircleUp(props: TSvgIconProps): JSX.Element;
+
+export declare namespace IconArrowCircleUp {
+    var Filled: (props: TSvgIconProps) => JSX.Element;
+}
+
 export declare function IconArrowDiagonal(props: TSvgIconProps): JSX.Element;
 
 export declare namespace IconArrowDiagonal {
@@ -218,6 +228,10 @@ export declare namespace IconArrowUTurn {
     var Up: (props: TSvgIconProps) => JSX.Element;
 }
 
+export declare function IconBell(props: TSvgIconProps): JSX.Element;
+
+export declare function IconBox(props: TSvgIconProps): JSX.Element;
+
 export declare function IconCalendar(props: TSvgIconProps): JSX.Element;
 
 export declare function IconCharacteristic(props: TSvgIconProps): JSX.Element;
@@ -232,8 +246,16 @@ export declare namespace IconChevron {
 
 export declare function IconChevronDouble(props: TSvgIconProps): JSX.Element;
 
+export declare function IconClock(props: TSvgIconProps): JSX.Element;
+
 export declare function IconCollapse(props: TSvgIconProps): JSX.Element;
 
+export declare function IconCopy(props: TSvgIconProps): JSX.Element;
+
+export declare function IconDots(props: TSvgIconProps): JSX.Element;
+
+export declare function IconDownload(props: TSvgIconProps): JSX.Element;
+
 export declare function IconEye(props: TSvgIconProps): JSX.Element;
 
 export declare namespace IconEye {
@@ -242,6 +264,14 @@ export declare namespace IconEye {
 
 declare function IconEyeOff(props: TSvgIconProps): JSX.Element;
 
+export declare function IconFace(props: TSvgIconProps): JSX.Element;
+
+export declare namespace IconFace {
+    var Sad: (props: TSvgIconProps) => JSX.Element;
+}
+
+export declare function IconFile(props: TSvgIconProps): JSX.Element;
+
 export declare function IconFilters(props: TSvgIconProps): JSX.Element;
 
 export declare function IconGear(props: TSvgIconProps): JSX.Element;
@@ -252,12 +282,18 @@ export declare namespace IconGear {
 
 export declare function IconGoogle(props: TSvgIconProps): JSX.Element;
 
+export declare function IconHanger(props: TSvgIconProps): JSX.Element;
+
+export declare function IconInfo(props: TSvgIconProps): JSX.Element;
+
 export declare function IconLogOut(props: TSvgIconProps): JSX.Element;
 
 export declare function IconMail(props: TSvgIconProps): JSX.Element;
 
 export declare function IconMinus(props: TSvgIconProps): JSX.Element;
 
+export declare function IconOneCircle(props: TSvgIconProps): JSX.Element;
+
 export declare function IconPerson(props: TSvgIconProps): JSX.Element;
 
 export declare namespace IconPerson {
@@ -280,6 +316,10 @@ export declare function IconQRCode(props: TSvgIconProps): JSX.Element;
 
 export declare function IconRequest(props: TSvgIconProps): JSX.Element;
 
+export declare function IconResizeCorner(props: TSvgIconProps): JSX.Element;
+
+export declare function IconScan(props: TSvgIconProps): JSX.Element;
+
 export declare function IconSearch(props: TSvgIconProps): JSX.Element;
 
 export declare function IconShopping(props: TSvgIconProps): JSX.Element;
@@ -290,6 +330,14 @@ export declare namespace IconShopping {
 
 export declare function IconSort(props: TSvgIconProps): JSX.Element;
 
+export declare function IconStar(props: TSvgIconProps): JSX.Element;
+
+export declare function IconSticker(props: TSvgIconProps): JSX.Element;
+
+export declare function IconStop(props: TSvgIconProps): JSX.Element;
+
+export declare function IconSwitch(props: TSvgIconProps): JSX.Element;
+
 export declare function IconTelegram(props: TSvgIconProps): JSX.Element;
 
 export declare function IconVK(props: TSvgIconProps): JSX.Element;
@@ -300,6 +348,8 @@ export declare namespace IconXMark {
     var Small: typeof IconXMarkSmall;
 }
 
+export declare function IconXMarkCircle(props: TSvgIconProps): JSX.Element;
+
 declare function IconXMarkSmall(props: TSvgIconProps): JSX.Element;
 
 export declare function IconYandex(props: TSvgIconProps): JSX.Element;
@@ -474,7 +524,7 @@ declare type TAsChildProps<TDefaultElementProps> = ({
     asChild?: false;
 } & TDefaultElementProps) | {
     asChild: true;
-    children: default_2.ReactNode;
+    children: React.ReactNode;
 };
 
 declare type TBadgeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -519,7 +569,9 @@ declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTM
     disabled?: boolean;
 };
 
-export declare type TButtonProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & TButtonCommonProps;
+export declare type TButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & TButtonCommonProps;
+
+declare type TButtonPropsWithAsChild = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & TButtonCommonProps;
 
 export declare type TCalendarDay = {
     date: number;
@@ -574,23 +626,33 @@ declare type TDropdownItemProps = React.HTMLAttributes<HTMLDivElement> & {
 
 declare type TDropdownMenuContextValue = {
     isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     portalRef: React.RefObject<HTMLDivElement | null>;
+    triggerEvent: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
+    setTriggerEvent: React.Dispatch<React.SetStateAction<TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>>>;
+    portalPlacement: TPortalPlacement | null;
+    setPortalPlacement: React.Dispatch<React.SetStateAction<TPortalPlacement | null>>;
 };
 
 declare type TDropdownPortalProps = {
     children: React.ReactNode;
     className?: string;
     align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
+    position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
     isNested?: boolean;
+    offset?: number;
+    maxWidth?: number;
+    maxHeight?: number;
 };
 
 declare type TDropdownRootProps = {
-    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen'>) => React.ReactNode);
+    children: React.ReactNode | ((context: Pick<TDropdownMenuContextValue, 'isOpen' | 'setIsOpen' | 'portalPlacement'>) => React.ReactNode);
 };
 
-declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement>>;
+declare type TDropdownTriggerProps = TAsChildProps<React.HTMLAttributes<HTMLButtonElement>> & {
+    triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
+};
 
 declare const TEXT_FIELD_SIZES: readonly ["lg", "md"];
 
@@ -625,6 +687,37 @@ declare type TLabel<T = string> = Record<TLocale, T>;
 
 declare type TLocale = TArrayElement<typeof LOCALES>;
 
+/**
+ * Tooltip is a compound component for displaying contextual hints.
+ * Provides a trigger wrapper and content rendering for short descriptions.
+ *
+ * @param children - Trigger element for the tooltip
+ * @param className - Additional CSS classes for the tooltip content
+ * @param title - Optional title text
+ * @param description - Optional description text
+ * @param align - Alignment for the tooltip content (start, center, end)
+ * @param position - Preferred placement of the tooltip content
+ * @param triggerEvent - Trigger behavior (hover, click)
+ * @param maxWidth - Max width of the tooltip content in pixels (required for horizontal flip)
+ * @param maxHeight - Max height of the tooltip content in pixels (required for vertical flip)
+ * @param arrowOffset - Arrow offset in pixels for inline and block axes
+ * @param withoutArrow - Hide tooltip arrow
+ *
+ * @example
+ * <Tooltip title="Title" description="Details">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ */
+export declare function Tooltip(props: React.ComponentProps<typeof TooltipRoot>): JSX.Element;
+
+export declare namespace Tooltip {
+    var Content: typeof TooltipContent;
+}
+
+declare function TooltipContent({ className, role, title, description, arrowAlign, arrowPosition, arrowOffset, ...props }: TTooltipContentProps): JSX.Element;
+
+declare function TooltipRoot({ children, align, position, triggerEvent, maxWidth, maxHeight, withoutArrow, ...tooltipContentProps }: TTooltipRootProps): JSX.Element;
+
 declare type TPaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: TArrayElement<typeof PAGINATION_SIZES>;
     isCurrent?: boolean;
@@ -642,6 +735,11 @@ declare type TPaginationRootProps = React.HTMLAttributes<HTMLDivElement> & {
     renderEllipsis?: () => React.ReactNode;
 };
 
+declare type TPortalPlacement = {
+    position: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
+    align: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
+};
+
 declare type TProgressBarLinearProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
     percent: number;
@@ -740,6 +838,27 @@ declare type TTextFieldRootProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: TArrayElement<typeof TEXT_FIELD_SIZES>;
 };
 
+declare type TTooltipContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    title?: string;
+    description?: string;
+    arrowAlign?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
+    arrowPosition?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
+    arrowOffset?: {
+        inline: number;
+        block: number;
+    };
+};
+
+declare type TTooltipRootProps = Omit<React.ComponentProps<typeof TooltipContent>, 'arrowAlign' | 'arrowPosition'> & {
+    children: React.ReactNode;
+    triggerEvent?: TArrayElement<typeof DROPDOWN_TRIGGER_EVENT_LIST>;
+    align?: TArrayElement<typeof DROPDOWN_PORTAL_ALIGN_LIST>;
+    position?: TArrayElement<typeof DROPDOWN_PORTAL_POSITION_LIST>;
+    maxWidth?: number;
+    maxHeight?: number;
+    withoutArrow?: boolean;
+};
+
 declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {
     ref?: React.Ref<TElement>;
 };