@box-kite/react 0.0.1 → 1.0.0

package/components/textarea.mjs

@@ -0,0 +1,33 @@
+import { t as e } from "../react-shared.mjs";
+import { t } from "../forms.mjs";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@box-kite/react";
+//#region src/components/textarea.tsx
+var a = [
+	"name",
+	"onInput",
+	"onChange",
+	"value",
+	"defaultValue",
+	"rows",
+	"cols",
+	"autoFocus",
+	"maxLength",
+	"minLength",
+	"readOnly"
+];
+function o(n, o) {
+	let { placeholder: s, ...c } = n, { text: l, styles: u } = t(s), d = e.buildProps(c, a, l === void 0 ? void 0 : { placeholder: l });
+	return /* @__PURE__ */ r(i, {
+		ref: o,
+		tag: "textarea",
+		component: "textarea",
+		...d,
+		placeholder: u
+	});
+}
+var s = n(o);
+s.displayName = "Textarea";
+//#endregion
+export { s as default };

package/components/textbox.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs"),t=require("../react-shared.cjs"),n=require("../forms.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@box-kite/react");a=e.t(a,1);var o=[`name`,`onInput`,`onChange`,`type`,`step`,`defaultValue`,`autoFocus`,`readOnly`,`required`,`value`,`pattern`];function s(e,r){let{placeholder:s,...c}=e,{text:l,styles:u}=n.t(s),d=t.t.buildProps(c,o,l===void 0?void 0:{placeholder:l});return(0,i.jsx)(a.default,{ref:r,tag:`input`,component:`textbox`,...d,placeholder:u})}var c=(0,r.forwardRef)(s);c.displayName=`Textbox`,exports.default=c;

package/components/textbox.d.ts

@@ -0,0 +1,26 @@
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { OmitTagProps } from '../react/boxProps';
+import { PlaceholderProp } from '../react/forms/placeholderProp';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const tagProps: readonly ["name", "onInput", "onChange", "type", "step", "defaultValue", "autoFocus", "readOnly", "required", "value", "pattern"];
+type TagPropsType = (typeof tagProps)[number];
+type TextareaProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props' | 'placeholder'>;
+type TextboxTagProps = OmitTagProps<BoxTagProps<'input'>, TagPropsType>;
+type TextboxType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+interface Props<TKey extends keyof ComponentsAndVariants> extends TextareaProps<TKey> {
+    name?: string;
+    props?: TextboxTagProps;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    type?: TextboxType;
+    placeholder?: PlaceholderProp;
+    value?: string | number;
+    defaultValue?: string | number;
+    pattern?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    step?: number | string;
+}
+declare const _default: <TKey extends keyof ComponentsAndVariants = "textbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
+export default _default;

package/components/textbox.mjs

@@ -0,0 +1,33 @@
+import { t as e } from "../react-shared.mjs";
+import { t } from "../forms.mjs";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@box-kite/react";
+//#region src/components/textbox.tsx
+var a = [
+	"name",
+	"onInput",
+	"onChange",
+	"type",
+	"step",
+	"defaultValue",
+	"autoFocus",
+	"readOnly",
+	"required",
+	"value",
+	"pattern"
+];
+function o(n, o) {
+	let { placeholder: s, ...c } = n, { text: l, styles: u } = t(s), d = e.buildProps(c, a, l === void 0 ? void 0 : { placeholder: l });
+	return /* @__PURE__ */ r(i, {
+		ref: o,
+		tag: "input",
+		component: "textbox",
+		...d,
+		placeholder: u
+	});
+}
+var s = n(o);
+s.displayName = "Textbox";
+//#endregion
+export { s as default };

package/components/tooltip.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../behavior.cjs"),t=require("./overlay.cjs"),n=require("./presence.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(a){let{content:o,children:s,open:c,defaultOpen:l=!1,onOpenChange:u,openDelay:d=300,closeDelay:f=150,adjustTranslateX:p,adjustTranslateY:m,props:h,...g}=a,_=e.n(`tooltip`),v=g.id??_,[y,b]=e.a({value:c,defaultValue:l,onChange:u}),[x,S]=(0,r.useState)(null),C=(0,r.useRef)(null),w=(0,r.useRef)(void 0),T=(0,r.useRef)(!1),E=(0,r.useRef)(!1),D=(0,r.useRef)(!1),O=(0,r.useRef)(!1),k=(0,r.useCallback)(()=>{clearTimeout(w.current),w.current=void 0},[]),A=(0,r.useCallback)((e,t)=>{if(k(),e<=0){t();return}w.current=setTimeout(()=>{w.current=void 0,t()},e)},[k]),j=(0,r.useCallback)((e,t)=>{A(f,()=>{T.current||E.current||D.current||b(!1,{reason:e,event:t})})},[f,A,b]);e.i({enabled:y,outsidePointer:!1,inside:[C],onDismiss:(e,t)=>{k(),O.current=!0,b(!1,{reason:e,event:t})}}),(0,r.useEffect)(()=>k,[k]);let M=y&&o!=null,N=e.o(e=>{T.current=!0,!O.current&&A(d,()=>b(!0,{reason:`hover`,event:e}))}),P=e.o(e=>{T.current=!1,O.current=!1,j(`pointer-leave`,e)}),F=e.o(e=>{D.current=!0,k(),b(!0,{reason:`focus`,event:e})}),I=e.o(e=>{D.current=!1,O.current=!1,j(`blur`,e)}),L=e.o(()=>{E.current=!0,k()}),R=e.o(e=>{E.current=!1,j(`pointer-leave`,e)}),z=(0,r.useMemo)(()=>({ref:S,props:{"aria-describedby":M?v:void 0,onPointerEnter:N,onPointerLeave:P,onFocus:F,onBlur:I}}),[I,N,F,P,M,v]);return(0,i.jsxs)(i.Fragment,{children:[s(z),(0,i.jsx)(n.default,{present:M,children:e=>(0,i.jsx)(t.default,{ref:C,contentRef:e.ref,anchor:x,anchorSide:`bottom`,matchWidth:!1,adjustTranslateX:p,adjustTranslateY:m??`4px`,component:`tooltip`,...g,variant:[g.variant,{closed:!e.present}],id:v,props:{role:`tooltip`,...e.props,...h,onPointerEnter:L,onPointerLeave:R},children:o})})]})}a.displayName=`Tooltip`,exports.default=a;

package/components/tooltip.d.ts

@@ -0,0 +1,63 @@
+import { BoxProps } from '../box';
+import { ChangeHandler } from '../react/a11y/useControllableState';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+/** Why the tooltip opened or closed — `onOpenChange` gets this alongside the event that did it. */
+export type TooltipReason = 'hover' | 'focus' | 'pointer-leave' | 'blur' | 'escape';
+/** The DOM attributes and handlers the trigger has to carry. */
+export interface TooltipTriggerAttributes {
+    'aria-describedby'?: string;
+    onPointerEnter(event: React.PointerEvent): void;
+    onPointerLeave(event: React.PointerEvent): void;
+    onFocus(event: React.FocusEvent): void;
+    onBlur(event: React.FocusEvent): void;
+}
+/**
+ * What the trigger has to carry: spread it onto the control itself, not a wrapper, because
+ * `aria-describedby` only means something on the element the user lands on. The `ref` is what the
+ * tooltip is positioned against, so it is not optional decoration (see `anchor` on `Overlay`).
+ *
+ * ```tsx
+ * {(trigger) => <Button {...trigger}>Delete</Button>}          // a Box component
+ * {(trigger) => <button ref={trigger.ref} {...trigger.props}>} // a plain element
+ * ```
+ */
+export interface TooltipTrigger {
+    ref: React.RefCallback<HTMLElement>;
+    props: TooltipTriggerAttributes;
+}
+type TooltipBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'children' | 'content' | 'open'>;
+interface Props<TKey extends keyof ComponentsAndVariants> extends TooltipBoxProps<TKey> {
+    /** The description itself. Nothing renders while this is empty. */
+    content?: React.ReactNode;
+    /** The trigger, handed the ref and props that wire it to the tooltip. */
+    children: (trigger: TooltipTrigger) => React.ReactNode;
+    /** Controlled open state. Leave it out and the tooltip owns it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: ChangeHandler<boolean, TooltipReason>;
+    /**
+     * How long the pointer has to rest on the trigger, in ms. Default 300 — sweeping across a toolbar should
+     * not light every control up. Focus ignores it: a keyboard user asked for the tooltip by arriving.
+     */
+    openDelay?: number;
+    /** The grace period after the pointer leaves, in ms. Default 150, so the pointer can reach the tooltip (WCAG 1.4.13). */
+    closeDelay?: number;
+    adjustTranslateX?: string;
+    adjustTranslateY?: string;
+}
+/**
+ * The APG tooltip: a description that appears on hover *and* on focus and stays until the user is done
+ * with it. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ *
+ * ```tsx
+ * <Tooltip content="Deletes the row for good">{(trigger) => <Button {...trigger}>Delete</Button>}</Tooltip>
+ * ```
+ *
+ * The trigger is a render prop rather than a cloned child: cloning would have to guess where a child
+ * wants its DOM attributes (Box takes a `props` bag, a `<button>` takes them on top), and guessing wrong
+ * on `aria-describedby` costs the thing the pattern is for. The component owns `role="tooltip"`, the
+ * `aria-describedby`, and WCAG 1.4.13's three obligations — dismissible with Escape without moving focus,
+ * hoverable, and never closed on a timer. Focus never enters it: a focusable tooltip is a mislabelled dialog.
+ */
+declare function Tooltip<TKey extends keyof ComponentsAndVariants = 'tooltip'>(props: Props<TKey>): import("react").JSX.Element;
+export default Tooltip;

package/components/tooltip.mjs

@@ -0,0 +1,108 @@
+"use client";
+import { a as e, i as t, n, o as r } from "../behavior.mjs";
+import i from "./overlay.mjs";
+import a from "./presence.mjs";
+import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/tooltip.tsx
+function m(m) {
+	let { content: h, children: g, open: _, defaultOpen: v = !1, onOpenChange: y, openDelay: b = 300, closeDelay: x = 150, adjustTranslateX: S, adjustTranslateY: C, props: w, ...T } = m, E = n("tooltip"), D = T.id ?? E, [O, k] = e({
+		value: _,
+		defaultValue: v,
+		onChange: y
+	}), [A, j] = u(null), M = l(null), N = l(void 0), P = l(!1), F = l(!1), I = l(!1), L = l(!1), R = o(() => {
+		clearTimeout(N.current), N.current = void 0;
+	}, []), z = o((e, t) => {
+		if (R(), e <= 0) {
+			t();
+			return;
+		}
+		N.current = setTimeout(() => {
+			N.current = void 0, t();
+		}, e);
+	}, [R]), B = o((e, t) => {
+		z(x, () => {
+			P.current || F.current || I.current || k(!1, {
+				reason: e,
+				event: t
+			});
+		});
+	}, [
+		x,
+		z,
+		k
+	]);
+	t({
+		enabled: O,
+		outsidePointer: !1,
+		inside: [M],
+		onDismiss: (e, t) => {
+			R(), L.current = !0, k(!1, {
+				reason: e,
+				event: t
+			});
+		}
+	}), s(() => R, [R]);
+	let V = O && h != null, H = r((e) => {
+		P.current = !0, !L.current && z(b, () => k(!0, {
+			reason: "hover",
+			event: e
+		}));
+	}), U = r((e) => {
+		P.current = !1, L.current = !1, B("pointer-leave", e);
+	}), W = r((e) => {
+		I.current = !0, R(), k(!0, {
+			reason: "focus",
+			event: e
+		});
+	}), G = r((e) => {
+		I.current = !1, L.current = !1, B("blur", e);
+	}), K = r(() => {
+		F.current = !0, R();
+	}), q = r((e) => {
+		F.current = !1, B("pointer-leave", e);
+	}), J = c(() => ({
+		ref: j,
+		props: {
+			"aria-describedby": V ? D : void 0,
+			onPointerEnter: H,
+			onPointerLeave: U,
+			onFocus: W,
+			onBlur: G
+		}
+	}), [
+		G,
+		H,
+		W,
+		U,
+		V,
+		D
+	]);
+	return /* @__PURE__ */ p(d, { children: [g(J), /* @__PURE__ */ f(a, {
+		present: V,
+		children: (e) => /* @__PURE__ */ f(i, {
+			ref: M,
+			contentRef: e.ref,
+			anchor: A,
+			anchorSide: "bottom",
+			matchWidth: !1,
+			adjustTranslateX: S,
+			adjustTranslateY: C ?? "4px",
+			component: "tooltip",
+			...T,
+			variant: [T.variant, { closed: !e.present }],
+			id: D,
+			props: {
+				role: "tooltip",
+				...e.props,
+				...w,
+				onPointerEnter: K,
+				onPointerLeave: q
+			},
+			children: h
+		})
+	})] });
+}
+m.displayName = "Tooltip";
+//#endregion
+export { m as default };

package/components/visuallyHidden.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../rolldown-runtime.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@box-kite/react");r=e.t(r,1);var i=.25;function a(e,t){return(0,n.jsx)(r.default,{ref:t,position:`absolute`,width:i,height:i,p:0,b:0,overflow:`hidden`,whiteSpace:`nowrap`,clipPath:`inset(50%)`,...e})}var o=(0,t.forwardRef)(a);o.displayName=`VisuallyHidden`,exports.default=o;

package/components/visuallyHidden.d.ts

@@ -0,0 +1,6 @@
+import { RefAttributes } from 'react';
+import { BoxProps } from '../box';
+import { ExtractElementFromTag } from '../react/reactTypes';
+import { ComponentsAndVariants } from '@box-kite/core/types';
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div", TKey extends keyof ComponentsAndVariants = never>(props: BoxProps<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
+export default _default;

package/components/visuallyHidden.mjs

@@ -0,0 +1,23 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@box-kite/react";
+//#region src/components/visuallyHidden.tsx
+var r = .25;
+function i(e, i) {
+	return /* @__PURE__ */ t(n, {
+		ref: i,
+		position: "absolute",
+		width: r,
+		height: r,
+		p: 0,
+		b: 0,
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		clipPath: "inset(50%)",
+		...e
+	});
+}
+var a = e(i);
+a.displayName = "VisuallyHidden";
+//#endregion
+export { a as default };

package/effects.cjs

@@ -0,0 +1 @@
+const e=require("./rolldown-runtime.cjs"),t=require("./platform.cjs");let n=require("react");n=e.t(n,1);var r=t.n(),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}});

package/effects.mjs

@@ -0,0 +1,6 @@
+import { n as e } from "./platform.mjs";
+import t, { useEffect 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;
+//#endregion
+export { a as n, o as t };

package/forms.cjs

@@ -0,0 +1 @@
+const e=require("./components/flex.cjs");let t=require("react/jsx-runtime");function n({label:n,labelProps:r,children:i}){return n==null||n===!1?i:(0,t.jsxs)(e.default,{inline:!0,tag:`label`,ai:`center`,gap:2,cursor:`pointer`,...r,children:[i,n]})}function r(e){return e==null?{}:typeof e==`string`?{text:e}:{styles:e}}Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return r}});

package/forms.mjs

@@ -0,0 +1,21 @@
+import e from "./components/flex.mjs";
+import { jsxs as t } from "react/jsx-runtime";
+//#region src/react/forms/labelledControl.tsx
+function n({ label: n, labelProps: r, children: i }) {
+	return n == null || n === !1 ? i : /* @__PURE__ */ t(e, {
+		inline: !0,
+		tag: "label",
+		ai: "center",
+		gap: 2,
+		cursor: "pointer",
+		...r,
+		children: [i, n]
+	});
+}
+//#endregion
+//#region src/react/forms/placeholderProp.ts
+function r(e) {
+	return e == null ? {} : typeof e == "string" ? { text: e } : { styles: e };
+}
+//#endregion
+export { n, r as t };

package/icons/dotsIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function DotsIcon(props: SvgProps): import("react").JSX.Element;

package/icons/expandIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function ExpandIcon(props: SvgProps): import("react").JSX.Element;

package/icons/groupingIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function GroupingIcon(props: SvgProps): import("react").JSX.Element;

package/icons/pinIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function PinIcon(props: SvgProps): import("react").JSX.Element;

package/icons/searchIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function SearchIcon(props: SvgProps): import("react").JSX.Element;

package/icons/sortIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../components/svg';
+export default function SortIcon(props: SvgProps): import("react").JSX.Element;

package/motion.cjs

@@ -0,0 +1 @@
+const e=require("./effects.cjs");let t=require("react");var n;(function(e){e.SETTLE_FRAME=16;function t(e){let t=parseFloat(e);return Number.isNaN(t)?0:e.endsWith(`ms`)?t:t*1e3}function n(e){return e.split(`,`).map(e=>e.trim())}function r(e,t){return e[t%e.length]}function i(e){return e===``?1:parseFloat(e)}function a(e){let i=n(e.transitionDuration),a=n(e.transitionDelay),o=0;for(let e=0;e<Math.max(i.length,a.length);e++)o=Math.max(o,t(r(i,e))+t(r(a,e)));return o}function o(e){let a=n(e.animationDuration),o=n(e.animationDelay),s=n(e.animationIterationCount);return n(e.animationName).reduce((e,n,c)=>{if(n===``||n===`none`)return e;let l=i(r(s,c));return Number.isFinite(l)?Math.max(e,t(r(a,c))*l+t(r(o,c))):e},0)}function s(e){return Math.max(a(e),o(e))}e.activeDuration=s})(n||={});var r=n;function i(n){let{present:i}=n,[a,o]=(0,t.useState)(i?`open`:`closed`),s=(0,t.useRef)(null),c=(0,t.useCallback)(e=>{s.current=e},[]),l=i?`open`:a===`closed`?`closed`:`leaving`;return l!==a&&o(l),e.n(()=>{if(l!==`leaving`)return;let e=s.current,t=e?r.activeDuration(getComputedStyle(e)):0;if(t<=0){o(`closed`);return}let n=setTimeout(()=>o(`closed`),t+r.SETTLE_FRAME);return()=>clearTimeout(n)},[l]),(0,t.useMemo)(()=>{let e=l===`open`?`open`:`closed`;return{mounted:l!==`closed`,present:l===`open`,state:e,ref:c,props:{"data-state":e}}},[l,c])}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/motion.mjs

@@ -0,0 +1,66 @@
+import { n as e } from "./effects.mjs";
+import { useCallback as t, useMemo as n, useRef as r, useState as i } from "react";
+//#region src/utils/animation/animationUtils.ts
+var a;
+(function(e) {
+	e.SETTLE_FRAME = 16;
+	function t(e) {
+		let t = parseFloat(e);
+		return Number.isNaN(t) ? 0 : e.endsWith("ms") ? t : t * 1e3;
+	}
+	function n(e) {
+		return e.split(",").map((e) => e.trim());
+	}
+	function r(e, t) {
+		return e[t % e.length];
+	}
+	function i(e) {
+		return e === "" ? 1 : parseFloat(e);
+	}
+	function a(e) {
+		let i = n(e.transitionDuration), a = n(e.transitionDelay), o = 0;
+		for (let e = 0; e < Math.max(i.length, a.length); e++) o = Math.max(o, t(r(i, e)) + t(r(a, e)));
+		return o;
+	}
+	function o(e) {
+		let a = n(e.animationDuration), o = n(e.animationDelay), s = n(e.animationIterationCount);
+		return n(e.animationName).reduce((e, n, c) => {
+			if (n === "" || n === "none") return e;
+			let l = i(r(s, c));
+			return Number.isFinite(l) ? Math.max(e, t(r(a, c)) * l + t(r(o, c))) : e;
+		}, 0);
+	}
+	function s(e) {
+		return Math.max(a(e), o(e));
+	}
+	e.activeDuration = s;
+})(a ||= {});
+var o = a;
+//#endregion
+//#region src/react/animation/usePresence.ts
+function s(a) {
+	let { present: s } = a, [c, l] = i(s ? "open" : "closed"), u = r(null), d = t((e) => {
+		u.current = e;
+	}, []), f = s ? "open" : c === "closed" ? "closed" : "leaving";
+	return f !== c && l(f), e(() => {
+		if (f !== "leaving") return;
+		let e = u.current, t = e ? o.activeDuration(getComputedStyle(e)) : 0;
+		if (t <= 0) {
+			l("closed");
+			return;
+		}
+		let n = setTimeout(() => l("closed"), t + o.SETTLE_FRAME);
+		return () => clearTimeout(n);
+	}, [f]), n(() => {
+		let e = f === "open" ? "open" : "closed";
+		return {
+			mounted: f !== "closed",
+			present: f === "open",
+			state: e,
+			ref: d,
+			props: { "data-state": e }
+		};
+	}, [f, d]);
+}
+//#endregion
+export { s as t };

package/package.json

@@ -1,15 +1,211 @@
 {
   "name": "@box-kite/react",
-  "version": "0.0.1",
-  "description": "Reserved for the boxkite project's React bindings. Not yet usable.",
-  "license": "MIT",
-  "author": "Maxim Procopenco",
+  "version": "1.0.0",
+  "type": "module",
+  "sideEffects": [
+    "pages/**"
+  ],
+  "main": "./box.cjs",
+  "module": "./box.mjs",
+  "types": "./box.d.ts",
+  "exports": {
+    ".": {
+      "react-server": {
+        "types": "./rsc.d.ts",
+        "import": "./rsc.mjs",
+        "require": "./rsc.cjs"
+      },
+      "types": "./box.d.ts",
+      "import": "./box.mjs",
+      "require": "./box.cjs"
+    },
+    "./rsc": {
+      "types": "./rsc.d.ts",
+      "import": "./rsc.mjs",
+      "require": "./rsc.cjs"
+    },
+    "./a11y": {
+      "types": "./a11y.d.ts",
+      "import": "./a11y.mjs",
+      "require": "./a11y.cjs"
+    },
+    "./ssg": {
+      "types": "./ssg.d.ts",
+      "import": "./ssg.mjs",
+      "require": "./ssg.cjs"
+    },
+    "./components/*": {
+      "types": "./components/*.d.ts",
+      "import": "./components/*.mjs",
+      "require": "./components/*.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite ./pages --config ./pages.vite.config.ts --mode dev",
+    "dev:vanilla": "vite ./examples/vanilla --config ./examples/vanilla/vite.config.ts",
+    "build:vanilla": "vite build ./examples/vanilla --config ./examples/vanilla/vite.config.ts",
+    "pack:local": "node scripts/packLocal.mjs",
+    "install:next-app": "npm run pack:local && npm --prefix examples/next-app install --no-package-lock",
+    "dev:next-app": "npm run install:next-app && npm --prefix examples/next-app run dev",
+    "build:next-app": "npm run install:next-app && npm --prefix examples/next-app run build",
+    "smoke:next-app": "npm --prefix examples/next-app run smoke",
+    "build:pages": "vite build ./pages --config ./pages.vite.config.ts --outDir ../dist-pages --mode production && npm run prerender:pages",
+    "prerender:pages": "node scripts/prerender-pages.mjs",
+    "preview": "vite preview ./pages --config ./pages.vite.config.ts --outDir ../dist-pages",
+    "build": "npm run build:core && vite build",
+    "build:core": "vite build --config vite.core.config.ts && node scripts/postbuild-core.mjs",
+    "postbuild": "node scripts/postbuild.mjs",
+    "build:bridge": "node scripts/build-bridge.mjs",
+    "build:dev": "npm run build:core && vite build --mode dev",
+    "compile": "tsc --noEmit --skipLibCheck",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "test:a11y": "vitest run a11y",
+    "lint": "eslint .",
+    "check:boundaries": "node scripts/check-core-boundary.mjs && node scripts/check-rsc-boundary.mjs",
+    "check:brand": "node scripts/check-brand.mjs",
+    "check:docs": "node scripts/check-docs-snippets.mjs",
+    "check:props": "node scripts/check-props-api.mjs",
+    "docs:props": "node scripts/check-props-api.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",
+    "size": "size-limit"
+  },
+  "size-limit": [
+    {
+      "name": "Box core (main entry)",
+      "path": "dist/box.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "26.20 KB"
+    },
+    {
+      "name": "Box in a Server Component (react-server entry)",
+      "path": "dist/rsc.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "24.70 KB"
+    },
+    {
+      "name": "Behavior primitives (a11y entry)",
+      "path": "dist/a11y.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "3.13 KB"
+    },
+    {
+      "name": "Core engine (@box-kite/core, no React)",
+      "path": "dist-core/core.mjs",
+      "gzip": true,
+      "limit": "24.10 KB"
+    },
+    {
+      "name": "DataGrid",
+      "path": "dist/components/dataGrid.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "54.55 KB"
+    },
+    {
+      "name": "Full library (Box + ssg + every component)",
+      "path": "dev/size-full.mjs",
+      "ignore": [
+        "react",
+        "react-dom"
+      ],
+      "gzip": true,
+      "limit": "60.85 KB"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/box-kite/box-kite.git"
   },
-  "homepage": "https://github.com/box-kite/box-kite#readme",
-  "publishConfig": {
-    "access": "public"
+  "keywords": [
+    "box-kite",
+    "boxkite",
+    "react",
+    "box",
+    "css-in-js",
+    "atomic-css",
+    "runtime-css",
+    "styling",
+    "design-system",
+    "react-server-components",
+    "rsc",
+    "accessibility",
+    "typescript"
+  ],
+  "author": "Maxim Procopenco",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/box-kite/box-kite/issues"
+  },
+  "homepage": "https://www.box-kite.dev",
+  "description": "One React component with 212 typed CSS props that 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": "1.0.0",
+    "csstype": "^3.2.3",
+    "use-sync-external-store": "^1.6.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@eslint/js": "^10.0.1",
+    "@iconify-json/simple-icons": "^1.2.94",
+    "@iconify/react": "^6.0.2",
+    "@size-limit/preset-small-lib": "^13.0.3",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/node": "^26.1.2",
+    "@types/prismjs": "^1.26.6",
+    "@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",
+    "axe-core": "^4.13.0",
+    "eslint": "^10.8.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import-x": "^4.17.1",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.9.0",
+    "happy-dom": "^20.11.1",
+    "lucide-react": "^1.28.0",
+    "prettier": "^3.9.6",
+    "prismjs": "^1.30.0",
+    "publint": "^0.3.24",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
+    "recharts": "^3.10.1",
+    "size-limit": "^13.0.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.66.0",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10"
   }
 }