@clickhouse/click-ui 0.0.0-alpha

package/dist/components/Input/NumberField.d.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent, InputHTMLAttributes } from "react";
+import { WrapperProps } from "./InputWrapper";
+export interface NumberFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    type?: "number";
+    loading: boolean;
+    onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/NumberField.stories.d.ts

@@ -0,0 +1,34 @@
+import { NumberFieldProps } from "./NumberField";
+declare const _default: {
+    component: ({ value: valueProp, ...props }: Omit<NumberFieldProps, "onChange">) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        disabled: boolean;
+        placeholder: string;
+    };
+};

package/dist/components/Input/PasswordField.d.ts

@@ -0,0 +1,8 @@
+import { ChangeEvent, InputHTMLAttributes } from "react";
+import { WrapperProps } from "./InputWrapper";
+export interface PasswordFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "string" | "onChange"> {
+    type?: "password";
+    value?: string;
+    onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/PasswordField.stories.d.ts

@@ -0,0 +1,34 @@
+import { PasswordFieldProps } from "./PasswordField";
+declare const _default: {
+    component: ({ value: valueProp, ...props }: Omit<PasswordFieldProps, "onChange">) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        disabled: boolean;
+        placeholder: string;
+    };
+};

package/dist/components/Input/SearchField.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, InputHTMLAttributes } from "react";
+import { WrapperProps } from "./InputWrapper";
+export interface SearchFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "string" | "onChange"> {
+    loading?: boolean;
+    value?: string;
+    clear?: boolean;
+    onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const SearchField: import("react").ForwardRefExoticComponent<SearchFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/SearchField.stories.d.ts

@@ -0,0 +1,37 @@
+import { SearchFieldProps } from "./SearchField";
+declare const _default: {
+    component: ({ value: valueProp, ...props }: Omit<SearchFieldProps, "onChange">) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+        };
+        clear: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        disabled: boolean;
+        placeholder: string;
+    };
+};

package/dist/components/Input/TextField.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent, InputHTMLAttributes } from "react";
+import { WrapperProps } from "./InputWrapper";
+export interface TextFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "onChange"> {
+    type?: "text" | "email" | "tel" | "url";
+    loading?: boolean;
+    value?: string;
+    clear?: boolean;
+    onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Input/TextField.stories.d.ts

@@ -0,0 +1,43 @@
+import { TextFieldProps } from "./TextField";
+declare const _default: {
+    component: ({ value: valueProp, ...props }: Omit<TextFieldProps, "onChange">) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        type: {
+            control: string;
+            options: string[];
+        };
+        value: {
+            control: string;
+        };
+        clear: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+        clear: boolean;
+        type: string;
+        disabled: boolean;
+        placeholder: string;
+    };
+};

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    error?: boolean;
+    htmlFor?: string;
+}
+export declare const Label: ({ disabled, error, children, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Label/Label.stories.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    component: ({ disabled, error, text, }: {
+        disabled: boolean;
+        error: boolean;
+        text: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        text: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        text: string;
+        error: boolean;
+        disabled: boolean;
+    };
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type panelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+export type panelColor = "default" | "muted" | "transparent";
+export interface panelProps {
+    hasBorder?: boolean;
+    hasShadow?: boolean;
+    color?: panelColor;
+    padding?: panelPadding;
+    children?: React.ReactNode;
+}
+export declare const Panel: ({ hasBorder, hasShadow, color, padding, children }: panelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    component: ({ hasBorder, hasShadow, color, padding, children }: import("./Panel").panelProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        padding: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        color: string;
+        padding: string;
+        hasBorder: boolean;
+        hasShadow: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,23 @@
+import * as RadixPopover from "@radix-ui/react-popover";
+import { ReactNode } from "react";
+export declare const Popover: {
+    ({ children, ...props }: RadixPopover.PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: {
+        ({ children, anchor, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, showArrow, showClose, forceMount, container, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+interface TriggerProps extends RadixPopover.PopoverTriggerProps {
+    anchor?: ReactNode;
+}
+interface PopoverContentProps extends RadixPopover.PopoverContentProps {
+    showArrow?: boolean;
+    showClose?: boolean;
+    forceMount?: true;
+    container?: HTMLElement | null;
+}
+export {};

package/dist/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    component: ({ open, modal, showArrow, showClose, forceMount, side, }: {
+        open: "default" | "open" | "closed";
+        modal: boolean;
+        showArrow: boolean;
+        showClose: boolean;
+        forceMount?: boolean | undefined;
+        side: "top" | "right" | "bottom" | "left";
+    }) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        open: {
+            control: string;
+            options: string[];
+        };
+        modal: {
+            control: string;
+        };
+        showArrow: {
+            control: string;
+        };
+        showClose: {
+            control: string;
+        };
+        forceMount: {
+            control: string;
+        };
+        side: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        open: string;
+        showArrow: boolean;
+        showClose: boolean;
+        side: string;
+    };
+};

package/dist/components/Popover/Popover.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import { HTMLAttributes, ReactNode } from "react";
+export interface RadioGroupProps extends RadixRadioGroup.RadioGroupProps {
+    inline?: boolean;
+}
+export declare const RadioGroup: {
+    ({ children, inline, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    Item: {
+        ({ id, label, value, disabled, required, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+interface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {
+    label?: ReactNode;
+}
+export type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;
+export {};

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

@@ -0,0 +1,39 @@
+import { RadioGroupProps } from "./RadioGroup";
+declare const _default: {
+    component: (props: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+        inline: {
+            control: string;
+        };
+        dir: {
+            control: string;
+            options: string[];
+        };
+        orientation: {
+            control: string;
+            options: string[];
+        };
+        loop: {
+            control: string;
+            options: (boolean | undefined)[];
+        };
+        value: {
+            control: string;
+            options: (string | undefined)[];
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        disabled: boolean;
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+import { HTMLAttributes, ReactNode } from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    placeholder?: string;
+    label?: ReactNode;
+    children: ReactNode;
+    error?: ReactNode;
+    showSearch?: boolean;
+    disabled?: boolean;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    required?: boolean;
+    isFormControl?: boolean;
+    value?: string;
+}
+declare type DivProps = HTMLAttributes<HTMLDivElement>;
+export type SelectProps = RadixPopover.PopoverProps & Props;
+export declare const Select: {
+    ({ placeholder, label, children, disabled, id, error, value, defaultValue, onChange, open, defaultOpen, onOpenChange, name, required, isFormControl, showSearch, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    Group: import("react").ForwardRefExoticComponent<GroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    NoData: {
+        ({ children, onClick, ...props }: SelectNoDataProps): ReactNode;
+        displayName: string;
+    };
+};
+interface GroupProps extends Omit<DivProps, "value" | "heading"> {
+    heading?: ReactNode;
+    value?: string;
+}
+interface ItemProps extends Omit<DivProps, "disabled" | "onSelect" | "value"> {
+    separator?: boolean;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+}
+type SelectNoDataProps = Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
+    children?: (props: {
+        search: string;
+    }) => ReactNode;
+};
+export {};

package/dist/components/Select/Select.stories.d.ts

@@ -0,0 +1,54 @@
+import { SelectProps } from "./Select";
+interface Props extends SelectProps {
+    clickableNoData?: boolean;
+}
+declare const _default: {
+    component: ({ clickableNoData, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        error: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        defaultValue: {
+            control: string;
+        };
+        open: {
+            control: string;
+            options: (boolean | undefined)[];
+        };
+        defaultOpen: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+        showSearch: {
+            control: string;
+        };
+        isFormCotrol: {
+            control: string;
+        };
+        clickableNoData: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    args: {
+        label: string;
+    };
+};

package/dist/components/Select/SelectContext.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from "react";
+type ContextProps = {
+    selectedValue?: string | null;
+    onSelect: (value: string) => void;
+    popperOpen: boolean;
+    valueNode: ReactNode | null;
+    onOpenChange: (value: boolean) => void;
+};
+export declare const SelectContext: import("react").Context<ContextProps>;
+type Props = {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    updateValueNode: (value?: string) => ReactElement | null;
+    defaultOpen?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    onChange?: (value: string) => void;
+};
+export declare const SelectProvider: ({ value, children, }: {
+    children: ReactNode;
+    value: ContextProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectContextProvider: ({ children, value, defaultValue, updateValueNode, defaultOpen, onOpenChange: onOpenChangeProp, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Select/useSelect.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useSelect: () => {
+    selectedValue?: string | null | undefined;
+    onSelect: (value: string) => void;
+    popperOpen: boolean;
+    valueNode: import("react").ReactNode;
+    onOpenChange: (value: boolean) => void;
+};

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,6 @@
+import * as RadixSeparator from "@radix-ui/react-separator";
+interface Props extends RadixSeparator.SeparatorProps {
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+}
+declare const Separator: ({ orientation, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Separator;

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarCollapsibleItemProps extends HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    iconDir?: HorizontalDirection;
+    icon?: IconName;
+    indicatorDir?: HorizontalDirection;
+    selected?: boolean;
+    level?: number;
+}
+declare const SidebarCollapsibleItem: ({ label, children, open, onOpenChange, iconDir, indicatorDir, icon, level, selected, ...props }: SidebarCollapsibleItemProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export { SidebarCollapsibleItem };

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    component: ({ label, children, open, onOpenChange, iconDir, indicatorDir, icon, level, selected, ...props }: import('../../components').SidebarCollapsibleItemProps) => import("react/jsx-runtime").JSX.Element | undefined;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        selected: boolean;
+        label: import("react/jsx-runtime").JSX.Element;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/SidebarCollapsibleItem/SidebarCollapsibleItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarCollapsibleTitleProps extends React.HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+    iconDir?: HorizontalDirection;
+    icon?: IconName;
+    selected?: boolean;
+}
+export declare const SidebarCollapsibleTitle: ({ label, children, open, onOpenChange, iconDir, icon, selected, ...props }: SidebarCollapsibleTitleProps) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    component: ({ label, children, open, onOpenChange, iconDir, icon, selected, ...props }: import('../../components').SidebarCollapsibleTitleProps) => import("react/jsx-runtime").JSX.Element | undefined;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        label: string;
+        selected: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarNavigationItemProps extends HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    selected?: boolean;
+    level?: number;
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+}
+declare const SidebarNavigationItem: ({ label, level, icon, selected, iconDir, ...props }: SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarItemWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $collapsible?: boolean | undefined;
+    $level: number;
+}>>;
+export { SidebarNavigationItem };

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

@@ -0,0 +1,13 @@
+declare const _default: {
+    component: ({ label, level, icon, selected, iconDir, ...props }: import('../../components').SidebarNavigationItemProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Default: {
+    args: {
+        icon: string;
+        selected: boolean;
+        label: import("react/jsx-runtime").JSX.Element;
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { HorizontalDirection, IconName } from '../../components';
+export interface SidebarNavigationTitleProps extends HTMLAttributes<HTMLButtonElement> {
+    label: ReactNode;
+    selected?: boolean;
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+}
+export declare const SidebarNavigationTitle: ({ label, icon, iconDir, selected, ...props }: SidebarNavigationTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarTitleWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $collapsible?: boolean | undefined;
+}>>;