@ark-ui/solid 5.9.2 → 5.11.0

package/dist/chunk/MTT5ESIK.jsx

@@ -0,0 +1,400 @@
+import {
+  createMachine
+} from "./ETB2BIQZ.jsx";
+import {
+  useFieldContext
+} from "./HQOIDGRU.jsx";
+import {
+  createSplitProps
+} from "./6WEDGJKQ.jsx";
+import {
+  ark
+} from "./UFYZ7HLU.jsx";
+import {
+  useEnvironmentContext
+} from "./E2L62MKC.jsx";
+import {
+  useLocaleContext
+} from "./YUC6JE7K.jsx";
+import {
+  createContext
+} from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
+import {
+  __export
+} from "./7IUG3E2V.jsx";
+
+// src/components/password-input/use-password-input-context.ts
+var [PasswordInputProvider, usePasswordInputContext] = createContext({
+  hookName: "usePasswordInputContext",
+  providerName: "<PasswordInputProvider />"
+});
+
+// src/components/password-input/password-input-context.tsx
+var PasswordInputContext = (props2) => props2.children(usePasswordInputContext());
+
+// src/components/password-input/password-input-control.tsx
+import { mergeProps } from "@zag-js/solid";
+var PasswordInputControl = (props2) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps(() => passwordInput().getControlProps(), props2);
+  return <ark.div {...mergedProps} />;
+};
+
+// src/components/password-input/password-input-indicator.tsx
+import { mergeProps as mergeProps2 } from "@zag-js/solid";
+import { Show } from "solid-js";
+var PasswordInputIndicator = (props2) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps2(() => passwordInput().getIndicatorProps(), props2);
+  return <ark.span {...mergedProps}>
+      <Show when={passwordInput().visible} fallback={props2.fallback}>
+        {props2.children}
+      </Show>
+    </ark.span>;
+};
+
+// src/components/password-input/password-input-input.tsx
+import { mergeProps as mergeProps3 } from "@zag-js/solid";
+var PasswordInputInput = (props2) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps3(() => passwordInput().getInputProps(), props2);
+  const field = useFieldContext();
+  return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
+};
+
+// src/components/password-input/password-input-label.tsx
+import { mergeProps as mergeProps4 } from "@zag-js/solid";
+var PasswordInputLabel = (props2) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps4(() => passwordInput().getLabelProps(), props2);
+  return <ark.label {...mergedProps} />;
+};
+
+// src/components/password-input/password-input-root.tsx
+import { mergeProps as mergeProps5 } from "@zag-js/solid";
+
+// ../../node_modules/@zag-js/password-input/dist/index.mjs
+import { createAnatomy } from "@zag-js/anatomy";
+import { dataAttr, isLeftClick, ariaAttr } from "@zag-js/dom-query";
+import { uuid, createSplitProps as createSplitProps2 } from "@zag-js/utils";
+import { createProps } from "@zag-js/types";
+var anatomy = createAnatomy("password-input").parts(
+  "root",
+  "input",
+  "label",
+  "control",
+  "indicator",
+  "visibilityTrigger"
+);
+var parts = anatomy.build();
+var getInputId = (ctx) => ctx.ids?.input ?? `p-input-${ctx.id}-input`;
+var getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+function connect(service, normalize) {
+  const { scope, prop, context } = service;
+  const visible = context.get("visible");
+  const disabled = !!prop("disabled");
+  const invalid = !!prop("invalid");
+  const readOnly = !!prop("readOnly");
+  const interactive = !(readOnly || disabled);
+  const translations = prop("translations");
+  return {
+    visible,
+    disabled,
+    invalid,
+    focus() {
+      getInputEl(scope)?.focus();
+    },
+    setVisible(value) {
+      service.send({ type: "VISIBILITY.SET", value });
+    },
+    toggleVisible() {
+      service.send({ type: "VISIBILITY.SET", value: !visible });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        htmlFor: getInputId(scope),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        id: getInputId(scope),
+        autoCapitalize: "off",
+        name: prop("name"),
+        required: prop("required"),
+        autoComplete: prop("autoComplete"),
+        spellCheck: false,
+        readOnly,
+        disabled,
+        type: visible ? "text" : "password",
+        "data-state": visible ? "visible" : "hidden",
+        "aria-invalid": ariaAttr(invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly),
+        ...prop("ignorePasswordManagers") ? passwordManagerProps : {}
+      });
+    },
+    getVisibilityTriggerProps() {
+      return normalize.button({
+        ...parts.visibilityTrigger.attrs,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": getInputId(scope),
+        "aria-expanded": visible,
+        "data-readonly": dataAttr(readOnly),
+        disabled,
+        "data-disabled": dataAttr(disabled),
+        "data-state": visible ? "visible" : "hidden",
+        "aria-label": translations?.visibilityTrigger?.(visible),
+        onPointerDown(event) {
+          if (!isLeftClick(event)) return;
+          if (!interactive) return;
+          event.preventDefault();
+          service.send({ type: "TRIGGER.CLICK" });
+        }
+      });
+    },
+    getIndicatorProps() {
+      return normalize.element({
+        ...parts.indicator.attrs,
+        "aria-hidden": true,
+        "data-state": visible ? "visible" : "hidden",
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-readonly": dataAttr(readOnly)
+      });
+    }
+  };
+}
+var passwordManagerProps = {
+  // 1Password
+  "data-1p-ignore": "",
+  // LastPass
+  "data-lpignore": "true",
+  // Bitwarden
+  "data-bwignore": "true",
+  // Dashlane
+  "data-form-type": "other",
+  // Proton Pass
+  "data-protonpass-ignore": "true"
+};
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      id: uuid(),
+      defaultVisible: false,
+      autoComplete: "current-password",
+      ignorePasswordManagers: false,
+      ...props2,
+      translations: {
+        visibilityTrigger(visible) {
+          return visible ? "Hide password" : "Show password";
+        },
+        ...props2.translations
+      }
+    };
+  },
+  context({ prop, bindable }) {
+    return {
+      visible: bindable(() => ({
+        value: prop("visible"),
+        defaultValue: prop("defaultVisible"),
+        onChange(value) {
+          prop("onVisibilityChange")?.({ visible: value });
+        }
+      }))
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  effects: ["trackFormEvents"],
+  states: {
+    idle: {
+      on: {
+        "VISIBILITY.SET": {
+          actions: ["setVisibility"]
+        },
+        "TRIGGER.CLICK": {
+          actions: ["toggleVisibility", "focusInputEl"]
+        }
+      }
+    }
+  },
+  implementations: {
+    actions: {
+      setVisibility({ context, event }) {
+        context.set("visible", event.value);
+      },
+      toggleVisibility({ context }) {
+        context.set("visible", (c) => !c);
+      },
+      focusInputEl({ scope }) {
+        const inputEl = getInputEl(scope);
+        inputEl?.focus();
+      }
+    },
+    effects: {
+      trackFormEvents({ scope, send }) {
+        const inputEl = getInputEl(scope);
+        const form = inputEl?.form;
+        if (!form) return;
+        const win = scope.getWin();
+        const controller = new win.AbortController();
+        form.addEventListener(
+          "reset",
+          (event) => {
+            if (event.defaultPrevented) return;
+            send({ type: "VISIBILITY.SET", value: false });
+          },
+          { signal: controller.signal }
+        );
+        form.addEventListener(
+          "submit",
+          () => {
+            send({ type: "VISIBILITY.SET", value: false });
+          },
+          { signal: controller.signal }
+        );
+        return () => controller.abort();
+      }
+    }
+  }
+});
+var props = createProps()([
+  "defaultVisible",
+  "dir",
+  "id",
+  "onVisibilityChange",
+  "visible",
+  "ids",
+  "getRootNode",
+  "disabled",
+  "invalid",
+  "required",
+  "readOnly",
+  "translations",
+  "ignorePasswordManagers",
+  "autoComplete",
+  "name"
+]);
+var splitProps = createSplitProps2(props);
+
+// src/components/password-input/use-password-input.ts
+import { normalizeProps, useMachine } from "@zag-js/solid";
+import { createMemo, createUniqueId } from "solid-js";
+var usePasswordInput = (props2) => {
+  const id = createUniqueId();
+  const locale = useLocaleContext();
+  const environment = useEnvironmentContext();
+  const field = useFieldContext();
+  const machineProps = createMemo(() => ({
+    id,
+    ids: {
+      input: field?.().ids.control
+    },
+    disabled: field?.().disabled,
+    readOnly: field?.().readOnly,
+    required: field?.().required,
+    invalid: field?.().invalid,
+    dir: locale().dir,
+    getRootNode: environment().getRootNode,
+    ...runIfFn(props2)
+  }));
+  const service = useMachine(machine, machineProps);
+  return createMemo(() => connect(service, normalizeProps));
+};
+
+// src/components/password-input/password-input-root.tsx
+var PasswordInputRoot = (props2) => {
+  const [usePasswordInputProps, localProps] = createSplitProps()(props2, [
+    "autoComplete",
+    "defaultVisible",
+    "disabled",
+    "id",
+    "ids",
+    "ignorePasswordManagers",
+    "invalid",
+    "name",
+    "onVisibilityChange",
+    "readOnly",
+    "required",
+    "translations",
+    "visible"
+  ]);
+  const passwordInput = usePasswordInput(usePasswordInputProps);
+  const mergedProps = mergeProps5(() => passwordInput().getRootProps(), localProps);
+  return <PasswordInputProvider value={passwordInput}>
+      <ark.div {...mergedProps} />
+    </PasswordInputProvider>;
+};
+
+// src/components/password-input/password-input-root-provider.tsx
+import { mergeProps as mergeProps6 } from "@zag-js/solid";
+var PasswordInputRootProvider = (props2) => {
+  const mergedProps = mergeProps6(() => props2.value().getRootProps(), props2);
+  return <PasswordInputProvider value={props2.value}>
+      <ark.div {...mergedProps} />
+    </PasswordInputProvider>;
+};
+
+// src/components/password-input/password-input-visibility-trigger.tsx
+import { mergeProps as mergeProps7 } from "@zag-js/solid";
+var PasswordInputVisibilityTrigger = (props2) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps7(() => passwordInput().getVisibilityTriggerProps(), props2);
+  return <ark.button {...mergedProps} />;
+};
+
+// src/components/password-input/password-input.ts
+var password_input_exports = {};
+__export(password_input_exports, {
+  Context: () => PasswordInputContext,
+  Control: () => PasswordInputControl,
+  Indicator: () => PasswordInputIndicator,
+  Input: () => PasswordInputInput,
+  Label: () => PasswordInputLabel,
+  Root: () => PasswordInputRoot,
+  RootProvider: () => PasswordInputRootProvider,
+  VisibilityTrigger: () => PasswordInputVisibilityTrigger
+});
+
+export {
+  usePasswordInputContext,
+  PasswordInputContext,
+  PasswordInputControl,
+  PasswordInputIndicator,
+  PasswordInputInput,
+  PasswordInputLabel,
+  anatomy,
+  usePasswordInput,
+  PasswordInputRoot,
+  PasswordInputRootProvider,
+  PasswordInputVisibilityTrigger,
+  password_input_exports
+};

package/dist/chunk/{YTOMOC2N.jsx → N3H47LNB.jsx}

@@ -6,16 +6,16 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./HD73LMEZ.jsx";
-import {
-  runIfFn
-} from "./KGOB2IMX.jsx";
+} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";

package/dist/chunk/{PJOT65K5.js → N65DCNIH.js}

@@ -2,8 +2,8 @@ import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext }
 import { composeRefs } from './XN6EERRM.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './YMMMHJJS.js';
 import { useLocaleContext } from './OKZ64GSY.js';
+import { useEnvironmentContext } from './YO2MCGXO.js';
 import { createContext } from './TROPIN4C.js';
 import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';

package/dist/chunk/{MNJ5H4O3.js → NC7W2KIE.js}

@@ -1,13 +1,14 @@
-import { useFieldsetContext } from './QTCJZQD2.js';
+import { useFieldsetContext } from './6HQNY7WM.js';
 import { composeRefs } from './XN6EERRM.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
+import { useEnvironmentContext } from './YO2MCGXO.js';
 import { createContext } from './TROPIN4C.js';
 import { __export } from './ESLJRKWD.js';
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { splitProps, onMount, onCleanup, Show, mergeProps as mergeProps$2, createSignal, createUniqueId, createMemo } from 'solid-js';
-import { getWindow, dataAttr, ariaAttr } from '@zag-js/dom-query';
+import { dataAttr, ariaAttr } from '@zag-js/dom-query';
 import { createAnatomy } from '@zag-js/anatomy';
 import { autoresizeTextarea } from '@zag-js/auto-resize';
 
@@ -81,6 +82,7 @@ var parts = fieldAnatomy.build();
 // src/components/field/use-field.ts
 var useField = (props) => {
   const fieldset = useFieldsetContext();
+  const env = useEnvironmentContext();
   const fieldProps = mergeProps$2(
     { disabled: Boolean(fieldset?.().disabled), required: false, invalid: false, readOnly: false },
     props
@@ -96,13 +98,13 @@ var useField = (props) => {
   onMount(() => {
     const rootNode = rootRef();
     if (!rootNode) return;
-    const win = getWindow(rootNode);
-    const doc = win.document;
     const checkTextElements = () => {
-      setHasErrorText(!!doc.getElementById(errorTextId));
-      setHasHelperText(!!doc.getElementById(helperTextId));
+      const docOrShadowRoot = env().getRootNode();
+      setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+      setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
     };
     checkTextElements();
+    const win = env().getWindow();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     onCleanup(() => observer.disconnect());

package/dist/chunk/{ODWQP5BE.js → NEP3K5KL.js}

@@ -1,9 +1,9 @@
-import { useCollapsibleContext, collapsible_exports } from './GD2T6MEV.js';
+import { useCollapsibleContext, collapsible_exports } from './SGY2KGDL.js';
 import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './QFAL6GWC.js';
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './YMMMHJJS.js';
 import { useLocaleContext } from './OKZ64GSY.js';
+import { useEnvironmentContext } from './YO2MCGXO.js';
 import { createContext } from './TROPIN4C.js';
 import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';

package/dist/chunk/{4UCWZUKZ.jsx → NPHS6PVV.jsx}

@@ -6,16 +6,16 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./HD73LMEZ.jsx";
-import {
-  runIfFn
-} from "./KGOB2IMX.jsx";
+} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";

package/dist/chunk/{LMAXB47P.js → O5A5KQPC.js}

@@ -1,7 +1,7 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './YMMMHJJS.js';
 import { useLocaleContext } from './OKZ64GSY.js';
+import { useEnvironmentContext } from './YO2MCGXO.js';
 import { createContext } from './TROPIN4C.js';
 import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';

package/dist/chunk/{BK7OIA6A.js → OA4CU2PL.js}

@@ -1,7 +1,7 @@
 import { createSplitProps } from './ZMHI4GDJ.js';
 import { ark } from './EPLBB4QN.js';
-import { useEnvironmentContext } from './YMMMHJJS.js';
 import { useLocaleContext } from './OKZ64GSY.js';
+import { useEnvironmentContext } from './YO2MCGXO.js';
 import { createContext } from './TROPIN4C.js';
 import { runIfFn } from './DT73WLR4.js';
 import { __export } from './ESLJRKWD.js';

package/dist/chunk/{ZP3I6MQ6.jsx → OKNWZYMH.jsx}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./RNEZ7CPM.jsx";
+} from "./HQOIDGRU.jsx";
 import {
   createSplitProps
 } from "./6WEDGJKQ.jsx";
@@ -9,16 +9,16 @@ import {
 } from "./UFYZ7HLU.jsx";
 import {
   useEnvironmentContext
-} from "./HD73LMEZ.jsx";
-import {
-  runIfFn
-} from "./KGOB2IMX.jsx";
+} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";
+import {
+  runIfFn
+} from "./KGOB2IMX.jsx";
 import {
   __export
 } from "./7IUG3E2V.jsx";