@lattice-ui/system 0.1.1

package/src/surface/surfacePrimitive.tsx

@@ -0,0 +1,59 @@
+import { React } from "@lattice-ui/core";
+import type { Sx } from "@lattice-ui/style";
+import { mergeGuiProps, resolveSx, useTheme } from "@lattice-ui/style";
+import type { SurfaceToken } from "./surface";
+import { surface } from "./surface";
+
+type StyleProps = React.Attributes & Record<string, unknown>;
+
+export type SurfaceProps = {
+  tone?: SurfaceToken;
+  sx?: Sx<StyleProps>;
+  children?: React.ReactNode;
+} & StyleProps;
+
+/**
+ * Decorated surface host primitive.
+ * Unlike `surface()`, this renders instance-graph decoration via UICorner/UIStroke.
+ * Host border props are not the canonical border representation here.
+ * `asChild` is intentionally not supported in this milestone.
+ */
+export function Surface(props: SurfaceProps) {
+  const tone = props.tone ?? "surface";
+  const sx = props.sx;
+  const children = props.children;
+
+  const asChild = (props as { asChild?: unknown }).asChild;
+  if (asChild !== undefined) {
+    error("[Surface] `asChild` is not supported in M2.");
+  }
+
+  const restProps: StyleProps = {};
+  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (rawKey === "tone" || rawKey === "sx" || rawKey === "children" || rawKey === "asChild") {
+      continue;
+    }
+
+    restProps[rawKey] = value;
+  }
+
+  const { theme } = useTheme();
+  const toneProps = resolveSx(surface<StyleProps>(tone), theme);
+  const sxProps = resolveSx(sx, theme);
+  const baseProps =
+    tone === "overlay" ? toneProps : mergeGuiProps(toneProps, { BorderSizePixel: 0 } as Partial<StyleProps>);
+  const mergedProps = mergeGuiProps(baseProps, sxProps, restProps);
+  const decorated = tone !== "overlay";
+
+  return (
+    <frame {...(mergedProps as Record<string, unknown>)}>
+      {decorated ? <uicorner CornerRadius={new UDim(0, theme.radius.lg)} /> : undefined}
+      {decorated ? <uistroke Color={theme.colors.border} Thickness={1} /> : undefined}
+      {children}
+    </frame>
+  );
+}

package/src/system/SystemProvider.tsx

@@ -0,0 +1,47 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { defaultLightTheme } from "@lattice-ui/style";
+import { DensityProvider } from "../density/DensityProvider";
+import { SystemBaseThemeContextProvider } from "./baseThemeContext";
+import { useSystemThemeContext } from "./systemThemeContext";
+import type { SystemProviderProps, SystemThemeContextValue } from "./types";
+
+export function SystemProvider(props: SystemProviderProps) {
+  // SystemProvider owns raw/base theme state. Density is applied in DensityProvider.
+  const [baseThemeValue, setBaseThemeValue] = useControllableState({
+    value: props.theme,
+    defaultValue: props.defaultTheme ?? defaultLightTheme,
+    onChange: props.onThemeChange,
+  });
+
+  const setBaseTheme = React.useCallback<SystemThemeContextValue["setBaseTheme"]>(
+    (nextTheme) => {
+      // Write-path contract: updates should target baseTheme, not resolved theme.
+      setBaseThemeValue(nextTheme);
+    },
+    [setBaseThemeValue],
+  );
+
+  const baseThemeContextValue = React.useMemo(
+    () => ({
+      baseTheme: baseThemeValue,
+      setBaseTheme,
+    }),
+    [baseThemeValue, setBaseTheme],
+  );
+
+  return (
+    <SystemBaseThemeContextProvider value={baseThemeContextValue}>
+      <DensityProvider
+        defaultDensity={props.defaultDensity}
+        density={props.density}
+        onDensityChange={props.onDensityChange}
+      >
+        {props.children}
+      </DensityProvider>
+    </SystemBaseThemeContextProvider>
+  );
+}
+
+export function useSystemTheme() {
+  return useSystemThemeContext();
+}

package/src/system/baseThemeContext.ts

@@ -0,0 +1,5 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { SystemBaseThemeContextValue } from "./types";
+
+export const [SystemBaseThemeContextProvider, useSystemBaseThemeContext] =
+  createStrictContext<SystemBaseThemeContextValue>("SystemBaseThemeContext");

package/src/system/systemThemeContext.ts

@@ -0,0 +1,5 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { SystemThemeContextValue } from "./types";
+
+export const [SystemThemeContextProvider, useSystemThemeContext] =
+  createStrictContext<SystemThemeContextValue>("SystemThemeContext");

package/src/system/types.ts

@@ -0,0 +1,29 @@
+import type { Theme } from "@lattice-ui/style";
+import type React from "@rbxts/react";
+import type { DensityToken } from "../density/types";
+
+export type SystemProviderProps = {
+  theme?: Theme;
+  defaultTheme?: Theme;
+  onThemeChange?: (nextTheme: Theme) => void;
+  density?: DensityToken;
+  defaultDensity?: DensityToken;
+  onDensityChange?: (next: DensityToken) => void;
+  children?: React.ReactNode;
+};
+
+export type SystemThemeContextValue = {
+  /** Density-resolved theme for read usage in system-managed trees. */
+  theme: Theme;
+  /** Raw theme before density transforms. Writes must target this base theme. */
+  baseTheme: Theme;
+  density: DensityToken;
+  /** Use this to update the raw/base theme source. */
+  setBaseTheme: (next: Theme) => void;
+  setDensity: (next: DensityToken) => void;
+};
+
+export type SystemBaseThemeContextValue = {
+  baseTheme: Theme;
+  setBaseTheme: (nextTheme: Theme) => void;
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}