@baseplate-dev/ui-components
Version:
Shared UI component library
57 lines • 2.55 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { Slot } from 'radix-ui';
import * as React from 'react';
import { cn } from '#src/utils/index.js';
import { Label } from '../label/label.js';
const FormItemContext = React.createContext(null);
const useFormField = () => {
const itemContext = React.useContext(FormItemContext);
if (!itemContext) {
throw new Error('useFormField should be used within <FormItem>');
}
const { id, error } = itemContext;
return {
id,
error,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
};
};
function FormItem({ className, error, ...props }) {
const id = React.useId();
return (_jsx(FormItemContext.Provider, { value: { id, error }, children: _jsx("div", { "data-slot": "form-item", className: cn('grid gap-2', className), ...props }) }));
}
function FormLabel({ className, ...props }) {
const { error, formItemId } = useFormField();
if (props.children === null || props.children === undefined) {
return null;
}
return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn('data-[error=true]:text-destructive', className), htmlFor: formItemId, ...props }));
}
function FormControl({ ...props }) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return (_jsx(Slot.Root, { "data-slot": "form-control", id: formItemId, "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId, "aria-invalid": !!error, ...props }));
}
function FormDescription({ className, ...props }) {
const { formDescriptionId } = useFormField();
if (props.children === null || props.children === undefined) {
return null;
}
return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn('text-sm text-muted-foreground', className), ...props }));
}
function FormMessage({ className, ...props }) {
const { error, formMessageId } = useFormField();
const body = error
? error instanceof Error
? error.message
: error
: props.children;
if (!body) {
return null;
}
return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn('text-sm text-destructive', className), ...props, children: body }));
}
export { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField, };
//# sourceMappingURL=form-item.js.map