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

package/dist/theme/types.d.ts

@@ -0,0 +1,54 @@
+import { Theme } from './tokens/types';
+export type NestedJSONObject = {
+    [key: string]: string | number | NestedJSONObject | (string | number)[];
+};
+export type { Theme } from './tokens/types';
+export type ThemeName = "light" | "dark" | "system";
+export type ResolvedThemeName = Exclude<ThemeName, "system">;
+export type BaseThemeName = ResolvedThemeName;
+export type ConfigThemeValues = Theme & NestedJSONObject;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? T[P] extends (infer U)[] ? DeepPartial<U>[] : DeepPartial<T[P]> : T[P];
+};
+type FlexibleTheme = NestedJSONObject;
+export type TypedTheme = DeepPartial<Theme>;
+/**
+ * Build-time theme tokens - processed by bundler plugin
+ * These are transformed into CSS variables at build time
+ */
+export interface BuildTimeThemeConfig {
+    theme?: FlexibleTheme;
+    dark?: FlexibleTheme;
+}
+/**
+ * Runtime provider configuration
+ * These settings control provider behavior at runtime
+ */
+export interface RuntimeConfig {
+    storageKey?: string;
+    tooltipConfig?: {
+        delayDuration?: number;
+        skipDelayDuration?: number;
+        disableHoverableContent?: boolean;
+    };
+    toastConfig?: {
+        duration?: number;
+        swipeDirection?: "right" | "left" | "up" | "down";
+        swipeThreshold?: number;
+    };
+}
+/**
+ * Complete configuration for click-ui.config.ts
+ * Combines both build-time theme tokens and runtime provider settings
+ */
+export interface ThemeConfig extends BuildTimeThemeConfig, RuntimeConfig {
+}
+export interface ThemeContextValue {
+    themeName: ThemeName;
+    updateTheme: (theme: ThemeName) => void;
+    isSystemTheme?: boolean;
+    resolvedTheme: BaseThemeName;
+    theme: Theme;
+    breakpoints: Record<string, string>;
+    sizes: Record<string, string>;
+}

package/dist/theme/utils/css-builder.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Shared CSS Builder Utility
+ * Consolidates CSS output generation logic used across build and CLI commands
+ */
+export interface CSSBuildOptions {
+    /**
+     * Header comment to include at the top of the CSS file
+     */
+    headerComment?: string;
+    /**
+     * Include color-scheme property in :root
+     * @default true
+     */
+    includeColorScheme?: boolean;
+}
+/**
+ * Build CSS output from light-dark variables and theme overrides
+ * Single source of truth for CSS generation across all build pipelines
+ *
+ * @param lightDarkVars - CSS variables with light-dark() values for colors
+ * @param themeOverrides - Non-color variables that differ between themes
+ * @param options - Configuration options for CSS generation
+ * @returns Complete CSS string ready to be written to file
+ *
+ * @example
+ * ```typescript
+ * const lightDarkVars = generateLightDarkVariables(lightTheme, darkTheme);
+ * const themeOverrides = generateThemeOverrides(lightTheme, darkTheme);
+ * const css = buildCSSOutput(lightDarkVars, themeOverrides, {
+ *   headerComment: '/* My Custom Theme *\/'
+ * });
+ * ```
+ */
+export declare const buildCSSOutput: (lightDarkVars: Record<string, string>, themeOverrides: {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+}, options?: CSSBuildOptions) => string;

package/dist/theme/utils/css-generator.d.ts

@@ -0,0 +1,25 @@
+import { NestedJSONObject, Theme } from '../types';
+
+/**
+ * Core traverse function to convert nested theme object to flat variable map
+ * Used by generateCSSVariables, themeToFlatVariables, and build plugins to avoid duplication
+ *
+ * @param obj - Theme or nested JSON object to traverse
+ * @param prefix - Prefix for CSS variable names (default: "--")
+ * @param skipFields - Fields to skip during traversal (default: ["name", "isSystem", "resolvedTheme"])
+ * @returns Record of CSS variable names to their values
+ */
+export declare const traverseThemeObject: (obj: Theme | NestedJSONObject, prefix?: string, skipFields?: string[]) => Record<string, string>;
+/**
+ * Generate CSS variables with light-dark() for colors and fallback handling for non-colors
+ * Returns an object with base variables and any theme-specific overrides needed
+ */
+export declare const generateLightDarkVariables: (lightTheme: Theme, darkTheme: Theme) => Record<string, string>;
+/**
+ * Generate separate theme-specific overrides for non-color variables that differ
+ * This is needed when non-color values differ between themes and light-dark() can't be used
+ */
+export declare const generateThemeOverrides: (lightTheme: Theme, darkTheme: Theme) => {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+};

package/dist/theme/utils/find-config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Find Click UI config file in a directory
+ * Searches for click-ui.config with various extensions
+ *
+ * @param root - Directory to search in (usually process.cwd())
+ * @returns Full path to config file, or null if not found
+ *
+ * @example
+ * ```typescript
+ * const configPath = findConfigFile(process.cwd());
+ * if (configPath) {
+ *   console.log('Found config at:', configPath);
+ * }
+ * ```
+ */
+export declare const findConfigFile: (root: string) => string | null;

package/dist/theme/utils/theme-attribute.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Minimal runtime theme switching utility
+ * Used when theme CSS is already loaded via build-time plugin
+ */
+export type ThemeMode = "light" | "dark";
+/**
+ * Set theme attribute on document root
+ * This triggers CSS theme switching without regenerating CSS variables
+ *
+ * @param theme - The resolved theme ("light" or "dark")
+ * @param isSystem - Whether system preference mode is active
+ */
+export declare const setThemeAttribute: (theme: ThemeMode, isSystem?: boolean) => void;

package/dist/theme/utils.d.ts

@@ -0,0 +1,29 @@
+import { Theme, BaseThemeName, ThemeConfig } from './types';
+
+/**
+ * Deep merge utility for merging theme objects
+ * Recursively merges nested objects, with source properties taking precedence
+ *
+ * @param target - The target object to merge into
+ * @param source - The source object to merge from
+ * @returns A new merged object
+ *
+ * @example
+ * ```typescript
+ * const result = deepMerge({ a: 1, b: { c: 2 } }, { b: { d: 3 } });
+ * // Result: { a: 1, b: { c: 2, d: 3 } }
+ * ```
+ */
+export declare const deepMerge: (target: any, source: any) => any;
+/**
+ * Get base theme by name (synchronous with fallback)
+ */
+export declare const getBaseTheme: (themeName: BaseThemeName) => Theme;
+/**
+ * Helper to get a specific value from a theme by path
+ * @example
+ * getThemeValue(lightTheme, "click.button.primary.background.default")
+ * // Returns: "#007bff"
+ */
+export declare const getThemeValue: (theme: Theme | Record<string, any>, path: string) => unknown;
+export declare const loadCustomConfig: () => Promise<ThemeConfig | null>;

package/dist/utils/capitalize.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Capitalizes the first letter of a string and converts kebab-case to PascalCase
+ * @param str - The string to capitalize
+ * @returns The string with the first letter capitalized and kebab-case converted to PascalCase
+ * @example
+ * capitalize('hello') // 'Hello'
+ * capitalize('WORLD') // 'WORLD'
+ * capitalize('') // ''
+ * capitalize('space-between') // 'SpaceBetween'
+ * capitalize('space-around') // 'SpaceAround'
+ */
+export declare const capitalize: (str: string) => string;

package/dist/utils/polymorphic/index.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+
+/**
+ * Utility types for creating type-safe polymorphic components with SCSS modules
+ *
+ * Usage example:
+ * ```tsx
+ * interface MyComponentProps<T extends ElementType = "div"> extends PolymorphicComponentProps<T> {
+ *   customProp?: string;
+ * }
+ *
+ * type MyComponentType = PolymorphicComponent<MyComponentProps>;
+ *
+ * const _MyComponent = <T extends ElementType = "div">(
+ *   props: PolymorphicProps<T, MyComponentProps<T>>,
+ *   ref: PolymorphicRef<T>
+ * ) => {
+ *   const Component = props.component ?? "div";
+ *   return <Component ref={ref} {...props} />;
+ * };
+ *
+ * export const MyComponent: MyComponentType = forwardRef(_MyComponent);
+ * ```
+ */
+/**
+ * Base props for polymorphic components
+ */
+export interface PolymorphicComponentProps<T extends ElementType> {
+    component?: T;
+}
+/**
+ * Merges the component's custom props with native HTML element props
+ * Excludes conflicting keys from ComponentProps to ensure custom props take precedence
+ */
+export type PolymorphicProps<T extends ElementType, TProps extends PolymorphicComponentProps<T>> = Omit<ComponentProps<T>, keyof TProps> & TProps;
+/**
+ * Extracts the correct ref type for the polymorphic component
+ */
+export type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>["ref"];
+/**
+ * Type for the final exported polymorphic component
+ * This uses a mapped type to properly infer the element type
+ */
+export type PolymorphicComponent<TProps extends PolymorphicComponentProps<ElementType>, TDefaultElement extends ElementType = "div"> = <T extends ElementType = TDefaultElement>(props: PolymorphicProps<T, Omit<TProps, "component"> & {
+    component?: T;
+}> & {
+    ref?: PolymorphicRef<T>;
+}) => ReactNode;

package/dist/utils/test-utils.d.ts

@@ -1,6 +1,4 @@
-import { ThemeName } from '../theme';
-
-declare const renderCUI: (children: React.ReactNode, theme?: ThemeName) => {
+declare const renderCUI: (children: React.ReactNode) => {
     rerender: (rerenderChildren: React.ReactNode) => void;
     container: HTMLElement;
     baseElement: HTMLElement;

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.236",
+  "version": "0.0.237-sc-deprecation.1",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "./dist/cui.css",
+    "./dist/cui-components.css",
+    "./dist/cui-default-theme.css",
+    "./src/theme/global.scss"
+  ],
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
+  "bin": {
+    "click-ui": "./bin/click-ui.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -17,7 +29,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/click-ui.bundled.es.js",
       "require": "./dist/click-ui.bundled.umd.js"
-    }
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts"
+    },
+    "./cui.css": "./dist/cui.css",
+    "./cui-components.css": "./dist/cui-components.css",
+    "./cui-default-theme.css": "./dist/cui-default-theme.css",
+    "./style.css": "./dist/cui-components.css"
   },
   "main": "./dist/click-ui.umd.js",
   "module": "./dist/click-ui.es.js",
@@ -33,12 +52,16 @@
   },
   "homepage": "https://clickhouse.com",
   "scripts": {
-    "build": "tsc && vite build && yarn build:bundled",
+    "build": "npm run generate-theme-css && tsc && vite build && npm run build:bundled && npm run copy-css-files",
     "build:bundled": "vite build -- bundled",
+    "copy-css-files": "npm run rename-css && cp src/styles/cui-default-theme.css dist/ && npm run build-combined-css",
+    "rename-css": "mv dist/style.css dist/cui-components.css",
+    "build-combined-css": "echo '/* Click UI - Combined CSS */\n@import \"./cui-default-theme.css\";\n@import \"./cui-components.css\";' > dist/cui.css",
     "build-storybook": "storybook build",
     "build:watch": "watch 'npm run build' ./src",
     "chromatic": "npx chromatic",
     "dev": "vite",
+    "generate-theme-css": "npx tsx bin/commands/build-default-theme.ts",
     "generate-tokens": "node build-tokens.js",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettify": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" --config .prettierrc",
@@ -63,12 +86,11 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-popper": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-switch": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "lodash": "^4.17.21",
+    "clsx": "^2.1.1",
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-virtualized-auto-sizer": "^1.0.20",
@@ -76,38 +98,37 @@
     "sortablejs": "^1.15.0"
   },
   "devDependencies": {
-    "@radix-ui/react-switch": "^1.0.2",
-    "@storybook/addon-a11y": "^9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-links": "^9.0.18",
-    "@storybook/react-vite": "^9.0.18",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-links": "^10.0.7",
+    "@storybook/react-vite": "^10.0.7",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@tokens-studio/sd-transforms": "^0.10.3",
-    "@types/lodash-es": "^4.17.7",
+    "@types/node": "^20.0.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "babel-plugin-styled-components": "^2.1.4",
-    "chromatic": "^6.18.2",
+    "chromatic": "^13.3.3",
     "eslint": "^8.57.0",
     "eslint-plugin-prefer-arrow-functions": "^3.3.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^9.0.18",
+    "eslint-plugin-storybook": "^10.0.7",
     "jsdom": "^24.0.0",
     "prettier": "^3.6.2",
-    "prop-types": "^15.8.1",
-    "storybook": "^9.0.18",
-    "storybook-addon-pseudo-states": "^9.0.18",
+    "recharts": "^3.4.1",
+    "rollup": "^4.52.4",
+    "sass-embedded": "^1.93.0",
+    "storybook": "^10.0.7",
+    "storybook-addon-pseudo-states": "^10.0.7",
     "styled-components": "^6.1.11",
     "stylis": "^4.3.0",
     "ts-node": "^10.9.1",
@@ -118,9 +139,13 @@
     "watch": "^1.0.2"
   },
   "peerDependencies": {
-    "dayjs": "^1.11.13",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": ">= 5"
+    "dayjs": "^1.11.18",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "dayjs": {
+      "optional": true
+    }
   }
 }