@dxtmisha/wiki 0.39.1 → 0.39.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.39.1",
+  "version": "0.39.2",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [
@@ -25,6 +25,9 @@
   "bugs": {
     "url": "https://github.com/dxtmisha/dxt-ui/issues"
   },
+  "scripts": {
+    "publish": "npm publish --access public"
+  },
   "files": [
     "src",
     "README.md",

package/src/classes/WikiStorybook.ts

@@ -189,6 +189,15 @@ export class WikiStorybook {
     return this.getDescriptionItem()?.ai?.description
   }
 
+  /**
+   * Returns the AI hide of the component
+   *
+   * Возвращает AI скрыть компонента
+   */
+  getAiHide(): boolean {
+    return this.getDescriptionItem()?.ai?.hide ?? false
+  }
+
   /**
    * Returns a wiki item by its name
    *

package/src/classes/WikiStorybookItem.ts

@@ -26,6 +26,15 @@ export class WikiStorybookItem {
   ) {
   }
 
+  /**
+   * Checks if the item is hidden.
+   *
+   * Проверяет, скрыт ли элемент.
+   */
+  isHide(): boolean {
+    return this.item.hide === true
+  }
+
   /**
    * Checks if the item is a demo item.
    *
@@ -133,16 +142,24 @@ export class WikiStorybookItem {
    *
    * Возвращает свойство demo, если элемент является демонстрационным.
    */
-  private getDemo(): { isDemo?: boolean, demo?: any, demoOptions?: Record<string, any> } {
+  private getDemo(): {
+    isDemo?: boolean
+    demo?: any
+    demoOptions?: Record<string, any>
+    hide?: boolean
+  } {
     if (this.isDemo()) {
       return {
         isDemo: true,
         demo: this.getDemoValue(),
-        demoOptions: this.item.demoOptions
+        demoOptions: this.item.demoOptions,
+        hide: this.item.hide
       }
     }
 
-    return {}
+    return {
+      hide: this.item.hide
+    }
   }
 
   /**

package/src/classes/WikiStorybookProp.ts

@@ -18,6 +18,15 @@ export class WikiStorybookProp {
   ) {
   }
 
+  /**
+   * Checks if the item is hidden.
+   *
+   * Проверяет, скрыт ли элемент.
+   */
+  isHide(): boolean {
+    return this.item.hide === true
+  }
+
   /**
    * Checks if the item is a demo item.
    *

package/src/library.ts

@@ -6,3 +6,4 @@ export * from './classes/WikiStorybookProp'
 
 // Types
 export * from './types/storybookTypes'
+export * from './types/wikiTypes'

package/src/media/descriptions/wikiDescriptions.ts

@@ -10,13 +10,19 @@ import { wikiDescriptionsBars } from './wikiDescriptionsBars'
 import { wikiDescriptionsBlock } from './wikiDescriptionsBlock'
 import { wikiDescriptionsButton } from './wikiDescriptionsButton'
 import { wikiDescriptionsCell } from './wikiDescriptionsCell'
+import { wikiDescriptionsCheckbox } from './wikiDescriptionsCheckbox'
 import { wikiDescriptionsChip } from './wikiDescriptionsChip'
 import { wikiDescriptionsChipGroup } from './wikiDescriptionsChipGroup'
 import { wikiDescriptionsDialog } from './wikiDescriptionsDialog'
+import { wikiDescriptionsDummy } from './wikiDescriptionsDummy'
 import { wikiDescriptionsField } from './wikiDescriptionsField'
 import { wikiDescriptionsFieldCounter } from './wikiDescriptionsFieldCounter'
 import { wikiDescriptionsFieldLabel } from './wikiDescriptionsFieldLabel'
 import { wikiDescriptionsFieldMessage } from './wikiDescriptionsFieldMessage'
+import { wikiDescriptionsGrid } from './wikiDescriptionsGrid'
+import { wikiDescriptionsGridItem } from './wikiDescriptionsGridItem'
+import { wikiDescriptionsGroup } from './wikiDescriptionsGroup'
+import { wikiDescriptionsHorizontalScroll } from './wikiDescriptionsHorizontalScroll'
 import { wikiDescriptionsIcon } from './wikiDescriptionsIcon'
 import { wikiDescriptionsImage } from './wikiDescriptionsImage'
 import { wikiDescriptionsInput } from './wikiDescriptionsInput'
@@ -27,6 +33,7 @@ import { wikiDescriptionsListMenu } from './wikiDescriptionsListMenu'
 import { wikiDescriptionsMask } from './wikiDescriptionsMask'
 import { wikiDescriptionsMenu } from './wikiDescriptionsMenu'
 import { wikiDescriptionsModal } from './wikiDescriptionsModal'
+import { wikiDescriptionsMotionAxis } from './wikiDescriptionsMotionAxis'
 import { wikiDescriptionsMotionTransform } from './wikiDescriptionsMotionTransform'
 import { wikiDescriptionsPage } from './wikiDescriptionsPage'
 import { wikiDescriptionsProgress } from './wikiDescriptionsProgress'
@@ -36,6 +43,12 @@ import { wikiDescriptionsSection } from './wikiDescriptionsSection'
 import { wikiDescriptionsSelect } from './wikiDescriptionsSelect'
 import { wikiDescriptionsSelectValue } from './wikiDescriptionsSelectValue'
 import { wikiDescriptionsSkeleton } from './wikiDescriptionsSkeleton'
+import { wikiDescriptionsSnackbar } from './wikiDescriptionsSnackbar'
+import { wikiDescriptionsSnackbarItem } from './wikiDescriptionsSnackbarItem'
+import { wikiDescriptionsTabItem } from './wikiDescriptionsTabItem'
+import { wikiDescriptionsTabs } from './wikiDescriptionsTabs'
+import { wikiDescriptionsTabsNavigation } from './wikiDescriptionsTabsNavigation'
+import { wikiDescriptionsTextarea } from './wikiDescriptionsTextarea'
 import { wikiDescriptionsTextareaAutosize } from './wikiDescriptionsTextareaAutosize'
 import { wikiDescriptionsTooltip } from './wikiDescriptionsTooltip'
 import { wikiDescriptionsWindow } from './wikiDescriptionsWindow'
@@ -51,13 +64,19 @@ export const wikiDescriptions: StorybookComponentsDescription = [
   wikiDescriptionsBlock,
   wikiDescriptionsButton,
   wikiDescriptionsCell,
+  wikiDescriptionsCheckbox,
   wikiDescriptionsChip,
   wikiDescriptionsChipGroup,
   wikiDescriptionsDialog,
+  wikiDescriptionsDummy,
   wikiDescriptionsField,
   wikiDescriptionsFieldCounter,
   wikiDescriptionsFieldLabel,
   wikiDescriptionsFieldMessage,
+  wikiDescriptionsGrid,
+  wikiDescriptionsGridItem,
+  wikiDescriptionsGroup,
+  wikiDescriptionsHorizontalScroll,
   wikiDescriptionsIcon,
   wikiDescriptionsInput,
   wikiDescriptionsImage,
@@ -68,6 +87,7 @@ export const wikiDescriptions: StorybookComponentsDescription = [
   wikiDescriptionsMask,
   wikiDescriptionsMenu,
   wikiDescriptionsModal,
+  wikiDescriptionsMotionAxis,
   wikiDescriptionsMotionTransform,
   wikiDescriptionsPage,
   wikiDescriptionsProgress,
@@ -77,6 +97,12 @@ export const wikiDescriptions: StorybookComponentsDescription = [
   wikiDescriptionsSelect,
   wikiDescriptionsSelectValue,
   wikiDescriptionsSkeleton,
+  wikiDescriptionsSnackbar,
+  wikiDescriptionsSnackbarItem,
+  wikiDescriptionsTabItem,
+  wikiDescriptionsTabs,
+  wikiDescriptionsTabsNavigation,
+  wikiDescriptionsTextarea,
   wikiDescriptionsTextareaAutosize,
   wikiDescriptionsTooltip,
   wikiDescriptionsWindow

package/src/media/descriptions/wikiDescriptionsAccordion.ts

@@ -96,18 +96,22 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <div class="wiki-storybook-item--padding">
-          <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = !open">
+              Toggle ({{ open }})
+            </button>
+          </div>
+          <DesignComponent v-model:open="open" label="Settings" description="Click to expand" icon="settings">
+            <template #default>
+              <div class="wiki-storybook-item--padding">
+                <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
+                <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the accordion's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
+                <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the accordion, such as in complex forms or coordinated UI interactions.</p>
+              </div>
+            </template>
+          </DesignComponent>
         </div>
-        <DesignComponent v-model:open="open" label="Settings" description="Click to expand" icon="settings">
-          <template #default>
-            <div class="wiki-storybook-item--padding">
-              <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
-              <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the accordion's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
-              <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the accordion, such as in complex forms or coordinated UI interactions.</p>
-            </div>
-          </template>
-        </DesignComponent>
       `
     },
     {
@@ -122,7 +126,6 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
           <template #description>Custom description slot</template>
           <template #caption>Custom caption slot</template>
           <template #trailing>Trailing slot</template>
-          <template #body>Body slot content</template>
           <template #default>
               <p>Custom default slot content (main accordion body)</p>
           </template>
@@ -166,39 +169,9 @@ export const wikiDescriptionsAccordion: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Accordion is a vertically stacking interactive component that allows users to reveal or hide content sections.
-It consists of a header (trigger) and a body (content) that expands/collapses with a smooth animation.
-
-**Key Features:**
-1. **Header (Trigger):**
-   - Uses the \`Cell\` component structure.
-   - Supports \`label\` (title), \`description\` (subtitle), and \`icon\` (leading icon).
-   - Includes a rotating arrow indicator (\`iconArrowDown\`) to show state.
-
-2. **Animation:**
-   - Uses \`MotionTransform\` for smooth height transitions.
-   - Content is unmounted or hidden when collapsed (depending on configuration).
-
-3. **Interaction:**
-   - Toggles on click or keyboard interaction (Enter/Space).
-   - Controlled via \`v-model:open\`.
-
-**Usage Examples:**
-
-- **Basic:**
-  \`<Accordion label="Settings">
-     <p>Settings content...</p>
-   </Accordion>\`
-
-- **With Description and Icon:**
-  \`<Accordion label="Profile" description="Manage your account" icon="person">
-     <ProfileForm />
-   </Accordion>\`
-
-- **Controlled:**
-  \`<Accordion v-model:open="isOpen" label="Controlled">
-     Content
-   </Accordion>\`
+Collapsible container for progressive disclosure. Toggles content visibility to manage space and cognitive load. Use for FAQs, grouped settings, hiding secondary info, or compact dashboards.
+Header is based on a Cell component and supports label, description, and icon. Features an auto-rotating arrow indicator and smooth height transitions via MotionTransform.
+Built-in ARIA support and keyboard navigation (Space/Enter). Controlled primarily via v-model:open. Customizable with divider and header attributes through cellAttrs.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsActionSheet.ts

@@ -76,67 +76,15 @@ export const wikiDescriptionsActionSheet: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
-
-        <DesignComponent v-model:open="open">
-          <div class="wiki-storybook-item--padding">Your content here</div>
-        </DesignComponent>
-      `
-    },
-    {
-      id: 'ActionSheetTouchClose',
-      name: {
-        en: 'Touch gesture to close',
-        ru: 'Закрытие жестом'
-      },
-      setup: `
-      return {
-        openWithTouch: ref(false),
-        openWithoutTouch: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex">
-          <button class="wiki-storybook-button" @click="openWithTouch = true">
-            With Touch Close ({{ openWithTouch }})
-          </button>
-          <button class="wiki-storybook-button" @click="openWithoutTouch = true">
-            Without Touch Close ({{ openWithoutTouch }})
-          </button>
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
+          </div>
+
+          <DesignComponent v-model:open="open">
+            <div class="wiki-storybook-item--padding">Your content here</div>
+          </DesignComponent>
         </div>
-
-        <DesignComponent v-model:open="openWithTouch" :touchClose="true">
-          <template #title>
-            Swipe Down to Close
-          </template>
-          <template #default>
-            <div class="wiki-storybook-item--padding">
-              <div class="wiki-storybook-info">
-                <strong>Touch Close: Enabled</strong>
-                <p>This action sheet can be closed by swiping down on the title area. Notice the tab indicator at the top that signals the drag interaction.</p>
-                <p>Try swiping down on the header to close this panel. This follows iOS and Material Design patterns for mobile interfaces.</p>
-              </div>
-            </div>
-          </template>
-        </DesignComponent>
-
-        <DesignComponent v-model:open="openWithoutTouch" :touchClose="false">
-          <template #title>
-            No Swipe Gesture
-          </template>
-          <template #default>
-            <div class="wiki-storybook-item--padding">
-              <div class="wiki-storybook-info">
-                <strong>Touch Close: Disabled</strong>
-                <p>This action sheet cannot be closed by swiping down. The tab indicator is not displayed, and touch gestures are disabled.</p>
-                <p>You must use the backdrop click or close button to dismiss this panel. This is useful when you want to prevent accidental dismissal.</p>
-              </div>
-            </div>
-          </template>
-          <template #footer="{classesWindow}">
-            <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Close</button>
-          </template>
-        </DesignComponent>
       `
     },
     {
@@ -151,35 +99,9 @@ export const wikiDescriptionsActionSheet: StorybookComponentsDescriptionItem = {
             <button class="wiki-storybook-button" v-bind="binds">Open Action Sheet with All Slots</button>
           </template>
 
-          <template #title>
-            Action Sheet Title Slot
-          </template>
-
-          <template #default>
-            <div class="wiki-storybook-item--padding">
-              <h4>Default Slot Content</h4>
-              <p>This is the main content area of the action sheet. You can place any content here including action lists, forms, or other components.</p>
-
-              <div class="wiki-storybook-info">
-                <strong>Available slots:</strong>
-                <ul>
-                  <li><code>#control</code> - trigger button or element</li>
-                  <li><code>#title</code> - action sheet header/title area</li>
-                  <li><code>#default</code> - main content area</li>
-                  <li><code>#footer</code> - footer with actions or cancel button</li>
-                </ul>
-              </div>
-
-              <p>Each slot receives control props that allow you to interact with the action sheet programmatically, such as closing it or accessing window classes. The component slides up from the bottom with touch gesture support.</p>
-            </div>
-          </template>
-
-          <template #footer="{classesWindow}">
-            <div class="wiki-storybook-flex wiki-storybook-item--padding">
-              <button :class="classesWindow.close" class="wiki-storybook-button wiki-storybook-button--text">Cancel</button>
-              <button class="wiki-storybook-button">Confirm</button>
-            </div>
-          </template>
+          <template #title>Title slot</template>
+          <template #default>Default slot</template>
+          <template #footer>Footer slot</template>
         </DesignComponent>
       `
     }
@@ -187,9 +109,7 @@ export const wikiDescriptionsActionSheet: StorybookComponentsDescriptionItem = {
   documentation: {
     body: `
 <StorybookDescriptions componentName={'ActionSheet'} type={'actionSheet'}/>
-
 <StorybookDescriptions componentName={'ActionSheet'} type={'touchClose'}/>
-<Canvas of={Component.ActionSheetTouchClose}/>
 
 <StorybookDescriptions componentName={'Window'} type={'v-model'}/>
 <Canvas of={Component.ActionSheetVModel}/>
@@ -220,45 +140,9 @@ export const wikiDescriptionsActionSheet: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-ActionSheet is a mobile-optimized modal component that slides up from the bottom of the screen (Bottom Sheet).
-It is designed to present a set of actions, choices, or secondary content, following standard mobile interface patterns (iOS/Material).
-
-**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
-
-**Key Features:**
-1. **Positioning & Animation:**
-   - Anchored to the bottom of the viewport.
-   - Slides up with an animation when opened.
-   - Renders a backdrop (overlay) to block background interactions.
-
-2. **Mobile Interactions:**
-   - **Touch Close:** Supports swiping down on the header to close the sheet (controlled by the \`touchClose\` prop).
-   - **Backdrop:** Clicking the overlay closes the sheet.
-   - **Scroll:** Automatically handles internal scrolling if content exceeds height.
-
-3. **Slots Structure:**
-   - \`#control\` - The trigger element (e.g., a button). Receives \`binds\` to toggle visibility.
-   - \`#title\` - The header area. Often contains the title and the drag handle (indicator).
-   - \`#default\` - The main content area.
-   - \`#footer\` - The bottom area, typically used for a "Cancel" button or primary actions.
-
-**Usage Examples:**
-
-- **With Trigger:**
-  \`<ActionSheet>
-     <template #control="{ binds }">
-       <button v-bind="binds">Open Menu</button>
-     </template>
-     <template #title>Select Option</template>
-     <template #default>
-       <p>List of options...</p>
-     </template>
-   </ActionSheet>\`
-
-- **Programmatic Control:**
-  \`<ActionSheet v-model:open="isOpen" touch-close>
-     <template #default>Content</template>
-   </ActionSheet>\`
+Mobile-optimized modal component (Bottom Sheet) that slides up from the bottom for actions, choices, or secondary content. Follows standard mobile interface patterns (iOS/Material).
+Features touch-gestures (swipe-down to close), backdrop dismissal, and keyboard accessibility. Includes primary/secondary action lists and automatic height adjustment based on content.
+Highly flexible with slots (#control, #title, #default, #footer) and controlled primarily via v-model:open. Use for mobile-focused menus, sharing options, or contextual actions.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsActions.ts

@@ -34,116 +34,20 @@ export const wikiDescriptionsActions: StorybookComponentsDescriptionItem = {
   import: [],
   stories: [
     {
-      id: 'ActionsBasic',
+      id: 'ActionsSlots',
       name: {
-        en: 'Basic',
-        ru: 'Базовые'
+        en: 'Slots usage',
+        ru: 'Использование слотов'
       },
       template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'ActionsAlignment',
-      name: {
-        en: 'Alignment',
-        ru: 'Выравнивание'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            align="left"
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-          <DesignComponent
-            align="center"
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-          <DesignComponent
-            align="right"
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-          <DesignComponent
-            align="block"
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'ActionsPrimarySecondary',
-      name: {
-        en: 'Primary & Secondary Groups',
-        ru: 'Основная и вторичная группы'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Save', primary: true }
-            ]"
-            :list-secondary="[
-              { label: 'Delete', text: true }
-            ]"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'ActionsFlexible',
-      name: {
-        en: 'Flexible Layout',
-        ru: 'Гибкая раскладка'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            flexible="adaptive"
-            :list="[
-              { label: 'Cancel' },
-              { label: 'Apply' },
-              { label: 'Save', primary: true }
-            ]"
-          />
-        </div>
-      `
-    },
-    {
-      id: 'ActionsCustomButtons',
-      name: {
-        en: 'Custom Button Styles',
-        ru: 'Пользовательские стили кнопок'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent
-            :list="[
-              { label: 'Cancel', outlined: true },
-              { label: 'Save', primary: true }
-            ]"
-            :button-attrs="{ size: 'large' }"
-          />
-        </div>
+        <DesignComponent>
+          <template #secondary>
+            Secondary Slot
+          </template>
+          <template #default>
+            Default Slot
+          </template>
+        </DesignComponent>
       `
     }
   ],
@@ -154,36 +58,16 @@ export const wikiDescriptionsActions: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Actions'} type={'flexible'}/>
     `,
     slots: `
+<Canvas of={Component.ActionsSlots}/>
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'secondary'}/>
     `
   },
   ai: {
     description: `
-Actions is a layout component for organizing groups of buttons, typically used in dialog footers, card actions, or form controls.
-It manages spacing, alignment, and the separation between primary and secondary action groups.
-
-**Key Features:**
-1. **Groups:**
-   - \`list\`: Array of props for the main group of buttons (usually right-aligned or primary).
-   - \`listSecondary\`: Array of props for the secondary group (usually left-aligned).
-
-2. **Alignment (\`align\`):**
-   - \`left\`: Aligns all buttons to the left.
-   - \`center\`: Centers the buttons.
-   - \`right\`: Aligns all buttons to the right (default for dialogs).
-   - \`block\`: Stretches buttons to fill the width.
-
-3. **Button Configuration:**
-   - Items in \`list\` and \`listSecondary\` are passed directly to the \`Button\` component.
-   - \`buttonAttrs\`: Common props applied to all buttons in the main list.
-   - \`buttonSecondaryAttrs\`: Common props applied to all buttons in the secondary list.
-
-**Usage Examples:**
-
-- **Dialog Footer:** \`<Actions align="right" :list="[{ label: 'Cancel' }, { label: 'Ok', primary: true }]" />\`
-- **Split Actions:** \`<Actions :list="[{ label: 'Save' }]" :listSecondary="[{ label: 'Delete', text: true }]" />\` (Save on right, Delete on left)
-- **Full Width:** \`<Actions align="block" :list="[{ label: 'Login', primary: true }]" />\`
-      `
+Layout container for action button groups, typically used in dialog footers, cards, or forms. Manages spacing, alignment, and separation between primary (main) and secondary action sets.
+Supports multiple alignments (left, center, right, block) and takes arrays of button props (list, listSecondary) to automatically render Button components.
+Features both array-based and slot-based rendering for maximum flexibility. Use for standardizing button layouts and ensuring consistent spacing.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsAnchor.ts

@@ -40,39 +40,10 @@ export const wikiDescriptionsAnchor: StorybookComponentsDescriptionItem = {
 `
   },
   ai: {
-    render: `
-<div :class="classDemo.item">
-  <Anchor href="#" v-bind="args"/>
-</div>
-    `,
     description: `
-Anchor is a fundamental navigation component used to create hyperlinks and anchor points.
-It wraps the standard HTML \`<a>\` tag functionality with additional utilities for smooth scrolling and clipboard interactions.
-
-**Key Features:**
-1. **Navigation:**
-   - Handles standard navigation via \`href\`.
-   - Can be used for both internal (router) and external links.
-
-2. **Smooth Scrolling:**
-   - The \`scroll\` prop enables smooth scrolling animation when navigating to an element ID (e.g., \`href="#section"\`).
-
-3. **Clipboard Interaction:**
-   - The \`isCopy\` prop turns the component into a trigger that copies the link or value to the clipboard.
-
-4. **Slots:**
-   - \`#default\`: The content of the link (text, icons, or other elements).
-
-**Usage Examples:**
-
-- **Basic Link:**
-  \`<Anchor href="/about">About Us</Anchor>\`
-
-- **Scroll to Anchor:**
-  \`<Anchor href="#contact" scroll>Contact</Anchor>\`
-
-- **Copy Link:**
-  \`<Anchor href="https://example.com" is-copy>Copy URL</Anchor>\`
+Navigation component for creating hyperlinks, internal page anchors, and interactive links. Wraps the native <a> tag with additional support for smooth scrolling and clipboard operations.
+Features automated scroll-to-id behavior with custom offsets and a built-in copy-to-clipboard function (isCopy). Supports icon integration for different link types and success feedback.
+Controlled primarily through href or name props. Use for table of contents, permalinks, external resource links, or quick-copy action buttons for IDs and URLs.
     `
   }
 }