@box-kite/react 2.3.0 → 2.4.0

package/docs/props.md

@@ -1,4 +1,4 @@
-# Every prop (235)
+# Every prop (238)
 
 Generated from the prop registry of `@box-kite/react`. The description is the prop's own doc comment and the example is **measured** — the CSS beside a value is what the engine emits for it, not what a doc claims. Alphabetical; the registry's own order is what decides the cascade and is not this.
 
@@ -642,11 +642,11 @@ The cursor CSS property sets the mouse cursor, if any, to show when the mouse po
 
 ### `cx`
 
-The centre of a `<circle>` or `<ellipse>`, horizontally, in user units. Real CSS, so unlike the attribute it transitions — moving a point on hover is one prop and no JavaScript.
+The centre of a `<circle>` or `<ellipse>`, horizontally, in user units. Real CSS, so unlike the attribute it transitions — moving a point on hover is one prop and no JavaScript. Written in `px`, which is a user unit: Firefox and Safari drop a bare number here, and so does every geometry prop (bug #330).
 
 - Writes: `cx`
 - Values: a number, anything else the types allow
-- Example: `cx={4}` → `cx: 4`
+- Example: `cx={4}` → `cx: 4px`
 
 ### `cy`
 
@@ -654,7 +654,7 @@ The cy CSS property positions the centre of a `<circle>` or an `<ellipse>` verti
 
 - Writes: `cy`
 - Values: a number, anything else the types allow
-- Example: `cy={4}` → `cy: 4`
+- Example: `cy={4}` → `cy: 4px`
 
 ### `d`
 
@@ -1242,10 +1242,10 @@ The padding CSS shorthand property sets the padding area on all four sides of an
 
 ### `paintOrder`
 
-The paint-order CSS property sets what is painted first. `paintOrder="stroke"` puts the stroke behind the fill, which is how outlined SVG text stays legible.
+The paint-order CSS property sets what is painted first. `paintOrder="stroke"` puts the stroke behind the fill, which is how outlined SVG text stays legible. Up to three keywords in the order they paint (`'stroke fill markers'`); the ones left out follow in their usual order.
 
 - Writes: `paint-order`
-- Values: `normal` · `fill` · `stroke` · `markers`
+- Values: `normal` · `fill` · `stroke` · `markers` · `fill stroke` · `fill markers` · `stroke fill` · `stroke markers` · `markers fill` · `markers stroke` · `fill stroke markers` · `fill markers stroke` · `stroke fill markers` · `stroke markers fill` · `markers fill stroke` · `markers stroke fill`
 - Example: `paintOrder="normal"` → `paint-order: normal`
 
 ### `pb`
@@ -1290,10 +1290,10 @@ The place-items CSS shorthand sets `align-items` and `justify-items` in one decl
 
 ### `pointerEvents`
 
-The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
+The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. On SVG the keywords say which part takes the press: `visibleStroke` over a wide transparent stroke is an edge's hit area. `bounding-box` is not in Firefox, which falls back to `visiblePainted`.
 
 - Writes: `pointer-events`
-- Values: `none` · `auto` · `all`
+- Values: `none` · `auto` · `all` · `visiblePainted` · `visibleFill` · `visibleStroke` · `visible` · `painted` · `fill` · `stroke` · `bounding-box`
 - Example: `pointerEvents="none"` → `pointer-events: none`
 
 ### `position`
@@ -1390,7 +1390,7 @@ The r CSS property sets the radius of a `<circle>`, in user units. Transition it
 
 - Writes: `r`
 - Values: a number, anything else the types allow
-- Example: `r={4}` → `r: 4`
+- Example: `r={4}` → `r: 4px`
 
 ### `resize`
 
@@ -1446,7 +1446,7 @@ The horizontal radius of an `<ellipse>` or corner radius of a `<rect>` — `bord
 
 - Writes: `rx`
 - Values: `auto`, a number, anything else the types allow
-- Example: `rx={4}` → `rx: 4`
+- Example: `rx={4}` → `rx: 4px`
 
 ### `ry`
 
@@ -1454,7 +1454,7 @@ The ry CSS property sets the vertical radius of an `<ellipse>` or the vertical c
 
 - Writes: `ry`
 - Values: `auto`, a number, anything else the types allow
-- Example: `ry={4}` → `ry: 4`
+- Example: `ry={4}` → `ry: 4px`
 
 ### `saturate`
 
@@ -1562,10 +1562,10 @@ The stroke CSS property defines the color or SVG paint server used to draw an el
 
 ### `strokeDasharray`
 
-The stroke-dasharray CSS property turns an SVG stroke into dashes: a single number is the dash and the gap alike, a string is the full pattern (`'8 4'`). Lengths are user units.
+The stroke-dasharray CSS property turns an SVG stroke into dashes: a single number is the dash and the gap alike, a string is the full pattern (`'8 4'`). Lengths are user units. `dashed` (four widths on, two off) and `dotted` (one on, one off) follow the `strokeWidth` prop, so a thicker line keeps its pattern.
 
 - Writes: `stroke-dasharray`
-- Values: a number, anything else the types allow
+- Values: `dashed` · `dotted`, a number, anything else the types allow
 - Example: `strokeDasharray={4}` → `stroke-dasharray: 4`
 
 ### `strokeDashoffset`
@@ -1610,11 +1610,11 @@ The stroke-opacity CSS property defines the opacity of the paint applied to an S
 
 ### `strokeWidth`
 
-The stroke-width CSS property sets the width of an SVG element's stroke, in user units — `strokeWidth={2}` is `stroke-width: 2`, no divider.
+The stroke-width CSS property sets the width of an SVG element's stroke, in user units — `strokeWidth={2}` is `stroke-width: 2`, no divider. It also sets `--boxStrokeWidth`, which `strokeDasharray="dashed"` scales with. Firefox drops a unitless one inside `calc()`, hence the `px`.
 
-- Writes: `stroke-width`
+- Writes: `--boxStrokeWidth`, `stroke-width`
 - Values: a number
-- Example: `strokeWidth={4}` → `stroke-width: 4`
+- Example: `strokeWidth={4}` → `--boxStrokeWidth: 4px; stroke-width: 4`
 
 ### `tableLayout`
 
@@ -1704,6 +1704,30 @@ The top CSS property sets the vertical position of a positioned element. This in
 - Values: 55 named values, a number, anything else the types allow
 - Example: `top={4}` → `top: 1rem`
 
+### `touchAction`
+
+The touch-action CSS property sets which gestures the browser keeps for itself on a touch screen: `none` hands every press to the page, which is what a drag needs, and `pan-y` keeps the vertical scroll while a sideways swipe is the page's.
+
+- Writes: `touch-action`
+- Values: `auto` · `none` · `manipulation` · `pan-x` · `pan-y` · `pinch-zoom` · `pan-x pan-y` · `pan-x pinch-zoom` · `pan-y pinch-zoom` · `pan-x pan-y pinch-zoom`
+- Example: `touchAction="auto"` → `touch-action: auto`
+
+### `transformBox`
+
+The box `transformOrigin` is measured in. An SVG shape's default is `view-box`, so it turns about the viewBox's corner; `transformBox="fill-box"` with `transformOrigin="center"` turns it about its own centre.
+
+- Writes: `transform-box`
+- Values: `content-box` · `border-box` · `fill-box` · `stroke-box` · `view-box`
+- Example: `transformBox="content-box"` → `transform-box: content-box`
+
+### `transformOrigin`
+
+The point `rotate` and `scale` turn about: a keyword (`'center'`, `'top left'`), a fraction or a percentage, a number on the ÷4 scale, or two or three positions as CSS writes them (`'48px 48px'`, `'1/2 1/4'`).
+
+- Writes: `transform-origin`
+- Values: a number, anything else the types allow
+- Example: `transformOrigin={4}` → `transform-origin: 1rem`
+
 ### `transition`
 
 What a transition applies to: `all` (what the base class already does), `none`, or one of the property groups — `colors`, `opacity`, `shadow`, `transform`, `size`, `filter`.
@@ -1866,11 +1890,11 @@ The will-change CSS property warns the browser that a property is about to chang
 
 ### `x`
 
-Positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or nested `<svg>` horizontally, in user units. Not `<text>`, whose `x` takes a list of positions and stays an attribute — pass it in `props`.
+Positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` or nested `<svg>` horizontally, in user units. Not `<text>`, whose `x` takes a list of positions: `<SvgText x={4}>` writes it as the attribute.
 
 - Writes: `x`
 - Values: a number, anything else the types allow
-- Example: `x={4}` → `x: 4`
+- Example: `x={4}` → `x: 4px`
 
 ### `y`
 
@@ -1878,7 +1902,7 @@ The y CSS property positions a `<rect>`, `<image>`, `<use>`, `<foreignObject>` o
 
 - Writes: `y`
 - Values: a number, anything else the types allow
-- Example: `y={4}` → `y: 4`
+- Example: `y={4}` → `y: 4px`
 
 ### `zIndex`
 

package/effects.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);var r=t.i(),i=r?n.useLayoutEffect:n.useEffect,a=r?n.default.useInsertionEffect??n.useLayoutEffect:n.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+const e=require("./platform.cjs");let t=require("react");var n=e.i(),r=n?t.useLayoutEffect:t.useEffect,i=n?t.useInsertionEffect:t.useEffect;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/effects.mjs

@@ -1,6 +1,6 @@
 import { i as e } from "./platform.mjs";
-import t, { useEffect as n, useLayoutEffect as r } from "react";
+import { useEffect as t, useInsertionEffect as n, useLayoutEffect as r } from "react";
 //#region src/react/effects.ts
-var i = e(), a = i ? r : n, o = i ? t.useInsertionEffect ?? r : n;
+var i = e(), a = i ? r : t, o = i ? n : t;
 //#endregion
 export { a as n, o as t };

package/identity.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs");let t=require("react");t=e.t(t,1);var n=t.default.useId??(()=>void 0),r=0;function i(e){return e.replace(/[^\w-]/g,``)}function a(e=`box`){let a=n(),[o]=(0,t.useState)(()=>`${++r}`);return`${e}-${a?i(a):o}`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+let e=require("react");function t(e){return e.replace(/[^\w-]/g,``)}function n(n=`box`){return`${n}-${t((0,e.useId)())}`}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return n}});

package/identity.mjs

@@ -1,12 +1,10 @@
-import e, { useState as t } from "react";
+import { useId as e } from "react";
 //#region src/react/identity/useIdentifier.ts
-var n = e.useId ?? (() => void 0), r = 0;
-function i(e) {
+function t(e) {
 	return e.replace(/[^\w-]/g, "");
 }
-function a(e = "box") {
-	let a = n(), [o] = t(() => `${++r}`);
-	return `${e}-${a ? i(a) : o}`;
+function n(n = "box") {
+	return `${n}-${t(e())}`;
 }
 //#endregion
-export { a as t };
+export { n as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -104,6 +104,8 @@
     "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:csstype": "node scripts/check-csstype.mjs",
+    "docs:csstype": "node scripts/check-csstype.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",
@@ -548,7 +550,7 @@
         "../dataGridDateParts.mjs"
       ],
       "gzip": true,
-      "limit": "99.89 kB"
+      "limit": "100.21 kB"
     },
     {
       "name": "Interaction delivery, the chunk the first Box.onInteraction fetches",
@@ -614,7 +616,7 @@
         "./interactionListening.mjs"
       ],
       "gzip": true,
-      "limit": "169.84 kB"
+      "limit": "170.45 kB"
     }
   ],
   "repository": {
@@ -648,15 +650,10 @@
     "url": "https://github.com/box-kite/box-kite/issues"
   },
   "homepage": "https://www.box-kite.dev",
-  "description": "One React component with 235 typed CSS props that generates atomic CSS at runtime — no CSS files, no build step, renders in a Server Component.",
+  "description": "One React component that takes CSS properties as typed props and generates atomic CSS at runtime — no CSS files, no build step, renders in a Server Component.",
   "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "@box-kite/core": "2.3.0",
-    "csstype": "^3.2.3",
-    "use-sync-external-store": "^1.6.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
@@ -686,13 +683,13 @@
     "@types/node": "^26.1.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
-    "@types/use-sync-external-store": "^1.5.0",
     "@vitejs/plugin-react": "^6.0.5",
     "@vitest/coverage-v8": "^4.1.11",
     "ag-grid-community": "^36.2.0",
     "ag-grid-react": "^36.2.0",
     "axe-core": "^4.13.0",
     "create-vite": "^9.3.0",
+    "csstype": "^3.2.3",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import-x": "^4.17.1",
@@ -719,5 +716,8 @@
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "zod": "^4.6.5"
+  },
+  "dependencies": {
+    "@box-kite/core": "2.4.0"
   }
 }

package/react/effects.d.ts

@@ -1,10 +1,9 @@
-import { default as React, useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 /** A layout effect on the browser, a passive one everywhere else. */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 /**
- * An insertion effect on the browser, falling back to a layout effect on React 16/17 — React's own
- * recommendation for injecting CSS-in-JS. Insertion effects run during the commit ahead of *every* layout
- * effect, so a component measuring its DOM already sees the styles. Off the browser nothing paints and
- * `getStyles()` flushes for itself, so `useEffect` keeps React quiet.
+ * An insertion effect on the browser — React's own recommendation for injecting CSS-in-JS. It runs during
+ * the commit ahead of *every* layout effect, so a component measuring its DOM already sees the styles. Off
+ * the browser nothing paints and `getStyles()` flushes for itself, so `useEffect` keeps React quiet.
  */
 export declare const useIsomorphicInsertionEffect: typeof useLayoutEffect;

package/react/identity/useIdentifier.d.ts

@@ -10,8 +10,5 @@
  * const id = useIdentifier('select');
  * // `${id}-trigger`, `${id}-listbox`
  * ```
- *
- * On React 16/17 the fallback is a module counter, which cannot match between a server render and
- * the client one — pass ids in explicitly there if the tree is hydrated.
  */
 export default function useIdentifier(prefix?: string): string;