tembro 3.1.1 → 3.1.5

package/packages/cli/vendor/src/components/patterns/resource-page.tsx

@@ -97,11 +97,11 @@ function ResourcePage<TData, TValue = unknown>({
   toolbarClassName,
   contentClassName,
   asideClassName,
-  ...props
-}: ResourcePageProps<TData, TValue>) {
-  const hasHeader = Boolean(title || description || eyebrow || actions)
-  const hasToolbar = Boolean(breadcrumbs || filters || tabs)
-  const hasMainContent = Boolean(children || table)
+  ...props
+}: ResourcePageProps<TData, TValue>) {
+  const hasHeader = Boolean(title || description || eyebrow || actions)
+  const hasToolbar = Boolean(filters || tabs)
+  const hasMainContent = Boolean(children || table)
 
   return (
     <div

package/packages/cli/vendor/src/components/patterns/settings-page.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
+
+export type SettingsPageSection = {
+  value: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  disabled?: boolean
+  content: React.ReactNode
+}
+
+export type SettingsPageProps = Omit<React.ComponentProps<"div">, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  sections: SettingsPageSection[]
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  navClassName?: string
+  contentClassName?: string
+}
+
+function SettingsPage({
+  className,
+  title,
+  description,
+  actions,
+  sections,
+  defaultValue,
+  value,
+  onValueChange,
+  navClassName,
+  contentClassName,
+  ...props
+}: SettingsPageProps) {
+  const firstEnabled = sections.find((section) => !section.disabled)
+  const resolvedDefaultValue = defaultValue ?? firstEnabled?.value
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <div data-slot="settings-page" className={cn("grid min-w-0 gap-5", className)} {...props}>
+      {hasHeader && (
+        <div data-slot="settings-page-header" className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="grid min-w-0 gap-1">
+            {title && <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>}
+            {description && <p className="max-w-3xl text-sm leading-6 text-muted-foreground">{description}</p>}
+          </div>
+          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      <Tabs value={value} defaultValue={resolvedDefaultValue} onValueChange={onValueChange}>
+        <div className="grid gap-4 lg:grid-cols-[16rem_minmax(0,1fr)]">
+          <TabsList className={cn("h-auto w-full flex-col items-stretch justify-start gap-1 p-1", navClassName)}>
+            {sections.map((section) => (
+              <TabsTrigger
+                key={section.value}
+                value={section.value}
+                disabled={section.disabled}
+                className="w-full justify-start"
+              >
+                <span className="grid min-w-0 gap-0.5 text-left">
+                  <span className="truncate">{section.label}</span>
+                  {section.description && <span className="truncate text-xs font-normal text-muted-foreground">{section.description}</span>}
+                </span>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          <div data-slot="settings-page-content" className={cn("min-w-0", contentClassName)}>
+            {sections.map((section) => (
+              <TabsContent key={section.value} value={section.value}>
+                {section.content}
+              </TabsContent>
+            ))}
+          </div>
+        </div>
+      </Tabs>
+    </div>
+  )
+}
+
+export { SettingsPage }

package/packages/cli/vendor/src/components/theme-provider.tsx

@@ -2,10 +2,13 @@
 
 import * as React from "react"
 
-type ThemeMode = "light" | "dark"
+type ThemeMode = "light" | "dark" | "system"
+type ResolvedThemeMode = "light" | "dark"
 
 type ThemeContextValue = {
   theme: ThemeMode
+  resolvedTheme: ResolvedThemeMode
+  mounted: boolean
   setTheme: (theme: ThemeMode) => void
   toggleTheme: () => void
 }
@@ -14,34 +17,58 @@ const THEME_STORAGE_KEY = "azamat-ui-theme"
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null)
 
-function resolveInitialTheme(): ThemeMode {
+function getSystemTheme(): ResolvedThemeMode {
   if (typeof window === "undefined") return "light"
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+}
+
+function resolveInitialTheme(): ThemeMode {
+  if (typeof window === "undefined") return "system"
 
   const stored = window.localStorage.getItem(THEME_STORAGE_KEY)
-  if (stored === "light" || stored === "dark") return stored
+  if (stored === "light" || stored === "dark" || stored === "system") return stored
 
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+  return "system"
 }
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setThemeState] = React.useState<ThemeMode>(resolveInitialTheme)
+  const [mounted, setMounted] = React.useState(false)
+  const [systemTheme, setSystemTheme] = React.useState<ResolvedThemeMode>(getSystemTheme)
+  const resolvedTheme = theme === "system" ? systemTheme : theme
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  React.useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)")
+    const updateSystemTheme = () => setSystemTheme(media.matches ? "dark" : "light")
+
+    updateSystemTheme()
+    media.addEventListener("change", updateSystemTheme)
+    return () => media.removeEventListener("change", updateSystemTheme)
+  }, [])
 
   React.useEffect(() => {
     const root = window.document.documentElement
-    root.classList.toggle("dark", theme === "dark")
-    root.style.colorScheme = theme
+    root.classList.toggle("dark", resolvedTheme === "dark")
+    root.style.colorScheme = resolvedTheme
     window.localStorage.setItem(THEME_STORAGE_KEY, theme)
-  }, [theme])
+  }, [resolvedTheme, theme])
 
   const setTheme = React.useCallback((nextTheme: ThemeMode) => {
     setThemeState(nextTheme)
   }, [])
 
   const toggleTheme = React.useCallback(() => {
-    setThemeState((current) => (current === "dark" ? "light" : "dark"))
+    setThemeState((current) => (current === "system" ? "dark" : current === "dark" ? "light" : "system"))
   }, [])
 
-  const value = React.useMemo(() => ({ theme, setTheme, toggleTheme }), [theme, setTheme, toggleTheme])
+  const value = React.useMemo(
+    () => ({ theme, resolvedTheme, mounted, setTheme, toggleTheme }),
+    [mounted, resolvedTheme, setTheme, theme, toggleTheme]
+  )
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

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

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import {
@@ -9,37 +11,17 @@ import {
   type CollapseItem,
   type CollapseProps,
   type CollapseTriggerProps,
-} from "../collapse"
+} from "@/components/ui/collapse"
 
-export type AccordionItem = CollapseItem
 export type AccordionProps = CollapseGroupProps
+export type AccordionItem = CollapseItem
 export type AccordionRootProps = CollapseProps
 export type AccordionTriggerProps = CollapseTriggerProps
-export type AccordionContentProps = React.ComponentProps<"div">
-
-/**
- * Accordion is the grouped disclosure API. Use CollapseRoot/CollapseTrigger/CollapseContent
- * for a single standalone disclosure.
- */
-function Accordion(props: AccordionProps) {
-  return <CollapseGroup data-slot="accordion" {...props} />
-}
-
-function AccordionRoot(props: AccordionRootProps) {
-  return <Collapse data-slot="accordion-root" {...props} />
-}
-
-function AccordionTrigger(props: AccordionTriggerProps) {
-  return <CollapseTrigger data-slot="accordion-trigger" {...props} />
-}
+export type AccordionContentProps = React.ComponentProps<typeof CollapseContent>
 
-function AccordionContent(props: AccordionContentProps) {
-  return <CollapseContent data-slot="accordion-content" {...props} />
-}
+const Accordion = CollapseGroup
+const AccordionRoot = Collapse
+const AccordionTrigger = CollapseTrigger
+const AccordionContent = CollapseContent
 
-export {
-  Accordion,
-  AccordionContent,
-  AccordionRoot,
-  AccordionTrigger,
-}
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger }

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

@@ -7,40 +7,33 @@ import { XIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius-md)] border border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_36%)] font-semibold tracking-[0.01em] text-foreground shadow-[inset_0_1px_0_color-mix(in_oklch,white,transparent_34%)] transition-[background-color,border-color,color,box-shadow,transform] focus-visible:ring-0 focus-visible:shadow-[0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_5px_var(--aui-focus-ring-soft,transparent)] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap outline-none [&>svg]:pointer-events-none",
   {
     variants: {
       variant: {
-        default:
-          "border-[color:color-mix(in_oklch,var(--primary),transparent_48%)] bg-[color:color-mix(in_oklch,var(--primary),transparent_78%)] text-[color:color-mix(in_oklch,var(--primary),black_24%)] dark:text-[color:color-mix(in_oklch,var(--primary),white_36%)]",
-        secondary:
-          "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_10%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_8%)] text-foreground",
-        destructive:
-          "border-[color:color-mix(in_oklch,var(--destructive),transparent_52%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_82%)] text-[color:color-mix(in_oklch,var(--destructive),black_16%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_38%)]",
-        soft: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_38%)] text-foreground shadow-none",
-        outline: "bg-[color:color-mix(in_oklch,var(--background),var(--muted)_6%)] text-foreground shadow-none",
-        ghost: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_76%)] text-muted-foreground shadow-none",
-        link: "border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4",
+        default: "",
+        secondary: "",
+        destructive: "",
+        soft: "",
+        outline: "",
+        ghost: "",
+        link: "",
       },
       tone: {
         neutral: "",
-        info: "border-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_64%)] bg-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_82%)] text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),black_18%)] dark:text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),white_48%)]",
-        success:
-          "border-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_56%)] bg-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_78%)] text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),black_14%)] dark:text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),white_40%)]",
-        warning:
-          "border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_72%)] text-[color:color-mix(in_oklch,var(--aui-warning-foreground,var(--foreground)),black_6%)] dark:text-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),white_30%)]",
-        danger:
-          "border-[color:color-mix(in_oklch,var(--destructive),transparent_56%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_80%)] text-[color:color-mix(in_oklch,var(--destructive),black_14%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_38%)]",
-        muted:
-          "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_18%)] text-muted-foreground",
+        info: "",
+        success: "",
+        warning: "",
+        danger: "",
+        muted: "",
       },
       size: {
-        sm: "min-h-5 px-2.5 py-0.5 text-[0.64rem]",
-        default: "min-h-6 px-3 py-1 text-[0.7rem]",
-        lg: "min-h-7 px-3.5 py-1 text-[0.78rem]",
+        sm: "",
+        default: "",
+        lg: "",
       },
-      dot: {
-        true: "pl-2",
+      dot: {
+        true: "",
         false: "",
       },
     },
@@ -94,13 +87,12 @@ function Badge({
         className: cn(badgeVariants({ variant, tone: resolvedTone, size, dot: showDot }), className),
         children: (
           <>
-            {showDot ? <span data-slot="badge-dot" className="size-1.5 rounded-full bg-current opacity-75" /> : null}
+            {showDot ? <span data-slot="badge-dot" /> : null}
             {leftIcon ? <span data-icon="inline-start" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{leftIcon}</span> : null}
             {resolvedLabel ? <span data-slot="badge-label">{resolvedLabel}</span> : null}
             {count != null ? (
               <span
                 data-slot="badge-count"
-                className="inline-flex min-w-5 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_88%)] px-1.5 py-0.5 text-[0.72em] font-semibold"
               >
                 {count}
               </span>
@@ -116,9 +108,8 @@ function Badge({
                   event.stopPropagation()
                   onRemove?.()
                 }}
-                className="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/35"
               >
-                <XIcon className="size-3" />
+                <XIcon data-icon="remove" />
               </button>
             ) : null}
           </>

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

@@ -5,32 +5,29 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] bg-clip-padding text-sm font-semibold text-foreground whitespace-nowrap shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))] transition-[transform,background-color,border-color,color,box-shadow,opacity] outline-none select-none hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:bg-[color:var(--aui-control-surface-hover,var(--muted))] focus-visible:ring-0 focus-visible:shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:cursor-not-allowed disabled:translate-y-0 disabled:border-[color:color-mix(in_oklch,var(--border),transparent_24%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:translate-y-0 aria-disabled:opacity-100 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none select-none disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "border-[color:color-mix(in_oklch,var(--primary),black_10%)] bg-primary text-primary-foreground shadow-[var(--aui-button-primary-shadow,0_10px_24px_rgba(16,185,129,0.18))] hover:border-[color:color-mix(in_oklch,var(--primary),black_18%)] hover:bg-[color:color-mix(in_oklch,var(--primary),white_8%)] hover:text-primary-foreground",
-        outline: "bg-[color:var(--aui-control-surface,var(--background))] text-foreground shadow-none",
-        secondary: "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_6%)] bg-secondary text-secondary-foreground shadow-none",
-        ghost: "border-transparent bg-transparent shadow-none",
-        destructive: "border-[color:color-mix(in_oklch,var(--destructive),black_8%)] bg-destructive text-[color:var(--aui-danger-foreground,var(--primary-foreground))] shadow-[var(--aui-button-danger-shadow,0_10px_24px_rgba(239,68,68,0.16))] hover:border-[color:color-mix(in_oklch,var(--destructive),black_16%)] hover:bg-[color:color-mix(in_oklch,var(--destructive),white_6%)]",
-        warning: "border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_78%)] text-[color:var(--aui-warning-foreground,var(--foreground))] shadow-none hover:bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_70%)]",
-        link: "rounded-none border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4 hover:bg-transparent hover:text-[color:color-mix(in_oklch,var(--primary),black_10%)]",
+        default: "",
+        outline: "",
+        secondary: "",
+        ghost: "",
+        destructive: "",
+        warning: "",
+        link: "",
       },
       size: {
-        default:
-          "h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        xs: "h-7 gap-1 rounded-[var(--radius-sm)] px-2.5 text-xs in-data-[slot=button-group]:rounded-[var(--radius-sm)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 rounded-[var(--radius-md)] px-3.5 text-[0.82rem] in-data-[slot=button-group]:rounded-[var(--radius-md)] has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-9 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        xl: "h-11 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        icon: "size-9",
-        "icon-xs":
-          "size-7 rounded-[var(--radius-sm)] in-data-[slot=button-group]:rounded-[var(--radius-sm)] [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-8 rounded-[var(--radius-md)] in-data-[slot=button-group]:rounded-[var(--radius-md)]",
-        "icon-lg": "size-10",
+        default: "",
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+        icon: "",
+        "icon-xs": "",
+        "icon-sm": "",
+        "icon-lg": "",
       },
     },
     defaultVariants: {
@@ -85,7 +82,7 @@ function Button({
       className={cn(
         buttonVariants({ variant, size: resolvedSize, 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))]"
+        pressed && ""
       )}
       {...props}
     >
@@ -93,7 +90,6 @@ function Button({
         <span
           data-slot="button-spinner"
           aria-hidden="true"
-          className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
         />
       ) : leftIcon ? (
         <span data-icon="inline-start" data-slot="button-icon" className="inline-flex shrink-0 items-center justify-center">

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

@@ -3,8 +3,8 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const cardVariants = cva(
-  "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border py-(--card-spacing) text-sm text-card-foreground transition-[background-color,border-color,box-shadow,transform,opacity] [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-[var(--aui-card-radius,var(--radius-xl))] *:[img:last-child]:rounded-b-[var(--aui-card-radius,var(--radius-xl))]",
+const cardVariants = cva(
+  "group/card flex flex-col gap-(--card-spacing) overflow-hidden py-(--card-spacing) [--card-spacing:--spacing(5)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0",
   {
     variants: {
       variant: {
@@ -12,17 +12,17 @@ const cardVariants = cva(
         elevated: "",
         outline: "",
         soft: "",
-        ghost: "border-transparent bg-transparent shadow-none ring-0",
+        ghost: "",
       },
       size: {
-        sm: "[--card-spacing:--spacing(4)] data-[has-footer=true]:pb-0",
-        default: "[--card-spacing:--spacing(5)]",
-        lg: "[--card-spacing:--spacing(6)]",
+        sm: "",
+        default: "",
+        lg: "",
       },
       density: {
-        compact: "text-xs",
-        default: "text-sm",
-        comfortable: "text-base",
+        compact: "",
+        default: "",
+        comfortable: "",
       },
       tone: {
         neutral: "",
@@ -40,7 +40,7 @@ const cardVariants = cva(
         false: "",
       },
       disabled: {
-        true: "pointer-events-none opacity-55",
+        true: "pointer-events-none",
         false: "",
       },
     },
@@ -197,8 +197,6 @@ function Card({
       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}
@@ -217,9 +215,9 @@ function Card({
           >
             {hasHeader ? (
               <CardHeader className={cn(surfacePaddingClassName[padding], headerClassName)}>
-                <div className="min-w-0 space-y-1">
+                <div className="flex min-w-0 flex-col gap-1">
                   {eyebrow != null ? (
-                    <div className={cn("text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80", eyebrowClassName)}>
+                    <div data-slot="card-eyebrow" className={eyebrowClassName}>
                       {eyebrow}
                     </div>
                   ) : null}
@@ -253,7 +251,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-[var(--aui-card-radius,var(--radius-xl))] px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
         className
       )}
       {...props}
@@ -265,10 +263,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn(
-        "font-heading text-[1.05rem] leading-snug font-semibold tracking-tight group-data-[size=sm]/card:text-sm group-data-[size=lg]/card:text-xl",
-        className
-      )}
+      className={className}
       {...props}
     />
   )
@@ -278,7 +273,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-sm leading-6 text-muted-foreground", className)}
+      className={className}
       {...props}
     />
   )
@@ -303,7 +298,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center rounded-b-[var(--aui-card-radius,var(--radius-xl))] border-t border-border/60 bg-muted/22 p-(--card-spacing)",
+        "flex items-center p-(--card-spacing)",
         className
       )}
       {...props}

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

@@ -9,10 +9,13 @@ export type CheckboxCheckedState = boolean | "indeterminate"
 
 export type CheckboxProps = Omit<
   React.ComponentPropsWithoutRef<"button">,
-  "checked" | "defaultChecked" | "onChange" | "value"
+  "checked" | "defaultChecked" | "name" | "onChange" | "required" | "value"
 > & {
   checked?: CheckboxCheckedState
   defaultChecked?: CheckboxCheckedState
+  name?: string
+  value?: string
+  required?: boolean
   onCheckedChange?: (checked: boolean) => void
   onCheckedStateChange?: (checked: CheckboxCheckedState) => void
   size?: "sm" | "md" | "lg"
@@ -42,6 +45,9 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
       invalid = false,
       allowIndeterminate = false,
       disabled,
+      name,
+      value = "on",
+      required,
       onClick,
       children,
       ...props
@@ -66,33 +72,49 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
     }
 
     return (
-      <button
-        ref={ref}
-        type="button"
-        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 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}
-        {...props}
-      >
-        {children ?? (
-          <span className="flex items-center justify-center">
-            {currentChecked === "indeterminate" ? (
-              <MinusIcon className="size-3.5" />
-            ) : currentChecked ? (
-              <CheckIcon className="size-3.5" />
-            ) : null}
-          </span>
-        )}
-      </button>
+      <>
+        {name ? (
+          <input
+            type="checkbox"
+            aria-hidden="true"
+            tabIndex={-1}
+            className="sr-only"
+            name={name}
+            value={value}
+            checked={currentChecked === true}
+            required={required}
+            disabled={disabled}
+            readOnly
+          />
+        ) : null}
+        <button
+          ref={ref}
+          type="button"
+          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 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}
+          {...props}
+        >
+          {children ?? (
+            <span className="flex items-center justify-center">
+              {currentChecked === "indeterminate" ? (
+                <MinusIcon className="size-3.5" />
+              ) : currentChecked ? (
+                <CheckIcon className="size-3.5" />
+              ) : null}
+            </span>
+          )}
+        </button>
+      </>
     )
   }
 )

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

@@ -13,7 +13,7 @@ import {
 import {
   InputGroup,
   InputGroupAddon,
-} from "@/components/ui/input-group"
+} from "@/components/ui/input/group"
 
 function Command({
   className,