@lattice-ui/core 0.1.1

package/out/context.d.ts

@@ -0,0 +1,2 @@
+import React from "@rbxts/react";
+export declare function createStrictContext<T>(name: string): readonly [React.Provider<T | undefined>, () => T];

package/out/context.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local function createStrictContext(name)
+	local Ctx = React.createContext(nil)
+	local function useCtx()
+		local v = React.useContext(Ctx)
+		if v == nil then
+			error(`[{name}] context is undefined. Wrap components with <{name}.Provider>.`)
+		end
+		return v
+	end
+	return { Ctx.Provider, useCtx }
+end
+return {
+	createStrictContext = createStrictContext,
+}

package/out/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./context";
+export { default as React } from "./react";
+export { default as ReactRoblox } from "./reactRoblox";
+export * from "./refs";
+export * from "./slot";
+export * from "./useControllableState";

package/out/init.luau

@@ -0,0 +1,18 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "context") or {} do
+	exports[_k] = _v
+end
+exports.React = TS.import(script, script, "react").default
+exports.ReactRoblox = TS.import(script, script, "reactRoblox").default
+for _k, _v in TS.import(script, script, "refs") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "slot") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "useControllableState") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/react.d.ts

@@ -0,0 +1,2 @@
+import React = require("@rbxts/react");
+export default React;

package/out/react.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local default = React
+return {
+	default = default,
+}

package/out/reactRoblox.d.ts

@@ -0,0 +1,2 @@
+import ReactRoblox = require("@rbxts/react-roblox");
+export default ReactRoblox;

package/out/reactRoblox.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local default = ReactRoblox
+return {
+	default = default,
+}

package/out/refs.d.ts

@@ -0,0 +1,5 @@
+import type React from "@rbxts/react";
+type AnyRef<T> = React.Ref<T> | React.ForwardedRef<T>;
+export declare function setRef<T>(ref: AnyRef<T> | undefined, value: T | undefined): void;
+export declare function composeRefs<T>(...refs: Array<AnyRef<T> | undefined>): (node: T | undefined) => void;
+export {};

package/out/refs.luau

@@ -0,0 +1,36 @@
+-- Compiled with roblox-ts v3.0.0
+local function isRefCallback(ref)
+	local _ref = ref
+	return type(_ref) == "function"
+end
+local function isMutableRefObject(ref)
+	local _ref = ref
+	local _condition = type(_ref) == "table"
+	if _condition then
+		_condition = ref.current ~= nil
+	end
+	return _condition
+end
+local function setRef(ref, value)
+	if isRefCallback(ref) then
+		ref(value)
+		return nil
+	end
+	if isMutableRefObject(ref) then
+		ref.current = value
+	end
+end
+local function composeRefs(...)
+	local refs = { ... }
+	return function(node)
+		for _, ref in refs do
+			if ref then
+				setRef(ref, node)
+			end
+		end
+	end
+end
+return {
+	setRef = setRef,
+	composeRefs = composeRefs,
+}

package/out/slot.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+type SlotRef = React.ForwardedRef<Instance>;
+type SlotPropBag = React.Attributes & Record<string, unknown>;
+export type SlotProps = {
+    children: React.ReactElement<SlotPropBag>;
+    ref?: SlotRef;
+} & SlotPropBag;
+export declare const Slot: React.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & React.RefAttributes<Instance>>;
+export {};

package/out/slot.luau

@@ -0,0 +1,111 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local composeRefs = TS.import(script, script.Parent, "refs").composeRefs
+local function isRecord(value)
+	local _value = value
+	return type(_value) == "table"
+end
+local function toSlotPropBag(value)
+	return if isRecord(value) then value else {}
+end
+local function isFn(value)
+	local _value = value
+	return type(_value) == "function"
+end
+local function toHandlerTable(value)
+	if not isRecord(value) then
+		return nil
+	end
+	local out = {}
+	for rawKey, candidate in pairs(value) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if isFn(candidate) then
+			out[rawKey] = candidate
+		end
+	end
+	return if (next(out)) ~= nil then out else nil
+end
+local isInstanceRefCallback, isInstanceMutableRefObject
+local function toForwardedRef(value)
+	if value == nil then
+		return nil
+	end
+	if isInstanceRefCallback(value) then
+		return value
+	end
+	if isInstanceMutableRefObject(value) then
+		return value
+	end
+	return nil
+end
+function isInstanceRefCallback(value)
+	local _value = value
+	return type(_value) == "function"
+end
+function isInstanceMutableRefObject(value)
+	local _value = value
+	local _condition = type(_value) == "table"
+	if _condition then
+		_condition = value.current ~= nil
+	end
+	return _condition
+end
+local function mergeHandlerTable(a, b)
+	if not a then
+		return b
+	end
+	if not b then
+		return a
+	end
+	local _object = table.clone(a)
+	setmetatable(_object, nil)
+	local out = _object
+	for rawKey, candidate in pairs(b) do
+		if not (type(rawKey) == "string") or not isFn(candidate) then
+			continue
+		end
+		local af = a[rawKey]
+		local bf = candidate
+		out[rawKey] = if af and bf then function(...)
+			local args = { ... }
+			bf(unpack(args))
+			af(unpack(args))
+		end else (bf or af)
+	end
+	return out
+end
+local Slot = React.forwardRef(function(props, forwardedRef)
+	local child = props.children
+	local childProps = toSlotPropBag(child.props)
+	local _object = table.clone(props)
+	setmetatable(_object, nil)
+	for _k, _v in childProps do
+		_object[_k] = _v
+	end
+	local mergedProps = _object
+	mergedProps.children = childProps.children
+	local slotEvent = toHandlerTable(props.Event)
+	local childEvent = toHandlerTable(childProps.Event)
+	local slotChange = toHandlerTable(props.Change)
+	local childChange = toHandlerTable(childProps.Change)
+	local Event = mergeHandlerTable(slotEvent, childEvent)
+	local Change = mergeHandlerTable(slotChange, childChange)
+	if Event then
+		mergedProps.Event = Event
+	end
+	if Change then
+		mergedProps.Change = Change
+	end
+	local slotRef = toForwardedRef(props.ref)
+	local childRef = toForwardedRef(childProps.ref)
+	local mergedRef = composeRefs(childRef, forwardedRef, slotRef)
+	mergedProps.ref = mergedRef
+	return React.cloneElement(child, mergedProps)
+end)
+Slot.displayName = "Slot"
+return {
+	Slot = Slot,
+}

package/out/useControllableState.d.ts

@@ -0,0 +1,7 @@
+type Props<T> = {
+    value?: T;
+    defaultValue: T;
+    onChange?: (next: T) => void;
+};
+export declare function useControllableState<T>({ value, defaultValue, onChange }: Props<T>): readonly [T, (nextValue: T | ((prev: T) => T)) => void];
+export {};

package/out/useControllableState.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local function isUpdater(value)
+	local _value = value
+	return type(_value) == "function"
+end
+local function useControllableState(_param)
+	local value = _param.value
+	local defaultValue = _param.defaultValue
+	local onChange = _param.onChange
+	local inner, setInner = React.useState(defaultValue)
+	local controlled = value ~= nil
+	local state = if value ~= nil then value else inner
+	local setState = React.useCallback(function(nextValue)
+		local computed = if isUpdater(nextValue) then nextValue(state) else nextValue
+		if not controlled then
+			setInner(computed)
+		end
+		local _result = onChange
+		if _result ~= nil then
+			_result(computed)
+		end
+	end, { controlled, onChange, state })
+	return { state, setState }
+end
+return {
+	useControllableState = useControllableState,
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@lattice-ui/core",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "prebuild": "node ./scripts/ensure-hoisted-links.mjs",
+    "build": "rbxtsc -p tsconfig.json",
+    "prewatch": "node ./scripts/ensure-hoisted-links.mjs",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/scripts/ensure-hoisted-links.mjs

@@ -0,0 +1,35 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const packageDir = path.resolve(scriptDir, "..");
+const packageNodeModulesDir = path.join(packageDir, "node_modules");
+const rootNodeModulesDir = path.resolve(packageDir, "../../node_modules");
+const scopedDirs = ["@rbxts", "@rbxts-js"];
+const symlinkType = process.platform === "win32" ? "junction" : "dir";
+
+fs.mkdirSync(packageNodeModulesDir, { recursive: true });
+
+for (const scopedDir of scopedDirs) {
+  const targetPath = path.join(rootNodeModulesDir, scopedDir);
+  const linkPath = path.join(packageNodeModulesDir, scopedDir);
+
+  if (!fs.existsSync(targetPath)) {
+    continue;
+  }
+
+  let shouldRelink = true;
+  if (fs.existsSync(linkPath)) {
+    const current = fs.realpathSync(linkPath);
+    const expected = fs.realpathSync(targetPath);
+    shouldRelink = current !== expected;
+  }
+
+  if (!shouldRelink) {
+    continue;
+  }
+
+  fs.rmSync(linkPath, { recursive: true, force: true });
+  fs.symlinkSync(targetPath, linkPath, symlinkType);
+}

package/src/context.ts

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+
+export function createStrictContext<T>(name: string) {
+  const Ctx = React.createContext<T | undefined>(undefined);
+
+  function useCtx(): T {
+    const v = React.useContext(Ctx);
+    if (v === undefined) {
+      error(`[${name}] context is undefined. Wrap components with <${name}.Provider>.`);
+    }
+    return v;
+  }
+
+  return [Ctx.Provider, useCtx] as const;
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./context";
+export { default as React } from "./react";
+export { default as ReactRoblox } from "./reactRoblox";
+export * from "./refs";
+export * from "./slot";
+export * from "./useControllableState";

package/src/react.ts

@@ -0,0 +1,3 @@
+import React = require("@rbxts/react");
+
+export default React;

package/src/reactRoblox.ts

@@ -0,0 +1,3 @@
+import ReactRoblox = require("@rbxts/react-roblox");
+
+export default ReactRoblox;

package/src/refs.ts

@@ -0,0 +1,28 @@
+import type React from "@rbxts/react";
+
+type AnyRef<T> = React.Ref<T> | React.ForwardedRef<T>;
+type RefCallback<T> = (value: T | undefined) => void;
+
+function isRefCallback<T>(ref: AnyRef<T> | undefined): ref is RefCallback<T> {
+  return typeIs(ref, "function");
+}
+
+function isMutableRefObject<T>(ref: AnyRef<T> | undefined): ref is React.MutableRefObject<T | undefined> {
+  return typeIs(ref, "table") && "current" in ref;
+}
+
+export function setRef<T>(ref: AnyRef<T> | undefined, value: T | undefined) {
+  if (isRefCallback(ref)) {
+    ref(value);
+    return;
+  }
+  if (isMutableRefObject(ref)) {
+    ref.current = value;
+  }
+}
+
+export function composeRefs<T>(...refs: Array<AnyRef<T> | undefined>) {
+  return (node: T | undefined) => {
+    for (const ref of refs) if (ref) setRef(ref, node);
+  };
+}

package/src/slot.tsx

@@ -0,0 +1,116 @@
+import React from "@rbxts/react";
+import { composeRefs } from "./refs";
+
+type Fn = (...args: unknown[]) => void;
+type HandlerTable = Partial<Record<string, Fn>>;
+type SlotRef = React.ForwardedRef<Instance>;
+type SlotPropBag = React.Attributes & Record<string, unknown>;
+type InstanceRefCallback = (instance: Instance | undefined) => void;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeIs(value, "table");
+}
+
+function toSlotPropBag(value: unknown): SlotPropBag {
+  return isRecord(value) ? (value as SlotPropBag) : {};
+}
+
+function isFn(value: unknown): value is Fn {
+  return typeIs(value, "function");
+}
+
+function toHandlerTable(value: unknown): HandlerTable | undefined {
+  if (!isRecord(value)) {
+    return undefined;
+  }
+
+  const out: HandlerTable = {};
+  for (const [rawKey, candidate] of pairs(value)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (isFn(candidate)) {
+      out[rawKey] = candidate;
+    }
+  }
+
+  return next(out)[0] !== undefined ? out : undefined;
+}
+
+function toForwardedRef(value: unknown): SlotRef | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  if (isInstanceRefCallback(value)) {
+    return value;
+  }
+
+  if (isInstanceMutableRefObject(value)) {
+    return value;
+  }
+
+  return undefined;
+}
+
+function isInstanceRefCallback(value: unknown): value is InstanceRefCallback {
+  return typeIs(value, "function");
+}
+
+function isInstanceMutableRefObject(value: unknown): value is React.MutableRefObject<Instance | undefined> {
+  return typeIs(value, "table") && "current" in value;
+}
+
+function mergeHandlerTable(a?: HandlerTable, b?: HandlerTable) {
+  if (!a) return b;
+  if (!b) return a;
+  const out: HandlerTable = { ...a };
+  for (const [rawKey, candidate] of pairs(b)) {
+    if (!typeIs(rawKey, "string") || !isFn(candidate)) {
+      continue;
+    }
+
+    const af = a[rawKey];
+    const bf = candidate;
+    out[rawKey] =
+      af && bf
+        ? (...args) => {
+            bf(...args);
+            af(...args);
+          }
+        : (bf ?? af)!;
+  }
+  return out;
+}
+
+export type SlotProps = {
+  children: React.ReactElement<SlotPropBag>;
+  ref?: SlotRef;
+} & SlotPropBag;
+
+export const Slot = React.forwardRef<Instance, SlotProps>((props, forwardedRef) => {
+  const child = props.children;
+  const childProps = toSlotPropBag((child as { props?: unknown }).props);
+
+  const mergedProps: SlotPropBag = { ...props, ...childProps };
+  mergedProps.children = childProps.children;
+
+  const slotEvent = toHandlerTable(props.Event);
+  const childEvent = toHandlerTable(childProps.Event);
+  const slotChange = toHandlerTable(props.Change);
+  const childChange = toHandlerTable(childProps.Change);
+
+  const Event = mergeHandlerTable(slotEvent, childEvent);
+  const Change = mergeHandlerTable(slotChange, childChange);
+  if (Event) mergedProps.Event = Event;
+  if (Change) mergedProps.Change = Change;
+
+  const slotRef = toForwardedRef(props.ref);
+  const childRef = toForwardedRef(childProps.ref);
+  const mergedRef = composeRefs(childRef, forwardedRef, slotRef);
+  mergedProps.ref = mergedRef;
+
+  return React.cloneElement(child, mergedProps);
+});
+Slot.displayName = "Slot";

package/src/useControllableState.ts

@@ -0,0 +1,28 @@
+import React from "@rbxts/react";
+
+type Props<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (next: T) => void;
+};
+
+function isUpdater<T>(value: T | ((prev: T) => T)): value is (prev: T) => T {
+  return typeIs(value, "function");
+}
+
+export function useControllableState<T>({ value, defaultValue, onChange }: Props<T>) {
+  const [inner, setInner] = React.useState(defaultValue);
+  const controlled = value !== undefined;
+  const state = value !== undefined ? value : inner;
+
+  const setState = React.useCallback(
+    (nextValue: T | ((prev: T) => T)) => {
+      const computed = isUpdater(nextValue) ? nextValue(state) : nextValue;
+      if (!controlled) setInner(computed);
+      onChange?.(computed);
+    },
+    [controlled, onChange, state],
+  );
+
+  return [state, setState] as const;
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": ["./node_modules/@rbxts", "../../node_modules/@rbxts"],
+    "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"]
+    }
+  }
+}