@arolariu/components/dist/components/ui/field.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Separator } from "./separator.js";
import { cn } from "../../lib/utilities.js";
import field_module from "./field.module.js";
import * as __rspack_external_react from "react";
function getFieldOrientationClass(orientation) {
    switch(orientation){
        case "horizontal":
            return field_module.horizontal;
        case "responsive":
            return field_module.responsive;
        default:
            return field_module.vertical;
    }
}
const FieldSet = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("fieldset", {
        ref: ref,
        "data-slot": "field-set",
        className: cn(field_module.fieldSet, className),
        ...props
    }));
const FieldLegend = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = "legend", ...props }, ref)=>/*#__PURE__*/ jsx("legend", {
        ref: ref,
        "data-slot": "field-legend",
        "data-variant": variant,
        className: cn(field_module.legend, "label" === variant ? field_module.legendLabel : field_module.legendDefault, className),
        ...props
    }));
const FieldGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "field-group",
        className: cn(field_module.group, className),
        ...props
    }));
const Field = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, orientation = "vertical", ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        role: "group",
        "data-slot": "field",
        "data-orientation": orientation,
        className: cn(field_module.field, getFieldOrientationClass(orientation), className),
        ...props
    }));
const FieldContent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "field-content",
        className: cn(field_module.content, className),
        ...props
    }));
const FieldLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("label", {
        ref: ref,
        "data-slot": "field-label",
        className: cn(field_module.label, className),
        ...props
    }));
const FieldTitle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "field-label",
        className: cn(field_module.title, className),
        ...props
    }));
const FieldDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("p", {
        ref: ref,
        "data-slot": "field-description",
        className: cn(field_module.description, className),
        ...props
    }));
const FieldSeparator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
        ref: ref,
        "data-slot": "field-separator",
        "data-content": children ? "true" : void 0,
        className: cn(field_module.separator, className),
        ...props,
        children: [
            /*#__PURE__*/ jsx(Separator, {
                className: field_module.separatorLine
            }),
            children ? /*#__PURE__*/ jsx("span", {
                className: field_module.separatorContent,
                children: children
            }) : null
        ]
    }));
const FieldError = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, errors, ...props }, ref)=>{
    const content = __rspack_external_react.useMemo(()=>{
        if (children) return /*#__PURE__*/ jsx("span", {
            children: children
        });
        if (!errors) return null;
        if (1 === errors.length && errors[0]?.message) return /*#__PURE__*/ jsx("span", {
            children: errors[0].message
        });
        return /*#__PURE__*/ jsx("ul", {
            className: field_module.errorList,
            children: errors.map((error, index)=>error?.message ? /*#__PURE__*/ jsx("li", {
                    children: error.message
                }, index) : null)
        });
    }, [
        children,
        errors
    ]);
    if (!content) return null;
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        role: "alert",
        "data-slot": "field-error",
        className: cn(field_module.error, className),
        ...props,
        children: content
    });
});
FieldSet.displayName = "FieldSet";
FieldLegend.displayName = "FieldLegend";
FieldGroup.displayName = "FieldGroup";
Field.displayName = "Field";
FieldContent.displayName = "FieldContent";
FieldLabel.displayName = "FieldLabel";
FieldTitle.displayName = "FieldTitle";
FieldDescription.displayName = "FieldDescription";
FieldSeparator.displayName = "FieldSeparator";
FieldError.displayName = "FieldError";
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

//# sourceMappingURL=field.js.map