@lattice-ui/radio-group 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,4 +1,10 @@
-export { RadioGroupIndicator } from "./RadioGroup/RadioGroupIndicator";
-export { RadioGroupItem } from "./RadioGroup/RadioGroupItem";
-export { RadioGroupRoot, RadioGroupRoot as RadioGroup } from "./RadioGroup/RadioGroupRoot";
+import { RadioGroupIndicator } from "./RadioGroup/RadioGroupIndicator";
+import { RadioGroupItem } from "./RadioGroup/RadioGroupItem";
+import { RadioGroupRoot } from "./RadioGroup/RadioGroupRoot";
+export declare const RadioGroup: {
+    readonly Root: typeof RadioGroupRoot;
+    readonly Item: typeof RadioGroupItem;
+    readonly Indicator: typeof RadioGroupIndicator;
+};
+export { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot };
 export type { RadioGroupContextValue, RadioGroupIndicatorProps, RadioGroupItemContextValue, RadioGroupItemProps, RadioGroupProps, RadioGroupSetValue, } from "./RadioGroup/types";

package/out/init.luau

@@ -1,9 +1,16 @@
 -- 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
+local RadioGroupIndicator = TS.import(script, script, "RadioGroup", "RadioGroupIndicator").RadioGroupIndicator
+local RadioGroupItem = TS.import(script, script, "RadioGroup", "RadioGroupItem").RadioGroupItem
+local RadioGroupRoot = TS.import(script, script, "RadioGroup", "RadioGroupRoot").RadioGroupRoot
+local RadioGroup = {
+	Root = RadioGroupRoot,
+	Item = RadioGroupItem,
+	Indicator = RadioGroupIndicator,
+}
+return {
+	RadioGroup = RadioGroup,
+	RadioGroupIndicator = RadioGroupIndicator,
+	RadioGroupItem = RadioGroupItem,
+	RadioGroupRoot = RadioGroupRoot,
+}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@lattice-ui/radio-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/core": "0.3.0",
+    "@lattice-ui/focus": "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/RadioGroup/RadioGroupIndicator.tsx

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

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

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

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

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

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

@@ -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"]
-    }
-  }
-}