@lattice-ui/checkbox 0.1.1 → 0.3.0

package/out/index.d.ts

@@ -1,3 +1,8 @@
-export { CheckboxIndicator } from "./Checkbox/CheckboxIndicator";
-export { CheckboxRoot, CheckboxRoot as Checkbox } from "./Checkbox/CheckboxRoot";
+import { CheckboxIndicator } from "./Checkbox/CheckboxIndicator";
+import { CheckboxRoot } from "./Checkbox/CheckboxRoot";
+export declare const Checkbox: {
+    readonly Root: typeof CheckboxRoot;
+    readonly Indicator: typeof CheckboxIndicator;
+};
+export { CheckboxIndicator, CheckboxRoot };
 export type { CheckboxContextValue, CheckboxIndicatorProps, CheckboxProps, CheckedState } from "./Checkbox/types";

package/out/init.luau

@@ -1,8 +1,13 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local exports = {}
-exports.CheckboxIndicator = TS.import(script, script, "Checkbox", "CheckboxIndicator").CheckboxIndicator
-local _CheckboxRoot = TS.import(script, script, "Checkbox", "CheckboxRoot")
-exports.CheckboxRoot = _CheckboxRoot.CheckboxRoot
-exports.Checkbox = _CheckboxRoot.CheckboxRoot
-return exports
+local CheckboxIndicator = TS.import(script, script, "Checkbox", "CheckboxIndicator").CheckboxIndicator
+local CheckboxRoot = TS.import(script, script, "Checkbox", "CheckboxRoot").CheckboxRoot
+local Checkbox = {
+	Root = CheckboxRoot,
+	Indicator = CheckboxIndicator,
+}
+return {
+	Checkbox = Checkbox,
+	CheckboxIndicator = CheckboxIndicator,
+	CheckboxRoot = CheckboxRoot,
+}

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lattice-ui/checkbox",
-  "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/Checkbox/CheckboxIndicator.tsx

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

package/src/Checkbox/CheckboxRoot.tsx

@@ -1,86 +0,0 @@
-import { React, Slot, useControllableState } from "@lattice-ui/core";
-import { CheckboxContextProvider } from "./context";
-import type { CheckboxProps, CheckedState } from "./types";
-
-function getNextCheckedState(checked: CheckedState) {
-  if (checked === "indeterminate") {
-    return true;
-  }
-
-  return !checked;
-}
-
-export function CheckboxRoot(props: CheckboxProps) {
-  const [checked, setCheckedState] = useControllableState<CheckedState>({
-    value: props.checked,
-    defaultValue: props.defaultChecked ?? false,
-    onChange: props.onCheckedChange,
-  });
-
-  const disabled = props.disabled === true;
-  const required = props.required === true;
-
-  const setChecked = React.useCallback(
-    (nextChecked: CheckedState) => {
-      if (disabled) {
-        return;
-      }
-
-      setCheckedState(nextChecked);
-    },
-    [disabled, setCheckedState],
-  );
-
-  const toggle = React.useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    setCheckedState(getNextCheckedState(checked));
-  }, [checked, disabled, setCheckedState]);
-
-  const contextValue = React.useMemo(
-    () => ({
-      checked,
-      setChecked,
-      disabled,
-      required,
-    }),
-    [checked, disabled, required, setChecked],
-  );
-
-  const child = props.children;
-
-  return (
-    <CheckboxContextProvider value={contextValue}>
-      {props.asChild ? (
-        (() => {
-          if (!React.isValidElement(child)) {
-            error("[Checkbox] `asChild` requires a child element.");
-          }
-
-          return (
-            <Slot Active={!disabled} Event={{ Activated: toggle }} Selectable={!disabled}>
-              {child}
-            </Slot>
-          );
-        })()
-      ) : (
-        <textbutton
-          Active={!disabled}
-          AutoButtonColor={false}
-          BackgroundColor3={checked !== false ? Color3.fromRGB(88, 142, 255) : Color3.fromRGB(59, 66, 84)}
-          BorderSizePixel={0}
-          Event={{ Activated: toggle }}
-          Selectable={!disabled}
-          Size={UDim2.fromOffset(160, 36)}
-          Text={checked === "indeterminate" ? "Indeterminate" : checked ? "Checked" : "Unchecked"}
-          TextColor3={disabled ? Color3.fromRGB(145, 152, 168) : Color3.fromRGB(240, 244, 252)}
-          TextSize={15}
-        >
-          {child}
-        </textbutton>
-      )}
-    </CheckboxContextProvider>
-  );
-}

package/src/Checkbox/context.ts

@@ -1,6 +0,0 @@
-import { createStrictContext } from "@lattice-ui/core";
-import type { CheckboxContextValue } from "./types";
-
-const [CheckboxContextProvider, useCheckboxContext] = createStrictContext<CheckboxContextValue>("Checkbox");
-
-export { CheckboxContextProvider, useCheckboxContext };

package/src/Checkbox/types.ts

@@ -1,28 +0,0 @@
-import type React from "@rbxts/react";
-
-export type CheckedState = boolean | "indeterminate";
-
-export type CheckboxSetChecked = (checked: CheckedState) => void;
-
-export type CheckboxContextValue = {
-  checked: CheckedState;
-  setChecked: CheckboxSetChecked;
-  disabled: boolean;
-  required: boolean;
-};
-
-export type CheckboxProps = {
-  checked?: CheckedState;
-  defaultChecked?: CheckedState;
-  onCheckedChange?: (checked: CheckedState) => void;
-  disabled?: boolean;
-  required?: boolean;
-  asChild?: boolean;
-  children?: React.ReactNode;
-};
-
-export type CheckboxIndicatorProps = {
-  forceMount?: boolean;
-  asChild?: boolean;
-  children?: React.ReactNode;
-};

package/src/index.ts

@@ -1,3 +0,0 @@
-export { CheckboxIndicator } from "./Checkbox/CheckboxIndicator";
-export { CheckboxRoot, CheckboxRoot as Checkbox } from "./Checkbox/CheckboxRoot";
-export type { CheckboxContextValue, CheckboxIndicatorProps, CheckboxProps, CheckedState } from "./Checkbox/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"]
-    }
-  }
-}