@clickhouse/click-ui 0.2.0-test.0 → 0.2.1-rc.8

package/dist/esm/utils/localStorage.js

@@ -1,4 +1,6 @@
-const CUI_THEME_STORAGE_KEY = "cui-theme";
+import config from '../theme/theme.config.json.js';
+
+const CUI_THEME_STORAGE_KEY = config.storageKey;
 
 export { CUI_THEME_STORAGE_KEY };
 //# sourceMappingURL=localStorage.js.map

package/dist/esm/utils/localStorage.js.map

@@ -1 +1 @@
-{"version":3,"file":"localStorage.js","sources":["../../../src/utils/localStorage.ts"],"sourcesContent":["export const CUI_THEME_STORAGE_KEY = 'cui-theme';\n"],"names":["CUI_THEME_STORAGE_KEY"],"mappings":"AAAO,MAAMA,qBAAAA,GAAwB;;;;"}
+{"version":3,"file":"localStorage.js","sources":["../../../src/utils/localStorage.ts"],"sourcesContent":["// WARN: The storage key is shared with .scripts/js/generate-token\n// which is a nodejs script. At the moment opted for json instead\n// of adding support for `js` files, but json means importing the\n// whole file (the file shouldn't grow, so should be alright?)\nimport config from '@/theme/theme.config.json' with { type: 'json' };\n\nexport const CUI_THEME_STORAGE_KEY = config.storageKey;\n"],"names":["CUI_THEME_STORAGE_KEY","config","storageKey"],"mappings":";;AAMO,MAAMA,wBAAwBC,MAAAA,CAAOC;;;;"}

package/dist/types/components/Assets/Flags/Mexico.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Mexico: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Mexico;

package/dist/types/components/Assets/Flags/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type FlagName = 'australia' | 'brazil' | 'canada' | 'european-union' | 'germany' | 'great-britain' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'japan' | 'netherlands' | 'singapore' | 'south-africa' | 'south-korea' | 'sweden' | 'switzerland' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
+export type FlagName = 'australia' | 'brazil' | 'canada' | 'european-union' | 'germany' | 'great-britain' | 'hong-kong' | 'india' | 'indonesia' | 'ireland' | 'israel' | 'japan' | 'mexico' | 'netherlands' | 'singapore' | 'south-africa' | 'south-korea' | 'sweden' | 'switzerland' | 'united-arab-emirates' | 'united-kingdom' | 'united-states';
 export interface FlagProps extends SVGAttributes<SVGElement> {
     name: FlagName;
     theme?: ThemeName;

package/dist/types/components/Assets/Icons/Collapse-All.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Collapse_All: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Collapse_All;

package/dist/types/components/Assets/Icons/Expand-All.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Expand_All: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Expand_All;

package/dist/types/components/Assets/Icons/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
+export type IconName = 'activity' | 'alarm' | 'arrow-directions' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-triangle' | 'arrow-up' | 'auth-app' | 'auth-sms' | 'backups' | 'bar-chart' | 'bell' | 'beta' | 'blog' | 'bold' | 'book' | 'brackets' | 'briefcase' | 'building' | 'burger-menu' | 'calendar' | 'calendar-with-time' | 'cards' | 'cell-tower' | 'chart-area' | 'chart-bar-horizontal' | 'chart-cloud' | 'chart-donut' | 'chart-heatmap' | 'chart-scatter' | 'chart-square' | 'chart-stacked-horizontal' | 'chart-stacked-vertical' | 'chat' | 'check' | 'check-in-circle' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clock' | 'cloud' | 'cloud-keys' | 'code' | 'code-in-square' | 'collapse-all' | 'connect' | 'connect-alt' | 'console' | 'copy' | 'cpu' | 'credit-card' | 'cross' | 'data' | 'data-lakes' | 'database' | 'disk' | 'display' | 'document' | 'dot' | 'dots-horizontal' | 'dots-triangle' | 'dots-vertical' | 'dots-vertical-double' | 'double-check' | 'download' | 'download-in-circle' | 'email' | 'empty' | 'enter' | 'expand-all' | 'eye' | 'eye-closed' | 'filter' | 'fire' | 'flag' | 'flash' | 'flask' | 'folder-closed' | 'folder-open' | 'gear' | 'gift' | 'git-merge' | 'globe' | 'hexagon' | 'history' | 'home' | 'horizontal-loading' | 'http' | 'http-monitoring' | 'info-in-circle' | 'information' | 'insert-row' | 'integrations' | 'italic' | 'key' | 'keys' | 'lifebuoy' | 'light-bulb' | 'light-bulb-on' | 'lightening' | 'line-in-circle' | 'list-bulleted' | 'list-numbered' | 'loading' | 'loading-animated' | 'lock' | 'map-pin' | 'mcp' | 'metrics' | 'metrics-alt' | 'minus' | 'moon' | 'no-cloud' | 'pause' | 'payment' | 'pencil' | 'pie-chart' | 'pipe' | 'play' | 'play-in-circle' | 'plug' | 'plus' | 'popout' | 'popover-arrow' | 'puzzle-piece' | 'query' | 'question' | 'refresh' | 'resize-arrows-horizontal' | 'resize-arrows-vertical' | 'rocket' | 'sand-glass' | 'search' | 'secure' | 'server' | 'services' | 'settings' | 'share' | 'share-arrow' | 'share-network' | 'sleep' | 'slide-in' | 'slide-out' | 'sort' | 'sort-alt' | 'sparkle' | 'speaker' | 'speed' | 'square' | 'star' | 'stop' | 'support' | 'table' | 'taxi' | 'text-slash' | 'thumbs-down' | 'thumbs-up' | 'trash' | 'tree-structure' | 'underline' | 'upgrade' | 'upload' | 'url' | 'user' | 'users' | 'warning' | 'waves';
 export interface IconProps extends SVGAttributes<SVGElement> {
     name: IconName;
     theme?: ThemeName;

package/dist/types/components/Button/Button.d.ts

@@ -1,2 +1,25 @@
-import { ButtonProps } from './Button.types';
-export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+import { IconName } from '../Icon';
+export type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';
+type Alignment = 'center' | 'left';
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant of the button */
+    type?: ButtonType;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** The text label to display in the button */
+    label?: string;
+    /** Icon to display on the left side of the label */
+    iconLeft?: IconName;
+    /** Icon to display on the right side of the label */
+    iconRight?: IconName;
+    /** Alignment of the button content */
+    align?: Alignment;
+    /** Whether the button should fill the full width of its container */
+    fillWidth?: boolean;
+    /** Whether to show a loading state */
+    loading?: boolean;
+    /** Whether the button should be focused on mount */
+    autoFocus?: boolean;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/DatePicker/Common.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { useCalendar, UseCalendarOptions } from '@h6s/calendar';
+import { Timezone } from './utils';
 interface DatePickerInputProps {
     isActive: boolean;
     disabled: boolean;
@@ -8,8 +9,9 @@ interface DatePickerInputProps {
     partialYear?: number;
     placeholder?: string;
     selectedDate?: Date;
+    timezone?: Timezone;
 }
-export declare const DatePickerInput: ({ isActive, disabled, id, partialMonth, partialYear, placeholder, selectedDate, }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ isActive, disabled, id, partialMonth, partialYear, placeholder, selectedDate, timezone, }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 interface DateRangePickerInputProps {
     isActive: boolean;
     disabled: boolean;
@@ -17,8 +19,9 @@ interface DateRangePickerInputProps {
     placeholder?: string;
     selectedEndDate?: Date;
     selectedStartDate?: Date;
+    timezone?: Timezone;
 }
-export declare const DateRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, }: DateRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, timezone, }: DateRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 interface DateTimeRangePickerInputProps {
     isActive: boolean;
     disabled: boolean;
@@ -27,8 +30,9 @@ interface DateTimeRangePickerInputProps {
     selectedEndDate?: Date;
     selectedStartDate?: Date;
     shouldShowSeconds?: boolean;
+    timezone?: Timezone;
 }
-export declare const DateTimeRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds, }: DateTimeRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeRangePickerInput: ({ isActive, disabled, id, placeholder, selectedEndDate, selectedStartDate, shouldShowSeconds, timezone, }: DateTimeRangePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DateTableCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
     $isCurrentMonth?: boolean;
     $isDisabled?: boolean;
@@ -47,6 +51,7 @@ interface CalendarRendererProps {
     onYearSelect?: (year: number) => void;
     onMonthSelect?: (year: number, month: number) => void;
     selectedDate?: Date;
+    timezone?: Timezone;
 }
-export declare const CalendarRenderer: ({ calendarOptions, children, allowYearMonthSelection, onYearSelect, onMonthSelect, selectedDate, ...props }: CalendarRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarRenderer: ({ calendarOptions, children, allowYearMonthSelection, onYearSelect, onMonthSelect, selectedDate, timezone, ...props }: CalendarRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,11 @@
-import { DatePickerProps } from './DatePicker.types';
-export declare const DatePicker: ({ date, disabled, futureDatesDisabled, onSelectDate, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+import { Timezone } from './utils';
+export interface DatePickerProps {
+    allowOnlyDatesList?: Array<Date>;
+    date?: Date;
+    disabled?: boolean;
+    futureDatesDisabled?: boolean;
+    onSelectDate: (selectedDate: Date) => void;
+    placeholder?: string;
+    timezone?: Timezone;
+}
+export declare const DatePicker: ({ allowOnlyDatesList, date, disabled, futureDatesDisabled, onSelectDate, placeholder, timezone, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/DateRangePicker.d.ts

@@ -1,4 +1,4 @@
-import { DateRange } from './utils';
+import { DateRange, Timezone } from './utils';
 type OpenDirection = 'left' | 'right';
 export interface DateRangePickerProps {
     endDate?: Date;
@@ -12,6 +12,7 @@ export interface DateRangePickerProps {
     maxRangeLength?: number;
     startDate?: Date;
     responsivePositioning?: boolean;
+    timezone?: Timezone;
 }
-export declare const DateRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedDatesList, responsivePositioning, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedDatesList, responsivePositioning, timezone, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DatePicker/DateTimeRangePicker.d.ts

@@ -1,8 +1,11 @@
-import { DateRangeListItem } from './utils';
+import { DateRangeListItem, Timezone } from './utils';
 type OpenDirection = 'left' | 'right';
+export type Tab = 'startDate' | 'endDate';
 export interface DateTimeRangePickerProps {
-    endDate?: Date;
+    closeOnDateRangeSelected?: boolean;
+    defaultActiveTab?: Tab;
     disabled?: boolean;
+    endDate?: Date;
     futureDatesDisabled?: boolean;
     futureStartDatesDisabled?: boolean;
     onSelectDateRange: (selectedStartDate: Date, selectedEndDate: Date) => void;
@@ -12,6 +15,7 @@ export interface DateTimeRangePickerProps {
     maxRangeLength?: number;
     shouldShowSeconds?: boolean;
     startDate?: Date;
+    timezone?: Timezone;
 }
-export declare const DateTimeRangePicker: ({ endDate, startDate, disabled, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedTimesList, shouldShowSeconds, }: DateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeRangePicker: ({ closeOnDateRangeSelected, defaultActiveTab, disabled, endDate, futureDatesDisabled, futureStartDatesDisabled, maxRangeLength, onSelectDateRange, openDirection, placeholder, predefinedTimesList, shouldShowSeconds, startDate, timezone, }: DateTimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DatePicker/index.d.ts

@@ -1,6 +1,7 @@
 export { DatePicker } from './DatePicker';
 export { DateRangePicker } from './DateRangePicker';
 export { DateTimeRangePicker } from './DateTimeRangePicker';
-export type { DatePickerProps } from './DatePicker.types';
+export type { DatePickerProps } from './DatePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
-export type { DateTimeRangePickerProps } from './DateTimeRangePicker';
+export type { DateTimeRangePickerProps, Tab } from './DateTimeRangePicker';
+export type { Timezone } from './utils';

package/dist/types/components/DatePicker/utils.d.ts

@@ -1,3 +1,4 @@
+export type Timezone = 'system' | 'UTC';
 export interface DateRange {
     startDate: Date;
     endDate: Date;
@@ -11,14 +12,15 @@ export interface DateRangeListItem {
     dateRange: DateRange;
     label: string;
 }
-export declare const selectedDateFormatter: Intl.DateTimeFormat;
-export declare const weekdayFormatter: Intl.DateTimeFormat;
-export declare const selectedDateTimeFormatter: Intl.DateTimeFormat;
-export declare const selectedDateTimeFormatterWithSeconds: Intl.DateTimeFormat;
-export declare const selectedDateTimeDateFormatter: Intl.DateTimeFormat;
-export declare const timeFormatter: Intl.DateTimeFormat;
-export declare const headerDateFormatter: Intl.DateTimeFormat;
+export declare const formatSelectedDate: (timezone: Timezone, date: Date) => string;
+export declare const formatWeekday: (timezone: Timezone, date: Date) => string;
+export declare const formatSelectedDateTime: (timezone: Timezone, date: Date) => string;
+export declare const formatSelectedDateTimeWithSeconds: (timezone: Timezone, date: Date) => string;
+export declare const formatDateHeader: (timezone: Timezone, date: Date) => string;
+export declare const shiftToTimezone: (date: Date, timezone: Timezone) => Date;
+export declare const shiftFromTimezone: (date: Date, timezone: Timezone) => Date;
 export declare const getPredefinedMonthsForDateRangePicker: (numberOfMonths: number) => DateRange[];
 export declare const getPredefinedTimePeriodsForDateTimePicker: () => DateRangeListItem[];
+export declare const getNextNDatesForDatePickerAllowOnlyList: (numberOfDays: number) => Date[];
 export declare const datesAreWithinMaxRange: (startDate: Date, endDate: Date, maxRangeLength: number) => boolean;
-export declare const isDateRangeTheWholeMonth: ({ startDate, endDate }: DateRange) => boolean;
+export declare const isDateRangeTheWholeMonth: ({ startDate, endDate }: DateRange, timezone?: Timezone) => boolean;

package/dist/types/components/Dialog/Dialog.d.ts

@@ -11,7 +11,7 @@ export declare const Dialog: {
         displayName: string;
     };
     Content: {
-        ({ title, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+        ({ title, description, children, showClose, onClose, forceMount, container, showOverlay, reducePadding, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/types/components/Dialog/Dialog.types.d.ts

@@ -13,6 +13,7 @@ export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'butt
 }
 export interface DialogContentProps extends RadixDialog.DialogContentProps {
     children: ReactNode;
+    description?: string;
     showClose?: boolean;
     forceMount?: true;
     container?: HTMLElement | null;

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, InputHTMLAttributes } from 'react';
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { WrapperProps } from '../InputWrapper';
 export interface NumberFieldProps extends Omit<WrapperProps, 'id' | 'children'>, Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'dir'> {
     /** The input type - always number for NumberField */
@@ -13,5 +13,9 @@ export interface NumberFieldProps extends Omit<WrapperProps, 'id' | 'children'>,
     dir?: 'start' | 'end';
     /** Whether to hide the increment/decrement controls */
     hideControls?: boolean;
+    /** Additional content to the left of the control */
+    startContent?: ReactNode;
+    /** Additional content to the right of the control */
+    endContent?: ReactNode;
 }
 export declare const NumberField: import('react').ForwardRefExoticComponent<NumberFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/types/index.d.ts

@@ -51,7 +51,7 @@ export type { DateRangePickerProps } from './components/DatePicker/DateRangePick
 export { DateTimeRangePicker } from './components/DatePicker/DateTimeRangePicker';
 export type { DateTimeRangePickerProps } from './components/DatePicker/DateTimeRangePicker';
 export { getPredefinedMonthsForDateRangePicker } from './components/DatePicker/utils';
-export type { DateRange } from './components/DatePicker/utils';
+export type { DateRange, Timezone } from './components/DatePicker/utils';
 export { Dialog } from './components/Dialog';
 export type { DialogContentProps, DialogProps, DialogTriggerProps, } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';

package/dist/types/lib/cva.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+export { cva, type VariantProps } from 'class-variance-authority';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/types/theme/theme.config.json.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+  "storageKey": "cui-theme"
+}
+;
+
+export default _default;

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

@@ -1907,7 +1907,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                         format: {
@@ -1938,7 +1937,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                     };
@@ -5709,7 +5707,6 @@ export declare const themes: {
                             };
                             stroke: {
                                 default: string;
-                                focus: string;
                             };
                         };
                         format: {
@@ -5737,10 +5734,6 @@ export declare const themes: {
                                 active: string;
                                 disabled: string;
                             };
-                            stroke: {
-                                default: string;
-                                focus: string;
-                            };
                         };
                     };
                 };

package/dist/types/theme/tokens/variables.dark.d.ts

@@ -1904,7 +1904,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                     format: {
@@ -1935,7 +1934,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                 };

package/dist/types/theme/tokens/variables.light.d.ts

@@ -1889,7 +1889,6 @@ declare const theme: {
                         };
                         stroke: {
                             default: string;
-                            focus: string;
                         };
                     };
                     format: {
@@ -1917,10 +1916,6 @@ declare const theme: {
                             active: string;
                             disabled: string;
                         };
-                        stroke: {
-                            default: string;
-                            focus: string;
-                        };
                     };
                 };
             };

package/dist/types/utils/dom.d.ts

@@ -1,5 +1,5 @@
 import { ThemeName } from '../theme/theme.types';
-export declare const THEME_ATTRIBUTE = "data-cui-theme";
+export declare const THEME_ATTRIBUTE: string;
 export declare const getRootElement: () => HTMLElement | undefined;
 export declare const setRootThemeAttribute: (theme: ThemeName) => void;
 export declare const removeRootThemeAttribute: () => void;

package/dist/types/utils/localStorage.d.ts

@@ -1 +1 @@
-export declare const CUI_THEME_STORAGE_KEY = "cui-theme";
+export declare const CUI_THEME_STORAGE_KEY: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.2.0-test.0",
+  "version": "v0.2.1-rc.8",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -10,7 +10,9 @@
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -375,9 +377,13 @@
     "format:fix": ".scripts/bash/format --write",
     "generate:exports": ".scripts/js/generate-exports",
     "generate:tokens": "node ./.scripts/js/generate-tokens.js && yarn format:fix src/theme/tokens/**/*.ts",
-    "lint": "eslint src --report-unused-disable-directives",
-    "lint:fix": "eslint src --report-unused-disable-directives --fix",
-    "prepare": "husky",
+    "lint": "yarn lint:code && yarn lint:css",
+    "lint:fix": "yarn lint:code:fix && yarn lint:css:fix",
+    "lint:code": "eslint src --report-unused-disable-directives",
+    "lint:code:fix": "eslint src --report-unused-disable-directives --fix",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
+    "prepare": "yarn test && yarn format && yarn lint && yarn changeset:verify && yarn circular-dependency:check",
     "prettify": "yarn format:fix",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -385,10 +391,10 @@
     "storybook:serve": "yarn dlx http-server .storybook/out",
     "test": "vitest",
     "test:chromatic": "yarn dlx chromatic",
-    "test:visual": "playwright test",
-    "test:visual:report": "playwright show-report",
-    "test:visual:ui": "playwright test --ui",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual": ".scripts/bash/playwright-docker",
+    "test:visual:report": ".scripts/bash/playwright-docker report",
+    "test:visual:ui": ".scripts/bash/playwright-docker ui",
+    "test:visual:update": ".scripts/bash/playwright-docker update",
     "test:watch": "DEBUG_PRINT_LIMIT=100000 vitest --watch",
     "typecheck": "tsc --noEmit"
   },
@@ -410,6 +416,8 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-tooltip": "1.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "lodash-es": "^4.17.23",
     "react-sortablejs": "^6.1.4",
@@ -433,6 +441,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@tokens-studio/sd-transforms": "^1.2.0",
     "@types/eslint-plugin-react-refresh": "^0.4.0",
+    "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.10.1",
     "@types/react": "18.3.1",
@@ -451,9 +460,12 @@
     "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-react-refresh": "0.4.7",
     "eslint-plugin-storybook": "^10.1.10",
+    "fs-extra": "^11.3.4",
+    "glob": "^13.0.6",
     "globals": "^16.5.0",
-    "husky": "^9.1.7",
     "jsdom": "^24.0.0",
+    "postcss": "^8.5.8",
+    "postcss-modules": "^6.0.1",
     "prettier": "3.7.4",
     "prop-types": "^15.8.1",
     "react": "18.3.1",
@@ -463,6 +475,10 @@
     "storybook": "^10.1.10",
     "storybook-addon-pseudo-states": "^10.1.10",
     "style-dictionary": "^5.0.0",
+    "stylelint": "^17.5.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-no-unsupported-browser-features": "^8.1.1",
+    "stylelint-order": "^8.1.1",
     "stylis": "^4.3.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.5.3",

package/dist/types/components/DatePicker/DatePicker.types.d.ts

@@ -1,8 +0,0 @@
-export interface DatePickerProps {
-    date?: Date;
-    disabled?: boolean;
-    futureDatesDisabled?: boolean;
-    onSelectDate: (selectedDate: Date) => void;
-    placeholder?: string;
-    responsivePositioning?: boolean;
-}