Updated: Component example code and Checkbox component.

components/content/docs/components/breadcrumb/breadcrumbCode.ts

@@ -1,5 +1,6 @@
 const defaultBreadcrumbCode = {
   "BreadcrumbComponent.vue": `<script setup>
+import { PhHouse } from "@phosphor-icons/vue";
 import {  Breadcrumb,
   BreadcrumbDivider,
   BreadcrumbItem,
@@ -14,7 +15,7 @@ import {  Breadcrumb,
 
         <BreadcrumbItem>
           <BreadcrumbLink href="/">
-            <PhosphorIconHouse :size="20" />
+            <PhHouse :size="20" />
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbDivider />
@@ -37,6 +38,7 @@ import {  Breadcrumb,
 
 const breadcrumbWithBorderCode = {
   "BreadcrumbComponent.vue": `<script setup>
+import { PhHouse } from "@phosphor-icons/vue";
 import {Breadcrumb,
   BreadcrumbDivider,
   BreadcrumbItem,
@@ -49,7 +51,7 @@ import {Breadcrumb,
         <BreadcrumbList border-type="border-xy">
           <BreadcrumbItem>
             <BreadcrumbLink href="/">
-              <PhosphorIconHouse :size="20" />
+              <PhHouse :size="20" />
             </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbDivider />
@@ -78,7 +80,7 @@ import {Breadcrumb,
         <BreadcrumbList border-type="border-y">
           <BreadcrumbItem>
             <BreadcrumbLink href="/">
-              <PhosphorIconHouse :size="20" />
+              <PhHouse :size="20" />
             </BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbDivider />
@@ -107,6 +109,7 @@ import {Breadcrumb,
 
 const BreadcrumbDividerIconCode = {
   "BreadcrumbComponent.vue": `<script setup>
+import { PhAirplay, PhHouse, PhCircuitry, PhLaptop } from "@phosphor-icons/vue";
 import {Breadcrumb,
   BreadcrumbDivider,
   BreadcrumbItem,
@@ -119,31 +122,31 @@ import {Breadcrumb,
     <BreadcrumbList>
       <BreadcrumbItem>
         <BreadcrumbLink href="/">
-          <PhosphorIconHouse :size="16" />
+          <PhHouse :size="16" />
           <span>Home</span>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbDivider />
 
       <BreadcrumbItem>
         <BreadcrumbLink href="/">
-          <PhosphorIconAirplay :size="16" />
+          <PhAirplay :size="16" />
           <span>Products</span>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbDivider />
 
       <BreadcrumbItem>
         <BreadcrumbLink href="/">
-          <PhosphorIconCircuitry :size="16" />
+          <PhCircuitry :size="16" />
           <span>Electronics</span>
         </BreadcrumbLink>
       </BreadcrumbItem>
       <BreadcrumbDivider />
 
       <BreadcrumbItem>
         <BreadcrumbPage>
-          <PhosphorIconLaptop :size="16" />
+          <PhLaptop :size="16" />
           <span>Laptop</span>
         </BreadcrumbPage>
       </BreadcrumbItem>
@@ -155,7 +158,7 @@ import {Breadcrumb,
 
 const BreadcrumbWithEllipsisCode = {
   "BreadcrumbComponent.vue": `<script setup>
-
+import { PhHouse } from "@phosphor-icons/vue";
 import { Breadcrumb,
   BreadcrumbDivider,
   BreadcrumbEllipsis,
@@ -169,7 +172,7 @@ import { Breadcrumb,
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/">
-            <PhosphorIconHouse :size="20" />
+            <PhHouse :size="20" />
           </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbDivider />
@@ -191,6 +194,7 @@ import { Breadcrumb,
 
 const BreadcrumbActiveBarOutlineCode = {
   "BreadcrumbComponent.vue": `<script setup>
+import { PhHouse } from "@phosphor-icons/vue";
 import {
   Breadcrumb,
   BreadcrumbDivider,
@@ -206,7 +210,7 @@ import {
   <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink><PhosphorIconHouse :size="20" /></BreadcrumbLink>
+          <BreadcrumbLink><PhHouse :size="20" /></BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbDivider />
 
@@ -229,7 +233,7 @@ import {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink><PhosphorIconHouse :size="20" /></BreadcrumbLink>
+          <BreadcrumbLink><PhHouse :size="20" /></BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbDivider />
 
@@ -254,7 +258,7 @@ import {
 export {
   BreadcrumbActiveBarOutlineCode,
   BreadcrumbDividerIconCode,
-  BreadcrumbWithEllipsisCode,
   breadcrumbWithBorderCode,
+  BreadcrumbWithEllipsisCode,
   defaultBreadcrumbCode,
 };

components/content/docs/components/buttonGroup/buttonGroupCode.ts

@@ -28,21 +28,21 @@ import { Button, ButtonGroup } from "keep-vue";
           variant="outline"
           class="flex items-center gap-x-1 border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="start">
-          <PhosphorIconCube :size="20" class="mr-1.5" />
+          <PhCube :size="20" class="mr-1.5" />
           Profile
         </Button>
         <Button
           variant="outline"
           class="flex items-center gap-x-1 border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="center">
-          <PhosphorIconGear :size="20" class="mr-1.5" />
+          <PhGear :size="20" class="mr-1.5" />
           Settings
         </Button>
         <Button
           variant="outline"
           class="flex items-center gap-x-1 border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="end">
-          <PhosphorIconChatCircleDots :size="24" class="mr-1.5" />
+          <PhChatCircleDots :size="24" class="mr-1.5" />
           Messages
         </Button>
       </ButtonGroup>
@@ -62,21 +62,21 @@ import { Button, ButtonGroup } from 'keep-vue'
           class="border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="start"
           shape="icon">
-          <PhosphorIconCube :size="20" />
+          <PhCube :size="20" />
         </Button>
         <Button
           variant="outline"
           class="border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="center"
           shape="icon">
-          <PhosphorIconGear :size="20" />
+          <PhGear :size="20" />
         </Button>
         <Button
           variant="outline"
           class="border-metal-300 text-metal-600 dark:border-metal-400 dark:text-metal-300"
           position="end"
           shape="icon">
-          <PhosphorIconChatCircleDots :size="20" />
+          <PhChatCircleDots :size="20" />
         </Button>
       </ButtonGroup>
 </template>`,

components/content/docs/components/checkbox/CheckboxApi.vue

@@ -9,13 +9,6 @@ const CheckBoxApiData = [
     propsDescription: "Checkbox Variant",
     default: "default",
   },
-  {
-    id: 2,
-    propsName: "default-checked",
-    propsType: "boolean",
-    propsDescription: "Checked state of the checkbox",
-    default: "false",
-  },
   {
     id: 3,
     propsName: "checked",

components/content/docs/components/checkbox/CheckboxVariant.vue

@@ -2,7 +2,7 @@
 import { Checkbox, Label } from "~/src";
 import { CheckboxVariantCode } from "./checkboxCode";
 const statusOne = ref(false);
-const statusTwo = ref(false);
+const statusTwo = ref(true);
 const statusThree = ref(false);
 </script>
 <template>
@@ -13,22 +13,26 @@ const statusThree = ref(false);
           Checkbox Variant
         </p>
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="default" v-model:checked="statusOne" />
+          <Checkbox
+            id="default"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
           <Label for="default">Default</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
           <Checkbox
             id="rounded"
-            v-model:checked="statusTwo"
+            :checked="statusTwo"
             variant="rounded"
-            default-checked />
+            @update:checked="(value) => (statusTwo = value)" />
           <Label for="rounded">Rounded</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
           <Checkbox
             id="circle"
-            v-model:checked="statusThree"
-            variant="circle" />
+            :checked="statusThree"
+            variant="circle"
+            @update:checked="(value) => (statusThree = value)" />
           <Label for="circle">Circle</Label>
         </fieldset>
       </div>

components/content/docs/components/checkbox/DefaultCheckbox.vue

@@ -4,7 +4,7 @@ import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPrev
 import { Checkbox, Label } from "~/src";
 import { defaultCheckboxCode } from "./checkboxCode";
 
-const statusOne = ref(false);
+const statusOne = ref(true);
 const statusTwo = ref(false);
 </script>
 <template>
@@ -14,14 +14,18 @@ const statusTwo = ref(false);
         <p class="text-body-3 font-normal dark:text-metal-300">
           Keep Design System License
         </p>
-
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="single" v-model:checked="statusOne" default-checked />
+          <Checkbox
+            id="single"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
           <Label for="single">Single License</Label>
         </fieldset>
-
         <fieldset class="flex items-center gap-2">
-          <Checkbox id="team" v-model:checked="statusTwo" />
+          <Checkbox
+            id="team"
+            :checked="statusTwo"
+            @update:checked="(value) => (statusTwo = value)" />
           <Label for="team">Team License</Label>
         </fieldset>
       </div>

components/content/docs/components/checkbox/checkboxCode.ts

@@ -3,57 +3,75 @@ const defaultCheckboxCode = {
 import { Checkbox, Label } from 'keep-vue'
 import { ref } from 'vue'
 
-const statusOne = ref(false)
-const statusTwo = ref(false)
+const statusOne = ref(true);
+const statusTwo = ref(false);
 console.log(statusOne.value, statusTwo.value)
 </script>
 
 <template>
   <div class="space-y-3 p-3">
-    <p class="text-body-3 font-normal dark:text-metal-300">Keep Design System License</p>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="single" v-model:checked="statusOne" default-checked />
-      <Label for="single">Single License</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="team" v-model:checked="statusTwo" />
-      <Label for="team">Team License</Label>
-    </fieldset>
-  </div>
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Keep Design System License
+        </p>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="single"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
+          <Label for="single">Single License</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="team"
+            :checked="statusTwo"
+            @update:checked="(value) => (statusTwo = value)" />
+          <Label for="team">Team License</Label>
+        </fieldset>
+      </div>
 </template>`,
 };
 
 const CheckboxVariantCode = {
   "CheckboxComponent.vue": `<script setup>
 import { Checkbox, Label } from "keep-vue";
+
 const statusOne = ref(false);
-const statusTwo = ref(false);
+const statusTwo = ref(true);
 const statusThree = ref(false);
 
 console.log(statusOne.value, statusTwo.value, statusThree.value);
 
 </script>
 
 <template>
-  <div class="space-y-3 p-3">
-    <p class="text-body-3 font-normal dark:text-metal-300">Checkbox Variant</p>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="default" v-model:checked="statusOne" />
-      <Label for="default">Default</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox
-        id="rounded"
-        v-model:checked="statusTwo"
-        variant="rounded"
-        default-checked />
-      <Label for="rounded">Rounded</Label>
-    </fieldset>
-    <fieldset class="flex items-center gap-2">
-      <Checkbox id="circle" v-model:checked="statusThree" variant="circle" />
-      <Label for="circle">Circle</Label>
-    </fieldset>
-  </div>
+ <div class="space-y-3 p-3">
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Checkbox Variant
+        </p>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="default"
+            :checked="statusOne"
+            @update:checked="(value) => (statusOne = value)" />
+          <Label for="default">Default</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="rounded"
+            :checked="statusTwo"
+            variant="rounded"
+            @update:checked="(value) => (statusTwo = value)" />
+          <Label for="rounded">Rounded</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="circle"
+            :checked="statusThree"
+            variant="circle"
+            @update:checked="(value) => (statusThree = value)" />
+          <Label for="circle">Circle</Label>
+        </fieldset>
+      </div>
 </template>
 `,
 };

components/content/docs/components/divider/DividerApi.vue

@@ -23,13 +23,6 @@ const dividerDataAPI = [
     propsDescription: "Available variants for the divider alignment.",
     default: "center",
   },
-  {
-    id: 4,
-    propsName: "children",
-    propsType: "ReactNode",
-    propsDescription: "Content to be placed within the divider, if any.",
-    default: "",
-  },
 ];
 </script>