@esphome/compose-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,632 @@
+// src/theme/context.ts
+import { createContext, useContext, createContextProvider } from "@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 = createContext(darkTheme);
+function useTheme() {
+  return useContext(ThemeContext);
+}
+var ThemeProvider = 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
+import { createIntentComponent, LVGL_INTENTS } from "@esphome/compose";
+var Screen = 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: [LVGL_INTENTS.WIDGET],
+    allowedChildIntents: [LVGL_INTENTS.WIDGET]
+  }
+);
+
+// src/components/Space.ts
+import { createIntentComponent as createIntentComponent2, LVGL_INTENTS as LVGL_INTENTS2 } from "@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: [LVGL_INTENTS2.WIDGET],
+  allowedChildIntents: [LVGL_INTENTS2.WIDGET],
+  contextTransparent: true
+};
+var Space = createIntentComponent2(
+  (props) => buildSpaceElement(props),
+  LAYOUT_INTENTS
+);
+var VStack = createIntentComponent2(
+  (props) => buildSpaceElement({ ...props, direction: "vertical" }),
+  LAYOUT_INTENTS
+);
+var HStack = createIntentComponent2(
+  (props) => buildSpaceElement({ ...props, direction: "horizontal" }),
+  LAYOUT_INTENTS
+);
+
+// src/components/Row.ts
+import { createIntentComponent as createIntentComponent3, LVGL_INTENTS as LVGL_INTENTS3 } from "@esphome/compose";
+var Row = createIntentComponent3(
+  (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: [LVGL_INTENTS3.WIDGET],
+    allowedChildIntents: [COMPOSE_UI_INTENTS.COL],
+    contextTransparent: true
+  }
+);
+var Col = createIntentComponent3(
+  (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, LVGL_INTENTS3.WIDGET],
+    allowedChildIntents: [LVGL_INTENTS3.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/Grid.ts
+import { createIntentComponent as createIntentComponent4, LVGL_INTENTS as LVGL_INTENTS4 } from "@esphome/compose";
+var Grid = createIntentComponent4(
+  (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: [LVGL_INTENTS4.WIDGET],
+    allowedChildIntents: [COMPOSE_UI_INTENTS.GRID_ITEM],
+    contextTransparent: true
+  }
+);
+var GridItem = createIntentComponent4(
+  (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, LVGL_INTENTS4.WIDGET],
+    allowedChildIntents: [LVGL_INTENTS4.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/Text.ts
+import { createIntentComponent as createIntentComponent5, LVGL_INTENTS as LVGL_INTENTS5 } from "@esphome/compose";
+var Text = createIntentComponent5(
+  (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: [LVGL_INTENTS5.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/Button.ts
+import { createIntentComponent as createIntentComponent6, LVGL_INTENTS as LVGL_INTENTS6 } from "@esphome/compose";
+var Button = createIntentComponent6(
+  (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: [LVGL_INTENTS6.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/Card.ts
+import { createIntentComponent as createIntentComponent7, LVGL_INTENTS as LVGL_INTENTS7 } from "@esphome/compose";
+var Card = createIntentComponent7(
+  (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: [LVGL_INTENTS7.WIDGET],
+    allowedChildIntents: [LVGL_INTENTS7.WIDGET],
+    contextTransparent: true
+  }
+);
+
+// src/components/SliderField.ts
+import { createIntentComponent as createIntentComponent8, LVGL_INTENTS as LVGL_INTENTS8 } from "@esphome/compose";
+var SliderField = createIntentComponent8(
+  (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: [LVGL_INTENTS8.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/SwitchField.ts
+import { createIntentComponent as createIntentComponent9, LVGL_INTENTS as LVGL_INTENTS9 } from "@esphome/compose";
+var SwitchField = createIntentComponent9(
+  (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: [LVGL_INTENTS9.WIDGET],
+    allowedChildIntents: []
+  }
+);
+
+// src/components/DropdownField.ts
+import { createIntentComponent as createIntentComponent10, LVGL_INTENTS as LVGL_INTENTS10 } from "@esphome/compose";
+var DropdownField = createIntentComponent10(
+  (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: [LVGL_INTENTS10.WIDGET],
+    allowedChildIntents: []
+  }
+);
+export {
+  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
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@esphome/compose-ui",
+  "version": "0.1.0",
+  "description": "LVGL Design System components for ESPHome Compose",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "esphome",
+    "lvgl",
+    "ui",
+    "design-system"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xmlguy74/espcompose.git",
+    "directory": "packages/ui"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@esphome/compose": "0.1.3"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.4.0",
+    "rimraf": "^6.1.3",
+    "vitest": "^2.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --tsconfig tsconfig.json",
+    "clean": "rimraf dist",
+    "lint": "eslint src",
+    "test": "vitest run --passWithNoTests"
+  }
+}