wimui 0.23.7 → 0.23.8

package/dist/components/navigation/Affix/Affix.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./affix.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({offsetTop:e,offsetBottom:a,onChange:o,target:s=()=>window,children:c,className:l,style:u})=>{let[d,f]=(0,n.useState)({isAffixed:!1}),p=(0,n.useRef)(null),m=(0,n.useRef)(null),h=(0,n.useRef)(null),g=(0,n.useRef)(!1),_=(0,n.useCallback)(()=>{if(!p.current)return;let t=s();if(!t)return;let n=p.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,c,l;e!==void 0&&n.top<r.top+e?(i=!0,c={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}):a!==void 0&&n.bottom>r.bottom-a&&(i=!0,c={position:`fixed`,bottom:window.innerHeight-r.bottom+a,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}),i!==g.current&&(g.current=i,o?.(i)),f(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(c)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(l)?e:{isAffixed:i,affixStyle:c,placeholderStyle:l})},[e,a,s,o]);return(0,n.useEffect)(()=>{let e=s();if(!e)return;let t=()=>{h.current&&window.cancelAnimationFrame(h.current),h.current=window.requestAnimationFrame(_)};return e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t),_(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),h.current&&window.cancelAnimationFrame(h.current)}},[s,_]),(0,i.jsx)(`div`,{ref:p,style:{...d.placeholderStyle,...u},className:(0,r.default)(l),children:(0,i.jsx)(`div`,{ref:m,className:(0,r.default)(`wim-affix`,t.default.root,d.isAffixed&&t.default.affixed),style:d.affixStyle,children:c})})};exports.Affix=a,exports.default=a;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/mergeRefs.cjs"),n=require("./affix.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=r.default.forwardRef(function({offsetTop:e,offsetBottom:o,onChange:s,target:c=()=>window,children:l,className:u,style:d},f){let[p,m]=(0,r.useState)({isAffixed:!1}),h=(0,r.useRef)(null),g=(0,r.useRef)(null),_=(0,r.useRef)(null),v=(0,r.useRef)(!1),y=(0,r.useCallback)(()=>{if(!h.current)return;let t=c();if(!t)return;let n=h.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,a,l;e!==void 0&&n.top<r.top+e?(i=!0,a={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}):o!==void 0&&n.bottom>r.bottom-o&&(i=!0,a={position:`fixed`,bottom:window.innerHeight-r.bottom+o,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}),i!==v.current&&(v.current=i,s?.(i)),m(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(a)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(l)?e:{isAffixed:i,affixStyle:a,placeholderStyle:l})},[e,o,c,s]);return(0,r.useEffect)(()=>{let e=c();if(!e)return;let t=()=>{_.current&&window.cancelAnimationFrame(_.current),_.current=window.requestAnimationFrame(y)};return e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t),y(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),_.current&&window.cancelAnimationFrame(_.current)}},[c,y]),(0,a.jsx)(`div`,{ref:t.mergeRefs(h,f),style:{...p.placeholderStyle,...d},className:(0,i.default)(u),children:(0,a.jsx)(`div`,{ref:g,className:(0,i.default)(`wim-affix`,n.default.root,p.isAffixed&&n.default.affixed),style:p.affixStyle,children:l})})});o.displayName=`Affix`,exports.Affix=o,exports.default=o;

package/dist/components/navigation/Affix/Affix.d.ts

@@ -15,5 +15,12 @@ export interface AffixProps {
     /** Style attribute */
     style?: React.CSSProperties;
 }
-export declare const Affix: ({ offsetTop, offsetBottom, onChange, target, children, className, style, }: AffixProps) => React.JSX.Element;
+/**
+ * Pins children while scrolling.
+ *
+ * `ref` points at the in-flow placeholder (the outer element), not the
+ * `position: fixed` inner wrapper. After the inner content sticks, measure
+ * this node for document position — the children's rect is the viewport edge.
+ */
+export declare const Affix: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<HTMLDivElement>>;
 export default Affix;

package/dist/components/navigation/Affix/Affix.js

@@ -1,70 +1,72 @@
 "use client";
-import e from "./affix.module.js";
-import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import a from "classnames";
-import { jsx as o } from "react/jsx-runtime";
+import { mergeRefs as e } from "../../_internal/mergeRefs.js";
+import t from "./affix.module.js";
+import n, { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import s from "classnames";
+import { jsx as c } from "react/jsx-runtime";
 //#region src/components/navigation/Affix/Affix.tsx
-var s = ({ offsetTop: s, offsetBottom: c, onChange: l, target: u = () => window, children: d, className: f, style: p }) => {
-	let [m, h] = i({ isAffixed: !1 }), g = r(null), _ = r(null), v = r(null), y = r(!1), b = t(() => {
-		if (!g.current) return;
-		let e = u();
+var l = n.forwardRef(function({ offsetTop: n, offsetBottom: l, onChange: u, target: d = () => window, children: f, className: p, style: m }, h) {
+	let [g, _] = o({ isAffixed: !1 }), v = a(null), y = a(null), b = a(null), x = a(!1), S = r(() => {
+		if (!v.current) return;
+		let e = d();
 		if (!e) return;
-		let t = g.current.getBoundingClientRect(), n = e === window || e instanceof Window ? {
+		let t = v.current.getBoundingClientRect(), r = e === window || e instanceof Window ? {
 			top: 0,
 			bottom: window.innerHeight
-		} : e.getBoundingClientRect(), r = !1, i, a;
-		s !== void 0 && t.top < n.top + s ? (r = !0, i = {
+		} : e.getBoundingClientRect(), i = !1, a, o;
+		n !== void 0 && t.top < r.top + n ? (i = !0, a = {
 			position: "fixed",
-			top: n.top + s,
+			top: r.top + n,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
-		}, a = {
+		}, o = {
 			width: t.width,
 			height: t.height
-		}) : c !== void 0 && t.bottom > n.bottom - c && (r = !0, i = {
+		}) : l !== void 0 && t.bottom > r.bottom - l && (i = !0, a = {
 			position: "fixed",
-			bottom: window.innerHeight - n.bottom + c,
+			bottom: window.innerHeight - r.bottom + l,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
-		}, a = {
+		}, o = {
 			width: t.width,
 			height: t.height
-		}), r !== y.current && (y.current = r, l?.(r)), h((e) => e.isAffixed === r && JSON.stringify(e.affixStyle) === JSON.stringify(i) && JSON.stringify(e.placeholderStyle) === JSON.stringify(a) ? e : {
-			isAffixed: r,
-			affixStyle: i,
-			placeholderStyle: a
+		}), i !== x.current && (x.current = i, u?.(i)), _((e) => e.isAffixed === i && JSON.stringify(e.affixStyle) === JSON.stringify(a) && JSON.stringify(e.placeholderStyle) === JSON.stringify(o) ? e : {
+			isAffixed: i,
+			affixStyle: a,
+			placeholderStyle: o
 		});
 	}, [
-		s,
-		c,
-		u,
-		l
+		n,
+		l,
+		d,
+		u
 	]);
-	return n(() => {
-		let e = u();
+	return i(() => {
+		let e = d();
 		if (!e) return;
 		let t = () => {
-			v.current && window.cancelAnimationFrame(v.current), v.current = window.requestAnimationFrame(b);
+			b.current && window.cancelAnimationFrame(b.current), b.current = window.requestAnimationFrame(S);
 		};
-		return e.addEventListener("scroll", t), window.addEventListener("resize", t), b(), () => {
-			e.removeEventListener("scroll", t), window.removeEventListener("resize", t), v.current && window.cancelAnimationFrame(v.current);
+		return e.addEventListener("scroll", t), window.addEventListener("resize", t), S(), () => {
+			e.removeEventListener("scroll", t), window.removeEventListener("resize", t), b.current && window.cancelAnimationFrame(b.current);
 		};
-	}, [u, b]), /* @__PURE__ */ o("div", {
-		ref: g,
+	}, [d, S]), /* @__PURE__ */ c("div", {
+		ref: e(v, h),
 		style: {
-			...m.placeholderStyle,
-			...p
+			...g.placeholderStyle,
+			...m
 		},
-		className: a(f),
-		children: /* @__PURE__ */ o("div", {
-			ref: _,
-			className: a("wim-affix", e.root, m.isAffixed && e.affixed),
-			style: m.affixStyle,
-			children: d
+		className: s(p),
+		children: /* @__PURE__ */ c("div", {
+			ref: y,
+			className: s("wim-affix", t.root, g.isAffixed && t.affixed),
+			style: g.affixStyle,
+			children: f
 		})
 	});
-};
+});
+l.displayName = "Affix";
 //#endregion
-export { s as Affix, s as default };
+export { l as Affix, l as default };

package/dist/llms-full.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.23.7 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.23.8 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -75,13 +75,15 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily. Narrow table cards must share the same radius token as the adjacent toolbar/pagination chrome — not jump to `radius.container` while chrome stays on `radius.component`.
 6. Limit accent color: primary surfaces (solid buttons, emphasis backgrounds) 1–2 per view.
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
-8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
-9. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
-10. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
-11. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
-12. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
-13. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
-14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
+8. Build realism inside a world the reader already knows. Chasing substance pushes toward niche expertise, and a screen set in one (a shipyard's watch orders, a trading desk, a clinical protocol) makes the reader decode the domain before they can see the components — the pattern stops teaching. Pick an everyday situation (renting a car and returning it, a delivery, a hospital appointment) and keep specialist vocabulary out of the places that carry state and actions. The test: can a reader say what the screen is for without a paragraph of explanation?
+9. Never show the result of an action the screen cannot perform. Coverage-driven composition puts the component first and invents a state that justifies it, so the reader sees outcomes ("not in the record", "1 photo") with no control that could have produced them. Reachable state is (1) what the controls on this screen can do, and (2) values the subject already holds. Use the component inside a reachable moment; don't invent an unreachable one to justify the component. The test: can you arrive at what is on screen using only the controls that are on screen?
+10. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
+11. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
+12. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
+13. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
+14. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
+15. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
+16. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
 
 ## Recipes — copy-paste starting points
 

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.23.7 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.23.8 — a React 19 component library: 218 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -75,13 +75,15 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 5. Keep one radius stance per screen (`radius.component` / `radius.container` / `radius.overlay`); don't mix 0 and lg arbitrarily. Narrow table cards must share the same radius token as the adjacent toolbar/pagination chrome — not jump to `radius.container` while chrome stays on `radius.component`.
 6. Limit accent color: primary surfaces (solid buttons, emphasis backgrounds) 1–2 per view.
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
-8. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
-9. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
-10. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
-11. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
-12. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
-13. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
-14. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
+8. Build realism inside a world the reader already knows. Chasing substance pushes toward niche expertise, and a screen set in one (a shipyard's watch orders, a trading desk, a clinical protocol) makes the reader decode the domain before they can see the components — the pattern stops teaching. Pick an everyday situation (renting a car and returning it, a delivery, a hospital appointment) and keep specialist vocabulary out of the places that carry state and actions. The test: can a reader say what the screen is for without a paragraph of explanation?
+9. Never show the result of an action the screen cannot perform. Coverage-driven composition puts the component first and invents a state that justifies it, so the reader sees outcomes ("not in the record", "1 photo") with no control that could have produced them. Reachable state is (1) what the controls on this screen can do, and (2) values the subject already holds. Use the component inside a reachable moment; don't invent an unreachable one to justify the component. The test: can you arrive at what is on screen using only the controls that are on screen?
+10. Keep one elevation stance per screen: don't mix surfaces raised by shadow with surfaces cut by borders. `Card` and `Stats` default to `elevated`, so pass `variant="outline"` when the screen is border-led. If the outer container already casts a shadow, its contents need only a border. On admin/list screens, `Table`/`DataGrid` mobile cards must stay border-only like the toolbar and pagination — row cards with `shadow-sm` while chrome is flat outline is the same mixed stance.
+11. Never wrap a component that already draws its own frame. `<Card><Table card /></Card>` doubles the border and nests radii (12px inside 4px). `Table` takes a `card` prop and `Stats` is already a Card — place them directly.
+12. Always pass `intent` on `Badge` / `Tag` / `Chip`. Their default is `primary` (the accent), so an ordinary value like `pending` or `member` gets painted as loudly as an exception and the colour stops carrying information. Use `intent="neutral"` for ordinary values.
+13. Pick colour by good/bad, not by direction. `Stats.Trend` ties the arrow and the colour together, so `up` is always the success colour — using it for a metric where up is bad (failures, error rate) renders the bad news as good. Use a colourless form such as `Stats.Description` instead. Don't approximate a meaning the API cannot express.
+14. Keep the chrome quiet. Breadcrumb, page title, summary line, toolbar and filter bar frame the content; they must not compete with the protagonist. Don't promote a one-line summary to an `Alert`/`Banner`, don't wrap the filter bar in a `Card` (its border doubles up with the data region's), keep primary surfaces out of the chrome, and don't stack a KPI tile row above a table screen. Corollary of protagonist and accent limits, but it is the rule most often broken on admin/list screens — the test is whether the eye lands on the data first.
+15. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
+16. Check the screen at 390px and 768px before calling it done. The page itself must never scroll sideways (`document.scrollWidth > document.documentElement.clientWidth` is a bug — the usual cause is a group of controls that cannot wrap, e.g. several buttons packed into one `Toolbar.Group`; split them into separate groups). Data tables need their narrow mode turned on (`<DataGrid mobileCard>` / `<Table mobileCard>`) rather than an inner scrollbar: without it columns collapse and a short string like a `Code` lot number breaks one character per line. The default card switch is `container-down(sm)` (576px). Wide grids that still overflow at tablet should pass `mobileCard="md"` so cards continue through 768px.
 
 ## Recipes — copy-paste starting points