@hanzogui/toggle-group 2.0.0

package/dist/jsx/ToggleGroup.native.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var ToggleGroup_exports = {};
+__export(ToggleGroup_exports, {
+  ToggleGroup: () => ToggleGroup
+});
+module.exports = __toCommonJS(ToggleGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui_constants = require("@hanzo/gui-constants"),
+  import_gui_focusable = require("@hanzo/gui-focusable"),
+  import_gui_helpers = require("@hanzo/gui-helpers"),
+  import_gui_roving_focus = require("@hanzo/gui-roving-focus"),
+  import_gui_use_controllable_state = require("@hanzo/gui-use-controllable-state"),
+  import_gui_use_direction = require("@hanzo/gui-use-direction"),
+  import_gui_web = require("@hanzo/gui-web"),
+  import_react = __toESM(require("react"), 1),
+  import_Toggle = require("./Toggle.native.js"),
+  import_context = require("./context.native.js"),
+  TOGGLE_GROUP_NAME = "ToggleGroup",
+  TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem",
+  TOGGLE_GROUP_CONTEXT = "ToggleGroup",
+  {
+    Provider: ToggleGroupItemProvider
+  } = (0, import_gui_web.createStyledContext)(),
+  {
+    Provider: ToggleGroupContext,
+    useStyledContext: useToggleGroupContext
+  } = (0, import_gui_web.createStyledContext)({}),
+  ToggleGroupItem = import_Toggle.ToggleFrame.styleable(function (props, forwardedRef) {
+    var valueContext = useToggleGroupValueContext(props.__scopeToggleGroup),
+      context = useToggleGroupContext(props.__scopeToggleGroup),
+      toggleContext = import_context.context.useStyledContext(props.__scopeToggleGroup),
+      active = valueContext?.value.includes(props.value),
+      color = props.color || toggleContext.color,
+      disabled = context.disabled || props.disabled || !1,
+      inner = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemImpl, {
+        ref: forwardedRef,
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        active,
+        disabled
+      });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, {
+      scope: props.__scopeToggleGroup,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.context.Provider, {
+        color,
+        active,
+        children: context.rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_roving_focus.RovingFocusGroup.Item, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+          focusable: !disabled,
+          active,
+          children: inner
+        }) : inner
+      })
+    });
+  });
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
+var ToggleGroupItemImpl = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeToggleGroup,
+        value,
+        ...itemProps
+      } = props,
+      valueContext = useToggleGroupValueContext(__scopeToggleGroup),
+      singleProps = {
+        "aria-pressed": void 0
+      },
+      typeProps = valueContext.type === "single" ? singleProps : void 0;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Toggle.Toggle, {
+      ...typeProps,
+      ...itemProps,
+      ref: forwardedRef,
+      onActiveChange: function (pressed) {
+        pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
+      }
+    });
+  }),
+  ToggleGroup = (0, import_gui_helpers.withStaticProperties)(/* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+      type,
+      ...toggleGroupProps
+    } = props;
+    if (import_gui_constants.isWeb || import_react.default.useEffect(function () {
+      if (props.id) return (0, import_gui_focusable.registerFocusable)(props.id, {
+        focus: function () {}
+      });
+    }, [props.id]), type === "single") {
+      var singleProps = toggleGroupProps;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, {
+        ...singleProps,
+        ref: forwardedRef
+      });
+    }
+    if (type === "multiple") {
+      var multipleProps = toggleGroupProps;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImplMultiple, {
+        ...multipleProps,
+        ref: forwardedRef
+      });
+    }
+    throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+  }), {
+    Item: ToggleGroupItem
+  });
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+var {
+    Provider: ToggleGroupValueProvider,
+    useStyledContext: useToggleGroupValueContext
+  } = (0, import_gui_web.createStyledContext)(),
+  ToggleGroupImplSingle = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+        value: valueProp,
+        defaultValue,
+        onValueChange = function () {},
+        disableDeactivation = !1,
+        children,
+        ...toggleGroupSingleProps
+      } = props,
+      [value, setValue] = (0, import_gui_use_controllable_state.useControllableState)({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange: onValueChange
+      });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupValueProvider, {
+      scope: props.__scopeToggleGroup,
+      type: "single",
+      value: value ? [value] : [],
+      defaultValue: value,
+      onItemActivate: setValue,
+      onItemDeactivate: import_react.default.useCallback(function () {
+        return disableDeactivation ? null : setValue("");
+      }, [setValue, disableDeactivation]),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImpl, {
+        ...toggleGroupSingleProps,
+        ref: forwardedRef,
+        children
+      })
+    });
+  }),
+  ToggleGroupImplMultiple = /* @__PURE__ */import_react.default.forwardRef(function (props, forwardedRef) {
+    var {
+        value: valueProp,
+        defaultValue,
+        onValueChange = function () {},
+        disableDeactivation,
+        children,
+        ...toggleGroupMultipleProps
+      } = props,
+      [value = [], setValue] = (0, import_gui_use_controllable_state.useControllableState)({
+        prop: valueProp,
+        defaultProp: defaultValue,
+        onChange: onValueChange
+      }),
+      handleButtonActivate = import_react.default.useCallback(function (itemValue) {
+        return setValue(function () {
+          var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+          return [...prevValue, itemValue];
+        });
+      }, [setValue]),
+      handleButtonDeactivate = import_react.default.useCallback(function (itemValue) {
+        return setValue(function () {
+          var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+          return prevValue.filter(function (value2) {
+            return value2 !== itemValue;
+          });
+        });
+      }, [setValue]);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupValueProvider, {
+      scope: props.__scopeToggleGroup,
+      type: "multiple",
+      value,
+      defaultValue: value,
+      onItemActivate: handleButtonActivate,
+      onItemDeactivate: handleButtonDeactivate,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupImpl, {
+        ...toggleGroupMultipleProps,
+        ref: forwardedRef,
+        children
+      })
+    });
+  }),
+  ToggleGroupFrame = (0, import_gui_web.styled)(import_gui_web.View, {
+    name: TOGGLE_GROUP_NAME
+  }),
+  ToggleGroupImpl = ToggleGroupFrame.styleable(function (props, forwardedRef) {
+    var {
+        __scopeToggleGroup,
+        disabled = !1,
+        orientation = "horizontal",
+        dir,
+        rovingFocus = !0,
+        loop = !0,
+        color,
+        ...toggleGroupProps
+      } = props,
+      direction = (0, import_gui_use_direction.useDirection)(dir),
+      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupFrame, {
+        role: "group",
+        ref: forwardedRef,
+        "data-disabled": disabled ? "" : void 0,
+        ...toggleGroupProps
+      });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToggleGroupContext, {
+      scope: __scopeToggleGroup,
+      rovingFocus,
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.context.Provider, {
+        color,
+        children: rovingFocus ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_roving_focus.RovingFocusGroup, {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+          orientation,
+          dir: direction,
+          loop,
+          children: content
+        }) : content
+      })
+    });
+  });
+//# sourceMappingURL=ToggleGroup.native.js.map

package/dist/jsx/ToggleGroup.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","ToggleGroup_exports","ToggleGroup","module","exports","import_jsx_runtime","require","import_gui_constants","import_gui_focusable","import_gui_helpers","import_gui_roving_focus","import_gui_use_controllable_state","import_gui_use_direction","import_gui_web","import_react","import_Toggle","import_context","TOGGLE_GROUP_NAME","TOGGLE_GROUP_ITEM_NAME","TOGGLE_GROUP_CONTEXT","Provider","ToggleGroupItemProvider","createStyledContext","ToggleGroupContext","useStyledContext","useToggleGroupContext","ToggleGroupItem","ToggleFrame","styleable","props","forwardedRef","valueContext","useToggleGroupValueContext","__scopeToggleGroup","context","toggleContext","active","includes","color","disabled","inner","jsx","ToggleGroupItemImpl","ref","tabIndex","scope","children","rovingFocus","RovingFocusGroup","Item","asChild","__scopeRovingFocusGroup","focusable","displayName","default","forwardRef","itemProps","singleProps","typeProps","type","Toggle","onActiveChange","pressed","onItemActivate","onItemDeactivate","withStaticProperties","toggleGroupProps","isWeb","useEffect","id","registerFocusable","focus","ToggleGroupImplSingle","multipleProps","ToggleGroupImplMultiple","Error","ToggleGroupValueProvider","valueProp","defaultValue","onValueChange","disableDeactivation","toggleGroupSingleProps","setValue","useControllableState","prop","defaultProp","onChange","useCallback","ToggleGroupImpl","toggleGroupMultipleProps","handleButtonActivate","itemValue","prevValue","arguments","length","handleButtonDeactivate","filter","value2","ToggleGroupFrame","styled","View","orientation","dir","loop","direction","useDirection","content","role"],"sources":["../../src/ToggleGroup.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/context.mjs

@@ -0,0 +1,8 @@
+import { createStyledContext } from "@hanzo/gui-web";
+const context = createStyledContext({
+    color: "",
+    active: !1
+  }),
+  useToggleGroupItem = () => context.useStyledContext();
+export { context, useToggleGroupItem };
+//# sourceMappingURL=context.mjs.map

package/dist/jsx/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["createStyledContext","context","color","active","useToggleGroupItem","useStyledContext"],"sources":["../../src/context.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,mBAAA,QAA2B;AAE7B,MAAMC,OAAA,GAAUD,mBAAA,CAAoB;IACzCE,KAAA,EAAO;IACPC,MAAA,EAAQ;EACV,CAAC;EAEYC,kBAAA,GAAqBA,CAAA,KACzBH,OAAA,CAAQI,gBAAA,CAAiB","ignoreList":[]}

package/dist/jsx/context.native.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var context_exports = {};
+__export(context_exports, {
+  context: () => context,
+  useToggleGroupItem: () => useToggleGroupItem
+});
+module.exports = __toCommonJS(context_exports);
+var import_gui_web = require("@hanzo/gui-web"),
+  context = (0, import_gui_web.createStyledContext)({
+    color: "",
+    active: !1
+  }),
+  useToggleGroupItem = function () {
+    return context.useStyledContext();
+  };
+//# sourceMappingURL=context.native.js.map

package/dist/jsx/context.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty"],"sources":["../../src/context.tsx"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AAEF,IAAAA,SAAM,GAAUC,MAAA,CAAAC,cAAoB;AAAA,IACzCC,gBAAO,GAAAF,MAAA,CAAAG,wBAAA;AAAA,IACPC,iBAAQ,GAAAJ,MAAA,CAAAK,mBAAA;AACV,IAEaC,YAAA,GAAAN,MAAqB,CAAAO,SACzB,CAAAC,cAAQ","ignoreList":[]}

package/dist/jsx/index.js

@@ -0,0 +1,4 @@
+export * from "./ToggleGroup.mjs";
+import { useToggleGroupItem } from "./context.mjs";
+export { useToggleGroupItem };
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useToggleGroupItem"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,SAASA,kBAAA,QAA0B","ignoreList":[]}

package/dist/jsx/index.mjs

@@ -0,0 +1,4 @@
+export * from "./ToggleGroup.mjs";
+import { useToggleGroupItem } from "./context.mjs";
+export { useToggleGroupItem };
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useToggleGroupItem"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,SAASA,kBAAA,QAA0B","ignoreList":[]}

package/dist/jsx/index.native.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  },
+  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var index_exports = {};
+__export(index_exports, {
+  useToggleGroupItem: () => import_context.useToggleGroupItem
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./ToggleGroup.native.js"), module.exports);
+var import_context = require("./context.native.js");
+//# sourceMappingURL=index.native.js.map

package/dist/jsx/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA;;AACA,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAA0B","ignoreList":[]}

package/dist/jsx/types.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.mjs.map

package/dist/jsx/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/jsx/types.native.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+    get: () => from[key],
+    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+  });
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.native.js.map

package/dist/jsx/types.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@hanzogui/toggle-group",
+  "version": "2.0.0",
+  "source": "src/index.ts",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/constants": "2.0.0-rc.29",
+    "@hanzogui/create-context": "2.0.0-rc.29",
+    "@hanzogui/focusable": "2.0.0",
+    "@hanzogui/get-token": "2.0.0-rc.29",
+    "@hanzogui/helpers": "2.0.0-rc.29",
+    "@hanzogui/roving-focus": "2.0.0",
+    "@hanzogui/sizable-context": "2.0.0-rc.29",
+    "@hanzogui/stacks": "2.0.0",
+    "@hanzogui/use-controllable-state": "2.0.0-rc.29",
+    "@hanzogui/use-direction": "2.0.0",
+    "@hanzogui/font-size": "2.0.0-rc.29",
+    "@hanzogui/web": "2.0.0-rc.29"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.29",
+    "react": ">=19"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "module:jsx": "dist/jsx"
+}

package/src/Toggle.tsx

@@ -0,0 +1,150 @@
+import { composeEventHandlers } from '@hanzogui/helpers'
+import { useControllableState } from '@hanzogui/use-controllable-state'
+import type { GetProps, GuiElement, ViewStyle } from '@hanzogui/web'
+import { styled, View } from '@hanzogui/web'
+import * as React from 'react'
+import { context } from './context'
+
+/* -------------------------------------------------------------------------------------------------
+ * Toggle
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME = 'Toggle'
+
+export const ToggleFrame = styled(
+  View,
+  {
+    name: NAME,
+    render: 'button',
+    context,
+
+    variants: {
+      unstyled: {
+        false: {
+          size: '$true',
+          alignItems: 'center',
+          justifyContent: 'center',
+          display: 'flex',
+          backgroundColor: '$background',
+          borderColor: '$borderColor',
+          borderWidth: 1,
+          margin: -1,
+          hoverStyle: {
+            backgroundColor: '$backgroundHover',
+            borderColor: '$borderColorHover',
+          },
+          pressStyle: {
+            backgroundColor: '$backgroundPress',
+            borderColor: '$borderColorPress',
+          },
+          focusVisibleStyle: {
+            outlineColor: '$outlineColor',
+            outlineWidth: 2,
+            outlineStyle: 'solid',
+            zIndex: 10,
+          },
+        },
+      },
+
+      size: {
+        '...size': (val, { tokens }) => {
+          if (!val) return
+          return {
+            width: tokens.size[val],
+            height: tokens.size[val],
+          }
+        },
+        ':number': (val) => ({
+          width: val,
+          height: val,
+        }),
+      },
+
+      defaultActiveStyle: {
+        true: {
+          backgroundColor: '$backgroundActive',
+          hoverStyle: {
+            backgroundColor: '$backgroundActive',
+          },
+          focusStyle: {
+            backgroundColor: '$backgroundActive',
+          },
+        },
+      },
+    } as const,
+
+    defaultVariants: {
+      unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+    },
+  },
+  {
+    accept: {
+      activeStyle: 'style',
+    } as const,
+  }
+)
+
+type ToggleFrameProps = GetProps<typeof ToggleFrame>
+
+type ToggleItemExtraProps = {
+  orientation?: 'horizontal' | 'vertical'
+  defaultValue?: string
+  disabled?: boolean
+  active?: boolean
+  defaultActive?: boolean
+  onActiveChange?(active: boolean): void
+  activeStyle?: ViewStyle | null
+  activeTheme?: string | null
+}
+
+export type ToggleProps = ToggleFrameProps & ToggleItemExtraProps
+
+export const Toggle = React.forwardRef<GuiElement, ToggleProps>(
+  function Toggle(props, forwardedRef) {
+    const {
+      active: activeProp,
+      activeStyle,
+      defaultActive = false,
+      onActiveChange,
+      activeTheme,
+      unstyled = false,
+      ...buttonProps
+    } = props
+
+    const [active = false, setActive] = useControllableState({
+      prop: activeProp,
+      onChange: onActiveChange,
+      defaultProp: defaultActive,
+    })
+
+    return (
+      <ToggleFrame
+        theme={activeTheme ?? null}
+        aria-pressed={active}
+        data-state={active ? 'on' : 'off'}
+        data-disabled={props.disabled ? '' : undefined}
+        unstyled={unstyled}
+        {...(active &&
+          !activeStyle &&
+          !unstyled && {
+            defaultActiveStyle: true,
+          })}
+        {...(active &&
+          activeStyle && {
+            ...(activeStyle as any),
+            hoverStyle: activeStyle,
+            focusStyle: activeStyle,
+          })}
+        {...buttonProps}
+        ref={forwardedRef}
+        onPress={composeEventHandlers(props.onPress ?? undefined, () => {
+          if (!props.disabled) {
+            setActive((prev) => !prev)
+          }
+        })}
+      />
+    )
+  }
+)
+
+/* ---------------------------------------------------------------------------------------------- */