@lattice-ui/toggle-group 0.1.1

package/out/ToggleGroup/ToggleGroupItem.d.ts

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

package/out/ToggleGroup/ToggleGroupItem.luau

@@ -0,0 +1,66 @@
+-- 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 useToggleGroupContext = TS.import(script, script.Parent, "context").useToggleGroupContext
+local function ToggleGroupItem(props)
+	local toggleGroupContext = useToggleGroupContext()
+	local disabled = toggleGroupContext.disabled or props.disabled == true
+	local pressed = toggleGroupContext.isPressed(props.value)
+	local handleToggle = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		toggleGroupContext.toggleValue(props.value)
+	end, { disabled, props.value, toggleGroupContext })
+	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
+		toggleGroupContext.toggleValue(props.value)
+	end, { disabled, props.value, toggleGroupContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleToggle,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleInputBegan, handleToggle })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[ToggleGroupItem] `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
+	return React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = disabled,
+	}, React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = if pressed 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 {
+	ToggleGroupItem = ToggleGroupItem,
+}

package/out/ToggleGroup/ToggleGroupRoot.d.ts

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

package/out/ToggleGroup/ToggleGroupRoot.luau

@@ -0,0 +1,141 @@
+-- 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 RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+local ToggleGroupContextProvider = TS.import(script, script.Parent, "context").ToggleGroupContextProvider
+local function normalizeMultiple(value)
+	local _value = value
+	if not (type(_value) == "table") then
+		return {}
+	end
+	local nextValues = {}
+	local seenValues = {}
+	for _, entry in value do
+		if not (type(entry) == "string") then
+			continue
+		end
+		if seenValues[entry] then
+			continue
+		end
+		seenValues[entry] = true
+		table.insert(nextValues, entry)
+	end
+	return nextValues
+end
+local function ToggleGroupRoot(props)
+	local disabled = props.disabled == true
+	local _condition = props.loop
+	if _condition == nil then
+		_condition = true
+	end
+	local loop = _condition
+	local orientation = props.orientation or "horizontal"
+	local _binding = useControllableState({
+		value = if props.type == "single" then props.value else nil,
+		defaultValue = if props.type == "single" then props.defaultValue else nil,
+		onChange = function(nextValue)
+			if props.type == "single" then
+				local _result = props.onValueChange
+				if _result ~= nil then
+					_result(nextValue)
+				end
+			end
+		end,
+	})
+	local singleValue = _binding[1]
+	local setSingleValueState = _binding[2]
+	local _binding_1 = useControllableState({
+		value = if props.type == "multiple" then (if props.value ~= nil then normalizeMultiple(props.value) else nil) else nil,
+		defaultValue = if props.type == "multiple" then normalizeMultiple(props.defaultValue or {}) else {},
+		onChange = function(nextValue)
+			if props.type == "multiple" then
+				local _result = props.onValueChange
+				if _result ~= nil then
+					_result(normalizeMultiple(nextValue))
+				end
+			end
+		end,
+	})
+	local multipleValue = _binding_1[1]
+	local setMultipleValueState = _binding_1[2]
+	local isPressed = React.useCallback(function(itemValue)
+		if props.type == "single" then
+			return singleValue == itemValue
+		end
+		local _itemValue = itemValue
+		return table.find(multipleValue, _itemValue) ~= nil
+	end, { multipleValue, props.type, singleValue })
+	local toggleValue = React.useCallback(function(itemValue)
+		if disabled then
+			return nil
+		end
+		if props.type == "single" then
+			setSingleValueState(if singleValue == itemValue then nil else itemValue)
+			return nil
+		end
+		local currentValues = normalizeMultiple(multipleValue)
+		local _itemValue = itemValue
+		local _result
+		if table.find(currentValues, _itemValue) ~= nil then
+			-- ▼ ReadonlyArray.filter ▼
+			local _newValue = {}
+			local _callback = function(value)
+				return value ~= itemValue
+			end
+			local _length = 0
+			for _k, _v in currentValues do
+				if _callback(_v, _k - 1, currentValues) == true then
+					_length += 1
+					_newValue[_length] = _v
+				end
+			end
+			-- ▲ ReadonlyArray.filter ▲
+			_result = _newValue
+		else
+			local _array = {}
+			local _length = #_array
+			local _currentValuesLength = #currentValues
+			table.move(currentValues, 1, _currentValuesLength, _length + 1, _array)
+			_length += _currentValuesLength
+			_array[_length + 1] = itemValue
+			_result = _array
+		end
+		local nextValues = _result
+		setMultipleValueState(nextValues)
+	end, { disabled, multipleValue, props.type, setMultipleValueState, setSingleValueState, singleValue })
+	local contextValue = React.useMemo(function()
+		return {
+			type = props.type,
+			disabled = disabled,
+			orientation = orientation,
+			loop = loop,
+			isPressed = isPressed,
+			toggleValue = toggleValue,
+		}
+	end, { disabled, isPressed, loop, orientation, props.type, toggleValue })
+	local groupNode = if props.asChild then ((function()
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[ToggleGroup] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end)()) else (React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(0, 0),
+	}, props.children))
+	return React.createElement(ToggleGroupContextProvider, {
+		value = contextValue,
+	}, React.createElement(RovingFocusGroup, {
+		active = not disabled,
+		autoFocus = "none",
+		loop = loop,
+		orientation = orientation,
+	}, groupNode))
+end
+return {
+	ToggleGroupRoot = ToggleGroupRoot,
+}

package/out/ToggleGroup/context.d.ts

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

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

package/out/ToggleGroup/types.d.ts

@@ -0,0 +1,38 @@
+import type React from "@rbxts/react";
+export type ToggleGroupType = "single" | "multiple";
+export type ToggleGroupValue = string | string[];
+export type ToggleGroupOrientation = "horizontal" | "vertical" | "both";
+export type ToggleGroupCommonProps = {
+    disabled?: boolean;
+    loop?: boolean;
+    orientation?: ToggleGroupOrientation;
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+export type ToggleGroupSingleProps = {
+    type: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string | undefined) => void;
+};
+export type ToggleGroupMultipleProps = {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type ToggleGroupProps = ToggleGroupCommonProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+export type ToggleGroupContextValue = {
+    type: ToggleGroupType;
+    disabled: boolean;
+    orientation: ToggleGroupOrientation;
+    loop: boolean;
+    isPressed: (itemValue: string) => boolean;
+    toggleValue: (itemValue: string) => void;
+};
+export type ToggleGroupItemProps = {
+    value: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/ToggleGroup/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 { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem";
+export { ToggleGroupRoot, ToggleGroupRoot as ToggleGroup } from "./ToggleGroup/ToggleGroupRoot";
+export type { ToggleGroupCommonProps, ToggleGroupContextValue, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupType, ToggleGroupValue, } from "./ToggleGroup/types";

package/out/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ToggleGroupItem = TS.import(script, script, "ToggleGroup", "ToggleGroupItem").ToggleGroupItem
+local _ToggleGroupRoot = TS.import(script, script, "ToggleGroup", "ToggleGroupRoot")
+exports.ToggleGroupRoot = _ToggleGroupRoot.ToggleGroupRoot
+exports.ToggleGroup = _ToggleGroupRoot.ToggleGroupRoot
+return exports

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lattice-ui/toggle-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/ToggleGroup/ToggleGroupItem.tsx

@@ -0,0 +1,76 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useToggleGroupContext } from "./context";
+import type { ToggleGroupItemProps } from "./types";
+
+export function ToggleGroupItem(props: ToggleGroupItemProps) {
+  const toggleGroupContext = useToggleGroupContext();
+  const disabled = toggleGroupContext.disabled || props.disabled === true;
+  const pressed = toggleGroupContext.isPressed(props.value);
+
+  const handleToggle = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    toggleGroupContext.toggleValue(props.value);
+  }, [disabled, props.value, toggleGroupContext]);
+
+  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;
+      }
+
+      toggleGroupContext.toggleValue(props.value);
+    },
+    [disabled, props.value, toggleGroupContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleToggle,
+      InputBegan: handleInputBegan,
+    }),
+    [handleInputBegan, handleToggle],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[ToggleGroupItem] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={disabled}>
+        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled}>
+          {child}
+        </Slot>
+      </RovingFocusItem>
+    );
+  }
+
+  return (
+    <RovingFocusItem asChild disabled={disabled}>
+      <textbutton
+        Active={!disabled}
+        AutoButtonColor={false}
+        BackgroundColor3={pressed ? 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>
+  );
+}

package/src/ToggleGroup/ToggleGroupRoot.tsx

@@ -0,0 +1,121 @@
+import { React, Slot, useControllableState } from "@lattice-ui/core";
+import { RovingFocusGroup } from "@lattice-ui/focus";
+import { ToggleGroupContextProvider } from "./context";
+import type { ToggleGroupProps } from "./types";
+
+function normalizeMultiple(value: unknown): Array<string> {
+  if (!typeIs(value, "table")) {
+    return [];
+  }
+
+  const nextValues: Array<string> = [];
+  const seenValues: Record<string, true> = {};
+
+  for (const entry of value as Array<unknown>) {
+    if (!typeIs(entry, "string")) {
+      continue;
+    }
+
+    if (seenValues[entry]) {
+      continue;
+    }
+
+    seenValues[entry] = true;
+    nextValues.push(entry);
+  }
+
+  return nextValues;
+}
+
+export function ToggleGroupRoot(props: ToggleGroupProps) {
+  const disabled = props.disabled === true;
+  const loop = props.loop ?? true;
+  const orientation = props.orientation ?? "horizontal";
+
+  const [singleValue, setSingleValueState] = useControllableState<string | undefined>({
+    value: props.type === "single" ? props.value : undefined,
+    defaultValue: props.type === "single" ? props.defaultValue : undefined,
+    onChange: (nextValue) => {
+      if (props.type === "single") {
+        props.onValueChange?.(nextValue);
+      }
+    },
+  });
+
+  const [multipleValue, setMultipleValueState] = useControllableState<Array<string>>({
+    value:
+      props.type === "multiple" ? (props.value !== undefined ? normalizeMultiple(props.value) : undefined) : undefined,
+    defaultValue: props.type === "multiple" ? normalizeMultiple(props.defaultValue ?? []) : [],
+    onChange: (nextValue) => {
+      if (props.type === "multiple") {
+        props.onValueChange?.(normalizeMultiple(nextValue));
+      }
+    },
+  });
+
+  const isPressed = React.useCallback(
+    (itemValue: string) => {
+      if (props.type === "single") {
+        return singleValue === itemValue;
+      }
+
+      return multipleValue.includes(itemValue);
+    },
+    [multipleValue, props.type, singleValue],
+  );
+
+  const toggleValue = React.useCallback(
+    (itemValue: string) => {
+      if (disabled) {
+        return;
+      }
+
+      if (props.type === "single") {
+        setSingleValueState(singleValue === itemValue ? undefined : itemValue);
+        return;
+      }
+
+      const currentValues = normalizeMultiple(multipleValue);
+      const nextValues = currentValues.includes(itemValue)
+        ? currentValues.filter((value) => value !== itemValue)
+        : [...currentValues, itemValue];
+      setMultipleValueState(nextValues);
+    },
+    [disabled, multipleValue, props.type, setMultipleValueState, setSingleValueState, singleValue],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      type: props.type,
+      disabled,
+      orientation,
+      loop,
+      isPressed,
+      toggleValue,
+    }),
+    [disabled, isPressed, loop, orientation, props.type, toggleValue],
+  );
+
+  const groupNode = props.asChild ? (
+    (() => {
+      const child = props.children;
+      if (!React.isValidElement(child)) {
+        error("[ToggleGroup] `asChild` requires a child element.");
+      }
+
+      return <Slot>{child}</Slot>;
+    })()
+  ) : (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)}>
+      {props.children}
+    </frame>
+  );
+
+  return (
+    <ToggleGroupContextProvider value={contextValue}>
+      <RovingFocusGroup active={!disabled} autoFocus="none" loop={loop} orientation={orientation}>
+        {groupNode}
+      </RovingFocusGroup>
+    </ToggleGroupContextProvider>
+  );
+}

package/src/ToggleGroup/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { ToggleGroupContextValue } from "./types";
+
+const [ToggleGroupContextProvider, useToggleGroupContext] = createStrictContext<ToggleGroupContextValue>("ToggleGroup");
+
+export { ToggleGroupContextProvider, useToggleGroupContext };

package/src/ToggleGroup/types.ts

@@ -0,0 +1,45 @@
+import type React from "@rbxts/react";
+
+export type ToggleGroupType = "single" | "multiple";
+export type ToggleGroupValue = string | string[];
+export type ToggleGroupOrientation = "horizontal" | "vertical" | "both";
+
+export type ToggleGroupCommonProps = {
+  disabled?: boolean;
+  loop?: boolean;
+  orientation?: ToggleGroupOrientation;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type ToggleGroupSingleProps = {
+  type: "single";
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string | undefined) => void;
+};
+
+export type ToggleGroupMultipleProps = {
+  type: "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+
+export type ToggleGroupProps = ToggleGroupCommonProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+
+export type ToggleGroupContextValue = {
+  type: ToggleGroupType;
+  disabled: boolean;
+  orientation: ToggleGroupOrientation;
+  loop: boolean;
+  isPressed: (itemValue: string) => boolean;
+  toggleValue: (itemValue: string) => void;
+};
+
+export type ToggleGroupItemProps = {
+  value: string;
+  disabled?: boolean;
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,13 @@
+export { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem";
+export { ToggleGroupRoot, ToggleGroupRoot as ToggleGroup } from "./ToggleGroup/ToggleGroupRoot";
+export type {
+  ToggleGroupCommonProps,
+  ToggleGroupContextValue,
+  ToggleGroupItemProps,
+  ToggleGroupMultipleProps,
+  ToggleGroupOrientation,
+  ToggleGroupProps,
+  ToggleGroupSingleProps,
+  ToggleGroupType,
+  ToggleGroupValue,
+} from "./ToggleGroup/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"]
+    }
+  }
+}