tembro 2.0.4 → 2.0.6

package/packages/cli/vendor/src/components/overlay/alert-dialog.tsx

@@ -1,10 +1,11 @@
-import * as React from "react"
-import { AlertTriangleIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogClose,
+import * as React from "react"
+import { AlertTriangleIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -19,27 +20,104 @@ export type AlertDialogProps = Omit<React.ComponentProps<typeof Dialog>, "childr
   cancelLabel?: React.ReactNode
   actionLabel?: React.ReactNode
   actionTone?: "default" | "destructive"
+  cancelVariant?: React.ComponentProps<typeof Button>["variant"]
   loading?: boolean
+  closeOnAction?: boolean
+  confirmValue?: string
+  confirmLabel?: React.ReactNode
+  confirmPlaceholder?: string
+  confirmDescription?: React.ReactNode
+  confirmCaseSensitive?: boolean
+  severityNote?: React.ReactNode
+  errorMessage?: React.ReactNode
+  onActionError?: (error: unknown) => void
   onAction?: () => void | Promise<void>
   children?: React.ReactNode
+  preventCloseWhileLoading?: boolean
+  actionButtonProps?: Omit<React.ComponentProps<typeof Button>, "type" | "variant" | "loading" | "disabled" | "onClick" | "children">
+  cancelButtonProps?: Omit<React.ComponentProps<typeof Button>, "type" | "variant" | "disabled" | "children">
 }
 
 function AlertDialog({
   title = "Are you sure?",
   description,
   icon = <AlertTriangleIcon />,
-  cancelLabel = "Cancel",
-  actionLabel = "Continue",
-  actionTone = "destructive",
-  loading = false,
-  onAction,
-  children,
-  ...props
-}: AlertDialogProps) {
-  return (
-    <Dialog {...props}>
-      {children}
-      <DialogContent>
+  cancelLabel = "Cancel",
+  actionLabel = "Continue",
+  actionTone = "destructive",
+  cancelVariant = "outline",
+  loading = false,
+  closeOnAction = true,
+  confirmValue,
+  confirmLabel = "Type to confirm",
+  confirmPlaceholder,
+  confirmDescription,
+  confirmCaseSensitive = true,
+  severityNote,
+  errorMessage = "Action could not be completed. Try again.",
+  onActionError,
+  onAction,
+  children,
+  preventCloseWhileLoading = true,
+  actionButtonProps,
+  cancelButtonProps,
+  onOpenChange,
+  ...props
+}: AlertDialogProps) {
+  const [pending, setPending] = React.useState(false)
+  const [confirmationInput, setConfirmationInput] = React.useState("")
+  const [actionError, setActionError] = React.useState<React.ReactNode | null>(null)
+  const resolvedLoading = loading || pending
+  const requiresTypedConfirmation = Boolean(confirmValue?.trim())
+  const expectedConfirmation = confirmCaseSensitive ? confirmValue?.trim() : confirmValue?.trim().toLowerCase()
+  const actualConfirmation = confirmCaseSensitive ? confirmationInput.trim() : confirmationInput.trim().toLowerCase()
+  const canConfirm = !requiresTypedConfirmation || actualConfirmation === expectedConfirmation
+
+  React.useEffect(() => {
+    if (!props.open) {
+      setConfirmationInput("")
+      setActionError(null)
+    }
+  }, [props.open])
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean, eventDetails: unknown) => {
+      if (!nextOpen && preventCloseWhileLoading && resolvedLoading) {
+        return
+      }
+      onOpenChange?.(nextOpen, eventDetails as never)
+    },
+    [onOpenChange, preventCloseWhileLoading, resolvedLoading]
+  )
+
+  const closeDialog = () => {
+    handleOpenChange(false, undefined)
+  }
+
+  const handleAction = async () => {
+    if (!canConfirm || resolvedLoading) return
+    setActionError(null)
+    if (!onAction) {
+      if (closeOnAction) closeDialog()
+      return
+    }
+
+    try {
+      setPending(true)
+      await onAction()
+      if (closeOnAction) closeDialog()
+    } catch (error) {
+      setActionError(errorMessage)
+      onActionError?.(error)
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return (
+    <Dialog onOpenChange={handleOpenChange} {...props}>
+      {children}
+      <DialogContent>
         <DialogHeader>
           <div className="mb-3 inline-flex size-11 items-center justify-center rounded-2xl border border-destructive/20 bg-destructive/10 text-destructive [&_svg]:size-5">
             {icon}
@@ -47,19 +125,65 @@ function AlertDialog({
           <DialogTitle>{title}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>
+        {requiresTypedConfirmation ? (
+          <div className="grid gap-2.5">
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-foreground">{confirmLabel}</p>
+              <p className="text-xs leading-5 text-muted-foreground">
+                {confirmDescription ?? (
+                  <>
+                    Type <span className="font-semibold text-foreground">{confirmValue}</span> to continue.
+                  </>
+                )}
+              </p>
+            </div>
+            <Input
+              value={confirmationInput}
+              onValueChange={setConfirmationInput}
+              placeholder={confirmPlaceholder ?? confirmValue}
+              autoComplete="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              aria-invalid={actionError ? true : undefined}
+              aria-describedby={actionError ? "alert-dialog-error" : undefined}
+            />
+          </div>
+        ) : null}
+        {severityNote ? (
+          <div className="rounded-2xl border border-border/70 bg-muted/35 px-3.5 py-3 text-sm leading-6 text-muted-foreground">
+            {severityNote}
+          </div>
+        ) : null}
+        {actionError ? (
+          <div
+            id="alert-dialog-error"
+            role="alert"
+            aria-live="polite"
+            className="rounded-2xl border border-destructive/20 bg-destructive/8 px-3.5 py-3 text-sm leading-6 text-destructive"
+          >
+            {actionError}
+          </div>
+        ) : null}
         <DialogFooter>
           <DialogClose render={() => (
-            <Button type="button" variant="outline" disabled={loading}>
+            <Button type="button" variant={cancelVariant} disabled={resolvedLoading} {...cancelButtonProps}>
               {cancelLabel}
             </Button>
           )} />
-          <Button type="button" variant={actionTone === "destructive" ? "destructive" : "default"} loading={loading} onClick={() => void onAction?.()}>
+          <Button
+            type="button"
+            variant={actionTone === "destructive" ? "destructive" : "default"}
+            loading={resolvedLoading}
+            disabled={!canConfirm && !resolvedLoading}
+            onClick={() => void handleAction()}
+            {...actionButtonProps}
+          >
             {actionLabel}
           </Button>
         </DialogFooter>
       </DialogContent>
-    </Dialog>
-  )
-}
+    </Dialog>
+  )
+}
 
 export { AlertDialog }

package/packages/cli/vendor/src/components/overlay/drawer.tsx

@@ -3,8 +3,8 @@ import * as React from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
-  DialogClose,
-  DialogContent,
+  DialogClose,
+  DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
@@ -20,51 +20,63 @@ export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children">
   description?: React.ReactNode
   side?: DrawerSide
   footer?: React.ReactNode
+  headerClassName?: string
+  bodyClassName?: string
+  footerClassName?: string
   contentClassName?: string
   showCloseButton?: boolean
   children?: React.ReactNode
 }
 
-const sideClassName: Record<DrawerSide, string> = {
-  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] sm:max-w-lg",
-  left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] sm:max-w-lg",
-  top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)]",
-  bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)]",
-}
+const sideClassName: Record<DrawerSide, string> = {
+  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-lg",
+  left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-lg",
+  top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
+  bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
+}
 
 function Drawer({
   trigger,
   title,
-  description,
-  side = "right",
-  footer,
-  contentClassName,
-  showCloseButton = true,
-  children,
+  description,
+  side = "right",
+  footer,
+  headerClassName,
+  bodyClassName,
+  footerClassName,
+  contentClassName,
+  showCloseButton = true,
+  children,
   ...props
 }: DrawerProps) {
   return (
     <Dialog {...props}>
       {trigger ? <DialogTrigger render={trigger as React.ReactElement} /> : null}
-      <DialogContent showCloseButton={showCloseButton} className={cn("fixed p-0", sideClassName[side], contentClassName)}>
-        {(title || description) && (
-          <DialogHeader className="border-b border-border/70 p-6">
-            {title ? <DialogTitle>{title}</DialogTitle> : null}
-            {description ? <DialogDescription>{description}</DialogDescription> : null}
-          </DialogHeader>
-        )}
-        <div data-slot="drawer-body" className="min-h-0 flex-1 overflow-y-auto p-6">
-          {children}
-        </div>
-        {footer ? <div data-slot="drawer-footer" className="border-t border-border/70 p-5">{footer}</div> : null}
-      </DialogContent>
-    </Dialog>
-  )
-}
+      <DialogContent
+        size="full"
+        showCloseButton={showCloseButton}
+        className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 p-0", sideClassName[side], contentClassName)}
+      >
+        {(title || description) && (
+          <DialogHeader className={cn("border-b border-border/70 p-6", headerClassName)}>
+            {title ? <DialogTitle>{title}</DialogTitle> : null}
+            {description ? <DialogDescription>{description}</DialogDescription> : null}
+          </DialogHeader>
+        )}
+        <div data-slot="drawer-body" className={cn("min-h-0 flex-1 overflow-y-auto p-6", bodyClassName)}>
+          {children}
+        </div>
+        {footer ? <div data-slot="drawer-footer" className={cn("border-t border-border/70 p-5", footerClassName)}>{footer}</div> : null}
+      </DialogContent>
+    </Dialog>
+  )
+}
 
 function DrawerCloseButton({ children = "Close", ...props }: React.ComponentProps<typeof Button>) {
   return (
-    <DialogClose render={() => <Button type="button" variant="outline" {...props}>{children}</Button>} />
+    <DialogClose render={<Button type="button" variant="outline" {...props} />}>
+      {children}
+    </DialogClose>
   )
 }
 

package/packages/cli/vendor/src/components/patterns/index.ts

@@ -1,3 +1,2 @@
 export * from './resource-page'
 export * from './resource-detail-page'
-export * from './form-builder'

package/packages/cli/vendor/src/components/patterns/public.ts

@@ -1,3 +1,2 @@
 export * from "./resource-page"
 export * from "./resource-detail-page"
-export * from "./form-builder"

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -40,26 +40,30 @@ const buttonVariants = cva(
   }
 )
 
-export type ButtonProps = ButtonPrimitive.Props &
-  VariantProps<typeof buttonVariants> & {
-    loading?: boolean
-    loadingLabel?: string
-    leftIcon?: React.ReactNode
-    rightIcon?: React.ReactNode
-  }
+export type ButtonProps = ButtonPrimitive.Props &
+  VariantProps<typeof buttonVariants> & {
+    loading?: boolean
+    loadingLabel?: string
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+    fullWidth?: boolean
+    pressed?: boolean
+  }
 
 function Button({
   className,
   variant = "default",
   size = "default",
   disabled,
-  loading = false,
-  loadingLabel = "Loading",
-  leftIcon,
-  rightIcon,
-  children,
-  ...props
-}: ButtonProps) {
+  loading = false,
+  loadingLabel = "Loading",
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  pressed = false,
+  children,
+  ...props
+}: ButtonProps) {
   const isDisabled = disabled || loading
 
   return (
@@ -68,11 +72,17 @@ function Button({
       data-variant={variant ?? "default"}
       data-size={size ?? "default"}
       data-loading={loading || undefined}
+      data-pressed={pressed || undefined}
       disabled={isDisabled}
       aria-busy={loading || undefined}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    >
+      aria-pressed={pressed || undefined}
+      className={cn(
+        buttonVariants({ variant, size, className }),
+        fullWidth && "w-full",
+        pressed && "shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring))]"
+      )}
+      {...props}
+    >
       {loading ? (
         <span
           data-slot="button-spinner"

package/packages/cli/vendor/src/components/ui/card/index.tsx

@@ -65,14 +65,28 @@ type CardSurfaceSlots = {
   media?: React.ReactNode
   content?: React.ReactNode
   footer?: React.ReactNode
+  mediaClassName?: string
+  bodyClassName?: string
   headerClassName?: string
+  eyebrowClassName?: string
   titleClassName?: string
   descriptionClassName?: string
   contentClassName?: string
   footerClassName?: string
 }
 
-export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> & VariantProps<typeof cardVariants> & CardSurfaceSlots
+export type CardOrientation = "vertical" | "horizontal"
+export type CardMediaAspect = "auto" | "square" | "video" | "poster" | "wide"
+export type CardPadding = "none" | "sm" | "default" | "lg"
+
+export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> &
+  VariantProps<typeof cardVariants> &
+  CardSurfaceSlots & {
+    orientation?: CardOrientation
+    mediaPosition?: "start" | "end"
+    mediaAspect?: CardMediaAspect
+    padding?: CardPadding
+  }
 
 function hasSurfaceContent(props: CardSurfaceSlots) {
   return (
@@ -96,6 +110,10 @@ function Card({
   interactive,
   selected,
   disabled,
+  orientation = "vertical",
+  mediaPosition = "start",
+  mediaAspect = "auto",
+  padding = "default",
   tabIndex,
   eyebrow,
   title,
@@ -105,7 +123,10 @@ function Card({
   media,
   content,
   footer,
+  mediaClassName,
+  bodyClassName,
   headerClassName,
+  eyebrowClassName,
   titleClassName,
   descriptionClassName,
   contentClassName,
@@ -126,6 +147,36 @@ function Card({
   const resolvedContent = content ?? children
   const hasHeader = eyebrow != null || title != null || description != null || badge != null || action != null
   const hasFooter = footer != null
+  const mediaNode = media ? (
+    <div
+      data-slot="card-media"
+      data-media-position={mediaPosition}
+      data-media-aspect={mediaAspect}
+      className={cn(
+        "overflow-hidden",
+        orientation === "horizontal" ? "shrink-0 self-stretch" : "",
+        mediaAspect === "square" && (orientation === "horizontal" ? "w-40" : "aspect-square"),
+        mediaAspect === "video" && (orientation === "horizontal" ? "w-56" : "aspect-video"),
+        mediaAspect === "poster" && (orientation === "horizontal" ? "w-36" : "aspect-[3/4]"),
+        mediaAspect === "wide" && (orientation === "horizontal" ? "w-72" : "aspect-[16/7]"),
+        mediaClassName
+      )}
+    >
+      {media}
+    </div>
+  ) : null
+  const surfacePaddingClassName = {
+    none: "",
+    sm: "px-4",
+    default: "px-(--card-spacing)",
+    lg: "px-6",
+  } satisfies Record<CardPadding, string>
+  const bodyPaddingClassName = {
+    none: "",
+    sm: "pb-4",
+    default: "",
+    lg: "pb-6",
+  } satisfies Record<CardPadding, string>
 
   return (
     <div
@@ -139,37 +190,56 @@ function Card({
       data-selected={selected || undefined}
       data-disabled={disabled || undefined}
       data-has-footer={hasFooter || undefined}
+      data-orientation={orientation}
+      data-padding={padding}
       aria-disabled={disabled || undefined}
       tabIndex={interactive && !disabled ? tabIndex ?? 0 : tabIndex}
-      className={cn(cardVariants({ variant, size, density, tone, interactive, selected, disabled }), className)}
+      className={cn(
+        cardVariants({ variant, size, density, tone, interactive, selected, disabled }),
+        orientation === "horizontal" && "flex-row py-0",
+        interactive && "hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        selected && "border-[color:var(--aui-control-border-strong,var(--ring))] shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        className
+      )}
       {...props}
     >
       {surfaceMode ? (
         <>
-          {media}
-          {hasHeader ? (
-            <CardHeader className={headerClassName}>
-              <div className="min-w-0 space-y-1">
-                {eyebrow != null ? (
-                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80">
-                    {eyebrow}
-                  </div>
-                ) : null}
-                {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
-                {description != null ? (
-                  <CardDescription className={descriptionClassName}>{description}</CardDescription>
+          {mediaPosition === "start" ? mediaNode : null}
+          <div
+            data-slot="card-body"
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              orientation === "horizontal" ? "py-(--card-spacing)" : "",
+              bodyPaddingClassName[padding],
+              bodyClassName
+            )}
+          >
+            {hasHeader ? (
+              <CardHeader className={cn(surfacePaddingClassName[padding], headerClassName)}>
+                <div className="min-w-0 space-y-1">
+                  {eyebrow != null ? (
+                    <div className={cn("text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80", eyebrowClassName)}>
+                      {eyebrow}
+                    </div>
+                  ) : null}
+                  {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
+                  {description != null ? (
+                    <CardDescription className={descriptionClassName}>{description}</CardDescription>
+                  ) : null}
+                </div>
+                {badge != null || action != null ? (
+                  <CardAction className="flex items-center gap-2">
+                    {badge}
+                    {action}
+                  </CardAction>
                 ) : null}
-              </div>
-              {badge != null || action != null ? (
-                <CardAction className="flex items-center gap-2">
-                  {badge}
-                  {action}
-                </CardAction>
-              ) : null}
-            </CardHeader>
-          ) : null}
-          {resolvedContent != null ? <CardContent className={contentClassName}>{resolvedContent}</CardContent> : null}
-          {hasFooter ? <CardFooter className={footerClassName}>{footer}</CardFooter> : null}
+              </CardHeader>
+            ) : null}
+            {resolvedContent != null ? <CardContent className={cn(surfacePaddingClassName[padding], contentClassName)}>{resolvedContent}</CardContent> : null}
+            {hasFooter ? <CardFooter className={cn(surfacePaddingClassName[padding], footerClassName)}>{footer}</CardFooter> : null}
+          </div>
+          {mediaPosition === "end" ? mediaNode : null}
         </>
       ) : (
         children

package/packages/cli/vendor/src/components/ui/checkbox/index.tsx

@@ -12,10 +12,20 @@ export type CheckboxProps = Omit<
   checked?: CheckboxCheckedState
   defaultChecked?: CheckboxCheckedState
   onCheckedChange?: (checked: boolean) => void
+  onCheckedStateChange?: (checked: CheckboxCheckedState) => void
+  size?: "sm" | "md" | "lg"
+  invalid?: boolean
+  allowIndeterminate?: boolean
 }
 
-function getNextCheckedState(checked: CheckboxCheckedState) {
-  return checked === true ? false : true
+function getNextCheckedState(checked: CheckboxCheckedState, allowIndeterminate: boolean) {
+  if (!allowIndeterminate) {
+    return checked === true ? false : true
+  }
+
+  if (checked === false) return "indeterminate"
+  if (checked === "indeterminate") return true
+  return false
 }
 
 const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
@@ -25,6 +35,10 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       checked,
       defaultChecked = false,
       onCheckedChange,
+      onCheckedStateChange,
+      size = "md",
+      invalid = false,
+      allowIndeterminate = false,
       disabled,
       onClick,
       children,
@@ -38,13 +52,14 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
     const dataState = currentChecked === "indeterminate" ? "indeterminate" : currentChecked ? "checked" : "unchecked"
 
     const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-      const nextChecked = getNextCheckedState(currentChecked)
+      const nextChecked = getNextCheckedState(currentChecked, allowIndeterminate)
 
       if (!isControlled) {
         setInternalChecked(nextChecked)
       }
 
-      onCheckedChange?.(nextChecked)
+      onCheckedStateChange?.(nextChecked)
+      onCheckedChange?.(nextChecked === true)
       onClick?.(event)
     }
 
@@ -55,10 +70,12 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
         role="checkbox"
         aria-checked={currentChecked === "indeterminate" ? "mixed" : currentChecked}
         data-state={dataState}
+        data-size={size}
         data-slot="checkbox"
         disabled={disabled}
+        aria-invalid={invalid || undefined}
         className={cn(
-          "peer flex size-5 shrink-0 items-center justify-center rounded-[10px] border border-input/88 bg-background text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary/28 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] data-[state=indeterminate]:border-primary/28 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/12 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]",
+          "peer flex shrink-0 items-center justify-center rounded-[10px] border border-input/88 bg-background text-primary-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.10)] outline-none transition-[background-color,border-color,box-shadow,color,transform] hover:border-ring/30 hover:bg-background focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/25 data-[size=sm]:size-4 data-[size=md]:size-5 data-[size=lg]:size-6 data-[state=checked]:border-primary/28 data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] data-[state=indeterminate]:border-primary/28 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-[0_10px_24px_color-mix(in_oklch,var(--primary),transparent_82%)] dark:border-white/12 dark:bg-white/[0.04] dark:hover:bg-white/[0.08]",
           className
         )}
         onClick={handleClick}