@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

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

@@ -1,2 +1,2 @@
 import { BigStatProps } from './BigStat.types';
-export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, className, style, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1,2 @@
-export declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+import { ButtonHTMLAttributes } from 'react';
+export declare const BaseButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,2 +1,2 @@
 import { CardPromotionProps } from './CardPromotion.types';
-export declare const CardPromotion: ({ label, icon, dismissible, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardPromotion: ({ label, icon, dismissible, className, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,2 +1,2 @@
 import { CardSecondaryProps } from './CardSecondary.types';
-export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, infoIcon, infoAssetSize, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, infoIcon, infoAssetSize, className, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
 import { CodeBlockProps } from './CodeBlock.types';
-export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, className, style, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CodeBlock/InlineCodeBlock.d.ts

@@ -1,2 +1,2 @@
 import { HTMLAttributes } from 'react';
-export declare const InlineCodeBlock: (props: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineCodeBlock: ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/CodeBlock/useColorStyle.d.ts

@@ -1,115 +1,9 @@
+import { CSSProperties } from 'react';
 import { CodeThemeType } from './CodeBlock.types';
-declare const useColorStyle: (defaultTheme?: CodeThemeType) => {
-    hljs: {
-        display: string;
-        overflowX: string;
-        padding: string;
-        color: string;
-        background: string;
-        borderRadius: string;
-        font: string;
-    };
-    'hljs-comment': {
-        color: string;
-    };
-    'hljs-keyword': {
-        color: string;
-    };
-    'hljs-selector-tag': {
-        color: string;
-    };
-    'hljs-meta-keyword': {
-        color: string;
-    };
-    'hljs-doctag': {
-        color: string;
-    };
-    'hljs-section': {
-        color: string;
-    };
-    'hljs-selector-class': {
-        color: string;
-    };
-    'hljs-meta': {
-        color: string;
-    };
-    'hljs-selector-pseudo': {
-        color: string;
-    };
-    'hljs-attr': {
-        color: string;
-    };
-    'hljs-attribute': {
-        color: string;
-    };
-    'hljs-name': {
-        color: string;
-    };
-    'hljs-type': {
-        color: string;
-    };
-    'hljs-number': {
-        color: string;
-    };
-    'hljs-selector-id': {
-        color: string;
-    };
-    'hljs-quote': {
-        color: string;
-    };
-    'hljs-template-tag': {
-        color: string;
-    };
-    'hljs-built_in': {
-        color: string;
-    };
-    'hljs-title': {
-        color: string;
-    };
-    'hljs-literal': {
-        color: string;
-    };
-    'hljs-string': {
-        color: string;
-    };
-    'hljs-regexp': {
-        color: string;
-    };
-    'hljs-symbol': {
-        color: string;
-    };
-    'hljs-variable': {
-        color: string;
-    };
-    'hljs-template-variable': {
-        color: string;
-    };
-    'hljs-link': {
-        color: string;
-    };
-    'hljs-selector-attr': {
-        color: string;
-    };
-    'hljs-meta-string': {
-        color: string;
-    };
-    'hljs-bullet': {
-        color: string;
-    };
-    'hljs-code': {
-        color: string;
-    };
-    'hljs-deletion': {
-        color: string;
-    };
-    'hljs-addition': {
-        color: string;
-    };
-    'hljs-emphasis': {
-        fontStyle: string;
-    };
-    'hljs-strong': {
-        fontWeight: string;
-    };
+declare const useColorStyle: (defaultTheme?: CodeThemeType) => Record<string, CSSProperties>;
+export declare const useNumbersColor: (defaultTheme?: CodeThemeType) => string;
+export declare const useButtonStateColors: () => {
+    success: string;
+    danger: string;
 };
 export default useColorStyle;

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

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { ConfirmationDialogProps } from './ConfirmationDialog.types';
-export declare const ConfirmationDialog: ({ children, disabled, loading, message, onCancel, onConfirm, open, primaryActionLabel, primaryActionType, secondaryActionLabel, showClose, title, ...props }: ConfirmationDialogProps) => ReactElement;
+export declare const ConfirmationDialog: ({ children, className, disabled, loading, message, onCancel, onConfirm, open, primaryActionLabel, primaryActionType, secondaryActionLabel, showClose, title, ...props }: ConfirmationDialogProps) => ReactElement;

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

@@ -14,7 +14,7 @@ export declare const ContextMenu: {
         displayName: string;
     };
     Group: {
-        (props: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: RightMenu.ContextMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Sub: {

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

@@ -1,3 +1,2 @@
-export declare const CrossButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>, "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;
+import { ButtonHTMLAttributes } from 'react';
+export declare const CrossButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -13,11 +13,11 @@ export declare const Dropdown: {
         displayName: string;
     };
     Group: {
-        (props: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, ...props }: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Sub: {
-        ({ ...props }: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+        (props: DropdownMenu.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Item: {

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

@@ -1 +1,2 @@
-export declare const EmptyButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+import { ButtonHTMLAttributes } from 'react';
+export declare const EmptyButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -40,9 +40,9 @@ export interface FileTabsProps extends Omit<ReactSortableProps<ItemInterface>, '
     setList?: (newState: ItemInterface[], sortable: Sortable | null, store: Store) => void;
 }
 export declare const FileTabs: {
-    ({ selectedIndex, children, onReorderTab, onClose: onCloseProp, onSelect: onSelectProp, list: listProp, setList: setListProp, onEnd, direction, group, ...props }: FileTabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selectedIndex, children, onReorderTab, onClose: onCloseProp, onSelect: onSelectProp, list: listProp, setList: setListProp, onEnd, direction, group, className, ...props }: FileTabsProps): import("react/jsx-runtime").JSX.Element;
     Tab: {
-        ({ text, index, icon, onMouseDown: onMouseDownProp, status, testId, preview, ...props }: FileTabProps): import("react/jsx-runtime").JSX.Element;
+        ({ text, index, icon, onMouseDown: onMouseDownProp, status, testId, preview, className, ...props }: FileTabProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
@@ -51,5 +51,5 @@ interface FileTabElementProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     preview?: boolean;
 }
-export declare const FileTabElement: ({ icon, children, active, preview, ...props }: FileTabElementProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FileTabElement: ({ icon, children, active, preview, className, ...props }: FileTabElementProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/FileUpload/FileUpload.stories-common.d.ts

@@ -1 +1,4 @@
-export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { FC, ReactNode } from 'react';
+export declare const Wrapper: FC<{
+    children?: ReactNode;
+}>;

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

@@ -9,19 +9,19 @@ export declare const Flyout: {
         displayName: string;
     };
     Content: {
-        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, hasShadow, onInteractOutside, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showOverlay, children, container, strategy, size, type, closeOnInteractOutside, width, align, hasShadow, onInteractOutside, className, style, ...props }: FlyoutContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Element: {
-        ({ type, ...props }: ElementProps): import("react/jsx-runtime").JSX.Element;
+        ({ type, className, ...props }: ElementProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Header: {
-        ({ title, description, type, children, showClose, showSeparator, ...props }: FlyoutHeaderProps): import("react/jsx-runtime").JSX.Element;
+        ({ title, description, type, children, showClose, showSeparator, className, ...props }: FlyoutHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {
-        ({ align, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
+        ({ align, className, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Close: {
@@ -31,17 +31,19 @@ export declare const Flyout: {
         displayName: string;
     };
     Footer: {
-        (props: FlyoutFooterProps): import("react/jsx-runtime").JSX.Element;
+        ({ type, className, ...props }: FlyoutFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    CodeBlock: ({ statement, language, wrapLines, showLineNumbers, showWrapButton, onCopy, onCopyError, ...props }: FlyoutCodeBlockProps & ElementProps) => import("react/jsx-runtime").JSX.Element;
+    CodeBlock: ({ statement, language, wrapLines, showLineNumbers, showWrapButton, onCopy, onCopyError, className, ...props }: FlyoutCodeBlockProps & ElementProps) => import("react/jsx-runtime").JSX.Element;
 };
 interface ElementProps extends Omit<ContainerProps, 'component' | 'padding' | 'gap' | 'orientation'> {
     type?: FlyoutType;
+    className?: string;
 }
 type FlyoutAlign = 'default' | 'top';
 interface BodyProps extends ContainerProps {
     align?: FlyoutAlign;
+    className?: string;
 }
 interface FlyoutButtonProps extends Omit<ButtonProps, 'children'> {
     children?: never;

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

@@ -36,6 +36,7 @@ interface TitleHeaderProps extends Omit<ContainerProps, 'orientation' | 'justify
     children?: never;
     showClose?: boolean;
     showSeparator?: boolean;
+    className?: string;
 }
 interface ChildrenHeaderProps extends Omit<ContainerProps, 'orientation' | 'justifyContent' | 'alignItems' | 'component' | 'padding' | 'gap' | 'fillWidth'> {
     title?: never;
@@ -43,9 +44,11 @@ interface ChildrenHeaderProps extends Omit<ContainerProps, 'orientation' | 'just
     description?: never;
     showClose?: boolean;
     showSeparator?: boolean;
+    className?: string;
 }
 export type FlyoutHeaderProps = TitleHeaderProps | ChildrenHeaderProps;
 export interface FlyoutFooterProps extends Omit<ContainerProps<'div'>, 'orientation' | 'justifyContent' | 'component' | 'padding' | 'gap'> {
     type?: FlyoutType;
+    className?: string;
 }
 export {};

package/dist/types/components/FormContainer/Error.d.ts

@@ -1 +1,2 @@
-export declare const Error: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { HTMLAttributes } from 'react';
+export declare const Error: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormContainer/FormElementContainer.d.ts

@@ -1 +1,2 @@
-export declare const FormElementContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { HTMLAttributes } from 'react';
+export declare const FormElementContainer: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormContainer/FormRoot.d.ts

@@ -1,5 +1,7 @@
-export declare const FormRoot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $orientation?: "horizontal" | "vertical";
-    $dir?: "start" | "end";
+import { HTMLAttributes } from 'react';
+export interface FormRootProps extends HTMLAttributes<HTMLDivElement> {
+    $orientation?: 'horizontal' | 'vertical';
+    $dir?: 'start' | 'end';
     $addLabelPadding?: boolean;
-}>> & string;
+}
+export declare const FormRoot: ({ $orientation, $dir, $addLabelPadding, className, ...props }: FormRootProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,29 @@
-export declare const GenericMenuPanel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $type: "popover" | "dropdown-menu" | "context-menu";
-    $showArrow?: boolean;
-}>> & string;
-export declare const GenericPopoverMenuPanel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $type: "popover" | "hover-card";
-    $showArrow?: boolean;
-}>> & string;
-export declare const Arrow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
-export declare const GenericMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $type?: "default" | "danger";
-}>> & string;
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+type GenericMenuPanelOwnProps = {
+    type: 'popover' | 'dropdown-menu' | 'context-menu';
+    showArrow?: boolean;
+};
+type GenericMenuPanelComponent = <T extends ElementType = 'div'>(props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuPanelOwnProps | 'as'> & GenericMenuPanelOwnProps & {
+    as?: T;
+}) => ReactNode;
+export declare const GenericMenuPanel: GenericMenuPanelComponent;
+type GenericPopoverMenuPanelOwnProps = {
+    type: 'popover' | 'hover-card';
+    showArrow?: boolean;
+};
+type GenericPopoverMenuPanelComponent = <T extends ElementType = 'div'>(props: Omit<ComponentPropsWithRef<T>, keyof GenericPopoverMenuPanelOwnProps | 'as'> & GenericPopoverMenuPanelOwnProps & {
+    as?: T;
+}) => ReactNode;
+export declare const GenericPopoverMenuPanel: GenericPopoverMenuPanelComponent;
+type ArrowComponent = <T extends ElementType = 'svg'>(props: Omit<ComponentPropsWithRef<T>, 'as'> & {
+    as?: T;
+}) => ReactNode;
+export declare const Arrow: ArrowComponent;
+type GenericMenuItemOwnProps = {
+    type?: 'default' | 'danger';
+};
+type GenericMenuItemComponent = <T extends ElementType = 'div'>(props: Omit<ComponentPropsWithRef<T>, keyof GenericMenuItemOwnProps | 'as'> & GenericMenuItemOwnProps & {
+    as?: T;
+}) => ReactNode;
+export declare const GenericMenuItem: GenericMenuItemComponent;
+export {};

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

@@ -1 +1,9 @@
-export declare const GridCenter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+import { ComponentProps, ElementType, ReactNode } from 'react';
+interface GridCenterOwnProps {
+    /** Render as a different element/component (mirrors styled-components `as`). */
+    as?: ElementType;
+}
+export type GridCenterProps<T extends ElementType = 'div'> = Omit<ComponentProps<T>, keyof GridCenterOwnProps> & GridCenterOwnProps;
+type GridCenterPolymorphicComponent = <T extends ElementType = 'div'>(props: GridCenterProps<T>) => ReactNode;
+export declare const GridCenter: GridCenterPolymorphicComponent;
+export {};

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

@@ -4,6 +4,9 @@ export type IconButtonSize = 'default' | 'sm' | 'xs';
 export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
     size?: 'default' | 'sm' | 'xs';
     disabled?: boolean;
+    /** The visual style variant of the button */
     type?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'info';
+    /** Used for native button type attribute  */
+    htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     icon: ImageName;
 }

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ComponentProps, ElementType, HTMLAttributes, InputHTMLAttributes, ReactNode, SVGProps, TextareaHTMLAttributes } from 'react';
 export interface WrapperProps {
     className?: string;
     id: string;
@@ -12,20 +12,24 @@ export interface WrapperProps {
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
 }
 export declare const InputWrapper: ({ className, id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
-export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+interface InputElementOwnProps {
     $hasStartContent?: boolean;
     $hasEndContent?: boolean;
-}>> & string;
-export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$hasStartContent" | "$hasEndContent"> & {
+    /** Render as a different element/component (mirrors styled-components `as`). */
+    as?: ElementType;
+}
+export type InputElementProps<T extends ElementType = 'input'> = Omit<ComponentProps<T>, keyof InputElementOwnProps> & InputElementOwnProps;
+type InputElementPolymorphicComponent = <T extends ElementType = 'input'>(props: InputElementProps<T>) => ReactNode;
+export declare const InputElement: InputElementPolymorphicComponent;
+export interface NumberInputElementProps extends InputHTMLAttributes<HTMLInputElement> {
     $hasStartContent?: boolean;
     $hasEndContent?: boolean;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | 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<HTMLInputElement> | null | undefined;
-}, {
     $hideControls?: boolean;
-}>> & string;
-export declare const TextAreaElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
-export declare const InputStartContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const InputEndContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}
+export declare const NumberInputElement: import('react').ForwardRefExoticComponent<NumberInputElementProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const TextAreaElement: import('react').ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconWrapper: ({ className, ...props }: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputStartContent: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputEndContent: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,39 +1,2 @@
-import { Orientation } from '../../types';
-import { CursorOptions } from './Panel.types';
-import { HTMLAttributes } from 'react';
-export type PanelPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type PanelColor = 'default' | 'muted' | 'transparent';
-export type PanelRadii = 'none' | 'sm' | 'md' | 'lg';
-type AlignItemsOption = 'start' | 'center' | 'end';
-export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
-    /** Alignment of items along the cross axis */
-    alignItems?: AlignItemsOption;
-    /** The content to display inside the panel */
-    children?: React.ReactNode;
-    /** The background color variant of the panel */
-    color?: PanelColor;
-    /** The cursor style when hovering over the panel */
-    cursor?: CursorOptions;
-    /** Whether the panel should fill the full height of its container */
-    fillHeight?: boolean;
-    /** Whether the panel should fill the full width of its container */
-    fillWidth?: boolean;
-    /** The gap between child elements */
-    gap?: PanelPadding;
-    /** Whether to show a border around the panel */
-    hasBorder?: boolean;
-    /** Whether to show a shadow on the panel */
-    hasShadow?: boolean;
-    /** Fixed height of the panel */
-    height?: string;
-    /** The orientation of content flow - horizontal or vertical */
-    orientation?: Orientation;
-    /** The padding inside the panel */
-    padding?: PanelPadding;
-    /** The border radius of the panel corners */
-    radii?: PanelRadii;
-    /** Fixed width of the panel */
-    width?: string;
-}
-export declare const Panel: ({ alignItems, children, color, cursor, fillHeight, fillWidth, gap, hasBorder, hasShadow, height, orientation, padding, radii, width, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { PanelProps } from './Panel.types';
+export declare const Panel: ({ alignItems, children, color, cursor, fillHeight, fillWidth, gap, hasBorder, hasShadow, height, orientation, padding, radii, width, className, style, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -15,9 +15,9 @@ export interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, '
     error?: ReactNode;
 }
 export declare const RadioGroup: {
-    ({ children, inline, orientation, dir, error, itemDir, label, disabled, id, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, inline, orientation, dir, error, itemDir, label, disabled, id, className, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
     Item: {
-        ({ id, label, value, disabled, required, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ id, label, value, disabled, required, className, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/types/components/Select/common/SelectComponents.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes } from 'react';
+import { Content, Trigger } from '@radix-ui/react-popover';
+export declare const SelectPopoverRoot: import('react').FC<import('@radix-ui/react-popover').PopoverProps>;
+export declare const SelectValue: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+type StyledSelectTriggerProps = ComponentProps<typeof Trigger> & {
+    $error: boolean;
+};
+export declare const StyledSelectTrigger: import('react').ForwardRefExoticComponent<Omit<StyledSelectTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+type SelectPopoverContentProps = ComponentProps<typeof Content> & {
+    $useFullWidthItems: boolean;
+    $itemCharacterLimit?: string;
+};
+export declare const SelectPopoverContent: import('react').ForwardRefExoticComponent<Omit<SelectPopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SearchBarContainer: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    $showSearch: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SearchBar: import('react').ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    $showSearch: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;
+export declare const SelectList: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectListContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    $maxHeight?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const HiddenSelectElement: import('react').ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & import('react').RefAttributes<HTMLSelectElement>>;
+export declare const SelectGroupContainer: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupName: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectGroupContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectNoDataContainer: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    $clickable: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectItemDescriptionText: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const selectStyles: CSSModuleClasses;
+export {};

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

@@ -1,2 +1,2 @@
 import { SplitButtonProps } from './SplitButton.types';
-export declare const SplitButton: ({ type, disabled, menu, dir, open, defaultOpen, onOpenChange, modal, side, fillWidth, children, icon, iconDir, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitButton: ({ type, htmlType, disabled, menu, dir, open, defaultOpen, onOpenChange, modal, side, fillWidth, children, icon, iconDir, className, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,7 +23,10 @@ type SubMenu = Omit<MenuItem, 'type' | 'items'> & {
 };
 export type Menu = SubMenu | MenuGroup | MenuItem;
 export interface SplitButtonProps extends DropdownMenuProps, Omit<HTMLAttributes<HTMLButtonElement>, 'dir' | 'style'> {
+    /** The visual style variant of the button */
     type?: ButtonType;
+    /** Used for native button type attribute on the primary action button */
+    htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     disabled?: boolean;
     fillWidth?: boolean;
     menu: Array<Menu>;

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

@@ -1,7 +1,7 @@
 import { ToastContextProps, ToastProps, ToastAlignment } from './Toast.types';
 import * as RadixUIToast from '@radix-ui/react-toast';
 export declare const ToastContext: import('react').Context<ToastContextProps>;
-export declare const Toast: ({ type, toastType, title, description, actions, duration, onClose, ...props }: ToastProps & {
+export declare const Toast: ({ type, toastType, title, description, actions, duration, onClose, className, ...props }: ToastProps & {
     onClose: (open: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface ToastProviderProps extends RadixUIToast.ToastProviderProps {

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

@@ -7,7 +7,7 @@ export declare const Tooltip: {
         displayName: string;
     };
     Content: {
-        ({ showArrow, children, sideOffset, maxWidth, container, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ showArrow, children, sideOffset, maxWidth, className, style, container, ...props }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

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

@@ -1,8 +1,8 @@
 import { VerticalStepperProps, VerticalStepProps } from './VerticalStepper.types';
 export declare const VerticalStepper: {
-    ({ children, type, ...props }: VerticalStepperProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, type, className, ...props }: VerticalStepperProps): import("react/jsx-runtime").JSX.Element;
     Step: {
-        ({ status, children, label, collapsed, disabled, ...props }: VerticalStepProps): import("react/jsx-runtime").JSX.Element;
+        ({ status, children, label, collapsed, disabled, className, ...props }: VerticalStepProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "v0.6.2-rc3",
+  "version": "0.8.0",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",