@clickhouse/click-ui 0.0.40 → 0.0.42

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

@@ -1,6 +1,12 @@
-export interface ButtonGroupProps {
-    labels: string[];
-    activeIndex?: number;
-    onClick?: (index: number) => void;
+import { HTMLAttributes, ReactNode } from "react";
+export interface ButtonGroupElementProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+    value: string;
+    label?: ReactNode;
+    fillWidth?: boolean;
 }
-export declare const ButtonGroup: ({ labels, activeIndex, onClick }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    options: Array<ButtonGroupElementProps>;
+    selected?: string;
+    onClick?: (value: string) => void;
+}
+export declare const ButtonGroup: ({ options, selected, onClick, ...props }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,14 @@
 import { HTMLAttributes } from "react";
 export type CodeThemeType = "light" | "dark";
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onCopy"> {
     language?: string;
     children: string;
     theme?: CodeThemeType;
     showLineNumbers?: boolean;
     showWrapButton?: boolean;
     wrapLines?: boolean;
+    onCopy?: (value: string) => void | Promise<void>;
+    onCopyError?: (error: string) => void | Promise<void>;
 }
-export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/EllipsisContent/EllipsisContent.d.ts

@@ -1,2 +1,5 @@
-import { HTMLAttributes } from "react";
-export declare const EllipsisContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLElement>>;
+import { ElementType } from "react";
+export interface EllipsisContentProps<T extends ElementType> {
+    component?: T;
+}
+export declare const EllipsisContent: import("react").ForwardRefExoticComponent<Omit<EllipsisContentProps<ElementType> & Omit<any, "ref">, "ref"> & import("react").RefAttributes<unknown>>;

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

@@ -1,8 +1,9 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes, ReactNode } from "react";
 import { DialogProps, DialogTriggerProps, DialogContentProps as RadixDialogContentProps } from "@radix-ui/react-dialog";
+import { ButtonProps } from "..";
 export type FlyoutProps = DialogProps;
 export declare const Flyout: {
-    (props: FlyoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ modal, ...props }: FlyoutProps): import("react/jsx-runtime").JSX.Element;
     Trigger: {
         ({ children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -20,15 +21,21 @@ export declare const Flyout: {
         displayName: string;
     };
     Body: {
-        (props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        ({ align, ...props }: BodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Close: {
+        ({ children, ...props }: FlyoutButtonProps | {
+            children?: ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Footer: {
-        ({ cancelText, showClose, children, ...props }: FlyoutFooterProps): import("react/jsx-runtime").JSX.Element;
+        (props: FlyoutFooterProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
-type FlyoutSizeType = "narrow" | "wide";
+type FlyoutSizeType = "default" | "narrow" | "wide";
 type Strategy = "relative" | "absolute" | "fixed";
 export interface DialogContentProps extends RadixDialogContentProps {
     container?: HTMLElement | null;
@@ -48,8 +55,12 @@ interface ChildrenHeaderProps extends HTMLAttributes<HTMLDivElement> {
     description?: never;
 }
 export type FlyoutHeaderProps = TitleHeaderProps | ChildrenHeaderProps;
-export interface FlyoutFooterProps extends HTMLAttributes<HTMLDivElement> {
-    cancelText?: string;
-    showClose?: boolean;
+type FlyoutAlign = "default" | "top";
+interface BodyProps extends HTMLAttributes<HTMLDivElement> {
+    align?: FlyoutAlign;
+}
+export type FlyoutFooterProps = HTMLAttributes<HTMLDivElement>;
+interface FlyoutButtonProps extends Omit<ButtonProps, "children"> {
+    children?: never;
 }
 export {};

package/dist/components/Link/Link.d.ts

@@ -14,5 +14,5 @@ export interface LinkProps<T extends ElementType> {
     component?: T;
 }
 /** Component for linking to other pages or sections from with body text */
-export declare const Link: <T extends ElementType<any> = "a">({ size, weight, className, href, onClick, target, rel, hasIcon, children, component, ...props }: LinkProps<T> & ComponentPropsWithoutRef<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: <T extends ElementType = "a">({ size, weight, className, href, onClick, target, rel, hasIcon, children, component, ...props }: LinkProps<T> & ComponentPropsWithoutRef<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from "./types";
-export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, onCreateOption: onCreateOptionProp, customText, options, showCheck, sortable, placeholder, multiple, showSearch, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, onCreateOption: onCreateOptionProp, customText, options, showCheck, sortable, placeholder, multiple, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -62,6 +62,7 @@ interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivE
     multiple?: boolean;
     showSearch?: boolean;
     customText?: string;
+    container?: HTMLElement;
 }
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;
 export type SelectContainerProps = SelectOptionProp & InternalSelectProps;

package/dist/components/Typography/Text/Text.d.ts

@@ -279,5 +279,7 @@ declare const Text: import("styled-components").IStyledComponent<"web", {
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLParagraphElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLParagraphElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLParagraphElement> | undefined;
+    ref?: import("react").Ref<HTMLParagraphElement> | undefined;
+    key?: import("react").Key | null | undefined;
 }>;
 export { Text };

package/dist/components/Typography/Title/Title.d.ts

@@ -10,4 +10,4 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
     type: TitleType;
 }
 /** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */
-export declare const Title: ({ size, family, type, color, children, ...props }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: import("react").ForwardRefExoticComponent<TitleProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/styles/types.d.ts

@@ -604,11 +604,15 @@ export interface Theme {
                         "hover": string;
                         "active": string;
                         "panel": string;
+                        "disabled": string;
+                        "disabled-active": string;
                     };
                     "text": {
                         "default": string;
                         "hover": string;
                         "active": string;
+                        "disabled": string;
+                        "disabled-active": string;
                     };
                     "stroke": {
                         "panel": string;
@@ -1865,12 +1869,6 @@ export interface Theme {
                     "active": string;
                     "global": string;
                 };
-                "stroke": {
-                    "default": string;
-                    "hover": string;
-                    "active": string;
-                    "global": string;
-                };
                 "color": {
                     "background": {
                         "default": string;

package/dist/styles/variables.classic.json.d.ts

@@ -222,12 +222,16 @@ declare const _default: {
             "default": "lch(100 0 0)",
             "hover": "lch(97.4 1.44 272)",
             "active": "lch(95.3 1.54 272)",
-            "panel": "lch(100 0 0)"
+            "panel": "lch(100 0 0)",
+            "disabled": "#dfdfdf",
+            "disabled-active": "lch(97.9 0 0)"
           },
           "text": {
             "default": "#161517",
             "hover": "#161517",
-            "active": "#151515"
+            "active": "#151515",
+            "disabled": "#a0a0a0",
+            "disabled-active": "#808080"
           },
           "stroke": {
             "panel": "lch(91.6 1.1 266)"

package/dist/styles/variables.dark.json.d.ts

@@ -324,13 +324,17 @@ declare const _default: {
           "background": {
             "default": "lch(18.2 0 0)",
             "hover": "lch(22.8 0 0)",
-            "active": "#414141",
-            "panel": "lch(18.2 0 0)"
+            "active": "#1F1F1C",
+            "panel": "lch(18.2 0 0)",
+            "disabled": "#414141",
+            "disabled-active": "lch(22 0 0)"
           },
           "text": {
             "default": "#ffffff",
             "hover": "#ffffff",
-            "active": "#ffffff"
+            "active": "#ffffff",
+            "disabled": "#808080",
+            "disabled-active": "#808080"
           },
           "stroke": {
             "panel": "lch(27.5 0 0 / 0.3)"

package/dist/styles/variables.json.d.ts

@@ -603,12 +603,16 @@ declare const _default: {
             "default": "lch(94.5 0.72 266)",
             "hover": "lch(97.4 1.44 272)",
             "active": "#ffffff",
-            "panel": "lch(94.5 0.72 266)"
+            "panel": "lch(94.5 0.72 266)",
+            "disabled": "#dfdfdf",
+            "disabled-active": "lch(88.9 0 0)"
           },
           "text": {
             "default": "#161517",
             "hover": "#161517",
-            "active": "#151515"
+            "active": "#151515",
+            "disabled": "#a0a0a0",
+            "disabled-active": "#808080"
           },
           "stroke": {
             "panel": "lch(91.6 1.1 266)"
@@ -761,7 +765,7 @@ declare const _default: {
           "background": {
             "default": "#ffffff",
             "hover": "#f6f7fa",
-            "active": "lch(92.4 1.49 272)",
+            "active": "lch(95 0 0)",
             "disabled": "#dfdfdf"
           },
           "title": {
@@ -1865,12 +1869,6 @@ declare const _default: {
           "active": "2px",
           "global": "1px"
         },
-        "stroke": {
-          "default": "1px solid rgba(0,0,0,0)",
-          "hover": "1px solid rgba(0,0,0,0)",
-          "active": "2px solid #151515",
-          "global": "1px solid lch(91.6 1.1 266)"
-        },
         "color": {
           "background": {
             "default": "rgba(0,0,0,0)",

package/dist/styles/variables.light.json.d.ts

@@ -325,12 +325,16 @@ declare const _default: {
             "default": "lch(94.5 0.72 266)",
             "hover": "lch(97.4 1.44 272)",
             "active": "#ffffff",
-            "panel": "lch(94.5 0.72 266)"
+            "panel": "lch(94.5 0.72 266)",
+            "disabled": "#dfdfdf",
+            "disabled-active": "lch(88.9 0 0)"
           },
           "text": {
             "default": "#161517",
             "hover": "#161517",
-            "active": "#151515"
+            "active": "#151515",
+            "disabled": "#a0a0a0",
+            "disabled-active": "#808080"
           },
           "stroke": {
             "panel": "lch(91.6 1.1 266)"
@@ -397,7 +401,7 @@ declare const _default: {
           "background": {
             "default": "#ffffff",
             "hover": "#f6f7fa",
-            "active": "lch(92.4 1.49 272)",
+            "active": "lch(95 0 0)",
             "disabled": "#dfdfdf"
           },
           "title": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",