ivt
Version:
Ivt Components Library
142 lines (139 loc) • 6.32 kB
JavaScript
import { cva } from 'class-variance-authority';
import React__default from 'react';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import { L as Label } from '../chunks/label-atj6gghV.mjs';
import { S as Separator } from '../chunks/separator-StpvupIv.mjs';
import '../chunks/bundle-mjs-BYcyWisL.mjs';
import '../chunks/index-DgKlJYZP.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import 'react/jsx-runtime';
function FieldSet({ className, ...props }) {
return /*#__PURE__*/ React__default.createElement("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__*/ React__default.createElement("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__*/ React__default.createElement("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 flex w-full gap-3 data-[invalid=true]:text-destructive", {
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]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
],
responsive: [
"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]: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(// biome-ignore lint/a11y/useSemanticElements: <group>
/*#__PURE__*/ React__default.createElement("div", {
role: "group",
"data-slot": "field",
"data-orientation": orientation,
className: cn(fieldVariants({
orientation
}), className),
...props
}));
}
function FieldContent({ className, ...props }) {
return /*#__PURE__*/ React__default.createElement("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__*/ React__default.createElement(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]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className),
...props
});
}
function FieldTitle({ className, ...props }) {
return /*#__PURE__*/ React__default.createElement("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__*/ React__default.createElement("p", {
"data-slot": "field-description",
className: cn("text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
...props
});
}
function FieldSeparator({ children, className, ...props }) {
return /*#__PURE__*/ React__default.createElement("div", {
"data-slot": "field-separator",
"data-content": !!children,
className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
...props
}, /*#__PURE__*/ React__default.createElement(Separator, {
className: "absolute inset-0 top-1/2"
}), children && /*#__PURE__*/ React__default.createElement("span", {
className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
"data-slot": "field-separator-content"
}, children));
}
function FieldError({ className, children, errors, ...props }) {
const content = React__default.useMemo(()=>{
if (children) {
return children;
}
if (!errors?.length) {
return null;
}
if (errors?.length === 1) {
return errors[0]?.message;
}
return /*#__PURE__*/ React__default.createElement("ul", {
className: "ml-4 flex list-disc flex-col gap-1"
}, errors.map((error, index)=>error?.message && /*#__PURE__*/ React__default.createElement("li", {
key: index
}, error.message)));
}, [
children,
errors
]);
if (!content) {
return null;
}
return /*#__PURE__*/ React__default.createElement("div", {
role: "alert",
"data-slot": "field-error",
className: cn("text-destructive text-sm font-normal", className),
...props
}, content);
}
export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
//# sourceMappingURL=index.mjs.map