@fidely-ui/react/dist/components/field/field.js

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { ark } from '@ark-ui/react/factory';
import { Field as ArkField, useFieldContext } from '@ark-ui/react/field';
import { field } from '@fidely-ui/styled-system/recipes';
import { cx } from '@fidely-ui/styled-system/css';
import { makeStyleContext } from '../../system/make-style-context';
const { withSlotProvider, withSlotContext } = makeStyleContext(field);
export const FieldRootProvider = withSlotProvider(ArkField.RootProvider, 'root');
export const FieldRoot = withSlotProvider(ArkField.Root, 'root');
export const FieldError = withSlotContext(ArkField.ErrorText, 'errorText');
export const FieldHelperText = withSlotContext(ArkField.HelperText, 'helperText');
export const FieldLabel = withSlotContext(ArkField.Label, 'label');
export const FieldRequiredIndicator = React.forwardRef(function FieldIndicator(props, ref) {
    const { fallback, className, children = '*', ...rest } = props;
    const slotStyles = field().requiredIndicator;
    const context = useFieldContext();
    if (!context.required) {
        return fallback;
    }
    return (_jsx(ark.span, { ref: ref, "aria-hidden": "true", ...rest, className: cx('fidely-field__indicator', slotStyles, className), children: children }));
});
export const FieldContext = ArkField.Context;