Updated: Checkbox component, ThemeSwitcher Preview.

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

@@ -11,9 +11,9 @@ const CheckBoxApiData = [
   },
   {
     id: 3,
-    propsName: "checked",
-    propsType: "v-model",
-    propsDescription: "Checked state of the checkbox",
+    propsName: "default-checked",
+    propsType: "boolean",
+    propsDescription: "Default Checked state of the checkbox",
   },
 ];
 </script>

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

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import { ref } from "vue";
 import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPreview.vue";
 import { Checkbox, Label } from "~/src";
 import { defaultCheckboxCode } from "./checkboxCode";
-
-const statusOne = ref(true);
-const statusTwo = ref(false);
 </script>
 <template>
   <CodeHighlightWithPreview :code="defaultCheckboxCode">
@@ -15,17 +11,11 @@ const statusTwo = ref(false);
           Keep Design System License
         </p>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="single"
-            :checked="statusOne"
-            @update:checked="(value) => (statusOne = value)" />
+          <Checkbox id="single" default-checked />
           <Label for="single">Single License</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="team"
-            :checked="statusTwo"
-            @update:checked="(value) => (statusTwo = value)" />
+          <Checkbox id="team" />
           <Label for="team">Team License</Label>
         </fieldset>
       </div>

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

@@ -1,33 +1,24 @@
 const defaultCheckboxCode = {
   "CheckboxComponent.vue": `<script setup>
 import { Checkbox, Label } from 'keep-vue'
-import { ref } from 'vue'
-
-const statusOne = ref(true);
-const statusTwo = ref(false);
-console.log(statusOne.value, statusTwo.value)
 </script>
 
 <template>
-  <div class="space-y-3 p-3">
+  <div class="flex items-center justify-center">
+      <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"
-            :checked="statusOne"
-            @update:checked="(value) => (statusOne = value)" />
+          <Checkbox id="single" default-checked />
           <Label for="single">Single License</Label>
         </fieldset>
         <fieldset class="flex items-center gap-2">
-          <Checkbox
-            id="team"
-            :checked="statusTwo"
-            @update:checked="(value) => (statusTwo = value)" />
+          <Checkbox id="team" />
           <Label for="team">Team License</Label>
         </fieldset>
       </div>
+    </div>
 </template>`,
 };
 

components/content/docs/components/dropdown/CustomDropdown.vue

@@ -6,7 +6,6 @@ import {
   Button,
   Dropdown,
   DropdownAction,
-  DropdownArrow,
   DropdownContent,
   DropdownList,
 } from "~/src";
@@ -75,7 +74,6 @@ const dropdownData = [
               </div>
             </DropdownItem>
           </DropdownList>
-          <DropdownArrow />
         </DropdownContent>
       </Dropdown>
     </div>

components/content/docs/components/dropdown/DropdownWithoutArrowIcon.vue → components/content/docs/components/dropdown/DropdownWithArrowIcon.vue

@@ -4,23 +4,24 @@ import {
   Divider,
   Dropdown,
   DropdownAction,
+  DropdownArrow,
   DropdownContent,
   DropdownItem,
   DropdownList,
 } from "~/src";
-import { DropdownWithoutArrowIconCode } from "./dropdownCode";
+import { DropdownWithArrowIconCode } from "./dropdownCode";
 </script>
 
 <template>
   <CodeHighlightWithPreview
     class="bg-metal-50 dark:bg-[#0D1015]"
-    :code="DropdownWithoutArrowIconCode">
+    :code="DropdownWithArrowIconCode">
     <div class="flex items-center justify-center px-5 py-3">
       <Dropdown>
         <DropdownAction as-child>
           <Button>Open Dropdown</Button>
         </DropdownAction>
-        <DropdownContent>
+        <DropdownContent class="border-0">
           <DropdownList>
             <DropdownItem>Contacts</DropdownItem>
             <DropdownItem>Phone</DropdownItem>
@@ -32,6 +33,7 @@ import { DropdownWithoutArrowIconCode } from "./dropdownCode";
             <DropdownItem>Account</DropdownItem>
             <DropdownItem>Logout</DropdownItem>
           </DropdownList>
+          <DropdownArrow />
         </DropdownContent>
       </Dropdown>
     </div>

components/content/docs/components/dropdown/DropdownWithIcon.vue

@@ -3,7 +3,6 @@ import CodeHighlightWithPreview from "~/components/content/CodeHighlightWithPrev
 import {
   Dropdown,
   DropdownAction,
-  DropdownArrow,
   DropdownContent,
   DropdownItem,
   DropdownList,
@@ -53,7 +52,6 @@ import { DropdownWithIconCode } from "./dropdownCode";
               Logout
             </DropdownItem>
           </DropdownList>
-          <DropdownArrow />
         </DropdownContent>
       </Dropdown>
     </div>

components/content/docs/components/dropdown/dropdownCode.ts

@@ -72,7 +72,6 @@ const dropdownData = [
             </div>
           </DropdownItem>
         </DropdownList>
-        <DropdownArrow />
       </DropdownContent>
     </Dropdown>
 </template>`,
@@ -180,20 +179,20 @@ import {
             Logout
           </DropdownItem>
         </DropdownList>
-        <DropdownArrow />
       </DropdownContent>
     </Dropdown>
   </div>
 </template>`,
 };
 
-const DropdownWithoutArrowIconCode = {
+const DropdownWithArrowIconCode = {
   "DropdownComponent.vue": `<script setup>
 import {
   Button,
   Divider,
   Dropdown,
   DropdownAction,
+  DropdownArrow,
   DropdownContent,
   DropdownItem,
   DropdownList,
@@ -206,7 +205,7 @@ import {
       <DropdownAction as-child>
         <Button>Open Dropdown</Button>
       </DropdownAction>
-      <DropdownContent>
+       <DropdownContent class="border-0">
         <DropdownList>
           <DropdownItem>Contacts</DropdownItem>
           <DropdownItem>Phone</DropdownItem>
@@ -218,6 +217,7 @@ import {
           <DropdownItem>Account</DropdownItem>
           <DropdownItem>Logout</DropdownItem>
         </DropdownList>
+         <DropdownArrow />
       </DropdownContent>
     </Dropdown>
   </div>
@@ -227,6 +227,6 @@ import {
 export {
   CustomDropdownCode,
   DefaultDropdownCode,
+  DropdownWithArrowIconCode,
   DropdownWithIconCode,
-  DropdownWithoutArrowIconCode,
 };

components/content/docs/components/textarea/DefaultTextArea.vue

@@ -11,7 +11,6 @@ const picked = ref("");
     <div class="p-2">
       <Textarea
         v-model="picked"
-        class="rounded-2xl"
         placeholder="Write your message here."
         :rows="8" />
     </div>

components/content/docs/components/textarea/DisabledTextArea.vue

@@ -7,11 +7,7 @@ import { disabledTextareaCode } from "./textareaCode";
 <template>
   <CodeHighlightWithPreview :code="disabledTextareaCode">
     <div class="p-2">
-      <Textarea
-        disabled
-        placeholder="Write your message here"
-        :rows="8"
-        class="rounded-2xl" />
+      <Textarea disabled placeholder="Write your message here" :rows="8" />
     </div>
   </CodeHighlightWithPreview>
 </template>

components/content/docs/components/textarea/TextAreaWithForm.vue

@@ -35,8 +35,7 @@ const handleSubmit = () => {};
           id="m1"
           v-model="textAreaValue"
           placeholder="Write your message here"
-          :rows="8"
-          class="rounded-2xl" />
+          :rows="8" />
       </fieldset>
       <Button size="sm" color="secondary" type="submit" class="!mt-5 w-full">
         Send Message

components/content/docs/components/textarea/TextAreaWithHelperText.vue

@@ -14,8 +14,7 @@ const picked = ref("");
         id="message"
         v-model="picked"
         placeholder="Write your message here"
-        :rows="8"
-        class="rounded-2xl" />
+        :rows="8" />
       <p className="text-body-4 font-normal text-metal-300">
         Message must be a at least 100 words.
       </p>

components/content/docs/getting-started/dark-mode/DarkModeForNuxt.vue

@@ -8,7 +8,11 @@ import {
   NuxtModuleAddCode,
   nuxtThemeSwitcherCode,
 } from "./darkModeCodes";
-import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
+const colorMode = useColorMode();
+
+const toggleTheme = () => {
+  colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
+};
 </script>
 
 <template>
@@ -80,7 +84,23 @@ import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
         </p>
         <div class="!my-4">
           <CodeHighlightWithPreview :code="nuxtThemeSwitcherCode">
-            <ThemeSwitcherForDoc />
+            <div class="flex items-center justify-center">
+              <ClientOnly>
+                <Button
+                  class="rounded-lg bg-primary-25 p-2.5 hover:bg-primary-50 dark:bg-metal-600 dark:hover:bg-metal-700"
+                  @click="() => toggleTheme()">
+                  <PhosphorIconMoon
+                    v-if="colorMode.preference === 'dark'"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                  <PhosphorIconSunDim
+                    v-else
+                    color="black"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                </Button>
+              </ClientOnly>
+            </div>
           </CodeHighlightWithPreview>
         </div>
       </TimelineContent>

components/content/docs/getting-started/dark-mode/DarkModeForVue.vue

@@ -6,7 +6,12 @@ import {
   vueThemeSwitcherComponentCode,
   vueUseInstallForVue,
 } from "./darkModeCodes";
-import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
+
+const colorMode = useColorMode();
+
+const toggleTheme = () => {
+  colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
+};
 </script>
 
 <template>
@@ -44,7 +49,23 @@ import ThemeSwitcherForDoc from "./ThemeSwitcherForDoc.vue";
         </p>
         <div class="!my-4">
           <CodeHighlightWithPreview :code="vueThemeSwitcherComponentCode">
-            <ThemeSwitcherForDoc />
+            <div class="flex items-center justify-center">
+              <ClientOnly>
+                <Button
+                  class="rounded-lg bg-primary-25 p-2.5 hover:bg-primary-50 dark:bg-metal-600 dark:hover:bg-metal-700"
+                  @click="() => toggleTheme()">
+                  <PhosphorIconMoon
+                    v-if="colorMode.preference === 'dark'"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                  <PhosphorIconSunDim
+                    v-else
+                    color="black"
+                    :size="21"
+                    class="transition duration-300 ease-in-out" />
+                </Button>
+              </ClientOnly>
+            </div>
           </CodeHighlightWithPreview>
         </div>
       </TimelineContent>

content/docs/components/dropdown.md

@@ -21,10 +21,10 @@ Customize the dropdown according to your preferences.
 ::CustomDropdown
 ::
 
-## Dropdown Without Arrow
+## Dropdown With Arrow
 
 If you don't want the arrow while showing the dropdown remove the `<DropdownArrow />` while using the dropdown.
-::DropdownWithoutArrowIcon
+::DropdownWithArrowIcon
 ::
 
 ## Dropdown Api

content/docs/components/slider.md

@@ -5,6 +5,8 @@ description: "The slider component in the Keep Vue allows users to select a valu
 
 ## Default Slider
 
+To use the Slider, you must bind the slider's `ref` value to the `v-model`.
+
 ::DefaultSlider
 ::
 

src/components/Checkbox/Checkbox.vue

@@ -2,6 +2,8 @@
 import {
   CheckboxIndicator,
   CheckboxRoot,
+  useForwardPropsEmits,
+  type CheckboxRootEmits,
   type CheckboxRootProps,
 } from "radix-vue";
 import { computed } from "vue";
@@ -20,25 +22,21 @@ const props = withDefaults(
     class: "",
     iconClass: "",
     variant: "default",
-    checked: false,
   },
 );
 
-// Define emits
-const emit = defineEmits<{
-  "update:checked": [value: boolean];
-}>();
+const emits = defineEmits<CheckboxRootEmits>();
 
 const restProps = computed(() => {
-  const { class: _, iconClass, checked, variant, ...rest } = props;
+  const { class: _, iconClass, variant, ...rest } = props;
   return rest;
 });
+const forwarded = useForwardPropsEmits(restProps, emits);
 </script>
 
 <template>
   <CheckboxRoot
-    v-bind="restProps"
-    :checked="checked"
+    v-bind="forwarded"
     :class="
       cn(
         'peer relative h-4 w-4 shrink-0 border border-metal-200 ring-offset-primary-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-100 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary-500 data-[state=checked]:text-primary-500 dark:border-metal-100 dark:ring-offset-primary-500 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:text-primary-500',
@@ -52,8 +50,7 @@ const restProps = computed(() => {
           'rounded data-[state=checked]:before:rounded-sm',
         props.class,
       )
-    "
-    @update:checked="(value) => emit('update:checked', value)">
+    ">
     <!-- indicator -->
     <CheckboxIndicator
       v-if="props.variant === 'default'"