dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
75 lines (74 loc) • 3.21 kB
JavaScript
import { j as n } from "./jsx-runtime-DS1N_tNq.js";
import "react";
import { c as a } from "./index-BhbquNdX.js";
import { c as i } from "./utils-B6fNqzRf.js";
const d = a(
"inline-flex flex-nowrap whitespace-nowrap justify-center items-center border px-2.5 text-body-2xs-medium dark:border [&>svg]:size-3.5 gap-1",
{
variants: {
type: {
default: "!text-white before:hidden ",
status: "!text-primary !border-border-alpha-subtle !bg-transparent before:hidden ",
indicator: '!text-white before:content-[""] before:inline-block before:size-2 before:rounded-xs',
icon: "!text-white [&>svg]:!text-white p-0.5 before:hidden "
},
variant: {
default: "bg-neutral-950 dark:bg-neutral-0 before:bg-white",
gray: "bg-gray-500 [&>svg]:text-gray-700 before:bg-gray-700",
blue: "bg-blue-500 [&>svg]:text-blue-700 before:bg-blue-700",
cyan: "bg-cyan-500 [&>svg]:text-cyan-700 before:bg-cyan-700",
green: "bg-green-500 [&>svg]:text-green-700 before:bg-green-700",
lime: "bg-lime-500 [&>svg]:text-lime-700 before:bg-lime-700",
orange: "bg-orange-500 [&>svg]:text-orange-700 before:bg-orange-700",
red: "bg-red-500 [&>svg]:text-red-700 before:bg-red-700",
purple: "bg-purple-500 [&>svg]:text-purple-700 before:bg-purple-700",
indigo: "bg-indigo-500 [&>svg]:text-indigo-700 before:bg-indigo-700",
"default-outlined": "!bg-item-primary-secondary !text-primary border-border-alpha-subtle [&>svg]:!text-primary before:bg-primary",
"gray-outlined": "!bg-neutral-alpha-5 !text-secondary [&>svg]:!text-gray-700 before:bg-gray-700",
"blue-outlined": "!bg-blue-100 !text-blue-700 border-blue-200 [&>svg]:!text-blue-700 before:bg-blue-700",
"cyan-outlined": "!bg-cyan-100 !text-cyan-700 border-cyan-200 [&>svg]:!text-cyan-700 before:bg-cyan-700",
"green-outlined": "!bg-green-100 !text-green-700 border-green-200 [&>svg]:!text-green-700 before:bg-green-700",
"lime-outlined": "!bg-lime-100 !text-lime-700 border-lime-200 [&>svg]:!text-lime-700 before:bg-lime-700",
"orange-outlined": "!bg-orange-100 !text-orange-700 border-orange-200 [&>svg]:!text-orange-700 before:bg-orange-700",
"red-outlined": "!bg-red-100 !text-red-700 border-red-200 [&>svg]:!text-red-700 before:bg-red-700",
"purple-outlined": "!bg-purple-100 !text-purple-700 border-purple-200 [&>svg]:!text-purple-700 before:bg-purple-700",
"indigo-outlined": "!bg-indigo-100 !text-indigo-700 border-indigo-200 [&>svg]:!text-indigo-700 before:bg-indigo-700"
},
size: {
sm: "h-5 min-w-5",
lg: "h-6 min-w-6"
},
rounded: {
default: "rounded-md",
full: "rounded-full"
}
},
defaultVariants: {
variant: "default",
rounded: "default",
size: "sm",
type: "default"
}
}
);
function l({
className: e,
variant: r,
rounded: t,
type: g,
size: b,
...o
}) {
return /* @__PURE__ */ n.jsx(
"div",
{
className: i(d({ type: g, variant: r, rounded: t, size: b }), e),
...o
}
);
}
l.displayName = "Badge";
export {
l as B,
d as b
};