@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
135 lines (134 loc) • 6.14 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cva } from "class-variance-authority";
import { useMemo } from "react";
import { Label } from "./label.js";
import { Separator } from "./separator.js";
import { cn } from "../../lib/utilities.js";
function FieldSet({ className, ...props }) {
return /*#__PURE__*/ jsx("fieldset", {
"data-slot": "field-set",
className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
...props
});
}
function FieldLegend({ className, variant = "legend", ...props }) {
return /*#__PURE__*/ jsx("legend", {
"data-slot": "field-legend",
"data-variant": variant,
className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
...props
});
}
function FieldGroup({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "field-group",
className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
...props
});
}
const fieldVariants = cva("group/field data-[invalid=true]:text-red-500 flex w-full gap-3 dark:data-[invalid=true]:text-red-900", {
variants: {
orientation: {
vertical: [
"flex-col [&>*]:w-full [&>.sr-only]:w-auto"
],
horizontal: [
"flex-row items-center",
"[&>[data-slot=field-label]]:flex-auto",
"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
],
responsive: [
"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
]
}
},
defaultVariants: {
orientation: "vertical"
}
});
function Field({ className, orientation = "vertical", ...props }) {
return /*#__PURE__*/ jsx("div", {
role: "group",
"data-slot": "field",
"data-orientation": orientation,
className: cn(fieldVariants({
orientation
}), className),
...props
});
}
function FieldContent({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "field-content",
className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
...props
});
}
function FieldLabel({ className, ...props }) {
return /*#__PURE__*/ jsx(Label, {
"data-slot": "field-label",
className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:border-neutral-900 has-data-[state=checked]:bg-neutral-900/5 dark:has-data-[state=checked]:border-neutral-50 dark:dark:has-data-[state=checked]:bg-neutral-50/10 dark:has-data-[state=checked]:bg-neutral-50/5 dark:has-data-[state=checked]:bg-neutral-900/10", className),
...props
});
}
function FieldTitle({ className, ...props }) {
return /*#__PURE__*/ jsx("div", {
"data-slot": "field-label",
className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
...props
});
}
function FieldDescription({ className, ...props }) {
return /*#__PURE__*/ jsx("p", {
"data-slot": "field-description",
className: cn("text-sm leading-normal font-normal text-neutral-500 group-has-[[data-orientation=horizontal]]/field:text-balance dark:text-neutral-400", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
...props
});
}
function FieldSeparator({ children, className, ...props }) {
return /*#__PURE__*/ jsxs("div", {
"data-slot": "field-separator",
"data-content": Boolean(children) || void 0,
className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
...props,
children: [
/*#__PURE__*/ jsx(Separator, {
className: "absolute inset-0 top-1/2"
}),
Boolean(children) && /*#__PURE__*/ jsx("span", {
className: "relative mx-auto block w-fit bg-white px-2 text-neutral-500 dark:bg-neutral-950 dark:text-neutral-400",
"data-slot": "field-separator-content",
children: children
})
]
});
}
function FieldError({ className, children, errors, ...props }) {
const content = useMemo(()=>{
if (children) return children;
if (!errors) return null;
if (errors?.length === 1 && errors[0]?.message) return errors[0].message;
return /*#__PURE__*/ jsx("ul", {
className: "ml-4 flex list-disc flex-col gap-1",
children: errors.map((error, index)=>error?.message && /*#__PURE__*/ jsx("li", {
children: error.message
}, index))
});
}, [
children,
errors
]);
if (!content) return null;
return /*#__PURE__*/ jsx("div", {
role: "alert",
"data-slot": "field-error",
className: cn("text-sm font-normal text-red-500 dark:text-red-900", className),
...props,
children: content
});
}
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
//# sourceMappingURL=field.js.map