@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
36 lines • 2.38 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
var fileClasses = "bg-dark text-light dark:bg-light dark:text-dark rounded-md p-[1em] flex items-center justify-center whitespace-nowrap !w-auto";
var requiredClasses = "after:text-warning-dark after:dark:text-warning-light after:content-['_*']";
var sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg",
xl: "text-2xl",
};
var layouts = {
col: "flex flex-col items-start gap-2",
row: "grid grid-cols-3 items-start gap-4",
row_reverse: "flex flex-wrap justify-end flex-row-reverse gap-2 items-center",
};
var widthClasses = function (type) {
return type === "checkbox"
? "w-auto"
: type === "radio"
? "w-auto"
: type === "color"
? "w-auto"
: type === "number"
? "w-auto"
: "w-full";
};
var Label = function (_a) {
var forId = _a.forId, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.layout, layout = _c === void 0 ? "col" : _c, label = _a.label, _d = _a.isBold, isBold = _d === void 0 ? true : _d, required = _a.required, _e = _a.type, type = _e === void 0 ? "text" : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f, style = _a.style;
var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
return (_jsxs("label", { className: twMerge("label group cursor-pointer w-full ".concat(sizeClasses, " ").concat(layoutClasses, " ").concat(isBold ? "font-semibold" : "font-nomal", " text-dark dark:text-light ").concat(type), className), "data-testid": "label", htmlFor: forId, style: style, children: [_jsxs("span", { className: "inline-block [&:has(svg)]:w-full ".concat(layout === "row" ? "pt-2" : "", " ").concat(type === "file" ? fileClasses : "", " ").concat(required ? requiredClasses : ""), children: [label, " ", type === "file" && _jsx("span", { className: "sr-only", children: "Upload file icon" })] }), _jsx("div", { className: "".concat(widthClasses(type), " col-span-2 [&:has(input.w-0)]:absolute [&:has(input.password)]:relative"), children: children })] }));
};
export default Label;
//# sourceMappingURL=Label.js.map