@sakaniui/react 0.8.9 → 0.8.10

package/dist/manifest.json

@@ -1,8 +1,7 @@
 {
-  "$schema": "https://www.sakaniui.com/manifest.schema.json",
-  "schemaVersion": 3,
+  "schemaVersion": 4,
   "name": "@sakaniui/react",
-  "version": "0.8.9",
+  "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,7 +23,7 @@
     "@sakaniui/react/icons": "Tabler icons: IconName and IconNameFilled, one module each (5184 outline, 1054 filled)."
   },
   "conventions": {
-    "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.",
+    "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.",
@@ -32,6 +31,167 @@
     "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": {
@@ -1576,7 +1736,8 @@
         {
           "name": "leadingAction",
           "type": "ReactNode",
-          "required": false
+          "required": false,
+          "since": "0.3.16"
         },
         {
           "name": "interactive",
@@ -2333,7 +2494,7 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
+      "since": "0.8.6",
       "example": "import { FacebookIcon } from '@sakaniui/react';\n\n<FacebookIcon />"
     },
     {
@@ -2601,7 +2762,7 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
+      "since": "0.8.6",
       "example": "import { GithubIcon } from '@sakaniui/react';\n\n<GithubIcon />"
     },
     {
@@ -2672,7 +2833,7 @@
         "requiresAccessibleName": false
       },
       "since": "0.3.21",
-      "example": "import { HoverGroup } from '@sakaniui/react';\n\n<HoverGroup />"
+      "example": "import { HoverGroup } from '@sakaniui/react';\n\n<HoverGroup>Label</HoverGroup>"
     },
     {
       "name": "IconButton",
@@ -2841,7 +3002,7 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
+      "since": "0.8.6",
       "example": "import { InstagramIcon } from '@sakaniui/react';\n\n<InstagramIcon />"
     },
     {
@@ -3095,7 +3256,7 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
+      "since": "0.8.6",
       "example": "import { LinkedinIcon } from '@sakaniui/react';\n\n<LinkedinIcon />"
     },
     {
@@ -3131,8 +3292,8 @@
         ],
         "requiresAccessibleName": false
       },
-      "since": "0.4.0",
-      "example": "import { LiquidBackdrop } from '@sakaniui/react';\n\n<LiquidBackdrop />"
+      "since": "0.4.3",
+      "example": "import { LiquidBackdrop } from '@sakaniui/react';\n\n<LiquidBackdrop src=\"/images/example.jpg\" />"
     },
     {
       "name": "LiquidGlass",
@@ -3164,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",
@@ -3188,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",
@@ -5219,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",
@@ -5859,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": {
@@ -6064,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",
@@ -6075,7 +6244,8 @@
             "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": {
@@ -6149,7 +6319,8 @@
             "stacked",
             "auto"
           ],
-          "default": "auto"
+          "default": "auto",
+          "since": "0.3.4"
         },
         {
           "name": "className",
@@ -6796,7 +6967,7 @@
         "requiredProps": [],
         "requiresAccessibleName": false
       },
-      "since": "0.3.0",
+      "since": "0.8.6",
       "example": "import { XIcon } from '@sakaniui/react';\n\n<XIcon />"
     },
     {
@@ -7223,7 +7394,8 @@
           "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": {
@@ -7434,7 +7606,8 @@
           "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": {
@@ -7873,7 +8046,8 @@
           "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": {
@@ -8825,32 +8999,38 @@
     {
       "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"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakaniui/react",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "SakaniUI — token-driven React components and blocks with light & dark modes, plus built-in glass and Apple-style liquid glass surfaces.",
   "license": "MIT",
   "repository": {
@@ -83,12 +83,11 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@fontsource-variable/geist": "^5.2.9",
-    "geist": "^1.7.2",
     "recharts": "^3.9.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
+    "@fontsource-variable/geist": "^5.2.9",
     "@storybook/addon-a11y": "^10.5.2",
     "@storybook/addon-docs": "^10.5.2",
     "@storybook/addon-mcp": "^0.7.0",
@@ -102,6 +101,7 @@
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "chromatic": "^18.0.1",
+    "geist": "^1.7.2",
     "oxlint": "^1.71.0",
     "playwright": "^1.61.1",
     "react": "^19.2.7",
@@ -113,6 +113,6 @@
     "vitest": "^4.1.10"
   },
   "bin": {
-    "sakaniui-mcp": "./bin/sakaniui-mcp.mjs"
+    "sakaniui-mcp": "bin/sakaniui-mcp.mjs"
   }
 }