@ark-ui/solid/dist/chunk/TDCYVNLO.js

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import { useFieldContext } from './VJ2ZFW6U.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createUniqueId, createMemo } from 'solid-js';
import * as passwordInput from '@zag-js/password-input';
export { anatomy } from '@zag-js/password-input';

// 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 = (props) => props.children(usePasswordInputContext());
var PasswordInputControl = (props) => {
  const passwordInput2 = usePasswordInputContext();
  const mergedProps = mergeProps(() => passwordInput2().getControlProps(), props);
  return createComponent(ark.div, mergedProps);
};
var PasswordInputIndicator = (props) => {
  const passwordInput2 = usePasswordInputContext();
  const mergedProps = mergeProps(() => passwordInput2().getIndicatorProps(), props);
  return createComponent(ark.span, mergeProps$1(mergedProps, {
    get children() {
      return createComponent(Show, {
        get when() {
          return passwordInput2().visible;
        },
        get fallback() {
          return props.fallback;
        },
        get children() {
          return props.children;
        }
      });
    }
  }));
};
var PasswordInputInput = (props) => {
  const passwordInput2 = usePasswordInputContext();
  const mergedProps = mergeProps(() => passwordInput2().getInputProps(), props);
  const field = useFieldContext();
  return createComponent(ark.input, mergeProps$1({
    get ["aria-describedby"]() {
      return field?.().ariaDescribedby;
    }
  }, mergedProps));
};
var PasswordInputLabel = (props) => {
  const passwordInput2 = usePasswordInputContext();
  const mergedProps = mergeProps(() => passwordInput2().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
var usePasswordInput = (props) => {
  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(props)
  }));
  const service = useMachine(passwordInput.machine, machineProps);
  return createMemo(() => passwordInput.connect(service, normalizeProps));
};

// src/components/password-input/password-input-root.tsx
var PasswordInputRoot = (props) => {
  const [usePasswordInputProps, localProps] = createSplitProps()(props, ["autoComplete", "defaultVisible", "disabled", "id", "ids", "ignorePasswordManagers", "invalid", "name", "onVisibilityChange", "readOnly", "required", "translations", "visible"]);
  const passwordInput2 = usePasswordInput(usePasswordInputProps);
  const mergedProps = mergeProps(() => passwordInput2().getRootProps(), localProps);
  return createComponent(PasswordInputProvider, {
    value: passwordInput2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var PasswordInputRootProvider = (props) => {
  const mergedProps = mergeProps(() => props.value().getRootProps(), props);
  return createComponent(PasswordInputProvider, {
    get value() {
      return props.value;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var PasswordInputVisibilityTrigger = (props) => {
  const passwordInput2 = usePasswordInputContext();
  const mergedProps = mergeProps(() => passwordInput2().getVisibilityTriggerProps(), props);
  return createComponent(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 { PasswordInputContext, PasswordInputControl, PasswordInputIndicator, PasswordInputInput, PasswordInputLabel, PasswordInputRoot, PasswordInputRootProvider, PasswordInputVisibilityTrigger, password_input_exports, usePasswordInput, usePasswordInputContext };