@lattice-ui/radio-group 0.1.1

package/out/RadioGroup/RadioGroupIndicator.d.ts

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

package/out/RadioGroup/RadioGroupIndicator.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 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
+	if props.asChild then
+		if not React.isValidElement(child) then
+			error("[RadioGroupIndicator] `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(10, 10),
+		Visible = visible,
+	}, child)
+end
+return {
+	RadioGroupIndicator = RadioGroupIndicator,
+}

package/out/RadioGroup/RadioGroupItem.d.ts

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

package/out/RadioGroup/RadioGroupItem.luau

@@ -0,0 +1,76 @@
+-- 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 RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
+local _context = TS.import(script, script.Parent, "context")
+local RadioGroupItemContextProvider = _context.RadioGroupItemContextProvider
+local useRadioGroupContext = _context.useRadioGroupContext
+local function RadioGroupItem(props)
+	local radioGroupContext = useRadioGroupContext()
+	local disabled = radioGroupContext.disabled or props.disabled == true
+	local checked = radioGroupContext.value == props.value
+	local handleSelect = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		radioGroupContext.setValue(props.value)
+	end, { disabled, props.value, radioGroupContext })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode ~= Enum.KeyCode.Return and keyCode ~= Enum.KeyCode.Space then
+			return nil
+		end
+		radioGroupContext.setValue(props.value)
+	end, { disabled, props.value, radioGroupContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleSelect,
+			SelectionGained = handleSelect,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleInputBegan, handleSelect })
+	local itemContextValue = React.useMemo(function()
+		return {
+			checked = checked,
+			disabled = disabled,
+		}
+	end, { checked, disabled })
+	return React.createElement(RadioGroupItemContextProvider, {
+		value = itemContextValue,
+	}, if props.asChild then ((function()
+		local child = props.children
+		if not child then
+			error("[RadioGroupItem] `asChild` requires a child element.")
+		end
+		return React.createElement(RovingFocusItem, {
+			asChild = true,
+			disabled = disabled,
+		}, React.createElement(Slot, {
+			Active = not disabled,
+			Event = eventHandlers,
+			Selectable = not disabled,
+		}, child))
+	end)()) else (React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = disabled,
+	}, React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = if checked then Color3.fromRGB(88, 142, 255) else Color3.fromRGB(47, 53, 68),
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(170, 34),
+		Text = props.value,
+		TextColor3 = if disabled then Color3.fromRGB(139, 146, 160) else Color3.fromRGB(236, 241, 249),
+		TextSize = 15,
+	}, props.children))))
+end
+return {
+	RadioGroupItem = RadioGroupItem,
+}

package/out/RadioGroup/RadioGroupRoot.d.ts

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

package/out/RadioGroup/RadioGroupRoot.luau

@@ -0,0 +1,56 @@
+-- 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 useControllableState = _core.useControllableState
+local RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+local RadioGroupContextProvider = TS.import(script, script.Parent, "context").RadioGroupContextProvider
+local function RadioGroupRoot(props)
+	local _binding = useControllableState({
+		value = props.value,
+		defaultValue = props.defaultValue,
+		onChange = function(nextValue)
+			if nextValue ~= nil then
+				local _result = props.onValueChange
+				if _result ~= nil then
+					_result(nextValue)
+				end
+			end
+		end,
+	})
+	local value = _binding[1]
+	local setValueState = _binding[2]
+	local disabled = props.disabled == true
+	local required = props.required == true
+	local _condition = props.loop
+	if _condition == nil then
+		_condition = true
+	end
+	local loop = _condition
+	local orientation = props.orientation or "vertical"
+	local setValue = React.useCallback(function(nextValue)
+		if disabled then
+			return nil
+		end
+		setValueState(nextValue)
+	end, { disabled, setValueState })
+	local contextValue = React.useMemo(function()
+		return {
+			value = value,
+			setValue = setValue,
+			disabled = disabled,
+			required = required,
+		}
+	end, { disabled, required, setValue, value })
+	return React.createElement(RadioGroupContextProvider, {
+		value = contextValue,
+	}, React.createElement(RovingFocusGroup, {
+		active = not disabled,
+		autoFocus = "none",
+		loop = loop,
+		orientation = orientation,
+	}, props.children))
+end
+return {
+	RadioGroupRoot = RadioGroupRoot,
+}

package/out/RadioGroup/context.d.ts

@@ -0,0 +1,4 @@
+import type { RadioGroupContextValue, RadioGroupItemContextValue } from "./types";
+declare const RadioGroupContextProvider: import("@rbxts/react").Provider<RadioGroupContextValue | undefined>, useRadioGroupContext: () => RadioGroupContextValue;
+declare const RadioGroupItemContextProvider: import("@rbxts/react").Provider<RadioGroupItemContextValue | undefined>, useRadioGroupItemContext: () => RadioGroupItemContextValue;
+export { RadioGroupContextProvider, RadioGroupItemContextProvider, useRadioGroupContext, useRadioGroupItemContext };

package/out/RadioGroup/context.luau

@@ -0,0 +1,15 @@
+-- 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("RadioGroup")
+local RadioGroupContextProvider = _binding[1]
+local useRadioGroupContext = _binding[2]
+local _binding_1 = createStrictContext("RadioGroupItem")
+local RadioGroupItemContextProvider = _binding_1[1]
+local useRadioGroupItemContext = _binding_1[2]
+return {
+	RadioGroupContextProvider = RadioGroupContextProvider,
+	RadioGroupItemContextProvider = RadioGroupItemContextProvider,
+	useRadioGroupContext = useRadioGroupContext,
+	useRadioGroupItemContext = useRadioGroupItemContext,
+}

package/out/RadioGroup/types.d.ts

@@ -0,0 +1,34 @@
+import type React from "@rbxts/react";
+export type RadioGroupOrientation = "horizontal" | "vertical" | "both";
+export type RadioGroupSetValue = (value: string) => void;
+export type RadioGroupContextValue = {
+    value?: string;
+    setValue: RadioGroupSetValue;
+    disabled: boolean;
+    required: boolean;
+};
+export type RadioGroupItemContextValue = {
+    checked: boolean;
+    disabled: boolean;
+};
+export type RadioGroupProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    loop?: boolean;
+    orientation?: RadioGroupOrientation;
+    children?: React.ReactNode;
+};
+export type RadioGroupItemProps = {
+    value: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type RadioGroupIndicatorProps = {
+    forceMount?: boolean;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};

package/out/RadioGroup/types.luau

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

package/out/index.d.ts

@@ -0,0 +1,4 @@
+export { RadioGroupIndicator } from "./RadioGroup/RadioGroupIndicator";
+export { RadioGroupItem } from "./RadioGroup/RadioGroupItem";
+export { RadioGroupRoot, RadioGroupRoot as RadioGroup } from "./RadioGroup/RadioGroupRoot";
+export type { RadioGroupContextValue, RadioGroupIndicatorProps, RadioGroupItemContextValue, RadioGroupItemProps, RadioGroupProps, RadioGroupSetValue, } from "./RadioGroup/types";

package/out/init.luau

@@ -0,0 +1,9 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.RadioGroupIndicator = TS.import(script, script, "RadioGroup", "RadioGroupIndicator").RadioGroupIndicator
+exports.RadioGroupItem = TS.import(script, script, "RadioGroup", "RadioGroupItem").RadioGroupItem
+local _RadioGroupRoot = TS.import(script, script, "RadioGroup", "RadioGroupRoot")
+exports.RadioGroupRoot = _RadioGroupRoot.RadioGroupRoot
+exports.RadioGroup = _RadioGroupRoot.RadioGroupRoot
+return exports

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lattice-ui/radio-group",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1",
+    "@lattice-ui/focus": "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/RadioGroup/RadioGroupIndicator.tsx

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

package/src/RadioGroup/RadioGroupItem.tsx

@@ -0,0 +1,89 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { RadioGroupItemContextProvider, useRadioGroupContext } from "./context";
+import type { RadioGroupItemProps } from "./types";
+
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const radioGroupContext = useRadioGroupContext();
+  const disabled = radioGroupContext.disabled || props.disabled === true;
+  const checked = radioGroupContext.value === props.value;
+
+  const handleSelect = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    radioGroupContext.setValue(props.value);
+  }, [disabled, props.value, radioGroupContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: TextButton, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode !== Enum.KeyCode.Return && keyCode !== Enum.KeyCode.Space) {
+        return;
+      }
+
+      radioGroupContext.setValue(props.value);
+    },
+    [disabled, props.value, radioGroupContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleSelect,
+      SelectionGained: handleSelect,
+      InputBegan: handleInputBegan,
+    }),
+    [handleInputBegan, handleSelect],
+  );
+
+  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 (
+            <RovingFocusItem asChild disabled={disabled}>
+              <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled}>
+                {child}
+              </Slot>
+            </RovingFocusItem>
+          );
+        })()
+      ) : (
+        <RovingFocusItem asChild disabled={disabled}>
+          <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}
+          >
+            {props.children}
+          </textbutton>
+        </RovingFocusItem>
+      )}
+    </RadioGroupItemContextProvider>
+  );
+}

package/src/RadioGroup/RadioGroupRoot.tsx

@@ -0,0 +1,50 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { RovingFocusGroup } from "@lattice-ui/focus";
+import { RadioGroupContextProvider } from "./context";
+import type { RadioGroupProps } from "./types";
+
+export function RadioGroupRoot(props: RadioGroupProps) {
+  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 loop = props.loop ?? true;
+  const orientation = props.orientation ?? "vertical";
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) {
+        return;
+      }
+
+      setValueState(nextValue);
+    },
+    [disabled, setValueState],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      setValue,
+      disabled,
+      required,
+    }),
+    [disabled, required, setValue, value],
+  );
+
+  return (
+    <RadioGroupContextProvider value={contextValue}>
+      <RovingFocusGroup active={!disabled} autoFocus="none" loop={loop} orientation={orientation}>
+        {props.children}
+      </RovingFocusGroup>
+    </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,41 @@
+import type React from "@rbxts/react";
+
+export type RadioGroupOrientation = "horizontal" | "vertical" | "both";
+
+export type RadioGroupSetValue = (value: string) => void;
+
+export type RadioGroupContextValue = {
+  value?: string;
+  setValue: RadioGroupSetValue;
+  disabled: boolean;
+  required: boolean;
+};
+
+export type RadioGroupItemContextValue = {
+  checked: boolean;
+  disabled: boolean;
+};
+
+export type RadioGroupProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  required?: boolean;
+  loop?: boolean;
+  orientation?: RadioGroupOrientation;
+  children?: React.ReactNode;
+};
+
+export type RadioGroupItemProps = {
+  value: string;
+  disabled?: boolean;
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type RadioGroupIndicatorProps = {
+  forceMount?: boolean;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+export { RadioGroupIndicator } from "./RadioGroup/RadioGroupIndicator";
+export { RadioGroupItem } from "./RadioGroup/RadioGroupItem";
+export { RadioGroupRoot, RadioGroupRoot as RadioGroup } from "./RadioGroup/RadioGroupRoot";
+export type {
+  RadioGroupContextValue,
+  RadioGroupIndicatorProps,
+  RadioGroupItemContextValue,
+  RadioGroupItemProps,
+  RadioGroupProps,
+  RadioGroupSetValue,
+} from "./RadioGroup/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"]
+    }
+  }
+}