tembro 2.0.3 → 2.0.5

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/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}

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

@@ -7,9 +7,21 @@ export type CollapseProps = React.ComponentProps<"details"> & {
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  variant?: "default" | "soft" | "ghost"
+  size?: "sm" | "md" | "lg"
 }
 
-function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, children, ...props }: CollapseProps) {
+function Collapse({
+  open,
+  defaultOpen,
+  onOpenChange,
+  onToggle,
+  className,
+  children,
+  variant = "default",
+  size = "md",
+  ...props
+}: CollapseProps) {
   const isControlled = open !== undefined
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
   const currentOpen = isControlled ? open : internalOpen
@@ -17,8 +29,10 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
   return (
     <details
       data-slot="collapse"
+      data-variant={variant}
+      data-size={size}
       className={cn(
-        "group rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))] transition-[background-color,border-color,box-shadow] open:border-[color:var(--aui-control-hover-border,var(--ring))]",
+        "group overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card text-card-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))] transition-[background-color,border-color,box-shadow] hover:border-[color:var(--aui-control-hover-border,var(--ring))] open:border-[color:var(--aui-control-hover-border,var(--ring))] data-[variant=soft]:bg-[color:color-mix(in_oklch,var(--muted),transparent_58%)] data-[variant=soft]:shadow-none data-[variant=ghost]:border-transparent data-[variant=ghost]:bg-transparent data-[variant=ghost]:shadow-none",
         className
       )}
       onToggle={(event) => {
@@ -26,6 +40,8 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
         const nextOpen = event.currentTarget.open
         if (!isControlled) {
           setInternalOpen(nextOpen)
+        } else if (nextOpen !== currentOpen) {
+          event.currentTarget.open = currentOpen
         }
         onOpenChange?.(nextOpen)
       }}
@@ -40,24 +56,51 @@ function Collapse({ open, defaultOpen, onOpenChange, onToggle, className, childr
 export type CollapseTriggerProps = React.ComponentProps<"summary"> & {
   icon?: React.ReactNode
   hideIcon?: boolean
+  size?: "sm" | "md" | "lg"
+  inset?: boolean
+  indicatorPosition?: "start" | "end"
 }
 
-function CollapseTrigger({ icon, hideIcon = false, className, children, ...props }: CollapseTriggerProps) {
+function CollapseTrigger({
+  icon,
+  hideIcon = false,
+  size = "md",
+  inset = false,
+  indicatorPosition = "end",
+  className,
+  children,
+  onClick,
+  ...props
+}: CollapseTriggerProps) {
+  const indicator = !hideIcon ? (
+    <span className="shrink-0 rounded-md text-muted-foreground transition-[color,transform] group-open:rotate-180 group-open:text-foreground">
+      {icon ?? <ChevronDownIcon className="size-4" />}
+    </span>
+  ) : null
+
   return (
     <summary
       data-slot="collapse-trigger"
+      data-size={size}
+      data-inset={inset || undefined}
+      data-indicator-position={indicatorPosition}
       className={cn(
-        "flex cursor-pointer list-none items-center justify-between gap-3 rounded-[calc(var(--aui-card-radius,var(--radius-xl))-1px)] px-4 py-3 text-sm font-semibold outline-none transition-[background-color,color,box-shadow] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] group-open:text-foreground [&::-webkit-details-marker]:hidden",
+        "rounded-[calc(var(--aui-card-radius,var(--radius-xl))-1px)] group-open:rounded-b-none flex cursor-pointer list-none items-start gap-3 px-4 text-sm font-semibold outline-none transition-[background-color,color,box-shadow,border-radius] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] group-open:text-foreground data-[indicator-position=end]:justify-between data-[indicator-position=start]:justify-start data-[size=sm]:py-2.5 data-[size=md]:py-3.5 data-[size=lg]:py-4.5 data-[inset=true]:px-5 [&::-webkit-details-marker]:hidden",
+        props["aria-disabled"] && "cursor-not-allowed opacity-75 hover:bg-transparent",
         className
       )}
+      onClick={(event) => {
+        if (props["aria-disabled"]) {
+          event.preventDefault()
+          return
+        }
+        onClick?.(event)
+      }}
       {...props}
     >
+      {indicatorPosition === "start" ? indicator : null}
       <span className="min-w-0 flex-1">{children}</span>
-      {!hideIcon && (
-        <span className="shrink-0 rounded-md text-muted-foreground transition-[color,transform] group-open:rotate-180 group-open:text-foreground">
-          {icon ?? <ChevronDownIcon className="size-4" />}
-        </span>
-      )}
+      {indicatorPosition === "end" ? indicator : null}
     </summary>
   )
 }
@@ -67,7 +110,7 @@ function CollapseContent({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="collapse-content"
       className={cn(
-        "border-t border-[color:var(--aui-card-border,var(--border))] px-4 py-3 text-sm leading-6 text-muted-foreground",
+        "border-t border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_70%)] px-4 py-3.5 text-sm leading-6 text-muted-foreground",
         className
       )}
       {...props}
@@ -80,7 +123,14 @@ export type CollapseItem = {
   title: React.ReactNode
   content: React.ReactNode
   description?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
   disabled?: boolean
+  disabledReason?: React.ReactNode
+  icon?: React.ReactNode
+  indicatorPosition?: CollapseTriggerProps["indicatorPosition"]
+  triggerClassName?: string
+  contentClassName?: string
 }
 
 export type CollapseGroupProps = React.ComponentProps<"div"> & {
@@ -89,9 +139,21 @@ export type CollapseGroupProps = React.ComponentProps<"div"> & {
   value?: string | string[]
   defaultValue?: string | string[]
   onValueChange?: (value: string | string[]) => void
+  variant?: CollapseProps["variant"]
+  size?: CollapseTriggerProps["size"]
 }
 
-function CollapseGroup({ items, type = "multiple", value, defaultValue, onValueChange, className, ...props }: CollapseGroupProps) {
+function CollapseGroup({
+  items,
+  type = "multiple",
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "default",
+  size = "md",
+  className,
+  ...props
+}: CollapseGroupProps) {
   const initialValue = React.useMemo(() => {
     if (value !== undefined) return value
     if (defaultValue !== undefined) return defaultValue
@@ -119,16 +181,35 @@ function CollapseGroup({ items, type = "multiple", value, defaultValue, onValueC
         <Collapse
           key={item.key}
           open={isOpen(item.key)}
-          onOpenChange={(open) => updateValue(item.key, open)}
+          onOpenChange={(open) => {
+            if (item.disabled) return
+            updateValue(item.key, open)
+          }}
+          variant={variant}
+          size={size}
           className={cn(item.disabled && "pointer-events-none opacity-60")}
         >
-          <CollapseTrigger>
-            <span className="grid gap-0.5">
-              <span>{item.title}</span>
+          <CollapseTrigger
+            size={size}
+            icon={item.icon}
+            indicatorPosition={item.indicatorPosition}
+            className={item.triggerClassName}
+            aria-disabled={item.disabled || undefined}
+            title={typeof item.disabledReason === "string" ? item.disabledReason : undefined}
+          >
+            <span className="grid min-w-0 gap-0.5">
+              <span className="flex min-w-0 items-center gap-2">
+                <span className="truncate">{item.title}</span>
+                {item.badge ? <span className="shrink-0">{item.badge}</span> : null}
+                {item.meta ? <span className="ml-auto shrink-0 text-[11px] font-medium text-muted-foreground">{item.meta}</span> : null}
+              </span>
               {item.description && <span className="text-xs font-normal text-muted-foreground">{item.description}</span>}
+              {item.disabled && item.disabledReason ? (
+                <span className="text-[11px] font-medium text-muted-foreground">{item.disabledReason}</span>
+              ) : null}
             </span>
           </CollapseTrigger>
-          <CollapseContent>{item.content}</CollapseContent>
+          <CollapseContent className={item.contentClassName}>{item.content}</CollapseContent>
         </Collapse>
       ))}
     </div>