@kanso-labs/kanso-ui 0.40.9 → 0.41.0

package/dist/theme-scope.js

@@ -1,6 +1,7 @@
 "use client";
 import { props } from "./node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from "./tokens/design.tokens.stylex.js";
+import { pinnedScheme } from "./styles/scheme.js";
 import { useRender } from "./render/useRender.js";
 import { mergeStyles } from "./styles/merge.js";
 import { c } from "react/compiler-runtime";
@@ -54,7 +55,7 @@ function ThemeScope(t0) {
 	} else t1 = $[1];
 	const getContainer = t1;
 	const t2 = "div";
-	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme]), props$1);
+	const t3 = mergeStyles(props(styles.root, tokenScope, scheme !== void 0 && schemes[scheme], scheme !== void 0 && pinnedScheme[scheme]), props$1);
 	let t4;
 	if ($[2] !== children || $[3] !== getContainer) {
 		t4 = /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {

package/dist/theme-scope.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","useRender","mergeStyles","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. Left unset, the scope keeps the scheme around it:\n   * the one an enclosing scope or the `<html>` element pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `className` or\n * `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * // .accent { --kui-color-primary: #7d5260; }\n * <ThemeScope className=\"accent\" scheme=\"dark\">\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme]), props),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;AA4BA,MAAMa,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAvB,EAAA,EAAA;CAAoB,MAAA,EAAAwB,UAAAC,QAAAL,QAAA,GAAAM,YAAAJ;CAUlB,MAAA,CAAAK,WAAAC,gBAAkCzB,SAAgC,IAAI;CAAE,IAAA0B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAAxB,YAAYP,MAAaW,OAAMC,MAAOF,YAAYS,WAAWa,KAAAA,KAAajB,QAAQI,OAAO,GAAGM,OAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAEjGI,KAAA,oBAACS,uBAAD;GAA8Bb;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAK,cAAA;EACjBO,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBP,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAa,IAAA;EARAC,KAAA;GAAA,GACFX;GAAK,GACLM;GAAkGR,UAC3FY;EAMZ;EAACb,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAAF,EAAA,QAAAc,IAAA;EAXcC,KAAA;GAAAC,gBACCR;GAAKL,OACdW;GASNZ;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAbMhB,UAAU+B,EAahB;AAAC"}
+{"version":3,"file":"theme-scope.js","names":["c","_c","stylex","useCallback","useState","UNSAFE_PortalProvider","PortalProvider","RenderComponentProps","useRender","mergeStyles","pinnedScheme","colorDefaultsDarkTheme","colorDefaultsLightTheme","tokenScope","styles","root","kB7OPa","$$css","schemes","dark","light","ThemeScopeProps","scheme","ThemeScope","t0","$","children","render","props","container","setContainer","t1","getContainer","t2","t3","undefined","t4","t5","t6","t7","t8","defaultTagName","_c","props","stylex.props","PortalProvider"],"sources":["../src/theme-scope.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useState } from 'react';\nimport { UNSAFE_PortalProvider as PortalProvider } from 'react-aria/PortalProvider';\nimport type { RenderComponentProps } from './render/useRender';\nimport { useRender } from './render/useRender';\nimport { mergeStyles } from './styles/merge';\nimport { pinnedScheme } from './styles/scheme';\nimport { colorDefaultsDarkTheme, colorDefaultsLightTheme, tokenScope } from './tokens/design.tokens.stylex';\n\n// The component form of `themeScope` and `colorScheme` in ./color-scheme.ts:\n// the same classes, on an element of its own, plus the one thing a class\n// cannot do — take the overlays along. A pinned scheme paints the scope's\n// surface and sets its `color-scheme` too; see src/styles/scheme.ts.\n//\n// React Aria portals every overlay to the end of `<body>` unless a portal\n// provider names another container, so a popover, a sheet, a tooltip or a\n// toast opened inside a themed element renders outside it, and keeps the\n// tokens of the page. The container here is the scope's own last child,\n// which is what makes the overlays inherit whatever the scope inherits: its\n// scheme, and the `--kui-*` overrides declared on it or on any element around\n// it. A container appended to the body and given the scope's classes would\n// carry the classes alone, losing every override declared above the scope.\n//\n// `display: contents` keeps that container out of the layout, so a scope\n// that is a grid or a flex container gains no item and no gap from it. React\n// Aria positions an overlay against the overlay's own containing block rather\n// than the container's box, so a container with no box of its own changes\n// nothing about where a popover lands.\nconst styles = {\n  root: {\n    kB7OPa: \"x9f619\",\n    $$css: true\n  }\n};\nconst schemes = {\n  dark: colorDefaultsDarkTheme,\n  light: colorDefaultsLightTheme\n};\ntype ThemeScopeProps = RenderComponentProps<'div'> & {\n  /**\n   * Pins the scope to the library's light or dark scheme, whatever the\n   * reader's OS asks for. A pinned scope paints its own surface and text in\n   * that scheme and sets `color-scheme` for the native controls inside, so\n   * it reads on any page. Left unset, the scope paints nothing and keeps the\n   * scheme around it: the one an enclosing scope or the `<html>` element\n   * pins, or the OS's.\n   */\n  scheme?: 'dark' | 'light' | undefined;\n};\n\n/**\n * Themes what is inside it, overlays included.\n *\n * A `--kui-*` override declared on the scope — through `className` or\n * `style` — or on any element around it reaches every component inside,\n * where on any element but `<html>` it would otherwise reach none, since the\n * tokens resolve once on `:root`. Popovers, sheets, tooltips and toasts\n * opened inside portal into the scope rather than into the body, so they\n * follow it too. The rest of the page keeps its own tokens.\n *\n * ```tsx\n * // .accent { --kui-color-primary: #7d5260; }\n * <ThemeScope className=\"accent\" scheme=\"dark\">\n *   <Select label=\"Label\">…</Select>\n * </ThemeScope>\n * ```\n *\n * Because the overlays render inside the scope, an ancestor that confines\n * its descendants confines them too: a `transform` or a `filter` makes a\n * sheet's fixed scrim cover that ancestor rather than the viewport, and\n * `overflow: hidden` with a position clips a popover. Put the scope around\n * such an element rather than inside it.\n *\n * `render` swaps the element, for a scope that should be a `<main>`, a\n * `<section>`, or the `<body>` itself.\n */\nfunction ThemeScope({\n  children,\n  render,\n  scheme,\n  ...props\n}: ThemeScopeProps) {\n  // State rather than a ref, so the overlays render again once the container\n  // exists. React Aria renders an overlay nowhere while `getContainer` hands\n  // back nothing, and one open on the scope's first render would otherwise\n  // stay that way.\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const getContainer = useCallback(() => container, [container]);\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root, tokenScope, scheme !== undefined && schemes[scheme], scheme !== undefined && pinnedScheme[scheme]), props),\n      children: <>\n          <PortalProvider getContainer={getContainer}>\n            {children}\n          </PortalProvider>\n          <div className=\"x9f619 xjp7ctv\" ref={setContainer} />\n        </>\n    },\n    render\n  });\n}\nexport type { ThemeScopeProps };\nexport { ThemeScope };"],"mappings":";;;;;;;;;;;AA8BA,MAAMc,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,UAAU;CACdC,MAAMR;CACNS,OAAOR;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAxB,EAAA,EAAA;CAAoB,MAAA,EAAAyB,UAAAC,QAAAL,QAAA,GAAAM,YAAAJ;CAUlB,MAAA,CAAAK,WAAAC,gBAAkC1B,SAAgC,IAAI;CAAE,IAAA2B;CAAA,IAAAN,EAAA,OAAAI,WAAA;EACvCE,WAAMF;EAASJ,EAAA,KAAAI;EAAAJ,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAhD,MAAAO,eAAqBD;CAEH,MAAAE,KAAA;CAGX,MAAAC,KAAAzB,YAAYP,MAAaY,OAAMC,MAAOF,YAAYS,WAAWa,KAAAA,KAAajB,QAAQI,SAASA,WAAWa,KAAAA,KAAazB,aAAaY,OAAO,GAAGM,OAAK;CAAC,IAAAQ;CAAA,IAAAX,EAAA,OAAAC,YAAAD,EAAA,OAAAO,cAAA;EAE/II,KAAA,oBAACS,uBAAD;GAA8Bb;GAC3BN;EADY,CAAA;EAEED,EAAA,KAAAC;EAAAD,EAAA,KAAAO;EAAAP,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAK,cAAA;EACjBO,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAsBP,KAAAA;EAAY,CAAA;EAAIL,EAAA,KAAAK;EAAAL,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAW,MAAAX,EAAA,OAAAY,IAAA;EAJ/CC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACNF,IAGAC,EAAqD,EAAA,CAAA;EACpDZ,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAG,WAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAa,IAAA;EARAC,KAAA;GAAA,GACFX;GAAK,GACLM;GAAgJR,UACzIY;EAMZ;EAACb,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAE,UAAAF,EAAA,QAAAc,IAAA;EAXcC,KAAA;GAAAC,gBACCR;GAAKL,OACdW;GASNZ;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAbMjB,UAAUgC,EAahB;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.40.9",
+  "version": "0.41.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",