@box-kite/react 2.1.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/.claude/rules/box-kite-rules.md +8 -2
  2. package/.claude/skills/box-kite/SKILL.md +11 -5
  3. package/.claude/skills/box-kite/references/patterns.md +1 -1
  4. package/.claude/skills/box-kite/references/styling.md +23 -0
  5. package/.cursor/rules/box-kite.mdc +9 -3
  6. package/AGENTS.md +9 -3
  7. package/BOX_AI_CONTEXT.md +171 -12
  8. package/BOX_KITE_AI_CONTEXT.md +171 -12
  9. package/README.md +2 -2
  10. package/box.cjs +1 -1
  11. package/box.d.ts +13 -2
  12. package/box.mjs +25 -18
  13. package/catalog.cjs +1 -1
  14. package/catalog.mjs +15 -1
  15. package/client.cjs +1 -1
  16. package/client.mjs +59 -51
  17. package/components/button.cjs +1 -1
  18. package/components/button.mjs +10 -14
  19. package/components/flex.cjs +1 -1
  20. package/components/flex.mjs +10 -13
  21. package/components/form.cjs +1 -1
  22. package/components/form.mjs +7 -7
  23. package/components/grid.cjs +1 -1
  24. package/components/grid.mjs +10 -13
  25. package/components/menu.cjs +1 -1
  26. package/components/menu.mjs +16 -16
  27. package/components/overlay.cjs +1 -1
  28. package/components/overlay.mjs +35 -34
  29. package/components/popover.cjs +1 -1
  30. package/components/popover.mjs +4 -4
  31. package/components/semantics.cjs +1 -1
  32. package/components/semantics.mjs +9 -13
  33. package/components/svg.cjs +1 -1
  34. package/components/svg.mjs +38 -44
  35. package/components/textarea.cjs +1 -1
  36. package/components/textarea.mjs +12 -16
  37. package/components/textbox.cjs +1 -1
  38. package/components/textbox.mjs +12 -16
  39. package/components/toaster.cjs +1 -1
  40. package/components/toaster.mjs +42 -43
  41. package/components/visuallyHidden.cjs +1 -1
  42. package/components/visuallyHidden.mjs +10 -13
  43. package/docs/mcp.md +6 -5
  44. package/docs/props.md +132 -20
  45. package/layer.cjs +1 -1
  46. package/layer.mjs +61 -59
  47. package/mcp/src/data.d.ts +1 -1
  48. package/mcp/src/styles.d.ts +2 -2
  49. package/mcp/src/vocabulary.d.ts +1 -1
  50. package/package.json +74 -48
  51. package/react/boxComponent.d.ts +10 -0
  52. package/react/popover/useTopLayer.d.ts +17 -0
  53. package/react/theme/theme.d.ts +10 -0
  54. package/react/useStyles.d.ts +2 -0
  55. package/react-shared.cjs +1 -1
  56. package/react-shared.mjs +44 -37
  57. package/rsc.cjs +1 -1
  58. package/rsc.d.ts +11 -1
  59. package/rsc.mjs +15 -12
  60. package/ssg.cjs +1 -1
  61. package/ssg.d.ts +8 -2
  62. package/ssg.mjs +13 -9
  63. package/utils/environment/environmentUtils.d.ts +5 -0
package/rsc.mjs CHANGED
@@ -1,18 +1,21 @@
1
- import { d as e, f as t, l as n } from "./react-shared.mjs";
1
+ import { d as e, l as t, p as n } from "./react-shared.mjs";
2
2
  import r from "react";
3
- import { BoxExtends as i, Springs as a, getDefaultEngine as o } from "@box-kite/core";
3
+ import { BoxExtends as i, Springs as a, getDefaultEngine as o, startViewTransition as s } from "@box-kite/core";
4
4
  //#region src/rsc.ts
5
5
  o().configure({ sink: "element" });
6
- function s(t) {
7
- let { tag: i = "div", children: a } = t;
8
- 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.");
9
- let { classNames: o, styleElements: s } = n(t, i === "svg");
10
- return r.createElement(r.Fragment, null, s, r.createElement(i, e(t, o), a));
6
+ function c(n, i) {
7
+ let { tag: a = "div", children: o } = n;
8
+ if (typeof o == "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.");
9
+ let { classNames: s, styleElements: c } = t(n, a === "svg");
10
+ return r.createElement(r.Fragment, null, c, r.createElement(a, e(n, s), o));
11
11
  }
12
- var c = s;
13
- c.extend = i.extend, c.components = i.components, c.keyframes = i.keyframes, c.spring = a.spring, c.getVariableValue = (e) => o().getVariableValue(e), c.configure = (e) => o().configure(e);
14
- function l(e, r) {
15
- return t(n(e, r?.svg === !0), e.className);
12
+ function l(e) {
13
+ return c(e);
14
+ }
15
+ var u = l;
16
+ u.extend = i.extend, u.components = i.components, u.keyframes = i.keyframes, u.spring = a.spring, u.getVariableValue = (e) => o().getVariableValue(e), u.configure = (e) => o().configure(e), u.viewTransition = s;
17
+ function d(e, r) {
18
+ return n(t(e, r?.svg === !0), e.className);
16
19
  }
17
20
  //#endregion
18
- export { c as default, l as useClassNames };
21
+ export { u as default, c as useBoxElement, d as useClassNames };
package/ssg.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime.cjs"),t=require("./client.cjs");let n=require("react-dom/server");n=e.t(n,1);function r(){return t.r.getStyles()}function i(){t.r.clear()}function a(e,a=!0){let o=n.default.renderToStaticMarkup(e),s=r();if(a){let e=o.indexOf(`<head>`);if(e>-1){let n=e+6;o=o.substring(0,n)+`<style id="${t.r.styleElementId()}">${s}</style>`+o.substring(n)}}return i(),{html:o,styles:s}}exports.getStyles=r,exports.renderToStaticMarkup=a,exports.resetStyles=i;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime.cjs"),t=require("./client.cjs");let n=require("react-dom/server");n=e.t(n,1);function r(){return t.r.getStyles()}function i(){return t.r.getStyleTag()}function a(){t.r.clear()}function o(e,t=!0){let o=n.default.renderToStaticMarkup(e),s=r(),c=i();if(t){let e=o.indexOf(`<head>`);if(e>-1){let t=e+6;o=o.substring(0,t)+c+o.substring(t)}}return a(),{html:o,styles:s,styleTag:c}}exports.getStyleTag=i,exports.getStyles=r,exports.renderToStaticMarkup=o,exports.resetStyles=a;
package/ssg.d.ts CHANGED
@@ -5,9 +5,14 @@ import { default as React } from 'react';
5
5
  */
6
6
  /**
7
7
  * The CSS for everything rendered since the last reset. Flushes first, so it is safe straight after
8
- * `renderToString` — no effects have run at that point. Goes in a `<style id="box-kite-styles">` in the head.
8
+ * `renderToString` — no effects have run at that point. `getStyleTag()` is the same CSS ready for the head.
9
9
  */
10
10
  export declare function getStyles(): string;
11
+ /**
12
+ * The CSS as `<style id="box-kite-styles" data-box-kite="…">`, for the head. The attribute is what lets the
13
+ * browser adopt the sheet on hydration instead of generating and inserting every rule in it a second time.
14
+ */
15
+ export declare function getStyleTag(): string;
11
16
  /**
12
17
  * Drop every rule, class name and variable the engine has emitted, so the next request starts blank.
13
18
  * Registration (`Box.extend()`, `Box.components()`) survives. Call it once per request, after `getStyles()`.
@@ -15,10 +20,11 @@ export declare function getStyles(): string;
15
20
  export declare function resetStyles(): void;
16
21
  /**
17
22
  * Render `element` to static HTML together with its CSS. With `addStylesToHead` (the default) and a
18
- * `<head>` in the tree the styles go there; otherwise use the returned `styles`. The engine is reset
23
+ * `<head>` in the tree the style tag goes there; otherwise use the returned `styleTag`. The engine is reset
19
24
  * before returning, so sequential calls are independent.
20
25
  */
21
26
  export declare function renderToStaticMarkup(element: React.ReactElement, addStylesToHead?: boolean): {
22
27
  html: string;
23
28
  styles: string;
29
+ styleTag: string;
24
30
  };
package/ssg.mjs CHANGED
@@ -5,21 +5,25 @@ function n() {
5
5
  return e.getStyles();
6
6
  }
7
7
  function r() {
8
+ return e.getStyleTag();
9
+ }
10
+ function i() {
8
11
  e.clear();
9
12
  }
10
- function i(i, a = !0) {
11
- let o = t.renderToStaticMarkup(i), s = n();
13
+ function a(e, a = !0) {
14
+ let o = t.renderToStaticMarkup(e), s = n(), c = r();
12
15
  if (a) {
13
- let t = o.indexOf("<head>");
14
- if (t > -1) {
15
- let n = t + 6;
16
- o = o.substring(0, n) + `<style id="${e.styleElementId()}">${s}</style>` + o.substring(n);
16
+ let e = o.indexOf("<head>");
17
+ if (e > -1) {
18
+ let t = e + 6;
19
+ o = o.substring(0, t) + c + o.substring(t);
17
20
  }
18
21
  }
19
- return r(), {
22
+ return i(), {
20
23
  html: o,
21
- styles: s
24
+ styles: s,
25
+ styleTag: c
22
26
  };
23
27
  }
24
28
  //#endregion
25
- export { n as getStyles, i as renderToStaticMarkup, r as resetStyles };
29
+ export { r as getStyleTag, n as getStyles, a as renderToStaticMarkup, i as resetStyles };
package/utils/environment/environmentUtils.d.ts CHANGED
@@ -6,6 +6,11 @@
6
6
  */
7
7
  /** A browser: a window with a document. What an effect that touches layout needs to exist. */
8
8
  export declare function isBrowser(): boolean;
9
+ /**
10
+ * Development, unless the bundler or the process says production. Spelled out so a bundler replaces it;
11
+ * a page with no bundler has no `process` at all and counts as production.
12
+ */
13
+ export declare function isDevelopment(): boolean;
9
14
  /** Whether there is a document at all — false during a server render. */
10
15
  export declare function hasDocument(): boolean;
11
16
  /** The document, or null when there is none, so a caller can `?.` instead of branching. */