UNPKG

@vela-ui/react

Version:

Vela UI React components

128 lines (121 loc) 4.9 kB
"use strict"; "use client"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/components/checkbox-group.tsx var checkbox_group_exports = {}; __export(checkbox_group_exports, { CheckboxGroup: () => CheckboxGroup, CheckboxGroupRoot: () => CheckboxGroupRoot }); module.exports = __toCommonJS(checkbox_group_exports); var import_react_aria_components3 = require("react-aria-components"); // src/lib/utils.ts var import_clsx = require("clsx"); var import_react_aria_components = require("react-aria-components"); var import_tailwind_merge = require("tailwind-merge"); function composeTailwindRenderProps(className, tailwind) { return (0, import_react_aria_components.composeRenderProps)(className, (className2) => (0, import_tailwind_merge.twMerge)(tailwind, className2)); } // src/components/field.tsx var import_react_aria_components2 = require("react-aria-components"); var import_tailwind_variants2 = require("tailwind-variants"); // src/lib/classes.ts var import_tailwind_variants = require("tailwind-variants"); var focusRing = (0, import_tailwind_variants.tv)({ base: "outline-hidden", variants: { isFocusVisible: { true: "border-ring ring-ring/50 ring-[3px]" }, isInvalid: { true: "ring-destructive/20 dark:ring-destructive/40 border-destructive" } } }); // src/components/field.tsx var import_jsx_runtime = require("react/jsx-runtime"); var fieldVariants = (0, import_tailwind_variants2.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__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components2.Label, { "data-slot": "label", className: label({ className }), ...props }); } function Description({ className, ...props }) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components2.Text, { slot: "description", className: description({ className }), ...props }); } function FieldError({ className, ...props }) { return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react_aria_components2.FieldError, { className: (0, import_react_aria_components2.composeRenderProps)(className, (className2) => fieldError({ className: className2 })), ...props } ); } var fieldGroupVariants = (0, import_tailwind_variants2.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" } } }); // src/components/checkbox-group.tsx var import_jsx_runtime2 = require("react/jsx-runtime"); function CheckboxGroupRoot({ className, ...props }) { return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)( import_react_aria_components3.CheckboxGroup, { "data-slot": "checkbox-group", className: composeTailwindRenderProps(className, "group flex flex-col gap-2"), ...props } ); } function CheckboxGroup({ children, label: label2, description: description2, errorMessage, ...props }) { return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckboxGroupRoot, { ...props, children: (0, import_react_aria_components3.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [ label2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { children: label2 }), children2, description2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Description, { children: description2 }), /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldError, { children: errorMessage }) ] })) }); } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { CheckboxGroup, CheckboxGroupRoot });