@redis-ui/styles 11.0.2

package/dist/themes/types/theme/components/datePicker.types.d.ts

@@ -0,0 +1,65 @@
+type DayMarker = {
+    bgColor: string;
+    textColor: string;
+    border: string;
+    borderRadius: string;
+    transform?: string;
+};
+export type DatePickerTheme = {
+    fontSize: string;
+    fontWeight: string;
+    fontFamily: string;
+    focusOutline: string;
+    dayCell: {
+        width: string;
+        height?: string;
+        textColor: string;
+        hoverColor: string;
+        padding: string;
+        fontSize?: string;
+        fontWeight?: string;
+    };
+    weekDayCell: {
+        height?: string;
+        textColor: string;
+        fontSize?: string;
+        fontWeight?: string;
+    };
+    today: {
+        border: string;
+        fontSize?: string;
+        fontWeight?: string;
+    };
+    selectedDay: {
+        bgColor: string;
+        textColor: string;
+        borderRadius: string;
+        border: string;
+        singleDayMarker: DayMarker;
+        startDayMarker: DayMarker;
+        endDayMarker: DayMarker;
+    };
+    navArrow: {
+        gap: string;
+        width: string;
+        height: string;
+        padding: string;
+        iconColor: string;
+    };
+    navSelect: {
+        textColor: string;
+        gap: string;
+        month: {
+            width: string;
+        };
+        year: {
+            width: string;
+        };
+    };
+    weekNumCell: {
+        fontSize: string;
+        fontWeight?: string;
+        fontFamily?: string;
+    };
+};
+export {};

package/dist/themes/types/theme/components/drawer.types.d.ts

@@ -0,0 +1,23 @@
+export type DrawerTheme = {
+    shadow: string;
+    bgColor: string;
+    sidePadding: string;
+    width: string;
+    borderRadius: string;
+    header: {
+        blockPadding: string;
+        closeIconColor: string;
+        textColor: string;
+    };
+    body: {
+        blockPadding: string;
+    };
+    footer: {
+        blockPadding: string;
+        border: string;
+        buttonsGap: string;
+    };
+    overlay: {
+        bgColor: string;
+    };
+};

package/dist/themes/types/theme/components/filters.types.d.ts

@@ -0,0 +1,34 @@
+export type FiltersTheme = {
+    chipList: {
+        padding: string;
+        border: string;
+    };
+    filtersBar: {
+        gap: string;
+        padding: string;
+        separator: {
+            width: string;
+            color: string;
+        };
+        trigger: {
+            margin: string;
+            gap: string;
+            on: {
+                color: string;
+            };
+            off: {
+                color: string;
+            };
+        };
+    };
+    filterDropdown: {
+        padding: string;
+        maxHeight: string;
+        item: {
+            padding: string;
+        };
+        searchBar: {
+            padding: string;
+        };
+    };
+};

package/dist/themes/types/theme/components/formField.types.d.ts

@@ -0,0 +1,15 @@
+export type FormFieldTheme = {
+    columnGap: string;
+    group: {
+        rowGap: string;
+    };
+    additionalText: {
+        margin: string;
+        normal: {
+            textColor: string;
+        };
+        error: {
+            textColor: string;
+        };
+    };
+};

package/dist/themes/types/theme/components/global.types.d.ts

@@ -0,0 +1,3 @@
+export type IconSizeType = 'XS' | 'S' | 'M' | 'L' | 'XL';
+export type IconButtonSizes = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type BodySizesType = 'XL' | 'L' | 'M' | 'S' | 'XS';

package/dist/themes/types/theme/components/iconButton.types.d.ts

@@ -0,0 +1,11 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type IconButtonSizes = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS';
+export type IconButtonTheme = {
+    sizes: Record<IconButtonSizes, {
+        width: string;
+        height: string;
+    }>;
+    states: ButtonStatesTheme<ButtonStateColors>;
+    borderRadius: string;
+};
+export {};

package/dist/themes/types/theme/components/input.types.d.ts

@@ -0,0 +1,70 @@
+type InputVariant = 'outline' | 'underline';
+type InputState = 'normal' | 'focused' | 'disabled' | 'error' | 'success' | 'readonly';
+export type InputTheme = {
+    padding: string;
+    height: string;
+    gap: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    resetButton: {
+        iconColor: string;
+    };
+    indicator: {
+        errorTooltipTextColor: string;
+        errorIconColor: string;
+        successIconColor: string;
+    };
+    placeholder: {
+        textColor: string;
+    };
+    loader: {
+        size: string;
+    };
+    variants: Record<InputVariant, {
+        borderRadius: string;
+        borderWidth: string;
+    }>;
+    states: Record<InputState, {
+        bgColor?: string;
+        textColor?: string;
+        borderColor?: string;
+    }>;
+    textarea: {
+        padding: string;
+        statusPadding: string;
+        minHeight: string;
+        maxHeight: string;
+        readonly: {
+            minHeight: string;
+            maxHeight: string;
+        };
+        indicatorMargin: string;
+    };
+    search: {
+        iconColor: string;
+        resetButton: {
+            iconColor: string;
+        };
+    };
+    counter: {
+        minWidth: string;
+        padding: string;
+        valueLabel: {
+            textColor: string;
+        };
+    };
+    password: {
+        padding: string;
+    };
+    additionalText: {
+        margin: string;
+        normal: {
+            textColor: string;
+        };
+        error: {
+            textColor: string;
+        };
+    };
+};
+export {};

package/dist/themes/types/theme/components/label.types.d.ts

@@ -0,0 +1,22 @@
+export type LabelTheme = {
+    gap: string;
+    margin: string;
+    minHeight: string;
+    state: {
+        normal: {
+            textColor: string;
+        };
+        readonly: {
+            textColor: string;
+        };
+    };
+    infoIcon: {
+        iconColor: string;
+    };
+    optional: {
+        textColor: string;
+    };
+    required: {
+        textColor: string;
+    };
+};

package/dist/themes/types/theme/components/link.types.d.ts

@@ -0,0 +1,14 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type LinkLayout = 'block' | 'inline';
+type LinkSize = 'regular' | 'small';
+export type LinkTheme = {
+    variants: Record<LinkLayout, {
+        sizes: Record<LinkSize, {
+            padding: string;
+            borderRadius: string;
+            gap: string;
+        }>;
+        states: ButtonStatesTheme<ButtonStateColors>;
+    }>;
+};
+export {};

package/dist/themes/types/theme/components/loader.types.d.ts

@@ -0,0 +1,19 @@
+export type LoaderSize = 'M' | 'S';
+export type LoaderLayout = 'inline' | 'block';
+export type LoaderShade = 'light' | 'dark';
+type LoaderVariants = 'regular' | 'pending' | 'inverse';
+type LoaderColors = {
+    bgColor: string;
+    color: string;
+    textColor: string;
+};
+export type LoaderTheme = {
+    size: string;
+    gap: string;
+    /**
+     * @deprecated Use textColor of specific variants instead
+     */
+    textColor: string;
+    variants: Record<LoaderVariants, LoaderColors>;
+};
+export {};

package/dist/themes/types/theme/components/menu.types.d.ts

@@ -0,0 +1,43 @@
+type MenuItemVariant = 'primary' | 'destructive';
+type MenuItemState = 'normal' | 'hover' | 'selected' | 'disabled';
+type MenuItemStateColors = {
+    bgColor?: string;
+    textColor?: string;
+};
+export type MenuTheme = {
+    dropDown: {
+        minWidth: string;
+        maxWidth: string;
+        bgColor: string;
+        shadow: string;
+        borderRadius: string;
+        arrow: {
+            width: string;
+            height: string;
+            bgColor: string;
+        };
+    };
+    separator: {
+        size: string;
+        bgColor: string;
+    };
+    label: {
+        color: string;
+        padding: string;
+    };
+    item: {
+        padding: string;
+        gap: string;
+        variants: Record<MenuItemVariant, Partial<Record<MenuItemState, MenuItemStateColors>>>;
+        subHead: {
+            textColor: string;
+        };
+        check: {
+            size: string;
+        };
+        split: {
+            minWidth: string;
+        };
+    };
+};
+export {};

package/dist/themes/types/theme/components/modal.types.d.ts

@@ -0,0 +1,27 @@
+export type ModalTheme = {
+    inlinePadding: string;
+    blockPadding: string;
+    inlineScreenMargin: string;
+    blockScreenMargin: string;
+    shadow: string;
+    bgColor: string;
+    borderRadius: string;
+    header: {
+        blockPadding: string;
+        closeIconColor: string;
+        textColor: string;
+        gap: string;
+    };
+    body: {
+        minWidth: string;
+        maxWidth: string;
+        textColor: string;
+    };
+    footer: {
+        blockPadding: string;
+        buttonsGap: string;
+    };
+    overlay: {
+        bgColor: string;
+    };
+};

package/dist/themes/types/theme/components/popover.types.d.ts

@@ -0,0 +1,14 @@
+export type PopoverTheme = {
+    bgColor: string;
+    shadow: string;
+    borderRadius: string;
+    minWidth: string;
+    maxWidth: string;
+    blockPadding: string;
+    inlinePadding: string;
+    arrow: {
+        width: string;
+        height: string;
+        shadow: string;
+    };
+};

package/dist/themes/types/theme/components/popupCard.types.d.ts

@@ -0,0 +1,20 @@
+export type PopupCardTheme = {
+    closeButton: {
+        iconColor: string;
+    };
+    header: {
+        textColor: string;
+        margin: string;
+    };
+    body: {
+        margin: string;
+        textColor: string;
+    };
+    footer: {
+        margin: string;
+    };
+    windowBar: {
+        margin: string;
+        padding: string;
+    };
+};

package/dist/themes/types/theme/components/profileIcon.types.d.ts

@@ -0,0 +1,13 @@
+type ColorGroup = {
+    primaryColor: string;
+    secondaryColor: string;
+    borderColor: string;
+};
+type ProfileIconSize = 'S' | 'M' | 'L';
+export type ProfileIconTheme = {
+    textColor: string;
+    border: string;
+    colorGroups: ColorGroup[];
+    sizes: Record<ProfileIconSize, string>;
+};
+export {};

package/dist/themes/types/theme/components/progressBar.types.d.ts

@@ -0,0 +1,27 @@
+export type ProgressBarTextPosition = 'top' | 'left' | 'bottom' | 'right';
+export type ProgressBarSize = 'M';
+export type ProgressBarVariant = 'normal' | 'danger' | 'attention' | 'success';
+export interface ProgressBarTextPositionProperties {
+    gap: string;
+}
+export interface ProgressBarSizeProperties {
+    size: string;
+}
+export interface ProgressBarVariantProperties {
+    color: string;
+}
+export type TextPositionStyles = Record<ProgressBarTextPosition, ProgressBarTextPositionProperties>;
+export type SizeStyles = Record<ProgressBarSize, ProgressBarSizeProperties>;
+export type VariantStyles = Record<ProgressBarVariant, ProgressBarVariantProperties>;
+export interface ProgressBarTheme {
+    borderRadius: string;
+    textPosition: TextPositionStyles;
+    size: SizeStyles;
+    variant: VariantStyles;
+    indicator: {
+        variant: VariantStyles;
+    };
+    text: {
+        color: string;
+    };
+}

package/dist/themes/types/theme/components/radio.types.d.ts

@@ -0,0 +1,28 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+type RadioVariants = 'primary';
+type RadioStates = 'on' | 'off';
+type Layout = 'vertical' | 'horizontal';
+type RadioStateColors = ButtonStateColors & {
+    iconColor?: string;
+};
+export type RadioTheme = {
+    size: string;
+    iconSize: string;
+    padding: string;
+    borderWidth: string;
+    gap: string;
+    /**
+     * @deprecated use `group.gap` instead
+     */
+    groupGap: string;
+    group: Record<Layout, {
+        gap: string;
+        blockPadding: string;
+    }>;
+    label: {
+        gap: string;
+        lineHeight: string;
+    };
+    variants: Record<RadioVariants, Record<RadioStates, ButtonStatesTheme<RadioStateColors>>>;
+};
+export {};

package/dist/themes/types/theme/components/searchBar.types.d.ts

@@ -0,0 +1,23 @@
+export type SearchBarTheme = {
+    bgColor: string;
+    shadow: string;
+    borderRadius: string;
+    filtersSection: {
+        borderColor: string;
+        borderWidth: string;
+    };
+    searchSection: {
+        padding: string;
+    };
+    actionsBar: {
+        gap: string;
+        separator: {
+            height: string;
+            width: string;
+            color: string;
+        };
+        customActions: {
+            gap: string;
+        };
+    };
+};

package/dist/themes/types/theme/components/section.types.d.ts

@@ -0,0 +1,49 @@
+export type SectionTheme = {
+    width: string;
+    height: string;
+    bgColor: string;
+    shadow: string;
+    borderRadius: string;
+    header: {
+        minHeight: string;
+        padding: string;
+        backgroundColor: string;
+        group: {
+            gap: string;
+        };
+        label: {
+            textColor: string;
+        };
+        collapsedInfo: {
+            minHeight: string;
+            padding: string;
+            backgroundColor: string;
+            collapsableBackgroundColor: string;
+        };
+        categoryValueList: {
+            gap: string;
+            categoryValueChip: {
+                gap: string;
+                minWidth: string;
+                backgroundColor: string;
+                categoryTextColor: string;
+                valueTextColor: string;
+            };
+            divider: {
+                width: string;
+                height: string;
+                backgroundColor: string;
+            };
+            counter: {
+                textColor: string;
+            };
+        };
+    };
+    body: {
+        padding: string;
+    };
+    separator: {
+        width: string;
+        color: string;
+    };
+};

package/dist/themes/types/theme/components/select.types.d.ts

@@ -0,0 +1,70 @@
+type SelectState = 'normal' | 'focused' | 'opened' | 'error' | 'success' | 'disabled' | 'readonly';
+type OptionState = 'normal' | 'highlighted' | 'checked' | 'disabled';
+export type SelectTheme = {
+    padding: string;
+    height: string;
+    gap: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    borderWidth: string;
+    borderRadius: string;
+    indicator: {
+        errorTooltipTextColor: string;
+        errorIconColor: string;
+        successIconColor: string;
+    };
+    placeholder: {
+        textColor: string;
+    };
+    reset: {
+        iconColor: string;
+    };
+    arrow: {
+        iconColor: string;
+    };
+    value: {
+        gap: string;
+    };
+    multiValue: {
+        margin: string;
+    };
+    states: Record<SelectState, {
+        bgColor?: string;
+        textColor?: string;
+        borderColor?: string;
+    }>;
+    dropdown: {
+        padding: string;
+        bgColor: string;
+        shadow: string;
+        borderRadius: string;
+        triggerOffset: string;
+        maxHeight: string;
+        search: {
+            margin: string;
+        };
+        footer: {
+            blockPadding: string;
+            inlinePadding: string;
+            separator: {
+                size: string;
+                color: string;
+            };
+        };
+        option: {
+            height: string;
+            fontSize: string;
+            padding: string;
+            gap: string;
+            content: {
+                gap: string;
+            };
+            states: Record<OptionState, {
+                bgColor?: string;
+                textColor?: string;
+            }>;
+        };
+    };
+};
+export {};

package/dist/themes/types/theme/components/semanticButton.types.d.ts

@@ -0,0 +1,14 @@
+import { ButtonStateColors, ButtonStatesTheme } from './button.types';
+export type SemanticVariant = 'informative' | 'notice' | 'danger' | 'attention' | 'success';
+type OutlineVariant = 'primary' | 'secondary';
+type SemanticButtonSize = 'M' | 'S';
+export type SemanticButtonTheme = {
+    sizes: Record<SemanticButtonSize, {
+        borderRadius: string;
+        padding: string;
+        fontSize: string;
+        height: string;
+    }>;
+    variants: Record<SemanticVariant, Record<OutlineVariant, ButtonStatesTheme<ButtonStateColors>>>;
+};
+export {};

package/dist/themes/types/theme/components/semanticContainer.types.d.ts

@@ -0,0 +1,16 @@
+import { SemanticVariant } from './semanticButton.types';
+type SemanticContainerSize = 'M' | 'S';
+type SemanticContainerColors = {
+    bgColor: string;
+    textColor: string;
+    borderColor: string;
+};
+export type SemanticContainerTheme = {
+    sizes: Record<SemanticContainerSize, {
+        borderRadius: string;
+        borderWidth: string;
+        padding: string;
+    }>;
+    variants: Record<SemanticVariant, SemanticContainerColors>;
+};
+export {};

package/dist/themes/types/theme/components/semanticIcon.types.d.ts

@@ -0,0 +1,8 @@
+import { SemanticVariant } from './semanticButton.types';
+type SemanticIconColors = {
+    iconColor: string;
+};
+export type SemanticIconTheme = {
+    variants: Record<SemanticVariant, SemanticIconColors>;
+};
+export {};