@esphome/compose-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,686 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  COMPOSE_UI_INTENTS: () => COMPOSE_UI_INTENTS,
+  Card: () => Card,
+  Col: () => Col,
+  DropdownField: () => DropdownField,
+  Grid: () => Grid,
+  GridItem: () => GridItem,
+  HStack: () => HStack,
+  Row: () => Row,
+  Screen: () => Screen,
+  SliderField: () => SliderField,
+  Space: () => Space,
+  SwitchField: () => SwitchField,
+  Text: () => Text,
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
+  VStack: () => VStack,
+  darkTheme: () => darkTheme,
+  fontDefToLvgl: () => fontDefToLvgl,
+  lightTheme: () => lightTheme,
+  resolveRadius: () => resolveRadius,
+  resolveSize: () => resolveSize,
+  resolveSpacing: () => resolveSpacing,
+  resolveStatus: () => resolveStatus,
+  resolveTypography: () => resolveTypography,
+  themeFromJSON: () => themeFromJSON,
+  themeToJSON: () => themeToJSON,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/context.ts
+var import_compose = require("@esphome/compose");
+
+// src/theme/dark.ts
+var darkTheme = {
+  name: "Dark",
+  colors: {
+    primary: { bg: "#1E88E5", text: "#FFFFFF", bgPressed: "#1565C0" },
+    secondary: { bg: "#546E7A", text: "#FFFFFF", bgPressed: "#37474F" },
+    success: { bg: "#43A047", text: "#FFFFFF", bgPressed: "#2E7D32" },
+    warning: { bg: "#FB8C00", text: "#000000", bgPressed: "#E65100" },
+    danger: { bg: "#E53935", text: "#FFFFFF", bgPressed: "#C62828" },
+    background: "#121212",
+    surface: "#1E1E1E",
+    surfaceAlt: "#2C2C2C",
+    border: "#3A3A3A",
+    textPrimary: "#E0E0E0",
+    textSecondary: "#9E9E9E",
+    textDisabled: "#616161"
+  },
+  typography: {
+    title: { fontFamily: "montserrat", fontSize: 28 },
+    subtitle: { fontFamily: "montserrat", fontSize: 20 },
+    body: { fontFamily: "montserrat", fontSize: 16 },
+    caption: { fontFamily: "montserrat", fontSize: 12 }
+  },
+  spacing: {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  radii: {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 16,
+    full: 9999
+  },
+  sizes: {
+    xs: { height: 28, fontSize: 12, paddingX: 8, paddingY: 4 },
+    sm: { height: 36, fontSize: 14, paddingX: 12, paddingY: 6 },
+    md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
+    lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
+    xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  }
+};
+
+// src/theme/context.ts
+var ThemeContext = (0, import_compose.createContext)(darkTheme);
+function useTheme() {
+  return (0, import_compose.useContext)(ThemeContext);
+}
+var ThemeProvider = (0, import_compose.createContextProvider)(ThemeContext);
+
+// src/theme/light.ts
+var lightTheme = {
+  name: "Light",
+  colors: {
+    primary: { bg: "#1565C0", text: "#FFFFFF", bgPressed: "#0D47A1" },
+    secondary: { bg: "#78909C", text: "#FFFFFF", bgPressed: "#546E7A" },
+    success: { bg: "#2E7D32", text: "#FFFFFF", bgPressed: "#1B5E20" },
+    warning: { bg: "#EF6C00", text: "#000000", bgPressed: "#E65100" },
+    danger: { bg: "#C62828", text: "#FFFFFF", bgPressed: "#B71C1C" },
+    background: "#FAFAFA",
+    surface: "#FFFFFF",
+    surfaceAlt: "#F5F5F5",
+    border: "#E0E0E0",
+    textPrimary: "#212121",
+    textSecondary: "#757575",
+    textDisabled: "#BDBDBD"
+  },
+  typography: {
+    title: { fontFamily: "montserrat", fontSize: 28 },
+    subtitle: { fontFamily: "montserrat", fontSize: 20 },
+    body: { fontFamily: "montserrat", fontSize: 16 },
+    caption: { fontFamily: "montserrat", fontSize: 12 }
+  },
+  spacing: {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  radii: {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 16,
+    full: 9999
+  },
+  sizes: {
+    xs: { height: 28, fontSize: 12, paddingX: 8, paddingY: 4 },
+    sm: { height: 36, fontSize: 14, paddingX: 12, paddingY: 6 },
+    md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
+    lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
+    xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  }
+};
+
+// src/theme/json.ts
+function themeToJSON(theme) {
+  return JSON.stringify(theme, null, 2);
+}
+function themeFromJSON(json) {
+  return JSON.parse(json);
+}
+
+// src/theme/resolvers.ts
+function resolveSpacing(value) {
+  if (typeof value === "number") return value;
+  return useTheme().spacing[value];
+}
+function resolveSize(value) {
+  return useTheme().sizes[value];
+}
+function resolveStatus(value) {
+  return useTheme().colors[value];
+}
+function resolveTypography(variant) {
+  return useTheme().typography[variant];
+}
+function fontDefToLvgl(def) {
+  return `${def.fontFamily}_${def.fontSize}`;
+}
+function resolveRadius(value) {
+  if (typeof value === "number") return value;
+  return useTheme().radii[value];
+}
+
+// src/intents.ts
+var COMPOSE_UI_INTENTS = {
+  /** Col can only be placed inside Row. */
+  COL: "compose-ui:col",
+  /** GridItem can only be placed inside Grid. */
+  GRID_ITEM: "compose-ui:grid-item"
+};
+
+// src/components/Screen.ts
+var import_compose2 = require("@esphome/compose");
+var Screen = (0, import_compose2.createIntentComponent)(
+  (props) => {
+    const padding = props.padding != null ? resolveSpacing(props.padding) : void 0;
+    const theme = useTheme();
+    const bgColor = props.bgColor ?? theme.colors.background;
+    return {
+      type: "lvgl-page",
+      props: {
+        bgColor,
+        borderWidth: props.borderWidth ?? 0,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        ...padding != null ? { padAll: padding } : {},
+        ...props.skip != null ? { skip: props.skip } : {},
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [import_compose2.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [import_compose2.LVGL_INTENTS.WIDGET]
+  }
+);
+
+// src/components/Space.ts
+var import_compose3 = require("@esphome/compose");
+function buildFlexLayout(flow, gapKey, props) {
+  const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
+  return {
+    type: "flex",
+    flex_flow: flow,
+    ...props.align ? { flex_align_main: props.align } : {},
+    ...props.crossAlign ? { flex_align_cross: props.crossAlign } : {},
+    ...gap != null ? { [gapKey]: gap } : {}
+  };
+}
+function buildSpaceElement(props) {
+  const isRow = (props.direction ?? "vertical") === "horizontal";
+  const baseFlow = isRow ? "ROW" : "COLUMN";
+  const flow = props.wrap ? `${baseFlow}_WRAP` : baseFlow;
+  const gapKey = isRow ? "pad_column" : "pad_row";
+  const padding = props.padding != null ? resolveSpacing(props.padding) : void 0;
+  return {
+    type: "lvgl-obj",
+    props: {
+      ...props.width != null ? { width: props.width } : {},
+      ...props.height != null ? { height: props.height } : {},
+      ...padding != null ? { padAll: padding } : {},
+      ...props.bgColor != null ? { bgColor: props.bgColor } : {},
+      ...props.bgOpa != null ? { bgOpa: props.bgOpa } : { bgOpa: "TRANSP" },
+      ...props.radius != null ? { radius: props.radius } : {},
+      borderWidth: props.borderWidth ?? 0,
+      ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+      "x:custom": {
+        layout: buildFlexLayout(flow, gapKey, props)
+      },
+      ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+    }
+  };
+}
+var LAYOUT_INTENTS = {
+  intents: [import_compose3.LVGL_INTENTS.WIDGET],
+  allowedChildIntents: [import_compose3.LVGL_INTENTS.WIDGET],
+  contextTransparent: true
+};
+var Space = (0, import_compose3.createIntentComponent)(
+  (props) => buildSpaceElement(props),
+  LAYOUT_INTENTS
+);
+var VStack = (0, import_compose3.createIntentComponent)(
+  (props) => buildSpaceElement({ ...props, direction: "vertical" }),
+  LAYOUT_INTENTS
+);
+var HStack = (0, import_compose3.createIntentComponent)(
+  (props) => buildSpaceElement({ ...props, direction: "horizontal" }),
+  LAYOUT_INTENTS
+);
+
+// src/components/Row.ts
+var import_compose4 = require("@esphome/compose");
+var Row = (0, import_compose4.createIntentComponent)(
+  (props) => {
+    const wrap = props.wrap !== false;
+    const flow = wrap ? "ROW_WRAP" : "ROW";
+    let padColumn;
+    let padRow;
+    if (Array.isArray(props.gutter)) {
+      padColumn = resolveSpacing(props.gutter[0]);
+      padRow = resolveSpacing(props.gutter[1]);
+    } else if (props.gutter != null) {
+      padColumn = resolveSpacing(props.gutter);
+    }
+    return {
+      type: "lvgl-obj",
+      props: {
+        width: props.width ?? "100%",
+        ...props.height != null ? { height: props.height } : {},
+        bgOpa: "TRANSP",
+        borderWidth: props.borderWidth ?? 0,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        "x:custom": {
+          layout: {
+            type: "flex",
+            flex_flow: flow,
+            ...props.justify ? { flex_align_main: props.justify } : {},
+            ...props.align ? { flex_align_cross: props.align } : {},
+            ...padColumn != null ? { pad_column: padColumn } : {},
+            ...padRow != null ? { pad_row: padRow } : {}
+          }
+        },
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [import_compose4.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [COMPOSE_UI_INTENTS.COL],
+    contextTransparent: true
+  }
+);
+var Col = (0, import_compose4.createIntentComponent)(
+  (props) => {
+    const span = props.span ?? 1;
+    return {
+      type: "lvgl-obj",
+      props: {
+        bgOpa: "TRANSP",
+        borderWidth: props.borderWidth ?? 0,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        ...props.width != null ? { width: props.width } : {},
+        ...props.height != null ? { height: props.height } : {},
+        "x:custom": {
+          flex_grow: span
+        },
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [COMPOSE_UI_INTENTS.COL, import_compose4.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [import_compose4.LVGL_INTENTS.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/Grid.ts
+var import_compose5 = require("@esphome/compose");
+var Grid = (0, import_compose5.createIntentComponent)(
+  (props) => {
+    const colGap = props.columnGap != null ? resolveSpacing(props.columnGap) : props.gap != null ? resolveSpacing(props.gap) : void 0;
+    const rowGap = props.rowGap != null ? resolveSpacing(props.rowGap) : props.gap != null ? resolveSpacing(props.gap) : void 0;
+    return {
+      type: "lvgl-obj",
+      props: {
+        ...props.width != null ? { width: props.width } : {},
+        ...props.height != null ? { height: props.height } : {},
+        ...props.bgColor != null ? { bgColor: props.bgColor } : {},
+        ...props.bgOpa != null ? { bgOpa: props.bgOpa } : { bgOpa: "TRANSP" },
+        borderWidth: props.borderWidth ?? 0,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        "x:custom": {
+          layout: {
+            type: "grid",
+            grid_columns: props.columns,
+            grid_rows: props.rows,
+            ...colGap != null ? { pad_column: colGap } : {},
+            ...rowGap != null ? { pad_row: rowGap } : {},
+            ...props.alignColumns ? { grid_column_align: props.alignColumns } : {},
+            ...props.alignRows ? { grid_row_align: props.alignRows } : {}
+          }
+        },
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [import_compose5.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [COMPOSE_UI_INTENTS.GRID_ITEM],
+    contextTransparent: true
+  }
+);
+var GridItem = (0, import_compose5.createIntentComponent)(
+  (props) => {
+    return {
+      type: "lvgl-obj",
+      props: {
+        bgOpa: "TRANSP",
+        borderWidth: props.borderWidth ?? 0,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        "x:custom": {
+          grid_cell_column_pos: props.col,
+          grid_cell_row_pos: props.row,
+          ...props.colSpan != null && props.colSpan !== 1 ? { grid_cell_column_span: props.colSpan } : {},
+          ...props.rowSpan != null && props.rowSpan !== 1 ? { grid_cell_row_span: props.rowSpan } : {},
+          ...props.colAlign ? { grid_cell_x_align: props.colAlign } : {},
+          ...props.rowAlign ? { grid_cell_y_align: props.rowAlign } : {}
+        },
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [COMPOSE_UI_INTENTS.GRID_ITEM, import_compose5.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [import_compose5.LVGL_INTENTS.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/Text.ts
+var import_compose6 = require("@esphome/compose");
+var Text = (0, import_compose6.createIntentComponent)(
+  (props) => {
+    const variant = props.variant ?? "body";
+    const fontDef = resolveTypography(variant);
+    const color = props.color ?? useTheme().colors.textPrimary;
+    return {
+      type: "lvgl-label",
+      props: {
+        ...props.text != null ? { text: props.text } : {},
+        textFont: fontDefToLvgl(fontDef),
+        ...props.align != null ? { textAlign: props.align } : {},
+        textColor: color,
+        ...props.longMode != null ? { longMode: props.longMode } : {},
+        ...props.x != null ? { x: props.x } : {},
+        ...props.y != null ? { y: props.y } : {},
+        ...props.width != null ? { width: props.width } : {}
+      }
+    };
+  },
+  {
+    intents: [import_compose6.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/Button.ts
+var import_compose7 = require("@esphome/compose");
+var Button = (0, import_compose7.createIntentComponent)(
+  (props) => {
+    const status = props.status ?? "primary";
+    const size = props.size ?? "md";
+    const variant = props.variant ?? "solid";
+    const colors = resolveStatus(status);
+    const dims = resolveSize(size);
+    const theme = useTheme();
+    const isSolid = variant === "solid";
+    const textFont = fontDefToLvgl({ fontFamily: theme.typography.body.fontFamily, fontSize: dims.fontSize });
+    const buttonProps = {
+      width: props.width ?? dims.paddingX * 2 + 80,
+      height: props.height ?? dims.height,
+      ...props.x != null ? { x: props.x } : {},
+      ...props.y != null ? { y: props.y } : {},
+      ...isSolid ? {
+        bgColor: colors.bg,
+        pressed: { bgColor: colors.bgPressed }
+      } : {
+        bgOpa: "TRANSP",
+        borderColor: colors.bg,
+        borderWidth: 2,
+        pressed: { bgColor: colors.bg, bgOpa: "COVER" }
+      },
+      ...props.onPress != null ? { "x:custom": { on_press: props.onPress } } : {}
+    };
+    const label = {
+      type: "lvgl-label",
+      props: {
+        text: props.text ?? "",
+        textColor: isSolid ? colors.text : colors.bg,
+        textFont,
+        align: "CENTER"
+      }
+    };
+    return {
+      type: "lvgl-button",
+      props: {
+        ...buttonProps,
+        children: [label]
+      }
+    };
+  },
+  {
+    intents: [import_compose7.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/Card.ts
+var import_compose8 = require("@esphome/compose");
+var Card = (0, import_compose8.createIntentComponent)(
+  (props) => {
+    const padding = resolveSpacing(props.padding ?? "md");
+    const radius = resolveRadius(props.radius ?? "md");
+    const theme = useTheme();
+    const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
+    return {
+      type: "lvgl-obj",
+      props: {
+        padAll: padding,
+        radius,
+        bgColor: props.bgColor ?? theme.colors.surfaceAlt,
+        ...props.borderColor != null ? { borderColor: props.borderColor } : {},
+        borderWidth: props.borderWidth ?? 0,
+        ...props.width != null ? { width: props.width } : {},
+        ...props.height != null ? { height: props.height } : {},
+        "x:custom": {
+          layout: {
+            type: "flex",
+            flex_flow: "COLUMN",
+            ...gap != null ? { pad_row: gap } : {}
+          }
+        },
+        ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
+      }
+    };
+  },
+  {
+    intents: [import_compose8.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [import_compose8.LVGL_INTENTS.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/SliderField.ts
+var import_compose9 = require("@esphome/compose");
+var SliderField = (0, import_compose9.createIntentComponent)(
+  (props) => {
+    const theme = useTheme();
+    const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
+    const label = {
+      type: "lvgl-label",
+      props: {
+        text: props.label,
+        textFont: fontDefToLvgl(theme.typography.body),
+        textColor: theme.colors.textPrimary
+      }
+    };
+    const sliderProps = {
+      ...props.min != null ? { minValue: props.min } : {},
+      ...props.max != null ? { maxValue: props.max } : {},
+      ...props.value != null ? { value: props.value } : {},
+      ...props.onChange != null ? { "x:custom": { on_change: props.onChange } } : {}
+    };
+    const slider = {
+      type: "lvgl-slider",
+      props: sliderProps
+    };
+    return {
+      type: "lvgl-obj",
+      props: {
+        bgOpa: "TRANSP",
+        ...props.width != null ? { width: props.width } : { width: "100%" },
+        height: "SIZE_CONTENT",
+        "x:custom": {
+          layout: {
+            type: "flex",
+            flex_flow: "COLUMN",
+            ...gap != null ? { pad_row: gap } : {}
+          }
+        },
+        children: [label, slider]
+      }
+    };
+  },
+  {
+    intents: [import_compose9.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/SwitchField.ts
+var import_compose10 = require("@esphome/compose");
+var SwitchField = (0, import_compose10.createIntentComponent)(
+  (props) => {
+    const theme = useTheme();
+    const label = {
+      type: "lvgl-label",
+      props: {
+        text: props.label,
+        textFont: fontDefToLvgl(theme.typography.body),
+        textColor: theme.colors.textPrimary
+      }
+    };
+    const switchProps = {
+      ...props.value != null ? { "x:custom": { value: props.value } } : {},
+      ...props.onChange != null ? { "x:custom": { on_change: props.onChange } } : {}
+    };
+    const switchEl = {
+      type: "lvgl-switch",
+      props: switchProps
+    };
+    return {
+      type: "lvgl-obj",
+      props: {
+        bgOpa: "TRANSP",
+        ...props.width != null ? { width: props.width } : { width: "100%" },
+        height: "SIZE_CONTENT",
+        "x:custom": {
+          layout: {
+            type: "flex",
+            flex_flow: "ROW",
+            flex_align_main: "SPACE_BETWEEN",
+            flex_align_cross: "CENTER"
+          }
+        },
+        children: [label, switchEl]
+      }
+    };
+  },
+  {
+    intents: [import_compose10.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/DropdownField.ts
+var import_compose11 = require("@esphome/compose");
+var DropdownField = (0, import_compose11.createIntentComponent)(
+  (props) => {
+    const theme = useTheme();
+    const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
+    const label = {
+      type: "lvgl-label",
+      props: {
+        text: props.label,
+        textFont: fontDefToLvgl(theme.typography.body),
+        textColor: theme.colors.textPrimary
+      }
+    };
+    const dropdownProps = {
+      options: props.options,
+      ...props.value != null ? { selected: props.value } : {},
+      ...props.onChange != null ? { "x:custom": { on_change: props.onChange } } : {}
+    };
+    const dropdown = {
+      type: "lvgl-dropdown",
+      props: dropdownProps
+    };
+    return {
+      type: "lvgl-obj",
+      props: {
+        bgOpa: "TRANSP",
+        ...props.width != null ? { width: props.width } : { width: "100%" },
+        height: "SIZE_CONTENT",
+        "x:custom": {
+          layout: {
+            type: "flex",
+            flex_flow: "COLUMN",
+            ...gap != null ? { pad_row: gap } : {}
+          }
+        },
+        children: [label, dropdown]
+      }
+    };
+  },
+  {
+    intents: [import_compose11.LVGL_INTENTS.WIDGET],
+    allowedChildIntents: []
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  COMPOSE_UI_INTENTS,
+  Card,
+  Col,
+  DropdownField,
+  Grid,
+  GridItem,
+  HStack,
+  Row,
+  Screen,
+  SliderField,
+  Space,
+  SwitchField,
+  Text,
+  ThemeContext,
+  ThemeProvider,
+  VStack,
+  darkTheme,
+  fontDefToLvgl,
+  lightTheme,
+  resolveRadius,
+  resolveSize,
+  resolveSpacing,
+  resolveStatus,
+  resolveTypography,
+  themeFromJSON,
+  themeToJSON,
+  useTheme
+});