@envive-ai/react-toolkit-v3 0.3.5

package/src/components/CSSVariablesEditor/hooks/useGetDefaultCssVariables.ts

@@ -0,0 +1,467 @@
+import { useMemo } from 'react';
+import { ButtonColorsVars, ColorsNamesVars } from 'tokens/colors/colors';
+import { FontSizeCSSVar, fontSize } from 'tokens/typography/fontSize';
+import { FontWeightCSSVar, fontWeight } from 'tokens/typography/fontWeight';
+import {
+  LineHeightCSSVar,
+  convertLineHeightToPercentage,
+  lineHeight,
+} from 'tokens/typography/lineHeight';
+import { LetterSpacingCSSVar, letterSpacing } from 'tokens/typography/letterSpacing';
+import { FontFamily, FontFamilyCSSVar } from 'tokens/typography/fontFamily';
+import { ColorMapping, ColorNames } from 'src/models/colorsConfig';
+import { BorderRadiusCSSVar } from 'tokens/radius/radius';
+import { AspectRatio, AspectRatioCSSVar } from 'tokens/aspectRatio/aspectRatio';
+import { Theme, ThemeCSSVar } from 'tokens/theme/theme';
+import { useGetCssVariablesOptions } from './useGetCssVariablesOptions';
+import { CSSVariable } from '../types/types';
+
+type UseGetDefaultCssVariablesProps = {
+  defaultMerchantColors: ColorMapping;
+};
+export const useGetDefaultCssVariables = ({
+  defaultMerchantColors,
+}: UseGetDefaultCssVariablesProps) => {
+  const {
+    aspectRatioOptions,
+    themeOptions,
+    lightButtonBackgroundOptions,
+    lightButtonIconOptions,
+    darkButtonBackgroundOptions,
+    darkButtonIconOptions,
+  } = useGetCssVariablesOptions();
+
+  const cssVariables: CSSVariable[] = useMemo(
+    () => [
+      // Colors - Text
+      {
+        key: 'color-text-primary',
+        name: 'Text Primary',
+        variable: ColorsNamesVars.TextPrimary,
+        defaultValue: defaultMerchantColors[ColorNames.TextPrimary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-text-secondary',
+        name: 'Text Secondary',
+        variable: ColorsNamesVars.TextSecondary,
+        defaultValue: defaultMerchantColors[ColorNames.TextSecondary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-text-accent',
+        name: 'Text Accent',
+        variable: ColorsNamesVars.TextAccent,
+        defaultValue: defaultMerchantColors[ColorNames.TextAccent],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-text-link',
+        name: 'Text Link',
+        variable: ColorsNamesVars.TextLink,
+        defaultValue: defaultMerchantColors[ColorNames.TextLink],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-text-light',
+        name: 'Text Light',
+        variable: ColorsNamesVars.TextLight,
+        defaultValue: defaultMerchantColors[ColorNames.TextLight],
+        category: 'Colors',
+        isColor: true,
+      },
+
+      // Colors - Background
+      {
+        key: 'color-background-primary',
+        name: 'Background Primary',
+        variable: ColorsNamesVars.BackgroundPrimary,
+        defaultValue: defaultMerchantColors[ColorNames.BackgroundPrimary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-background-secondary',
+        name: 'Background Secondary',
+        variable: ColorsNamesVars.BackgroundSecondary,
+        defaultValue: defaultMerchantColors[ColorNames.BackgroundSecondary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-background-tertiary',
+        name: 'Background Tertiary',
+        variable: ColorsNamesVars.BackgroundTertiary,
+        defaultValue: defaultMerchantColors[ColorNames.BackgroundTertiary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-background-dark',
+        name: 'Background Dark',
+        variable: ColorsNamesVars.BackgroundDark,
+        defaultValue: defaultMerchantColors[ColorNames.BackgroundDark],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-background-light',
+        name: 'Background Light',
+        variable: ColorsNamesVars.BackgroundLight,
+        defaultValue: defaultMerchantColors[ColorNames.BackgroundLight],
+        category: 'Colors',
+        isColor: true,
+      },
+
+      // Colors - Border
+      {
+        key: 'color-border-light',
+        name: 'Border Light',
+        variable: ColorsNamesVars.BorderLight,
+        defaultValue: defaultMerchantColors[ColorNames.BorderLight],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-border-medium',
+        name: 'Border Medium',
+        variable: ColorsNamesVars.BorderMedium,
+        defaultValue: defaultMerchantColors[ColorNames.BorderMedium],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-border-dark',
+        name: 'Border Dark',
+        variable: ColorsNamesVars.BorderDark,
+        defaultValue: defaultMerchantColors[ColorNames.BorderDark],
+        category: 'Colors',
+        isColor: true,
+      },
+
+      // Colors - Accent
+      {
+        key: 'color-accent-primary',
+        name: 'Accent Primary',
+        variable: ColorsNamesVars.AccentPrimary,
+        defaultValue: defaultMerchantColors[ColorNames.AccentPrimary],
+        category: 'Colors',
+        isColor: true,
+      },
+      {
+        key: 'color-accent-secondary',
+        name: 'Accent Secondary',
+        variable: ColorsNamesVars.AccentSecondary,
+        defaultValue: defaultMerchantColors[ColorNames.AccentSecondary],
+        category: 'Colors',
+        isColor: true,
+      },
+
+      // Colors - Button
+      {
+        key: 'color-button-light-background',
+        name: 'Light Button Background Color',
+        variable: ButtonColorsVars.LightButtonBackgroundColor,
+        defaultValue: `var(--${ColorsNamesVars.BackgroundSecondary})`,
+        category: 'Prompt Button Colors',
+        options: lightButtonBackgroundOptions,
+      },
+      {
+        key: 'color-button-light-icon',
+        name: 'Light Button Icon Color',
+        variable: ButtonColorsVars.LightButtonIconColor,
+        defaultValue: `var(--${ColorsNamesVars.AccentPrimary})`,
+        category: 'Prompt Button Colors',
+        options: lightButtonIconOptions,
+      },
+      {
+        key: 'color-button-dark-background',
+        name: 'Dark Button Background Color',
+        variable: ButtonColorsVars.DarkButtonBackgroundColor,
+        defaultValue: `var(--${ColorsNamesVars.BackgroundDark})`,
+        category: 'Prompt Button Colors',
+        options: darkButtonBackgroundOptions,
+      },
+      {
+        key: 'color-button-dark-icon',
+        name: 'Dark Button Icon Color',
+        variable: ButtonColorsVars.DarkButtonIconColor,
+        defaultValue: `var(--${ColorsNamesVars.AccentPrimary})`,
+        category: 'Prompt Button Colors',
+        options: darkButtonIconOptions,
+      },
+
+      // Font Sizes
+      {
+        key: 'font-size-t1',
+        name: 'Font Size T1',
+        variable: FontSizeCSSVar.T1,
+        defaultValue: fontSize.t1,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-t2',
+        name: 'Font Size T2',
+        variable: FontSizeCSSVar.T2,
+        defaultValue: fontSize.t2,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-t3',
+        name: 'Font Size T3',
+        variable: FontSizeCSSVar.T3,
+        defaultValue: fontSize.t3,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-h1',
+        name: 'Font Size H1',
+        variable: FontSizeCSSVar.H1,
+        defaultValue: fontSize.h1,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-h2',
+        name: 'Font Size H2',
+        variable: FontSizeCSSVar.H2,
+        defaultValue: fontSize.h2,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-h3',
+        name: 'Font Size H3',
+        variable: FontSizeCSSVar.H3,
+        defaultValue: fontSize.h3,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-b1',
+        name: 'Font Size B1',
+        variable: FontSizeCSSVar.B1,
+        defaultValue: fontSize.b1,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-b2',
+        name: 'Font Size B2',
+        variable: FontSizeCSSVar.B2,
+        defaultValue: fontSize.b2,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-b3',
+        name: 'Font Size B3',
+        variable: FontSizeCSSVar.B3,
+        defaultValue: fontSize.b3,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-b4',
+        name: 'Font Size B4',
+        variable: FontSizeCSSVar.B4,
+        defaultValue: fontSize.b4,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-b5',
+        name: 'Font Size B5',
+        variable: FontSizeCSSVar.B5,
+        defaultValue: fontSize.b5,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-l1',
+        name: 'Font Size L1',
+        variable: FontSizeCSSVar.L1,
+        defaultValue: fontSize.l1,
+        category: 'Typography',
+      },
+      {
+        key: 'font-size-l2',
+        name: 'Font Size L2',
+        variable: FontSizeCSSVar.L2,
+        defaultValue: fontSize.l2,
+        category: 'Typography',
+      },
+
+      // Font Weights
+      {
+        key: 'font-weight-rg',
+        name: 'Font Weight Regular',
+        variable: FontWeightCSSVar.RG,
+        defaultValue: fontWeight.rg,
+        category: 'Typography',
+      },
+      {
+        key: 'font-weight-md',
+        name: 'Font Weight Medium',
+        variable: FontWeightCSSVar.MD,
+        defaultValue: fontWeight.md,
+        category: 'Typography',
+      },
+      {
+        key: 'font-weight-sb',
+        name: 'Font Weight Semi Bold',
+        variable: FontWeightCSSVar.SB,
+        defaultValue: fontWeight.sb,
+        category: 'Typography',
+      },
+
+      // Line Heights
+      {
+        key: 'line-height-124',
+        name: 'Line Height 124%',
+        variable: LineHeightCSSVar.LineHeight124,
+        defaultValue: convertLineHeightToPercentage(lineHeight[124]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-120',
+        name: 'Line Height 120%',
+        variable: LineHeightCSSVar.LineHeight120,
+        defaultValue: convertLineHeightToPercentage(lineHeight[120]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-118',
+        name: 'Line Height 118%',
+        variable: LineHeightCSSVar.LineHeight118,
+        defaultValue: convertLineHeightToPercentage(lineHeight[118]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-116',
+        name: 'Line Height 116%',
+        variable: LineHeightCSSVar.LineHeight116,
+        defaultValue: convertLineHeightToPercentage(lineHeight[116]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-114',
+        name: 'Line Height 114%',
+        variable: LineHeightCSSVar.LineHeight114,
+        defaultValue: convertLineHeightToPercentage(lineHeight[114]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-148',
+        name: 'Line Height 148%',
+        variable: LineHeightCSSVar.LineHeight148,
+        defaultValue: convertLineHeightToPercentage(lineHeight[148]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-140',
+        name: 'Line Height 140%',
+        variable: LineHeightCSSVar.LineHeight140,
+        defaultValue: convertLineHeightToPercentage(lineHeight[140]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-128',
+        name: 'Line Height 128%',
+        variable: LineHeightCSSVar.LineHeight128,
+        defaultValue: convertLineHeightToPercentage(lineHeight[128]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-130',
+        name: 'Line Height 130%',
+        variable: LineHeightCSSVar.LineHeight130,
+        defaultValue: convertLineHeightToPercentage(lineHeight[130]),
+        category: 'Typography',
+      },
+      {
+        key: 'line-height-133',
+        name: 'Line Height 133%',
+        variable: LineHeightCSSVar.LineHeight133,
+        defaultValue: convertLineHeightToPercentage(lineHeight[133]),
+        category: 'Typography',
+      },
+
+      // Letter Spacing
+      {
+        key: 'letter-spacing-tight-0',
+        name: 'Letter Spacing Tight 0',
+        variable: LetterSpacingCSSVar.Tight0,
+        defaultValue: letterSpacing['tight-0'],
+        category: 'Typography',
+      },
+      {
+        key: 'letter-spacing-wide-1',
+        name: 'Letter Spacing Wide 1',
+        variable: LetterSpacingCSSVar.Wide1,
+        defaultValue: letterSpacing['wide-1'],
+        category: 'Typography',
+      },
+
+      // Font Families
+      {
+        key: 'font-family-title',
+        name: 'Font Family Title',
+        variable: FontFamilyCSSVar.Title,
+        defaultValue: FontFamily.Poppins,
+        category: 'Typography',
+      },
+      {
+        key: 'font-family-header',
+        name: 'Font Family Header',
+        variable: FontFamilyCSSVar.Header,
+        defaultValue: FontFamily.Poppins,
+        category: 'Typography',
+      },
+      {
+        key: 'font-family-body',
+        name: 'Font Family Body',
+        variable: FontFamilyCSSVar.Body,
+        defaultValue: FontFamily.InterVariable,
+        category: 'Typography',
+      },
+
+      // Border Radius
+      {
+        key: 'border-radius-global-custom',
+        name: 'Border Radius Global Custom',
+        variable: BorderRadiusCSSVar.GlobalCustom,
+        defaultValue: '8px',
+        category: 'Border Radius',
+      },
+
+      // Aspect Ratio
+      {
+        key: 'aspect-ratio-global-custom',
+        name: 'Aspect Ratio Global Custom',
+        variable: AspectRatioCSSVar.GlobalCustom,
+        defaultValue: AspectRatio.SQUARE,
+        category: 'Aspect Ratio',
+        options: aspectRatioOptions,
+      },
+
+      // Theme
+      {
+        key: 'theme-global-custom',
+        name: 'Theme Global Custom',
+        variable: ThemeCSSVar.GlobalCustom,
+        defaultValue: Theme.STANDARD,
+        category: 'Theme',
+        options: themeOptions,
+      },
+    ],
+    [
+      aspectRatioOptions,
+      themeOptions,
+      lightButtonBackgroundOptions,
+      lightButtonIconOptions,
+      darkButtonBackgroundOptions,
+      darkButtonIconOptions,
+      defaultMerchantColors,
+    ],
+  );
+  return {
+    cssVariables,
+  };
+};

package/src/components/CSSVariablesEditor/hooks/useHandleCssVariablesState.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { CSSVariable, CSSVariableValue } from '../types/types';
+import { getInitialValue, groupVariablesByCategory } from '../utils/functions';
+import { useHandleUpdateCssVars } from './useHandleUpdateCssVars';
+
+export const useHandleCssVariablesState = (cssVariables: CSSVariable[]) => {
+  const { updateCSSVariables } = useHandleUpdateCssVars();
+
+  const [values, setValues] = useState<CSSVariableValue>({});
+
+  useEffect(() => {
+    const initial: CSSVariableValue = {};
+    cssVariables.forEach(({ key, variable, defaultValue, isColor, options }) => {
+      const hasOptions = Array.isArray(options) && options.length > 0;
+      initial[key] = getInitialValue(variable, defaultValue, isColor, hasOptions);
+    });
+    setValues(initial);
+  }, [cssVariables]);
+
+  const handleChange = (key: string, value: string) => {
+    setValues(prev => {
+      const next = { ...prev, [key]: value };
+      updateCSSVariables(next);
+      return next;
+    });
+  };
+
+  const handleReset = (key: string, defaultValue: string) => {
+    setValues(prev => {
+      const next = { ...prev, [key]: defaultValue };
+      updateCSSVariables(next);
+      return next;
+    });
+  };
+
+  const handleResetAll = () => {
+    const resetValues: CSSVariableValue = {};
+    cssVariables.forEach(({ key, defaultValue }) => {
+      resetValues[key] = defaultValue;
+    });
+    updateCSSVariables(resetValues);
+    setValues(resetValues);
+  };
+
+  const groupedVariables = groupVariablesByCategory(cssVariables);
+  return { values, handleChange, handleReset, handleResetAll, groupedVariables };
+};

package/src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts

@@ -0,0 +1,107 @@
+import { FontSizeCSSVar } from 'tokens/typography/fontSize';
+import { FontWeightCSSVar } from 'tokens/typography/fontWeight';
+import { LineHeightCSSVar, convertPercentageTolineHeight } from 'tokens/typography/lineHeight';
+import { LetterSpacingCSSVar } from 'tokens/typography/letterSpacing';
+import { FontFamilyCSSVar } from 'tokens/typography/fontFamily';
+import { BorderRadiusCSSVar } from 'tokens/radius/radius';
+import {
+  AspectRatio,
+  AspectRatioCSSVar,
+  convertAspectRatioNameToStyle,
+} from 'tokens/aspectRatio/aspectRatio';
+import { ThemeCSSVar } from 'tokens/theme/theme';
+import { ButtonColorsVars, ColorsNamesVars } from 'tokens/colors/colors';
+import { CSSVariableValue } from '../types/types';
+
+export const useHandleUpdateCssVars = () => {
+  const getCssVariablesStyleContent = (variables: CSSVariableValue): string => `
+    * {
+
+        /* Typography */
+        --${FontSizeCSSVar.T1}: ${variables['font-size-t1']} !important;
+        --${FontSizeCSSVar.T2}: ${variables['font-size-t2']} !important;
+        --${FontSizeCSSVar.T3}: ${variables['font-size-t3']} !important;
+        --${FontSizeCSSVar.H1}: ${variables['font-size-h1']} !important;
+        --${FontSizeCSSVar.H2}: ${variables['font-size-h2']} !important;
+        --${FontSizeCSSVar.H3}: ${variables['font-size-h3']} !important;
+        --${FontSizeCSSVar.B1}: ${variables['font-size-b1']} !important;
+        --${FontSizeCSSVar.B2}: ${variables['font-size-b2']} !important;
+        --${FontSizeCSSVar.B3}: ${variables['font-size-b3']} !important;
+        --${FontSizeCSSVar.B4}: ${variables['font-size-b4']} !important;
+        --${FontSizeCSSVar.B5}: ${variables['font-size-b5']} !important;
+        --${FontSizeCSSVar.L1}: ${variables['font-size-l1']} !important;
+        --${FontSizeCSSVar.L2}: ${variables['font-size-l2']} !important;
+
+        --${FontWeightCSSVar.RG}: ${variables['font-weight-rg']} !important;
+        --${FontWeightCSSVar.MD}: ${variables['font-weight-md']} !important;
+        --${FontWeightCSSVar.SB}: ${variables['font-weight-sb']} !important;
+
+        --${LineHeightCSSVar.LineHeight124}: ${convertPercentageTolineHeight(variables['line-height-124'])} !important;
+        --${LineHeightCSSVar.LineHeight120}: ${convertPercentageTolineHeight(variables['line-height-120'])} !important;
+        --${LineHeightCSSVar.LineHeight118}: ${convertPercentageTolineHeight(variables['line-height-118'])} !important;
+        --${LineHeightCSSVar.LineHeight116}: ${convertPercentageTolineHeight(variables['line-height-116'])} !important;
+        --${LineHeightCSSVar.LineHeight114}: ${convertPercentageTolineHeight(variables['line-height-114'])} !important;
+        --${LineHeightCSSVar.LineHeight148}: ${convertPercentageTolineHeight(variables['line-height-148'])} !important;
+        --${LineHeightCSSVar.LineHeight140}: ${convertPercentageTolineHeight(variables['line-height-140'])} !important;
+        --${LineHeightCSSVar.LineHeight128}: ${convertPercentageTolineHeight(variables['line-height-128'])} !important;
+        --${LineHeightCSSVar.LineHeight130}: ${convertPercentageTolineHeight(variables['line-height-130'])} !important;
+        --${LineHeightCSSVar.LineHeight133}: ${convertPercentageTolineHeight(variables['line-height-133'])} !important;
+
+        --${LetterSpacingCSSVar.Tight0}: ${variables['letter-spacing-tight-0']} !important;
+        --${LetterSpacingCSSVar.Wide1}: ${variables['letter-spacing-wide-1']} !important;
+
+        --${FontFamilyCSSVar.Title}: ${variables['font-family-title']} !important;
+        --${FontFamilyCSSVar.Header}: ${variables['font-family-header']} !important;
+        --${FontFamilyCSSVar.Body}: ${variables['font-family-body']} !important;
+
+        /* Colors */
+        --${ColorsNamesVars.TextPrimary}: ${variables['color-text-primary']} !important;
+        --${ColorsNamesVars.TextSecondary}: ${variables['color-text-secondary']} !important;
+        --${ColorsNamesVars.TextAccent}: ${variables['color-text-accent']} !important;
+        --${ColorsNamesVars.TextLink}: ${variables['color-text-link']} !important;
+        --${ColorsNamesVars.TextLight}: ${variables['color-text-light']} !important;
+        --${ColorsNamesVars.BackgroundPrimary}: ${variables['color-background-primary']} !important;
+        --${ColorsNamesVars.BackgroundSecondary}: ${variables['color-background-secondary']} !important;
+        --${ColorsNamesVars.BackgroundTertiary}: ${variables['color-background-tertiary']} !important;
+        --${ColorsNamesVars.BackgroundDark}: ${variables['color-background-dark']} !important;
+        --${ColorsNamesVars.BackgroundLight}: ${variables['color-background-light']} !important;
+        --${ColorsNamesVars.BorderLight}: ${variables['color-border-light']} !important;
+        --${ColorsNamesVars.BorderMedium}: ${variables['color-border-medium']} !important;
+        --${ColorsNamesVars.BorderDark}: ${variables['color-border-dark']} !important;
+        --${ColorsNamesVars.AccentPrimary}: ${variables['color-accent-primary']} !important;
+        --${ColorsNamesVars.AccentSecondary}: ${variables['color-accent-secondary']} !important;
+
+
+        /* Button Colors */
+        --${ButtonColorsVars.LightButtonBackgroundColor}: ${variables['color-button-light-background']} !important;
+        --${ButtonColorsVars.LightButtonIconColor}: ${variables['color-button-light-icon']} !important;
+        --${ButtonColorsVars.DarkButtonBackgroundColor}: ${variables['color-button-dark-background']} !important;
+        --${ButtonColorsVars.DarkButtonIconColor}: ${variables['color-button-dark-icon']} !important;
+
+        /* Border Radius */
+        --${BorderRadiusCSSVar.GlobalCustom}: ${variables['border-radius-global-custom']} !important;
+
+        /* Aspect Ratio */
+        --${AspectRatioCSSVar.GlobalCustom}: ${convertAspectRatioNameToStyle(variables['aspect-ratio-global-custom'] as AspectRatio)} !important;
+
+        /* Theme */
+        --${ThemeCSSVar.GlobalCustom}: ${variables['theme-global-custom']} !important;
+    }
+`;
+
+  const updateCSSVariables = (variables: CSSVariableValue) => {
+    const styleId = 'merchant-css-config-edited';
+    let styleTag = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (styleTag) {
+      styleTag.innerHTML = getCssVariablesStyleContent(variables);
+    } else {
+      styleTag = document.createElement('style');
+      styleTag.id = styleId;
+      styleTag.innerHTML = getCssVariablesStyleContent(variables);
+      document.head.appendChild(styleTag);
+      document.getElementById('merchant-css-config')?.remove();
+    }
+  };
+
+  return { updateCSSVariables };
+};

package/src/components/CSSVariablesEditor/index.ts

@@ -0,0 +1 @@
+export { CssVariablesEditorComponent } from './CssVariablesEditorComponent';

package/src/components/CSSVariablesEditor/types/types.ts

@@ -0,0 +1,18 @@
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
+export type CSSVariable = {
+  key: string;
+  name: string;
+  variable: string;
+  defaultValue: string;
+  category: string;
+  isColor?: boolean;
+  options?: SelectOption[];
+};
+
+export type CSSVariableValue = {
+  [key: string]: string;
+};