@zag-js/checkbox - 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, NormalizeProps } from '@zag-js/types';
+import { DirectionProperty, CommonProperties, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
-import { Machine, StateMachine } from '@zag-js/core';
+import { EventObject, Service } from '@zag-js/core';
 
@@ -18,27 +18,31 @@ declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "control" | "indicator">;
 }>;
-interface PublicContext extends DirectionProperty, CommonProperties {
+interface CheckboxProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the checkbox. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * Whether the checkbox is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the checkbox is invalid
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Whether the checkbox is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * The checked state of the checkbox
      */
-    checked: CheckedState;
+    checked?: CheckedState;
     /**
+     * The default checked state of the checkbox
+     */
+    defaultChecked?: CheckedState;
+    /**
      * Whether the checkbox is read-only
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
@@ -52,7 +56,7 @@ * The callback invoked when the checked state changes.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The id of the form that the checkbox belongs to.
      */
-    form?: string;
+    form?: string | undefined;
     /**
@@ -62,30 +66,27 @@ * The value of checkbox input. Useful for form submission.
      */
-    value: string;
+    value?: string | undefined;
 }
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the checkbox is checked
-     */
-    isIndeterminate: boolean;
-    /**
-     * Whether the checkbox is checked
-     */
-    isChecked: boolean;
-    /**
-     * Whether the checkbox is disabled
-     */
-    isDisabled: boolean;
-}>;
-interface PrivateContext {
+type PropsWithDefault = "value";
+interface CheckboxSchema {
+    state: "ready";
+    props: RequiredBy<CheckboxProps, PropsWithDefault>;
+    context: {
+        checked: CheckedState;
+        active: boolean;
+        focused: boolean;
+        focusVisible: boolean;
+        hovered: boolean;
+        fieldsetDisabled: boolean;
+    };
+    computed: {
+        indeterminate: boolean;
+        checked: boolean;
+        disabled: boolean;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
 }
-interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
-}
-interface MachineState {
-    value: "ready";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface CheckboxApi<T extends PropTypes = PropTypes> {
     /**
@@ -126,9 +127,9 @@ * Whether the checkbox is checked
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: Service<CheckboxSchema>, normalize: NormalizeProps<T>): CheckboxApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.MachineConfig<CheckboxSchema>;
 
-declare const props: ("form" | "value" | "dir" | "id" | "getRootNode" | "name" | "invalid" | "disabled" | "checked" | "required" | "ids" | "readOnly" | "onCheckedChange")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "form" | "value" | "dir" | "id" | "getRootNode" | "name" | "invalid" | "disabled" | "checked" | "required" | "ids" | "readOnly" | "onCheckedChange">];
+declare const props: (keyof CheckboxProps)[];
+declare const splitProps: <Props extends CheckboxProps>(props: Props) => [CheckboxProps, Omit<Props, keyof CheckboxProps>];
 
-export { type MachineApi as Api, type CheckedChangeDetails, type CheckedState, type UserDefinedContext as Context, type ElementIds, type Service, anatomy, connect, machine, props, splitProps };
+export { type CheckboxApi as Api, type CheckedChangeDetails, type CheckedState, type ElementIds, type CheckboxProps as Props, type CheckboxSchema as Schema, anatomy, connect, machine, props, splitProps };

dist/index.js

@@ -1,65 +0,40 @@
-"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,
-  machine: () => machine,
-  props: () => props,
-  splitProps: () => splitProps
-});
-module.exports = __toCommonJS(src_exports);
+var anatomy$1 = require('@zag-js/anatomy');
+var domQuery = require('@zag-js/dom-query');
+var focusVisible = require('@zag-js/focus-visible');
+var core = require('@zag-js/core');
+var types = require('@zag-js/types');
+var utils = require('@zag-js/utils');
 
 // src/checkbox.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("checkbox").parts("root", "label", "control", "indicator");
+var anatomy = anatomy$1.createAnatomy("checkbox").parts("root", "label", "control", "indicator");
 var parts = anatomy.build();
 
-// src/checkbox.connect.ts
-var import_dom_query2 = require("@zag-js/dom-query");
-
 // src/checkbox.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `checkbox:${ctx.id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `checkbox:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `checkbox:${ctx.id}:control`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `checkbox:${ctx.id}:input`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
+var getRootId = (ctx) => ctx.ids?.root ?? `checkbox:${ctx.id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `checkbox:${ctx.id}:label`;
+var getControlId = (ctx) => ctx.ids?.control ?? `checkbox:${ctx.id}:control`;
+var getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `checkbox:${ctx.id}:input`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 
 // src/checkbox.connect.ts
-function connect(state, send, normalize) {
-  const disabled = state.context.isDisabled;
-  const focused = !disabled && state.context.focused;
-  const checked = state.context.isChecked;
-  const indeterminate = state.context.isIndeterminate;
-  const readOnly = state.context.readOnly;
+function connect(service, normalize) {
+  const { send, context, prop, computed, scope } = service;
+  const disabled = prop("disabled");
+  const readOnly = prop("readOnly");
+  const focused = !disabled && context.get("focused");
+  const focusVisible$1 = !disabled && context.get("focusVisible");
+  const checked = computed("checked");
+  const indeterminate = computed("indeterminate");
   const dataAttrs = {
-    "data-active": (0, import_dom_query2.dataAttr)(state.context.active),
-    "data-focus": (0, import_dom_query2.dataAttr)(focused),
-    "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
-    "data-hover": (0, import_dom_query2.dataAttr)(state.context.hovered),
-    "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-    "data-state": indeterminate ? "indeterminate" : state.context.checked ? "checked" : "unchecked",
-    "data-invalid": (0, import_dom_query2.dataAttr)(state.context.invalid)
+    "data-active": domQuery.dataAttr(context.get("active")),
+    "data-focus": domQuery.dataAttr(focused),
+    "data-focus-visible": domQuery.dataAttr(focusVisible$1),
+    "data-readonly": domQuery.dataAttr(readOnly),
+    "data-hover": domQuery.dataAttr(context.get("hovered")),
+    "data-disabled": domQuery.dataAttr(disabled),
+    "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+    "data-invalid": prop("invalid")
   };
@@ -71,3 +46,3 @@ return {
     focused,
-    checkedState: state.context.checked,
+    checkedState: checked,
     setChecked(checked2) {
@@ -83,5 +58,5 @@ send({ type: "CHECKED.SET", checked: checked2, isTrusted: false });
         ...dataAttrs,
-        dir: state.context.dir,
-        id: dom.getRootId(state.context),
-        htmlFor: dom.getHiddenInputId(state.context),
+        dir: prop("dir"),
+        id: getRootId(scope),
+        htmlFor: getHiddenInputId(scope),
         onPointerMove() {
@@ -96,3 +71,4 @@ if (disabled) return;
         onClick(event) {
-          if (event.target === dom.getHiddenInputEl(state.context)) {
+          const target = domQuery.getEventTarget(event);
+          if (target === getHiddenInputEl(scope)) {
             event.stopPropagation();
@@ -107,4 +83,4 @@ }
         ...dataAttrs,
-        dir: state.context.dir,
-        id: dom.getLabelId(state.context)
+        dir: prop("dir"),
+        id: getLabelId(scope)
       });
@@ -116,4 +92,4 @@ },
         ...dataAttrs,
-        dir: state.context.dir,
-        id: dom.getControlId(state.context),
+        dir: prop("dir"),
+        id: getControlId(scope),
         "aria-hidden": true
@@ -126,4 +102,4 @@ });
         ...dataAttrs,
-        dir: state.context.dir,
-        hidden: !indeterminate && !state.context.checked
+        dir: prop("dir"),
+        hidden: !indeterminate && !checked
       });
@@ -133,13 +109,20 @@ },
       return normalize.input({
-        id: dom.getHiddenInputId(state.context),
+        id: getHiddenInputId(scope),
         type: "checkbox",
-        required: state.context.required,
+        required: prop("required"),
         defaultChecked: checked,
         disabled,
-        "aria-labelledby": dom.getLabelId(state.context),
-        "aria-invalid": state.context.invalid,
-        name: state.context.name,
-        form: state.context.form,
-        value: state.context.value,
-        style: import_dom_query2.visuallyHiddenStyle,
+        "aria-labelledby": getLabelId(scope),
+        "aria-invalid": prop("invalid"),
+        name: prop("name"),
+        form: prop("form"),
+        value: prop("value"),
+        style: domQuery.visuallyHiddenStyle,
+        onFocus() {
+          const focusVisible2 = focusVisible.isFocusVisible();
+          send({ type: "CONTEXT.SET", context: { focused: true, focusVisible: focusVisible2 } });
+        },
+        onBlur() {
+          send({ type: "CONTEXT.SET", context: { focused: false, focusVisible: false } });
+        },
         onClick(event) {
@@ -150,2 +133,3 @@ if (readOnly) {
           }
+          if (!event.isTrusted) return;
           const checked2 = event.currentTarget.checked;
@@ -158,123 +142,135 @@ send({ type: "CHECKED.SET", checked: checked2, isTrusted: true });
 }
-
-// src/checkbox.machine.ts
-var import_core = require("@zag-js/core");
-var import_dom_event = require("@zag-js/dom-event");
-var import_form_utils = require("@zag-js/form-utils");
-var import_utils = require("@zag-js/utils");
-var { not } = import_core.guards;
-function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
-    {
-      id: "checkbox",
-      initial: "ready",
-      context: {
-        checked: false,
-        value: "on",
-        disabled: false,
-        ...ctx,
-        fieldsetDisabled: false
+var { not } = core.createGuards();
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      ...props2,
+      defaultChecked: !!props2.defaultChecked,
+      value: props2.value ?? "on"
+    };
+  },
+  initialState() {
+    return "ready";
+  },
+  context({ prop, bindable }) {
+    return {
+      checked: bindable(() => ({
+        defaultValue: prop("defaultChecked"),
+        value: prop("checked"),
+        onChange(checked) {
+          prop("onCheckedChange")?.({ checked });
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({ defaultValue: false })),
+      focusVisible: bindable(() => ({ defaultValue: false })),
+      active: bindable(() => ({ defaultValue: false })),
+      focused: bindable(() => ({ defaultValue: false })),
+      hovered: bindable(() => ({ defaultValue: false }))
+    };
+  },
+  watch({ track, context, prop, action }) {
+    track([() => prop("disabled")], () => {
+      action(["removeFocusIfNeeded"]);
+    });
+    track([() => context.get("checked")], () => {
+      action(["syncInputElement"]);
+    });
+  },
+  effects: ["trackFormControlState", "trackPressEvent", "trackFocusVisible"],
+  on: {
+    "CHECKED.TOGGLE": [
+      {
+        guard: not("isTrusted"),
+        actions: ["toggleChecked", "dispatchChangeEvent"]
       },
-      watch: {
-        disabled: "removeFocusIfNeeded",
-        checked: "syncInputElement"
+      {
+        actions: ["toggleChecked"]
+      }
+    ],
+    "CHECKED.SET": [
+      {
+        guard: not("isTrusted"),
+        actions: ["setChecked", "dispatchChangeEvent"]
       },
-      activities: ["trackFormControlState", "trackPressEvent", "trackFocusVisible"],
-      on: {
-        "CHECKED.TOGGLE": [
-          {
-            guard: not("isTrusted"),
-            actions: ["toggleChecked", "dispatchChangeEvent"]
+      {
+        actions: ["setChecked"]
+      }
+    ],
+    "CONTEXT.SET": {
+      actions: ["setContext"]
+    }
+  },
+  computed: {
+    indeterminate: ({ context }) => isIndeterminate(context.get("checked")),
+    checked: ({ context }) => isChecked(context.get("checked")),
+    disabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled")
+  },
+  states: {
+    ready: {}
+  },
+  implementations: {
+    guards: {
+      isTrusted: ({ event }) => !!event.isTrusted
+    },
+    effects: {
+      trackPressEvent({ context, computed, scope }) {
+        if (computed("disabled")) return;
+        return domQuery.trackPress({
+          pointerNode: getRootEl(scope),
+          keyboardNode: getHiddenInputEl(scope),
+          isValidKey: (event) => event.key === " ",
+          onPress: () => context.set("active", false),
+          onPressStart: () => context.set("active", true),
+          onPressEnd: () => context.set("active", false)
+        });
+      },
+      trackFocusVisible({ computed, scope }) {
+        if (computed("disabled")) return;
+        return focusVisible.trackFocusVisible({ root: scope.getRootNode?.() });
+      },
+      trackFormControlState({ context, scope }) {
+        return domQuery.trackFormControl(getHiddenInputEl(scope), {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
           },
-          {
-            actions: ["toggleChecked"]
+          onFormReset() {
+            context.set("checked", context.initial("checked"));
           }
-        ],
-        "CHECKED.SET": [
-          {
-            guard: not("isTrusted"),
-            actions: ["setChecked", "dispatchChangeEvent"]
-          },
-          {
-            actions: ["setChecked"]
-          }
-        ],
-        "CONTEXT.SET": {
-          actions: ["setContext"]
+        });
+      }
+    },
+    actions: {
+      setContext({ context, event }) {
+        for (const key in event.context) {
+          context.set(key, event.context[key]);
         }
       },
-      computed: {
-        isIndeterminate: (ctx2) => isIndeterminate(ctx2.checked),
-        isChecked: (ctx2) => isChecked(ctx2.checked),
-        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled
+      syncInputElement({ context, computed, scope }) {
+        const inputEl = getHiddenInputEl(scope);
+        if (!inputEl) return;
+        domQuery.setElementChecked(inputEl, computed("checked"));
+        inputEl.indeterminate = isIndeterminate(context.get("checked"));
       },
-      states: {
-        ready: {}
-      }
-    },
-    {
-      guards: {
-        isTrusted: (_ctx, evt) => !!evt.isTrusted
-      },
-      activities: {
-        trackPressEvent(ctx2) {
-          if (ctx2.isDisabled) return;
-          return (0, import_dom_event.trackPress)({
-            pointerNode: dom.getRootEl(ctx2),
-            keyboardNode: dom.getHiddenInputEl(ctx2),
-            isValidKey: (event) => event.key === " ",
-            onPress: () => ctx2.active = false,
-            onPressStart: () => ctx2.active = true,
-            onPressEnd: () => ctx2.active = false
-          });
-        },
-        trackFocusVisible(ctx2) {
-          if (ctx2.isDisabled) return;
-          return (0, import_dom_event.trackFocusVisible)(dom.getHiddenInputEl(ctx2), {
-            onFocus: () => ctx2.focused = true,
-            onBlur: () => ctx2.focused = false
-          });
-        },
-        trackFormControlState(ctx2, _evt, { send, initialContext }) {
-          return (0, import_form_utils.trackFormControl)(dom.getHiddenInputEl(ctx2), {
-            onFieldsetDisabledChange(disabled) {
-              ctx2.fieldsetDisabled = disabled;
-            },
-            onFormReset() {
-              send({ type: "CHECKED.SET", checked: !!initialContext.checked });
-            }
-          });
+      removeFocusIfNeeded({ context, prop }) {
+        if (prop("disabled") && context.get("focused")) {
+          context.set("focused", false);
+          context.set("focusVisible", false);
         }
       },
-      actions: {
-        setContext(ctx2, evt) {
-          Object.assign(ctx2, evt.context);
-        },
-        syncInputElement(ctx2) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          if (!inputEl) return;
-          (0, import_form_utils.setElementChecked)(inputEl, ctx2.isChecked);
-          inputEl.indeterminate = ctx2.isIndeterminate;
-        },
-        removeFocusIfNeeded(ctx2) {
-          if (ctx2.disabled && ctx2.focused) {
-            ctx2.focused = false;
-          }
-        },
-        setChecked(ctx2, evt) {
-          set.checked(ctx2, evt.checked);
-        },
-        toggleChecked(ctx2) {
-          const checked = isIndeterminate(ctx2.checked) ? true : !ctx2.checked;
-          set.checked(ctx2, checked);
-        },
-        dispatchChangeEvent(ctx2) {
-          const inputEl = dom.getHiddenInputEl(ctx2);
-          (0, import_form_utils.dispatchInputCheckedEvent)(inputEl, { checked: isChecked(ctx2.checked) });
-        }
+      setChecked({ context, event }) {
+        context.set("checked", event.checked);
+      },
+      toggleChecked({ context, computed }) {
+        const checked = isIndeterminate(computed("checked")) ? true : !computed("checked");
+        context.set("checked", checked);
+      },
+      dispatchChangeEvent({ computed, scope }) {
+        queueMicrotask(() => {
+          const inputEl = getHiddenInputEl(scope);
+          domQuery.dispatchInputCheckedEvent(inputEl, { checked: computed("checked") });
+        });
       }
     }
-  );
-}
+  }
+});
 function isIndeterminate(checked) {
@@ -286,19 +282,4 @@ return checked === "indeterminate";
 }
-var invoke = {
-  change: (ctx) => {
-    ctx.onCheckedChange?.({ checked: ctx.checked });
-  }
-};
-var set = {
-  checked: (ctx, checked) => {
-    if ((0, import_utils.isEqual)(ctx.checked, checked)) return;
-    ctx.checked = checked;
-    invoke.change(ctx);
-  }
-};
-
-// src/checkbox.props.ts
-var import_types = require("@zag-js/types");
-var import_utils2 = require("@zag-js/utils");
-var props = (0, import_types.createProps)()([
+var props = types.createProps()([
+  "defaultChecked",
   "checked",
@@ -318,11 +299,8 @@ "dir",
 ]);
-var splitProps = (0, import_utils2.createSplitProps)(props);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine,
-  props,
-  splitProps
-});
-//# sourceMappingURL=index.js.map
+var splitProps = utils.createSplitProps(props);
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package.json

 {
   "name": "@zag-js/checkbox",
-  "version": "0.0.0-dev-20240723090825",
+  "version": "0.0.0-v1-beta-20250220125322",
   "description": "Core logic for the checkbox widget implemented as a state machine",
@@ -20,4 +20,3 @@ "keywords": [
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
@@ -31,9 +30,8 @@ "publishConfig": {
   "dependencies": {
-    "@zag-js/anatomy": "0.0.0-dev-20240723090825",
-    "@zag-js/core": "0.0.0-dev-20240723090825",
-    "@zag-js/types": "0.0.0-dev-20240723090825",
-    "@zag-js/dom-query": "0.0.0-dev-20240723090825",
-    "@zag-js/dom-event": "0.0.0-dev-20240723090825",
-    "@zag-js/form-utils": "0.0.0-dev-20240723090825",
-    "@zag-js/utils": "0.0.0-dev-20240723090825"
+    "@zag-js/anatomy": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/core": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/types": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/dom-query": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/utils": "0.0.0-v1-beta-20250220125322",
+    "@zag-js/focus-visible": "0.0.0-v1-beta-20250220125322"
   },
@@ -57,4 +55,4 @@ "devDependencies": {
     "build": "tsup",
-    "test": "jest --config ../../jest.config.js --rootDir tests",
-    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest",
+    "lint": "eslint src",
     "test-ci": "pnpm test --ci --runInBand -u",
@@ -61,0 +59,0 @@ "test-watch": "pnpm test --watch"

No alert changes

Improved metrics

Dependency count

6

-14.29%

Worsened metrics

Total package byte prevSize

30053

-60.38%

Number of package files

7

-56.25%

Lines of code

700

-38.81%

Dependency changes

• + Added

  @zag-js/focus-visible@0.0.0-v1-beta-20250220125322

• + 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/focus-visible@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/form-utils@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/form-utils@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)

• - Removed

  klona@2.0.6
  (transitive)

• - Removed

  proxy-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