azamat-ui-kit-cli 0.2.2 → 0.3.4

package/vendor/src/components/layout/stat-card.tsx

@@ -8,11 +8,13 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
 import { cn } from "@/lib/utils"
 
 export type StatCardTrend = {
   value: React.ReactNode
-  tone?: "success" | "warning" | "danger" | "muted" | "default"
+  tone?: "success" | "warning" | "danger" | "info" | "muted" | "default"
+  label?: React.ReactNode
 }
 
 export type StatCardProps = React.ComponentProps<typeof Card> & {
@@ -23,7 +25,13 @@ export type StatCardProps = React.ComponentProps<typeof Card> & {
   action?: React.ReactNode
   trend?: StatCardTrend
   footer?: React.ReactNode
+  helperText?: React.ReactNode
+  loading?: boolean
+  valuePrefix?: React.ReactNode
+  valueSuffix?: React.ReactNode
   contentClassName?: string
+  iconClassName?: string
+  valueClassName?: string
 }
 
 const trendClassName: Record<NonNullable<StatCardTrend["tone"]>, string> = {
@@ -31,9 +39,20 @@ const trendClassName: Record<NonNullable<StatCardTrend["tone"]>, string> = {
   success: "text-emerald-600 dark:text-emerald-400",
   warning: "text-amber-600 dark:text-amber-400",
   danger: "text-destructive",
+  info: "text-blue-600 dark:text-blue-400",
   muted: "text-muted-foreground",
 }
 
+function StatSkeleton() {
+  return (
+    <div className="space-y-3">
+      <div className="h-4 w-28 animate-pulse rounded-md bg-muted" />
+      <div className="h-8 w-36 animate-pulse rounded-md bg-muted" />
+      <div className="h-4 w-44 animate-pulse rounded-md bg-muted" />
+    </div>
+  )
+}
+
 function StatCard({
   className,
   title,
@@ -43,43 +62,61 @@ function StatCard({
   action,
   trend,
   footer,
+  helperText,
+  loading = false,
+  valuePrefix,
+  valueSuffix,
   contentClassName,
+  iconClassName,
+  valueClassName,
   ...props
 }: StatCardProps) {
   return (
     <Card data-slot="stat-card" className={cn("min-w-0", className)} {...props}>
-      <CardHeader>
-        <div className="flex min-w-0 items-start justify-between gap-3">
-          <div className="min-w-0 space-y-1">
-            {title && <CardDescription className="truncate">{title}</CardDescription>}
-            {value && <CardTitle className="truncate text-2xl">{value}</CardTitle>}
-          </div>
-          {(icon || action) && (
-            <CardAction>
-              {action ?? (
-                <div className="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-                  {icon}
-                </div>
+      {loading ? (
+        <CardContent>
+          <StatSkeleton />
+        </CardContent>
+      ) : (
+        <>
+          <CardHeader>
+            <div className="flex min-w-0 items-start justify-between gap-3">
+              <div className="min-w-0 space-y-1">
+                {title && <CardDescription className="truncate">{title}</CardDescription>}
+                {value !== undefined && value !== null ? (
+                  <CardTitle className={cn("flex items-baseline gap-1 truncate text-2xl", valueClassName)}>
+                    {valuePrefix ? <span className="text-base text-muted-foreground">{valuePrefix}</span> : null}
+                    <span className="truncate">{value}</span>
+                    {valueSuffix ? <span className="text-base text-muted-foreground">{valueSuffix}</span> : null}
+                  </CardTitle>
+                ) : null}
+              </div>
+              {(icon || action) && (
+                <CardAction>
+                  {action ?? <div className={cn("flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground", iconClassName)}>{icon}</div>}
+                </CardAction>
               )}
-            </CardAction>
-          )}
-        </div>
-      </CardHeader>
+            </div>
+          </CardHeader>
 
-      {(description || trend || footer) && (
-        <CardContent className={cn("space-y-2", contentClassName)}>
-          {(description || trend) && (
-            <div className="flex flex-wrap items-center gap-2 text-sm">
-              {trend && (
-                <span className={cn("font-medium", trendClassName[trend.tone ?? "default"])}>
-                  {trend.value}
-                </span>
+          {(description || trend || helperText || footer) && (
+            <CardContent className={cn("space-y-2", contentClassName)}>
+              {(description || trend) && (
+                <div className="flex flex-wrap items-center gap-2 text-sm">
+                  {trend && (
+                    <Badge variant="ghost" tone={trend.tone === "muted" || trend.tone === "default" ? "neutral" : trend.tone} size="sm" className={cn("font-medium", trendClassName[trend.tone ?? "default"])}>
+                      {trend.value}
+                    </Badge>
+                  )}
+                  {trend?.label ? <span className="text-muted-foreground">{trend.label}</span> : null}
+                  {description && <span className="text-muted-foreground">{description}</span>}
+                </div>
               )}
-              {description && <span className="text-muted-foreground">{description}</span>}
-            </div>
+              {helperText ? <p className="text-xs leading-5 text-muted-foreground">{helperText}</p> : null}
+              {footer}
+            </CardContent>
           )}
-          {footer}
-        </CardContent>
+        </>
       )}
     </Card>
   )

package/vendor/src/components/navigation/index.ts

@@ -2,3 +2,4 @@ export * from './pagination'
 export * from './page-tabs'
 export * from './stepper-tabs'
 export * from './anchor-nav'
+export * from './nav-tabs'

package/vendor/src/components/navigation/nav-tabs.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type NavTabItem = {
+  label: React.ReactNode
+  value: string
+  href?: string
+  icon?: React.ReactNode
+  disabled?: boolean
+}
+
+export type NavTabsProps = React.ComponentProps<"div"> & {
+  items: NavTabItem[]
+  value?: string
+  onValueChange?: (value: string) => void
+  size?: "sm" | "default" | "lg"
+  fullWidth?: boolean
+}
+
+const sizeClassName = {
+  sm: "h-8 px-3 text-xs",
+  default: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-base",
+}
+
+function NavTabs({ items, value, onValueChange, size = "default", fullWidth = false, className, ...props }: NavTabsProps) {
+  return (
+    <div data-slot="nav-tabs" className={cn("inline-flex rounded-[var(--radius-xl)] border border-border/80 bg-muted/45 p-1", fullWidth && "w-full", className)} {...props}>
+      {items.map((item) => {
+        const active = item.value === value
+        const content = (
+          <>
+            {item.icon ? <span className="[&_svg]:size-4">{item.icon}</span> : null}
+            <span className="truncate">{item.label}</span>
+          </>
+        )
+
+        const itemClassName = cn(
+          "inline-flex items-center justify-center gap-2 rounded-[calc(var(--radius-xl)-4px)] font-medium text-muted-foreground transition hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+          sizeClassName[size],
+          fullWidth && "flex-1",
+          active && "bg-background text-foreground shadow-sm"
+        )
+
+        return item.href ? (
+          <a key={item.value} href={item.href} aria-current={active ? "page" : undefined} className={itemClassName}>
+            {content}
+          </a>
+        ) : (
+          <button key={item.value} type="button" disabled={item.disabled} className={itemClassName} onClick={() => onValueChange?.(item.value)}>
+            {content}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { NavTabs }

package/vendor/src/components/navigation/page-tabs.tsx

@@ -28,38 +28,53 @@ function PageTabs<TValue extends string = string>({
   size = "default",
   className,
   ...props
-}: PageTabsProps<TValue>) {
-  const visibleItems = items.filter((item) => !item.hidden)
-
-  return (
-    <div data-slot="page-tabs" data-variant={variant} className={cn("flex min-w-0 flex-wrap gap-1 border-b", variant !== "underline" && "border-b-0", className)} {...props}>
-      {visibleItems.map((item) => {
-        const active = item.value === value
-        return (
+}: PageTabsProps<TValue>) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div
+      data-slot="page-tabs"
+      data-variant={variant}
+      className={cn(
+        "flex min-w-0 flex-wrap gap-1.5 border-b border-border/70",
+        variant === "pills" && "rounded-full border border-border/75 bg-muted/22 p-1 shadow-[0_1px_0_rgba(255,255,255,0.04)]",
+        variant === "cards" && "gap-2 border-b-0",
+        variant !== "underline" && "border-b-0",
+        className
+      )}
+      {...props}
+    >
+      {visibleItems.map((item) => {
+        const active = item.value === value
+        return (
           <button
             key={item.value}
             type="button"
             disabled={item.disabled}
             data-slot="page-tab"
             data-active={active || undefined}
-            className={cn(
-              "inline-flex min-w-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
-              size === "sm" ? "h-8" : "h-10",
-              variant === "underline" && "rounded-none border-b-2 border-transparent text-muted-foreground hover:text-foreground",
-              variant === "underline" && active && "border-primary text-foreground",
-              variant === "pills" && "bg-muted/35 text-muted-foreground hover:bg-muted hover:text-foreground",
-              variant === "pills" && active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
-              variant === "cards" && "border bg-card text-muted-foreground shadow-sm hover:border-primary/40 hover:text-foreground",
-              variant === "cards" && active && "border-primary/60 text-foreground"
-            )}
-            onClick={() => onValueChange?.(item.value, item)}
-          >
-            {item.icon}
-            <span className="truncate">{item.label}</span>
-            {item.badge !== undefined && <Badge variant={active && variant === "pills" ? "secondary" : "outline"}>{item.badge}</Badge>}
-          </button>
-        )
-      })}
+            className={cn(
+              "inline-flex min-w-0 items-center gap-2 rounded-full px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
+              size === "sm" ? "h-8" : "h-10",
+              variant === "underline" && "rounded-none border-b-2 border-transparent px-1 text-muted-foreground hover:text-foreground",
+              variant === "underline" && active && "border-primary text-foreground",
+              variant === "pills" && "text-muted-foreground hover:bg-background/72 hover:text-foreground",
+              variant === "pills" && active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground",
+              variant === "cards" && "rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 text-muted-foreground shadow-sm ring-1 ring-foreground/4 hover:border-primary/28 hover:text-foreground",
+              variant === "cards" && active && "border-primary/50 bg-primary/7 text-foreground"
+            )}
+            onClick={() => onValueChange?.(item.value, item)}
+          >
+            {item.icon}
+            <span className="truncate">{item.label}</span>
+            {item.badge !== undefined && (
+              <Badge variant={active && variant === "pills" ? "secondary" : "outline"} className="rounded-full">
+                {item.badge}
+              </Badge>
+            )}
+          </button>
+        )
+      })}
     </div>
   )
 }

package/vendor/src/components/navigation/pagination.tsx

@@ -92,7 +92,10 @@ function Pagination({
     <nav
       data-slot="pagination"
       aria-label="Pagination"
-      className={cn("flex items-center justify-center gap-1.5 rounded-full border border-border/70 bg-background/88 p-1 shadow-sm backdrop-blur", className)}
+      className={cn(
+        "flex items-center justify-center gap-1.5 rounded-full border border-border/75 bg-background/92 p-1 shadow-[0_1px_0_rgba(255,255,255,0.08)] backdrop-blur",
+        className
+      )}
       {...props}
     >
       {showEdges && (
@@ -135,17 +138,18 @@ function Pagination({
 
         return (
           <Button
-            key={item}
-            type="button"
-            variant={item === currentPage ? "default" : "outline"}
-            size="icon-sm"
-            disabled={disabled}
+            key={item}
+            type="button"
+            variant={item === currentPage ? "default" : "outline"}
+            size="icon-sm"
+            disabled={disabled}
             aria-current={item === currentPage ? "page" : undefined}
             aria-label={labels?.page?.(item) ?? `Page ${item}`}
-            onClick={() => goToPage(item)}
-          >
-            {item}
-          </Button>
+            onClick={() => goToPage(item)}
+            className={cn(item !== currentPage && "border-border/80 bg-background/94")}
+          >
+            {item}
+          </Button>
         )
       })}
 

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

@@ -0,0 +1,65 @@
+import * as React from "react"
+import { AlertTriangleIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+export type AlertDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  cancelLabel?: React.ReactNode
+  actionLabel?: React.ReactNode
+  actionTone?: "default" | "destructive"
+  loading?: boolean
+  onAction?: () => void | Promise<void>
+  children?: React.ReactNode
+}
+
+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>
+        <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}
+          </div>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose render={() => (
+            <Button type="button" variant="outline" disabled={loading}>
+              {cancelLabel}
+            </Button>
+          )} />
+          <Button type="button" variant={actionTone === "destructive" ? "destructive" : "default"} loading={loading} onClick={() => void onAction?.()}>
+            {actionLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { AlertDialog }

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

@@ -0,0 +1,71 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+export type DrawerSide = "left" | "right" | "top" | "bottom"
+
+export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  trigger?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  side?: DrawerSide
+  footer?: React.ReactNode
+  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)]",
+}
+
+function Drawer({
+  trigger,
+  title,
+  description,
+  side = "right",
+  footer,
+  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>
+  )
+}
+
+function DrawerCloseButton({ children = "Close", ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <DialogClose render={() => <Button type="button" variant="outline" {...props}>{children}</Button>} />
+  )
+}
+
+export { Drawer, DrawerCloseButton }

package/vendor/src/components/overlay/index.ts

@@ -1,4 +1,6 @@
-export * from "./dialog-actions"
-export * from "./modal-shell"
+export * from "./dialog-actions"
+export * from "./alert-dialog"
+export * from "./modal-shell"
 export * from "./confirm-dialog"
 export * from "./sheet-shell"
+export * from "./drawer"

package/vendor/src/components/patterns/data-view.tsx

@@ -5,13 +5,14 @@ import { cn } from "@/lib/utils"
 
 export type DataViewState = "idle" | "loading" | "error" | "empty"
 
-export type DataViewLabels = {
-  loadingTitle?: React.ReactNode
-  loadingDescription?: React.ReactNode
-  errorTitle?: React.ReactNode
-  emptyTitle?: React.ReactNode
-  emptyDescription?: React.ReactNode
-}
+export type DataViewLabels = {
+  loadingTitle?: React.ReactNode
+  loadingDescription?: React.ReactNode
+  errorTitle?: React.ReactNode
+  errorDescription?: React.ReactNode
+  emptyTitle?: React.ReactNode
+  emptyDescription?: React.ReactNode
+}
 
 export type DataViewProps<TItem = unknown> = React.ComponentProps<"div"> & {
   data: TItem[]
@@ -72,7 +73,11 @@ function DataView<TItem = unknown>({
       {selectionBar}
       <div data-slot="data-view-content" className={contentClassName}>
         {state === "loading" ? loadingState ?? <InlineState tone="loading" title={labels?.loadingTitle ?? "Loading"} description={labels?.loadingDescription} /> : null}
-        {state === "error" ? errorState ?? <InlineState tone="error" title={labels?.errorTitle ?? "Something went wrong"} /> : null}
+        {state === "error"
+          ? errorState ?? (
+              <InlineState tone="error" title={labels?.errorTitle ?? "Something went wrong"} description={labels?.errorDescription} />
+            )
+          : null}
         {state === "empty" ? empty ?? <InlineState tone="empty" title={labels?.emptyTitle ?? "No data"} description={labels?.emptyDescription} /> : null}
         {state === "idle" ? renderContent?.(data, { view, state }) ?? <div className="grid gap-3">{data.map((item, index) => renderItem?.(item, index) ?? <pre key={index} className="rounded-lg border bg-card p-3 text-xs">{JSON.stringify(item, null, 2)}</pre>)}</div> : null}
       </div>

package/vendor/src/components/ui/badge.tsx

@@ -1,52 +1,96 @@
-import { mergeProps } from "@base-ui/react/merge-props"
-import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant,
-    },
-  })
-}
-
-export { Badge, badgeVariants }
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent font-semibold tracking-[0.01em] whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary/20 bg-primary text-primary-foreground shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)] [a]:hover:bg-primary/88",
+        secondary:
+          "border-border/70 bg-secondary text-secondary-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)] [a]:hover:bg-secondary/84",
+        destructive:
+          "border-destructive/18 bg-destructive/12 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/18",
+        outline:
+          "border-border/85 bg-background/88 text-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)] [a]:hover:bg-muted [a]:hover:text-foreground",
+        ghost:
+          "bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      tone: {
+        neutral: "",
+        info: "border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+        success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+        warning: "border-amber-500/24 bg-amber-500/12 text-amber-700 dark:text-amber-300",
+        danger: "border-destructive/20 bg-destructive/12 text-destructive dark:bg-destructive/20",
+      },
+      size: {
+        sm: "min-h-5 px-2 py-0.5 text-[0.65rem]",
+        default: "min-h-6 px-2.5 py-1 text-[0.7rem]",
+        lg: "min-h-7 px-3 py-1 text-xs",
+      },
+      dot: {
+        true: "pl-2",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      tone: "neutral",
+      size: "default",
+      dot: false,
+    },
+  }
+)
+
+type BadgeProps = useRender.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    leftIcon?: React.ReactNode
+    rightIcon?: React.ReactNode
+  }
+
+function Badge({
+  className,
+  variant = "default",
+  tone = "neutral",
+  size = "default",
+  dot = false,
+  leftIcon,
+  rightIcon,
+  children,
+  render,
+  ...props
+}: BadgeProps) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant, tone, size, dot }), className),
+        children: (
+          <>
+            {dot ? <span data-slot="badge-dot" className="size-1.5 rounded-full bg-current opacity-75" /> : null}
+            {leftIcon ? <span data-icon="inline-start" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{leftIcon}</span> : null}
+            {children ? <span data-slot="badge-label">{children}</span> : null}
+            {rightIcon ? <span data-icon="inline-end" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{rightIcon}</span> : null}
+          </>
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+      tone,
+      size,
+      dot,
+    },
+  })
+}
+
+export { Badge, badgeVariants, type BadgeProps }