UNPKG

@vela-ui/react

Version:

Vela UI React components

76 lines (73 loc) 2.01 kB
import { focusRing } from "./chunk-2FWUIDJB.mjs"; // src/components/field.tsx import { FieldError as AriaFieldError, Group as AriaGroup, Label as AriaLabel, Text as AriaText, composeRenderProps } from "react-aria-components"; import { tv } from "tailwind-variants"; import { jsx } from "react/jsx-runtime"; var fieldVariants = tv({ slots: { label: "group-data-[invalid]:text-destructive flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", description: "text-muted-foreground text-sm", fieldError: "text-destructive text-sm" } }); var { label, description, fieldError } = fieldVariants(); function Label({ className, ...props }) { return /* @__PURE__ */ jsx(AriaLabel, { "data-slot": "label", className: label({ className }), ...props }); } function Description({ className, ...props }) { return /* @__PURE__ */ jsx(AriaText, { slot: "description", className: description({ className }), ...props }); } function FieldError({ className, ...props }) { return /* @__PURE__ */ jsx( AriaFieldError, { className: composeRenderProps(className, (className2) => fieldError({ className: className2 })), ...props } ); } var fieldGroupVariants = tv({ extend: focusRing, base: "group border-input relative flex h-10 items-center overflow-hidden rounded-lg border shadow-xs", variants: { isFocusWithin: { true: "border-ring" }, isInvalid: { true: "border-destructive" }, isDisabled: { true: "opacity-50" } } }); function FieldGroup({ className, ...props }) { return /* @__PURE__ */ jsx( AriaGroup, { className: composeRenderProps( className, (className2, renderProps) => fieldGroupVariants({ ...renderProps, className: className2 }) ), ...props } ); } export { fieldVariants, Label, Description, FieldError, FieldGroup };