@box-kite/react 2.2.5 → 2.2.7

package/docs/props.md

@@ -13,7 +13,7 @@ A prop that is not here does not exist: reach for `css={{ … }}` for a one-off,
 The accent-color CSS property tints the parts of a native control the page does not draw: a checkbox's tick, a radio's dot, a range track, a progress bar. The one way to brand them without `appearance="none"` and a rebuild, and it inherits — set it once on a form.
 
 - Writes: `accent-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `accentColor="sky-500"` → `accent-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `ai`
@@ -285,15 +285,15 @@ Which box the background is painted inside — and `text`, which clips it to the
 The background-color CSS property sets the background color of an element.
 
 - Writes: `background-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `bgColor="sky-500"` → `background-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `bgGradient`
 
-A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one.
+A gradient written as a value: the key names the kind and carries its geometry (`linear` a direction or an angle, `radial` a shape, `conic` an angle to start from), `colors` are the stops in order — a palette token, one with an opacity modifier, or a `[colour, position]` pair. `interpolate="oklch"` is what keeps a two-stop gradient out of the grey middle sRGB runs it through. Writes `background-image`, so it and `bgImage` are the same property: use one. `'none'` clears it — the only way a variant or a design can take a gradient back off, since `bgGradient` is declared after `bgImage` and wins the property.
 
 - Writes: `background-image`
-- Values: whatever the types allow
+- Values: `none`, anything else the types allow
 - Example: `bgGradient={{ linear: 'r', colors: ['blue-500', 'pink-500'] }}` → `background-image: linear-gradient(to right,var(--blue-500,oklch(62.3% .214 259.8)),var(--pink-500,oklch(65.6% .241 354.3)))`
 
 ### `bgImage`
@@ -333,7 +333,7 @@ Whether a table's cell borders are shared or every cell keeps its own. `collapse
 The border-color shorthand CSS property sets the color of an element's border.
 
 - Writes: `border-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `borderColor="sky-500"` → `border-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `borderRadius`
@@ -541,7 +541,7 @@ The border-width shorthand CSS property sets the width of an element's top and b
 The caret-color CSS property sets the colour of the insertion caret in a text field or any editable element.
 
 - Writes: `caret-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `caretColor="sky-500"` → `caret-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `clipPath`
@@ -557,7 +557,7 @@ The clip-path CSS property creates a clipping region that sets what part of an e
 The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
 
 - Writes: `color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `color="sky-500"` → `color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `colorScheme`
@@ -693,7 +693,7 @@ A shadow cast by the element's *shape* rather than its box — the one that foll
 What colour `dropShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxDropShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `dropShadowColor="sky-500"` → `--boxDropShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fieldSizing`
@@ -709,7 +709,7 @@ The field-sizing CSS property lets a form control size itself to its content: `f
 The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute. Takes a colour token, a paint server the document defines (`fill="url(#sky)"` — a `<LinearGradient>` or a pattern) or a variable somebody else declared (`fill="var(--chart-1)"`).
 
 - Writes: `fill`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `fill="sky-500"` → `fill: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `fillOpacity`
@@ -925,7 +925,7 @@ The same ring, drawn inside the border box: an inner hairline that needs no seco
 What colour `insetRing` draws in. `currentColor` otherwise.
 
 - Writes: `--boxInsetRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetRingColor="sky-500"` → `--boxInsetRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetShadow`
@@ -941,7 +941,7 @@ A shadow drawn inside the border box: `xxs`, `xs` or `sm`. Its own layer, so it
 What colour `insetShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxInsetShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `insetShadowColor="sky-500"` → `--boxInsetShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `insetStart`
@@ -1018,10 +1018,10 @@ The left CSS property participates in specifying the horizontal position of a po
 
 ### `letterSpacing`
 
-The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
+The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. A number is pixels; Tailwind's tracking names (`tighter` … `widest`) are in `em`, so they scale with the text — what a display heading wants.
 
 - Writes: `letter-spacing`
-- Values: a number
+- Values: `tighter` · `tight` · `normal` · `wide` · `wider` · `widest`, a number
 - Example: `letterSpacing={4}` → `letter-spacing: 4px`
 
 ### `lineHeight`
@@ -1189,7 +1189,7 @@ The CSS outline-width property sets the thickness of an element's outline. An ou
 The outline-color CSS property sets the color of an element's outline.
 
 - Writes: `outline-color`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `outlineColor="sky-500"` → `outline-color: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `outlineOffset`
@@ -1421,7 +1421,7 @@ A hard-edged shadow outside the border box, in px — `ring={2}`. Unlike `outlin
 What colour `ring` draws in. `currentColor` otherwise.
 
 - Writes: `--boxRingColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `ringColor="sky-500"` → `--boxRingColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `rotate`
@@ -1477,7 +1477,7 @@ The scale CSS property lets you specify scale transforms individually and indepe
 The scrollbar-color CSS property sets the color of the scrollbar thumb and track. The value pair is [thumbColor, trackColor].
 
 - Writes: `scrollbar-color`
-- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,none`
+- Values: `currentColor,transparent,green,red,blue,gray,black,white,vi,slate-50,slate-100,slate-200,slate-300,slate-400,slate-500,slate-600,slate-700,slate-800,slate-900,slate-950,gray-50,gray-100,gray-200,gray-300,gray-400,gray-500,gray-600,gray-700,gray-800,gray-900,gray-950,zinc-50,zinc-100,zinc-200,zinc-300,zinc-400,zinc-500,zinc-600,zinc-700,zinc-800,zinc-900,zinc-950,neutral-50,neutral-100,neutral-200,neutral-300,neutral-400,neutral-500,neutral-600,neutral-700,neutral-800,neutral-900,neutral-950,stone-50,stone-100,stone-200,stone-300,stone-400,stone-500,stone-600,stone-700,stone-800,stone-900,stone-950,mauve-50,mauve-100,mauve-200,mauve-300,mauve-400,mauve-500,mauve-600,mauve-700,mauve-800,mauve-900,mauve-950,mist-50,mist-100,mist-200,mist-300,mist-400,mist-500,mist-600,mist-700,mist-800,mist-900,mist-950,olive-50,olive-100,olive-200,olive-300,olive-400,olive-500,olive-600,olive-700,olive-800,olive-900,olive-950,taupe-50,taupe-100,taupe-200,taupe-300,taupe-400,taupe-500,taupe-600,taupe-700,taupe-800,taupe-900,taupe-950,red-50,red-100,red-200,red-300,red-400,red-500,red-600,red-700,red-800,red-900,red-950,orange-50,orange-100,orange-200,orange-300,orange-400,orange-500,orange-600,orange-700,orange-800,orange-900,orange-950,amber-50,amber-100,amber-200,amber-300,amber-400,amber-500,amber-600,amber-700,amber-800,amber-900,amber-950,yellow-50,yellow-100,yellow-200,yellow-300,yellow-400,yellow-500,yellow-600,yellow-700,yellow-800,yellow-900,yellow-950,lime-50,lime-100,lime-200,lime-300,lime-400,lime-500,lime-600,lime-700,lime-800,lime-900,lime-950,green-50,green-100,green-200,green-300,green-400,green-500,green-600,green-700,green-800,green-900,green-950,emerald-50,emerald-100,emerald-200,emerald-300,emerald-400,emerald-500,emerald-600,emerald-700,emerald-800,emerald-900,emerald-950,teal-50,teal-100,teal-200,teal-300,teal-400,teal-500,teal-600,teal-700,teal-800,teal-900,teal-950,cyan-50,cyan-100,cyan-200,cyan-300,cyan-400,cyan-500,cyan-600,cyan-700,cyan-800,cyan-900,cyan-950,sky-50,sky-100,sky-200,sky-300,sky-400,sky-500,sky-600,sky-700,sky-800,sky-900,sky-950,blue-50,blue-100,blue-200,blue-300,blue-400,blue-500,blue-600,blue-700,blue-800,blue-900,blue-950,indigo-50,indigo-100,indigo-200,indigo-300,indigo-400,indigo-500,indigo-600,indigo-700,indigo-800,indigo-900,indigo-950,violet-50,violet-100,violet-200,violet-300,violet-400,violet-500,violet-600,violet-700,violet-800,violet-900,violet-950,purple-50,purple-100,purple-200,purple-300,purple-400,purple-500,purple-600,purple-700,purple-800,purple-900,purple-950,fuchsia-50,fuchsia-100,fuchsia-200,fuchsia-300,fuchsia-400,fuchsia-500,fuchsia-600,fuchsia-700,fuchsia-800,fuchsia-900,fuchsia-950,pink-50,pink-100,pink-200,pink-300,pink-400,pink-500,pink-600,pink-700,pink-800,pink-900,pink-950,rose-50,rose-100,rose-200,rose-300,rose-400,rose-500,rose-600,rose-700,rose-800,rose-900,rose-950,accent-50,accent-100,accent-200,accent-300,accent-400,accent-500,accent-600,accent-700,accent-800,accent-900,accent-950,base-50,base-100,base-200,base-300,base-400,base-500,base-600,base-700,base-800,base-900,base-950,none`
 - Example: `scrollbarColor={['gray-400', 'gray-100']}` → `scrollbar-color: var(--gray-400,oklch(70.7% .022 261.3)) var(--gray-100,oklch(96.7% .003 264.5))`
 
 ### `scrollbarGutter`
@@ -1541,7 +1541,7 @@ The elevation of the box: `xxs` through `xxl` on the elevation scale, or one of
 What colour `shadow` draws in — the scale's own translucent black otherwise. Shows nothing on its own.
 
 - Writes: `--boxShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `shadowColor="sky-500"` → `--boxShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `shapeRendering`
@@ -1557,7 +1557,7 @@ The shape-rendering CSS property tells the renderer what to trade away when draw
 The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. Takes a colour token, `stroke="url(#sky)"` for a paint server the document defines, or `stroke="var(--chart-1)"` for a variable somebody else declared.
 
 - Writes: `stroke`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `stroke="sky-500"` → `stroke: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `strokeDasharray`
@@ -1669,7 +1669,7 @@ A shadow behind the text rather than the box: `xxs` through `lg`, recoloured by
 What colour `textShadow` draws in. Shows nothing on its own.
 
 - Writes: `--boxTextShadowColor`
-- Values: 304 named values, anything else the types allow
+- Values: 326 named values, anything else the types allow
 - Example: `textShadowColor="sky-500"` → `--boxTextShadowColor: var(--sky-500,oklch(68.5% .169 237.3))`
 
 ### `textTransform`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@box-kite/react",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "type": "module",
   "sideEffects": [
     "pages/**"
@@ -44,6 +44,11 @@
       "import": "./interop.mjs",
       "require": "./interop.cjs"
     },
+    "./date": {
+      "types": "./date.d.ts",
+      "import": "./date.mjs",
+      "require": "./date.cjs"
+    },
     "./spec": {
       "types": "./spec.d.ts",
       "import": "./spec.mjs",
@@ -76,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",
@@ -93,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",
@@ -117,7 +125,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.07 KB"
+      "limit": "40.47 kB"
     },
     {
       "name": "Box in a Server Component (react-server entry)",
@@ -129,7 +137,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "37.10 KB"
+      "limit": "38.18 kB"
     },
     {
       "name": "Behavior primitives (a11y entry)",
@@ -165,7 +173,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "58.71 KB"
+      "limit": "61.80 kB"
     },
     {
       "name": "Spec renderer (spec entry)",
@@ -191,11 +199,23 @@
       "gzip": true,
       "limit": "4 KB"
     },
+    {
+      "name": "Dates, times and zones (date entry, no React)",
+      "path": "dist/date.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "7.59 KB"
+    },
     {
       "name": "Core engine (@box-kite/core, no React)",
       "path": "dist-core/core.mjs",
       "gzip": true,
-      "limit": "38.31 KB",
+      "limit": "39.43 kB",
       "ignore": [
         "./diagnostics-*",
         "./themeReveal-*"
@@ -211,7 +231,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.14 KB"
+      "limit": "42.53 kB"
     },
     {
       "name": "Popover",
@@ -223,7 +243,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.68 KB"
+      "limit": "44.08 kB"
     },
     {
       "name": "Menu",
@@ -235,7 +255,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.94 KB"
+      "limit": "46.32 kB"
     },
     {
       "name": "Accordion",
@@ -247,7 +267,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.41 KB"
+      "limit": "41.80 kB"
     },
     {
       "name": "Agent",
@@ -259,7 +279,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.19 KB"
+      "limit": "42.57 kB"
     },
     {
       "name": "Markdown",
@@ -271,7 +291,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "39.66 KB"
+      "limit": "41.04 kB"
     },
     {
       "name": "List",
@@ -283,7 +303,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.98 KB"
+      "limit": "42.38 kB"
     },
     {
       "name": "SwipeItem",
@@ -295,7 +315,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.06 KB"
+      "limit": "45.47 kB"
     },
     {
       "name": "SortableList",
@@ -307,7 +327,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.33 KB"
+      "limit": "45.80 kB"
     },
     {
       "name": "VirtualList",
@@ -319,7 +339,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "43.16 KB"
+      "limit": "44.58 kB"
     },
     {
       "name": "Skeleton",
@@ -331,7 +351,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.98 KB"
+      "limit": "40.38 kB"
     },
     {
       "name": "Tabs",
@@ -343,7 +363,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "41.62 KB"
+      "limit": "43.01 kB"
     },
     {
       "name": "Slider",
@@ -355,7 +375,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "40.77 KB"
+      "limit": "42.16 kB"
     },
     {
       "name": "Progress",
@@ -367,7 +387,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "38.96 KB"
+      "limit": "40.35 kB"
     },
     {
       "name": "Toaster",
@@ -379,7 +399,67 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "42.40 KB"
+      "limit": "43.78 kB"
+    },
+    {
+      "name": "DateField",
+      "path": "dist/components/dateField.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "49.03 kB"
+    },
+    {
+      "name": "Calendar",
+      "path": "dist/components/calendar.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "48.39 kB"
+    },
+    {
+      "name": "DatePicker",
+      "path": "dist/components/datePicker.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "61.10 kB"
+    },
+    {
+      "name": "DateTime",
+      "path": "dist/components/dateTime.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "43.92 kB"
+    },
+    {
+      "name": "TimeZoneSelect",
+      "path": "dist/components/timeZoneSelect.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*"
+      ],
+      "gzip": true,
+      "limit": "51.50 kB"
     },
     {
       "name": "Combobox",
@@ -391,7 +471,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "48.21 KB"
+      "limit": "49.59 kB"
     },
     {
       "name": "Dashboard",
@@ -403,7 +483,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "44.62 KB"
+      "limit": "46.06 kB"
     },
     {
       "name": "DataGrid",
@@ -413,10 +493,11 @@
         "react-dom",
         "./diagnostics-*",
         "./themeReveal-*",
-        "../dataGridList.mjs"
+        "../dataGridList.mjs",
+        "../dataGridDateParts.mjs"
       ],
       "gzip": true,
-      "limit": "93.23 KB"
+      "limit": "95.67 kB"
     },
     {
       "name": "DataGrid export, the chunk fetched on the first press",
@@ -444,6 +525,20 @@
       "gzip": true,
       "limit": "7.83 KB"
     },
+    {
+      "name": "DataGrid dates, the chunk a grid with a date column fetches on top of the grid",
+      "path": "dist/dataGridDateParts.mjs",
+      "ignore": [
+        "react",
+        "react-dom",
+        "./diagnostics-*",
+        "./themeReveal-*",
+        "./box.mjs",
+        "./components/*"
+      ],
+      "gzip": true,
+      "limit": "7.49 KB"
+    },
     {
       "name": "Full library (Box + ssg + every component)",
       "path": "dev/size-full.mjs",
@@ -454,7 +549,7 @@
         "./themeReveal-*"
       ],
       "gzip": true,
-      "limit": "140.38 KB"
+      "limit": "163.09 kB"
     }
   ],
   "repository": {
@@ -494,13 +589,14 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@box-kite/core": "2.2.5",
+    "@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",
@@ -531,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/boxComponent.d.ts

@@ -4,7 +4,7 @@ type Render = (props: any, ref: any) => React.ReactNode;
  * A component that is a Box: memoized, which skips a leaf whose props are all primitives, and one fiber on
  * React 19. React 18 needs a `forwardRef` under the `memo`, which makes it two.
  */
-export default function boxComponent(render: Render, displayName: string): React.MemoExoticComponent<((props: {
+export default function boxComponent(render: Render, displayName: string): React.MemoExoticComponent<(({ ref, ...props }: {
     ref?: Ref<unknown>;
 }) => React.ReactNode) | React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>>;
 export {};

package/react/date/dateChange.d.ts

@@ -0,0 +1,18 @@
+import { DateReadings } from '../../utils/date/dateTime';
+import { ChangeDetails } from '../a11y/useControllableState';
+/**
+ * Why a date value changed: digits or arrows in a field, a paste, a day picked in a calendar or a time in a
+ * list, a preset, the clear button, or a form reset.
+ */
+export type DateChangeReason = 'keyboard' | 'paste' | 'select' | 'preset' | 'clear' | 'reset';
+/**
+ * What a date control hands its `onValueChange` beside the string: the reason, plus every reading of the
+ * value an app is likely to want — `utc`, the reader's `local` wall clock, a `Date`, the epoch.
+ *
+ * ```tsx
+ * <DateField type="datetime" onValueChange={(value, { utc, local }) => save(utc)} />
+ * ```
+ */
+export type DateChangeDetails<TReason extends string = DateChangeReason> = ChangeDetails<TReason> & DateReadings;
+/** A date control's change handler: the canonical string (or `null`) and the readings. */
+export type DateChangeHandler<TValue = string | null, TReason extends string = DateChangeReason> = (value: TValue, details: DateChangeDetails<TReason>) => void;

package/react/date/dateEnvironment.d.ts

@@ -0,0 +1,34 @@
+import { ZoneInput } from '../../utils/date/zones';
+/** What a subtree knows about its reader: the language and the zone. */
+export interface DateEnvironmentValue {
+    /** A BCP 47 tag. */
+    locale?: string;
+    /** The reader's zone — what `'local'` means inside. */
+    timeZone?: string;
+}
+export interface DateProviderProps extends DateEnvironmentValue {
+    children?: React.ReactNode;
+}
+/**
+ * Says who the reader is for every date component inside: their language and their zone. On a server that
+ * read the zone off a cookie (`readZoneCookie`), this is what makes the first paint already right — the
+ * server and the browser render the same text, and nothing changes after hydration.
+ */
+export declare function DateProvider({ locale, timeZone, children }: DateProviderProps): import("react").JSX.Element;
+export interface DateEnvironment {
+    locale: string;
+    /** The zone resolved to a name: `UTC`, an IANA zone or a fixed offset. */
+    zone: string;
+    /** The reader's own zone, which is what `'local'` resolved to. */
+    readerZone: string;
+}
+/**
+ * The locale and zone a date component renders in. A prop wins, then a `DateProvider`, then
+ * `configureDates()`, then the browser. **A server and a hydrating browser both use the fallback** — `UTC` and
+ * `en-US` unless something above configured them — because neither can know the other's runtime, and two
+ * renders that disagree are a hydration error. The render after hydration switches to the reader's own.
+ */
+export declare function useDateEnvironment(props?: {
+    locale?: string;
+    zone?: ZoneInput;
+}): DateEnvironment;

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/react-shared.cjs

@@ -1 +1 @@
-const e=require("./rolldown-runtime.cjs");let t=require("react");t=e.t(t,1);let n=require("@box-kite/core");function r({classNames:e,styleElements:t},r){return{className:(0,n.classNames)(e,r).join(` `),styles:t}}var i=parseInt(t.default.version,10)>=19;function a(e,n){let r=i?t=>e(t,t.ref??null):(0,t.forwardRef)(e),a=(0,t.memo)(r);return r.displayName=n,a.displayName=n,a}var o={selected:`aria-selected`},s;(function(e){function t(e,t,n){e!==void 0&&e!=null&&(n[o[t]??t]=Array.isArray(e)?e[0]:e)}e.assignBooleanProp=t})(s||={});var c=s;function l(e,t){let r=e,{props:i,className:a,disabled:o,required:s,checked:l,selected:u}=r,d={...i,className:(0,n.classNames)(t,a).join(` `)};return c.assignBooleanProp(o,`disabled`,d),c.assignBooleanProp(s,`required`,d),c.assignBooleanProp(l,`checked`,d),c.assignBooleanProp(u,`selected`,d),`style`in r&&(d.style=r.style),`id`in r&&(d.id=r.id),d}var u=parseInt(t.default.version,10)>=19,d=!1,f=new WeakMap,p=new WeakMap;function m(e){let n=f.get(e);if(!n){let{href:r,css:i,precedence:a}=e;n=t.default.createElement(`style`,{key:r,href:r,precedence:a,dangerouslySetInnerHTML:{__html:i}}),f.set(e,n)}return n}function h(e){if(!e?.length)return;!u&&!d&&(d=!0,console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${t.default.version} will render them inline. Use the default sink instead.`));let n=p.get(e);return n||(n=e.map(m),p.set(e,n)),n}function g(e,t,r){let{classNames:i,signature:a,styleElements:o}=(0,n.getDefaultEngine)().resolveClassNames(e,t,r);return{classNames:i,signature:a,styleElements:h(o)}}var _=`__boxAttributesInProps`;function v(e){return e[_]=!0,e}function y(e){return typeof e==`function`||typeof e==`object`&&e?e[_]===!0:!1}var b=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function x(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&b.some(e=>e in t)))return{"aria-hidden":!0}}var S;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(S||={});var C=S,w;(function(e){function t(e,t,n){let r={...e},i=r.props||{};return t.forEach(e=>{e in r&&(i[e]=r[e],delete r[e])}),n&&Object.entries(n).forEach(([e,t])=>{i[e]=t}),r.props=i,r}e.buildProps=t;function n(e){return!!e&&typeof e==`object`}e.isObject=n;function r(e,t){return e in t}e.isKeyOf=r})(w||={});var T=w,E=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],D=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function O(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return h}});
+const e=require("./rolldown-runtime.cjs");let t=require("react");t=e.t(t,1);let n=require("@box-kite/core");function r({classNames:e,styleElements:t},r){return{className:(0,n.classNames)(e,r).join(` `),styles:t}}var i=parseInt(t.default.version,10)>=19;function a(e,n){let r=i?({ref:t,...n})=>e(n,t??null):(0,t.forwardRef)(e),a=(0,t.memo)(r);return r.displayName=n,a.displayName=n,a}var o={selected:`aria-selected`},s;(function(e){function t(e,t,n){e!==void 0&&e!=null&&(n[o[t]??t]=Array.isArray(e)?e[0]:e)}e.assignBooleanProp=t})(s||={});var c=s;function l(e,t){let r=e,{props:i,className:a,disabled:o,required:s,checked:l,selected:u}=r,d={...i,className:(0,n.classNames)(t,a).join(` `)};return c.assignBooleanProp(o,`disabled`,d),c.assignBooleanProp(s,`required`,d),c.assignBooleanProp(l,`checked`,d),c.assignBooleanProp(u,`selected`,d),`style`in r&&(d.style=r.style),`id`in r&&(d.id=r.id),d}var u=parseInt(t.default.version,10)>=19,d=!1,f=new WeakMap,p=new WeakMap;function m(e){let n=f.get(e);if(!n){let{href:r,css:i,precedence:a}=e;n=t.default.createElement(`style`,{key:r,href:r,precedence:a,dangerouslySetInnerHTML:{__html:i}}),f.set(e,n)}return n}function h(e){if(!e?.length)return;!u&&!d&&(d=!0,console.warn(`[box-kite] Box.configure({ sink: 'element' }) needs React 19 to hoist and dedupe its <style> elements; React ${t.default.version} will render them inline. Use the default sink instead.`));let n=p.get(e);return n||(n=e.map(m),p.set(e,n)),n}function g(e,t,r){let{classNames:i,signature:a,styleElements:o}=(0,n.getDefaultEngine)().resolveClassNames(e,t,r);return{classNames:i,signature:a,styleElements:h(o)}}var _=`__boxAttributesInProps`;function v(e){return e[_]=!0,e}function y(e){return typeof e==`function`||typeof e==`object`&&e?e[_]===!0:!1}var b=[`role`,`aria-label`,`aria-labelledby`,`aria-hidden`];function x(e,t){if(e!==void 0)return{role:`img`,"aria-label":e};if(!(t&&b.some(e=>e in t)))return{"aria-hidden":!0}}var S;(function(e){function t(e){return e.charAt(0).toUpperCase()+e.slice(1)}e.capitalize=t})(S||={});var C=S,w;(function(e){function t(e,t,n){let r={...e},i=r.props||{};return t.forEach(e=>{e in r&&(i[e]=r[e],delete r[e])}),n&&Object.entries(n).forEach(([e,t])=>{i[e]=t}),r.props=i,r}e.buildProps=t;function n(e){return!!e&&typeof e==`object`}e.isObject=n;function r(e,t){return e in t}e.isKeyOf=r})(w||={});var T=w,E=[`sky-500`,`emerald-500`,`amber-500`,`violet-500`,`rose-500`,`cyan-500`],D=[`sky-400`,`emerald-400`,`amber-400`,`violet-400`,`rose-400`,`cyan-400`];function O(e){return e.reduce((e,t,n)=>(e[`chart-${n+1}`]=t,e),{})}Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return h}});

package/react-shared.mjs

@@ -11,7 +11,7 @@ function a({ classNames: e, styleElements: t }, n) {
 //#region src/react/boxComponent.ts
 var o = parseInt(e.version, 10) >= 19;
 function s(e, r) {
-	let i = o ? (t) => e(t, t.ref ?? null) : t(e), a = n(i);
+	let i = o ? ({ ref: t, ...n }) => e(n, t ?? null) : t(e), a = n(i);
 	return i.displayName = r, a.displayName = r, a;
 }
 //#endregion