@clickhouse/click-ui 0.6.2-rc3 → 0.7.0

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/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/CrossButton/CrossButton.d.ts

@@ -1,3 +1,7 @@
-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"> & {
+export declare const CrossButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<import('styled-components/dist/types').Substitute<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;
+}, 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;
+}>, {
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+}>, never>> & string;

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/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/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/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/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, ...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.7.0",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",