@lattice-ui/toggle-group 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,3 +1,7 @@
-export { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem";
-export { ToggleGroupRoot, ToggleGroupRoot as ToggleGroup } from "./ToggleGroup/ToggleGroupRoot";
+import { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem";
+import { ToggleGroupRoot } from "./ToggleGroup/ToggleGroupRoot";
+export declare const ToggleGroup: {
+    readonly Root: typeof ToggleGroupRoot;
+    readonly Item: typeof ToggleGroupItem;
+};
 export type { ToggleGroupCommonProps, ToggleGroupContextValue, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupType, ToggleGroupValue, } from "./ToggleGroup/types";

package/out/init.luau

@@ -1,8 +1,11 @@
 -- 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
+local ToggleGroupItem = TS.import(script, script, "ToggleGroup", "ToggleGroupItem").ToggleGroupItem
+local ToggleGroupRoot = TS.import(script, script, "ToggleGroup", "ToggleGroupRoot").ToggleGroupRoot
+local ToggleGroup = {
+	Root = ToggleGroupRoot,
+	Item = ToggleGroupItem,
+}
+return {
+	ToggleGroup = ToggleGroup,
+}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@lattice-ui/toggle-group",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
+  "files": [
+    "out",
+    "README.md"
+  ],
   "dependencies": {
-    "@lattice-ui/core": "0.1.1",
-    "@lattice-ui/focus": "0.1.1"
+    "@lattice-ui/focus": "0.3.0",
+    "@lattice-ui/core": "0.3.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -18,7 +22,7 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "watch": "rbxtsc -p tsconfig.json -w",
-    "typecheck": "tsc -p tsconfig.typecheck.json"
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
   }
 }

package/src/ToggleGroup/ToggleGroupItem.tsx

@@ -1,76 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,16 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-{
-  "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"]
-    }
-  }
-}