UNPKG

@ark-ui/solid

Version:

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

135 lines (128 loc) 4.72 kB
import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { useEnvironmentContext } from './YO2MCGXO.js'; import { createContext } from './TROPIN4C.js'; import { runIfFn } from './DT73WLR4.js'; import { __export } from './ESLJRKWD.js'; import { createComponent } from 'solid-js/web'; import { mergeProps } from '@zag-js/solid'; import { Show, mergeProps as mergeProps$1, createUniqueId, createSignal, createEffect, createMemo } from 'solid-js'; import { dataAttr } from '@zag-js/dom-query'; import { createAnatomy } from '@zag-js/anatomy'; // 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 fieldsetAnatomy = createAnatomy("fieldset").parts("root", "errorText", "helperText", "legend"); var parts = fieldsetAnatomy.build(); // src/components/fieldset/use-fieldset.ts var useFieldset = (props) => { useEnvironmentContext(); const mergedProps = mergeProps$1({ disabled: false, invalid: false }, runIfFn(props)); let rootRef; const id = mergedProps.id ?? createUniqueId(); const errorTextId = `fieldset::${id}::error-text`; const helperTextId = `fieldset::${id}::helper-text`; const [hasErrorText, setHasErrorText] = createSignal(false); const [hasHelperText, setHasHelperText] = createSignal(false); createEffect(() => { return; }); const labelIds = []; if (hasErrorText() && mergedProps.invalid) labelIds.push(errorTextId); if (hasHelperText()) labelIds.push(helperTextId); const getRootProps = () => ({ ...parts.root.attrs, disabled: mergedProps.disabled, "data-disabled": dataAttr(mergedProps.disabled), "data-invalid": dataAttr(mergedProps.invalid), "aria-describedby": labelIds.join(" ") || void 0 }); const getLegendProps = () => ({ ...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 }, 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, mergedProps); } }); }; 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, fieldsetAnatomy, fieldset_exports, useFieldset, useFieldsetContext };