@lattice-ui/checkbox 0.1.1

package/out/Checkbox/CheckboxIndicator.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { CheckboxIndicatorProps } from "./types";
+export declare function CheckboxIndicator(props: CheckboxIndicatorProps): React.JSX.Element | undefined;

package/out/Checkbox/CheckboxIndicator.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useCheckboxContext = TS.import(script, script.Parent, "context").useCheckboxContext
+local function CheckboxIndicator(props)
+	local checkboxContext = useCheckboxContext()
+	local visible = checkboxContext.checked ~= false
+	local forceMount = props.forceMount == true
+	if not visible and not forceMount then
+		return nil
+	end
+	local child = props.children
+	if props.asChild then
+		if not React.isValidElement(child) then
+			error("[CheckboxIndicator] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Visible = visible,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(240, 244, 252),
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(12, 12),
+		Visible = visible,
+	}, child)
+end
+return {
+	CheckboxIndicator = CheckboxIndicator,
+}

package/out/Checkbox/CheckboxRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { CheckboxProps } from "./types";
+export declare function CheckboxRoot(props: CheckboxProps): React.JSX.Element;

package/out/Checkbox/CheckboxRoot.luau

@@ -0,0 +1,81 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local useControllableState = _core.useControllableState
+local CheckboxContextProvider = TS.import(script, script.Parent, "context").CheckboxContextProvider
+local function getNextCheckedState(checked)
+	if checked == "indeterminate" then
+		return true
+	end
+	return not checked
+end
+local function CheckboxRoot(props)
+	local _object = {
+		value = props.checked,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultChecked
+	if _condition == nil then
+		_condition = false
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onCheckedChange
+	local _binding = useControllableState(_object)
+	local checked = _binding[1]
+	local setCheckedState = _binding[2]
+	local disabled = props.disabled == true
+	local required = props.required == true
+	local setChecked = React.useCallback(function(nextChecked)
+		if disabled then
+			return nil
+		end
+		setCheckedState(nextChecked)
+	end, { disabled, setCheckedState })
+	local toggle = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		setCheckedState(getNextCheckedState(checked))
+	end, { checked, disabled, setCheckedState })
+	local contextValue = React.useMemo(function()
+		return {
+			checked = checked,
+			setChecked = setChecked,
+			disabled = disabled,
+			required = required,
+		}
+	end, { checked, disabled, required, setChecked })
+	local child = props.children
+	return React.createElement(CheckboxContextProvider, {
+		value = contextValue,
+	}, if props.asChild then ((function()
+		if not React.isValidElement(child) then
+			error("[Checkbox] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Active = not disabled,
+			Event = {
+				Activated = toggle,
+			},
+			Selectable = not disabled,
+		}, child)
+	end)()) else (React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = if checked ~= false then Color3.fromRGB(88, 142, 255) else Color3.fromRGB(59, 66, 84),
+		BorderSizePixel = 0,
+		Event = {
+			Activated = toggle,
+		},
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(160, 36),
+		Text = if checked == "indeterminate" then "Indeterminate" elseif checked then "Checked" else "Unchecked",
+		TextColor3 = if disabled then Color3.fromRGB(145, 152, 168) else Color3.fromRGB(240, 244, 252),
+		TextSize = 15,
+	}, child)))
+end
+return {
+	CheckboxRoot = CheckboxRoot,
+}

package/out/Checkbox/context.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxContextValue } from "./types";
+declare const CheckboxContextProvider: import("@rbxts/react").Provider<CheckboxContextValue | undefined>, useCheckboxContext: () => CheckboxContextValue;
+export { CheckboxContextProvider, useCheckboxContext };

package/out/Checkbox/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Checkbox")
+local CheckboxContextProvider = _binding[1]
+local useCheckboxContext = _binding[2]
+return {
+	CheckboxContextProvider = CheckboxContextProvider,
+	useCheckboxContext = useCheckboxContext,
+}

package/out/Checkbox/types.d.ts

@@ -0,0 +1,23 @@
+import type React from "@rbxts/react";
+export type CheckedState = boolean | "indeterminate";
+export type CheckboxSetChecked = (checked: CheckedState) => void;
+export type CheckboxContextValue = {
+    checked: CheckedState;
+    setChecked: CheckboxSetChecked;
+    disabled: boolean;
+    required: boolean;
+};
+export type CheckboxProps = {
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    disabled?: boolean;
+    required?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+export type CheckboxIndicatorProps = {
+    forceMount?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};

package/out/Checkbox/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,3 @@
+export { CheckboxIndicator } from "./Checkbox/CheckboxIndicator";
+export { CheckboxRoot, CheckboxRoot as Checkbox } from "./Checkbox/CheckboxRoot";
+export type { CheckboxContextValue, CheckboxIndicatorProps, CheckboxProps, CheckedState } from "./Checkbox/types";

package/out/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.CheckboxIndicator = TS.import(script, script, "Checkbox", "CheckboxIndicator").CheckboxIndicator
+local _CheckboxRoot = TS.import(script, script, "Checkbox", "CheckboxRoot")
+exports.CheckboxRoot = _CheckboxRoot.CheckboxRoot
+exports.Checkbox = _CheckboxRoot.CheckboxRoot
+return exports

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/checkbox",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1"
+  },
+  "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": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/Checkbox/CheckboxIndicator.tsx

@@ -0,0 +1,34 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useCheckboxContext } from "./context";
+import type { CheckboxIndicatorProps } from "./types";
+
+export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const checkboxContext = useCheckboxContext();
+  const visible = checkboxContext.checked !== false;
+  const forceMount = props.forceMount === true;
+
+  if (!visible && !forceMount) {
+    return undefined;
+  }
+
+  const child = props.children;
+
+  if (props.asChild) {
+    if (!React.isValidElement(child)) {
+      error("[CheckboxIndicator] `asChild` requires a child element.");
+    }
+
+    return <Slot Visible={visible}>{child}</Slot>;
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(240, 244, 252)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(12, 12)}
+      Visible={visible}
+    >
+      {child}
+    </frame>
+  );
+}

package/src/Checkbox/CheckboxRoot.tsx

@@ -0,0 +1,86 @@
+import { React, Slot, useControllableState } from "@lattice-ui/core";
+import { CheckboxContextProvider } from "./context";
+import type { CheckboxProps, CheckedState } from "./types";
+
+function getNextCheckedState(checked: CheckedState) {
+  if (checked === "indeterminate") {
+    return true;
+  }
+
+  return !checked;
+}
+
+export function CheckboxRoot(props: CheckboxProps) {
+  const [checked, setCheckedState] = useControllableState<CheckedState>({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange,
+  });
+
+  const disabled = props.disabled === true;
+  const required = props.required === true;
+
+  const setChecked = React.useCallback(
+    (nextChecked: CheckedState) => {
+      if (disabled) {
+        return;
+      }
+
+      setCheckedState(nextChecked);
+    },
+    [disabled, setCheckedState],
+  );
+
+  const toggle = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    setCheckedState(getNextCheckedState(checked));
+  }, [checked, disabled, setCheckedState]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      checked,
+      setChecked,
+      disabled,
+      required,
+    }),
+    [checked, disabled, required, setChecked],
+  );
+
+  const child = props.children;
+
+  return (
+    <CheckboxContextProvider value={contextValue}>
+      {props.asChild ? (
+        (() => {
+          if (!React.isValidElement(child)) {
+            error("[Checkbox] `asChild` requires a child element.");
+          }
+
+          return (
+            <Slot Active={!disabled} Event={{ Activated: toggle }} Selectable={!disabled}>
+              {child}
+            </Slot>
+          );
+        })()
+      ) : (
+        <textbutton
+          Active={!disabled}
+          AutoButtonColor={false}
+          BackgroundColor3={checked !== false ? Color3.fromRGB(88, 142, 255) : Color3.fromRGB(59, 66, 84)}
+          BorderSizePixel={0}
+          Event={{ Activated: toggle }}
+          Selectable={!disabled}
+          Size={UDim2.fromOffset(160, 36)}
+          Text={checked === "indeterminate" ? "Indeterminate" : checked ? "Checked" : "Unchecked"}
+          TextColor3={disabled ? Color3.fromRGB(145, 152, 168) : Color3.fromRGB(240, 244, 252)}
+          TextSize={15}
+        >
+          {child}
+        </textbutton>
+      )}
+    </CheckboxContextProvider>
+  );
+}

package/src/Checkbox/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { CheckboxContextValue } from "./types";
+
+const [CheckboxContextProvider, useCheckboxContext] = createStrictContext<CheckboxContextValue>("Checkbox");
+
+export { CheckboxContextProvider, useCheckboxContext };

package/src/Checkbox/types.ts

@@ -0,0 +1,28 @@
+import type React from "@rbxts/react";
+
+export type CheckedState = boolean | "indeterminate";
+
+export type CheckboxSetChecked = (checked: CheckedState) => void;
+
+export type CheckboxContextValue = {
+  checked: CheckedState;
+  setChecked: CheckboxSetChecked;
+  disabled: boolean;
+  required: boolean;
+};
+
+export type CheckboxProps = {
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+  onCheckedChange?: (checked: CheckedState) => void;
+  disabled?: boolean;
+  required?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type CheckboxIndicatorProps = {
+  forceMount?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { CheckboxIndicator } from "./Checkbox/CheckboxIndicator";
+export { CheckboxRoot, CheckboxRoot as Checkbox } from "./Checkbox/CheckboxRoot";
+export type { CheckboxContextValue, CheckboxIndicatorProps, CheckboxProps, CheckedState } from "./Checkbox/types";

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"]
+    }
+  }
+}