chore: doc update

README.md

@@ -3,14 +3,12 @@
 A animation library designed for Vue 3, Powered by [Motion](https://www.framer.com/motion/).
 
 ## Features
-
 - ✨ Declarative animation API for intuitive control
 - 👋 Gesture-driven animations for interactive experiences
 - ⚙ Motion values for dynamic animations
 - 🔲 layout animations and transitions
 - 🚪 Polished enter/exit animations
 - 📜 Smooth scroll-based animations and effects
-- Layout animations and transitions
 
 ## 🏎️ Quick start
 Install `motion-v`:

docs/components/demo/layout-group/ToggleContent.vue

@@ -13,14 +13,14 @@ function handleClick() {
 
 <template>
   <Motion
-    class="bg-secondary p-4  cursor-pointer hover:bg-primary/20 transition-colors"
+    class="bg-secondary p-4  cursor-pointer  transition-colors"
     :layout="true"
     :initial="{ borderRadius: '8px' }"
     @click="handleClick"
   >
     <Motion
       as="header"
-      class="text-lg font-semibold"
+      class="text-lg  text-primary font-semibold"
       :layout="true"
       :data-a="isOpen"
     >
@@ -29,7 +29,7 @@ function handleClick() {
     <Motion
       v-if="isOpen"
       :layout="true"
-      class="mt-4 text-primary-foreground"
+      class="mt-4 text-secondary-foreground"
       :initial="{ opacity: 0 }"
       :animate="{ opacity: 1 }"
       :transition="{ delay: 0.2 }"

docs/components/demo/shared-layout/index.vue

@@ -8,25 +8,26 @@ const selectedTab = ref(tabs[0])
 
 <template>
   <div class="flex justify-center items-center">
-    <div class="window">
-      <nav>
-        <ul>
+    <div class="w-[480px] h-[360px] max-w-[320px] rounded-[10px] bg-background overflow-hidden shadow-[0_1px_1px_rgba(0,0,0,0.075),0_2px_2px_rgba(0,0,0,0.075),0_4px_4px_rgba(0,0,0,0.075),0_8px_8px_rgba(0,0,0,0.075),0_16px_16px_rgba(0,0,0,0.075)] flex flex-col">
+      <nav class="bg-muted p-[5px_5px_0] rounded-[10px] rounded-b-none border-b border-[#eee] h-11">
+        <ul class="flex w-full">
           <li
             v-for="item in tabs"
             :key="item.label"
-            :class="{ selected: item === selectedTab }"
+            :class="{ 'bg-primary': item === selectedTab }"
+            class="rounded-[5px] rounded-b-none w-full p-[10px_15px] relative  cursor-pointer h-6 flex justify-between items-center flex-1 min-w-0 relative select-none font-['Poppins'] font-medium text-sm"
             @click="selectedTab = item"
           >
             {{ item.icon }} {{ item.label }}
             <Motion
               v-if="item.label === selectedTab.label"
-              class="underline"
+              class="absolute bottom-[-10px] left-0 right-0 h-[1px] bg-red-500"
               layout-id="underline"
             />
           </li>
         </ul>
       </nav>
-      <main>
+      <main class="flex justify-center items-center text-[128px] flex-grow select-none">
         <AnimatePresence mode="wait">
           <Motion
             :key="selectedTab ? selectedTab.label : 'empty'"
@@ -42,134 +43,3 @@ const selectedTab = ref(tabs[0])
     </div>
   </div>
 </template>
-
-<style scoped>
-.window {
-  width: 480px;
-  height: 360px;
-  max-width: 320px;
-  border-radius: 10px;
-  background: white;
-  overflow: hidden;
-  box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
-    0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
-    0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
-  display: flex;
-  flex-direction: column;
-}
-
-nav {
-  background: #fdfdfd;
-  padding: 5px 5px 0;
-  border-radius: 10px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: 1px solid #eeeeee;
-  height: 44px;
-}
-
-.tabs {
-  flex-grow: 1;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-end;
-  flex-wrap: nowrap;
-  width: 100%;
-}
-
-main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 128px;
-  flex-grow: 1;
-  user-select: none;
-}
-
-ul,
-li {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-family: "Poppins", sans-serif;
-  font-weight: 500;
-  font-size: 14px;
-}
-
-ul {
-  display: flex;
-  width: 100%;
-}
-
-li {
-  border-radius: 5px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  width: 100%;
-  padding: 10px 15px;
-  position: relative;
-  background: white;
-  cursor: pointer;
-  height: 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  position: relative;
-  user-select: none;
-}
-
-.underline {
-  position: absolute;
-  bottom: -10px;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: red;
-}
-
-li.selected {
-  background: #eee;
-}
-
-li button {
-  width: 20px;
-  height: 20px;
-  border: 0;
-  background: #fff;
-  border-radius: 3px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  stroke: #000;
-  margin-left: 10px;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 300px;
-  background: #fff;
-}
-
-.add-item {
-  width: 30px;
-  height: 30px;
-  background: #eee;
-  border-radius: 50%;
-  border: 0;
-  cursor: pointer;
-  align-self: center;
-}
-
-.add-item:disabled {
-  opacity: 0.4;
-  cursor: default;
-  pointer-events: none;
-}
-</style>

docs/content/2.components/4.motion-config.md

@@ -0,0 +1,34 @@
+---
+title: MotionConfig
+navigation.icon: lucide:settings
+---
+
+`MotionConfig` Component is used to configure child `Motion` components.
+
+## Props
+
+### `transition`
+
+define the default transition for all child `Motion` components.
+
+### `reduceMotion`
+
+default value is `never`.
+
+`reduceMotion` is used to control the behavior of motion when the user has enabled reduced motion.
+
+- `never`: Don't reduce motion.
+- `always`: Always reduce motion.
+- `user`: Reduce motion based on the user's system setting.
+
+when reduced motion is enabled, transform and layout animations will be disabled.
+other animations will persist.
+
+### `none`
+
+If using a Content Security Policy with a nonce attribute, passing the same attribute through MotionConfig will allow any style blocks generated by Motion to adhere the the security policy.
+
+## Reference
+
+- [Motion-MotionConfig](https://motion.dev/docs/react-motion-config)
+- [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles)

docs/content/3.animation/layout.md

@@ -14,6 +14,13 @@ like [Motion React](https://motion.dev/docs/react-layout-animations), you can us
 
 <ComponentPreview name="shared-layout" />
 
+<iframe src="https://stackblitz.com/edit/vitejs-vite-e19yd3ez?ctl=1&embed=1&file=src%2FApp.vue&hideExplorer=1"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="motion-use-spring"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock"
+   ></iframe>
+
 ## Resources
 
 - [Motion React layout animations](https://motion.dev/docs/react-layout-animations)