@lattice-ui/switch 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,3 +1,7 @@
-export { SwitchRoot, SwitchRoot as Switch } from "./Switch/SwitchRoot";
-export { SwitchThumb } from "./Switch/SwitchThumb";
+import { SwitchRoot } from "./Switch/SwitchRoot";
+import { SwitchThumb } from "./Switch/SwitchThumb";
+export declare const Switch: {
+    readonly Root: typeof SwitchRoot;
+    readonly Thumb: typeof SwitchThumb;
+};
 export type { SwitchContextValue, SwitchProps, SwitchThumbProps } from "./Switch/types";

package/out/init.luau

@@ -1,8 +1,11 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local exports = {}
-local _SwitchRoot = TS.import(script, script, "Switch", "SwitchRoot")
-exports.SwitchRoot = _SwitchRoot.SwitchRoot
-exports.Switch = _SwitchRoot.SwitchRoot
-exports.SwitchThumb = TS.import(script, script, "Switch", "SwitchThumb").SwitchThumb
-return exports
+local SwitchRoot = TS.import(script, script, "Switch", "SwitchRoot").SwitchRoot
+local SwitchThumb = TS.import(script, script, "Switch", "SwitchThumb").SwitchThumb
+local Switch = {
+	Root = SwitchRoot,
+	Thumb = SwitchThumb,
+}
+return {
+	Switch = Switch,
+}

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/switch",
-  "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/core": "0.3.0"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -17,7 +21,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/Switch/SwitchRoot.tsx

@@ -1,76 +0,0 @@
-import { React, Slot, useControllableState } from "@lattice-ui/core";
-import { SwitchContextProvider } from "./context";
-import type { SwitchProps } from "./types";
-
-export function SwitchRoot(props: SwitchProps) {
-  const [checked, setCheckedState] = useControllableState<boolean>({
-    value: props.checked,
-    defaultValue: props.defaultChecked ?? false,
-    onChange: props.onCheckedChange,
-  });
-
-  const disabled = props.disabled === true;
-
-  const setChecked = React.useCallback(
-    (nextChecked: boolean) => {
-      if (disabled) {
-        return;
-      }
-
-      setCheckedState(nextChecked);
-    },
-    [disabled, setCheckedState],
-  );
-
-  const toggle = React.useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    setCheckedState(!checked);
-  }, [checked, disabled, setCheckedState]);
-
-  const contextValue = React.useMemo(
-    () => ({
-      checked,
-      setChecked,
-      disabled,
-    }),
-    [checked, disabled, setChecked],
-  );
-
-  const child = props.children;
-
-  return (
-    <SwitchContextProvider value={contextValue}>
-      {props.asChild ? (
-        (() => {
-          if (!React.isValidElement(child)) {
-            error("[Switch] `asChild` requires a child element.");
-          }
-
-          return (
-            <Slot Active={!disabled} Event={{ Activated: toggle }} Selectable={!disabled}>
-              {child}
-            </Slot>
-          );
-        })()
-      ) : (
-        <textbutton
-          Active={!disabled}
-          AutoButtonColor={false}
-          BackgroundColor3={checked ? Color3.fromRGB(86, 141, 255) : Color3.fromRGB(66, 73, 91)}
-          BorderSizePixel={0}
-          Event={{ Activated: toggle }}
-          Selectable={!disabled}
-          Size={UDim2.fromOffset(160, 36)}
-          Text={checked ? "On" : "Off"}
-          TextColor3={disabled ? Color3.fromRGB(145, 152, 168) : Color3.fromRGB(240, 244, 252)}
-          TextSize={15}
-        >
-          {child}
-        </textbutton>
-      )}
-    </SwitchContextProvider>
-  );
-}

package/src/Switch/SwitchThumb.tsx

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

package/src/Switch/context.ts

@@ -1,6 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { SwitchContextValue } from "./types";
-
-const [SwitchContextProvider, useSwitchContext] = createStrictContext<SwitchContextValue>("Switch");
-
-export { SwitchContextProvider, useSwitchContext };

package/src/Switch/types.ts

@@ -1,24 +0,0 @@
-import type React from "@rbxts/react";
-
-export type SwitchSetChecked = (checked: boolean) => void;
-
-export type SwitchContextValue = {
-  checked: boolean;
-  setChecked: SwitchSetChecked;
-  disabled: boolean;
-};
-
-export type SwitchProps = {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  asChild?: boolean;
-  children?: React.ReactNode;
-};
-
-export type SwitchThumbProps = {
-  forceMount?: boolean;
-  asChild?: boolean;
-  children?: React.ReactNode;
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { SwitchRoot, SwitchRoot as Switch } from "./Switch/SwitchRoot";
-export { SwitchThumb } from "./Switch/SwitchThumb";
-export type { SwitchContextValue, SwitchProps, SwitchThumbProps } from "./Switch/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"]
-    }
-  }
-}