@lattice-ui/style 0.1.1 → 0.3.0

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/style",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "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.0"
   },
   "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"]
-    }
-  }
-}