@lattice-ui/radio-group 0.4.3 → 0.5.0-next.1

package/default.project.json

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

package/out/RadioGroup/RadioGroupIndicator.d.ts

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

package/out/RadioGroup/RadioGroupIndicator.luau

@@ -3,29 +3,58 @@ 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 Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createIndicatorRevealRecipe = _motion.createIndicatorRevealRecipe
+local usePresenceMotion = _motion.usePresenceMotion
 local useRadioGroupItemContext = TS.import(script, script.Parent, "context").useRadioGroupItemContext
-local function RadioGroupIndicator(props)
-	local radioGroupItemContext = useRadioGroupItemContext()
-	local visible = radioGroupItemContext.checked
-	local forceMount = props.forceMount == true
-	if not visible and not forceMount then
-		return nil
-	end
-	local child = props.children
+local function RadioGroupIndicatorImpl(props)
+	local motionRef = usePresenceMotion(props.motionPresent, props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)), props.onExitComplete)
 	if props.asChild then
+		local child = props.children
 		if not React.isValidElement(child) then
 			error("[RadioGroupIndicator] `asChild` requires a child element.")
 		end
 		return React.createElement(Slot, {
-			Visible = visible,
+			Visible = props.visible,
+			ref = motionRef,
 		}, child)
 	end
 	return React.createElement("frame", {
 		BackgroundColor3 = Color3.fromRGB(240, 244, 252),
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(10, 10),
-		Visible = visible,
-	}, child)
+		Visible = props.visible,
+		ref = motionRef,
+	}, props.children)
+end
+local function RadioGroupIndicator(props)
+	local radioGroupItemContext = useRadioGroupItemContext()
+	local visible = radioGroupItemContext.checked
+	local forceMount = props.forceMount == true
+	local transition = React.useMemo(function()
+		return props.transition or createIndicatorRevealRecipe(UDim2.fromOffset(10, 10))
+	end, { props.transition })
+	if forceMount then
+		return React.createElement(RadioGroupIndicatorImpl, {
+			asChild = props.asChild,
+			motionPresent = visible,
+			transition = transition,
+			visible = visible,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		present = visible,
+		render = function(state)
+			return React.createElement(RadioGroupIndicatorImpl, {
+				asChild = props.asChild,
+				motionPresent = state.isPresent,
+				onExitComplete = state.onExitComplete,
+				transition = transition,
+				visible = true,
+			}, props.children)
+		end,
+	})
 end
 return {
 	RadioGroupIndicator = RadioGroupIndicator,

package/out/RadioGroup/RadioGroupItem.luau

@@ -3,7 +3,10 @@ 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 useFocusNode = _core.useFocusNode
+local useFocusNode = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).useFocusNode
+local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
+local createSelectionResponseRecipe = _motion.createSelectionResponseRecipe
+local useResponseMotion = _motion.useResponseMotion
 local _context = TS.import(script, script.Parent, "context")
 local RadioGroupItemContextProvider = _context.RadioGroupItemContextProvider
 local useRadioGroupContext = _context.useRadioGroupContext
@@ -45,13 +48,19 @@ local function RadioGroupItem(props)
 			return disabledRef.current
 		end,
 	})
+	local motionRef = useResponseMotion(checked, {
+		active = {
+			BackgroundColor3 = Color3.fromRGB(88, 142, 255),
+		},
+		inactive = {
+			BackgroundColor3 = Color3.fromRGB(47, 53, 68),
+		},
+	}, props.transition or createSelectionResponseRecipe())
 	local setItemRef = React.useCallback(function(instance)
-		if not instance or not instance:IsA("GuiObject") then
-			itemRef.current = nil
-			return nil
-		end
-		itemRef.current = instance
-	end, {})
+		local nextItem = if not instance or not instance:IsA("GuiObject") then nil else instance
+		itemRef.current = nextItem
+		motionRef.current = nextItem
+	end, { motionRef })
 	local handleSelect = React.useCallback(function()
 		if disabled then
 			return nil

package/out/RadioGroup/RadioGroupRoot.luau

@@ -1,11 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
-local findOrderedSelectionEntry = _core.findOrderedSelectionEntry
-local focusOrderedSelectionEntry = _core.focusOrderedSelectionEntry
-local getRelativeOrderedSelectionEntry = _core.getRelativeOrderedSelectionEntry
 local React = _core.React
 local useControllableState = _core.useControllableState
+local _focus = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out)
+local findOrderedSelectionEntry = _focus.findOrderedSelectionEntry
+local focusOrderedSelectionEntry = _focus.focusOrderedSelectionEntry
+local getRelativeOrderedSelectionEntry = _focus.getRelativeOrderedSelectionEntry
 local RadioGroupContextProvider = TS.import(script, script.Parent, "context").RadioGroupContextProvider
 local function RadioGroupRoot(props)
 	local orientation = props.orientation or "vertical"

package/out/RadioGroup/types.d.ts

@@ -1,3 +1,4 @@
+import type { PresenceMotionConfig, ResponseMotionConfig } from "@lattice-ui/motion";
 import type React from "@rbxts/react";
 export type RadioGroupSetValue = (value: string) => void;
 export type RadioGroupOrientation = "horizontal" | "vertical";
@@ -31,12 +32,14 @@ export type RadioGroupProps = {
     children?: React.ReactNode;
 };
 export type RadioGroupItemProps = {
+    transition?: ResponseMotionConfig;
     value: string;
     disabled?: boolean;
     asChild?: boolean;
     children?: React.ReactElement;
 };
 export type RadioGroupIndicatorProps = {
+    transition?: PresenceMotionConfig;
     forceMount?: boolean;
     asChild?: boolean;
     children?: React.ReactNode;

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@lattice-ui/radio-group",
-  "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",
+    "@lattice-ui/layer": "0.5.0-next.1",
+    "@lattice-ui/focus": "0.5.0-next.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -21,6 +31,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/RadioGroup/RadioGroupIndicator.tsx

@@ -0,0 +1,86 @@
+import { React, Slot } from "@lattice-ui/core";
+import { Presence } from "@lattice-ui/layer";
+import { createIndicatorRevealRecipe, type PresenceMotionConfig, usePresenceMotion } from "@lattice-ui/motion";
+import { useRadioGroupItemContext } from "./context";
+import type { RadioGroupIndicatorProps } from "./types";
+
+function RadioGroupIndicatorImpl(props: {
+  motionPresent: boolean;
+  visible: boolean;
+  transition?: PresenceMotionConfig;
+  onExitComplete?: () => void;
+  asChild?: boolean;
+  children?: React.ReactNode;
+}) {
+  const motionRef = usePresenceMotion<Frame>(
+    props.motionPresent,
+    props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
+    props.onExitComplete,
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[RadioGroupIndicator] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Visible={props.visible} ref={motionRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(240, 244, 252)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(10, 10)}
+      Visible={props.visible}
+      ref={motionRef}
+    >
+      {props.children}
+    </frame>
+  );
+}
+
+export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
+  const radioGroupItemContext = useRadioGroupItemContext();
+  const visible = radioGroupItemContext.checked;
+  const forceMount = props.forceMount === true;
+
+  const transition = React.useMemo(
+    () => props.transition ?? createIndicatorRevealRecipe(UDim2.fromOffset(10, 10)),
+    [props.transition],
+  );
+
+  if (forceMount) {
+    return (
+      <RadioGroupIndicatorImpl
+        asChild={props.asChild}
+        motionPresent={visible}
+        transition={transition}
+        visible={visible}
+      >
+        {props.children}
+      </RadioGroupIndicatorImpl>
+    );
+  }
+
+  return (
+    <Presence
+      present={visible}
+      render={(state) => (
+        <RadioGroupIndicatorImpl
+          asChild={props.asChild}
+          motionPresent={state.isPresent}
+          onExitComplete={state.onExitComplete}
+          transition={transition}
+          visible={true}
+        >
+          {props.children}
+        </RadioGroupIndicatorImpl>
+      )}
+    />
+  );
+}

package/src/RadioGroup/RadioGroupItem.tsx

@@ -0,0 +1,167 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useFocusNode } from "@lattice-ui/focus";
+import { createSelectionResponseRecipe, useResponseMotion } from "@lattice-ui/motion";
+import { RadioGroupItemContextProvider, useRadioGroupContext } from "./context";
+import type { RadioGroupItemProps } from "./types";
+
+let nextItemId = 0;
+let nextItemOrder = 0;
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const radioGroupContext = useRadioGroupContext();
+  const disabled = radioGroupContext.disabled || props.disabled === true;
+  const checked = radioGroupContext.value === props.value;
+  const itemRef = React.useRef<GuiObject>();
+  const disabledRef = React.useRef(disabled);
+
+  React.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+
+  const itemIdRef = React.useRef(0);
+  if (itemIdRef.current === 0) {
+    nextItemId += 1;
+    itemIdRef.current = nextItemId;
+  }
+
+  const itemOrderRef = React.useRef(0);
+  if (itemOrderRef.current === 0) {
+    nextItemOrder += 1;
+    itemOrderRef.current = nextItemOrder;
+  }
+
+  React.useEffect(() => {
+    return radioGroupContext.registerItem({
+      id: itemIdRef.current,
+      value: props.value,
+      order: itemOrderRef.current,
+      ref: itemRef,
+      getDisabled: () => disabledRef.current,
+    });
+  }, [props.value, radioGroupContext]);
+
+  useFocusNode({
+    ref: itemRef,
+    getDisabled: () => disabledRef.current,
+  });
+
+  const motionRef = useResponseMotion<GuiObject>(
+    checked,
+    {
+      active: { BackgroundColor3: Color3.fromRGB(88, 142, 255) },
+      inactive: { BackgroundColor3: Color3.fromRGB(47, 53, 68) },
+    },
+    props.transition ?? createSelectionResponseRecipe(),
+  );
+
+  const setItemRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      const nextItem = !instance || !instance.IsA("GuiObject") ? undefined : instance;
+      itemRef.current = nextItem;
+      motionRef.current = nextItem;
+    },
+    [motionRef],
+  );
+
+  const handleSelect = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    radioGroupContext.setValue(props.value);
+  }, [disabled, props.value, radioGroupContext]);
+
+  const handleSelectionGained = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    radioGroupContext.setValue(props.value);
+  }, [disabled, props.value, radioGroupContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      const direction =
+        radioGroupContext.orientation === "horizontal"
+          ? keyCode === Enum.KeyCode.Left
+            ? -1
+            : keyCode === Enum.KeyCode.Right
+              ? 1
+              : undefined
+          : keyCode === Enum.KeyCode.Up
+            ? -1
+            : keyCode === Enum.KeyCode.Down
+              ? 1
+              : undefined;
+
+      if (direction !== undefined) {
+        radioGroupContext.moveSelection(props.value, direction);
+        return;
+      }
+
+      if (keyCode !== Enum.KeyCode.Return && keyCode !== Enum.KeyCode.Space) {
+        return;
+      }
+
+      radioGroupContext.setValue(props.value);
+    },
+    [disabled, props.value, radioGroupContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleSelect,
+      InputBegan: handleInputBegan,
+      SelectionGained: handleSelectionGained,
+    }),
+    [handleInputBegan, handleSelect, handleSelectionGained],
+  );
+
+  const itemContextValue = React.useMemo(
+    () => ({
+      checked,
+      disabled,
+    }),
+    [checked, disabled],
+  );
+
+  return (
+    <RadioGroupItemContextProvider value={itemContextValue}>
+      {props.asChild ? (
+        (() => {
+          const child = props.children;
+          if (!child) {
+            error("[RadioGroupItem] `asChild` requires a child element.");
+          }
+
+          return (
+            <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} ref={setItemRef}>
+              {child}
+            </Slot>
+          );
+        })()
+      ) : (
+        <textbutton
+          Active={!disabled}
+          AutoButtonColor={false}
+          BackgroundColor3={checked ? Color3.fromRGB(88, 142, 255) : Color3.fromRGB(47, 53, 68)}
+          BorderSizePixel={0}
+          Event={eventHandlers}
+          Selectable={!disabled}
+          Size={UDim2.fromOffset(170, 34)}
+          Text={props.value}
+          TextColor3={disabled ? Color3.fromRGB(139, 146, 160) : Color3.fromRGB(236, 241, 249)}
+          TextSize={15}
+          ref={setItemRef}
+        >
+          {props.children}
+        </textbutton>
+      )}
+    </RadioGroupItemContextProvider>
+  );
+}

package/src/RadioGroup/RadioGroupRoot.tsx

@@ -0,0 +1,80 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import {
+  findOrderedSelectionEntry,
+  focusOrderedSelectionEntry,
+  getRelativeOrderedSelectionEntry,
+} from "@lattice-ui/focus";
+import { RadioGroupContextProvider } from "./context";
+import type { RadioGroupItemRegistration, RadioGroupProps } from "./types";
+
+export function RadioGroupRoot(props: RadioGroupProps) {
+  const orientation = props.orientation ?? "vertical";
+  const [value, setValueState] = useControllableState<string | undefined>({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) {
+        props.onValueChange?.(nextValue);
+      }
+    },
+  });
+
+  const disabled = props.disabled === true;
+  const required = props.required === true;
+  const itemEntriesRef = React.useRef<Array<RadioGroupItemRegistration>>([]);
+  const [, setRegistryRevision] = React.useState(0);
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) {
+        return;
+      }
+
+      setValueState(nextValue);
+    },
+    [disabled, setValueState],
+  );
+
+  const registerItem = React.useCallback((item: RadioGroupItemRegistration) => {
+    itemEntriesRef.current.push(item);
+    setRegistryRevision((revision) => revision + 1);
+
+    return () => {
+      const index = itemEntriesRef.current.findIndex((entry) => entry.id === item.id);
+      if (index >= 0) {
+        itemEntriesRef.current.remove(index);
+        setRegistryRevision((revision) => revision + 1);
+      }
+    };
+  }, []);
+
+  const moveSelection = React.useCallback(
+    (fromValue: string, direction: -1 | 1) => {
+      const currentItem =
+        findOrderedSelectionEntry(itemEntriesRef.current, (item) => item.value === fromValue) ?? undefined;
+      const nextItem = getRelativeOrderedSelectionEntry(itemEntriesRef.current, currentItem?.id, direction);
+      if (!nextItem) {
+        return;
+      }
+
+      focusOrderedSelectionEntry(nextItem);
+      setValue(nextItem.value);
+    },
+    [setValue],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      setValue,
+      disabled,
+      required,
+      orientation,
+      registerItem,
+      moveSelection,
+    }),
+    [disabled, moveSelection, orientation, registerItem, required, setValue, value],
+  );
+
+  return <RadioGroupContextProvider value={contextValue}>{props.children}</RadioGroupContextProvider>;
+}

package/src/RadioGroup/context.ts

@@ -0,0 +1,8 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { RadioGroupContextValue, RadioGroupItemContextValue } from "./types";
+
+const [RadioGroupContextProvider, useRadioGroupContext] = createStrictContext<RadioGroupContextValue>("RadioGroup");
+const [RadioGroupItemContextProvider, useRadioGroupItemContext] =
+  createStrictContext<RadioGroupItemContextValue>("RadioGroupItem");
+
+export { RadioGroupContextProvider, RadioGroupItemContextProvider, useRadioGroupContext, useRadioGroupItemContext };

package/src/RadioGroup/types.ts

@@ -0,0 +1,53 @@
+import type { PresenceMotionConfig, ResponseMotionConfig } from "@lattice-ui/motion";
+import type React from "@rbxts/react";
+
+export type RadioGroupSetValue = (value: string) => void;
+export type RadioGroupOrientation = "horizontal" | "vertical";
+
+export type RadioGroupItemRegistration = {
+  id: number;
+  value: string;
+  order: number;
+  ref: React.MutableRefObject<GuiObject | undefined>;
+  getDisabled: () => boolean;
+};
+
+export type RadioGroupContextValue = {
+  value?: string;
+  setValue: RadioGroupSetValue;
+  disabled: boolean;
+  required: boolean;
+  orientation: RadioGroupOrientation;
+  registerItem: (item: RadioGroupItemRegistration) => () => void;
+  moveSelection: (fromValue: string, direction: -1 | 1) => void;
+};
+
+export type RadioGroupItemContextValue = {
+  checked: boolean;
+  disabled: boolean;
+};
+
+export type RadioGroupProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  required?: boolean;
+  orientation?: RadioGroupOrientation;
+  children?: React.ReactNode;
+};
+
+export type RadioGroupItemProps = {
+  transition?: ResponseMotionConfig;
+  value: string;
+  disabled?: boolean;
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type RadioGroupIndicatorProps = {
+  transition?: PresenceMotionConfig;
+  forceMount?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import { RadioGroupIndicator } from "./RadioGroup/RadioGroupIndicator";
+import { RadioGroupItem } from "./RadioGroup/RadioGroupItem";
+import { RadioGroupRoot } from "./RadioGroup/RadioGroupRoot";
+
+export const RadioGroup = {
+  Root: RadioGroupRoot,
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator,
+} as const satisfies {
+  Root: typeof RadioGroupRoot;
+  Item: typeof RadioGroupItem;
+  Indicator: typeof RadioGroupIndicator;
+};
+
+export type {
+  RadioGroupContextValue,
+  RadioGroupIndicatorProps,
+  RadioGroupItemContextValue,
+  RadioGroupItemProps,
+  RadioGroupItemRegistration,
+  RadioGroupOrientation,
+  RadioGroupProps,
+  RadioGroupSetValue,
+} from "./RadioGroup/types";
+export { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot };