@clickhouse/click-ui 0.6.1-rc2 → 0.6.2-rc1

package/dist/types/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
 import { AccordionProps } from './Accordion.types';
-declare const SidebarAccordion: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
-declare const AccordionToExport: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<AccordionProps, never>> & string & Omit<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
-export { AccordionToExport as Accordion, SidebarAccordion };
+declare const Accordion: ({ title, size, color, icon, iconSize, gap, children, fillWidth, className, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+declare const SidebarAccordion: ({ className, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, SidebarAccordion };

package/dist/types/components/Assets/Icons/Dollar.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Dollar: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Dollar;

package/dist/types/components/Assets/Icons/Pin.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Pin: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Pin;

package/dist/types/components/Assets/Icons/Unpin.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Unpin: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Unpin;

package/dist/types/components/Assets/Icons/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'collapse-all' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'expand-all' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popin' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
+export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'collapse-all' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dollar' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'expand-all' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pin' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popin' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'unpin' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
 export interface IconProps extends SVGAttributes<SVGElement> {
     name: IconName;
     theme?: ThemeName;

package/dist/types/components/AutoComplete/AutoComplete.d.ts

@@ -50,6 +50,7 @@ interface Props extends PopoverProps, Omit<DivProps, 'onChange' | 'dir' | 'onSel
     placeholder?: string;
     onOpenChange?: (open: boolean) => void;
     label?: ReactNode;
+    container?: HTMLElement | null;
     error?: ReactNode;
     disabled?: boolean;
     dir?: 'start' | 'end';
@@ -59,7 +60,7 @@ interface Props extends PopoverProps, Omit<DivProps, 'onChange' | 'dir' | 'onSel
 export type AutoCompleteProps = (SelectOptionType & Props) | (SelectChildrenType & Props);
 export declare const SelectPopoverRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<PopoverProps, never>> & string & Omit<import('react').FC<PopoverProps>, keyof import('react').Component<any, {}, any>>;
 export declare const AutoComplete: {
-    ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
+    ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, container, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
     Group: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
     Item: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
 };

package/dist/types/components/Button/Button.d.ts

@@ -1,25 +1,2 @@
-import { IconName } from '../Icon';
-export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
-type Alignment = 'center' | 'left';
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    /** The visual style variant of the button */
-    type?: ButtonType;
-    /** Whether the button is disabled */
-    disabled?: boolean;
-    /** The text label to display in the button */
-    label?: string;
-    /** Icon to display on the left side of the label */
-    iconLeft?: IconName;
-    /** Icon to display on the right side of the label */
-    iconRight?: IconName;
-    /** Alignment of the button content */
-    align?: Alignment;
-    /** Whether the button should fill the full width of its container */
-    fillWidth?: boolean;
-    /** Whether to show a loading state */
-    loading?: boolean;
-    /** Whether the button should be focused on mount */
-    autoFocus?: boolean;
-}
+import { ButtonProps } from './Button.types';
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/types/components/Button/Button.types.d.ts

@@ -2,7 +2,10 @@ import { IconName } from '../Icon';
 export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
 export type Alignment = 'center' | 'left';
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant of the button */
     type?: ButtonType;
+    /** Used for native button type attribute  */
+    htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     disabled?: boolean;
     label?: string;
     iconLeft?: IconName;

package/dist/types/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,10 +1,14 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { IconName } from '../Icon';
 export type ButtonGroupType = 'default' | 'borderless';
 export type SelectionValue = string | Set<string>;
+/** Props for each button in the group. When `iconOnly` is true, set `aria-label` on each option. */
 export interface ButtonGroupElementProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     value: string;
     label?: ReactNode;
+    icon?: IconName;
 }
+/** When `iconOnly` is true, provide `aria-label` on the group and each option. */
 export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
     options: Array<ButtonGroupElementProps>;
     selected?: SelectionValue;
@@ -12,5 +16,6 @@ export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, '
     onClick?: (value: string, selected: SelectionValue) => void;
     fillWidth?: boolean;
     type?: ButtonGroupType;
+    iconOnly?: boolean;
     multiple?: boolean;
 }

package/dist/types/components/ButtonGroup/index.d.ts

@@ -1,2 +1,2 @@
 export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupElementProps, ButtonGroupProps, SelectionValue, } from './ButtonGroup.types';
+export type { ButtonGroupElementProps, ButtonGroupProps, ButtonGroupType, SelectionValue, } from './ButtonGroup.types';

package/dist/types/components/Collapsible/Collapsible.d.ts

@@ -3,14 +3,14 @@ import { ImageName } from '../Icon';
 import { HorizontalDirection } from '../../types';
 import { CollapsibleProps } from './Collapsible.types';
 export declare const Collapsible: {
-    ({ open: openProp, onOpenChange: onOpenChangeProp, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    ({ open: openProp, onOpenChange: onOpenChangeProp, children, className, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
     Header: import('react').ForwardRefExoticComponent<CollapsipleHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
     Trigger: {
-        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, className, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {
-        ({ indicatorDir, ...props }: HTMLAttributes<HTMLDivElement> & {
+        ({ indicatorDir, className, ...props }: HTMLAttributes<HTMLDivElement> & {
             indicatorDir?: HorizontalDirection;
         }): import("react/jsx-runtime").JSX.Element | undefined;
         displayName: string;

package/dist/types/components/ContextMenu/ContextMenu.d.ts

@@ -10,7 +10,7 @@ export declare const ContextMenu: {
         displayName: string;
     };
     Content: {
-        ({ sub, children, showArrow, side, align, ...props }: ContextMenuContentProps | ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ sub, children, container, showArrow, side, align, ...props }: ContextMenuContentProps | ContextMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Group: {
@@ -38,8 +38,10 @@ type DeprecatedFields = {
 };
 type ContextMenuContentProps = RightMenu.ContextMenuContentProps & {
     sub?: true;
+    container?: HTMLElement | null;
 } & ArrowProps & DeprecatedFields;
 type ContextMenuSubContentProps = RightMenu.ContextMenuSubContentProps & {
     sub?: never;
+    container?: HTMLElement | null;
 } & ArrowProps & DeprecatedFields;
 export default ContextMenu;

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,6 +1,7 @@
 import { Timezone } from './utils';
 export interface DatePickerProps {
     allowOnlyDatesList?: Array<Date>;
+    container?: HTMLElement | null;
     date?: Date;
     disabled?: boolean;
     futureDatesDisabled?: boolean;
@@ -9,4 +10,4 @@ export interface DatePickerProps {
     responsivePositioning?: boolean;
     timezone?: Timezone;
 }
-export declare const DatePicker: ({ allowOnlyDatesList, date, disabled, futureDatesDisabled, onSelectDate, placeholder, responsivePositioning, timezone, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ allowOnlyDatesList, container, date, disabled, futureDatesDisabled, onSelectDate, placeholder, responsivePositioning, timezone, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -3,7 +3,7 @@ import { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.ty
 export declare const Dialog: {
     ({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
-        ({ children, asChild, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, asChild, className, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Close: {
@@ -11,7 +11,7 @@ export declare const Dialog: {
         displayName: string;
     };
     Content: {
-        ({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, className, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -9,7 +9,7 @@ export declare const Dropdown: {
         displayName: string;
     };
     Content: {
-        ({ sub, children, showArrow, responsivePositioning, ...props }: DropdownContentProps | DropdownSubContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ sub, children, container, showArrow, responsivePositioning, ...props }: DropdownContentProps | DropdownSubContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Group: {
@@ -40,10 +40,12 @@ export type ArrowProps = {
 };
 interface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {
     children?: ReactNode;
+    container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
 interface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubContentProps {
     children?: ReactNode;
+    container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
 type DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;

package/dist/types/components/Flyout/Flyout.d.ts

@@ -9,7 +9,7 @@ export declare const Flyout: {
         displayName: string;
     };
     Content: {
-        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, onInteractOutside, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, hasShadow, onInteractOutside, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Element: {

package/dist/types/components/Flyout/Flyout.types.d.ts

@@ -20,6 +20,8 @@ export interface FlyoutContentProps extends HTMLAttributes<HTMLDivElement> {
     closeOnInteractOutside?: boolean;
     width?: string;
     align?: FlyoutAlignmentType;
+    /** Whether to show a shadow on the flyout */
+    hasShadow?: boolean;
     onInteractOutside?: (event: CustomEvent) => void;
     onEscapeKeyDown?: (event: KeyboardEvent) => void;
     onPointerDownOutside?: (event: CustomEvent) => void;

package/dist/types/components/HoverCard/HoverCard.d.ts

@@ -9,7 +9,7 @@ export interface HoverCardContentProps extends RadixHoverCard.HoverCardContentPr
 export declare const HoverCard: {
     ({ children, ...props }: RadixHoverCard.HoverCardProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
-        ({ children, ...props }: RadixHoverCard.HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: RadixHoverCard.HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: {

package/dist/types/components/MultiAccordion/MultiAccordion.d.ts

@@ -25,9 +25,9 @@ interface MultiAccordionCommonProps {
 }
 export type MultiAccordionProps = MultiAccordionCommonProps & (Omit<RadixAccordion.AccordionMultipleProps, 'children'> | Omit<RadixAccordion.AccordionSingleProps, 'children'>);
 export declare const MultiAccordion: {
-    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, className, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
     Item: {
-        ({ value, title, color, icon, iconSize, gap, children, isCompleted, ...props }: MultiAccordionItemProps): ReactElement;
+        ({ value, title, color, icon, iconSize, gap, children, isCompleted, className, ...props }: MultiAccordionItemProps): ReactElement;
         displayName: string;
     };
 };

package/dist/types/components/SidebarNavigationItem/SidebarNavigationItem.d.ts

@@ -1,8 +1,12 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { SidebarNavigationItemProps } from './SidebarNavigationItem.types';
-declare const SidebarNavigationItem: import('react').ForwardRefExoticComponent<SidebarNavigationItemProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const SidebarItemWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export interface SidebarItemWrapperProps<T extends ElementType = 'div'> {
+    as?: T;
     $collapsible?: boolean;
-    $level: number;
-    $type: "main" | "sqlSidebar";
-}>> & string;
+    $level?: number;
+    $type?: 'main' | 'sqlSidebar';
+}
+type SidebarItemWrapperComponent = <T extends ElementType = 'div'>(props: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> & SidebarItemWrapperProps<T>) => ReactNode;
+export declare const SidebarItemWrapper: SidebarItemWrapperComponent;
+declare const SidebarNavigationItem: import('react').ForwardRefExoticComponent<SidebarNavigationItemProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SidebarNavigationItem };

package/dist/types/components/SidebarNavigationTitle/SidebarNavigationTitle.d.ts

@@ -1,6 +1,11 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';
-export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, type, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SidebarTitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export interface SidebarTitleWrapperProps<T extends ElementType = 'button'> {
+    as?: T;
     $collapsible?: boolean;
-    $type: "main" | "sqlSidebar";
-}>> & string;
+    $type?: 'main' | 'sqlSidebar';
+}
+type SidebarTitleWrapperComponent = <T extends ElementType = 'button'>(props: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> & SidebarTitleWrapperProps<T>) => ReactNode;
+export declare const SidebarTitleWrapper: SidebarTitleWrapperComponent;
+export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, type, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Tabs/Tabs.d.ts

@@ -2,26 +2,16 @@ import { TabsProps } from './Tabs.types';
 import * as RadixTabs from '@radix-ui/react-tabs';
 declare const Tabs: {
     ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+    TriggersList: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+declare const FullWidthTabs: {
+    ({ className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+        width?: string;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    TriggersList: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 };
-declare const FullWidthTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<TabsProps, never>> & string & Omit<{
-    ({ defaultValue, children, ariaLabel, onValueChange, ...delegated }: TabsProps): import("react/jsx-runtime").JSX.Element;
-    TriggersList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsListProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-    Trigger: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-    Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-    }, never>> & string & Omit<import('react').ForwardRefExoticComponent<RadixTabs.TabsContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
-}, keyof import('react').Component<any, {}, any>>;
 export { Tabs, FullWidthTabs };

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { TooltipProps } from './Tooltip.types';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { TooltipContentProps, TooltipProps } from './Tooltip.types';
 export declare const Tooltip: {
     ({ children, open, disabled, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
@@ -8,14 +7,7 @@ export declare const Tooltip: {
         displayName: string;
     };
     Content: {
-        ({ showArrow, children, sideOffset, maxWidth, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showArrow, children, sideOffset, maxWidth, container, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
-interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
-    /** Whether to show an arrow pointing to the trigger element */
-    showArrow?: boolean;
-    /** Maximum width of the tooltip content */
-    maxWidth?: string;
-}
-export {};

package/dist/types/components/Tooltip/Tooltip.types.d.ts

@@ -5,4 +5,5 @@ export interface TooltipProps extends RadixTooltip.TooltipProps {
 export interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
     showArrow?: boolean;
     maxWidth?: string;
+    container?: HTMLElement | null;
 }

package/dist/types/index.d.ts

@@ -131,7 +131,8 @@ export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { VerticalStepper } from './components/VerticalStepper';
 export type { VerticalStepperProps, VerticalStepProps, } from './components/VerticalStepper';
-export { ClickUIProvider, ThemeProvider } from './providers';
+export { ClickUIProvider, PortalProvider, ThemeProvider, usePortalContainer, useResolvedPortalContainer, } from './providers';
+export type { PortalContainer, PortalProviderProps } from './providers';
 export { THEMES, themes } from './theme/theme.core';
 export type { ThemeName, Theme } from './theme/theme.types';
 export { isValidThemeName, getFallbackThemeName, getDefaultThemeName, getAvailableThemeNames, } from './theme/theme.utils';

package/dist/types/providers/PortalContext.d.ts

@@ -0,0 +1,4 @@
+export type PortalContainer = HTMLElement | null;
+export declare const PortalContainerContext: import('react').Context<PortalContainer>;
+export declare const usePortalContainer: () => PortalContainer;
+export declare const useResolvedPortalContainer: (container?: PortalContainer) => PortalContainer;

package/dist/types/providers/PortalProvider.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from 'react';
+import { PortalContainer } from './PortalContext';
+export interface PortalProviderProps {
+    children: ReactNode;
+    container?: PortalContainer;
+}
+export declare const PortalProvider: ({ children, container, }: PortalProviderProps) => ReactElement;

package/dist/types/providers/index.d.ts

@@ -1,2 +1,6 @@
 export { ClickUIProvider } from './ClickUIProvider';
+export { PortalProvider } from './PortalProvider';
+export { usePortalContainer, useResolvedPortalContainer } from './PortalContext';
+export type { PortalContainer } from './PortalContext';
+export type { PortalProviderProps } from './PortalProvider';
 export { ThemeProvider } from './ThemeProvider';

package/dist/types/theme/theme.core.d.ts

@@ -772,6 +772,21 @@ export declare const themes: {
                                 x: string;
                             };
                         };
+                        icon: {
+                            default: {
+                                y: string;
+                                x: string;
+                            };
+                            borderless: {
+                                y: string;
+                                x: string;
+                            };
+                        };
+                    };
+                    icon: {
+                        size: {
+                            all: string;
+                        };
                     };
                     color: {
                         background: {
@@ -4589,6 +4604,21 @@ export declare const themes: {
                                 x: string;
                             };
                         };
+                        icon: {
+                            default: {
+                                y: string;
+                                x: string;
+                            };
+                            borderless: {
+                                y: string;
+                                x: string;
+                            };
+                        };
+                    };
+                    icon: {
+                        size: {
+                            all: string;
+                        };
                     };
                     color: {
                         background: {

package/dist/types/theme/tokens/variables.dark.d.ts

@@ -769,6 +769,21 @@ declare const theme: {
                             x: string;
                         };
                     };
+                    icon: {
+                        default: {
+                            y: string;
+                            x: string;
+                        };
+                        borderless: {
+                            y: string;
+                            x: string;
+                        };
+                    };
+                };
+                icon: {
+                    size: {
+                        all: string;
+                    };
                 };
                 color: {
                     background: {

package/dist/types/theme/tokens/variables.light.d.ts

@@ -769,6 +769,21 @@ declare const theme: {
                             x: string;
                         };
                     };
+                    icon: {
+                        default: {
+                            y: string;
+                            x: string;
+                        };
+                        borderless: {
+                            y: string;
+                            x: string;
+                        };
+                    };
+                };
+                icon: {
+                    size: {
+                        all: string;
+                    };
                 };
                 color: {
                     background: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "v0.6.1-rc2",
+  "version": "v0.6.2-rc1",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -399,7 +399,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@h6s/calendar": "2.0.1",
+    "@h6s/calendar": "2.2.0",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-avatar": "1.1.1",
     "@radix-ui/react-checkbox": "1.1.2",
@@ -452,7 +452,6 @@
     "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^13.3.4",
-    "date-fns": "4.1.0",
     "eslint": "^9",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",