@cerberus-design/react 0.22.0 → 0.23.0

package/dist/node_modules/.pnpm/@zag-js_dialog@1.24.2/node_modules/@zag-js/dialog/dist/index.cjs

@@ -0,0 +1,344 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const index$6 = require('../../../../../@zag-js_anatomy@1.24.2/node_modules/@zag-js/anatomy/dist/index.cjs');
+const index$2 = require('../../../../../@zag-js_aria-hidden@1.24.2/node_modules/@zag-js/aria-hidden/dist/index.cjs');
+const index = require('../../../../../@zag-js_core@1.24.2/node_modules/@zag-js/core/dist/index.cjs');
+const index$5 = require('../../../../../@zag-js_dismissable@1.24.2/node_modules/@zag-js/dismissable/dist/index.cjs');
+const index$1 = require('../../../../../@zag-js_dom-query@1.24.2/node_modules/@zag-js/dom-query/dist/index.cjs');
+const index$3 = require('../../../../../@zag-js_focus-trap@1.24.2/node_modules/@zag-js/focus-trap/dist/index.cjs');
+const index$4 = require('../../../../../@zag-js_remove-scroll@1.24.2/node_modules/@zag-js/remove-scroll/dist/index.cjs');
+const index$7 = require('../../../../../@zag-js_types@1.24.2/node_modules/@zag-js/types/dist/index.cjs');
+
+// src/dialog.anatomy.ts
+var anatomy = index$6.createAnatomy("dialog").parts(
+  "trigger",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+
+// src/dialog.dom.ts
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `dialog:${ctx.id}:positioner`;
+var getBackdropId = (ctx) => ctx.ids?.backdrop ?? `dialog:${ctx.id}:backdrop`;
+var getContentId = (ctx) => ctx.ids?.content ?? `dialog:${ctx.id}:content`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `dialog:${ctx.id}:trigger`;
+var getTitleId = (ctx) => ctx.ids?.title ?? `dialog:${ctx.id}:title`;
+var getDescriptionId = (ctx) => ctx.ids?.description ?? `dialog:${ctx.id}:description`;
+var getCloseTriggerId = (ctx) => ctx.ids?.closeTrigger ?? `dialog:${ctx.id}:close`;
+var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+var getBackdropEl = (ctx) => ctx.getById(getBackdropId(ctx));
+var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+var getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
+var getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
+var getCloseTriggerEl = (ctx) => ctx.getById(getCloseTriggerId(ctx));
+
+// src/dialog.connect.ts
+function connect(service, normalize) {
+  const { state, send, context, prop, scope } = service;
+  const ariaLabel = prop("aria-label");
+  const open = state.matches("open");
+  return {
+    open,
+    setOpen(nextOpen) {
+      const open2 = state.matches("open");
+      if (open2 === nextOpen) return;
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        dir: prop("dir"),
+        id: getTriggerId(scope),
+        "aria-haspopup": "dialog",
+        type: "button",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": getContentId(scope),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "TOGGLE" });
+        }
+      });
+    },
+    getBackdropProps() {
+      return normalize.element({
+        ...parts.backdrop.attrs,
+        dir: prop("dir"),
+        hidden: !open,
+        id: getBackdropId(scope),
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: prop("dir"),
+        id: getPositionerId(scope),
+        style: {
+          pointerEvents: open ? void 0 : "none"
+        }
+      });
+    },
+    getContentProps() {
+      const rendered = context.get("rendered");
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: prop("dir"),
+        role: prop("role"),
+        hidden: !open,
+        id: getContentId(scope),
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        "aria-modal": true,
+        "aria-label": ariaLabel || void 0,
+        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId(scope),
+        "aria-describedby": rendered.description ? getDescriptionId(scope) : void 0
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        dir: prop("dir"),
+        id: getTitleId(scope)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        dir: prop("dir"),
+        id: getDescriptionId(scope)
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...parts.closeTrigger.attrs,
+        dir: prop("dir"),
+        id: getCloseTriggerId(scope),
+        type: "button",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          event.stopPropagation();
+          send({ type: "CLOSE" });
+        }
+      });
+    }
+  };
+}
+var machine = index.createMachine({
+  props({ props: props2, scope }) {
+    const alertDialog = props2.role === "alertdialog";
+    const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
+    const modal = typeof props2.modal === "boolean" ? props2.modal : true;
+    return {
+      role: "dialog",
+      modal,
+      trapFocus: modal,
+      preventScroll: modal,
+      closeOnInteractOutside: !alertDialog,
+      closeOnEscape: true,
+      restoreFocus: true,
+      initialFocusEl,
+      ...props2
+    };
+  },
+  initialState({ prop }) {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "closed";
+  },
+  context({ bindable }) {
+    return {
+      rendered: bindable(() => ({
+        defaultValue: { title: true, description: true }
+      }))
+    };
+  },
+  watch({ track, action, prop }) {
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  states: {
+    open: {
+      entry: ["checkRenderedElements", "syncZIndex"],
+      effects: ["trackDismissableElement", "trapFocus", "preventScroll", "hideContentBelow"],
+      on: {
+        "CONTROLLED.CLOSE": {
+          target: "closed"
+        },
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ]
+      }
+    },
+    closed: {
+      on: {
+        "CONTROLLED.OPEN": {
+          target: "open"
+        },
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ],
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isOpenControlled: ({ prop }) => prop("open") != void 0
+    },
+    effects: {
+      trackDismissableElement({ scope, send, prop }) {
+        const getContentEl2 = () => getContentEl(scope);
+        return index$5.trackDismissableElement(getContentEl2, {
+          type: "dialog",
+          defer: true,
+          pointerBlocking: prop("modal"),
+          exclude: [getTriggerEl(scope)],
+          onInteractOutside(event) {
+            prop("onInteractOutside")?.(event);
+            if (!prop("closeOnInteractOutside")) {
+              event.preventDefault();
+            }
+          },
+          persistentElements: prop("persistentElements"),
+          onFocusOutside: prop("onFocusOutside"),
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onRequestDismiss: prop("onRequestDismiss"),
+          onEscapeKeyDown(event) {
+            prop("onEscapeKeyDown")?.(event);
+            if (!prop("closeOnEscape")) {
+              event.preventDefault();
+            }
+          },
+          onDismiss() {
+            send({ type: "CLOSE", src: "interact-outside" });
+          }
+        });
+      },
+      preventScroll({ scope, prop }) {
+        if (!prop("preventScroll")) return;
+        return index$4.preventBodyScroll(scope.getDoc());
+      },
+      trapFocus({ scope, prop }) {
+        if (!prop("trapFocus")) return;
+        const contentEl = () => getContentEl(scope);
+        return index$3.trapFocus(contentEl, {
+          preventScroll: true,
+          returnFocusOnDeactivate: !!prop("restoreFocus"),
+          initialFocus: prop("initialFocusEl"),
+          setReturnFocus: (el) => prop("finalFocusEl")?.() ?? el
+        });
+      },
+      hideContentBelow({ scope, prop }) {
+        if (!prop("modal")) return;
+        const getElements = () => [getContentEl(scope)];
+        return index$2.ariaHidden(getElements, { defer: true });
+      }
+    },
+    actions: {
+      checkRenderedElements({ context, scope }) {
+        index$1.raf(() => {
+          context.set("rendered", {
+            title: !!getTitleEl(scope),
+            description: !!getDescriptionEl(scope)
+          });
+        });
+      },
+      syncZIndex({ scope }) {
+        index$1.raf(() => {
+          const contentEl = getContentEl(scope);
+          if (!contentEl) return;
+          const styles = index$1.getComputedStyle(contentEl);
+          const elems = [getPositionerEl(scope), getBackdropEl(scope)];
+          elems.forEach((node) => {
+            node?.style.setProperty("--z-index", styles.zIndex);
+            node?.style.setProperty("--layer-index", styles.getPropertyValue("--layer-index"));
+          });
+        });
+      },
+      invokeOnClose({ prop }) {
+        prop("onOpenChange")?.({ open: false });
+      },
+      invokeOnOpen({ prop }) {
+        prop("onOpenChange")?.({ open: true });
+      },
+      toggleVisibility({ prop, send, event }) {
+        send({
+          type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+          previousEvent: event
+        });
+      }
+    }
+  }
+});
+index$7.createProps()([
+  "aria-label",
+  "closeOnEscape",
+  "closeOnInteractOutside",
+  "dir",
+  "finalFocusEl",
+  "getRootNode",
+  "getRootNode",
+  "id",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "modal",
+  "onEscapeKeyDown",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onRequestDismiss",
+  "defaultOpen",
+  "open",
+  "persistentElements",
+  "preventScroll",
+  "restoreFocus",
+  "role",
+  "trapFocus"
+]);
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;

package/dist/node_modules/.pnpm/@zag-js_dialog@1.24.2/node_modules/@zag-js/dialog/dist/index.js

@@ -0,0 +1,338 @@
+import { createAnatomy } from '../../../../../@zag-js_anatomy@1.24.2/node_modules/@zag-js/anatomy/dist/index.js';
+import { ariaHidden } from '../../../../../@zag-js_aria-hidden@1.24.2/node_modules/@zag-js/aria-hidden/dist/index.js';
+import { createMachine } from '../../../../../@zag-js_core@1.24.2/node_modules/@zag-js/core/dist/index.js';
+import { trackDismissableElement } from '../../../../../@zag-js_dismissable@1.24.2/node_modules/@zag-js/dismissable/dist/index.js';
+import { raf, getComputedStyle } from '../../../../../@zag-js_dom-query@1.24.2/node_modules/@zag-js/dom-query/dist/index.js';
+import { trapFocus } from '../../../../../@zag-js_focus-trap@1.24.2/node_modules/@zag-js/focus-trap/dist/index.js';
+import { preventBodyScroll } from '../../../../../@zag-js_remove-scroll@1.24.2/node_modules/@zag-js/remove-scroll/dist/index.js';
+import { createProps } from '../../../../../@zag-js_types@1.24.2/node_modules/@zag-js/types/dist/index.js';
+
+// src/dialog.anatomy.ts
+var anatomy = createAnatomy("dialog").parts(
+  "trigger",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+
+// src/dialog.dom.ts
+var getPositionerId = (ctx) => ctx.ids?.positioner ?? `dialog:${ctx.id}:positioner`;
+var getBackdropId = (ctx) => ctx.ids?.backdrop ?? `dialog:${ctx.id}:backdrop`;
+var getContentId = (ctx) => ctx.ids?.content ?? `dialog:${ctx.id}:content`;
+var getTriggerId = (ctx) => ctx.ids?.trigger ?? `dialog:${ctx.id}:trigger`;
+var getTitleId = (ctx) => ctx.ids?.title ?? `dialog:${ctx.id}:title`;
+var getDescriptionId = (ctx) => ctx.ids?.description ?? `dialog:${ctx.id}:description`;
+var getCloseTriggerId = (ctx) => ctx.ids?.closeTrigger ?? `dialog:${ctx.id}:close`;
+var getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+var getBackdropEl = (ctx) => ctx.getById(getBackdropId(ctx));
+var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+var getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
+var getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
+var getCloseTriggerEl = (ctx) => ctx.getById(getCloseTriggerId(ctx));
+
+// src/dialog.connect.ts
+function connect(service, normalize) {
+  const { state, send, context, prop, scope } = service;
+  const ariaLabel = prop("aria-label");
+  const open = state.matches("open");
+  return {
+    open,
+    setOpen(nextOpen) {
+      const open2 = state.matches("open");
+      if (open2 === nextOpen) return;
+      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+    },
+    getTriggerProps() {
+      return normalize.button({
+        ...parts.trigger.attrs,
+        dir: prop("dir"),
+        id: getTriggerId(scope),
+        "aria-haspopup": "dialog",
+        type: "button",
+        "aria-expanded": open,
+        "data-state": open ? "open" : "closed",
+        "aria-controls": getContentId(scope),
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "TOGGLE" });
+        }
+      });
+    },
+    getBackdropProps() {
+      return normalize.element({
+        ...parts.backdrop.attrs,
+        dir: prop("dir"),
+        hidden: !open,
+        id: getBackdropId(scope),
+        "data-state": open ? "open" : "closed"
+      });
+    },
+    getPositionerProps() {
+      return normalize.element({
+        ...parts.positioner.attrs,
+        dir: prop("dir"),
+        id: getPositionerId(scope),
+        style: {
+          pointerEvents: open ? void 0 : "none"
+        }
+      });
+    },
+    getContentProps() {
+      const rendered = context.get("rendered");
+      return normalize.element({
+        ...parts.content.attrs,
+        dir: prop("dir"),
+        role: prop("role"),
+        hidden: !open,
+        id: getContentId(scope),
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        "aria-modal": true,
+        "aria-label": ariaLabel || void 0,
+        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId(scope),
+        "aria-describedby": rendered.description ? getDescriptionId(scope) : void 0
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        dir: prop("dir"),
+        id: getTitleId(scope)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        dir: prop("dir"),
+        id: getDescriptionId(scope)
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        ...parts.closeTrigger.attrs,
+        dir: prop("dir"),
+        id: getCloseTriggerId(scope),
+        type: "button",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          event.stopPropagation();
+          send({ type: "CLOSE" });
+        }
+      });
+    }
+  };
+}
+var machine = createMachine({
+  props({ props: props2, scope }) {
+    const alertDialog = props2.role === "alertdialog";
+    const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
+    const modal = typeof props2.modal === "boolean" ? props2.modal : true;
+    return {
+      role: "dialog",
+      modal,
+      trapFocus: modal,
+      preventScroll: modal,
+      closeOnInteractOutside: !alertDialog,
+      closeOnEscape: true,
+      restoreFocus: true,
+      initialFocusEl,
+      ...props2
+    };
+  },
+  initialState({ prop }) {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "closed";
+  },
+  context({ bindable }) {
+    return {
+      rendered: bindable(() => ({
+        defaultValue: { title: true, description: true }
+      }))
+    };
+  },
+  watch({ track, action, prop }) {
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  states: {
+    open: {
+      entry: ["checkRenderedElements", "syncZIndex"],
+      effects: ["trackDismissableElement", "trapFocus", "preventScroll", "hideContentBelow"],
+      on: {
+        "CONTROLLED.CLOSE": {
+          target: "closed"
+        },
+        CLOSE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ]
+      }
+    },
+    closed: {
+      on: {
+        "CONTROLLED.OPEN": {
+          target: "open"
+        },
+        OPEN: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ],
+        TOGGLE: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isOpenControlled: ({ prop }) => prop("open") != void 0
+    },
+    effects: {
+      trackDismissableElement({ scope, send, prop }) {
+        const getContentEl2 = () => getContentEl(scope);
+        return trackDismissableElement(getContentEl2, {
+          type: "dialog",
+          defer: true,
+          pointerBlocking: prop("modal"),
+          exclude: [getTriggerEl(scope)],
+          onInteractOutside(event) {
+            prop("onInteractOutside")?.(event);
+            if (!prop("closeOnInteractOutside")) {
+              event.preventDefault();
+            }
+          },
+          persistentElements: prop("persistentElements"),
+          onFocusOutside: prop("onFocusOutside"),
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onRequestDismiss: prop("onRequestDismiss"),
+          onEscapeKeyDown(event) {
+            prop("onEscapeKeyDown")?.(event);
+            if (!prop("closeOnEscape")) {
+              event.preventDefault();
+            }
+          },
+          onDismiss() {
+            send({ type: "CLOSE", src: "interact-outside" });
+          }
+        });
+      },
+      preventScroll({ scope, prop }) {
+        if (!prop("preventScroll")) return;
+        return preventBodyScroll(scope.getDoc());
+      },
+      trapFocus({ scope, prop }) {
+        if (!prop("trapFocus")) return;
+        const contentEl = () => getContentEl(scope);
+        return trapFocus(contentEl, {
+          preventScroll: true,
+          returnFocusOnDeactivate: !!prop("restoreFocus"),
+          initialFocus: prop("initialFocusEl"),
+          setReturnFocus: (el) => prop("finalFocusEl")?.() ?? el
+        });
+      },
+      hideContentBelow({ scope, prop }) {
+        if (!prop("modal")) return;
+        const getElements = () => [getContentEl(scope)];
+        return ariaHidden(getElements, { defer: true });
+      }
+    },
+    actions: {
+      checkRenderedElements({ context, scope }) {
+        raf(() => {
+          context.set("rendered", {
+            title: !!getTitleEl(scope),
+            description: !!getDescriptionEl(scope)
+          });
+        });
+      },
+      syncZIndex({ scope }) {
+        raf(() => {
+          const contentEl = getContentEl(scope);
+          if (!contentEl) return;
+          const styles = getComputedStyle(contentEl);
+          const elems = [getPositionerEl(scope), getBackdropEl(scope)];
+          elems.forEach((node) => {
+            node?.style.setProperty("--z-index", styles.zIndex);
+            node?.style.setProperty("--layer-index", styles.getPropertyValue("--layer-index"));
+          });
+        });
+      },
+      invokeOnClose({ prop }) {
+        prop("onOpenChange")?.({ open: false });
+      },
+      invokeOnOpen({ prop }) {
+        prop("onOpenChange")?.({ open: true });
+      },
+      toggleVisibility({ prop, send, event }) {
+        send({
+          type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+          previousEvent: event
+        });
+      }
+    }
+  }
+});
+createProps()([
+  "aria-label",
+  "closeOnEscape",
+  "closeOnInteractOutside",
+  "dir",
+  "finalFocusEl",
+  "getRootNode",
+  "getRootNode",
+  "id",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "modal",
+  "onEscapeKeyDown",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onRequestDismiss",
+  "defaultOpen",
+  "open",
+  "persistentElements",
+  "preventScroll",
+  "restoreFocus",
+  "role",
+  "trapFocus"
+]);
+
+export { anatomy, connect, machine };