@clickhouse/click-ui 0.0.235 → 0.0.237-sc-deprecation.1

package/dist/cui.css

@@ -0,0 +1,3 @@
+/* Click UI - Combined CSS */
+@import "./cui-default-theme.css";
+@import "./cui-components.css";

package/dist/index.d.ts

@@ -1,2 +1,78 @@
-export * from './components';
+
+export * from './components/types';
+export { Icon } from './components/Icon/Icon';
+export { IconButton } from './components/IconButton/IconButton';
+export { Label } from './components/Label/Label';
+export { GenericLabel } from './components/GenericLabel/GenericLabel';
+export { Dropdown } from './components/Dropdown/Dropdown';
+export { Accordion } from './components/Accordion/Accordion';
+export { Alert, DangerAlert, InfoAlert, WarningAlert, SuccessAlert, } from './components/Alert/Alert';
+export { AutoComplete } from './components/AutoComplete/AutoComplete';
+export { Avatar } from './components/Avatar/Avatar';
+export { Badge } from './components/Badge/Badge';
+export { BigStat } from './components/BigStat/BigStat';
+export { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
+export { Button } from './components/Button/Button';
+export { CardHorizontal } from './components/CardHorizontal/CardHorizontal';
+export { CardPrimary } from './components/CardPrimary/CardPrimary';
+export { CardPromotion } from './components/CardPromotion/CardPromotion';
+export { CardSecondary } from './components/CardSecondary/CardSecondary';
+export { Checkbox } from './components/Checkbox/Checkbox';
+export { CodeBlock } from './components/CodeBlock/CodeBlock';
+export { ConfirmationDialog } from './components/ConfirmationDialog/ConfirmationDialog';
+export { ContextMenu } from './components/ContextMenu/ContextMenu';
+export { Container } from './components/Container/Container';
+export { DateDetails } from './components/DateDetails/DateDetails';
+export { DatePicker } from './components/DatePicker/DatePicker';
+export { DateRangePicker } from './components/DatePicker/DateRangePicker';
+export { getPredefinedMonthsForDateRangePicker } from './components/DatePicker/utils';
+export { Dialog } from './components/Dialog/Dialog';
+export { EllipsisContent } from './components/EllipsisContent/EllipsisContent';
+export { FileUpload } from './components/FileUpload/FileUpload';
+export { FileMultiUpload } from './components/FileUpload/FileMultiUpload';
+export { Flyout } from './components/Flyout/Flyout';
+export { FormContainer } from './components/FormContainer/FormContainer';
+export { GridContainer } from './components/GridContainer/GridContainer';
+export { InlineCodeBlock } from './components/CodeBlock/InlineCodeBlock';
+export { default as Flags } from './components/icons/Flags';
+export { Grid } from './components/Grid/Grid';
+export { HoverCard } from './components/HoverCard/HoverCard';
+export { Link } from './components/Link/Link';
+export { linkStyles, linkClasses, LINK_CLASSES, } from './components/Link/linkStyles';
+export type { StyledLinkProps, LinkStyleProps, } from './components/Link/linkStyles';
+export { Logo } from './components/Logos/Logo';
+export { NumberField } from './components/Input/NumberField';
+export { PasswordField } from './components/Input/PasswordField';
+export { Popover } from './components/Popover/Popover';
+export { Pagination } from './components/Pagination/Pagination';
+export { Panel } from './components/Panel/Panel';
+export { ProgressBar } from './components/ProgressBar/ProgressBar';
+export { RadioGroup } from './components/RadioGroup/RadioGroup';
+export { SearchField } from './components/Input/SearchField';
+export { Select } from './components/Select/SingleSelect';
+export { MultiSelect } from './components/Select/MultiSelect';
+export { CheckboxMultiSelect } from './components/Select/CheckboxMultiSelect';
+export { default as Separator } from './components/Separator/Separator';
+export { SidebarNavigationItem } from './components/SidebarNavigationItem/SidebarNavigationItem';
+export { SidebarCollapsibleItem } from './components/SidebarCollapsibleItem/SidebarCollapsibleItem';
+export { SidebarNavigationTitle } from './components/SidebarNavigationTitle/SidebarNavigationTitle';
+export { SidebarCollapsibleTitle } from './components/SidebarCollapsibleTitle/SidebarCollapsibleTitle';
+export { Spacer } from './components/Spacer/Spacer';
+export { SplitButton } from './components/SplitButton/SplitButton';
+export { Switch } from './components/Switch/Switch';
+export { Tabs, FullWidthTabs } from './components/Tabs/Tabs';
+export { FileTabs, FileTabElement } from './components/FileTabs/FileTabs';
+export { Table } from './components/Table/Table';
+export { Text } from './components/Typography/Text/Text';
+export { TextAreaField } from './components/Input/TextArea';
+export { TextField } from './components/Input/TextField';
+export { Title } from './components/Typography/Title/Title';
+export { Tooltip } from './components/Tooltip/Tooltip';
+export { useToast } from './components/Toast/useToast';
+export { createToast } from './components/Toast/toastEmitter';
+export { UserIcon as ProfileIcon } from './components/icons/UserIcon';
+export { default as VerticalStepper } from './components/VerticalStepper/VerticalStepper';
+export { MultiAccordion } from './components/MultiAccordion/MultiAccordion';
+export { ToastProvider, Toast } from './components/Toast/Toast';
 export * from './theme';
+export { ClickUIProvider, useCUITheme } from './theme/ClickUIProvider';

package/dist/stories/ChartColorComponent.d.ts

@@ -0,0 +1 @@
+export declare const ChartColorComponent: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/chart-examples/ChartTooltip.d.ts

@@ -0,0 +1,12 @@
+interface TooltipPayload {
+    name: string;
+    value: number;
+    color: string;
+}
+interface ChartTooltipProps {
+    active?: boolean;
+    payload?: readonly TooltipPayload[];
+    label?: string | number;
+}
+export declare const ChartTooltip: (props: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/stories/chart-examples/ColorSwatchesChart.d.ts

@@ -0,0 +1 @@
+export declare const ColorSwatchesChart: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/chart-examples/GroupedBarChart.d.ts

@@ -0,0 +1 @@
+export declare const GroupedBarChart: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/chart-examples/MultiLineChart.d.ts

@@ -0,0 +1 @@
+export declare const MultiLineChart: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/chart-examples/StackedAreaChart.d.ts

@@ -0,0 +1 @@
+export declare const StackedAreaChart: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/chart-examples/StackedBarChartDemo.d.ts

@@ -0,0 +1 @@
+export declare const StackedBarChartDemo: () => import("react/jsx-runtime").JSX.Element;

package/dist/theme/ClickUIProvider/ClickUIProvider.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ClickUIProviderProps } from './types';
+
+export declare const ClickUIProvider: React.FC<ClickUIProviderProps>;
+export default ClickUIProvider;

package/dist/theme/ClickUIProvider/ServerClickUIProvider.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { ThemeName } from '../types';
+import { TooltipProviderProps } from '@radix-ui/react-tooltip';
+import { ToastProviderProps } from '../../components/Toast/Toast';
+
+interface ServerClickUIProviderProps {
+    children: React.ReactNode;
+    theme?: ThemeName;
+    tooltipConfig?: Omit<TooltipProviderProps, "children">;
+    toastConfig?: Omit<ToastProviderProps, "children">;
+}
+/**
+ * Server-side Click UI Provider
+ *
+ * IMPORTANT: CSS must be imported in your app:
+ * - With custom theme: import './cui-custom-theme.css' (generated by CLI)
+ * - With default theme: import '@clickhouse/click-ui/dist/cui-default-theme.css'
+ *
+ * This provider only sets the theme attribute and provides context.
+ * All theme CSS is pre-built and loaded via imports.
+ */
+export declare const ServerClickUIProvider: ({ children, theme, tooltipConfig, toastConfig, }: ServerClickUIProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/ClickUIProvider/context.d.ts

@@ -0,0 +1,24 @@
+import { BaseThemeName, ConfigThemeValues } from '../types';
+
+export type ThemeName = "light" | "dark" | "system";
+export interface ThemeContextValue {
+    themeName: ThemeName;
+    resolvedTheme: BaseThemeName;
+    isSystemTheme: boolean;
+    updateTheme: (theme: ThemeName) => void;
+    toggleTheme: () => void;
+    resetTheme: () => void;
+    theme: ConfigThemeValues;
+    breakpoints: Record<string, string>;
+    sizes: Record<string, string>;
+    utils: {
+        isDark: boolean;
+        isLight: boolean;
+        getThemeValue: (path: string) => unknown;
+        setThemeValue: (path: string, value: unknown) => void;
+    };
+    isLoading: boolean;
+    isHydrated: boolean;
+    availableThemes: ThemeName[];
+}
+export declare const ThemeContext: import('react').Context<ThemeContextValue | null>;

package/dist/theme/ClickUIProvider/hooks.d.ts

@@ -0,0 +1,4 @@
+import { ThemeContextValue } from './context';
+
+export declare const useCUITheme: () => ThemeContextValue;
+export { useCUITheme as useClickUITheme };

package/dist/theme/ClickUIProvider/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ClickUIProvider } from './ClickUIProvider';
+export { ServerClickUIProvider } from './ServerClickUIProvider';
+export { useCUITheme, useClickUITheme } from './hooks';
+export type { ThemeName, ThemeContextValue } from './context';
+export type { ClickUIConfig, ClickUIProviderProps } from './types';
+export { DEFAULT_CONFIG } from './types';

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { TooltipProviderProps } from '@radix-ui/react-tooltip';
+import { ToastProviderProps } from '../../components/Toast/Toast';
+import { ThemeConfig, BaseThemeName } from '../types';
+import { ThemeName } from './context';
+
+export interface ClickUIConfig extends ThemeConfig {
+    defaultTheme?: ThemeName;
+    storageKey?: string;
+    tooltipConfig?: Omit<TooltipProviderProps, "children">;
+    toastConfig?: Omit<ToastProviderProps, "children">;
+    enableTransitions?: boolean;
+    transitionDuration?: number;
+    preloadThemes?: BaseThemeName[];
+    enableMemoization?: boolean;
+    debounceDelay?: number;
+    enableDevTools?: boolean;
+    logThemeChanges?: boolean;
+    breakpoints?: Record<string, string>;
+    sizes?: Record<string, string>;
+}
+export interface ClickUIProviderProps {
+    children: ReactNode;
+    theme?: ThemeName;
+    defaultTheme?: ThemeName;
+    storageKey?: string;
+    config?: {
+        tooltip?: Omit<TooltipProviderProps, "children">;
+        toast?: Omit<ToastProviderProps, "children">;
+    };
+    enableTransitions?: boolean;
+    transitionDuration?: number;
+    suppressHydrationWarning?: boolean;
+    fallbackTheme?: BaseThemeName;
+    enableMemoization?: boolean;
+    debounceDelay?: number;
+    enableDevTools?: boolean;
+}
+export declare const DEFAULT_CONFIG: Required<ClickUIConfig>;

package/dist/theme/config.d.ts

@@ -0,0 +1,22 @@
+import { RuntimeConfig, ConfigThemeValues, BuildTimeThemeConfig } from './types';
+
+declare global {
+    const __CLICK_UI_CONFIG__: RuntimeConfig & BuildTimeThemeConfig;
+}
+/**
+ * Get runtime configuration injected by build plugin
+ *
+ * NOTE: This returns ONLY runtime config (storageKey, tooltipConfig, toastConfig)
+ * Theme tokens (theme + dark) are NOT included here - they are compiled to CSS
+ *
+ * @returns Runtime configuration object
+ */
+export declare const getRuntimeConfig: () => RuntimeConfig;
+/**
+ * Get the merged theme values for the specified mode
+ * Combines base theme (merged) + theme-specific overrides + config overrides
+ *
+ * @param mode - "light" or "dark"
+ * @returns Merged theme object with all token values
+ */
+export declare const getThemeValues: (mode: "light" | "dark") => ConfigThemeValues;

package/dist/theme/hooks/useSystemColorSchemePreference.d.ts

@@ -0,0 +1,7 @@
+import { ResolvedThemeName } from '../types';
+
+/**
+ * Hook that detects and tracks the user's system color scheme preference
+ * @returns Current system theme preference ("light" | "dark")
+ */
+export declare const useSystemColorSchemePreference: () => ResolvedThemeName;

package/dist/theme/index.d.ts

@@ -1,12 +1,6 @@
-import { Theme } from '../styles/types';
-
-export declare const themes: Record<ThemeName, Theme>;
-type ThemeName = "dark" | "light" | "classic";
-declare module "styled-components" {
-    interface DefaultTheme extends Theme {
-    }
-}
-type CUIThemeType = Pick<Theme, "breakpoint" | "global" | "name" | "sizes">;
-declare const useCUITheme: () => CUIThemeType;
-export type { ThemeName, CUIThemeType };
-export { useCUITheme };
+export type { Theme, ThemeName, ThemeConfig, ThemeContextValue, BaseThemeName, ResolvedThemeName, DeepPartial, TypedTheme, NestedJSONObject, ConfigThemeValues, } from './types';
+export { ClickUIProvider, ServerClickUIProvider } from './ClickUIProvider';
+export { useCUITheme, useCUITheme as useClickUITheme, } from './ClickUIProvider';
+export { getBaseTheme, getThemeValue, loadCustomConfig, deepMerge, } from './utils';
+export { setThemeAttribute } from './utils/theme-attribute';
+export type { ThemeName as ClickUIThemeName } from './types';

package/dist/{styles → theme/tokens}/types.d.ts

@@ -993,9 +993,16 @@ export interface Theme {
                     };
                 };
                 "space": {
-                    "y": string;
-                    "x": string;
-                    "gap": string;
+                    "md": {
+                        "y": string;
+                        "x": string;
+                        "gap": string;
+                    };
+                    "sm": {
+                        "y": string;
+                        "x": string;
+                        "gap": string;
+                    };
                 };
                 "default": {
                     "color": {
@@ -3404,11 +3411,10 @@ export interface Theme {
                     "yellow": string;
                     "violet": string;
                     "babyblue": string;
-                    "danger": string;
+                    "red": string;
                     "teal": string;
                     "sunrise": string;
                     "slate": string;
-                    "red": string;
                 };
                 "default": {
                     "blue": string;
@@ -3418,11 +3424,11 @@ export interface Theme {
                     "yellow": string;
                     "violet": string;
                     "babyblue": string;
+                    "red": string;
                     "danger": string;
                     "teal": string;
                     "sunrise": string;
                     "slate": string;
-                    "red": string;
                 };
                 "label": {
                     "default": string;
@@ -3663,6 +3669,7 @@ export interface Theme {
                 "2": string;
                 "3": string;
                 "4": string;
+                "5": string;
                 "6": string;
                 "base": string;
             };