@zag-js/toggle-group - npm Package Compare versions

Comparing version 0.0.0-dev-20240723090825 to 0.0.0-v1-beta-20250220125322

dist/index.d.ts

 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
 export { Orientation } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { Service, EventObject } from '@zag-js/core';
 
@@ -16,19 +16,23 @@ declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface ToggleGroupProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the toggle. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * Whether the toggle is disabled.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * The values of the toggles in the group.
      */
-    value: string[];
+    value?: string[] | undefined;
     /**
+     * The default value of the toggle group.
+     */
+    defaultValue?: string[] | undefined;
+    /**
      * Function to call when the toggle is clicked.
      */
-    onValueChange?: (details: ValueChangeDetails) => void;
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
     /**
@@ -38,3 +42,3 @@ * Whether to loop focus inside the toggle group.
      */
-    loopFocus: boolean;
+    loopFocus?: boolean | undefined;
     /**
@@ -44,3 +48,3 @@ *  Whether to use roving tab index to manage focus.
      */
-    rovingFocus?: boolean;
+    rovingFocus?: boolean | undefined;
     /**
@@ -50,9 +54,9 @@ * The orientation of the toggle group.
      */
-    orientation: Orientation;
+    orientation?: Orientation | undefined;
     /**
      * Whether to allow multiple toggles to be selected.
      */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type PropsWithDefault = "loopFocus" | "rovingFocus" | "orientation";
 type ComputedContext = Readonly<{
@@ -62,14 +66,38 @@ currentLoopFocus: boolean;
 interface PrivateContext {
+    /**
+     * Whether the user is tabbing backward.
+     */
+    isTabbingBackward: boolean;
+    /**
+     * Whether the toggle was focused by a click.
+     */
+    isClickFocus: boolean;
+    /**
+     * The value of the toggle that was focused.
+     */
+    focusedId: string | null;
+    /**
+     * Whether the toggle group is within a toolbar.
+     * This is used to determine whether to use roving tab index.
+     */
+    isWithinToolbar: boolean;
+    /**
+     * The value of the toggle group.
+     */
+    value: string[];
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
+interface ToggleGroupSchema {
+    props: RequiredBy<ToggleGroupProps, PropsWithDefault>;
+    context: PrivateContext;
+    computed: ComputedContext;
+    state: "idle" | "focused";
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineState {
-    value: "idle" | "focused";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type ToggleGroupService = Service<ToggleGroupSchema>;
 interface ItemProps {
     value: string;
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
@@ -94,3 +122,3 @@ interface ItemState {
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface ToggleGroupApi<T extends PropTypes = PropTypes> {
     /**
@@ -112,11 +140,11 @@ * The value of the toggle group.
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: ToggleGroupService, normalize: NormalizeProps<T>): ToggleGroupApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<ToggleGroupSchema>;
 
-declare const props: ("value" | "dir" | "id" | "getRootNode" | "multiple" | "disabled" | "orientation" | "ids" | "onValueChange" | "loopFocus" | "rovingFocus")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "multiple" | "disabled" | "orientation" | "ids" | "onValueChange" | "loopFocus" | "rovingFocus">];
+declare const props: (keyof ToggleGroupProps)[];
+declare const splitProps: <Props extends Partial<ToggleGroupProps>>(props: Props) => [Partial<ToggleGroupProps>, Omit<Props, keyof ToggleGroupProps>];
 declare const itemProps: (keyof ItemProps)[];
 declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { type ToggleGroupApi as Api, type ElementIds, type ItemProps, type ItemState, type ToggleGroupProps as Props, type ToggleGroupService as Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

dist/index.js

@@ -1,69 +0,35 @@
-"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: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__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: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  itemProps: () => itemProps,
-  machine: () => machine,
-  props: () => props,
-  splitItemProps: () => splitItemProps,
-  splitProps: () => splitProps
-});
-module.exports = __toCommonJS(src_exports);
+var anatomy$1 = require('@zag-js/anatomy');
+var domQuery = require('@zag-js/dom-query');
+var utils = require('@zag-js/utils');
+var core = require('@zag-js/core');
+var types = require('@zag-js/types');
 
 // src/toggle-group.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("toggle-group").parts("root", "item");
+var anatomy = anatomy$1.createAnatomy("toggle-group").parts("root", "item");
 var parts = anatomy.build();
+var getRootId = (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${ctx.id}:${value}`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getElements = (ctx) => {
+  const ownerId = CSS.escape(getRootId(ctx));
+  const selector = `[data-ownedby='${ownerId}']:not([data-disabled])`;
+  return domQuery.queryAll(getRootEl(ctx), selector);
+};
+var getFirstEl = (ctx) => utils.first(getElements(ctx));
+var getLastEl = (ctx) => utils.last(getElements(ctx));
+var getNextEl = (ctx, id, loopFocus) => domQuery.nextById(getElements(ctx), id, loopFocus);
+var getPrevEl = (ctx, id, loopFocus) => domQuery.prevById(getElements(ctx), id, loopFocus);
 
 // src/toggle-group.connect.ts
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-
-// src/toggle-group.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`,
-  getItemId: (ctx, value) => ctx.ids?.item?.(value) ?? `toggle-group:${ctx.id}:${value}`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getElements: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `[data-ownedby='${ownerId}']:not([data-disabled])`;
-    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
-  },
-  getFirstEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
-  getLastEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
-  getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), id, ctx.currentLoopFocus),
-  getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), id, ctx.currentLoopFocus)
-});
-
-// src/toggle-group.connect.ts
-function connect(state, send, normalize) {
-  const value = state.context.value;
-  const disabled = state.context.disabled;
-  const isSingle = !state.context.multiple;
-  const rovingFocus = state.context.rovingFocus;
-  const isHorizontal = state.context.orientation === "horizontal";
+function connect(service, normalize) {
+  const { context, send, prop, scope } = service;
+  const value = context.get("value");
+  const disabled = prop("disabled");
+  const isSingle = !prop("multiple");
+  const rovingFocus = prop("rovingFocus");
+  const isHorizontal = prop("orientation") === "horizontal";
   function getItemState(props2) {
-    const id = dom.getItemId(state.context, props2.value);
+    const id = getItemId(scope, props2.value);
     return {
@@ -73,3 +39,3 @@ id,
       pressed: !!value.includes(props2.value),
-      focused: state.context.focusedId === id
+      focused: context.get("focusedId") === id
     };
@@ -85,13 +51,13 @@ }
         ...parts.root.attrs,
-        id: dom.getRootId(state.context),
-        dir: state.context.dir,
+        id: getRootId(scope),
+        dir: prop("dir"),
         role: isSingle ? "radiogroup" : "group",
-        tabIndex: state.context.isTabbingBackward ? -1 : 0,
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-orientation": state.context.orientation,
-        "data-focus": (0, import_dom_query2.dataAttr)(state.context.focusedId != null),
+        tabIndex: context.get("isTabbingBackward") ? -1 : 0,
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-orientation": prop("orientation"),
+        "data-focus": domQuery.dataAttr(context.get("focusedId") != null),
         style: { outline: "none" },
         onMouseDown() {
           if (disabled) return;
-          send("ROOT.MOUSE_DOWN");
+          send({ type: "ROOT.MOUSE_DOWN" });
         },
@@ -101,8 +67,8 @@ onFocus(event) {
           const evt = event.nativeEvent || event;
-          if (!(0, import_dom_query2.isSelfTarget)(evt) || !!state.context.isClickFocus || state.context.isTabbingBackward) return;
-          send("ROOT.FOCUS");
+          if (!domQuery.isSelfTarget(evt) || !!context.get("isClickFocus") || context.get("isTabbingBackward")) return;
+          send({ type: "ROOT.FOCUS" });
         },
         onBlur() {
           if (disabled) return;
-          send("ROOT.BLUR");
+          send({ type: "ROOT.BLUR" });
         }
@@ -119,4 +85,4 @@ });
         type: "button",
-        "data-ownedby": dom.getRootId(state.context),
-        "data-focus": (0, import_dom_query2.dataAttr)(itemState.focused),
+        "data-ownedby": getRootId(scope),
+        "data-focus": domQuery.dataAttr(itemState.focused),
         disabled: itemState.disabled,
@@ -129,5 +95,5 @@ tabIndex: rovingFocus ? rovingTabIndex : void 0,
         //
-        "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
-        "data-orientation": state.context.orientation,
-        dir: state.context.dir,
+        "data-disabled": domQuery.dataAttr(itemState.disabled),
+        "data-orientation": prop("orientation"),
+        dir: prop("dir"),
         "data-state": itemState.pressed ? "on" : "off",
@@ -141,3 +107,3 @@ onFocus() {
           send({ type: "TOGGLE.CLICK", id: itemState.id, value: props2.value });
-          if ((0, import_dom_query2.isSafari)()) {
+          if (domQuery.isSafari()) {
             event.currentTarget.focus({ preventScroll: true });
@@ -148,3 +114,3 @@ }
           if (event.defaultPrevented) return;
-          if (!(0, import_dom_query2.isSelfTarget)(event)) return;
+          if (!domQuery.isSelfTarget(event)) return;
           if (itemState.disabled) return;
@@ -158,26 +124,26 @@ const keyMap = {
               if (!rovingFocus || !isHorizontal) return;
-              send("TOGGLE.FOCUS_PREV");
+              send({ type: "TOGGLE.FOCUS_PREV" });
             },
             ArrowRight() {
               if (!rovingFocus || !isHorizontal) return;
-              send("TOGGLE.FOCUS_NEXT");
+              send({ type: "TOGGLE.FOCUS_NEXT" });
             },
             ArrowUp() {
               if (!rovingFocus || isHorizontal) return;
-              send("TOGGLE.FOCUS_PREV");
+              send({ type: "TOGGLE.FOCUS_PREV" });
             },
             ArrowDown() {
               if (!rovingFocus || isHorizontal) return;
-              send("TOGGLE.FOCUS_NEXT");
+              send({ type: "TOGGLE.FOCUS_NEXT" });
             },
             Home() {
               if (!rovingFocus) return;
-              send("TOGGLE.FOCUS_FIRST");
+              send({ type: "TOGGLE.FOCUS_FIRST" });
             },
             End() {
               if (!rovingFocus) return;
-              send("TOGGLE.FOCUS_LAST");
+              send({ type: "TOGGLE.FOCUS_LAST" });
             }
           };
-          const exec = keyMap[(0, import_dom_event.getEventKey)(event)];
+          const exec = keyMap[domQuery.getEventKey(event)];
           if (exec) {
@@ -192,165 +158,163 @@ exec(event);
 }
-
-// src/toggle-group.machine.ts
-var import_core = require("@zag-js/core");
-var import_dom_query3 = require("@zag-js/dom-query");
-var import_utils2 = require("@zag-js/utils");
-var { not, and } = import_core.guards;
-function machine(userContext) {
-  const ctx = (0, import_utils2.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      id: "toggle-group",
-      initial: "idle",
-      context: {
-        value: [],
-        disabled: false,
-        orientation: "horizontal",
-        rovingFocus: true,
-        loopFocus: true,
-        ...ctx,
-        focusedId: null,
-        isTabbingBackward: false,
-        isClickFocus: false,
-        isWithinToolbar: false
-      },
-      computed: {
-        currentLoopFocus: (ctx2) => ctx2.loopFocus && !ctx2.isWithinToolbar
-      },
-      entry: ["checkIfWithinToolbar"],
+var { not, and } = core.createGuards();
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      defaultValue: [],
+      orientation: "horizontal",
+      rovingFocus: true,
+      loopFocus: true,
+      ...utils.compact(props2)
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      })),
+      focusedId: bindable(() => ({
+        defaultValue: null
+      })),
+      isTabbingBackward: bindable(() => ({
+        defaultValue: false
+      })),
+      isClickFocus: bindable(() => ({
+        defaultValue: false
+      })),
+      isWithinToolbar: bindable(() => ({
+        defaultValue: false
+      }))
+    };
+  },
+  computed: {
+    currentLoopFocus: ({ context, prop }) => prop("loopFocus") && !context.get("isWithinToolbar")
+  },
+  entry: ["checkIfWithinToolbar"],
+  on: {
+    "VALUE.SET": {
+      actions: ["setValue"]
+    },
+    "TOGGLE.CLICK": {
+      actions: ["setValue"]
+    },
+    "ROOT.MOUSE_DOWN": {
+      actions: ["setClickFocus"]
+    }
+  },
+  states: {
+    idle: {
       on: {
-        "VALUE.SET": {
-          actions: ["setValue"]
+        "ROOT.FOCUS": {
+          target: "focused",
+          guard: not(and("isClickFocus", "isTabbingBackward")),
+          actions: ["focusFirstToggle", "clearClickFocus"]
         },
-        "TOGGLE.CLICK": {
-          actions: ["setValue"]
-        },
-        "ROOT.MOUSE_DOWN": {
-          actions: ["setClickFocus"]
+        "TOGGLE.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedId"]
         }
-      },
-      states: {
-        idle: {
-          on: {
-            "ROOT.FOCUS": {
-              target: "focused",
-              guard: not(and("isClickFocus", "isTabbingBackward")),
-              actions: ["focusFirstToggle", "clearClickFocus"]
-            },
-            "TOGGLE.FOCUS": {
-              target: "focused",
-              actions: ["setFocusedId"]
-            }
-          }
-        },
-        focused: {
-          on: {
-            "ROOT.BLUR": {
-              target: "idle",
-              actions: ["clearIsTabbingBackward"]
-            },
-            "TOGGLE.FOCUS": {
-              actions: ["setFocusedId"]
-            },
-            "TOGGLE.FOCUS_NEXT": {
-              actions: ["focusNextToggle"]
-            },
-            "TOGGLE.FOCUS_PREV": {
-              actions: ["focusPrevToggle"]
-            },
-            "TOGGLE.FOCUS_FIRST": {
-              actions: ["focusFirstToggle"]
-            },
-            "TOGGLE.FOCUS_LAST": {
-              actions: ["focusLastToggle"]
-            },
-            "TOGGLE.SHIFT_TAB": {
-              target: "idle",
-              actions: ["setIsTabbingBackward"]
-            }
-          }
-        }
       }
     },
-    {
-      guards: {
-        isClickFocus: (ctx2) => ctx2.isClickFocus,
-        isTabbingBackward: (ctx2) => ctx2.isTabbingBackward
-      },
-      actions: {
-        setIsTabbingBackward(ctx2) {
-          ctx2.isTabbingBackward = true;
+    focused: {
+      on: {
+        "ROOT.BLUR": {
+          target: "idle",
+          actions: ["clearIsTabbingBackward"]
         },
-        clearIsTabbingBackward(ctx2) {
-          ctx2.isTabbingBackward = false;
+        "TOGGLE.FOCUS": {
+          actions: ["setFocusedId"]
         },
-        setClickFocus(ctx2) {
-          ctx2.isClickFocus = true;
+        "TOGGLE.FOCUS_NEXT": {
+          actions: ["focusNextToggle"]
         },
-        clearClickFocus(ctx2) {
-          ctx2.isClickFocus = false;
+        "TOGGLE.FOCUS_PREV": {
+          actions: ["focusPrevToggle"]
         },
-        checkIfWithinToolbar(ctx2) {
-          const closestToolbar = dom.getRootEl(ctx2)?.closest("[role=toolbar]");
-          ctx2.isWithinToolbar = !!closestToolbar;
+        "TOGGLE.FOCUS_FIRST": {
+          actions: ["focusFirstToggle"]
         },
-        setFocusedId(ctx2, evt) {
-          ctx2.focusedId = evt.id;
+        "TOGGLE.FOCUS_LAST": {
+          actions: ["focusLastToggle"]
         },
-        clearFocusedId(ctx2) {
-          ctx2.focusedId = null;
-        },
-        setValue(ctx2, evt) {
-          if (!evt.value) return;
-          let next = Array.from(ctx2.value);
-          if (ctx2.multiple) {
-            next = next.includes(evt.value) ? (0, import_utils2.remove)(next, evt.value) : (0, import_utils2.add)(next, evt.value);
-          } else {
-            next = (0, import_utils2.isEqual)(ctx2.value, [evt.value]) ? [] : [evt.value];
-          }
-          set.value(ctx2, next);
-        },
-        focusNextToggle(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            if (!ctx2.focusedId) return;
-            dom.getNextEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
-          });
-        },
-        focusPrevToggle(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            if (!ctx2.focusedId) return;
-            dom.getPrevEl(ctx2, ctx2.focusedId)?.focus({ preventScroll: true });
-          });
-        },
-        focusFirstToggle(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getFirstEl(ctx2)?.focus({ preventScroll: true });
-          });
-        },
-        focusLastToggle(ctx2) {
-          (0, import_dom_query3.raf)(() => {
-            dom.getLastEl(ctx2)?.focus({ preventScroll: true });
-          });
+        "TOGGLE.SHIFT_TAB": {
+          target: "idle",
+          actions: ["setIsTabbingBackward"]
         }
       }
     }
-  );
-}
-var invoke = {
-  change(ctx) {
-    ctx.onValueChange?.({ value: Array.from(ctx.value) });
+  },
+  implementations: {
+    guards: {
+      isClickFocus: ({ context }) => context.get("isClickFocus"),
+      isTabbingBackward: ({ context }) => context.get("isTabbingBackward")
+    },
+    actions: {
+      setIsTabbingBackward({ context }) {
+        context.set("isTabbingBackward", true);
+      },
+      clearIsTabbingBackward({ context }) {
+        context.set("isTabbingBackward", false);
+      },
+      setClickFocus({ context }) {
+        context.set("isClickFocus", true);
+      },
+      clearClickFocus({ context }) {
+        context.set("isClickFocus", false);
+      },
+      checkIfWithinToolbar({ context, scope }) {
+        const closestToolbar = getRootEl(scope)?.closest("[role=toolbar]");
+        context.set("isWithinToolbar", !!closestToolbar);
+      },
+      setFocusedId({ context, event }) {
+        context.set("focusedId", event.id);
+      },
+      clearFocusedId({ context }) {
+        context.set("focusedId", null);
+      },
+      setValue({ context, event, prop }) {
+        if (!event.value) return;
+        const value = context.get("value");
+        let next = Array.from(value);
+        if (prop("multiple")) {
+          next = next.includes(event.value) ? utils.remove(next, event.value) : utils.add(next, event.value);
+        } else {
+          next = utils.isEqual(value, [event.value]) ? [] : [event.value];
+        }
+        context.set("value", next);
+      },
+      focusNextToggle({ context, scope, prop }) {
+        domQuery.raf(() => {
+          const focusedId = context.get("focusedId");
+          if (!focusedId) return;
+          getNextEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusPrevToggle({ context, scope, prop }) {
+        domQuery.raf(() => {
+          const focusedId = context.get("focusedId");
+          if (!focusedId) return;
+          getPrevEl(scope, focusedId, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusFirstToggle({ scope }) {
+        domQuery.raf(() => {
+          getFirstEl(scope)?.focus({ preventScroll: true });
+        });
+      },
+      focusLastToggle({ scope }) {
+        domQuery.raf(() => {
+          getLastEl(scope)?.focus({ preventScroll: true });
+        });
+      }
+    }
   }
-};
-var set = {
-  value(ctx, value) {
-    if ((0, import_utils2.isEqual)(ctx.value, value)) return;
-    ctx.value = value;
-    invoke.change(ctx);
-  }
-};
-
-// src/toggle-group.props.ts
-var import_types = require("@zag-js/types");
-var import_utils3 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()([
+});
+var props = types.createProps()([
   "dir",
@@ -366,17 +330,15 @@ "disabled",
   "rovingFocus",
-  "value"
+  "value",
+  "defaultValue"
 ]);
-var splitProps = (0, import_utils3.createSplitProps)(props);
-var itemProps = (0, import_types.createProps)()(["value", "disabled"]);
-var splitItemProps = (0, import_utils3.createSplitProps)(itemProps);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  itemProps,
-  machine,
-  props,
-  splitItemProps,
-  splitProps
-});
-//# sourceMappingURL=index.js.map
+var splitProps = utils.createSplitProps(props);
+var itemProps = types.createProps()(["value", "disabled"]);
+var splitItemProps = utils.createSplitProps(itemProps);
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.itemProps = itemProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitItemProps = splitItemProps;
+exports.splitProps = splitProps;

package.json

 {
   "name": "@zag-js/toggle-group",
-  "version": "0.0.0-dev-20240723090825",
+  "version": "0.0.0-v1-beta-20250220125322",
   "description": "Core logic for the toggle widget implemented as a state machine",
@@ -20,4 +20,3 @@ "keywords": [
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -31,8 +30,7 @@ "publishConfig": {
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20240723090825",
-    "@zag-js/dom-event": "0.0.0-dev-20240723090825",
-    "@zag-js/dom-query": "0.0.0-dev-20240723090825",
-    "@zag-js/utils": "0.0.0-dev-20240723090825",
-    "@zag-js/core": "0.0.0-dev-20240723090825",
-    "@zag-js/types": "0.0.0-dev-20240723090825"
+    "@zag-js/anatomy": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/utils": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/dom-query": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/core": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/types": "0.0.0-v1-beta-20250220125322"
   },
@@ -56,5 +54,5 @@ "devDependencies": {
     "build": "tsup",
-    "lint": "eslint src --ext .ts,.tsx",
+    "lint": "eslint src",
     "typecheck": "tsc --noEmit"
   }
 }

No alert changes

Improved metrics

Dependency count

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

32375

decreased by-62.43%

Number of package files

7

decreased by-56.25%

Lines of code

790

decreased by-38.14%

Dependency changes

• + Added@zag-js/anatomy@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/core@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/dom-query@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/types@0.0.0-v1-beta-20250220125322(transitive)

• + Added@zag-js/utils@0.0.0-v1-beta-20250220125322(transitive)

• - Removed@zag-js/dom-event@0.0.0-dev-20240723090825

• - Removed@zag-js/anatomy@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/core@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/dom-event@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/dom-query@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/store@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/text-selection@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/types@0.0.0-dev-20240723090825(transitive)

• - Removed@zag-js/utils@0.0.0-dev-20240723090825(transitive)

• - Removedklona@2.0.6(transitive)

• - Removedproxy-compare@3.0.0(transitive)

• Updated@zag-js/anatomy@0.0.0-v1-beta-20250220125322

• Updated@zag-js/core@0.0.0-v1-beta-20250220125322

• Updated@zag-js/dom-query@0.0.0-v1-beta-20250220125322

• Updated@zag-js/types@0.0.0-v1-beta-20250220125322

• Updated@zag-js/utils@0.0.0-v1-beta-20250220125322