@tolokoban/ui
Version:
React components with theme
32 lines • 3.71 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Theme } from "../../theme/index.js";
import Styles from "./Label.module.css";
import { ViewPanel } from "../Panel/index.js";
const $ = Theme.classNames;
export function ViewLabel({ color, className, value, title, box = "column", fullwidth, children, }) {
const id = `labelled/${React.useId()}`;
const handleMount = (div) => {
if (!div)
return;
const child = div.querySelector("input,textarea,button,meter,output,progress,select");
if (!child)
return;
child.setAttribute("id", id);
};
if (!value)
return _jsx(_Fragment, { children: children });
const style = {};
if (color)
style.color = `var(--theme-color-${color})`;
const main = (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: id, title: title, className: $.join(className, Styles.Label), style: style, children: value }), children && (_jsx("div", { ref: handleMount, className: Styles.LabelContent, children: children }))] }));
switch (box) {
case "row":
return (_jsx(ViewPanel, { display: fullwidth ? "flex" : "inline-flex", flexDirection: "row", alignItems: "center", gap: "1em", children: main }));
case "column":
return (_jsx(ViewPanel, { display: fullwidth ? "flex" : "inline-flex", flexDirection: "column", alignItems: "stretch", gap: "0", children: main }));
default:
return main;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGFiZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdmlldy9MYWJlbC9MYWJlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUk1QyxPQUFPLE1BQU0sTUFBTSxvQkFBb0IsQ0FBQTtBQUN2QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sVUFBVSxDQUFBO0FBRXBDLE1BQU0sQ0FBQyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUE7QUFxQjFCLE1BQU0sVUFBVSxTQUFTLENBQUMsRUFDdEIsS0FBSyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsS0FBSyxFQUNMLEdBQUcsR0FBRyxRQUFRLEVBQ2QsU0FBUyxFQUNULFFBQVEsR0FDSztJQUNiLE1BQU0sRUFBRSxHQUFHLFlBQVksS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUE7SUFDdEMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxHQUEwQixFQUFFLEVBQUU7UUFDL0MsSUFBSSxDQUFDLEdBQUc7WUFBRSxPQUFNO1FBRWhCLE1BQU0sS0FBSyxHQUFHLEdBQUcsQ0FBQyxhQUFhLENBQzNCLG9EQUFvRCxDQUN2RCxDQUFBO1FBQ0QsSUFBSSxDQUFDLEtBQUs7WUFBRSxPQUFNO1FBRWxCLEtBQUssQ0FBQyxZQUFZLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFBO0lBQ2hDLENBQUMsQ0FBQTtJQUNELElBQUksQ0FBQyxLQUFLO1FBQUUsT0FBTyw0QkFBRyxRQUFRLEdBQUksQ0FBQTtJQUVsQyxNQUFNLEtBQUssR0FBd0IsRUFBRSxDQUFBO0lBQ3JDLElBQUksS0FBSztRQUFFLEtBQUssQ0FBQyxLQUFLLEdBQUcscUJBQXFCLEtBQUssR0FBRyxDQUFBO0lBRXRELE1BQU0sSUFBSSxHQUFHLENBQ1QsOEJBQ0ksZ0JBQ0ksT0FBTyxFQUFFLEVBQUUsRUFDWCxLQUFLLEVBQUUsS0FBSyxFQUNaLFNBQVMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLEVBQzFDLEtBQUssRUFBRSxLQUFLLFlBRVgsS0FBSyxHQUNGLEVBQ1AsUUFBUSxJQUFJLENBQ1QsY0FBSyxHQUFHLEVBQUUsV0FBVyxFQUFFLFNBQVMsRUFBRSxNQUFNLENBQUMsWUFBWSxZQUNoRCxRQUFRLEdBQ1AsQ0FDVCxJQUNGLENBQ04sQ0FBQTtJQUNELFFBQVEsR0FBRyxFQUFFLENBQUM7UUFDVixLQUFLLEtBQUs7WUFDTixPQUFPLENBQ0gsS0FBQyxTQUFTLElBQ04sT0FBTyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxhQUFhLEVBQzNDLGFBQWEsRUFBQyxLQUFLLEVBQ25CLFVBQVUsRUFBQyxRQUFRLEVBQ25CLEdBQUcsRUFBQyxLQUFLLFlBRVIsSUFBSSxHQUNHLENBQ2YsQ0FBQTtRQUNMLEtBQUssUUFBUTtZQUNULE9BQU8sQ0FDSCxLQUFDLFNBQVMsSUFDTixPQUFPLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLGFBQWEsRUFDM0MsYUFBYSxFQUFDLFFBQVEsRUFDdEIsVUFBVSxFQUFDLFNBQVMsRUFDcEIsR0FBRyxFQUFDLEdBQUcsWUFFTixJQUFJLEdBQ0csQ0FDZixDQUFBO1FBQ0w7WUFDSSxPQUFPLElBQUksQ0FBQTtJQUNuQixDQUFDO0FBQ0wsQ0FBQyJ9