@tamagui/toggle-group 1.116.1 → 1.116.2

package/dist/cjs/Toggle.js

@@ -0,0 +1,118 @@
+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 Toggle_exports = {};
+__export(Toggle_exports, {
+  Toggle: () => Toggle,
+  ToggleFrame: () => ToggleFrame
+});
+module.exports = __toCommonJS(Toggle_exports);
+var import_helpers = require("@tamagui/helpers"), import_stacks = require("@tamagui/stacks"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_web = require("@tamagui/web"), React = __toESM(require("react")), import_jsx_runtime = require("react/jsx-runtime");
+const NAME = "Toggle", ToggleFrame = (0, import_web.styled)(import_stacks.ThemeableStack, {
+  name: NAME,
+  tag: "button",
+  variants: {
+    unstyled: {
+      false: {
+        pressTheme: !0,
+        backgroundColor: "$background",
+        alignItems: "center",
+        justifyContent: "center",
+        display: "flex",
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        margin: -1,
+        hoverStyle: {
+          backgroundColor: "$backgroundHover"
+        },
+        pressStyle: {
+          backgroundColor: "$backgroundPress"
+        },
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        },
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid"
+        }
+      }
+    },
+    active: {
+      true: {
+        zIndex: 1,
+        hoverStyle: {
+          backgroundColor: "$background"
+        },
+        focusStyle: {
+          borderColor: "$borderColor",
+          backgroundColor: "$background"
+        }
+      }
+    },
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      },
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+}), Toggle = React.forwardRef(
+  function(props, forwardedRef) {
+    const {
+      pressed: pressedProp,
+      defaultPressed = !1,
+      onPressedChange,
+      ...buttonProps
+    } = props, [pressed = !1, setPressed] = (0, import_use_controllable_state.useControllableState)({
+      prop: pressedProp,
+      onChange: onPressedChange,
+      defaultProp: defaultPressed
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ToggleFrame,
+      {
+        ...!props.unstyled && {
+          theme: pressed ? "active" : null,
+          themeShallow: !0
+        },
+        active: props.unstyled ? void 0 : pressed,
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        "data-disabled": props.disabled ? "" : void 0,
+        ...buttonProps,
+        ref: forwardedRef,
+        onPress: (0, import_helpers.composeEventHandlers)(props.onPress ?? void 0, () => {
+          props.disabled || setPressed(!pressed);
+        })
+      }
+    );
+  }
+);
+//# sourceMappingURL=Toggle.js.map

package/dist/cjs/ToggleGroup.js

@@ -0,0 +1,252 @@
+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_constants = require("@tamagui/constants"), import_focusable = require("@tamagui/focusable"), import_font_size = require("@tamagui/font-size"), import_get_token = require("@tamagui/get-token"), import_group = require("@tamagui/group"), import_helpers = require("@tamagui/helpers"), import_helpers_tamagui = require("@tamagui/helpers-tamagui"), import_roving_focus = require("@tamagui/roving-focus"), import_use_controllable_state = require("@tamagui/use-controllable-state"), import_use_direction = require("@tamagui/use-direction"), import_web = require("@tamagui/web"), import_react = __toESM(require("react")), import_Toggle = require("./Toggle"), import_jsx_runtime = require("react/jsx-runtime");
+const TOGGLE_GROUP_NAME = "ToggleGroup", TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem", TOGGLE_GROUP_CONTEXT = "ToggleGroup", { Provider: ToggleGroupItemProvider, useStyledContext: useToggleGroupItemContext } = (0, import_web.createStyledContext)(), { Provider: ToggleGroupContext, useStyledContext: useToggleGroupContext } = (0, import_web.createStyledContext)(), ToggleGroupItem = import_Toggle.ToggleFrame.extractable(
+  import_react.default.forwardRef(
+    (props, forwardedRef) => {
+      const { disablePassStyles, ...rest } = props, valueContext = useToggleGroupValueContext(props.__scopeToggleGroup), context = useToggleGroupContext(props.__scopeToggleGroup), pressed = valueContext?.value.includes(props.value), disabled = context.disabled || props.disabled || !1, groupItemProps = (0, import_group.useGroupItem)({ disabled }), size = props.size ?? context.size, sizeProps = props.unstyled ? {} : {
+        width: void 0,
+        height: void 0,
+        padding: (0, import_web.getVariableValue)(size) * 0.6
+      }, iconSize = (typeof size == "number" ? size * 0.7 : (0, import_font_size.getFontSize)(size)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...rest, children }, inner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ToggleGroupItemImpl,
+        {
+          ...commonProps,
+          ref: forwardedRef,
+          focusable: !disabled,
+          disabled,
+          ...groupItemProps
+        }
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupItemProvider, { scope: props.__scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_roving_focus.RovingFocusGroup.Item,
+        {
+          asChild: "except-style",
+          __scopeRovingFocusGroup: props.__scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+          focusable: !disabled,
+          active: pressed,
+          children: inner
+        }
+      ) : inner });
+    }
+  )
+);
+ToggleGroupItem.displayName = TOGGLE_GROUP_ITEM_NAME;
+const ToggleGroupItemImpl = import_react.default.forwardRef((props, forwardedRef) => {
+  const { __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,
+      onPressedChange: (pressed) => {
+        pressed ? valueContext.onItemActivate(value) : valueContext.onItemDeactivate(value);
+      }
+    }
+  );
+}), ToggleGroup = (0, import_helpers.withStaticProperties)(
+  import_react.default.forwardRef(
+    (props, forwardedRef) => {
+      const { type, ...toggleGroupProps } = props;
+      if (import_constants.isWeb || import_react.default.useEffect(() => {
+        if (props.id)
+          return (0, import_focusable.registerFocusable)(props.id, {
+            // TODO: would be nice to focus on the first child later - could be done with reforest
+            // for now leaving it empty
+            focus: () => {
+            }
+          });
+      }, [props.id]), type === "single")
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplSingle, { ...toggleGroupProps, ref: forwardedRef });
+      if (type === "multiple")
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImplMultiple, { ...toggleGroupProps, ref: forwardedRef });
+      throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+    }
+  ),
+  {
+    Item: ToggleGroupItem
+  }
+);
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+const {
+  Provider: ToggleGroupValueProvider,
+  useStyledContext: useToggleGroupValueContext
+} = (0, import_web.createStyledContext)(), ToggleGroupImplSingle = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    disableDeactivation = !1,
+    ...toggleGroupSingleProps
+  } = props, [value, setValue] = (0, import_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(
+        () => disableDeactivation ? null : setValue(""),
+        [setValue, disableDeactivation]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
+    }
+  );
+}), ToggleGroupImplMultiple = import_react.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    disableDeactivation,
+    ...toggleGroupMultipleProps
+  } = props, [value = [], setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  }), handleButtonActivate = import_react.default.useCallback(
+    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  ), handleButtonDeactivate = import_react.default.useCallback(
+    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => 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 })
+    }
+  );
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+const ToggleGroupImplElementFrame = (0, import_web.styled)(import_group.Group, {
+  name: TOGGLE_GROUP_NAME,
+  variants: {
+    unstyled: {
+      false: {
+        backgroundColor: "$background"
+      }
+    },
+    orientation: {
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      },
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+}), ToggleGroupImpl = ToggleGroupImplElementFrame.extractable(
+  import_react.default.forwardRef(
+    (props, forwardedRef) => {
+      const {
+        __scopeToggleGroup,
+        disabled = !1,
+        orientation = "horizontal",
+        dir,
+        rovingFocus = !0,
+        loop = !0,
+        unstyled = !1,
+        size: sizeProp = "$true",
+        sizeAdjust = 0,
+        ...toggleGroupProps
+      } = props, direction = (0, import_use_direction.useDirection)(dir), commonProps = {
+        role: "group",
+        dir: direction,
+        ...toggleGroupProps
+      }, adjustedSize = (0, import_web.getVariableValue)(
+        (0, import_get_token.getSize)(sizeProp, {
+          shift: sizeAdjust
+        })
+      ), size = Math.round(adjustedSize * 0.45);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ToggleGroupContext,
+        {
+          scope: __scopeToggleGroup,
+          rovingFocus,
+          disabled,
+          size,
+          children: rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_roving_focus.RovingFocusGroup,
+            {
+              asChild: "except-style",
+              __scopeRovingFocusGroup: __scopeToggleGroup || TOGGLE_GROUP_CONTEXT,
+              orientation,
+              dir: direction,
+              loop,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ToggleGroupImplElementFrame,
+                {
+                  "aria-orientation": orientation,
+                  orientation,
+                  axis: orientation,
+                  ref: forwardedRef,
+                  "data-disabled": disabled ? "" : void 0,
+                  unstyled,
+                  ...commonProps
+                }
+              )
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ToggleGroupImplElementFrame,
+            {
+              "aria-orientation": orientation,
+              ref: forwardedRef,
+              orientation,
+              "data-disabled": disabled ? "" : void 0,
+              unstyled,
+              ...commonProps
+            }
+          )
+        }
+      );
+    }
+  )
+);
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+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;
+}, __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./ToggleGroup"), module.exports);
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/toggle-group",
-  "version": "1.116.1",
+  "version": "1.116.2",
   "sideEffects": [
     "*.css"
   ],
@@ -34,22 +34,22 @@
     }
   },
   "dependencies": {
-    "@tamagui/constants": "1.116.1",
-    "@tamagui/create-context": "1.116.1",
-    "@tamagui/focusable": "1.116.1",
-    "@tamagui/font-size": "1.116.1",
-    "@tamagui/get-token": "1.116.1",
-    "@tamagui/group": "1.116.1",
-    "@tamagui/helpers": "1.116.1",
-    "@tamagui/helpers-tamagui": "1.116.1",
-    "@tamagui/roving-focus": "1.116.1",
-    "@tamagui/stacks": "1.116.1",
-    "@tamagui/use-controllable-state": "1.116.1",
-    "@tamagui/use-direction": "1.116.1",
-    "@tamagui/web": "1.116.1"
+    "@tamagui/constants": "1.116.2",
+    "@tamagui/create-context": "1.116.2",
+    "@tamagui/focusable": "1.116.2",
+    "@tamagui/font-size": "1.116.2",
+    "@tamagui/get-token": "1.116.2",
+    "@tamagui/group": "1.116.2",
+    "@tamagui/helpers": "1.116.2",
+    "@tamagui/helpers-tamagui": "1.116.2",
+    "@tamagui/roving-focus": "1.116.2",
+    "@tamagui/stacks": "1.116.2",
+    "@tamagui/use-controllable-state": "1.116.2",
+    "@tamagui/use-direction": "1.116.2",
+    "@tamagui/web": "1.116.2"
   },
   "devDependencies": {
-    "@tamagui/build": "1.116.1",
+    "@tamagui/build": "1.116.2",
     "react": "^18.2.0 || ^19.0.0"
   },
   "publishConfig": {