@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
47 lines (46 loc) • 2.23 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import "react";
import { Separator } from "./separator.js";
import { cn } from "../../lib/utilities.js";
const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
variants: {
orientation: {
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
}
},
defaultVariants: {
orientation: "horizontal"
}
});
function ButtonGroup({ className, orientation, ...props }) {
return /*#__PURE__*/ jsx("div", {
role: "group",
"data-slot": "button-group",
"data-orientation": orientation,
className: cn(buttonGroupVariants({
orientation
}), className),
...props
});
}
function ButtonGroupText({ className, asChild = false, ...props }) {
const Comp = asChild ? Slot : "div";
return /*#__PURE__*/ jsx(Comp, {
className: cn("flex items-center gap-2 rounded-md border border-neutral-200 bg-neutral-100 px-4 text-sm font-medium shadow-xs dark:border-neutral-800 dark:bg-neutral-800 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
...props
});
}
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
return /*#__PURE__*/ jsx(Separator, {
"data-slot": "button-group-separator",
orientation: orientation,
className: cn("relative !m-0 self-stretch bg-neutral-200 data-[orientation=vertical]:h-auto dark:bg-neutral-800", className),
...props
});
}
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
//# sourceMappingURL=button-group.js.map