8-bit Button Group

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  ButtonGroup as ShadcnButtonGroup,
7  ButtonGroupText as ShadcnButtonGroupText,
8  buttonGroupVariants,
9} from "@/components/ui/button-group";
10 
11import "@/components/ui/8bit/styles/retro.css";
12 
13export { buttonGroupVariants };
14 
15// ─── ButtonGroup ──────────────────────────────────────────────────────────────
16 
17export type BitButtonGroupProps = React.ComponentProps<
18  typeof ShadcnButtonGroup
19>;
20 
21/**
22 * 8-bit ButtonGroup wraps the shadcn ButtonGroup and adds a shared retro
23 * pixelated border around the whole group.
24 *
25 * API matches shadcn: `orientation`, `data-slot="button-group"`.
26 * No React context — child button sizing and layout is handled via CSS
27 * child selectors in `buttonGroupVariants`, identical to shadcn.
28 */
29function ButtonGroup({
30  className,
31  orientation = "horizontal",
32  children,
33  ...props
34}: BitButtonGroupProps) {
35  return (
36    <div
37      className={cn(
38        "relative inline-flex",
39        orientation === "vertical" ? "flex-col" : "flex-row"
40      )}
41    >
42      {/* Shared outer pixelated border */}
43      {/* Top */}
44      <div className="absolute -top-1.5 left-1.5 right-1.5 h-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
45      {/* Bottom */}
46      <div className="absolute -bottom-1.5 left-1.5 right-1.5 h-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
47      {/* Left */}
48      <div className="absolute -left-1.5 top-1.5 bottom-1.5 w-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
49      {/* Right */}
50      <div className="absolute -right-1.5 top-1.5 bottom-1.5 w-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
51      {/* Corners */}
52      <div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
53      <div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
54      <div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
55      <div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring pointer-events-none z-10" />
56 
57      <ShadcnButtonGroup
58        className={cn(
59          // The group draws one shared border, so the per-button pixel borders
60          // would double it up on the outer edges and paint across every
61// … truncated