@lattice-ui/style 0.1.1 → 0.3.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 astra-void
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/style",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "files": [
+    "out",
+    "README.md"
+  ],
   "dependencies": {
-    "@lattice-ui/core": "0.1.1"
+    "@lattice-ui/core": "0.3.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -17,7 +21,7 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "watch": "rbxtsc -p tsconfig.json -w",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
   }
 }

package/src/index.ts

@@ -1,20 +0,0 @@
-export { Box } from "./primitives/Box";
-export { Text } from "./primitives/Text";
-export type { RecipeConfig, RecipeSelection, RecipeVariants } from "./recipe/createRecipe";
-export { createRecipe } from "./recipe/createRecipe";
-export { mergeGuiProps } from "./sx/mergeGuiProps";
-export type { Sx } from "./sx/sx";
-export { mergeSx, resolveSx } from "./sx/sx";
-export { ThemeProvider, useTheme, useThemeValue } from "./theme/ThemeProvider";
-export { createTheme, defaultDarkTheme, defaultLightTheme } from "./theme/tokens";
-export type {
-  PartialTheme,
-  Theme,
-  ThemeColors,
-  ThemeContextValue,
-  ThemeProviderProps,
-  ThemeRadius,
-  ThemeSpace,
-  ThemeTypography,
-  ThemeTypographyStyle,
-} from "./theme/types";

package/src/primitives/Box.tsx

@@ -1,44 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { mergeGuiProps } from "../sx/mergeGuiProps";
-import type { Sx } from "../sx/sx";
-import { resolveSx } from "../sx/sx";
-import { useTheme } from "../theme/ThemeProvider";
-
-type StyleProps = React.Attributes & Record<string, unknown>;
-
-export type BoxProps = {
-  asChild?: boolean;
-  sx?: Sx<StyleProps>;
-  children?: React.ReactNode;
-} & StyleProps;
-
-export function Box(props: BoxProps) {
-  const asChild = props.asChild;
-  const sx = props.sx;
-  const children = props.children;
-  const restProps: StyleProps = {};
-  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
-    if (!typeIs(rawKey, "string")) {
-      continue;
-    }
-
-    if (rawKey === "asChild" || rawKey === "sx" || rawKey === "children") {
-      continue;
-    }
-
-    restProps[rawKey] = value;
-  }
-
-  const { theme } = useTheme();
-  const mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme));
-
-  if (asChild) {
-    if (!React.isValidElement(children)) {
-      error("[Box] `asChild` requires a single child element.");
-    }
-
-    return <Slot {...mergedProps}>{children}</Slot>;
-  }
-
-  return React.createElement("frame", mergedProps as never, children);
-}

package/src/primitives/Text.tsx

@@ -1,44 +0,0 @@
-import { React, Slot } from "@lattice-ui/core";
-import { mergeGuiProps } from "../sx/mergeGuiProps";
-import type { Sx } from "../sx/sx";
-import { resolveSx } from "../sx/sx";
-import { useTheme } from "../theme/ThemeProvider";
-
-type StyleProps = React.Attributes & Record<string, unknown>;
-
-export type TextProps = {
-  asChild?: boolean;
-  sx?: Sx<StyleProps>;
-  children?: React.ReactNode;
-} & StyleProps;
-
-export function Text(props: TextProps) {
-  const asChild = props.asChild;
-  const sx = props.sx;
-  const children = props.children;
-  const restProps: StyleProps = {};
-  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
-    if (!typeIs(rawKey, "string")) {
-      continue;
-    }
-
-    if (rawKey === "asChild" || rawKey === "sx" || rawKey === "children") {
-      continue;
-    }
-
-    restProps[rawKey] = value;
-  }
-
-  const { theme } = useTheme();
-  const mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme));
-
-  if (asChild) {
-    if (!React.isValidElement(children)) {
-      error("[Text] `asChild` requires a single child element.");
-    }
-
-    return <Slot {...mergedProps}>{children}</Slot>;
-  }
-
-  return React.createElement("textlabel", mergedProps as never, children);
-}

package/src/recipe/createRecipe.ts

@@ -1,85 +0,0 @@
-import { mergeGuiProps } from "../sx/mergeGuiProps";
-import type { Sx } from "../sx/sx";
-import { resolveSx } from "../sx/sx";
-import type { Theme } from "../theme/types";
-
-type GuiPropRecord = Record<string, unknown>;
-
-export type RecipeVariants<Props extends GuiPropRecord> = Record<string, Record<string, Sx<Props>>>;
-export type RecipeSelection<Variants extends RecipeVariants<GuiPropRecord>> = Partial<
-  Record<keyof Variants & string, string>
->;
-
-export type RecipeConfig<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>> = {
-  base?: Sx<Props>;
-  variants?: Variants;
-  defaultVariants?: RecipeSelection<Variants>;
-  compoundVariants?: Array<{
-    variants: RecipeSelection<Variants>;
-    sx: Sx<Props>;
-  }>;
-};
-
-function isCompoundMatch<Variants extends RecipeVariants<GuiPropRecord>>(
-  candidate: RecipeSelection<Variants>,
-  resolvedSelection: RecipeSelection<Variants>,
-) {
-  const candidateRecord = candidate as Record<string, string | undefined>;
-  const resolvedRecord = resolvedSelection as Record<string, string | undefined>;
-
-  for (const [rawVariantName, rawExpectedValue] of pairs(candidateRecord)) {
-    if (!typeIs(rawVariantName, "string") || !typeIs(rawExpectedValue, "string")) {
-      continue;
-    }
-
-    const actualValue = resolvedRecord[rawVariantName];
-    if (actualValue !== rawExpectedValue) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function createRecipe<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>>(
-  config: RecipeConfig<Props, Variants>,
-) {
-  return (selection: RecipeSelection<Variants> | undefined, theme: Theme): Partial<Props> => {
-    const resolvedSelection = {
-      ...(config.defaultVariants ?? {}),
-      ...(selection ?? {}),
-    } as RecipeSelection<Variants>;
-
-    let merged = resolveSx(config.base, theme);
-
-    const variants = config.variants;
-    if (variants) {
-      const variantsRecord = variants as Record<string, Record<string, Sx<Props>>>;
-      const resolvedRecord = resolvedSelection as Record<string, string | undefined>;
-
-      for (const [rawVariantName, rawVariantMap] of pairs(variantsRecord)) {
-        if (!typeIs(rawVariantName, "string") || !typeIs(rawVariantMap, "table")) {
-          continue;
-        }
-
-        const selectedValue = resolvedRecord[rawVariantName];
-        if (selectedValue === undefined) {
-          continue;
-        }
-
-        const sx = rawVariantMap[selectedValue];
-        merged = mergeGuiProps(merged, resolveSx(sx, theme));
-      }
-    }
-
-    for (const compound of config.compoundVariants ?? []) {
-      if (!isCompoundMatch(compound.variants, resolvedSelection)) {
-        continue;
-      }
-
-      merged = mergeGuiProps(merged, resolveSx(compound.sx, theme));
-    }
-
-    return merged;
-  };
-}

package/src/sx/mergeGuiProps.ts

@@ -1,87 +0,0 @@
-type GuiHandler = (...args: unknown[]) => void;
-type GuiHandlerTable = Partial<Record<string, GuiHandler>>;
-type GuiPropRecord = Record<string, unknown>;
-
-function isRecord(value: unknown): value is GuiPropRecord {
-  return typeIs(value, "table");
-}
-
-function isFn(value: unknown): value is GuiHandler {
-  return typeIs(value, "function");
-}
-
-function toHandlerTable(value: unknown): GuiHandlerTable | undefined {
-  if (!isRecord(value)) {
-    return undefined;
-  }
-
-  const out: GuiHandlerTable = {};
-  for (const [rawKey, candidate] of pairs(value)) {
-    if (!typeIs(rawKey, "string") || !isFn(candidate)) {
-      continue;
-    }
-
-    out[rawKey] = candidate;
-  }
-
-  return next(out)[0] !== undefined ? out : undefined;
-}
-
-function mergeHandlerTables(tables: Array<GuiHandlerTable | undefined>): GuiHandlerTable | undefined {
-  const out: GuiHandlerTable = {};
-
-  for (const handlerTable of tables) {
-    if (!handlerTable) {
-      continue;
-    }
-
-    for (const [rawKey, candidate] of pairs(handlerTable)) {
-      if (!typeIs(rawKey, "string") || !isFn(candidate)) {
-        continue;
-      }
-
-      const previous = out[rawKey];
-      out[rawKey] =
-        previous !== undefined
-          ? (...args: unknown[]) => {
-              previous(...args);
-              candidate(...args);
-            }
-          : candidate;
-    }
-  }
-
-  return next(out)[0] !== undefined ? out : undefined;
-}
-
-export function mergeGuiProps<Props extends GuiPropRecord>(
-  base?: Partial<Props>,
-  variant?: Partial<Props>,
-  user?: Partial<Props>,
-): Partial<Props> {
-  const merged = {
-    ...(base ?? {}),
-    ...(variant ?? {}),
-    ...(user ?? {}),
-  } as Partial<Props>;
-
-  const mergedEvent = mergeHandlerTables([
-    toHandlerTable(base?.Event),
-    toHandlerTable(variant?.Event),
-    toHandlerTable(user?.Event),
-  ]);
-  if (mergedEvent) {
-    (merged as GuiPropRecord).Event = mergedEvent;
-  }
-
-  const mergedChange = mergeHandlerTables([
-    toHandlerTable(base?.Change),
-    toHandlerTable(variant?.Change),
-    toHandlerTable(user?.Change),
-  ]);
-  if (mergedChange) {
-    (merged as GuiPropRecord).Change = mergedChange;
-  }
-
-  return merged;
-}

package/src/sx/sx.ts

@@ -1,35 +0,0 @@
-import type { Theme } from "../theme/types";
-import { mergeGuiProps } from "./mergeGuiProps";
-
-type GuiPropRecord = Record<string, unknown>;
-
-export type Sx<Props extends GuiPropRecord> = Partial<Props> | ((theme: Theme) => Partial<Props>) | undefined;
-
-function isSxResolver<Props extends GuiPropRecord>(sx: Sx<Props>): sx is (theme: Theme) => Partial<Props> {
-  return typeIs(sx, "function");
-}
-
-export function resolveSx<Props extends GuiPropRecord>(sx: Sx<Props>, theme: Theme): Partial<Props> {
-  if (!sx) {
-    return {};
-  }
-
-  if (isSxResolver(sx)) {
-    return sx(theme);
-  }
-
-  return sx;
-}
-
-export function mergeSx<Props extends GuiPropRecord>(...sxList: Array<Sx<Props>>): Sx<Props> {
-  return (theme) => {
-    let merged: Partial<Props> = {};
-
-    for (const sx of sxList) {
-      const resolved = resolveSx(sx, theme);
-      merged = mergeGuiProps(merged, resolved);
-    }
-
-    return merged;
-  };
-}

package/src/theme/ThemeProvider.tsx

@@ -1,41 +0,0 @@
-import { createStrictContext, React } from "@lattice-ui/core";
-import { defaultLightTheme } from "./tokens";
-import type { Theme, ThemeContextValue, ThemeProviderProps } from "./types";
-
-const [ThemeContextProvider, useThemeContext] = createStrictContext<ThemeContextValue>("ThemeProvider");
-
-export function ThemeProvider(props: ThemeProviderProps) {
-  const [internalTheme, setInternalTheme] = React.useState(props.defaultTheme ?? defaultLightTheme);
-  const controlled = props.theme !== undefined;
-  const resolvedTheme = props.theme ?? internalTheme;
-
-  const setTheme = React.useCallback(
-    (nextTheme: Theme) => {
-      if (!controlled) {
-        setInternalTheme(nextTheme);
-      }
-
-      props.onThemeChange?.(nextTheme);
-    },
-    [controlled, props.onThemeChange],
-  );
-
-  const contextValue = React.useMemo(
-    () => ({
-      theme: resolvedTheme,
-      setTheme,
-    }),
-    [resolvedTheme, setTheme],
-  );
-
-  return <ThemeContextProvider value={contextValue}>{props.children}</ThemeContextProvider>;
-}
-
-export function useTheme() {
-  return useThemeContext();
-}
-
-export function useThemeValue<T>(selector: (theme: Theme) => T): T {
-  const context = useThemeContext();
-  return React.useMemo(() => selector(context.theme), [context.theme, selector]);
-}

package/src/theme/tokens.ts

@@ -1,112 +0,0 @@
-import type { PartialTheme, Theme } from "./types";
-
-const defaultSpace = {
-  0: 0,
-  2: 2,
-  4: 4,
-  6: 6,
-  8: 8,
-  10: 10,
-  12: 12,
-  14: 14,
-  16: 16,
-  20: 20,
-  24: 24,
-  32: 32,
-};
-
-const defaultRadius = {
-  none: 0,
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  full: 999,
-};
-
-const defaultTypography = {
-  labelSm: {
-    font: Enum.Font.Gotham,
-    textSize: 14,
-  },
-  bodyMd: {
-    font: Enum.Font.Gotham,
-    textSize: 16,
-  },
-  titleMd: {
-    font: Enum.Font.GothamBold,
-    textSize: 22,
-  },
-};
-
-export const defaultLightTheme: Theme = {
-  colors: {
-    background: Color3.fromRGB(246, 249, 252),
-    surface: Color3.fromRGB(233, 239, 246),
-    surfaceElevated: Color3.fromRGB(255, 255, 255),
-    border: Color3.fromRGB(193, 202, 214),
-    textPrimary: Color3.fromRGB(27, 33, 44),
-    textSecondary: Color3.fromRGB(79, 90, 107),
-    accent: Color3.fromRGB(46, 114, 216),
-    accentContrast: Color3.fromRGB(239, 245, 252),
-    danger: Color3.fromRGB(167, 56, 64),
-    dangerContrast: Color3.fromRGB(254, 236, 238),
-    overlay: Color3.fromRGB(12, 16, 23),
-  },
-  space: defaultSpace,
-  radius: defaultRadius,
-  typography: defaultTypography,
-};
-
-export const defaultDarkTheme: Theme = {
-  colors: {
-    background: Color3.fromRGB(18, 21, 26),
-    surface: Color3.fromRGB(32, 37, 46),
-    surfaceElevated: Color3.fromRGB(40, 47, 60),
-    border: Color3.fromRGB(72, 80, 98),
-    textPrimary: Color3.fromRGB(233, 239, 246),
-    textSecondary: Color3.fromRGB(176, 186, 201),
-    accent: Color3.fromRGB(43, 105, 196),
-    accentContrast: Color3.fromRGB(240, 244, 250),
-    danger: Color3.fromRGB(129, 57, 63),
-    dangerContrast: Color3.fromRGB(245, 223, 226),
-    overlay: Color3.fromRGB(8, 10, 14),
-  },
-  space: defaultSpace,
-  radius: defaultRadius,
-  typography: defaultTypography,
-};
-
-function mergeTheme(baseTheme: Theme, partialTheme?: PartialTheme): Theme {
-  if (!partialTheme) {
-    return {
-      colors: { ...baseTheme.colors },
-      space: { ...baseTheme.space },
-      radius: { ...baseTheme.radius },
-      typography: { ...baseTheme.typography },
-    };
-  }
-
-  return {
-    colors: {
-      ...baseTheme.colors,
-      ...(partialTheme.colors ?? {}),
-    },
-    space: {
-      ...baseTheme.space,
-      ...(partialTheme.space ?? {}),
-    },
-    radius: {
-      ...baseTheme.radius,
-      ...(partialTheme.radius ?? {}),
-    },
-    typography: {
-      ...baseTheme.typography,
-      ...(partialTheme.typography ?? {}),
-    },
-  };
-}
-
-export function createTheme(partialTheme?: PartialTheme) {
-  return mergeTheme(defaultLightTheme, partialTheme);
-}

package/src/theme/types.ts

@@ -1,76 +0,0 @@
-import type React from "@rbxts/react";
-
-export type ThemeColors = {
-  background: Color3;
-  surface: Color3;
-  surfaceElevated: Color3;
-  border: Color3;
-  textPrimary: Color3;
-  textSecondary: Color3;
-  accent: Color3;
-  accentContrast: Color3;
-  danger: Color3;
-  dangerContrast: Color3;
-  overlay: Color3;
-};
-
-export type ThemeSpace = {
-  0: number;
-  2: number;
-  4: number;
-  6: number;
-  8: number;
-  10: number;
-  12: number;
-  14: number;
-  16: number;
-  20: number;
-  24: number;
-  32: number;
-};
-
-export type ThemeRadius = {
-  none: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  full: number;
-};
-
-export type ThemeTypographyStyle = {
-  font: Enum.Font;
-  textSize: number;
-};
-
-export type ThemeTypography = {
-  labelSm: ThemeTypographyStyle;
-  bodyMd: ThemeTypographyStyle;
-  titleMd: ThemeTypographyStyle;
-};
-
-export type Theme = {
-  colors: ThemeColors;
-  space: ThemeSpace;
-  radius: ThemeRadius;
-  typography: ThemeTypography;
-};
-
-export type PartialTheme = {
-  colors?: Partial<ThemeColors>;
-  space?: Partial<ThemeSpace>;
-  radius?: Partial<ThemeRadius>;
-  typography?: Partial<ThemeTypography>;
-};
-
-export type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (nextTheme: Theme) => void;
-};
-
-export type ThemeProviderProps = {
-  theme?: Theme;
-  defaultTheme?: Theme;
-  onThemeChange?: (nextTheme: Theme) => void;
-  children?: React.ReactNode;
-};

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-{
-  "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"]
-    }
-  }
-}