docs: fix className reference

apps/www/src/content/docs/components/checkbox.md

@@ -30,6 +30,6 @@ import { Checkbox } from '@/components/ui/checkbox'
 
 ## Examples
 
-### With text
+### Disabled
 
 <ComponentPreview name="CheckboxDisabled"  /> 

apps/www/src/content/docs/installation/astro.md

@@ -40,7 +40,7 @@ Install React using the Astro CLI:
 npx astro add react
 ```
 
-<Callout className="mt-4">
+<Callout class="mt-4">
 
 Answer `Yes` to all the question prompted by the CLI when installing React.
 
@@ -54,7 +54,7 @@ Install Tailwind CSS using the Astro CLI:
 npx astro add tailwind
 ```
 
-<Callout className="mt-4">
+<Callout class="mt-4">
 
 Answer `Yes` to all the question prompted by the CLI when installing Tailwind CSS.
 

apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue

@@ -42,7 +42,7 @@ const data = [
       <CardDescription>Set your daily activity goal.</CardDescription>
     </CardHeader>
     <CardContent class-name="pb-2">
-      <div className="flex items-center justify-center space-x-2">
+      <div class="flex items-center justify-center space-x-2">
         <Button
           variant="outline"
           size="icon"
@@ -51,13 +51,13 @@ const data = [
           @click="goal -= 10"
         >
           <Minus class-name="h-4 w-4" />
-          <span className="sr-only">Decrease</span>
+          <span class="sr-only">Decrease</span>
         </Button>
-        <div className="flex-1 text-center">
+        <div class="flex-1 text-center">
-          <div className="text-5xl font-bold tracking-tighter">
+          <div class="text-5xl font-bold tracking-tighter">
             {{ goal }}
           </div>
-          <div className="text-[0.70rem] uppercase text-muted-foreground">
+          <div class="text-[0.70rem] uppercase text-muted-foreground">
             Calories/day
           </div>
         </div>
@@ -69,10 +69,10 @@ const data = [
           @click="goal += 10 "
         >
           <Plus class-name="h-4 w-4" />
-          <span className="sr-only">Increase</span>
+          <span class="sr-only">Increase</span>
         </Button>
       </div>
-      <div className="my-3 h-[60px]">
+      <div class="my-3 h-[60px]">
         <!-- <ResponsiveContainer width="100%" height="100%">
           <BarChart data="{data}">
             <Bar

apps/www/src/lib/registry/default/example/Cards/index.vue

@@ -76,48 +76,48 @@ const range = ref({
 </script>
 
 <template>
-  <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+  <div class="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
-    <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+    <div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
       <CardsStats />
-      <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
+      <div class="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
         <CardsCalendar />
-        <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
           <CardsActivityGoal />
         </div>
-        <div className="pt-3 sm:col-span-2 xl:pt-4">
+        <div class="pt-3 sm:col-span-2 xl:pt-4">
           <CardsMetric />
         </div>
       </div>
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-        <div className="space-y-4 xl:space-y-4">
+        <div class="space-y-4 xl:space-y-4">
           <CardsTeamMembers />
           <CardsCookieSettings />
           <CardsPaymentMethod />
         </div>
-        <div className="space-y-4 xl:space-y-4">
+        <div class="space-y-4 xl:space-y-4">
           <CardsChat />
           <CardsCreateAccount />
-          <div className="hidden xl:block">
+          <div class="hidden xl:block">
             <CardsReportIssue />
           </div>
         </div>
       </div>
     </div>
-    <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+    <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
-      <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+      <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
         <CardsCalendar />
-        <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
           <CardsActivityGoal />
         </div>
-        <div className="pt-3 sm:col-span-2 xl:pt-3">
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
           <CardsMetric />
         </div>
       </div>
-      <div className="hidden md:block">
+      <div class="hidden md:block">
         <CardsDataTable />
       </div>
       <CardsShare />
-      <div className="xl:hidden">
+      <div class="xl:hidden">
         <CardsReportIssue />
       </div>
     </div>

apps/www/src/lib/registry/default/example/CheckboxDisabled.vue

@@ -3,18 +3,13 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 </script>
 
 <template>
-  <div className="items-top flex space-x-2">
+  <div class="items-top flex space-x-2">
     <Checkbox id="terms1" disabled />
-    <div className="grid gap-1.5 leading-none">
+    <label
-      <label
+      for="terms2"
-        htmlFor="terms1"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
-      >
+      Accept terms and conditions
-        Accept terms and conditions
+    </label>
-      </label>
-      <p className="text-sm text-muted-foreground">
-        You agree to our Terms of Service and Privacy Policy.
-      </p>
-    </div>
   </div>
 </template>