@lattice-ui/switch 0.1.1

package/out/Switch/SwitchRoot.d.ts

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

package/out/Switch/SwitchRoot.luau

@@ -0,0 +1,73 @@
+-- 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 SwitchContextProvider = TS.import(script, script.Parent, "context").SwitchContextProvider
+local function SwitchRoot(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 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(not checked)
+	end, { checked, disabled, setCheckedState })
+	local contextValue = React.useMemo(function()
+		return {
+			checked = checked,
+			setChecked = setChecked,
+			disabled = disabled,
+		}
+	end, { checked, disabled, setChecked })
+	local child = props.children
+	return React.createElement(SwitchContextProvider, {
+		value = contextValue,
+	}, if props.asChild then ((function()
+		if not React.isValidElement(child) then
+			error("[Switch] `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 then Color3.fromRGB(86, 141, 255) else Color3.fromRGB(66, 73, 91),
+		BorderSizePixel = 0,
+		Event = {
+			Activated = toggle,
+		},
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(160, 36),
+		Text = if checked then "On" else "Off",
+		TextColor3 = if disabled then Color3.fromRGB(145, 152, 168) else Color3.fromRGB(240, 244, 252),
+		TextSize = 15,
+	}, child)))
+end
+return {
+	SwitchRoot = SwitchRoot,
+}

package/out/Switch/SwitchThumb.d.ts

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

package/out/Switch/SwitchThumb.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 useSwitchContext = TS.import(script, script.Parent, "context").useSwitchContext
+local function SwitchThumb(props)
+	local switchContext = useSwitchContext()
+	local visible = switchContext.checked
+	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("[SwitchThumb] `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(16, 16),
+		Visible = visible,
+	}, child)
+end
+return {
+	SwitchThumb = SwitchThumb,
+}

package/out/Switch/context.d.ts

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

package/out/Switch/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("Switch")
+local SwitchContextProvider = _binding[1]
+local useSwitchContext = _binding[2]
+return {
+	SwitchContextProvider = SwitchContextProvider,
+	useSwitchContext = useSwitchContext,
+}

package/out/Switch/types.d.ts

@@ -0,0 +1,20 @@
+import type React from "@rbxts/react";
+export type SwitchSetChecked = (checked: boolean) => void;
+export type SwitchContextValue = {
+    checked: boolean;
+    setChecked: SwitchSetChecked;
+    disabled: boolean;
+};
+export type SwitchProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+export type SwitchThumbProps = {
+    forceMount?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};

package/out/Switch/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 { SwitchRoot, SwitchRoot as Switch } from "./Switch/SwitchRoot";
+export { SwitchThumb } from "./Switch/SwitchThumb";
+export type { SwitchContextValue, SwitchProps, SwitchThumbProps } from "./Switch/types";

package/out/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _SwitchRoot = TS.import(script, script, "Switch", "SwitchRoot")
+exports.SwitchRoot = _SwitchRoot.SwitchRoot
+exports.Switch = _SwitchRoot.SwitchRoot
+exports.SwitchThumb = TS.import(script, script, "Switch", "SwitchThumb").SwitchThumb
+return exports

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/switch",
+  "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/Switch/SwitchRoot.tsx

@@ -0,0 +1,76 @@
+import { React, Slot, useControllableState } from "@lattice-ui/core";
+import { SwitchContextProvider } from "./context";
+import type { SwitchProps } from "./types";
+
+export function SwitchRoot(props: SwitchProps) {
+  const [checked, setCheckedState] = useControllableState<boolean>({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange,
+  });
+
+  const disabled = props.disabled === true;
+
+  const setChecked = React.useCallback(
+    (nextChecked: boolean) => {
+      if (disabled) {
+        return;
+      }
+
+      setCheckedState(nextChecked);
+    },
+    [disabled, setCheckedState],
+  );
+
+  const toggle = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    setCheckedState(!checked);
+  }, [checked, disabled, setCheckedState]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      checked,
+      setChecked,
+      disabled,
+    }),
+    [checked, disabled, setChecked],
+  );
+
+  const child = props.children;
+
+  return (
+    <SwitchContextProvider value={contextValue}>
+      {props.asChild ? (
+        (() => {
+          if (!React.isValidElement(child)) {
+            error("[Switch] `asChild` requires a child element.");
+          }
+
+          return (
+            <Slot Active={!disabled} Event={{ Activated: toggle }} Selectable={!disabled}>
+              {child}
+            </Slot>
+          );
+        })()
+      ) : (
+        <textbutton
+          Active={!disabled}
+          AutoButtonColor={false}
+          BackgroundColor3={checked ? Color3.fromRGB(86, 141, 255) : Color3.fromRGB(66, 73, 91)}
+          BorderSizePixel={0}
+          Event={{ Activated: toggle }}
+          Selectable={!disabled}
+          Size={UDim2.fromOffset(160, 36)}
+          Text={checked ? "On" : "Off"}
+          TextColor3={disabled ? Color3.fromRGB(145, 152, 168) : Color3.fromRGB(240, 244, 252)}
+          TextSize={15}
+        >
+          {child}
+        </textbutton>
+      )}
+    </SwitchContextProvider>
+  );
+}

package/src/Switch/SwitchThumb.tsx

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

package/src/Switch/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { SwitchContextValue } from "./types";
+
+const [SwitchContextProvider, useSwitchContext] = createStrictContext<SwitchContextValue>("Switch");
+
+export { SwitchContextProvider, useSwitchContext };

package/src/Switch/types.ts

@@ -0,0 +1,24 @@
+import type React from "@rbxts/react";
+
+export type SwitchSetChecked = (checked: boolean) => void;
+
+export type SwitchContextValue = {
+  checked: boolean;
+  setChecked: SwitchSetChecked;
+  disabled: boolean;
+};
+
+export type SwitchProps = {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type SwitchThumbProps = {
+  forceMount?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { SwitchRoot, SwitchRoot as Switch } from "./Switch/SwitchRoot";
+export { SwitchThumb } from "./Switch/SwitchThumb";
+export type { SwitchContextValue, SwitchProps, SwitchThumbProps } from "./Switch/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"]
+    }
+  }
+}