@clicktap/ui 1.1.1 → 2.0.3

package/components/Pagination/Pagination.d.ts

@@ -1,3 +1,28 @@
-import { PaginationProps } from '@heroui/pagination';
-export declare function Pagination({ showControls, className, classNames, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Native pagination (CTAP-1383) — previously a styled wrapper around
+ * @heroui/pagination, the last @heroui consumer in this library. Standard
+ * boundary/sibling windowing with ellipses; heroui prop names kept for the
+ * call sites this repo uses (total, page/initialPage, onChange, boundaries,
+ * siblings, showControls, className, classNames).
+ */
+export type PaginationProps = {
+    total: number;
+    page?: number;
+    initialPage?: number;
+    onChange?: (page: number) => void;
+    boundaries?: number;
+    siblings?: number;
+    showControls?: boolean;
+    isCompact?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    classNames?: {
+        wrapper?: string;
+        item?: string;
+        prev?: string;
+        next?: string;
+        ellipsis?: string;
+    };
+};
+export declare function Pagination({ total, page, initialPage, onChange, boundaries, siblings, showControls, isCompact, isDisabled, className, classNames, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export default Pagination;

package/components/Pagination/Pagination.js

@@ -1 +1 @@
-"use client";import{jsx as s}from"react/jsx-runtime";import{Pagination as n}from"@heroui/pagination";import{cn as e}from"../../utils/cn.js";const r=e("w-8 h-8 flex justify-center items-center cursor-pointer shadow-none","border border-border-subtle data-[disabled=true]:border-0","rounded transition-colors duration-300 focus-visible:outline-white focus-visible:outline-offset-4","hover:bg-slate-50 data-[disabled=true]:bg-surface-subtle data-[disabled=true]:text-fg-subtle","[&>svg]:w-4.5 [&>svg]:h-auto");function b({showControls:o=!0,className:i,classNames:t,...a}){return s(n,{showControls:o,className:e("text-slate-600",i),classNames:{wrapper:e("flex flex-nowrap gap-2 lg:gap-3",t?.wrapper),item:e("w-8 h-8 flex text-sm justify-center items-center cursor-pointer rounded shadow-none","border-solid border border-slate-100 bg-transparent transition-colors duration-300","data-[active=true]:bg-slate-500 data-[active=true]:text-white focus-visible:outline-white focus-visible:outline-offset-4","[&[data-hover=true]:not([data-active=true])]:border-border-subtle",t?.item),prev:e(r,t?.prev),next:e(r,t?.next),ellipsis:e("w-4 h-4.5 scale-110 translate-y-1",t?.ellipsis)},...a})}export{b as Pagination,b as default};
+"use client";import{jsx as a,jsxs as N}from"react/jsx-runtime";import{useState as j}from"react";import{cn as l}from"../../utils/cn.js";import{DownArrow as v}from"../Icon/DownArrow.js";const g=l("w-8 h-8 flex justify-center items-center cursor-pointer shadow-none","border border-solid border-border-subtle data-[disabled=true]:border-0","rounded transition-colors duration-300 focus-visible:outline-white focus-visible:outline-offset-4","bg-transparent hover:bg-slate-50 data-[disabled=true]:bg-surface-subtle data-[disabled=true]:text-fg-subtle","[&>svg]:w-4.5 [&>svg]:h-auto");function M(e,h,t,d){const s=(b,n)=>Array.from({length:n-b+1},(m,o)=>b+o);if(e<=t*2+d*2+3)return s(1,e);const f=Math.max(h-d,t+2),c=Math.min(h+d,e-t-1);return[...s(1,t),f>t+2?"ellipsis":t+1,...s(f,c),c<e-t-1?"ellipsis":e-t,...s(e-t+1,e)]}function $({total:e,page:h,initialPage:t=1,onChange:d,boundaries:s=1,siblings:f=1,showControls:c=!0,isCompact:b=!1,isDisabled:n,className:m,classNames:o}){const[w,x]=j(t),r=h??w,p=i=>{const u=Math.min(Math.max(i,1),e);u!==r&&(x(u),d?.(u))};return a("nav",{"aria-label":"Pagination",className:l("text-slate-600",m),children:N("ul",{className:l("flex flex-nowrap gap-2 lg:gap-3 list-none p-0 m-0",o?.wrapper),children:[c&&a("li",{children:a("button",{type:"button","aria-label":"Previous page",disabled:n||r<=1,"data-disabled":n||r<=1||void 0,onClick:()=>p(r-1),className:l(g,o?.prev),children:a(v,{className:"rotate-90 w-4 h-4"})})}),M(e,r,s,f).map((i,u)=>i==="ellipsis"?a("li",{"aria-hidden":"true",className:l("w-4 h-4.5 scale-110 translate-y-1",o?.ellipsis),children:"…"},`e-${u}`):a("li",{children:a("button",{type:"button","aria-label":`Page ${i}`,"aria-current":i===r?"page":void 0,disabled:n,"data-active":i===r||void 0,onClick:()=>p(i),className:l(b?"w-6 h-6 text-xs":"w-8 h-8 text-sm","flex justify-center items-center cursor-pointer rounded shadow-none","border-solid border border-slate-100 bg-transparent transition-colors duration-300","data-[active=true]:bg-slate-500 data-[active=true]:text-white focus-visible:outline-white focus-visible:outline-offset-4","hover:not-data-[active=true]:border-border-subtle",o?.item),children:i})},i)),c&&a("li",{children:a("button",{type:"button","aria-label":"Next page",disabled:n||r>=e,"data-disabled":n||r>=e||void 0,onClick:()=>p(r+1),className:l(g,o?.next),children:a(v,{className:"-rotate-90 w-4 h-4"})})})]})})}export{$ as Pagination,$ as default};

package/components/Pagination/index.js

@@ -1 +1 @@
-import{Pagination as p}from"./Pagination.js";import"react/jsx-runtime";import"@heroui/pagination";import"../../utils/cn.js";export{p as Pagination};
+import{Pagination as a}from"./Pagination.js";import"react/jsx-runtime";import"react";import"../../utils/cn.js";import"../Icon/DownArrow.js";export{a as Pagination};

package/components/Progressbar/LinearProgressbar.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as i,Fragment as m}from"react/jsx-runtime";import{ProgressBar as u,Label as h}from"react-aria-components";import{motion as p}from"framer-motion";import{cn as r}from"../../utils/cn.js";function g({label:a,isIndeterminate:n,showValue:l=!0,width:d,className:s,classNames:e,...c}){return t(u,{style:{width:d||"100%"},className:r("overflow-hidden",s),...c,children:({percentage:o,valueText:f})=>i(m,{children:[i("div",{className:r("flex items-center justify-between gap-2 mb-1",e?.labelWrapper),children:[t(h,{className:r("text-sm",e?.label),children:a}),l&&t("span",{className:r("text-sm",e?.value),children:f})]}),t("div",{className:r("overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-slate-300",e?.trackWrapper),children:t(p.div,{style:{width:!n&&typeof o=="number"?`${o}%`:""},...n&&{animate:{x:["-100%","250px"]},transition:{repeat:1/0,duration:1.5}},className:r("h-full bg-surface-inverse-hover rounded transition-width duration-500 ease-in-out",{"w-1/2":n,"transition-none":n},e?.track)})})]})})}export{g as LinearProgressbar,g as default};
+"use client";import{jsx as t,jsxs as i,Fragment as m}from"react/jsx-runtime";import{ProgressBar as u,Label as h}from"react-aria-components";import{m as p}from"framer-motion";import{cn as r}from"../../utils/cn.js";function g({label:a,isIndeterminate:n,showValue:l=!0,width:d,className:s,classNames:e,...c}){return t(u,{style:{width:d||"100%"},className:r("overflow-hidden",s),...c,children:({percentage:o,valueText:f})=>i(m,{children:[i("div",{className:r("flex items-center justify-between gap-2 mb-1",e?.labelWrapper),children:[t(h,{className:r("text-sm",e?.label),children:a}),l&&t("span",{className:r("text-sm",e?.value),children:f})]}),t("div",{className:r("overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-slate-300",e?.trackWrapper),children:t(p.div,{style:{width:!n&&typeof o=="number"?`${o}%`:""},...n&&{animate:{x:["-100%","250px"]},transition:{repeat:1/0,duration:1.5}},className:r("h-full bg-surface-inverse-hover rounded transition-width duration-500 ease-in-out",{"w-1/2":n,"transition-none":n},e?.track)})})]})})}export{g as LinearProgressbar,g as default};

package/components/Tabs/Tab.js

@@ -1 +1 @@
-"use client";import{jsx as d,jsxs as u,Fragment as c}from"react/jsx-runtime";import{useContext as b}from"react";import{Tab as f}from"react-aria-components";import{motion as m}from"framer-motion";import{cn as i}from"../../utils/cn.js";import{TabsOrientationContext as p}from"./Tabs.context.js";function x({orientation:o,variant:e="base",className:t,children:l,...r}){return d(f,{className:i("flex items-center relative z-10","text-sm cursor-pointer forced-color-adjust-none","transition-all duration-300 ease-in-out","justify-center","disabled:opacity-50","selected:outline-0 hover:outline-0 hover:text-fg-muted",e==="underline"&&o==="vertical"&&"justify-start","py-2 px-3",e==="underline"&&o==="horizontal"&&"p-3",e==="underline"&&o==="vertical"&&"py-3 pr-3 pl-0",(e==="underline"||e==="outline"||e==="enclosed")&&"text-slate-800",e==="solid"&&"text-fg-subtle",(e==="underline"||e==="outline")&&"selected:text-slate-800",(e==="solid"||e==="enclosed")&&"selected:text-slate-100",t),...r,children:l})}function w({variant:o="base",children:e,className:t,classNames:l,...r}){const s=b(p);return d(x,{orientation:s,variant:o,className:t,...r,children:n=>u(c,{children:[typeof e=="function"?e({defaultChildren:void 0,...n}):e,(n.isFocusVisible||n.isSelected)&&d(m.span,{className:i("absolute z-0",o==="solid"&&"inset-0 rounded-lg bg-slate-600 mix-blend-color",o==="outline"&&"inset-0 rounded-lg border-solid border-2 border-surface-inverse-hover",o==="underline"&&"rounded-lg bg-surface-inverse-hover mix-blend-color bottom-0",o==="underline"&&s==="horizontal"&&"left-0 w-full h-px",o==="underline"&&s==="vertical"&&"right-0 w-px h-full",o==="enclosed"&&"inset-0 border-solid border-1 border-surface-inverse-hover -mb-px border-b-0 rounded-t-lg rounded-b-none bg-white mix-blend-difference",o==="base"&&"hidden",l?.overflow),layoutId:o,transition:{type:"spring",bounce:.2,duration:.75}})]})})}export{x as BaseTab,w as Tab,w as default};
+"use client";import{jsx as d,jsxs as u,Fragment as c}from"react/jsx-runtime";import{useContext as b}from"react";import{Tab as f}from"react-aria-components";import{m}from"framer-motion";import{cn as i}from"../../utils/cn.js";import{TabsOrientationContext as p}from"./Tabs.context.js";function x({orientation:o,variant:e="base",className:l,children:t,...r}){return d(f,{className:i("flex items-center relative z-10","text-sm cursor-pointer forced-color-adjust-none","transition-all duration-300 ease-in-out","justify-center","disabled:opacity-50","selected:outline-0 hover:outline-0 hover:text-fg-muted",e==="underline"&&o==="vertical"&&"justify-start","py-2 px-3",e==="underline"&&o==="horizontal"&&"p-3",e==="underline"&&o==="vertical"&&"py-3 pr-3 pl-0",(e==="underline"||e==="outline"||e==="enclosed")&&"text-slate-800",e==="solid"&&"text-fg-subtle",(e==="underline"||e==="outline")&&"selected:text-slate-800",(e==="solid"||e==="enclosed")&&"selected:text-slate-100",l),...r,children:t})}function w({variant:o="base",children:e,className:l,classNames:t,...r}){const s=b(p);return d(x,{orientation:s,variant:o,className:l,...r,children:n=>u(c,{children:[typeof e=="function"?e({defaultChildren:void 0,...n}):e,(n.isFocusVisible||n.isSelected)&&d(m.span,{className:i("absolute z-0",o==="solid"&&"inset-0 rounded-lg bg-slate-600 mix-blend-color",o==="outline"&&"inset-0 rounded-lg border-solid border-2 border-surface-inverse-hover",o==="underline"&&"rounded-lg bg-surface-inverse-hover mix-blend-color bottom-0",o==="underline"&&s==="horizontal"&&"left-0 w-full h-px",o==="underline"&&s==="vertical"&&"right-0 w-px h-full",o==="enclosed"&&"inset-0 border-solid border-1 border-surface-inverse-hover -mb-px border-b-0 rounded-t-lg rounded-b-none bg-white mix-blend-difference",o==="base"&&"hidden",t?.overflow),layoutId:o,transition:{type:"spring",bounce:.2,duration:.75}})]})})}export{x as BaseTab,w as Tab,w as default};

package/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,10 @@
-export declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<import('@heroui/tooltip').TooltipProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+import { TooltipProps } from './Tooltip.types';
+/**
+ * Native tooltip on react-aria-components (CTAP-1383) — previously a styled
+ * wrapper around @heroui/tooltip, which pulled the @heroui system into any
+ * chunk that used it. RAC is already this library's base. Same call-site API:
+ * `<Tooltip content={...} offset={12}>{trigger}</Tooltip>` with an arbitrary
+ * trigger node (Focusable makes non-interactive children hoverable/focusable).
+ */
+export declare function Tooltip({ children, content, placement, offset, showArrow, isDisabled, delay, classNames, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/components/Tooltip/Tooltip.js

@@ -1 +1 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import{forwardRef as f}from"react";import{Tooltip as b}from"@heroui/tooltip";import{cn as t}from"../../utils/cn.js";const i=f(function({classNames:e,placement:a,showArrow:o=!1,...r},l){return n(b,{classNames:{base:[t(["z-0 relative bg-transparent outline-none","focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-500","before:absolute before:rotate-45 before:w-2.5 before:h-2.5 before:rounded-sm before:bg-slate-500 before:shadow-sm","before:hidden data-[arrow=true]:before:block","data-[placement=bottom]:before:-top-1 data-[placement=bottom]:before:left-1/2 data-[placement=bottom]:before:rotate-45 data-[placement=bottom]:before:-translate-x-1/2","data-[placement=bottom-end]:before:-top-1 data-[placement=bottom-end]:before:left-1/2 data-[placement=bottom-end]:before:rotate-45 data-[placement=bottom-end]:before:-translate-x-1/2","data-[placement=bottom-start]:before:-top-1 data-[placement=bottom-start]:before:left-1/2 data-[placement=bottom-start]:before:rotate-45 data-[placement=bottom-start]:before:-translate-x-1/2","data-[placement=left]:before:-right-1 data-[placement=left]:before:top-1/2 data-[placement=left]:before:-translate-y-1/2","data-[placement=left-end]:before:-right-1 data-[placement=left-end]:before:top-1/2 data-[placement=left-end]:before:-translate-y-1/2","data-[placement=left-start]:before:-right-1 data-[placement=left-start]:before:top-1/2 data-[placement=left-start]:before:-translate-y-1/2","data-[placement=right]:before:-left-1 data-[placement=right]:before:top-1/2 data-[placement=right]:before:-translate-y-1/2","data-[placement=right-end]:before:-left-1 data-[placement=right-end]:before:top-1/2 data-[placement=right-end]:before:-translate-y-1/2","data-[placement=right-start]:before:-left-1 data-[placement=right-start]:before:top-1/2 data-[placement=right-start]:before:-translate-y-1/2","data-[placement=top]:before:-bottom-1 data-[placement=top]:before:left-1/2 data-[placement=top]:before:rotate-45 data-[placement=top]:before:-translate-x-1/2","data-[placement=top-end]:before:-bottom-1 data-[placement=top-end]:before:left-1/2 data-[placement=top-end]:before:rotate-45 data-[placement=top-end]:before:-translate-x-1/2","data-[placement=top-start]:before:-bottom-1 data-[placement=top-start]:before:left-1/2 data-[placement=top-start]:before:rotate-45 data-[placement=top-start]:before:-translate-x-1/2",e?.base])],content:[t(["inline-flex flex-col items-center justify-center outline-none","w-full py-1 px-2.5 z-10 box-border bg-slate-500 rounded-md shadow-sm","text-sm text-white subpixel-antialiased",e?.content])]},placement:a,showArrow:o,...r,ref:l})});export{i as Tooltip,i as default};
+"use client";import{jsxs as l,jsx as e}from"react/jsx-runtime";import{TooltipTrigger as d,Focusable as f,Tooltip as m,OverlayArrow as b}from"react-aria-components";import{cn as t}from"../../utils/cn.js";function v({children:i,content:n,placement:s="top",offset:r=8,showArrow:a=!1,isDisabled:u,delay:c=500,classNames:o}){return l(d,{delay:c,isDisabled:u,children:[e(f,{children:e("span",{role:"button",tabIndex:0,className:"inline-flex outline-none",children:i})}),l(m,{placement:s,offset:r,className:t("z-50 outline-none","focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-500",o?.base),children:[a&&e(b,{children:e("span",{className:"block rotate-45 w-2.5 h-2.5 -translate-y-1/2 rounded-sm bg-slate-500 shadow-sm"})}),e("div",{className:t("inline-flex flex-col items-center justify-center outline-none","w-full py-1 px-2.5 box-border bg-slate-500 rounded-md shadow-sm","text-sm text-white subpixel-antialiased",o?.content),children:n})]})]})}export{v as Tooltip,v as default};

package/components/Tooltip/Tooltip.types.d.ts

@@ -1,2 +1,21 @@
-import { TooltipProps as UITooltipProps } from '@heroui/tooltip';
-export type TooltipProps = UITooltipProps;
+import { ReactNode } from 'react';
+/**
+ * Structural props (CTAP-1383) — previously re-exported from @heroui/tooltip.
+ * Covers the surface this repo uses; heroui prop names kept.
+ */
+export type TooltipProps = {
+    children: ReactNode;
+    /** Tooltip body. */
+    content?: ReactNode;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top start' | 'top end' | 'bottom start' | 'bottom end';
+    /** Distance from the trigger, px. */
+    offset?: number;
+    showArrow?: boolean;
+    isDisabled?: boolean;
+    /** ms before showing (heroui: delay). */
+    delay?: number;
+    classNames?: {
+        base?: string;
+        content?: string;
+    };
+};

package/components/Tooltip/index.js

@@ -1 +1 @@
-import{Tooltip as e}from"./Tooltip.js";import"react/jsx-runtime";import"react";import"@heroui/tooltip";import"../../utils/cn.js";export{e as Tooltip};
+import{Tooltip as m}from"./Tooltip.js";import"react/jsx-runtime";import"react-aria-components";import"../../utils/cn.js";export{m as Tooltip};

package/components/UploadImage/UploadImage.js

@@ -1 +1 @@
-"use client";import{jsxs as l,Fragment as u,jsx as e}from"react/jsx-runtime";import{forwardRef as y,useState as v}from"react";import{motion as j}from"framer-motion";import{FieldError as V}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import _ from"../../hooks/useIsClient.js";import{Skeleton as p}from"../Skeleton/Skeleton.js";function k({hasTitle:a,className:s}){return l("div",{className:"w-full h-full flex flex-col gap-4",children:[a&&e(p,{className:"w-1/2 h-8 mx-auto rounded-md z-20"}),e(p,{className:r("w-full h-56 rounded-md z-20 relative",s)})]})}const H=y(({title:a,description:s="Preview will display here.",fileExtension:m,actionTitle:g="select file",variant:i,errorMessage:h,defaultImagePath:n,classNames:f,...c},b)=>{const x=_(),[t,w]=v({src:null,alt:null}),C=!!h,N=m?m.split(",").map(o=>`image/${o.trim()}`).join(", "):"image/*";return l("div",{className:r("w-full h-full","flex flex-col gap-4"),children:[x?l(u,{children:[a&&e("h6",{className:r("text-center","text-2xl","m-0 mb-4"),children:a}),l("div",{className:r("w-full h-full","flex flex-col justify-between gap-5 items-center",["bg-surface-subtle",i==="base"&&"bg-transparent"],"rounded-md",[i==="base"&&"rounded-none"],["p-6 lg:p-7",i==="base"&&"p-0 lg:p-0"]),children:[l("label",{htmlFor:`${c?.name}-upload-file`,"aria-label":"image upload",onChange:o=>{const{target:{files:d}}=o;d&&w({src:URL.createObjectURL(d[0]),alt:d[0].name})},className:r("inline-flex justify-center items-center","uppercase text-base border-border-subtle","bg-transparent","border-1 border-solid","px-4 py-0","rounded-2xl","cursor-pointer","w-full h-9",["max-w-48",i==="base"&&"max-w-none"],"my-0 mx-auto","has-[:disabled]:bg-transparent has-[:disabled]:text-fg-strong","hover:bg-slate-100s hover:text-black",f?.label),children:[g,e("input",{id:`${c?.name}-upload-file`,accept:N,type:"file",hidden:!0,...c,ref:b,className:"hidden"})]}),n&&!t.src?e("div",{className:"flex justify-center items-center w-60",children:e("a",{href:n,target:"_blank",rel:"noreferrer",children:e("img",{src:n,alt:"",className:"w-full h-auto"})})}):l(u,{children:[e(j.div,{initial:{opacity:0},animate:{opacity:1},transition:{type:"spring",duration:3,bounce:0},className:"flex justify-center items-center w-52 h-auto",children:t.src?e("img",{src:t.src,height:96,width:200,alt:t.alt||"",className:"max-h-full object-contain"}):l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"31",height:"55",viewBox:"0 0 31 55",fill:"none",children:[e("g",{clipPath:"url(#clip0_15607_32844)",children:e("path",{d:"M15.9521 0.721924C24.2431 0.721924 30.9521 7.36392 30.9521 15.5719V43.9219C30.9521 49.8889 26.0703 54.7219 20.0431 54.7219C14.0158 54.7219 9.13397 49.8889 9.13397 43.9219V20.9719C9.13397 17.2459 12.1885 14.2219 15.9521 14.2219C19.7158 14.2219 22.7703 17.2459 22.7703 20.9719V41.2219H17.3158V20.7289C17.3158 19.2439 14.5885 19.2439 14.5885 20.7289V43.9219C14.5885 46.8919 17.0431 49.3219 20.0431 49.3219C23.0431 49.3219 25.4976 46.8919 25.4976 43.9219V15.5719C25.4976 10.3609 21.2158 6.12192 15.9521 6.12192C10.6885 6.12192 6.40669 10.3609 6.40669 15.5719V41.2219H0.952148V15.5719C0.952148 7.36392 7.66124 0.721924 15.9521 0.721924Z",fill:"#646464"})}),e("defs",{children:e("clipPath",{id:"clip0_15607_32844",children:e("rect",{width:"30",height:"54",fill:"white",transform:"translate(0.952148 0.721924)"})})})]})},t.src),e("p",{className:"m-0 text-fg-strong text-center",children:t.alt||s})]})]})]}):e(k,{hasTitle:!!a,className:f?.skeleton}),C&&e(V,{className:r("-mt-2","self-start"),children:h})]})});export{H as UploadImage,H as default};
+"use client";import{jsxs as l,Fragment as u,jsx as e}from"react/jsx-runtime";import{forwardRef as y,useState as v}from"react";import{m as j}from"framer-motion";import{FieldError as V}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import _ from"../../hooks/useIsClient.js";import{Skeleton as p}from"../Skeleton/Skeleton.js";function k({hasTitle:a,className:s}){return l("div",{className:"w-full h-full flex flex-col gap-4",children:[a&&e(p,{className:"w-1/2 h-8 mx-auto rounded-md z-20"}),e(p,{className:r("w-full h-56 rounded-md z-20 relative",s)})]})}const H=y(({title:a,description:s="Preview will display here.",fileExtension:m,actionTitle:g="select file",variant:i,errorMessage:h,defaultImagePath:n,classNames:f,...c},b)=>{const x=_(),[t,w]=v({src:null,alt:null}),C=!!h,N=m?m.split(",").map(o=>`image/${o.trim()}`).join(", "):"image/*";return l("div",{className:r("w-full h-full","flex flex-col gap-4"),children:[x?l(u,{children:[a&&e("h6",{className:r("text-center","text-2xl","m-0 mb-4"),children:a}),l("div",{className:r("w-full h-full","flex flex-col justify-between gap-5 items-center",["bg-surface-subtle",i==="base"&&"bg-transparent"],"rounded-md",[i==="base"&&"rounded-none"],["p-6 lg:p-7",i==="base"&&"p-0 lg:p-0"]),children:[l("label",{htmlFor:`${c?.name}-upload-file`,"aria-label":"image upload",onChange:o=>{const{target:{files:d}}=o;d&&w({src:URL.createObjectURL(d[0]),alt:d[0].name})},className:r("inline-flex justify-center items-center","uppercase text-base border-border-subtle","bg-transparent","border-1 border-solid","px-4 py-0","rounded-2xl","cursor-pointer","w-full h-9",["max-w-48",i==="base"&&"max-w-none"],"my-0 mx-auto","has-[:disabled]:bg-transparent has-[:disabled]:text-fg-strong","hover:bg-slate-100s hover:text-black",f?.label),children:[g,e("input",{id:`${c?.name}-upload-file`,accept:N,type:"file",hidden:!0,...c,ref:b,className:"hidden"})]}),n&&!t.src?e("div",{className:"flex justify-center items-center w-60",children:e("a",{href:n,target:"_blank",rel:"noreferrer",children:e("img",{src:n,alt:"",className:"w-full h-auto"})})}):l(u,{children:[e(j.div,{initial:{opacity:0},animate:{opacity:1},transition:{type:"spring",duration:3,bounce:0},className:"flex justify-center items-center w-52 h-auto",children:t.src?e("img",{src:t.src,height:96,width:200,alt:t.alt||"",className:"max-h-full object-contain"}):l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"31",height:"55",viewBox:"0 0 31 55",fill:"none",children:[e("g",{clipPath:"url(#clip0_15607_32844)",children:e("path",{d:"M15.9521 0.721924C24.2431 0.721924 30.9521 7.36392 30.9521 15.5719V43.9219C30.9521 49.8889 26.0703 54.7219 20.0431 54.7219C14.0158 54.7219 9.13397 49.8889 9.13397 43.9219V20.9719C9.13397 17.2459 12.1885 14.2219 15.9521 14.2219C19.7158 14.2219 22.7703 17.2459 22.7703 20.9719V41.2219H17.3158V20.7289C17.3158 19.2439 14.5885 19.2439 14.5885 20.7289V43.9219C14.5885 46.8919 17.0431 49.3219 20.0431 49.3219C23.0431 49.3219 25.4976 46.8919 25.4976 43.9219V15.5719C25.4976 10.3609 21.2158 6.12192 15.9521 6.12192C10.6885 6.12192 6.40669 10.3609 6.40669 15.5719V41.2219H0.952148V15.5719C0.952148 7.36392 7.66124 0.721924 15.9521 0.721924Z",fill:"#646464"})}),e("defs",{children:e("clipPath",{id:"clip0_15607_32844",children:e("rect",{width:"30",height:"54",fill:"white",transform:"translate(0.952148 0.721924)"})})})]})},t.src),e("p",{className:"m-0 text-fg-strong text-center",children:t.alt||s})]})]})]}):e(k,{hasTitle:!!a,className:f?.skeleton}),C&&e(V,{className:r("-mt-2","self-start"),children:h})]})});export{H as UploadImage,H as default};

package/docs/migrations/2026/08/ui-2026-08-14-zod-error-map.md

@@ -0,0 +1,104 @@
+# A shared zod 4 error map, so every app stops hand-rolling `config/zod.ts`
+
+**Date:** 2026-08-14
+**Package:** `@clicktap/ui`
+**Affects:** any consumer on **zod 4**. Nothing changes for a zod 3 app, or for one not using zod
+at all.
+**Classification:** IMPROVEMENT
+**Breaking:** No. Purely additive — one new subpath. `@clicktap/ui` gains **no** dependency on zod,
+so nothing about your install changes.
+
+## Why this exists
+
+zod 4 dropped zod 3's readable defaults. Verified against zod 4.4.3:
+
+```
+undefined against z.string()   ->  "Invalid input: expected string, received undefined"
+z.string().min(8)              ->  "Too small: expected string to have >=8 characters"
+```
+
+Both are developer output. Neither should reach a visitor.
+
+**The first cannot be fixed with per-field messages, and that is the part that catches people out.**
+react-hook-form leaves an untouched field as `undefined` (inputs render `value ?? ''`), so
+`.min(1, '…')` and `.nonempty({ message })` only ever see an empty string — their message never
+applies to the missing case. Submitting an untouched form is the common path, so nearly every field
+in every app is exposed. It has to be fixed globally.
+
+## Usage
+
+```ts
+import { z } from 'zod';
+import { configureZodErrorMap } from '@clicktap/ui/utils/zod';
+
+configureZodErrorMap(z);
+```
+
+**You pass `z` in, and that is deliberate.** This package does not depend on zod — not on a version
+and not on a copy. The map has to land on the zod instance your schemas were built with, and an app
+on zod 3 must be able to install `@clicktap/ui` without a stray zod 4 appearing in its type graph.
+That last one is not hypothetical: adding zod 4 to this library, even only as a dev dependency,
+made `@hookform/resolvers`' `zodResolver` resolve zod 4's types against the reference app's zod 3
+schemas and produced 29 typecheck errors across it. Passing the namespace makes the instance
+explicit and costs one argument.
+
+Call it **once per module registry**. In a Next.js app that is two places, because the server and
+browser bundles are separate registries and a module evaluated in one is not evaluated in the other:
+
+```ts
+// app/layout.tsx      — SSR and server actions
+// app/providers.tsx   — 'use client', the browser
+configureZodErrorMap(z);
+```
+
+It is a plain idempotent function rather than a side-effecting import on purpose: calling it twice
+is harmless, and an explicit call is not something a bundler can tree-shake away. That also answers
+the "structure it so there is only one import point" question — there is no structure that can
+collapse two module registries into one, so the API is at least honest about needing both calls.
+
+### Customising
+
+```ts
+configureZodErrorMap(z, {
+  required: 'Required.',
+  constraints: { stringTooSmall: (min) => `At least ${min}, please.` },
+});
+
+configureZodErrorMap(z, { constraints: false }); // only rewrite the missing-value case
+```
+
+## Precedence — per-check messages still win
+
+The map returns `undefined` for anything it does not handle, so zod falls back to whatever message
+is attached at the schema. Covered by tests:
+
+| schema | input | message |
+| --- | --- | --- |
+| `z.string().min(8, 'Pick a longer password.')` | `'abc'` | `Pick a longer password.` |
+| `z.string().min(8)` | `'abc'` | `Must be at least 8 characters.` |
+| `z.string().min(1, 'Enter your name.')` | `''` | `Enter your name.` |
+| `z.string().min(1, 'Enter your name.')` | `undefined` | `This field is required.` |
+| `z.email()` | `'nope'` | `Invalid email address` (zod's own, already readable) |
+
+The fourth row is the one worth staring at: the field's own message loses to the global map,
+because the field was never filled in and its `.min(1)` check never ran.
+
+## Migration checklist
+
+- [ ] **Delete your hand-rolled `config/zod.ts`** and call `configureZodErrorMap(z)` from the same
+  two places the side-effect import was made.
+- [ ] Nothing to install — you supply your own `z`.
+- [ ] If you are on zod 3, ignore this entirely.
+
+## Note for maintainers
+
+The behaviour above was verified against a real zod 4.4.3 before the API was settled; the unit tests
+then drive the map with issue fixtures captured from that run, since the package carries no zod to
+test against.
+
+An earlier attempt imported zod directly and declared it an optional peer. Two things killed it, in
+order of discovery: the library build **inlined zod's own global-config implementation**
+(`globalThis.__zod_globalConfig` and the assignment around it) rather than importing it — visible
+only by reading `dist/`, because the in-repo import resolves through the tsconfig path alias and
+looks identical either way — and installing zod 4 here to test against broke the zod-3 reference
+app's typecheck. Taking the namespace as an argument removes both problems at once.

package/docs/migrations/2026/08/ui-2026-08-21-graphql-client-string-documents.md

@@ -0,0 +1,45 @@
+# GraphQL Client Executes String Documents — graphql-request Removed
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Affects:** `utils/createAuthAwareGraphqlClient` (public API)
+**Classification:** COMPATIBILITY (breaking)
+**Breaking:** Yes. AST `TypedDocumentNode` documents are no longer accepted; the `GraphQLClient` re-export is gone; `ClientError` is now this module's own class.
+**Ticket:** CTAP-1383
+
+## Problem
+
+The auth-aware client wrapped `graphql-request`, whose static imports put the whole
+`graphql` package (parser, lexer, printer, AST machinery) plus `cross-fetch` into every
+consumer page's initial JS — ~30 KB gz that existed only to turn an AST back into the
+query text codegen started from.
+
+## Changes
+
+- `createAuthAwareGraphqlClient()` executes documents as **text**: one JSON POST via
+  `fetch`. Same call signatures (`request(url, document, variables?, requestHeaders?)`
+  and `.withOptions({ …, signal })`), same partial-response semantics (HTTP 200 with
+  `data` + `errors` returns the partial data), same 401/403/5xx events on
+  `authAwareEvents`, same dev field-error logging.
+- **Documents must be strings** — codegen `TypedDocumentString`
+  (`documentMode: 'string'`) or plain strings. The new `GraphqlDocument<TData,
+  TVariables>` type carries result/variable typing structurally, so response-type
+  inference at call sites is unchanged.
+- **`ClientError` is now defined here**, shape-compatible with `graphql-request`'s
+  (`response.status/data/errors`, `request.query/variables`). `instanceof ClientError`
+  against this module's export now always matches — the dual-package hazard the old
+  re-export warned about is gone. The identity-agnostic `getRequestErrorStatus` from
+  `utils/error` continues to work untouched.
+- **Removed:** the `GraphQLClient` re-export (nothing to re-export), and the
+  `graphql-request` dependency (dev + peer).
+
+## Migration
+
+1. Switch codegen to string documents: `presetConfig`/`config` → `documentMode:
+   'string'` (client-preset ≥ 4 for `TypedDocumentString`), regenerate.
+2. Replace `TypedDocumentNode`/`RequestDocument` types at wrapper boundaries with
+   `GraphqlDocument` / `GraphqlVariables` from this module; `GraphQLClientRequestHeaders`
+   with the platform `HeadersInit`.
+3. Sites that imported `ClientError` from `graphql-request` import it from here.
+4. A call that must send `FormData` or custom cors/credentials keeps using
+   `createAuthAwareFetch()` (unchanged) and `String(document)` for the query text.

package/docs/migrations/2026/08/ui-2026-08-21-graphql-peer-covered.md

@@ -0,0 +1,26 @@
+# `graphql` Peer Is Covered — No More Double Bundle
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Affects:** consumers' bundle size (~12 KB gz of duplicated `graphql`)
+**Classification:** BUGFIX (dependency resolution)
+**Breaking:** No. `graphql ^16.6.0` is an optional peer, matching `@clicktap/state`.
+**Ticket:** CTAP-1383
+
+## Problem
+
+The lib declared `graphql-request` (dev + optional peer) but not `graphql` itself.
+With `auto-install-peers`, pnpm resolved `graphql-request`'s `graphql ^16` peer to the
+**newest** matching version (16.14.0) while the app and `@clicktap/state` pinned 16.12.0.
+Two full copies of the `graphql` package — parser, lexer, printer — shipped in every
+page's initial JS. (The uncovered-peer-is-a-floating-install trap.)
+
+## Changes
+
+`graphql` is now declared: `16.12.0` in devDependencies, `^16.6.0` as an optional peer
+(mirroring `@clicktap/state`). The whole runtime graph resolves a single `graphql@16.12.0`.
+
+## What to check
+
+After `pnpm install`, `ls node_modules/.pnpm | grep '^graphql@'` in a consuming app
+should show one runtime version reachable from the frontend graph.

package/docs/migrations/2026/08/ui-2026-08-21-heroui-removed.md

@@ -0,0 +1,54 @@
+# The @heroui Dependency Is Gone — Accordion, Tooltip, Pagination, Badge Are Native
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Ticket:** CTAP-1383 (epic CTAP-1380)
+**Affects:** Accordion, Tooltip, Pagination, Badge. Peer/dev dependencies on `@heroui/*` removed.
+**Classification:** COMPATIBILITY
+**Breaking:** API-compatible for every usage shape in the reference repo (inventoried below). Consumers importing `@heroui`/`@nextui-org` types directly must switch to this package's exports.
+
+## Why
+
+Four components wrapped `@heroui/*` while supplying ALL of their own visual
+styling — the wrapper bought two DOM elements and a positioning engine, and
+cost the whole @heroui system + theme (~25 KiB gz) in the initial JS of every
+page, anchored by the PLP filter sidebar's Accordion. This library's actual
+base is react-aria-components; the rewrites cost nothing new:
+
+- **Accordion** → RAC `DisclosureGroup`/`Disclosure`. Height animates with
+  the CSS grid-rows trick (no animation runtime).
+- **Tooltip** → RAC `TooltipTrigger`/`Tooltip`/`OverlayArrow` (`Focusable`
+  makes arbitrary trigger nodes hoverable).
+- **Pagination** → native boundary/sibling windowing.
+- **Badge** → the two wrapper elements, inline.
+
+## Preserved API surface (inventoried from real call sites)
+
+- Accordion: `selectionMode`, `defaultSelectedKeys` (incl. `"all"`),
+  `defaultExpandedKeys`, controlled `selectedKeys` + `onSelectionChange`,
+  `disallowEmptySelection`, `hideIndicator` (group and per-item),
+  `showDivider`/`dividerProps` (an `<hr>` between items — `[&_hr]:hidden`
+  keeps working), `itemClasses`/per-item `classNames` slots, per-item
+  `title`/`subtitle`/`startContent`/`indicator` (a component still receives
+  `{ isOpen }` — import `AccordionItemIndicatorProps` from HERE now),
+  `disableIndicatorAnimation`, `onPress`, and the `data-open` attribute on
+  heading/trigger/indicator that `data-[open=true]:` selectors style.
+- Tooltip: `content`, `offset`, `placement`, `showArrow`, `delay`,
+  `isDisabled`, `classNames.base/content`, arbitrary child as trigger.
+- Pagination: `total`, `page`/`initialPage`, `onChange`, `boundaries`,
+  `siblings`, `showControls`, `isCompact`, `classNames` slots incl.
+  `data-[active=true]`/`data-[disabled=true]` styling hooks.
+- Badge: unchanged names (`content`, `isInvisible`, `placement`, `shape`,
+  `size`, `variant`, `showOutline`, `isDot`, `classNames`).
+
+## What you need to do
+
+- Remove `@heroui/*` and `@nextui-org/*` from your app's dependencies if they
+  existed only for these components or their types; import the types from
+  this package instead (`AccordionItemIndicatorProps` moved here).
+- If you used heroui props OUTSIDE the surface above, check the component
+  source — the compat layer is deliberate, not exhaustive.
+- Verified on the reference storefront: PLP filter accordion (expand/
+  collapse/apply, all-open default, indicator rotation), checkout accordions
+  (controlled single-selection payment list, promo/gift-card items), cart
+  badge, dividers, `data-open` styling. ~54 KiB gz off the initial bundle.

package/docs/migrations/2026/08/ui-2026-08-21-lazymotion-m-components.md

@@ -0,0 +1,54 @@
+# Animated Components Render `m.*` — Apps Must Provide LazyMotion Features
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Ticket:** CTAP-1383 (epic CTAP-1380)
+**Affects:** every animated component (ModalOverlay, Drawer, Dialog, Menu, ContextMenu, Tabs, Badge, Collapsible, NumberTicker, Meter, Progressbar, UploadImage).
+**Classification:** COMPATIBILITY
+**Breaking:** Animations no-op (components still render and function) until the consuming app mounts a `LazyMotion` provider.
+
+## What changed
+
+Every framer-motion element in this library is now `m.*` instead of
+`motion.*`. Under framer's LazyMotion pattern, `m` components carry no
+animation runtime of their own — the feature set loads from a provider the
+APP mounts, as an async chunk.
+
+Why: `motion.*` imports statically bundle the full framer runtime (~38 KiB
+gz). Because overlay primitives (ModalOverlay, Drawer, Badge) sit in every
+storefront's layout, that runtime shipped in the initial JS of every page.
+With `m.*`, the initial bundle carries only framer's slim core and the
+features arrive async — measured ~0.2-0.5s of simulated-mobile LCP on the
+reference storefront.
+
+## What you need to do
+
+Mount a `LazyMotion` provider above everything that renders these components
+(both root layouts in the reference app):
+
+```tsx
+'use client';
+import { LazyMotion } from 'framer-motion';
+
+const loadFeatures = () => import('./motionFeatures').then((m) => m.default);
+// motionFeatures.ts:  import { domMax } from 'framer-motion'; export default domMax;
+
+export function MotionProvider({ children }) {
+  return <LazyMotion features={loadFeatures}>{children}</LazyMotion>;
+}
+```
+
+Two load-bearing details:
+
+- the features import lives in its OWN file — inlining `domMax` into the
+  provider keeps it in the provider's (initial) chunk, defeating the point;
+- use `domMax` if anything in your tree uses layout animations
+  (`layout`/`layoutId` props); `domAnimation` otherwise.
+
+Without a provider nothing errors: components mount, function, and simply
+appear without transitions. If your drawers/dialogs "stopped animating"
+after this release, the missing provider is why.
+
+Do not use `strict` on the provider if any code in the tree still renders
+full `motion.*` — full-motion elements are self-contained and coexist fine
+without strict.

package/docs/migrations/2026/08/ui-2026-08-21-modal-triggers-wired-explicitly.md

@@ -0,0 +1,43 @@
+# Modal Triggers Are Wired Explicitly; Overlay Animation Back on `motion`
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Affects:** DialogTrigger, ModalOverlay, Dialog
+**Classification:** BUGFIX
+**Breaking:** No. Same component APIs; consumer `onPress` on the trigger child still runs (chained).
+**Ticket:** CTAP-1383
+
+## Problems
+
+1. **Trigger-driven modals never opened** — every uncontrolled `DialogTrigger` modal
+   (account address/payment create-edit-delete, delete confirmations) rendered an inert
+   button: react-aria-components wires its trigger through `PressResponderContext`, and in
+   this app's production bundles that registration silently never reaches the Button (no
+   aria attributes applied, press never toggles state) — with a verified-single instance
+   of react-aria-components, @react-aria/interactions, react, and framer-motion in the
+   bundle, so it is NOT the dual-package hazard CTAP-1210 fixed. Every working modal in
+   the app (FilterButton, RegionSelectAction, CartDrawer) works because it passes an
+   explicit `onPress`/controlled `isOpen`. Evidence says this has been broken on master
+   too (the same missing aria attributes on QA's trigger buttons).
+2. **`m.create` broke controlled modals** — the CTAP-1383 LazyMotion conversion switched
+   `motion.create(...)` to `m.create(...)` in ModalOverlay/Dialog. In production browser
+   bundles the m-created overlay never mounts its portal (works in jsdom; browser-only).
+   Verified by A/B builds: identical code with `motion.create` opens, `m.create` does not.
+
+## Changes
+
+- `DialogTrigger` no longer wraps react-aria-components' DialogTrigger. It owns a
+  `useOverlayTriggerState`, provides it on `OverlayTriggerStateContext` (which both our
+  ModalOverlay and react-aria's read), and clones the first child with an explicit
+  `onPress` that toggles the state — the mechanism the rest of the app already proves
+  out. A consumer-supplied `onPress` is chained before the toggle. The `useDialogTrigger`
+  shim is unchanged.
+- `ModalOverlay`/`Dialog` are back on `motion.create` (costs ~18 KB gz of initial JS vs
+  the m form — the price of modals that open). Root-causing why `m.create` + react-aria
+  overlays fail in production bundles is a follow-up; if solved, the m form can return.
+
+## What to check
+
+Any `DialogTrigger` + `Button` + `ModalOverlay` combination opens on press — uncontrolled
+(account pages) and controlled (PLP filter) alike. Dialog `aria-label`s are now the only
+labelling source (the react-aria trigger-id fallback is gone) — our dialogs all pass one.

package/docs/migrations/2026/08/ui-2026-08-21-next-image-fallback-keeps-fill.md

@@ -0,0 +1,38 @@
+# next Image: the optimizer-failure fallback keeps fill semantics
+
+**Date:** 2026-08-21
+**Package:** `@clicktap/ui`
+**Ticket:** CTAP-1376 (found during the CTAP-1375 QA incident)
+**Affects:** `@clicktap/ui/next/Image` — every `fill`-mode usage. No consumer code change.
+**Classification:** BUGFIX
+**Breaking:** No
+
+## The failure this removes
+
+When `next/image` optimization fails, this wrapper bypasses it and renders the
+raw src as a plain `<img>` (the `onError` debounce path and the render-error
+boundary). Both forwarded `className`, `style` and `width`/`height` — but a
+`fill` image has no width/height props, and its positioning
+(`position:absolute; inset:0; height/width:100%`) is inline style **NextImage
+itself adds**, which the fallback bypassed along with the optimizer.
+
+So a fill image whose optimizer fetch failed degraded catastrophically instead
+of gracefully: before the raw src loaded it sat as a broken icon at its
+container's top-left; once loaded it rendered at NATURAL size — a 2880px
+category hero escaping its `relative overflow-hidden` banner and filling
+multiple viewports. With an environment-wide optimizer failure (CTAP-1375:
+media URLs pointing at an unreachable host) that was every banner on the site.
+
+## The fix
+
+When the props include `fill`, both fallback `<img>`s re-apply the same inline
+styles NextImage would have (`position:absolute; height/width:100%;
+left/top/right/bottom:0`), merged under the caller's `style`. `object-fit`
+still arrives via the forwarded `className` (`object-cover` etc.). Sized
+images (width/height props) are byte-for-byte unchanged.
+
+## What you need to do
+
+Nothing — take the release. If you have ever worked around this with wrapper
+divs or manual absolute positioning around a fill-mode `Image` specifically
+for its error state, that can come off.

package/docs/migrations/2026/08/ui-2026-08-22-accordion-divider-between-items.md

@@ -0,0 +1,30 @@
+# Accordion Divider Renders BETWEEN Items; react-aria Stack Aligned
+
+**Date:** 2026-08-22
+**Package:** `@clicktap/ui`
+**Affects:** Accordion consumers using `dividerProps` as an inter-item spacer (checkout payment methods); every react-aria-components consumer
+**Classification:** BUGFIX
+**Breaking:** No (peer ranges raised: react-aria ^3.48, react-aria-components ^1.17, react-stately ^3.46).
+**Ticket:** CTAP-1383
+
+## Problems
+
+1. **Divider inside the item box.** The CTAP-1383 Accordion rewrite rendered the
+   between-items `<hr>` INSIDE each Disclosure — inside the consumer's bordered
+   `itemClasses.base` box. The checkout payment list styles the divider as an invisible
+   `h-4` spacer meant as a GAP between boxes, so every payment method carried ~32px of
+   dead space under its title. heroui rendered dividers between items; the rewrite now
+   does too (a sibling after each Disclosure).
+2. **Mixed react-aria internals.** The repo pinned react-aria 3.46 / react-aria-components
+   1.15 while pnpm resolved newer @react-aria internals into their closures. Production
+   bundles with that mix showed a family of RAC-internal failures jsdom never caught:
+   Table rows losing their cells on hover (account orders emptying), and the
+   PressResponder trigger wiring never reaching Buttons. Dev/peer versions now align on
+   the coherent set: react-aria 3.48.0, react-aria-components 1.17.0, react-stately
+   3.46.0 — verified to fix the Table hover failure outright.
+
+## What to check
+
+Payment methods render as compact bordered rows (divider = gap, not in-box padding).
+Account orders survive hovering/navigating rows. Bordered/splitted Accordion variants
+keep their internal spacing (those style the divider as a visible rule, unaffected).

package/docs/migrations/2026/08/ui-2026-08-22-accordion-divider-class-ownership.md

@@ -0,0 +1,14 @@
+# Accordion `dividerProps.className` Owns the Divider Outright
+
+**Date:** 2026-08-22
+**Package:** `@clicktap/ui`
+**Affects:** Accordion consumers styling the inter-item divider
+**Classification:** BUGFIX
+**Breaking:** No.
+**Ticket:** CTAP-1383
+
+A consumer-supplied `dividerProps.className` now replaces the default divider classes
+(spacing and color) instead of stacking on top of them. The checkout payment list
+styles the divider as an invisible `h-4` spacer; with the default `my-2` still applied
+the gap between items doubled to 32px. Consumers that pass no className keep the
+default `my-2` rule.

package/docs/migrations/2026/08/ui-2026-08-22-react-aria-moves-as-one-version-set.md

@@ -0,0 +1,46 @@
+# react-aria Moves as One Version Set
+
+**Date:** 2026-08-22
+**Package:** `@clicktap/ui`
+**Affects:** every consumer of react-aria-components — dependency policy, not an API change
+**Classification:** COMPATIBILITY
+**Read before updating:** never bump `react-aria`, `react-aria-components`, or `react-stately` independently — skewed internals fail silently, and only in production bundles.
+**Ticket:** CTAP-1383
+
+## The finding
+
+The repo pinned `react-aria-components@1.15.1` / `react-aria@3.46.0` while pnpm resolved
+NEWER `@react-aria/*` subpackages into their closures (an ordinary lockfile drift — the
+packages install fine, typecheck fine, and every jest suite passes). The mixed internals
+produced a family of failures that exist **only in production browser bundles**:
+
+- **Uncontrolled `DialogTrigger` modals were dead.** The PressResponder trigger wiring
+  never reached the Button: the trigger props arrived structurally but valueless, presses
+  never toggled the overlay state. Every account modal (address/payment create, edit,
+  delete confirmations) silently did nothing — on master too.
+- **`Table` rows lost their cells on hover.** Sweeping the pointer across the account
+  orders table emptied every `<tr>` (row elements remain, children gone) — the "my orders
+  disappear when I hover them" report. Click-through and back-navigation compounded it.
+- Likely related, unproven: `m.create()`-wrapped RAC overlays never mounting their portal
+  (see the modal-triggers guide) — same only-in-production signature.
+
+None of this reproduces in jsdom. All package instances were verified single-copy in the
+bundle (this is NOT the CTAP-1210 dual-package hazard), which is what makes the skew so
+hard to see: the failure lives in version-mismatched internals of one coherent-looking
+install.
+
+## The rule
+
+`react-aria`, `react-aria-components`, and `react-stately` are released together and must
+be adopted together. This package's devDependencies pin one coherent set (currently
+3.48.0 / 1.17.0 / 3.46.0) and its peer ranges floor consumers at the same set; the
+reference app pins the identical versions. When bumping, take the trio from the same
+react-aria release announcement and re-run the production-bundle checks below —
+aligning to the coherent set fixed the Table failure outright with no code change.
+
+## How to verify (jsdom cannot)
+
+Probe a production build in a real browser: open an uncontrolled DialogTrigger modal
+(account → Add Address), hover-sweep the orders table rows and count `[role="row"]`
+children, and diff `.pnpm` instance DIRS — key on the full directory name, not
+`name@version`, or two peer-hash instances of the same version collapse into one.