Files
community-rule/docs/assets/MenuBarItem-Dp8NM2fx.js
T
2025-08-30 13:46:35 -06:00

124 lines
7.1 KiB
JavaScript

import { j as p } from "./jsx-runtime-C_nHp4yK.js";
function U({
href: v = "#",
children: o,
variant: d = "default",
size: e = "default",
className: f = "",
disabled: a = !1,
ariaLabel: l,
...m
}) {
const x = {
default:
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
},
g = {
xsmall:
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
default:
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] focus:outline-1 focus:outline-[var(--color-content-default-brand-primary)]",
homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
largeUseCases:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
homeXlarge:
"active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-brand-primary)]",
xlarge:
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)] focus:outline-2 focus:outline-[var(--color-content-default-brand-primary)]",
},
y = {
xsmall:
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
default:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
largeUseCases:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
homeXlarge:
"active:outline-[2px] active:outline-[var(--color-content-default-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-primary)]",
xlarge:
"active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]",
},
b = {
default:
"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
xsmall:
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
xsmallUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
homeMd:
"px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
homeUseCases:
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
largeUseCases:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
homeXlarge:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
xlarge:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)] h-[44px]",
},
t = "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
n = "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
c = "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
i = "font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
h = {
default: t,
xsmall: t,
xsmallUseCases: t,
home: t,
homeMd: n,
homeUseCases: n,
large: c,
largeUseCases: c,
homeXlarge: i,
xlarge: i,
},
C = `inline-flex items-center ${b[e]} rounded-[var(--radius-measures-radius-full)] ${h[e]} transition-all duration-200 ease-in-out cursor-pointer focus:scale-[1.02]`;
let r = d;
a && (r = "default");
const s = `${C} ${x[r]} ${r === "home" ? y[e] : g[e]} ${f}`,
u = {
...(l && { "aria-label": l }),
...(a && { "aria-disabled": "true" }),
role: "menuitem",
tabIndex: a ? -1 : 0,
...m,
};
return a
? p.jsx("span", { className: s, ...u, children: o })
: p.jsx("a", { href: v, className: s, ...u, children: o });
}
U.__docgenInfo = {
description: "",
methods: [],
displayName: "MenuBarItem",
props: {
href: { defaultValue: { value: '"#"', computed: !1 }, required: !1 },
variant: {
defaultValue: { value: '"default"', computed: !1 },
required: !1,
},
size: { defaultValue: { value: '"default"', computed: !1 }, required: !1 },
className: { defaultValue: { value: '""', computed: !1 }, required: !1 },
disabled: { defaultValue: { value: "false", computed: !1 }, required: !1 },
},
};
export { U as M };