feat(registry): add stat

docs/__registry__/index.tsx

@@ -277,7 +277,7 @@ export const Index: Record<string, any> = {
       name: "key-value",
       description: "",
       type: "registry:ui",
-      registryDependencies: ["button","input"],
+      registryDependencies: ["button","input","textarea"],
       files: [{
         path: "registry/default/ui/key-value.tsx",
         type: "registry:ui",
@@ -477,6 +477,20 @@ export const Index: Record<string, any> = {
       source: "",
       chunks: []
     },
+    "stat": {
+      name: "stat",
+      description: "",
+      type: "registry:ui",
+      registryDependencies: ["separator"],
+      files: [{
+        path: "registry/default/ui/stat.tsx",
+        type: "registry:ui",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/ui/stat.tsx")),
+      source: "",
+      chunks: []
+    },
     "stepper": {
       name: "stepper",
       description: "",
@@ -2409,6 +2423,48 @@ export const Index: Record<string, any> = {
       source: "",
       chunks: []
     },
+    "stat-demo": {
+      name: "stat-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["stat","dropdown-menu"],
+      files: [{
+        path: "registry/default/examples/stat-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/stat-demo.tsx")),
+      source: "",
+      chunks: []
+    },
+    "stat-variants-demo": {
+      name: "stat-variants-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["stat"],
+      files: [{
+        path: "registry/default/examples/stat-variants-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/stat-variants-demo.tsx")),
+      source: "",
+      chunks: []
+    },
+    "stat-layout-demo": {
+      name: "stat-layout-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["stat"],
+      files: [{
+        path: "registry/default/examples/stat-layout-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/stat-layout-demo.tsx")),
+      source: "",
+      chunks: []
+    },
     "stepper-demo": {
       name: "stepper-demo",
       description: "",

docs/app/(lobby)/pg/page.tsx

@@ -3,13 +3,17 @@
 import { Demo } from "@/components/demo";
 import { Shell } from "@/components/shell";
 import ColorPickerDemo from "@/registry/default/examples/color-picker-demo";
-import KeyValueDemo from "@/registry/default/examples/key-value-demo";
+import StatDemo from "@/registry/default/examples/stat-demo";
+import StatLayoutDemo from "@/registry/default/examples/stat-layout-demo";
+import StatVariantsDemo from "@/registry/default/examples/stat-variants-demo";
 
 export default function PlaygroundPage() {
   return (
     <Shell>
       <Demo>
-        <KeyValueDemo />
+        <StatDemo />
+        <StatVariantsDemo />
+        <StatLayoutDemo />
         <ColorPickerDemo />
       </Demo>
     </Shell>

docs/components/auto-type-table.tsx

@@ -1,5 +1,5 @@
 import { createGenerator } from "fumadocs-typescript";
-import { AutoTypeTable as FumadocsAutoTypeTable } from "fumadocs-typescript/ui";
+import { AutoTypeTable as AutoTypeTableImpl } from "fumadocs-typescript/ui";
 
 let cachedGenerator: ReturnType<typeof createGenerator> | null = null;
 
@@ -13,7 +13,7 @@ function getGenerator() {
 export function AutoTypeTable(props: Record<string, unknown>) {
   return (
     <div className="auto-type-table">
-      <FumadocsAutoTypeTable {...props} generator={getGenerator()} />
+      <AutoTypeTableImpl {...props} generator={getGenerator()} />
     </div>
   );
 }

docs/components/ui/button.tsx

@@ -9,14 +9,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
@@ -26,6 +25,8 @@ const buttonVariants = cva(
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {

docs/content/docs/components/avatar-group.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/avatar-group"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>

docs/content/docs/components/color-picker.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/color-picker"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot class-variance-authority lucide-react
+     @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot lucide-react
      ```
   </Step>
   <Step>

docs/content/docs/components/color-swatch.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/color-swatch"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>

docs/content/docs/components/cropper.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/cropper"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>

docs/content/docs/components/key-value.mdx

@@ -1,6 +1,6 @@
 ---
-title: Key-Value
-description: A dynamic key-value input component for managing environment variables and configuration pairs with paste support and validation.
+title: Key Value
+description: A dynamic input component for managing key-value pairs with paste support and validation.
 preview: true
 links:
   api: /docs/components/key-value#api-reference

docs/content/docs/components/marquee.mdx

@@ -23,7 +23,7 @@ npx shadcn@latest add "https://diceui.com/r/marquee"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>

docs/content/docs/components/segmented-input.mdx

@@ -19,13 +19,6 @@ npx shadcn@latest add "https://diceui.com/r/segmented-input"
 ### Manual
 
 <Steps>
-  <Step>
-     Install the following dependencies:
-
-     ```package-install
-     class-variance-authority
-     ```
-  </Step>
   <Step>
     Copy and paste the following code into your project.
 

docs/content/docs/components/stack.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/stack"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>

docs/content/docs/components/stat.mdx

@@ -0,0 +1,157 @@
+---
+title: Stat
+description: A flexible component for displaying key metrics and statistics with support for trends, indicators, and descriptions.
+preview: true
+links:
+  api: /docs/components/stat#api-reference
+---
+
+<ComponentTabs name="stat-demo" />
+
+## Installation
+
+### CLI
+
+```package-install
+npx shadcn@latest add "https://diceui.com/r/stat"
+```
+
+### Manual
+
+<Steps>
+  <Step>
+    Copy and paste the following code into your project.
+
+    <ComponentSource name="stat" />
+  </Step>
+</Steps>
+
+## Layout
+
+Import the parts, and compose them together.
+
+```tsx
+import {
+  Stat,
+  StatLabel,
+  StatValue,
+  StatIndicator,
+  StatTrend,
+  StatDescription,
+  StatSeparator,
+} from "@/components/ui/stat";
+
+return (
+  <Stat>
+    <StatLabel>Total Revenue</StatLabel>
+    <StatIndicator variant="icon" color="success">
+      <DollarSign />
+    </StatIndicator>
+    <StatValue>$45,231</StatValue>
+    <StatTrend trend="up">
+      <ArrowUp />
+      +20.1% from last month
+    </StatTrend>
+    <StatSeparator />
+    <StatDescription>
+      Total revenue generated in the current billing period
+    </StatDescription>
+  </Stat>
+);
+```
+
+## Examples
+
+### Variants
+
+Explore different indicator variants and color themes.
+
+<ComponentTabs name="stat-variants-demo" />
+
+### Layout Options
+
+Combine different stat components to create rich statistical displays.
+
+<ComponentTabs name="stat-layout-demo" />
+
+## API Reference
+
+### Stat
+
+The main container component that provides a card-style layout for displaying statistics.
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatProps"
+/>
+
+### StatLabel
+
+A label component for the statistic title or category.
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatLabelProps"
+/>
+
+### StatIndicator
+
+A visual indicator component that can display icons, badges, or action buttons with various color themes.
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatIndicatorProps"
+/>
+
+<DataAttributesTable
+  data={[
+    {
+      title: "[data-variant]",
+      value: ["default", "icon", "badge", "action"],
+    },
+    {
+      title: "[data-color]",
+      value: ["default", "success", "info", "warning", "error"],
+    },
+  ]}
+/>
+
+### StatValue
+
+Displays the primary statistic value with emphasized typography.
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatValueProps"
+/>
+
+### StatTrend
+
+Displays trend information with directional styling (up, down, or neutral).
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatTrendProps"
+/>
+
+<DataAttributesTable
+  data={[
+    {
+      title: "[data-trend]",
+      value: ["up", "down", "neutral"],
+    },
+  ]}
+/>
+
+### StatSeparator
+
+A horizontal separator for dividing content within the stat card.
+
+<AutoTypeTable
+  path="./types/docs/stat.ts"
+  name="StatSeparatorProps"
+/>
+
+### StatDescription
+
+Additional descriptive text for providing context about the stat.

docs/content/docs/components/stepper.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/stepper"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority lucide-react
+     @radix-ui/react-slot lucide-react
      ```
   </Step>
   <Step>

docs/content/docs/components/timeline.mdx

@@ -24,7 +24,7 @@ npx shadcn@latest add "https://diceui.com/r/timeline"
      Install the following dependencies:
 
      ```package-install
-     @radix-ui/react-slot class-variance-authority
+     @radix-ui/react-slot
      ```
   </Step>
   <Step>