@lattice-ui/switch 0.4.3 → 0.5.0-next.1

package/default.project.json

@@ -0,0 +1,9 @@
+{
+  "name": "switch",
+  "tree": {
+    "$path": "out",
+    "out": {
+      "$path": "out"
+    }
+  }
+}

package/out/Switch/SwitchRoot.luau

@@ -4,7 +4,12 @@ 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 _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createToggleResponseRecipe = _motion.createToggleResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local SwitchContextProvider = TS.import(script, script.Parent, "context").SwitchContextProvider
+local TRACK_ON_COLOR = Color3.fromRGB(86, 141, 255)
+local TRACK_OFF_COLOR = Color3.fromRGB(66, 73, 91)
 local function SwitchRoot(props)
 	local _object = {
 		value = props.checked,
@@ -20,6 +25,14 @@ local function SwitchRoot(props)
 	local checked = _binding[1]
 	local setCheckedState = _binding[2]
 	local disabled = props.disabled == true
+	local motionRef = useResponseMotion(checked, {
+		active = {
+			BackgroundColor3 = TRACK_ON_COLOR,
+		},
+		inactive = {
+			BackgroundColor3 = TRACK_OFF_COLOR,
+		},
+	}, createToggleResponseRecipe())
 	local setChecked = React.useCallback(function(nextChecked)
 		if disabled then
 			return nil
@@ -52,11 +65,11 @@ local function SwitchRoot(props)
 				Activated = toggle,
 			},
 			Selectable = not disabled,
+			ref = motionRef,
 		}, 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,
@@ -66,6 +79,7 @@ local function SwitchRoot(props)
 		Text = if checked then "On" else "Off",
 		TextColor3 = if disabled then Color3.fromRGB(145, 152, 168) else Color3.fromRGB(240, 244, 252),
 		TextSize = 15,
+		ref = motionRef,
 	}, child)))
 end
 return {

package/out/Switch/SwitchThumb.luau

@@ -3,21 +3,36 @@ 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 _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createToggleResponseRecipe = _motion.createToggleResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local useSwitchContext = TS.import(script, script.Parent, "context").useSwitchContext
+local UNCHECKED_THUMB_POSITION = UDim2.fromOffset(2, 2)
+local CHECKED_THUMB_POSITION = UDim2.new(1, -18, 0, 2)
 local function SwitchThumb(props)
 	local switchContext = useSwitchContext()
+	local motionRef = useResponseMotion(switchContext.checked, {
+		active = {
+			Position = CHECKED_THUMB_POSITION,
+		},
+		inactive = {
+			Position = UNCHECKED_THUMB_POSITION,
+		},
+	}, createToggleResponseRecipe())
 	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, nil, child)
+		return React.createElement(Slot, {
+			ref = motionRef,
+		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(240, 244, 252),
 		BorderSizePixel = 0,
-		Position = if switchContext.checked then UDim2.new(1, -18, 0, 2) else UDim2.fromOffset(2, 2),
 		Size = UDim2.fromOffset(16, 16),
+		ref = motionRef,
 	}, child)
 end
 return {

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@lattice-ui/switch",
-  "version": "0.4.3",
+  "version": "0.5.0-next.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "source": "src/index.ts",
   "files": [
+    "default.project.json",
     "out",
+    "src",
     "README.md"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/astra-void/lattice-ui.git"
+  },
   "dependencies": {
-    "@lattice-ui/core": "0.4.3"
+    "@lattice-ui/core": "0.5.0-next.1",
+    "@lattice-ui/motion": "0.5.0-next.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -21,6 +29,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Switch/SwitchRoot.tsx

@@ -0,0 +1,87 @@
+import { React, Slot, useControllableState } from "@lattice-ui/core";
+import { createToggleResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
+import { SwitchContextProvider } from "./context";
+import type { SwitchProps } from "./types";
+
+const TRACK_ON_COLOR = Color3.fromRGB(86, 141, 255);
+const TRACK_OFF_COLOR = Color3.fromRGB(66, 73, 91);
+
+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 motionRef = useResponseMotion<GuiObject>(
+    checked,
+    {
+      active: { BackgroundColor3: TRACK_ON_COLOR },
+      inactive: { BackgroundColor3: TRACK_OFF_COLOR },
+    },
+    createToggleResponseRecipe(),
+  );
+
+  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} ref={motionRef}>
+              {child}
+            </Slot>
+          );
+        })()
+      ) : (
+        <textbutton
+          Active={!disabled}
+          AutoButtonColor={false}
+          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}
+          ref={motionRef as React.MutableRefObject<TextButton>}
+        >
+          {child}
+        </textbutton>
+      )}
+    </SwitchContextProvider>
+  );
+}

package/src/Switch/SwitchThumb.tsx

@@ -0,0 +1,41 @@
+import { React, Slot } from "@lattice-ui/core";
+import { createToggleResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
+import { useSwitchContext } from "./context";
+import type { SwitchThumbProps } from "./types";
+
+const UNCHECKED_THUMB_POSITION = UDim2.fromOffset(2, 2);
+const CHECKED_THUMB_POSITION = new UDim2(1, -18, 0, 2);
+
+export function SwitchThumb(props: SwitchThumbProps) {
+  const switchContext = useSwitchContext();
+
+  const motionRef = useResponseMotion<GuiObject>(
+    switchContext.checked,
+    {
+      active: { Position: CHECKED_THUMB_POSITION },
+      inactive: { Position: UNCHECKED_THUMB_POSITION },
+    },
+    createToggleResponseRecipe(),
+  );
+
+  const child = props.children;
+
+  if (props.asChild) {
+    if (!React.isValidElement(child)) {
+      error("[SwitchThumb] `asChild` requires a child element.");
+    }
+
+    return <Slot ref={motionRef}>{child}</Slot>;
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(240, 244, 252)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(16, 16)}
+      ref={motionRef as React.MutableRefObject<Frame>}
+    >
+      {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,9 @@
+import { SwitchRoot } from "./Switch/SwitchRoot";
+import { SwitchThumb } from "./Switch/SwitchThumb";
+
+export const Switch = {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb,
+} as const;
+
+export type { SwitchContextValue, SwitchProps, SwitchThumbProps } from "./Switch/types";