@smitch/fluid
Version:
A Next/React ui-component libray.
36 lines (35 loc) • 2.31 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-accent 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;