@codeworker.br/govbr-tw-react
Version:
Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.
119 lines (118 loc) • 4.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// components/Kbd/index.tsx
import React from "react";
import { cva } from "class-variance-authority";
function cx(...c) {
return c.filter(Boolean).join(" ");
}
const kbdBase = cva([
"inline-flex select-none items-center justify-center align-middle",
"font-mono",
"rounded-md border",
"transition-colors",
"whitespace-nowrap",
].join(" "), {
variants: {
variant: {
default: "bg-govbr-pure-0 text-govbr-gray-80 border-govbr-gray-20 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.02),0_1px_0_0_rgba(0,0,0,0.03)]",
subtle: "bg-govbr-gray-2 text-govbr-gray-80 border-govbr-gray-10",
outline: "bg-transparent text-govbr-gray-80 border-govbr-gray-20",
ghost: "bg-transparent text-govbr-gray-80 border-transparent",
dark: "bg-govbr-blue-warm-vivid-90 text-govbr-pure-0 border-govbr-blue-warm-20",
},
size: {
xs: "text-[10px] px-1.5 h-5 min-w-[1.25rem]",
sm: "text-[11px] px-2 h-6 min-w-[1.5rem]",
md: "text-xs px-2.5 h-7 min-w-[1.75rem]",
},
density: {
lowest: "tracking-wide",
low: "",
default: "",
high: "",
},
pill: {
true: "rounded-full",
false: "",
},
muted: {
true: "opacity-80",
false: "",
},
},
defaultVariants: {
variant: "default",
size: "sm",
density: "default",
pill: false,
muted: false,
},
});
const groupVariants = cva("inline-flex items-center gap-1", {
variants: {
size: {
xs: "gap-0",
sm: "gap-0",
md: "gap-0",
},
},
defaultVariants: { size: "sm" },
});
const sepVariants = cva("text-[0.7em] opacity-70", {
variants: {
size: {
xs: "mx-0",
sm: "mx-0",
md: "mx-0",
},
},
defaultVariants: { size: "xs" },
});
function detectOs() {
var _a, _b;
if (typeof navigator === "undefined")
return "auto";
const p = ((_a = navigator.platform) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
const ua = ((_b = navigator.userAgent) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || "";
const isMac = /mac|iphone|ipad|ipod/.test(p) || /mac os|like mac os/.test(ua);
const isWin = /win/.test(p) || /windows/.test(ua);
return isMac ? "mac" : isWin ? "win" : "auto";
}
function labelFor(key, os) {
var _a;
if (typeof key !== "string")
return key;
const targetOs = os === "auto" ? detectOs() : os;
const map = {
// mod
Mod: targetOs === "mac" ? "⌘" : "Ctrl",
Cmd: "⌘",
Ctrl: "Ctrl",
Option: targetOs === "mac" ? "⌥" : "Alt",
Alt: "Alt",
Shift: "⇧",
// control keys
Enter: "Enter",
Return: "↩",
Tab: "Tab",
Space: "␣",
Backspace: "⌫",
Delete: "⌦",
Esc: "Esc",
Escape: "Esc",
// arrows
ArrowUp: "↑",
ArrowDown: "↓",
ArrowLeft: "←",
ArrowRight: "→",
};
return (_a = map[key]) !== null && _a !== void 0 ? _a : key;
}
export default function Kbd({ children, keys, separator = "+", os = "auto", colors, className, muted, pill, variant, size, density, }) {
// COMBO
if (keys && keys.length) {
return (_jsx("span", { className: groupVariants({ size }), role: "group", "aria-label": "keyboard shortcut", children: keys.map((k, i) => (_jsxs(React.Fragment, { children: [_jsx("kbd", { className: cx(kbdBase({ variant, size, density, pill, muted }), colors === null || colors === void 0 ? void 0 : colors.bg, colors === null || colors === void 0 ? void 0 : colors.text, colors === null || colors === void 0 ? void 0 : colors.border, colors === null || colors === void 0 ? void 0 : colors.shadow, className), children: labelFor(k, os) }), i < keys.length - 1 && (_jsx("span", { className: sepVariants({ size }), "aria-hidden": "true", children: separator }))] }, i))) }));
}
// TECLA ÚNICA
return (_jsx("kbd", { className: cx(kbdBase({ variant, size, density, pill, muted }), colors === null || colors === void 0 ? void 0 : colors.bg, colors === null || colors === void 0 ? void 0 : colors.text, colors === null || colors === void 0 ? void 0 : colors.border, colors === null || colors === void 0 ? void 0 : colors.shadow, className), children: labelFor(children, os) }));
}