@box-kite/react 2.2.6 → 2.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -81,6 +81,7 @@
     "build": "npm run build:core && vite build",
     "build:core": "vite build --config vite.core.config.ts && node scripts/postbuild-core.mjs",
     "build:mcp": "vite build --config vite.mcp.config.ts && node scripts/postbuild-mcp.mjs",
+    "build:create": "vite build --config vite.create.config.ts && node scripts/postbuild-create.mjs",
     "postbuild": "node scripts/postbuild.mjs",
     "build:dev": "npm run build:core && vite build --mode dev",
     "compile": "tsc --noEmit --skipLibCheck",
@@ -98,10 +99,12 @@
     "docs:components": "node scripts/check-components-api.mjs --fix",
     "check:catalog": "node scripts/check-catalog-api.mjs",
     "docs:catalog": "node scripts/check-catalog-api.mjs --fix",
+    "check:create": "node scripts/check-create-templates.mjs",
+    "docs:create": "node scripts/check-create-templates.mjs --fix",
     "check:conventions": "node scripts/check-component-conventions.mjs",
     "check:agents": "node scripts/check-agent-files.mjs",
     "docs:agents": "node scripts/check-agent-files.mjs --fix",
-    "check:package": "publint dist && attw --pack dist --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-core && attw --pack dist-core --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-mcp",
+    "check:package": "publint dist && attw --pack dist --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-core && attw --pack dist-core --ignore-rules false-esm cjs-resolves-to-esm internal-resolution-error && publint dist-mcp && publint dist-create",
     "bench": "node bench/run.mjs",
     "compare": "node dev/compare/report.mjs",
     "compare:tailwind": "node dev/compare/report.mjs tailwind",
@@ -122,7 +125,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.45 KB"
+      "limit": "40.47 kB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -134,7 +137,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.47 KB"
+      "limit": "38.18 kB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -170,7 +173,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "61.11 KB"
+      "limit": "61.80 kB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -212,7 +215,7 @@
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "38.68 KB",
+      "limit": "39.43 kB",
       "ignore": [
         "./diagnostics-*",
         "./themeReveal-*"
@@ -228,7 +231,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.54 KB"
+      "limit": "42.53 kB"
     },
     {
       "name": "Popover",
@@ -240,7 +243,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "43.07 KB"
+      "limit": "44.08 kB"
     },
     {
       "name": "Menu",
@@ -252,7 +255,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "45.31 KB"
+      "limit": "46.32 kB"
     },
     {
       "name": "Accordion",
@@ -264,7 +267,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.78 KB"
+      "limit": "41.80 kB"
     },
     {
       "name": "Agent",
@@ -276,7 +279,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.56 KB"
+      "limit": "42.57 kB"
     },
     {
       "name": "Markdown",
@@ -288,7 +291,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.04 KB"
+      "limit": "41.04 kB"
     },
     {
       "name": "List",
@@ -300,7 +303,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.36 KB"
+      "limit": "42.38 kB"
     },
     {
       "name": "SwipeItem",
@@ -312,7 +315,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.44 KB"
+      "limit": "45.47 kB"
     },
     {
       "name": "SortableList",
@@ -324,7 +327,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.72 KB"
+      "limit": "45.80 kB"
     },
     {
       "name": "VirtualList",
@@ -336,7 +339,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "43.53 KB"
+      "limit": "44.58 kB"
     },
     {
       "name": "Skeleton",
@@ -348,7 +351,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.39 KB"
+      "limit": "40.38 kB"
     },
     {
       "name": "Tabs",
@@ -360,7 +363,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.99 KB"
+      "limit": "43.01 kB"
     },
     {
       "name": "Slider",
@@ -372,7 +375,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.16 KB"
+      "limit": "42.16 kB"
     },
     {
       "name": "Progress",
@@ -384,7 +387,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.34 KB"
+      "limit": "40.35 kB"
     },
     {
       "name": "Toaster",
@@ -396,7 +399,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.77 KB"
+      "limit": "43.78 kB"
     },
     {
       "name": "DateField",
@@ -408,7 +411,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "47.97 KB"
+      "limit": "49.03 kB"
     },
     {
       "name": "Calendar",
@@ -420,7 +423,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "47.39 KB"
+      "limit": "48.39 kB"
     },
     {
       "name": "DatePicker",
@@ -432,7 +435,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "60.07 KB"
+      "limit": "61.10 kB"
     },
     {
       "name": "DateTime",
@@ -444,7 +447,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.9 KB"
+      "limit": "43.92 kB"
     },
     {
       "name": "TimeZoneSelect",
@@ -456,7 +459,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "50.51 KB"
+      "limit": "51.50 kB"
     },
     {
       "name": "Combobox",
@@ -468,7 +471,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "48.58 KB"
+      "limit": "49.59 kB"
     },
     {
       "name": "Dashboard",
@@ -480,7 +483,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "45.01 KB"
+      "limit": "46.06 kB"
     },
     {
       "name": "DataGrid",
@@ -494,7 +497,7 @@
         "../dataGridDateParts.mjs"
       ],
       "gzip": true,
-      "limit": "94.65 KB"
+      "limit": "95.67 kB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -546,7 +549,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "162.25 KB"
+      "limit": "163.09 kB"
     }
   ],
   "repository": {
@@ -586,13 +589,14 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.6",
+    "@box-kite/core": "2.2.7",
     "csstype": "^3.2.3",
     "use-sync-external-store": "^1.6.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@assistant-ui/core": "^0.3.20",
+    "@clack/prompts": "^1.8.1",
     "@copilotkit/a2ui-renderer": "^1.73.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -623,6 +627,7 @@
     "ag-grid-community": "^36.2.0",
     "ag-grid-react": "^36.2.0",
     "axe-core": "^4.13.0",
+    "create-vite": "^9.3.0",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import-x": "^4.17.1",

package/react/theme/theme.d.ts

@@ -29,6 +29,13 @@ interface ThemeProps {
      * since one wrapper holding a design in both light and dark is what a themed section usually is.
      */
     components?: ComponentsRegistry;
+    /**
+     * The design this subtree is drawn in — a name given to `Box.components(styles, { design })` — written as
+     * `data-design` on `<html>` (`use="global"`) or on the wrapper. `Box.useDesign()` reads and sets it.
+     */
+    design?: string;
+    /** When provided, persists the design `Box.useDesign()` sets to localStorage under this key. */
+    designStorageKey?: string;
 }
 /**
  * The React binding for the theme system. Everything that actually touches the platform — reading
@@ -39,5 +46,7 @@ interface ThemeProps {
 declare function Theme(props: ThemeProps): React.JSX.Element;
 declare namespace Theme {
     function useTheme(): [string, (theme: string | null) => void];
+    /** The design the nearest provider is drawing, and the setter; null goes back to its `design` prop. */
+    function useDesign(): [string | undefined, (design: string | null) => void];
 }
 export default Theme;

package/react/theme/themeContext.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 interface ThemeContextProps {
     theme: string;
     setTheme(theme: string | null): void;
+    design?: string;
+    setDesign(design: string | null): void;
 }
 declare const ThemeContext: React.Context<ThemeContextProps>;
 export default ThemeContext;

package/rsc.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e,r){let{tag:i=`div`,children:a}=e;if(typeof a==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:o,styleElements:s}=t.l(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.d(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.createComponents=r.BoxExtends.createComponents,o.keyframes=r.BoxExtends.keyframes,o.spring=r.Springs.spring,o.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),o.configure=e=>(0,r.getDefaultEngine)().configure(e),o.viewTransition=r.startViewTransition;function s(e,n){return t.p(t.l(e,n?.svg===!0),e.className)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./rolldown-runtime.cjs"),t=require("./react-shared.cjs");let n=require("react");n=e.t(n,1);let r=require("@box-kite/core");(0,r.getDefaultEngine)().configure({sink:`element`});function i(e,r){let{tag:i=`div`,children:a}=e;if(typeof a==`function`)throw Error(`[box-kite] Box children as a function track hover state, which needs the client Box — render it from a 'use client' module.`);let{classNames:o,styleElements:s}=t.l(e,i===`svg`);return n.default.createElement(n.default.Fragment,null,s,n.default.createElement(i,t.d(e,o),a))}function a(e){return i(e)}var o=a;o.extend=r.BoxExtends.extend,o.components=r.BoxExtends.components,o.palette=r.BoxExtends.palette,o.createComponents=r.BoxExtends.createComponents,o.keyframes=r.BoxExtends.keyframes,o.spring=r.Springs.spring,o.getVariableValue=e=>(0,r.getDefaultEngine)().getVariableValue(e),o.configure=e=>(0,r.getDefaultEngine)().configure(e),o.viewTransition=r.startViewTransition;function s(e,n){return t.p(t.l(e,n?.svg===!0),e.className)}exports.default=o,exports.useBoxElement=i,exports.useClassNames=s;

package/rsc.d.ts

@@ -12,6 +12,8 @@ interface RscBoxType {
     <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: BoxCoreProps<TTag, TKey>): React.ReactNode;
     extend: typeof BoxExtends.extend;
     components: typeof BoxExtends.components;
+    /** The `vars` record that points the components' `accent` and `base` families at others, for an element and its subtree. */
+    palette: typeof BoxExtends.palette;
     /** A design for one subtree. A Server Component cannot read the provider that applies it; a client one under `<Box.Components>` can. */
     createComponents: typeof BoxExtends.createComponents;
     keyframes: typeof BoxExtends.keyframes;
@@ -37,3 +39,4 @@ export declare function useClassNames<TKey extends keyof ComponentsAndVariants =
 }): BoxClassNames;
 export default RscBox;
 export type { BoxClassNames, BoxClassNameProps };
+export type { BoxComponentStyles, BoxStyleProps } from '@box-kite/core/types';

package/rsc.mjs

@@ -13,7 +13,7 @@ function l(e) {
 	return c(e);
 }
 var u = l;
-u.extend = i.extend, u.components = i.components, u.createComponents = i.createComponents, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
+u.extend = i.extend, u.components = i.components, u.palette = i.palette, u.createComponents = i.createComponents, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
 function d(e, r) {
 	return n(t(e, r?.svg === !0), e.className);
 }