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

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

import { composeRefs } from './ROP6QZQ7.js';
import { parts } from './FCMJTSIR.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './5QLLQM7E.js';
import { runIfFn } from './DT73WLR4.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps } from '@zag-js/solid';
import { Show, mergeProps as mergeProps$2, createSignal, createUniqueId, onMount, onCleanup, createMemo } from 'solid-js';
import { dataAttr } from '@zag-js/dom-query';

// src/components/fieldset/use-fieldset-context.ts
var [FieldsetProvider, useFieldsetContext] = createContext({
  hookName: "useFieldsetContext",
  providerName: "<FieldsetProvider />",
  strict: false
});

// src/components/fieldset/fieldset-context.tsx
var FieldsetContext = (props) => props.children(useFieldsetContext());
var FieldsetErrorText = (props) => {
  const fieldset = useFieldsetContext();
  const mergedProps = mergeProps(() => fieldset().getErrorTextProps(), props);
  return createComponent(Show, {
    get when() {
      return fieldset().invalid;
    },
    get children() {
      return createComponent(ark.span, mergedProps);
    }
  });
};
var FieldsetHelperText = (props) => {
  const fieldset = useFieldsetContext();
  const mergedProps = mergeProps(() => fieldset().getHelperTextProps(), props);
  return createComponent(ark.span, mergedProps);
};
var FieldsetLegend = (props) => {
  const fieldset = useFieldsetContext();
  const mergedProps = mergeProps(() => fieldset().getLegendProps(), props);
  return createComponent(ark.legend, mergedProps);
};
var useFieldset = (props) => {
  const env = useEnvironmentContext();
  const mergedProps = mergeProps$2({ disabled: false, invalid: false }, runIfFn(props));
  const [rootRef, setRootRef] = createSignal(void 0);
  const id = mergedProps.id ?? createUniqueId();
  const legendId = `fieldset::${id}::legend`;
  const errorTextId = `fieldset::${id}::error-text`;
  const helperTextId = `fieldset::${id}::helper-text`;
  const [hasErrorText, setHasErrorText] = createSignal(false);
  const [hasHelperText, setHasHelperText] = createSignal(false);
  onMount(() => {
    const rootNode = rootRef();
    if (!rootNode) return;
    const checkTextElements = () => {
      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());
  });
  const labelIds = createMemo(() => {
    const ids = [];
    if (hasErrorText() && mergedProps.invalid) ids.push(errorTextId);
    if (hasHelperText()) ids.push(helperTextId);
    return ids;
  });
  const getRootProps = () => ({
    ...parts.root.attrs,
    disabled: mergedProps.disabled,
    "data-disabled": dataAttr(mergedProps.disabled),
    "data-invalid": dataAttr(mergedProps.invalid),
    "aria-labelledby": legendId,
    "aria-describedby": labelIds().join(" ") || void 0
  });
  const getLegendProps = () => ({
    id: legendId,
    ...parts.legend.attrs,
    "data-disabled": dataAttr(mergedProps.disabled),
    "data-invalid": dataAttr(mergedProps.invalid)
  });
  const getHelperTextProps = () => ({
    id: helperTextId,
    ...parts.helperText.attrs
  });
  const getErrorTextProps = () => ({
    id: errorTextId,
    ...parts.errorText.attrs,
    "aria-live": "polite"
  });
  return createMemo(() => ({
    refs: {
      rootRef: setRootRef
    },
    ids: {
      legend: legendId,
      errorText: errorTextId,
      helperText: helperTextId
    },
    disabled: mergedProps.disabled,
    invalid: mergedProps.invalid,
    getRootProps,
    getLegendProps,
    getHelperTextProps,
    getErrorTextProps
  }));
};

// src/components/fieldset/fieldset-root.tsx
var FieldsetRoot = (props) => {
  const [useFieldsetProps, localProps] = createSplitProps()(props, ["id", "disabled", "invalid"]);
  const fieldset = useFieldset(useFieldsetProps);
  const mergedProps = mergeProps(() => fieldset().getRootProps(), localProps);
  return createComponent(FieldsetProvider, {
    value: fieldset,
    get children() {
      return createComponent(ark.fieldset, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(fieldset().refs.rootRef, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};
FieldsetRoot.displayName = "FieldsetRoot";
var FieldsetRootProvider = (props) => {
  const [{
    value: fieldset
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => fieldset().getRootProps(), localProps);
  return createComponent(FieldsetProvider, {
    value: fieldset,
    get children() {
      return createComponent(ark.fieldset, mergedProps);
    }
  });
};

// src/components/fieldset/fieldset.tsx
var fieldset_exports = {};
__export(fieldset_exports, {
  Context: () => FieldsetContext,
  ErrorText: () => FieldsetErrorText,
  HelperText: () => FieldsetHelperText,
  Legend: () => FieldsetLegend,
  Root: () => FieldsetRoot,
  RootProvider: () => FieldsetRootProvider
});

export { FieldsetContext, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FieldsetRoot, FieldsetRootProvider, fieldset_exports, useFieldset, useFieldsetContext };