@sakaniui/react 0.8.8 → 0.8.9

package/dist/manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://www.sakaniui.com/manifest.schema.json",
-  "schemaVersion": 2,
+  "schemaVersion": 3,
   "name": "@sakaniui/react",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Machine-readable contract of the SakaniUI React library, generated from its TypeScript source.",
   "docs": "https://www.sakaniui.com",
   "guide": "https://www.sakaniui.com/llms-full.txt",
@@ -24,11 +24,12 @@
     "@sakaniui/react/icons": "Tabler icons: IconName and IconNameFilled, one module each (5184 outline, 1054 filled)."
   },
   "conventions": {
-    "version": "This manifest describes @sakaniui/react@0.8.8. Each component has `since`, the first release that contained it: if the project has an older version installed, a component or prop that is newer than that does not exist there.",
+    "version": "This manifest describes @sakaniui/react@0.8.9. Each component has `since`, the first release that contained it: if the project has an older version installed, a component or prop that is newer than that does not exist there.",
     "acceptsNativeProps": "Components forward native HTML attributes (className, style, aria-*, event handlers) to their root element unless a prop says otherwise; only the props that are specific to SakaniUI are listed here.",
     "accessibleName": "When `contract.requiresAccessibleName` is true, a required prop (aria-label, aria-labelledby or an alt text) is the only thing that names the control or image. Do not omit it.",
     "tokens": "Use only the token names listed under `tokens`. Colour tokens follow the theme (the `.dark` class flips them); do not hard-code colours.",
-    "icons": "Icon props take the component itself (IconSettings), not an element (<IconSettings />).",
+    "icons": "Icon props take the component itself (IconSettings), not an element (<IconSettings />). Only names in icon-index.json exist; search them (MCP: search_icons) instead of guessing.",
+    "examples": "Each component has `example`: its imports and the element with every required prop filled in, type-checked against this build. Start from it.",
     "literals": "Prop `values` keep their real type: a number is a number (columns: 2), a string is a string (\"md\")."
   },
   "tokens": {
@@ -318,7 +319,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Accordion } from '@sakaniui/react';\n\n<Accordion>Label</Accordion>"
     },
     {
       "name": "AccordionItem",
@@ -357,7 +359,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AccordionItem } from '@sakaniui/react';\n\n<AccordionItem title=\"Title\">Label</AccordionItem>"
     },
     {
       "name": "ActivityFeed",
@@ -393,7 +396,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ActivityFeed } from '@sakaniui/react';\n\n<ActivityFeed items={[{ actor: \"Actor\", description: \"Description\", timestamp: \"2 min ago\" }]} />"
     },
     {
       "name": "ActivityFeedHighlight",
@@ -406,7 +410,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ActivityFeedHighlight } from '@sakaniui/react';\n\n<ActivityFeedHighlight>Label</ActivityFeedHighlight>"
     },
     {
       "name": "Alert",
@@ -454,7 +459,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Alert } from '@sakaniui/react';\n\n<Alert />"
     },
     {
       "name": "Announcement",
@@ -512,7 +518,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Announcement } from '@sakaniui/react';\n\n<Announcement message=\"Message\" />"
     },
     {
       "name": "AreaChart",
@@ -574,7 +581,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AreaChart } from '@sakaniui/react';\n\n<AreaChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "Avatar",
@@ -630,7 +638,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Avatar } from '@sakaniui/react';\n\n<Avatar />"
     },
     {
       "name": "AvatarGroup",
@@ -677,7 +686,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AvatarGroup } from '@sakaniui/react';\n\n<AvatarGroup avatars={[{}]} />"
     },
     {
       "name": "AvatarUpload",
@@ -748,7 +758,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AvatarUpload } from '@sakaniui/react';\n\n<AvatarUpload />"
     },
     {
       "name": "Badge",
@@ -803,7 +814,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Badge } from '@sakaniui/react';\n\n<Badge>Label</Badge>"
     },
     {
       "name": "Balance",
@@ -857,7 +869,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Balance } from '@sakaniui/react';\n\n<Balance value=\"Value\" />"
     },
     {
       "name": "BarChart",
@@ -916,7 +929,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { BarChart } from '@sakaniui/react';\n\n<BarChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "BlogBlockquote",
@@ -948,7 +962,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogBlockquote } from '@sakaniui/react';\n\n<BlogBlockquote quote=\"Quote\" />"
     },
     {
       "name": "BlogFeatureText",
@@ -984,7 +999,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogFeatureText } from '@sakaniui/react';\n\n<BlogFeatureText text=\"Text\" />"
     },
     {
       "name": "BlogImage",
@@ -1032,7 +1048,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogImage } from '@sakaniui/react';\n\n<BlogImage src=\"/images/example.jpg\" />"
     },
     {
       "name": "BlogListingCard",
@@ -1104,7 +1121,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogListingCard } from '@sakaniui/react';\n\n<BlogListingCard image=\"/images/example.jpg\" category=\"Category\" readTime=\"5 min read\" title=\"Title\" excerpt=\"Excerpt\" author={{ name: \"Name\", date: \"Oct 21, 2026\" }} />"
     },
     {
       "name": "BlogListingFeaturedCard",
@@ -1180,7 +1198,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogListingFeaturedCard } from '@sakaniui/react';\n\n<BlogListingFeaturedCard image=\"/images/example.jpg\" title=\"Title\" excerpt=\"Excerpt\" author={{ name: \"Name\", date: \"Oct 21, 2026\" }} />"
     },
     {
       "name": "BoardCard",
@@ -1277,7 +1296,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { BoardCard } from '@sakaniui/react';\n\n<BoardCard title=\"Title\" />"
     },
     {
       "name": "BoardColumn",
@@ -1343,7 +1363,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { BoardColumn } from '@sakaniui/react';\n\n<BoardColumn title=\"Title\" />"
     },
     {
       "name": "Breadcrumb",
@@ -1379,7 +1400,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Breadcrumb } from '@sakaniui/react';\n\n<Breadcrumb items={[{ label: \"Label\" }]} />"
     },
     {
       "name": "Button",
@@ -1446,7 +1468,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Button } from '@sakaniui/react';\n\n<Button>Label</Button>"
     },
     {
       "name": "Calendar",
@@ -1524,7 +1547,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Calendar } from '@sakaniui/react';\n\n<Calendar />"
     },
     {
       "name": "Card",
@@ -1569,7 +1593,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Card } from '@sakaniui/react';\n\n<Card />"
     },
     {
       "name": "CardMetaItem",
@@ -1596,7 +1621,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { CardMetaItem } from '@sakaniui/react';\n\n<CardMetaItem icon=\"Icon\">Label</CardMetaItem>"
     },
     {
       "name": "CartItem",
@@ -1689,7 +1715,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CartItem } from '@sakaniui/react';\n\n<CartItem image=\"/images/example.jpg\" name=\"Name\" price={49} quantity={1} />"
     },
     {
       "name": "ChatComposer",
@@ -1757,7 +1784,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ChatComposer } from '@sakaniui/react';\n\n<ChatComposer />"
     },
     {
       "name": "Checkbox",
@@ -1787,7 +1815,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Checkbox } from '@sakaniui/react';\n\n<Checkbox />"
     },
     {
       "name": "CheckoutSteps",
@@ -1820,7 +1849,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CheckoutSteps } from '@sakaniui/react';\n\n<CheckoutSteps currentStep={1} />"
     },
     {
       "name": "CodeSnippet",
@@ -1876,7 +1906,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { CodeSnippet } from '@sakaniui/react';\n\n<CodeSnippet code=\"Code\" />"
     },
     {
       "name": "ColorSwatch",
@@ -1928,7 +1959,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ColorSwatch } from '@sakaniui/react';\n\n<ColorSwatch color=\"var(--color-accent-default)\" label=\"Label\" />"
     },
     {
       "name": "Combobox",
@@ -2017,7 +2049,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Combobox } from '@sakaniui/react';\n\n<Combobox options={[{ value: \"Value\", label: \"Label\" }]} />"
     },
     {
       "name": "ConversationItem",
@@ -2086,7 +2119,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ConversationItem } from '@sakaniui/react';\n\n<ConversationItem avatar=\"/images/example.jpg\" name=\"Name\" />"
     },
     {
       "name": "Divider",
@@ -2122,7 +2156,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Divider } from '@sakaniui/react';\n\n<Divider />"
     },
     {
       "name": "DonutChart",
@@ -2176,7 +2211,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { DonutChart } from '@sakaniui/react';\n\n<DonutChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "EmptyState",
@@ -2233,7 +2269,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { EmptyState } from '@sakaniui/react';\n\n<EmptyState />"
     },
     {
       "name": "Expenses",
@@ -2275,7 +2312,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Expenses } from '@sakaniui/react';\n\n<Expenses categories={[{ icon: \"Icon\", label: \"Label\", amount: 49 }]} />"
     },
     {
       "name": "FacebookIcon",
@@ -2295,7 +2333,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { FacebookIcon } from '@sakaniui/react';\n\n<FacebookIcon />"
     },
     {
       "name": "FeaturedIcon",
@@ -2344,7 +2383,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { FeaturedIcon } from '@sakaniui/react';\n\n<FeaturedIcon icon=\"Icon\" />"
     },
     {
       "name": "FileUpload",
@@ -2388,7 +2428,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { FileUpload } from '@sakaniui/react';\n\n<FileUpload />"
     },
     {
       "name": "FilterChip",
@@ -2430,7 +2471,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { FilterChip } from '@sakaniui/react';\n\n<FilterChip>Label</FilterChip>"
     },
     {
       "name": "FirstPageHeading",
@@ -2499,7 +2541,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { FirstPageHeading } from '@sakaniui/react';\n\n<FirstPageHeading title=\"Title\" />"
     },
     {
       "name": "FunnelChart",
@@ -2537,7 +2580,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { FunnelChart } from '@sakaniui/react';\n\n<FunnelChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "GithubIcon",
@@ -2557,7 +2601,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { GithubIcon } from '@sakaniui/react';\n\n<GithubIcon />"
     },
     {
       "name": "HeatmapChart",
@@ -2612,7 +2657,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { HeatmapChart } from '@sakaniui/react';\n\n<HeatmapChart data={[[1]]} />"
     },
     {
       "name": "HoverGroup",
@@ -2625,7 +2671,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.21"
+      "since": "0.3.21",
+      "example": "import { HoverGroup } from '@sakaniui/react';\n\n<HoverGroup />"
     },
     {
       "name": "IconButton",
@@ -2678,7 +2725,8 @@
         ],
         "requiresAccessibleName": true
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { IconButton } from '@sakaniui/react';\nimport { IconStar } from '@sakaniui/react/icons';\n\n<IconButton icon={IconStar} aria-label=\"Describe the action\" />"
     },
     {
       "name": "InlineHint",
@@ -2714,7 +2762,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { InlineHint } from '@sakaniui/react';\n\n<InlineHint message=\"Message\" />"
     },
     {
       "name": "Input",
@@ -2771,7 +2820,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Input } from '@sakaniui/react';\n\n<Input />"
     },
     {
       "name": "InstagramIcon",
@@ -2791,7 +2841,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { InstagramIcon } from '@sakaniui/react';\n\n<InstagramIcon />"
     },
     {
       "name": "JobListing",
@@ -2873,7 +2924,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { JobListing } from '@sakaniui/react';\n\n<JobListing title=\"Title\" description=\"Description\" department=\"Department\" employmentType=\"Employment type\" location=\"Location\" />"
     },
     {
       "name": "Kbd",
@@ -2892,7 +2944,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Kbd } from '@sakaniui/react';\n\n<Kbd>Label</Kbd>"
     },
     {
       "name": "Label",
@@ -2912,7 +2965,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Label } from '@sakaniui/react';\n\n<Label>Label</Label>"
     },
     {
       "name": "LineChart",
@@ -2999,7 +3053,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { LineChart } from '@sakaniui/react';\n\n<LineChart data={[{ name: \"Name\" }]} series={[\"Sery\"]} />"
     },
     {
       "name": "Link",
@@ -3019,7 +3074,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Link } from '@sakaniui/react';\n\n<Link>Label</Link>"
     },
     {
       "name": "LinkedinIcon",
@@ -3039,7 +3095,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { LinkedinIcon } from '@sakaniui/react';\n\n<LinkedinIcon />"
     },
     {
       "name": "LiquidBackdrop",
@@ -3074,7 +3131,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.4.0"
+      "since": "0.4.0",
+      "example": "import { LiquidBackdrop } from '@sakaniui/react';\n\n<LiquidBackdrop />"
     },
     {
       "name": "LiquidGlass",
@@ -3157,7 +3215,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.4.0"
+      "since": "0.4.0",
+      "example": "import { LiquidGlass } from '@sakaniui/react';\n\n<LiquidGlass />"
     },
     {
       "name": "List",
@@ -3194,7 +3253,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { List } from '@sakaniui/react';\n\n<List items={[\"Item\"]} />"
     },
     {
       "name": "ListItem",
@@ -3250,7 +3310,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ListItem } from '@sakaniui/react';\n\n<ListItem title=\"Title\" />"
     },
     {
       "name": "LocationDot",
@@ -3286,7 +3347,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { LocationDot } from '@sakaniui/react';\n\n<LocationDot location=\"Location\" />"
     },
     {
       "name": "Marquee",
@@ -3326,7 +3388,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { Marquee } from '@sakaniui/react';\n\n<Marquee items={[\"Item\"]} gap={1} />"
     },
     {
       "name": "Menu",
@@ -3358,7 +3421,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Menu } from '@sakaniui/react';\n\n<Menu>Label</Menu>"
     },
     {
       "name": "MenuDivider",
@@ -3371,7 +3435,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { MenuDivider } from '@sakaniui/react';\n\n<MenuDivider />"
     },
     {
       "name": "MenuItem",
@@ -3420,7 +3485,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { MenuItem } from '@sakaniui/react';\n\n<MenuItem>Label</MenuItem>"
     },
     {
       "name": "MessageBubble",
@@ -3512,7 +3578,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { MessageBubble } from '@sakaniui/react';\n\n<MessageBubble />"
     },
     {
       "name": "Metric",
@@ -3550,7 +3617,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { Metric } from '@sakaniui/react';\n\n<Metric value=\"Value\" label=\"Label\" />"
     },
     {
       "name": "MobileNavigationMenu",
@@ -3610,7 +3678,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { MobileNavigationMenu } from '@sakaniui/react';\n\n<MobileNavigationMenu label=\"Label\" links={[{ label: \"Label\" }]} />"
     },
     {
       "name": "Modal",
@@ -3737,7 +3806,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Modal } from '@sakaniui/react';\n\n<Modal open={true} onClose={() => {}} title=\"Title\" />"
     },
     {
       "name": "NotificationItem",
@@ -3809,7 +3879,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { NotificationItem } from '@sakaniui/react';\n\n<NotificationItem title=\"Title\" />"
     },
     {
       "name": "Pagination",
@@ -3856,7 +3927,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Pagination } from '@sakaniui/react';\n\n<Pagination total={49} page={1} onPageChange={() => {}} />"
     },
     {
       "name": "PieChart",
@@ -3923,7 +3995,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { PieChart } from '@sakaniui/react';\n\n<PieChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "PlaceholderLogo",
@@ -3965,7 +4038,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { PlaceholderLogo } from '@sakaniui/react';\n\n<PlaceholderLogo />"
     },
     {
       "name": "Popover",
@@ -4020,7 +4094,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Popover } from '@sakaniui/react';\n\n<Popover trigger=\"Trigger\" />"
     },
     {
       "name": "PriceDisplay",
@@ -4064,7 +4139,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { PriceDisplay } from '@sakaniui/react';\n\n<PriceDisplay price={49} />"
     },
     {
       "name": "ProductCard",
@@ -4172,7 +4248,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ProductCard } from '@sakaniui/react';\n\n<ProductCard image=\"/images/example.jpg\" name=\"Name\" price={49} />"
     },
     {
       "name": "ProductGallery",
@@ -4225,7 +4302,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ProductGallery } from '@sakaniui/react';\n\n<ProductGallery images={[{ src: \"/images/example.jpg\" }]} />"
     },
     {
       "name": "ProfileCard",
@@ -4279,7 +4357,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ProfileCard } from '@sakaniui/react';\n\n<ProfileCard name=\"Name\" role=\"Role\" />"
     },
     {
       "name": "Progress",
@@ -4322,7 +4401,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Progress } from '@sakaniui/react';\n\n<Progress />"
     },
     {
       "name": "ProgressItem",
@@ -4383,7 +4463,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ProgressItem } from '@sakaniui/react';\n\n<ProgressItem step={1} title=\"Title\" />"
     },
     {
       "name": "ProgressStat",
@@ -4423,7 +4504,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ProgressStat } from '@sakaniui/react';\n\n<ProgressStat label=\"Label\" value=\"Value\" progress={50} />"
     },
     {
       "name": "QuantitySelector",
@@ -4472,7 +4554,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { QuantitySelector } from '@sakaniui/react';\n\n<QuantitySelector quantity={1} />"
     },
     {
       "name": "RadarChart",
@@ -4536,7 +4619,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { RadarChart } from '@sakaniui/react';\n\n<RadarChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "RadialChart",
@@ -4600,7 +4684,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { RadialChart } from '@sakaniui/react';\n\n<RadialChart data={[{ label: \"Label\", value: 50 }]} />"
     },
     {
       "name": "Radio",
@@ -4624,7 +4709,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Radio } from '@sakaniui/react';\n\n<Radio />"
     },
     {
       "name": "RichSeparator",
@@ -4655,7 +4741,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { RichSeparator } from '@sakaniui/react';\n\n<RichSeparator />"
     },
     {
       "name": "RichTextHeading",
@@ -4684,7 +4771,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { RichTextHeading } from '@sakaniui/react';\n\n<RichTextHeading>Label</RichTextHeading>"
     },
     {
       "name": "RichTextParagraph",
@@ -4703,7 +4791,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { RichTextParagraph } from '@sakaniui/react';\n\n<RichTextParagraph>Label</RichTextParagraph>"
     },
     {
       "name": "SectionHeading",
@@ -4763,7 +4852,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { SectionHeading } from '@sakaniui/react';\n\n<SectionHeading title=\"Title\" />"
     },
     {
       "name": "SegmentedControl",
@@ -4810,7 +4900,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SegmentedControl } from '@sakaniui/react';\n\n<SegmentedControl options={[{ value: \"Value\", label: \"Label\" }]} />"
     },
     {
       "name": "Select",
@@ -4895,7 +4986,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Select } from '@sakaniui/react';\n\n<Select options={[{ label: \"Label\", value: \"Value\" }]} />"
     },
     {
       "name": "Sidebar",
@@ -4920,7 +5012,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Sidebar } from '@sakaniui/react';\n\n<Sidebar>Label</Sidebar>"
     },
     {
       "name": "SidebarDivider",
@@ -4933,7 +5026,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarDivider } from '@sakaniui/react';\n\n<SidebarDivider />"
     },
     {
       "name": "SidebarFooter",
@@ -4995,7 +5089,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarFooter } from '@sakaniui/react';\n\n<SidebarFooter />"
     },
     {
       "name": "SidebarGroupLabel",
@@ -5008,7 +5103,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarGroupLabel } from '@sakaniui/react';\n\n<SidebarGroupLabel>Label</SidebarGroupLabel>"
     },
     {
       "name": "SidebarHeader",
@@ -5067,7 +5163,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarHeader } from '@sakaniui/react';\n\n<SidebarHeader title=\"Title\" />"
     },
     {
       "name": "SidebarItem",
@@ -5148,7 +5245,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarItem } from '@sakaniui/react';\n\n<SidebarItem label=\"Label\" />"
     },
     {
       "name": "SidebarPromo",
@@ -5205,7 +5303,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarPromo } from '@sakaniui/react';\n\n<SidebarPromo title=\"Title\" />"
     },
     {
       "name": "SidebarSearch",
@@ -5255,7 +5354,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarSearch } from '@sakaniui/react';\n\n<SidebarSearch />"
     },
     {
       "name": "SidebarSubItem",
@@ -5296,7 +5396,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarSubItem } from '@sakaniui/react';\n\n<SidebarSubItem label=\"Label\" />"
     },
     {
       "name": "SizeSelector",
@@ -5341,7 +5442,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { SizeSelector } from '@sakaniui/react';\n\n<SizeSelector size=\"Size\" />"
     },
     {
       "name": "Skeleton",
@@ -5383,7 +5485,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Skeleton } from '@sakaniui/react';\n\n<Skeleton />"
     },
     {
       "name": "Slider",
@@ -5420,7 +5523,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Slider } from '@sakaniui/react';\n\n<Slider />"
     },
     {
       "name": "SpendingBalance",
@@ -5464,7 +5568,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SpendingBalance } from '@sakaniui/react';\n\n<SpendingBalance spent={1} limit={1} />"
     },
     {
       "name": "Spinner",
@@ -5501,7 +5606,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Spinner } from '@sakaniui/react';\n\n<Spinner />"
     },
     {
       "name": "StarRating",
@@ -5557,7 +5663,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { StarRating } from '@sakaniui/react';\n\n<StarRating rating={4} />"
     },
     {
       "name": "StatCard",
@@ -5657,7 +5764,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { StatCard } from '@sakaniui/react';\n\n<StatCard title=\"Title\" value=\"Value\" />"
     },
     {
       "name": "Stepper",
@@ -5701,7 +5809,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Stepper } from '@sakaniui/react';\n\n<Stepper steps={[{ label: \"Label\" }]} current={1} />"
     },
     {
       "name": "StepperStep",
@@ -5767,7 +5876,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { StepperStep } from '@sakaniui/react';\n\n<StepperStep index={0} state=\"completed\" label=\"Label\" />"
     },
     {
       "name": "StockMarket",
@@ -5839,7 +5949,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { StockMarket } from '@sakaniui/react';\n\n<StockMarket logo=\"/images/example.jpg\" symbol=\"Symbol\" name=\"Name\" price={49} change={{ amount: 49, percent: 50 }} />"
     },
     {
       "name": "StockStatus",
@@ -5878,7 +5989,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { StockStatus } from '@sakaniui/react';\n\n<StockStatus quantity={1} />"
     },
     {
       "name": "SubFeature",
@@ -5932,7 +6044,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { SubFeature } from '@sakaniui/react';\n\n<SubFeature icon=\"Icon\" title=\"Title\" description=\"Description\" />"
     },
     {
       "name": "Switch",
@@ -5969,7 +6082,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Switch } from '@sakaniui/react';\n\n<Switch />"
     },
     {
       "name": "Table",
@@ -6050,7 +6164,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Table } from '@sakaniui/react';\n\n<Table columns={[]} rows={[{}]} />"
     },
     {
       "name": "Tabs",
@@ -6107,7 +6222,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Tabs } from '@sakaniui/react';\n\n<Tabs items={[{ value: \"Value\", label: \"Label\" }]} />"
     },
     {
       "name": "Tags",
@@ -6139,7 +6255,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Tags } from '@sakaniui/react';\n\n<Tags tags={[\"Tag\"]} />"
     },
     {
       "name": "TeamCard",
@@ -6210,7 +6327,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { TeamCard } from '@sakaniui/react';\n\n<TeamCard image=\"/images/example.jpg\" name=\"Name\" role=\"Role\" location=\"Location\" />"
     },
     {
       "name": "Textarea",
@@ -6239,7 +6357,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Textarea } from '@sakaniui/react';\n\n<Textarea />"
     },
     {
       "name": "Ticker",
@@ -6277,7 +6396,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Ticker } from '@sakaniui/react';\n\n<Ticker items={[{ symbol: \"Symbol\", changePercent: 50 }]} />"
     },
     {
       "name": "Toast",
@@ -6323,7 +6443,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Toast } from '@sakaniui/react';\n\n<Toast />"
     },
     {
       "name": "Tooltip",
@@ -6378,7 +6499,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Tooltip } from '@sakaniui/react';\n\n<Tooltip title=\"Title\">Label</Tooltip>"
     },
     {
       "name": "TopBar",
@@ -6507,7 +6629,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { TopBar } from '@sakaniui/react';\n\n<TopBar />"
     },
     {
       "name": "TopBarMobile",
@@ -6570,7 +6693,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { TopBarMobile } from '@sakaniui/react';\n\n<TopBarMobile />"
     },
     {
       "name": "Transactions",
@@ -6613,7 +6737,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Transactions } from '@sakaniui/react';\n\n<Transactions transactions={[{ name: \"Name\", category: \"Category\", amount: 49, icon: \"Icon\" }]} />"
     },
     {
       "name": "WishlistButton",
@@ -6650,7 +6775,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { WishlistButton } from '@sakaniui/react';\n\n<WishlistButton />"
     },
     {
       "name": "XIcon",
@@ -6670,7 +6796,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { XIcon } from '@sakaniui/react';\n\n<XIcon />"
     },
     {
       "name": "AccountOverviewBlock",
@@ -6699,7 +6826,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AccountOverviewBlock } from '@sakaniui/react/blocks';\n\n<AccountOverviewBlock />"
     },
     {
       "name": "ActivityLogBlock",
@@ -6728,7 +6856,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ActivityLogBlock } from '@sakaniui/react/blocks';\n\n<ActivityLogBlock />"
     },
     {
       "name": "AddCardFormBlock",
@@ -6770,7 +6899,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { AddCardFormBlock } from '@sakaniui/react/blocks';\n\n<AddCardFormBlock />"
     },
     {
       "name": "AppHeaderBlock",
@@ -6813,7 +6943,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { AppHeaderBlock } from '@sakaniui/react/blocks';\n\n<AppHeaderBlock breadcrumbs={[{ label: \"Label\" }]} title=\"Title\" />"
     },
     {
       "name": "BillingAddressBlock",
@@ -6860,7 +6991,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BillingAddressBlock } from '@sakaniui/react/blocks';\n\n<BillingAddressBlock />"
     },
     {
       "name": "BillingHistoryBlock",
@@ -6892,7 +7024,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BillingHistoryBlock } from '@sakaniui/react/blocks';\n\n<BillingHistoryBlock />"
     },
     {
       "name": "BlogListingBlock",
@@ -6942,7 +7075,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { BlogListingBlock } from '@sakaniui/react/blocks';\n\n<BlogListingBlock title=\"Title\" featuredPost={{ image: \"/images/example.jpg\", title: \"Title\", excerpt: \"Excerpt\", author: { name: \"Name\", date: \"Oct 21, 2026\" } }} posts={[{ image: \"/images/example.jpg\", category: \"Category\", readTime: \"5 min read\", title: \"Title\", excerpt: \"Excerpt\", author: { name: \"Name\", date: \"Oct 21, 2026\" } }]} />"
     },
     {
       "name": "CareersBlock",
@@ -6986,7 +7120,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CareersBlock } from '@sakaniui/react/blocks';\n\n<CareersBlock title=\"Title\" jobs={[{ description: \"Description\", title: \"Title\", department: \"Department\", employmentType: \"Employment type\", location: \"Location\" }]} />"
     },
     {
       "name": "ChatInterfaceBlock",
@@ -7016,7 +7151,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ChatInterfaceBlock } from '@sakaniui/react/blocks';\n\n<ChatInterfaceBlock />"
     },
     {
       "name": "CheckoutFlowBlock",
@@ -7068,7 +7204,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CheckoutFlowBlock } from '@sakaniui/react/blocks';\n\n<CheckoutFlowBlock items={[{ image: \"/images/example.jpg\", name: \"Name\", price: 49, quantity: 1 }]} />"
     },
     {
       "name": "CRMDashboardBlock",
@@ -7093,7 +7230,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { CRMDashboardBlock } from '@sakaniui/react/blocks';\n\n<CRMDashboardBlock />"
     },
     {
       "name": "CtaBannerBlock",
@@ -7153,7 +7291,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CtaBannerBlock } from '@sakaniui/react/blocks';\n\n<CtaBannerBlock title=\"Title\" description=\"Description\" primaryAction={{ label: \"Label\" }} />"
     },
     {
       "name": "CurrentPlanBlock",
@@ -7262,7 +7401,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { CurrentPlanBlock } from '@sakaniui/react/blocks';\n\n<CurrentPlanBlock planName=\"Plan name\" price=\"Price\" />"
     },
     {
       "name": "DataTableBlock",
@@ -7301,7 +7441,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { DataTableBlock } from '@sakaniui/react/blocks';\n\n<DataTableBlock />"
     },
     {
       "name": "EmailVerificationBlock",
@@ -7351,7 +7492,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { EmailVerificationBlock } from '@sakaniui/react/blocks';\n\n<EmailVerificationBlock />"
     },
     {
       "name": "FaqBlock",
@@ -7399,7 +7541,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { FaqBlock } from '@sakaniui/react/blocks';\n\n<FaqBlock title=\"Title\" items={[{ question: \"Question\", answer: \"Answer\" }]} />"
     },
     {
       "name": "FeatureGridBlock",
@@ -7431,7 +7574,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { FeatureGridBlock } from '@sakaniui/react/blocks';\n\n<FeatureGridBlock features={[{ icon: \"Icon\", title: \"Title\", description: \"Description\" }]} />"
     },
     {
       "name": "FileUploadPanelBlock",
@@ -7461,7 +7605,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { FileUploadPanelBlock } from '@sakaniui/react/blocks';\n\n<FileUploadPanelBlock />"
     },
     {
       "name": "ForgotPasswordBlock",
@@ -7515,7 +7660,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ForgotPasswordBlock } from '@sakaniui/react/blocks';\n\n<ForgotPasswordBlock />"
     },
     {
       "name": "FormModalBlock",
@@ -7547,7 +7693,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { FormModalBlock } from '@sakaniui/react/blocks';\n\n<FormModalBlock open={true} onClose={() => {}} />"
     },
     {
       "name": "HeroBlock",
@@ -7636,7 +7783,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { HeroBlock } from '@sakaniui/react/blocks';\n\n<HeroBlock title=\"Title\" description=\"Description\" primaryAction={{ label: \"Label\" }} image=\"/images/example.jpg\" />"
     },
     {
       "name": "InlineCtaBlock",
@@ -7694,7 +7842,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { InlineCtaBlock } from '@sakaniui/react/blocks';\n\n<InlineCtaBlock title=\"Title\" description=\"Description\" actionLabel=\"Action label\" />"
     },
     {
       "name": "KanbanBoardBlock",
@@ -7731,7 +7880,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { KanbanBoardBlock } from '@sakaniui/react/blocks';\n\n<KanbanBoardBlock />"
     },
     {
       "name": "LiquidDashboardBlock",
@@ -7770,7 +7920,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.4.0"
+      "since": "0.4.0",
+      "example": "import { LiquidDashboardBlock } from '@sakaniui/react/blocks';\n\n<LiquidDashboardBlock backgroundImage=\"/images/example.jpg\" />"
     },
     {
       "name": "LoginBlock",
@@ -7829,7 +7980,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { LoginBlock } from '@sakaniui/react/blocks';\n\n<LoginBlock />"
     },
     {
       "name": "LogoCloudBlock",
@@ -7869,7 +8021,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { LogoCloudBlock } from '@sakaniui/react/blocks';\n\n<LogoCloudBlock />"
     },
     {
       "name": "MultistepModalBlock",
@@ -7908,7 +8061,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { MultistepModalBlock } from '@sakaniui/react/blocks';\n\n<MultistepModalBlock open={true} onClose={() => {}} />"
     },
     {
       "name": "NotificationPanelBlock",
@@ -7939,7 +8093,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { NotificationPanelBlock } from '@sakaniui/react/blocks';\n\n<NotificationPanelBlock items={[{ id: \"item-1\", title: \"Title\", timestamp: \"2 min ago\" }]} />"
     },
     {
       "name": "OnboardingProgressBlock",
@@ -7981,7 +8136,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { OnboardingProgressBlock } from '@sakaniui/react/blocks';\n\n<OnboardingProgressBlock items={[{ label: \"Label\", progress: 50 }]} />"
     },
     {
       "name": "OrderConfirmationBlock",
@@ -8040,7 +8196,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { OrderConfirmationBlock } from '@sakaniui/react/blocks';\n\n<OrderConfirmationBlock orderNumber=\"Order number\" items={[{ image: \"/images/example.jpg\", name: \"Name\", price: 49 }]} total={49} />"
     },
     {
       "name": "PaymentMethodBlock",
@@ -8082,7 +8239,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { PaymentMethodBlock } from '@sakaniui/react/blocks';\n\n<PaymentMethodBlock />"
     },
     {
       "name": "PricingTableBlock",
@@ -8126,7 +8284,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { PricingTableBlock } from '@sakaniui/react/blocks';\n\n<PricingTableBlock title=\"Title\" plans={[{ name: \"Name\", price: \"Price\", description: \"Description\", ctaLabel: \"Cta label\", features: [\"Feature\"] }]} />"
     },
     {
       "name": "ProductDetailBlock",
@@ -8242,7 +8401,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ProductDetailBlock } from '@sakaniui/react/blocks';\n\n<ProductDetailBlock name=\"Name\" images={[{ src: \"/images/example.jpg\" }]} rating={4} stockQuantity={1} price={49} description=\"Description\" />"
     },
     {
       "name": "ProductGridBlock",
@@ -8311,7 +8471,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ProductGridBlock } from '@sakaniui/react/blocks';\n\n<ProductGridBlock title=\"Title\" products={[{ image: \"/images/example.jpg\", name: \"Name\", price: 49 }]} />"
     },
     {
       "name": "ProfileSettingsBlock",
@@ -8352,7 +8513,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { ProfileSettingsBlock } from '@sakaniui/react/blocks';\n\n<ProfileSettingsBlock />"
     },
     {
       "name": "ResetPasswordBlock",
@@ -8400,7 +8562,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ResetPasswordBlock } from '@sakaniui/react/blocks';\n\n<ResetPasswordBlock />"
     },
     {
       "name": "SectionFooterBlock",
@@ -8440,7 +8603,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { SectionFooterBlock } from '@sakaniui/react/blocks';\n\n<SectionFooterBlock />"
     },
     {
       "name": "ShoppingCartBlock",
@@ -8487,7 +8651,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { ShoppingCartBlock } from '@sakaniui/react/blocks';\n\n<ShoppingCartBlock items={[{ image: \"/images/example.jpg\", name: \"Name\", price: 49, quantity: 1 }]} />"
     },
     {
       "name": "SignUpBlock",
@@ -8535,7 +8700,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { SignUpBlock } from '@sakaniui/react/blocks';\n\n<SignUpBlock />"
     },
     {
       "name": "TeamSectionBlock",
@@ -8579,7 +8745,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { TeamSectionBlock } from '@sakaniui/react/blocks';\n\n<TeamSectionBlock title=\"Title\" members={[{ name: \"Name\", role: \"Role\", location: \"Location\", image: \"/images/example.jpg\" }]} />"
     },
     {
       "name": "TestimonialBlock",
@@ -8605,7 +8772,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { TestimonialBlock } from '@sakaniui/react/blocks';\n\n<TestimonialBlock testimonials={[{ quote: \"Quote\", authorName: \"Author name\", authorRole: \"Author role\" }]} />"
     },
     {
       "name": "TwoFactorAuthBlock",
@@ -8649,7 +8817,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { TwoFactorAuthBlock } from '@sakaniui/react/blocks';\n\n<TwoFactorAuthBlock />"
     }
   ],
   "utilities": [