@sakaniui/react 0.8.8 → 0.8.10

package/dist/manifest.json

@@ -1,8 +1,7 @@
 {
-  "$schema": "https://www.sakaniui.com/manifest.schema.json",
-  "schemaVersion": 2,
+  "schemaVersion": 4,
   "name": "@sakaniui/react",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "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,13 +23,175 @@
     "@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.10. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything 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\")."
   },
+  "nativeAttributes": [
+    "about",
+    "accept",
+    "acceptCharset",
+    "accessKey",
+    "action",
+    "allowFullScreen",
+    "allowTransparency",
+    "alt",
+    "as",
+    "async",
+    "autoCapitalize",
+    "autoComplete",
+    "autoCorrect",
+    "autoFocus",
+    "autoPlay",
+    "autoSave",
+    "capture",
+    "cellPadding",
+    "cellSpacing",
+    "challenge",
+    "charSet",
+    "checked",
+    "children",
+    "cite",
+    "classID",
+    "className",
+    "colSpan",
+    "color",
+    "cols",
+    "content",
+    "contentEditable",
+    "contextMenu",
+    "controls",
+    "coords",
+    "crossOrigin",
+    "dangerouslySetInnerHTML",
+    "data",
+    "datatype",
+    "dateTime",
+    "default",
+    "defaultChecked",
+    "defaultValue",
+    "defer",
+    "dir",
+    "disabled",
+    "download",
+    "draggable",
+    "encType",
+    "enterKeyHint",
+    "exportparts",
+    "form",
+    "formAction",
+    "formEncType",
+    "formMethod",
+    "formNoValidate",
+    "formTarget",
+    "frameBorder",
+    "headers",
+    "height",
+    "hidden",
+    "high",
+    "href",
+    "hrefLang",
+    "htmlFor",
+    "httpEquiv",
+    "id",
+    "inert",
+    "inlist",
+    "inputMode",
+    "integrity",
+    "is",
+    "itemID",
+    "itemProp",
+    "itemRef",
+    "itemScope",
+    "itemType",
+    "keyParams",
+    "keyType",
+    "kind",
+    "label",
+    "lang",
+    "list",
+    "loop",
+    "low",
+    "manifest",
+    "marginHeight",
+    "marginWidth",
+    "max",
+    "maxLength",
+    "media",
+    "mediaGroup",
+    "method",
+    "min",
+    "minLength",
+    "multiple",
+    "muted",
+    "name",
+    "noValidate",
+    "nonce",
+    "open",
+    "optimum",
+    "part",
+    "pattern",
+    "placeholder",
+    "playsInline",
+    "popover",
+    "popoverTarget",
+    "popoverTargetAction",
+    "poster",
+    "prefix",
+    "preload",
+    "property",
+    "radioGroup",
+    "readOnly",
+    "rel",
+    "required",
+    "resource",
+    "results",
+    "rev",
+    "reversed",
+    "role",
+    "rowSpan",
+    "rows",
+    "sandbox",
+    "scope",
+    "scoped",
+    "scrolling",
+    "seamless",
+    "security",
+    "selected",
+    "shape",
+    "size",
+    "sizes",
+    "slot",
+    "span",
+    "spellCheck",
+    "src",
+    "srcDoc",
+    "srcLang",
+    "srcSet",
+    "start",
+    "step",
+    "style",
+    "summary",
+    "suppressContentEditableWarning",
+    "suppressHydrationWarning",
+    "tabIndex",
+    "target",
+    "title",
+    "translate",
+    "type",
+    "typeof",
+    "unselectable",
+    "useMap",
+    "value",
+    "vocab",
+    "width",
+    "wmode",
+    "wrap"
+  ],
   "tokens": {
     "count": 231,
     "groups": {
@@ -318,7 +479,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 +519,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 +556,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 +570,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 +619,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 +678,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 +741,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 +798,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 +846,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 +918,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 +974,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 +1029,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 +1089,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 +1122,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 +1159,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 +1208,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 +1281,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 +1358,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 +1456,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 +1523,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 +1560,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 +1628,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 +1707,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Calendar } from '@sakaniui/react';\n\n<Calendar />"
     },
     {
       "name": "Card",
@@ -1552,7 +1736,8 @@
         {
           "name": "leadingAction",
           "type": "ReactNode",
-          "required": false
+          "required": false,
+          "since": "0.3.16"
         },
         {
           "name": "interactive",
@@ -1569,7 +1754,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 +1782,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 +1876,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 +1945,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 +1976,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 +2010,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 +2067,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 +2120,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 +2210,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 +2280,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 +2317,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 +2372,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 +2430,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 +2473,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 +2494,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.8.6",
+      "example": "import { FacebookIcon } from '@sakaniui/react';\n\n<FacebookIcon />"
     },
     {
       "name": "FeaturedIcon",
@@ -2344,7 +2544,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 +2589,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 +2632,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 +2702,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 +2741,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 +2762,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.8.6",
+      "example": "import { GithubIcon } from '@sakaniui/react';\n\n<GithubIcon />"
     },
     {
       "name": "HeatmapChart",
@@ -2612,7 +2818,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 +2832,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.21"
+      "since": "0.3.21",
+      "example": "import { HoverGroup } from '@sakaniui/react';\n\n<HoverGroup>Label</HoverGroup>"
     },
     {
       "name": "IconButton",
@@ -2678,7 +2886,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 +2923,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 +2981,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 +3002,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.8.6",
+      "example": "import { InstagramIcon } from '@sakaniui/react';\n\n<InstagramIcon />"
     },
     {
       "name": "JobListing",
@@ -2873,7 +3085,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 +3105,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 +3126,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 +3214,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 +3235,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 +3256,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.8.6",
+      "example": "import { LinkedinIcon } from '@sakaniui/react';\n\n<LinkedinIcon />"
     },
     {
       "name": "LiquidBackdrop",
@@ -3074,7 +3292,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.4.0"
+      "since": "0.4.3",
+      "example": "import { LiquidBackdrop } from '@sakaniui/react';\n\n<LiquidBackdrop src=\"/images/example.jpg\" />"
     },
     {
       "name": "LiquidGlass",
@@ -3106,7 +3325,8 @@
             "clear"
           ],
           "default": "auto",
-          "description": "How much of the backdrop shows through. Default 'auto' (follows `variant`)."
+          "description": "How much of the backdrop shows through. Default 'auto' (follows `variant`).",
+          "since": "0.4.1"
         },
         {
           "name": "radius",
@@ -3130,21 +3350,24 @@
           "name": "effect",
           "type": "Partial<LiquidGlassEffect>",
           "required": false,
-          "description": "Defaults come from the variant's --liquid-* tokens."
+          "description": "Defaults come from the variant's --liquid-* tokens.",
+          "since": "0.4.3"
         },
         {
           "name": "source",
           "type": "boolean",
           "required": false,
           "default": true,
-          "description": "Inside a <LiquidBackdrop>: true (default) refracts the backdrop image; false bends whatever is painted below instead (UI under a slider knob)."
+          "description": "Inside a <LiquidBackdrop>: true (default) refracts the backdrop image; false bends whatever is painted below instead (UI under a slider knob).",
+          "since": "0.4.3"
         },
         {
           "name": "bake",
           "type": "boolean | \"auto\"",
           "required": false,
           "default": "auto",
-          "description": "'auto' (default): inside a LiquidBackdrop, lenses over 300×300 bake their glass once (fast; for surfaces that stay put). false: always live (a big lens that moves)."
+          "description": "'auto' (default): inside a LiquidBackdrop, lenses over 300×300 bake their glass once (fast; for surfaces that stay put). false: always live (a big lens that moves).",
+          "since": "0.4.3"
         },
         {
           "name": "interactive",
@@ -3157,7 +3380,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 +3418,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 +3475,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 +3512,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 +3553,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 +3586,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 +3600,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 +3650,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 +3743,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 +3782,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 +3843,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 +3971,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 +4044,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 +4092,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 +4160,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 +4203,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 +4259,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 +4304,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 +4413,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 +4467,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 +4522,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 +4566,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 +4628,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 +4669,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 +4719,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 +4784,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 +4849,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 +4874,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 +4906,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 +4936,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 +4956,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 +5017,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 +5065,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 +5151,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 +5177,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 +5191,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 +5254,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 +5268,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 +5328,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { SidebarHeader } from '@sakaniui/react';\n\n<SidebarHeader title=\"Title\" />"
     },
     {
       "name": "SidebarItem",
@@ -5122,7 +5384,8 @@
           "name": "expanded",
           "type": "boolean",
           "required": false,
-          "description": "Only matters when `hasSubmenu`. Not a navigation disclosure like `active` — the caller owns the open/closed state and toggles this alongside conditionally rendering the children."
+          "description": "Only matters when `hasSubmenu`. Not a navigation disclosure like `active` — the caller owns the open/closed state and toggles this alongside conditionally rendering the children.",
+          "since": "0.3.27"
         },
         {
           "name": "onClick",
@@ -5148,7 +5411,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 +5469,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 +5520,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 +5562,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 +5608,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 +5651,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 +5689,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 +5734,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 +5772,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 +5829,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 +5930,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 +5975,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",
@@ -5750,13 +6025,15 @@
           "type": "number",
           "required": false,
           "default": 0,
-          "description": "ms to wait before this step's state change plays (the stepper uses it to sequence a multi-step move)."
+          "description": "ms to wait before this step's state change plays (the stepper uses it to sequence a multi-step move).",
+          "since": "0.4.4"
         },
         {
           "name": "fresh",
           "type": "boolean",
           "required": false,
-          "description": "True while this step has just changed state: plays the check-draw / arrival ripple."
+          "description": "True while this step has just changed state: plays the check-draw / arrival ripple.",
+          "since": "0.4.4"
         }
       ],
       "contract": {
@@ -5767,7 +6044,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 +6117,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 +6157,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 +6212,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",
@@ -5951,7 +6232,8 @@
           "name": "description",
           "type": "ReactNode",
           "required": false,
-          "description": "Help text under the label, left-aligned with it (not with the track), e.g. the current state of a controlled switch. Same pattern as Checkbox's description."
+          "description": "Help text under the label, left-aligned with it (not with the track), e.g. the current state of a controlled switch. Same pattern as Checkbox's description.",
+          "since": "0.3.28"
         },
         {
           "name": "variant",
@@ -5962,14 +6244,16 @@
             "stretch"
           ],
           "default": "default",
-          "description": "`stretch` adds a liquid motion: the thumb stretches as it travels, then settles to a circle. `default` is the plain switch."
+          "description": "`stretch` adds a liquid motion: the thumb stretches as it travels, then settles to a circle. `default` is the plain switch.",
+          "since": "0.8.4"
         }
       ],
       "contract": {
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.1.0"
+      "since": "0.1.0",
+      "example": "import { Switch } from '@sakaniui/react';\n\n<Switch />"
     },
     {
       "name": "Table",
@@ -6035,7 +6319,8 @@
             "stacked",
             "auto"
           ],
-          "default": "auto"
+          "default": "auto",
+          "since": "0.3.4"
         },
         {
           "name": "className",
@@ -6050,7 +6335,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 +6393,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 +6426,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 +6498,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 +6528,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 +6567,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 +6614,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 +6670,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 +6800,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 +6864,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 +6908,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 +6946,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 +6967,8 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.8.6",
+      "example": "import { XIcon } from '@sakaniui/react';\n\n<XIcon />"
     },
     {
       "name": "AccountOverviewBlock",
@@ -6699,7 +6997,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 +7027,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 +7070,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 +7114,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 +7162,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 +7195,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 +7246,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 +7291,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 +7322,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 +7375,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",
@@ -7086,14 +7394,16 @@
           "name": "fillPlaceholders",
           "type": "boolean",
           "required": false,
-          "description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the leads table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height."
+          "description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the leads table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height.",
+          "since": "0.3.3"
         }
       ],
       "contract": {
         "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 +7463,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 +7573,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",
@@ -7294,14 +7606,16 @@
           "name": "fillPlaceholders",
           "type": "boolean",
           "required": false,
-          "description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height."
+          "description": "When the block is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), extends the table with faint placeholder row dividers down to the bottom instead of leaving blank canvas below the footer. No-op at the block's natural height.",
+          "since": "0.3.3"
         }
       ],
       "contract": {
         "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 +7665,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 +7714,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 +7747,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 +7778,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 +7833,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 +7866,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 +7956,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 +8015,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",
@@ -7724,14 +8046,16 @@
           "name": "fillPlaceholders",
           "type": "boolean",
           "required": false,
-          "description": "When the board is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), stretches every column to equal height and caps off its real cards with a dashed placeholder slot down to the bottom instead of leaving blank canvas. No-op at the board's natural height."
+          "description": "When the board is stretched taller than its real content (e.g. embedded in a fixed-height demo frame), stretches every column to equal height and caps off its real cards with a dashed placeholder slot down to the bottom instead of leaving blank canvas. No-op at the board's natural height.",
+          "since": "0.3.3"
         }
       ],
       "contract": {
         "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 +8094,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 +8154,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 +8195,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 +8235,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 +8267,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 +8310,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 +8370,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 +8413,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 +8458,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 +8575,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 +8645,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 +8687,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 +8736,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 +8777,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 +8825,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 +8874,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 +8919,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 +8946,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,39 +8991,46 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0"
+      "since": "0.3.0",
+      "example": "import { TwoFactorAuthBlock } from '@sakaniui/react/blocks';\n\n<TwoFactorAuthBlock />"
     }
   ],
   "utilities": [
     {
       "name": "DEFAULT_CHECKOUT_STEPS",
       "kind": "constant",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.3.0"
     },
     {
       "name": "getContrastColor",
       "kind": "helper",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.3.0"
     },
     {
       "name": "iconStrokeWidth",
       "kind": "helper",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.3.0"
     },
     {
       "name": "syncLiquidBackdrop",
       "kind": "helper",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.4.3"
     },
     {
       "name": "useHoverHighlight",
       "kind": "hook",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.3.21"
     },
     {
       "name": "useLiquidGlass",
       "kind": "hook",
-      "import": "@sakaniui/react"
+      "import": "@sakaniui/react",
+      "since": "0.4.0"
     }
   ]
 }