@softize/opus 15.2.2 → 16.0.0

package/src/ui/components/patterns/presentation.tsx

@@ -0,0 +1,316 @@
+import { useState, type ReactElement, type ReactNode } from "react";
+import { Braces, X } from "lucide-react";
+import type {
+  PresentationDiagnostic,
+  PresentationDefinition,
+  PresentationInvocation,
+  PresentationSurface,
+} from "../../../core/presentation.ts";
+import { createPresentationInspectionSnapshot } from "../../../core/presentation.ts";
+import { cn } from "../../lib/cn.ts";
+import { Button, buttonVariants } from "../primitives/button.tsx";
+import { ButtonGroup } from "../primitives/button-group.tsx";
+import { Copyable } from "../primitives/copyable.tsx";
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../primitives/dialog.tsx";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "../primitives/drawer.tsx";
+import {
+  Page,
+  PageActions,
+  PageBody,
+  PageFooter,
+  PageHeader,
+  PageIntro,
+  PageNavigation,
+  PageTitle,
+  useInsidePageShell,
+} from "./page.tsx";
+
+interface PresentationBaseProps {
+  surface: PresentationSurface;
+  title: ReactNode;
+  navigation?: ReactNode;
+  headerActions?: ReactNode;
+  footerActions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  bodyClassName?: string;
+}
+
+export type PresentationProps = PresentationBaseProps &
+  (
+    | { open?: undefined; onOpenChange?: (open: boolean) => void }
+    | { open: boolean; onOpenChange: (open: boolean) => void }
+  );
+
+const bodyClassName =
+  "h-full min-h-full [&>[data-slot=data-state]]:flex [&>[data-slot=data-state]]:min-h-full [&>[data-slot=data-state]]:items-center [&>[data-slot=data-state]]:justify-center";
+
+function PresentationActions({
+  children,
+  equal = false,
+}: {
+  children: ReactNode;
+  equal?: boolean;
+}) {
+  return (
+    <ButtonGroup mode="spaced" distribution={equal ? "equal" : "content"}>
+      {children}
+    </ButtonGroup>
+  );
+}
+
+function CloseAction({
+  surface,
+}: {
+  surface: "dialog" | "drawer";
+}): ReactElement {
+  const button = (
+    <Button size="icon-sm" variant="ghost" aria-label="Fechar">
+      <X aria-hidden />
+    </Button>
+  );
+  return surface === "dialog" ? (
+    <DialogClose asChild>{button}</DialogClose>
+  ) : (
+    <DrawerClose asChild>{button}</DrawerClose>
+  );
+}
+
+/** A mesma Presentation em Page, Dialog ou Drawer; a superfície não redefine o recurso. */
+export function Presentation({
+  surface,
+  title,
+  navigation,
+  headerActions,
+  footerActions,
+  children,
+  open,
+  onOpenChange,
+  className,
+  bodyClassName: bodyClassNameProp,
+}: PresentationProps): ReactElement {
+  const insidePageShell = useInsidePageShell();
+  const [internalOpen, setInternalOpen] = useState(true);
+  const modalOpen = open ?? internalOpen;
+  function handleOpenChange(nextOpen: boolean): void {
+    if (open === undefined) setInternalOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  }
+  const body = (
+    <div
+      data-slot="presentation-body"
+      className={cn(bodyClassName, bodyClassNameProp)}
+    >
+      {children}
+    </div>
+  );
+
+  if (surface === "page") {
+    if (insidePageShell) {
+      return (
+        <Page className={cn("flex min-h-full flex-col", className)}>
+          <PageIntro>
+            {navigation === undefined ? null : (
+              <PageNavigation>{navigation}</PageNavigation>
+            )}
+            <PageTitle>{title}</PageTitle>
+            {headerActions === undefined ? null : (
+              <PageActions>
+                <PresentationActions>{headerActions}</PresentationActions>
+              </PageActions>
+            )}
+          </PageIntro>
+          <PageBody className="min-h-0 flex-1 overflow-y-auto">{body}</PageBody>
+          {footerActions === undefined ? null : (
+            <PageFooter>
+              <PresentationActions>{footerActions}</PresentationActions>
+            </PageFooter>
+          )}
+        </Page>
+      );
+    }
+    return (
+      <Page
+        className={cn(
+          "flex min-h-full max-w-none flex-col space-y-0 px-0 py-0",
+          className,
+        )}
+      >
+        <PageHeader className="border-b px-3 py-4">
+          {navigation === undefined ? null : (
+            <PageNavigation>{navigation}</PageNavigation>
+          )}
+          <PageTitle className="text-lg leading-none">{title}</PageTitle>
+          {headerActions === undefined ? null : (
+            <PageActions>
+              <PresentationActions>{headerActions}</PresentationActions>
+            </PageActions>
+          )}
+        </PageHeader>
+        <PageBody className="min-h-0 flex-1 overflow-y-auto px-8 py-8">
+          {body}
+        </PageBody>
+        {footerActions === undefined ? null : (
+          <PageFooter>
+            <PresentationActions>{footerActions}</PresentationActions>
+          </PageFooter>
+        )}
+      </Page>
+    );
+  }
+
+  if (surface === "dialog") {
+    return (
+      <Dialog open={modalOpen} onOpenChange={handleOpenChange}>
+        <DialogContent
+          className={className}
+          showCloseButton={false}
+          aria-describedby={undefined}
+        >
+          <DialogHeader>
+            <div className="flex items-center justify-between gap-4">
+              {navigation}
+              <DialogTitle className="min-w-0 flex-1 truncate">
+                {title}
+              </DialogTitle>
+              <PresentationActions>
+                {headerActions}
+                <CloseAction surface="dialog" />
+              </PresentationActions>
+            </div>
+          </DialogHeader>
+          <DialogBody className={bodyClassNameProp}>{body}</DialogBody>
+          {footerActions === undefined ? null : (
+            <DialogFooter>
+              <PresentationActions equal>{footerActions}</PresentationActions>
+            </DialogFooter>
+          )}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Drawer open={modalOpen} onOpenChange={handleOpenChange}>
+      <DrawerContent
+        className={className}
+        showCloseButton={false}
+        aria-describedby={undefined}
+      >
+        <DrawerHeader>
+          <div className="flex items-center justify-between gap-4">
+            {navigation}
+            <DrawerTitle className="min-w-0 flex-1 truncate">
+              {title}
+            </DrawerTitle>
+            <PresentationActions>
+              {headerActions}
+              <CloseAction surface="drawer" />
+            </PresentationActions>
+          </div>
+        </DrawerHeader>
+        <DrawerBody className={bodyClassNameProp}>{body}</DrawerBody>
+        {footerActions === undefined ? null : (
+          <DrawerFooter>
+            <PresentationActions equal>{footerActions}</PresentationActions>
+          </DrawerFooter>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+export interface PresentationInspectorProps {
+  definition: PresentationDefinition | unknown;
+  invocation?: PresentationInvocation | unknown;
+  resolved?: unknown;
+  diagnostics?: readonly PresentationDiagnostic[];
+  triggerLabel?: string;
+  title?: string;
+  /** Apresenta o gatilho como FAB; o consumidor continua responsável por posicioná-lo. */
+  floating?: boolean;
+  className?: string;
+}
+
+/** Ferramenta de desenvolvimento para conferir e copiar o artefato consumido pelo renderer. */
+export function PresentationInspector({
+  definition,
+  invocation,
+  resolved,
+  diagnostics,
+  triggerLabel = "Ver JSON da Presentation",
+  title = "JSON da Presentation",
+  floating = false,
+  className,
+}: PresentationInspectorProps): ReactElement {
+  const [open, setOpen] = useState(false);
+  const [json, setJson] = useState<string | null>(null);
+
+  function inspect(): void {
+    const snapshot = createPresentationInspectionSnapshot({
+      definition,
+      invocation,
+      resolved,
+      diagnostics,
+    });
+    setJson(JSON.stringify(snapshot, null, 2) ?? "null");
+    setOpen(true);
+  }
+
+  function handleOpenChange(nextOpen: boolean): void {
+    setOpen(nextOpen);
+    if (!nextOpen) setJson(null);
+  }
+
+  return (
+    <>
+      <Button
+        size={floating ? "icon" : "icon-sm"}
+        variant={floating ? "outline" : "ghost"}
+        data-appearance={floating ? "fab" : "inline"}
+        className={cn(floating && "rounded-full shadow-md", className)}
+        aria-label={triggerLabel}
+        title={triggerLabel}
+        onClick={inspect}
+      >
+        <Braces aria-hidden />
+      </Button>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-3xl" aria-describedby={undefined}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <pre className="max-h-[65vh] overflow-auto rounded-lg bg-muted p-4 text-xs leading-relaxed">
+              {json ?? ""}
+            </pre>
+          </DialogBody>
+          <DialogFooter>
+            <Copyable
+              value={json ?? ""}
+              className={buttonVariants({ variant: "outline" })}
+            >
+              Copiar JSON
+            </Copyable>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/ui/components/patterns/sidebar.tsx

@@ -48,7 +48,7 @@ export function Sidebar({
         className={cn(
           "group/sidebar flex h-full min-h-0 shrink-0 flex-col transition-[width] duration-200 ease-out",
           divider && "border-r border-border",
-          collapsed ? "w-14" : "w-64",
+          collapsed ? "w-16" : "w-64",
           className,
         )}
       >
@@ -182,7 +182,7 @@ export function SidebarItem({
         aria-current={active ? "page" : undefined}
         onClick={onClick}
         className={cn(
-          "mx-auto grid size-9 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40",
+          "mx-auto grid size-10 place-items-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-40",
           "outline-none",
           focusRing,
           active
@@ -423,7 +423,7 @@ export function SidebarNav({
     <nav
       aria-label={navLabel}
       data-slot="sidebar-nav"
-      className={cn("space-y-4 p-2", className)}
+      className={cn("space-y-4 p-3", className)}
     >
       {groups.map((group, gi) =>
         !groupFilled(group) ? null : (

package/src/ui/components/patterns/trigger.tsx

@@ -13,7 +13,7 @@
  */
 
 import type { ReactNode } from 'react'
-import { useState } from 'react'
+import { useId, useState } from 'react'
 import type { SimpleContract } from '../../../core/index.ts'
 import { useTriggerAction } from '../../drivers/react.tsx'
 import { toast } from '../primitives/sonner.tsx'
@@ -23,9 +23,9 @@ import { Button, type ButtonProps } from '../primitives/button.tsx'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
 import {
   Dialog,
+  DialogBody,
   DialogClose,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -59,7 +59,8 @@ export interface ActionTriggerProps<TInput, TData> {
    *  contrato — declarativo). Sem nenhum dos dois, dispara direto. */
   confirm?: {
     title: string
-    description?: string
+    /** Conteúdo relevante apresentado antes das ações. */
+    body?: ReactNode
     actionLabel?: string
     cancelLabel?: string
   }
@@ -88,6 +89,7 @@ export function ActionTrigger<TInput, TData>({
   itemLabel,
   className,
 }: ActionTriggerProps<TInput, TData>) {
+  const confirmBodyId = useId()
   const [open, setOpen] = useState(false)
   const { trigger, isLoading } = useTriggerAction(action, {
     onSuccess: (data) => {
@@ -98,7 +100,9 @@ export function ActionTrigger<TInput, TData>({
     onError: (err) => {
       // A frase de negócio do servidor vence o rótulo do contrato (ver lib/action-errors.ts);
       // fora da allowlist, vale o rótulo — nunca o texto técnico cru.
-      toast.error(humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível concluir.')))
+      toast.error(
+        humanizeActionError(err, msgText(action.messages?.error, 'Não foi possível concluir.')),
+      )
     },
   })
 
@@ -111,9 +115,13 @@ export function ActionTrigger<TInput, TData>({
     (spec !== undefined
       ? {
           title: msgText(spec.title, 'Confirmar?'),
-          ...(spec.message !== undefined ? { description: msgText(spec.message, '') } : {}),
-          ...(spec.confirmLabel !== undefined ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) } : {}),
-          ...(spec.cancelLabel !== undefined ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') } : {}),
+          ...(spec.message !== undefined ? { body: msgText(spec.message, '') } : {}),
+          ...(spec.confirmLabel !== undefined
+            ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) }
+            : {}),
+          ...(spec.cancelLabel !== undefined
+            ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') }
+            : {}),
         }
       : undefined)
   const destructive = spec?.destructive === true
@@ -126,7 +134,8 @@ export function ActionTrigger<TInput, TData>({
    *   botão é sempre `solid` — não herda o `variant` do gatilho, que descreve o item, não a
    *   decisão.
    */
-  const triggerContext = context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
+  const triggerContext =
+    context ?? (destructive ? 'danger' : icon !== undefined ? 'neutral' : 'primary')
   const triggerVariant = variant ?? (icon !== undefined ? 'ghost' : 'solid')
   const confirmContext = destructive ? 'danger' : (context ?? 'primary')
   const confirmVariant = 'solid'
@@ -173,24 +182,36 @@ export function ActionTrigger<TInput, TData>({
       {renderButton(() => setOpen(true))}
 
       <Dialog mode="alert" open={open} onOpenChange={setOpen}>
-        <DialogContent data-action={action.name}>
+        <DialogContent
+          data-action={action.name}
+          aria-describedby={
+            itemLabel !== undefined || confirm.body !== undefined ? confirmBodyId : undefined
+          }
+        >
           <DialogHeader>
             <DialogTitle>{confirm.title}</DialogTitle>
-            {(itemLabel !== undefined || confirm.description !== undefined) && (
-              <DialogDescription>
-                {itemLabel !== undefined && <span className="font-medium text-foreground">“{itemLabel}”</span>}
-                {itemLabel !== undefined && confirm.description !== undefined ? ' — ' : ''}
-                {confirm.description}
-              </DialogDescription>
-            )}
           </DialogHeader>
+          {(itemLabel !== undefined || confirm.body !== undefined) && (
+            <DialogBody id={confirmBodyId} className="text-sm text-muted-foreground">
+              {itemLabel !== undefined && (
+                <span className="font-medium text-foreground">“{itemLabel}”</span>
+              )}
+              {itemLabel !== undefined && confirm.body !== undefined ? ' — ' : ''}
+              {confirm.body}
+            </DialogBody>
+          )}
           <DialogFooter>
             <DialogClose initialFocus asChild>
               <Button context="neutral" variant="ghost" disabled={isLoading}>
                 {confirm.cancelLabel ?? 'Cancelar'}
               </Button>
             </DialogClose>
-            <Button context={confirmContext} variant={confirmVariant} busy={isLoading} onClick={fire}>
+            <Button
+              context={confirmContext}
+              variant={confirmVariant}
+              busy={isLoading}
+              onClick={fire}
+            >
               {confirm.actionLabel ?? buttonLabel}
             </Button>
           </DialogFooter>

package/src/ui/components/primitives/button-group.tsx

@@ -1,71 +1,80 @@
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
-import { Separator } from './separator.tsx'
+import { cn } from "../../lib/cn.ts";
+import { Separator } from "./separator.tsx";
 
 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: '',
-        vertical: 'flex-col',
+        horizontal: "",
+        vertical: "flex-col",
       },
       mode: {
-        connected: '',
-        spaced: 'gap-1',
+        connected: "",
+        spaced: "gap-1",
       },
       shape: {
-        default: '',
-        pill: 'rounded-full',
+        default: "",
+        pill: "rounded-full",
+      },
+      distribution: {
+        content: "",
+        equal:
+          "w-full flex-col-reverse gap-2 sm:flex-row [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
       },
     },
     compoundVariants: [
       {
-        orientation: 'horizontal',
-        mode: 'connected',
+        orientation: "horizontal",
+        mode: "connected",
         className:
-          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
       },
       {
-        orientation: 'vertical',
-        mode: 'connected',
+        orientation: "vertical",
+        mode: "connected",
         className:
-          '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+          "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
       },
       {
-        orientation: 'horizontal',
-        mode: 'connected',
-        shape: 'pill',
-        className: '[&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-l-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-r-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-l-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-r-full',
+        orientation: "horizontal",
+        mode: "connected",
+        shape: "pill",
+        className:
+          "[&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-l-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-r-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-l-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-r-full",
       },
       {
-        orientation: 'vertical',
-        mode: 'connected',
-        shape: 'pill',
-        className: '[&>*:first-child]:rounded-t-full [&>*:last-child]:rounded-b-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-t-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-b-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-t-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-b-full',
+        orientation: "vertical",
+        mode: "connected",
+        shape: "pill",
+        className:
+          "[&>*:first-child]:rounded-t-full [&>*:last-child]:rounded-b-full [&>[data-slot=select]:first-child_[data-slot=select-control]]:rounded-t-full [&>[data-slot=select]:last-child_[data-slot=select-control]]:rounded-b-full [&>[data-slot=select-wrapper]:first-child_[data-slot=select]]:rounded-t-full [&>[data-slot=select-wrapper]:last-child_[data-slot=select]]:rounded-b-full",
       },
       {
-        mode: 'spaced',
-        shape: 'pill',
+        mode: "spaced",
+        shape: "pill",
         className:
-          '[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full',
+          "[&>*]:rounded-full [&>[data-slot=select]_[data-slot=select-control]]:rounded-full [&>[data-slot=select-wrapper]_[data-slot=select]]:rounded-full",
       },
     ],
     defaultVariants: {
       orientation: "horizontal",
-      mode: 'connected',
+      mode: "connected",
       shape: "default",
+      distribution: "content",
     },
-  }
-)
+  },
+);
 
 function ButtonGroup({
   className,
   orientation,
   mode,
   shape,
+  distribution,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
   return (
@@ -75,17 +84,18 @@ function ButtonGroup({
       data-orientation={orientation}
       data-mode={mode}
       data-shape={shape}
+      data-distribution={distribution}
       className={cn(
-        buttonGroupVariants({ orientation, mode, shape }),
-        mode !== 'spaced' &&
-          (orientation === 'vertical'
-            ? '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none'
-            : '[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none'),
+        buttonGroupVariants({ orientation, mode, shape, distribution }),
+        mode !== "spaced" &&
+          (orientation === "vertical"
+            ? "[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-t-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-t-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-b-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-t-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-t-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-b-none"
+            : "[&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:rounded-l-none [&>[data-slot=select]:not(:first-child)_[data-slot=select-control]]:border-l-0 [&>[data-slot=select]:not(:last-child)_[data-slot=select-control]]:rounded-r-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:rounded-l-none [&>[data-slot=select-wrapper]:not(:first-child)_[data-slot=select]]:border-l-0 [&>[data-slot=select-wrapper]:not(:last-child)_[data-slot=select]]:rounded-r-none"),
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupText({
@@ -93,19 +103,19 @@ function ButtonGroupText({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  asChild?: boolean
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot.Root : "div"
+  const Comp = asChild ? Slot.Root : "div";
 
   return (
     <Comp
       className={cn(
         "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupSeparator({
@@ -119,11 +129,11 @@ function ButtonGroupSeparator({
       orientation={orientation}
       className={cn(
         "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -131,4 +141,4 @@ export {
   ButtonGroupSeparator,
   ButtonGroupText,
   buttonGroupVariants,
-}
+};