@clicktap/ui 2.4.2 → 2.4.4

package/components/Collection/CollectionFilters/CollectionFilters.js

@@ -1 +1 @@
-"use client";import{jsxs as l,Fragment as h,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as g,AccordionItem as w}from"../../Accordion/Accordion.js";import{Button as f}from"../../Button/Button.js";import"../../../utils/cn.js";import{ModalOverlay as N}from"../../ModalOverlay/ModalOverlay.js";import{Modal as y}from"../../Modal/Modal.js";import{Drawer as k}from"../../Drawer/Drawer.js";import{Cross as C}from"../../Icon/Cross.js";import{CrossSmall as A}from"../../Icon/CrossSmall.js";import{Search as D}from"../../Icon/Search.js";import{FilterRenderer as I}from"../FilterRenderer/FilterRenderer.js";import{mergeFilters as S}from"../../../utils/collection/mergeFilters.js";import{FilterAccordionTitle as j}from"../FilterAccordionTitle/FilterAccordionTitle.js";import{EmptyResults as L}from"../EmptyResults/EmptyResults.js";import"react-aria-components";import"../../Icon/DownArrow.js";import"framer-motion";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";function M(){return e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function V({value:a,onChange:r}){const[o,c]=v(a),m=()=>{r(o.trim())};return l("div",{className:"relative",children:[e("input",{type:"search",value:o,onChange:i=>c(i.target.value),onKeyDown:i=>{i.key==="Enter"&&(i.preventDefault(),m())},onBlur:m,placeholder:"Search products...","aria-label":"Search products",autoComplete:"off",className:"w-full h-9 pl-8 pr-8 rounded-md border border-border bg-surface text-sm text-fg placeholder:text-fg-subtle focus:outline-none focus:border-border-emphasis [&::-webkit-search-cancel-button]:hidden"}),o&&e("button",{type:"button",onClick:()=>{c(""),r("")},"aria-label":"Clear search",className:"absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-full hover:bg-surface-subtle transition-colors cursor-pointer",children:e(A,{})}),e("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 [&>svg]:w-full [&>svg]:h-full text-fg-subtle",children:e(D,{})})]})}function ue({availableFilters:a,appliedFilters:r,onFilterChange:o,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:n,totalItems:i}){const u=b(()=>S(r,a).filter(t=>t.includeInFilters!==!1),[r,a]),d=n&&e(V,{value:s??"",onChange:n},s),p=()=>u.length>0&&e(g,{selectionMode:"multiple",defaultSelectedKeys:"all",className:"pt-2 mt-3",showDivider:!1,itemClasses:{base:"py-1",title:"text-sm font-medium leading-7",trigger:"py-2 border-b border-border-subtle",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:u.map(t=>e(w,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:o}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:o,appliedFilters:r,variant:"sidebar"})})},t.code))});return l(h,{children:[l("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,p(),r.length>0&&e("button",{type:"button",className:"text-sm text-fg-muted hover:text-fg transition-colors mt-4 mb-8 cursor-pointer",onClick:()=>o([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(N,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(y,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>l("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[l("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-fg",children:"Filters"}),e(f,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),l("div",{className:"flex flex-col flex-1 overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden",children:[d&&e("div",{className:"mt-3",children:d}),p(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>o([]),onClearSearch:s&&n?()=>n(""):void 0})]}),l("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-border-subtle",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-fg-muted hover:text-fg transition-colors cursor-pointer",onClick:()=>o([]),children:"Clear all"}),e(f,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{ue as CollectionFilters};
+"use client";import{jsxs as l,Fragment as h,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as g,AccordionItem as w}from"../../Accordion/Accordion.js";import{Button as f}from"../../Button/Button.js";import"../../../utils/cn.js";import{ModalOverlay as N}from"../../ModalOverlay/ModalOverlay.js";import{Modal as y}from"../../Modal/Modal.js";import{Drawer as k}from"../../Drawer/Drawer.js";import{Cross as C}from"../../Icon/Cross.js";import{CrossSmall as A}from"../../Icon/CrossSmall.js";import{Search as D}from"../../Icon/Search.js";import{FilterRenderer as I}from"../FilterRenderer/FilterRenderer.js";import{mergeFilters as S}from"../../../utils/collection/mergeFilters.js";import{FilterAccordionTitle as j}from"../FilterAccordionTitle/FilterAccordionTitle.js";import{EmptyResults as L}from"../EmptyResults/EmptyResults.js";import"react-aria-components";import"../../Icon/DownArrow.js";import"framer-motion";import"../../../utils/frameDrivenOnUpdate.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";function M(){return e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function V({value:a,onChange:r}){const[o,c]=v(a),m=()=>{r(o.trim())};return l("div",{className:"relative",children:[e("input",{type:"search",value:o,onChange:i=>c(i.target.value),onKeyDown:i=>{i.key==="Enter"&&(i.preventDefault(),m())},onBlur:m,placeholder:"Search products...","aria-label":"Search products",autoComplete:"off",className:"w-full h-9 pl-8 pr-8 rounded-md border border-border bg-surface text-sm text-fg placeholder:text-fg-subtle focus:outline-none focus:border-border-emphasis [&::-webkit-search-cancel-button]:hidden"}),o&&e("button",{type:"button",onClick:()=>{c(""),r("")},"aria-label":"Clear search",className:"absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded-full hover:bg-surface-subtle transition-colors cursor-pointer",children:e(A,{})}),e("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 [&>svg]:w-full [&>svg]:h-full text-fg-subtle",children:e(D,{})})]})}function pe({availableFilters:a,appliedFilters:r,onFilterChange:o,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:n,totalItems:i}){const u=b(()=>S(r,a).filter(t=>t.includeInFilters!==!1),[r,a]),d=n&&e(V,{value:s??"",onChange:n},s),p=()=>u.length>0&&e(g,{selectionMode:"multiple",defaultSelectedKeys:"all",className:"pt-2 mt-3",showDivider:!1,itemClasses:{base:"py-1",title:"text-sm font-medium leading-7",trigger:"py-2 border-b border-border-subtle",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:u.map(t=>e(w,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:o}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:o,appliedFilters:r,variant:"sidebar"})})},t.code))});return l(h,{children:[l("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,p(),r.length>0&&e("button",{type:"button",className:"text-sm text-fg-muted hover:text-fg transition-colors mt-4 mb-8 cursor-pointer",onClick:()=>o([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(N,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(y,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>l("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[l("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-fg",children:"Filters"}),e(f,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),l("div",{className:"flex flex-col flex-1 overflow-x-hidden overflow-y-auto [scrollbar-width:none] [-webkit-overflow-scrolling:touch] [&::-webkit-scrollbar]:hidden",children:[d&&e("div",{className:"mt-3",children:d}),p(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>o([]),onClearSearch:s&&n?()=>n(""):void 0})]}),l("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-border-subtle",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-fg-muted hover:text-fg transition-colors cursor-pointer",onClick:()=>o([]),children:"Clear all"}),e(f,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{pe as CollectionFilters};

package/components/Collection/CollectionFilters/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{CollectionFilters as J}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"react-aria-components";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"../../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../../Modal/Modal.js";import"../../Drawer/Drawer.js";import"../../Icon/Cross.js";import"../../Icon/CrossSmall.js";import"../../Icon/Search.js";import"../FilterRenderer/FilterRenderer.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";import"../../../utils/collection/mergeFilters.js";import"../FilterAccordionTitle/FilterAccordionTitle.js";import"../EmptyResults/EmptyResults.js";export{J as CollectionFilters};
+import{CollectionFilters as K}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"react-aria-components";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"../../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../../../utils/frameDrivenOnUpdate.js";import"../../Modal/Modal.js";import"../../Drawer/Drawer.js";import"../../Icon/Cross.js";import"../../Icon/CrossSmall.js";import"../../Icon/Search.js";import"../FilterRenderer/FilterRenderer.js";import"../../../utils/env.js";import"../../../utils/swatch.js";import"../FilterRenderer/Renderer/Option.js";import"../../Checkbox/Checkbox.js";import"../FilterRenderer/Renderer/useOptionFilterToggle.js";import"../FilterRenderer/Renderer/Swatch.js";import"../FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../../Icon/CheckIcon.js";import"../../../utils/color.js";import"../FilterRenderer/Renderer/Swatch/SwatchImage.js";import"../FilterRenderer/Renderer/Swatch/SwatchText.js";import"../FilterRenderer/Renderer/Boolean.js";import"../../RadioGroup/RadioGroup.js";import"../../Radio/Radio.js";import"../FilterRenderer/Renderer/Range.js";import"../../../utils/collection/mergeFilters.js";import"../FilterAccordionTitle/FilterAccordionTitle.js";import"../EmptyResults/EmptyResults.js";export{K as CollectionFilters};

package/components/Collection/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{AttributeDataProvider as Q,useAttributeData as U}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as W}from"./EmptyResults/EmptyResults.js";import{ProductPrice as Y}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as _}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as rr}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as tr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as pr}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as er}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as cr}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"react-stately";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"@react-aria/interactions";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Select/MultiButtonSelect.js";import"../Icon/FilterIcon.js";export{Q as AttributeDataProvider,rr as CollectionFilterChips,er as CollectionFilters,cr as CollectionToolbar,W as EmptyResults,tr as FilterAccordionTitle,_ as FilterRenderer,pr as ProductCardSwatches,Y as ProductPrice,U as useAttributeData};
+import{AttributeDataProvider as U,useAttributeData as V}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as X}from"./EmptyResults/EmptyResults.js";import{ProductPrice as Z}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as $}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as or}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as ir}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as mr}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as lr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as fr}from"./CollectionToolbar/CollectionToolbar.js";import"react/jsx-runtime";import"react";import"../../utils/env.js";import"../../utils/swatch.js";import"./FilterRenderer/Renderer/Option.js";import"../Checkbox/Checkbox.js";import"react-aria-components";import"../../utils/cn.js";import"./FilterRenderer/Renderer/useOptionFilterToggle.js";import"./FilterRenderer/Renderer/Swatch.js";import"./FilterRenderer/Renderer/Swatch/SwatchColor.js";import"../Icon/CheckIcon.js";import"../../utils/color.js";import"./FilterRenderer/Renderer/Swatch/SwatchImage.js";import"./FilterRenderer/Renderer/Swatch/SwatchText.js";import"./FilterRenderer/Renderer/Boolean.js";import"../RadioGroup/RadioGroup.js";import"../Radio/Radio.js";import"./FilterRenderer/Renderer/Range.js";import"../Button/Button.js";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"framer-motion";import"../../utils/frameDrivenOnUpdate.js";import"../Modal/Modal.js";import"../Drawer/Drawer.js";import"../Icon/Cross.js";import"../Icon/Search.js";import"../../utils/collection/mergeFilters.js";import"../Select/Option.js";import"react-stately";import"../Select/Select.js";import"../Select/ButtonSelect.js";import"react-aria";import"@react-aria/interactions";import"../Select/parts.js";import"../Select/ComboBoxSelect.js";import"../Loader/Pulse.js";import"../Select/MultiButtonSelect.js";import"../Icon/FilterIcon.js";export{U as AttributeDataProvider,or as CollectionFilterChips,lr as CollectionFilters,fr as CollectionToolbar,X as EmptyResults,ir as FilterAccordionTitle,$ as FilterRenderer,mr as ProductCardSwatches,Z as ProductPrice,V as useAttributeData};

package/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.types';
-export declare function Dialog({ className, children, animationVariants, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ className, children, animationVariants, onUpdate, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/components/Dialog/Dialog.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{forwardRef as f}from"react";import{Dialog as m}from"react-aria-components";import{motion as u}from"framer-motion";import{cn as c}from"../../utils/cn.js";const s=f(({style:o,animationVariants:a,...t},i)=>{const r=typeof o=="function"?o(t):o;return e(m,{...t,ref:i,style:r})});let n=null;function d(){return typeof window>"u"?null:(n||(n=u.create(s)),n)}const l=d();function y({className:o,children:a,animationVariants:t,...i}){const r={className:c("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","-translate-x-1/2 -translate-y-1/2","max-h-[calc(100dvh-2rem)] overflow-y-auto","bg-surface text-fg","shadow-[0_8px_24px_rgba(0,0,0,0.1)]","rounded-lg border border-solid border-border-emphasis",o),...i};return l?e(l,{...r,variants:t||{hidden:{opacity:0},visible:{opacity:1}},children:a}):e(s,{...r,children:a})}export{y as Dialog,y as default};
+"use client";import{jsx as i}from"react/jsx-runtime";import{forwardRef as s}from"react";import{Dialog as d}from"react-aria-components";import{motion as u}from"framer-motion";import{cn as c}from"../../utils/cn.js";import{frameDrivenOnUpdate as p}from"../../utils/frameDrivenOnUpdate.js";const l=s(({style:o,animationVariants:r,...t},a)=>{const e=typeof o=="function"?o(t):o;return i(d,{...t,ref:a,style:e})});let n=null;function g(){return typeof window>"u"?null:(n||(n=u.create(l)),n)}const f=g();function h({className:o,children:r,animationVariants:t,onUpdate:a,...e}){const m={className:c("p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4","-translate-x-1/2 -translate-y-1/2","max-h-[calc(100dvh-2rem)] overflow-y-auto","bg-surface text-fg","shadow-[0_8px_24px_rgba(0,0,0,0.1)]","rounded-lg border border-solid border-border-emphasis",o),...e};return f?i(f,{...m,variants:t||{hidden:{opacity:0},visible:{opacity:1}},onUpdate:p(a),children:r}):i(l,{...m,children:r})}export{h as Dialog,h as default};

package/components/Dialog/Dialog.types.d.ts

@@ -1,8 +1,10 @@
 import { Key } from 'react';
 import { DialogProps as UIDialogProps } from 'react-aria-components';
-import { MotionStyle, Variants } from 'framer-motion';
+import { MotionProps, MotionStyle, Variants } from 'framer-motion';
 export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
     key?: Key;
     style?: MotionStyle;
     animationVariants?: Variants;
+    /** Called with the animating values every frame of the fade. */
+    onUpdate?: MotionProps['onUpdate'];
 };

package/components/Dialog/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{Dialog as e}from"./Dialog.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../../utils/cn.js";export{e as Dialog};
+import{Dialog as f}from"./Dialog.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../../utils/cn.js";import"../../utils/frameDrivenOnUpdate.js";export{f as Dialog};

package/components/Icon/UserIcon.js

@@ -1 +1 @@
-"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{cn as n}from"../../utils/cn.js";function c({className:t,size:r=16}){return o("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n("text-ffl-gray-500 flex-shrink-0",t),stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e("circle",{cx:"12",cy:"7",r:"4"})]})}export{c as UserIcon,c as default};
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cn as n}from"../../utils/cn.js";function c({className:o,size:r=16}){return t("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n("flex-shrink-0",o),stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e("path",{d:"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}),e("circle",{cx:"12",cy:"7",r:"4"})]})}export{c as UserIcon,c as default};

package/components/ModalOverlay/ModalOverlay.d.ts

@@ -13,7 +13,7 @@ import { ModalOverlayProps } from './ModalOverlay.types';
  * @clicktap/ui copies installed (ordinary pnpm version skew) the trigger wrote `visible` into one
  * copy while the overlay read the other's `unmounted` default — `animate="unmounted"` names no
  * variant, framer-motion holds `initial: "hidden"`, and every trigger-driven modal sat mounted at
- * `opacity: 0` with zero errors (CTAP-1210, noco). react-aria's context is the safe dependency:
+ * `opacity: 0` with zero errors (CTAP-1210, found by a consumer). react-aria's context is the safe dependency:
  * if react-aria-components itself is duplicated, everything breaks loudly.
  *
  * Exported for unit tests only.

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import{forwardRef as N,useContext as M,useState as k,useEffect as A,useId as R,useCallback as O}from"react";import{ModalOverlay as E,OverlayTriggerStateContext as w}from"react-aria-components";import{motion as T,AnimatePresence as F}from"framer-motion";import{cn as j}from"../../utils/cn.js";const q="body > [inert]:not(#__next):not([data-overlay-container])";function z(e){return Object.keys(e).some(t=>t.startsWith("__react"))}function p(){document.querySelectorAll(q).forEach(e=>e.removeAttribute("inert"))}function L(e){return!!(e.closest("[data-overlay-container]")||e.closest("#__next"))}const W=N(({style:e,children:t,...i},n)=>{const r=typeof e=="function"?e(i):e;return a(E,{...i,ref:n,style:r,children:t})});let m=null;function $(){return typeof window>"u"?null:(m||(m=T.create(W)),m)}const h=$();function g({animate:e,animation:t,setAnimation:i,className:n,animationVariants:r,isDismissable:u=!0,children:v,...x}){const C=R();A(()=>{p();const o=new MutationObserver(l=>{for(const d of l)if(d.type==="attributes"&&d.attributeName==="inert"){const f=d.target;f.parentElement===document.body?p():z(f)||f.removeAttribute("inert")}});return o.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>o.disconnect()},[]);const{key:S,shouldCloseOnInteractOutside:c,onOpenChange:s,..._}=x,P=O(o=>c?c(o):L(o),[c]),y=M(w),I=O(o=>{!u||o.target!==o.currentTarget||(s?s(!1):y?.close())},[u,s,y]),b={isDismissable:u,shouldCloseOnInteractOutside:P,onOpenChange:s,onPointerDown:I,className:j("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",n),..._};return h?a(h,{isExiting:t==="hidden",onAnimationComplete:o=>{i(l=>o==="hidden"&&l==="hidden"?"unmounted":l)},variants:r||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:e,exit:"hidden",...b,children:v},S||C):a(E,{...b,children:v})}function B(e){const t=e?.isOpen??!1,[i,n]=k(t?"visible":"unmounted");return A(()=>{n(t?"visible":r=>r==="visible"?"hidden":r)},[t]),[i,n]}function Q(e){const{isOpen:t}=e,i=M(w),[n,r]=B(i);return t!==void 0?a(F,{children:t&&a(g,{...e,animate:"visible",animation:n,setAnimation:r})}):n==="unmounted"?null:a(g,{...e,animate:n,animation:n,setAnimation:r})}export{Q as ModalOverlay,Q as default,B as useOverlayAnimationState};
+"use client";import{jsx as a}from"react/jsx-runtime";import{forwardRef as k,useContext as M,useState as R,useEffect as A,useId as T,useCallback as b}from"react";import{ModalOverlay as E,OverlayTriggerStateContext as w}from"react-aria-components";import{motion as F,AnimatePresence as U}from"framer-motion";import{cn as j}from"../../utils/cn.js";import{frameDrivenOnUpdate as q}from"../../utils/frameDrivenOnUpdate.js";const z="body > [inert]:not(#__next):not([data-overlay-container])";function D(e){return Object.keys(e).some(t=>t.startsWith("__react"))}function O(){document.querySelectorAll(z).forEach(e=>e.removeAttribute("inert"))}function L(e){return!!(e.closest("[data-overlay-container]")||e.closest("#__next"))}const W=k(({style:e,children:t,...i},n)=>{const r=typeof e=="function"?e(i):e;return a(E,{...i,ref:n,style:r,children:t})});let m=null;function $(){return typeof window>"u"?null:(m||(m=F.create(W)),m)}const h=$();function g({animate:e,animation:t,setAnimation:i,className:n,animationVariants:r,isDismissable:u=!0,children:v,...x}){const C=T();A(()=>{O();const o=new MutationObserver(l=>{for(const d of l)if(d.type==="attributes"&&d.attributeName==="inert"){const f=d.target;f.parentElement===document.body?O():D(f)||f.removeAttribute("inert")}});return o.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>o.disconnect()},[]);const{key:S,shouldCloseOnInteractOutside:c,onOpenChange:s,onUpdate:_,...P}=x,I=b(o=>c?c(o):L(o),[c]),y=M(w),N=b(o=>{!u||o.target!==o.currentTarget||(s?s(!1):y?.close())},[u,s,y]),p={isDismissable:u,shouldCloseOnInteractOutside:I,onOpenChange:s,onPointerDown:N,className:j("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",n),...P};return h?a(h,{isExiting:t==="hidden",onAnimationComplete:o=>{i(l=>o==="hidden"&&l==="hidden"?"unmounted":l)},variants:r||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:e,exit:"hidden",...p,onUpdate:q(_),children:v},S||C):a(E,{...p,children:v})}function B(e){const t=e?.isOpen??!1,[i,n]=R(t?"visible":"unmounted");return A(()=>{n(t?"visible":r=>r==="visible"?"hidden":r)},[t]),[i,n]}function X(e){const{isOpen:t}=e,i=M(w),[n,r]=B(i);return t!==void 0?a(U,{children:t&&a(g,{...e,animate:"visible",animation:n,setAnimation:r})}):n==="unmounted"?null:a(g,{...e,animate:n,animation:n,setAnimation:r})}export{X as ModalOverlay,X as default,B as useOverlayAnimationState};

package/components/ModalOverlay/ModalOverlay.types.d.ts

@@ -1,6 +1,6 @@
 import { Key, ReactNode } from 'react';
 import { ModalOverlayProps as UiModalOverlayProps, ModalRenderProps } from 'react-aria-components';
-import { MotionStyle, Variant } from 'framer-motion';
+import { MotionProps, MotionStyle, Variant } from 'framer-motion';
 export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
     key?: Key;
     style?: MotionStyle;
@@ -8,6 +8,8 @@ export interface ModalOverlayProps extends Omit<UiModalOverlayProps, 'children'
         visible: Variant;
         hidden: Variant;
     };
+    /** Called with the animating values every frame of the fade. */
+    onUpdate?: MotionProps['onUpdate'];
     children: ReactNode | ((values: ModalRenderProps & {
         defaultChildren: ReactNode;
     }) => ReactNode);

package/components/ModalOverlay/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{ModalOverlay as e}from"./ModalOverlay.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../../utils/cn.js";export{e as ModalOverlay};
+import{ModalOverlay as l}from"./ModalOverlay.js";import"react/jsx-runtime";import"react";import"react-aria-components";import"framer-motion";import"../../utils/cn.js";import"../../utils/frameDrivenOnUpdate.js";export{l as ModalOverlay};

package/docs/migrations/2026/06/ui-2026-06-17-select-standardization.md

@@ -2,7 +2,7 @@
 
 **Date:** 2026-06-17
 **Package:** `@clicktap/ui`
-**Affects:** Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (Crispi, FFL, and any fork that renders pickers, sort controls, country/region selects, or configurable-product options).
+**Affects:** Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (downstream projects and any fork that renders pickers, sort controls, country/region selects, or configurable-product options).
 **Classification:** FEATURE + BREAKING
 **Breaking:** Yes — (1) `DropdownSelect` removed, (2) the bare `<Select>` is now a **button picker**, not a combobox, (3) `DropdownSelect`'s `classNames.trigger` is now `classNames.input`, (4) the root is `w-full` by default, (5) `<Option>` is react-stately's `Item` — keyed by `key` (no `id`) and **cannot be wrapped**.
 **Formerly named:** `2026-06-17-select-standardization.md` — renamed 2026-08-10 (CTAP-1214) for global filename uniqueness; library guides carry their package slug so they can never collide with an app-level guide in a consumer's aggregated working set. **If you carry a `-applied` sibling under the old name, rename it to match — do NOT re-apply.**

package/docs/migrations/2026/07/ui-2026-07-31-ui-exports-bundler-resolution.md

@@ -1,7 +1,7 @@
 # `@clicktap/ui` resolves its deep subpaths under `moduleResolution: bundler` (CTAP-1060)
 
 **Date:** 2026-07-31
-**Revised:** 2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See "Test runners (Jest)" below; reported by noco.
+**Revised:** 2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See "Test runners (Jest)" below; reported by a consumer.
 **Package:** `@clicktap/ui`
 **Breaking:** No — additive to the `exports` map. Existing `moduleResolution: node` / `node10`
 consumers are unaffected (that resolver ignores `exports`); this only *adds* working resolution under
@@ -50,7 +50,7 @@ emits only `.d.ts` for it).
 The original map declared only `types` + `import` conditions. That covers bundlers — but **Node CJS
 resolution** (what Jest uses without ESM flags) matches neither, so it fell through to the `.d.ts`
 and died on `export interface`. Any consumer whose Jest suite touches `useCooldown` (i.e. anyone
-adopting the CTAP-1114 `useResendCode` pattern *with* its tests) hit this; noco worked around it with
+adopting the CTAP-1114 `useResendCode` pattern *with* its tests) hit this; one consumer worked around it with
 a `moduleNameMapper` straight to the `.js` files.
 
 Since this revision every runtime subpath entry carries a **`default` condition (last)** pointing at

package/docs/migrations/2026/08/ui-2026-08-07-ui-peer-contract-form-graphql-optional-peers.md

@@ -12,7 +12,7 @@
 CTAP-1158 validated every publishable lib manifest against its real imports. For `@clicktap/ui`
 that audit changed the peer contract and corrected a wrong dependency pin, but no guide shipped
 with it — consumers would meet the changes as unexplained manifest churn on the next release
-(reported by family-rpg, 2026-08-07). This is that guide.
+(reported by a consumer, 2026-08-07). This is that guide.
 
 ## What changed
 

package/docs/migrations/2026/08/ui-2026-08-11-password-reveal-toggle.md

@@ -2,7 +2,7 @@
 
 **Date:** 2026-08-11
 **Revised:** 2026-08-11 — consumer action now says to rename a component named for the press-and-hold
-gesture (family-rpg's `HoldToRevealButton`), not only to swap its handlers.
+gesture (for example a `HoldToRevealButton`), not only to swap its handlers.
 **Package:** `@clicktap/ui`
 **Affects:** `@clicktap/ui` — `Input` with `type="password"`.
 **Classification:** IMPROVEMENT (UX / accessibility)
@@ -69,7 +69,7 @@ Shipped in `@clicktap/ui` **0.43.6**.
   and add `aria-pressed` + the state-dependent `aria-label` while you are in there. The reference
   frontend also updated its one bespoke reveal (`UpdateEmailForm`) to match.
   - **Rename the component if its name describes the gesture.** If you named it for press-and-hold
-    when you applied CTAP-1128 — family-rpg had `HoldToRevealButton` (2026-08-11) — the name now
+    when you applied CTAP-1128 — one consumer had `HoldToRevealButton` (2026-08-11) — the name now
     documents behaviour the code no longer implements, in the one place nobody re-reads. Rename it
     (`PasswordRevealButton`, `ShowPasswordToggle`) in the same change as the handler swap, and grep
     for the old name in tests and stories.

package/docs/migrations/2026/08/ui-2026-08-11-peer-ranges-capped.md

@@ -57,7 +57,7 @@ rather than as an error.
 ### When the duplicate is transitive — nothing of yours to pin
 
 The paragraph above assumes the second copy comes from a declaration you own. Often it does not:
-crispi resolves `react-stately` 3.49.0 cleanly across every workspace member and still carries a
+one consumer resolves `react-stately` 3.49.0 cleanly across every workspace member and still carries a
 second copy at 3.46.0, arriving via `@adobe/react-spectrum` → `react-aria-components`. No manifest of
 theirs names it, so there is no pin to correct.
 

package/docs/migrations/2026/08/ui-2026-08-24-accordion-author-key-space.md

@@ -4,7 +4,7 @@
 **Package:** `@clicktap/ui`
 **Affects:** every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups.
 **Classification:** BUGFIX
-**Breaking:** No — unless you shipped a workaround that pre-prefixes keys (see crispi note).
+**Breaking:** No — unless you shipped a workaround that pre-prefixes keys (see the shim note below).
 **Ticket:** CTAP-1404
 
 ## The defect (2.0.x regression from the CTAP-1383 react-aria rewrite)
@@ -17,11 +17,11 @@ were only `String()`ed, so:
 1. `selectedKeys` / `defaultSelectedKeys` / `defaultExpandedKeys` never matched
    any item — nothing opened, nothing highlighted. The checkout payment step's
    method selection "not working" was this.
-2. `onSelectionChange` handed the PREFIXED id back out — crispi's checkout
+2. `onSelectionChange` handed the PREFIXED id back out — a consumer's checkout
    dispatched `".$CYBERSOURCE"` as a payment method code to the backend.
 
 The heroui accordion this replaced handled keys correctly. Diagnosed by the
-crispi session against the installed 2.0.6 bundle.
+consumer's session against the installed 2.0.6 bundle.
 
 ## The fix
 
@@ -36,13 +36,13 @@ round-trips with no output translation. `"all"` and unkeyed children (positional
 
 1. Take the release; no call-site changes needed — controlled accordions start
    working as written.
-2. **Delete compensating shims.** crispi: `libs/crispi-ui/.../Accordion.tsx`
-   wrapper (crispi-monorepo `7a44704f0`) must be REMOVED when taking this
+2. **Delete compensating shims.** A consumer-side `.../Accordion.tsx`
+   wrapper that pre-prefixes keys must be REMOVED when taking this
    release — it translates keys into the prefixed space, which no longer
    exists, so keeping it reintroduces the bug in the other direction. Check the
    shim's own escape handling is not needed elsewhere (this fix also covers
    escaped keys, which a bare `.$`-strip shim does not).
-3. If any code path stored or transmitted a prefixed id (`.$…`) — crispi saw
+3. If any code path stored or transmitted a prefixed id (`.$…`) — one consumer saw
    them reach the backend as payment codes — check persisted data for the
    `.$` prefix.
 

package/docs/migrations/2026/09/ui-2026-09-16-modal-overlay-detached-motion-element.md

@@ -28,7 +28,7 @@ observed:
    keyframe resolvers synchronously on the detached element.
 
 🚨 Thrown inside framer-motion's frame loop, so nothing reaches server logs and no React error
-boundary catches it. noco hit it in the warranty admin: a controlled drawer (route 1) containing a
+boundary catches it. A consumer hit it in its warranty admin: a controlled drawer (route 1) containing a
 never-opened trigger-driven Page Builder overlay threw **13 errors on every close**, and in
 production that broke the frame loop — the close animation and the success toast were both lost.
 Every other trigger-driven overlay in that app (delete confirms, edit modals) carried the same
@@ -49,8 +49,8 @@ already gets from `AnimatePresence` is now the same on both paths:
 
 ## Consumer impact
 
-- **Nothing to change.** Take the release. If you gated the overlay yourself in a wrapper (noco
-  tried it in `@noco/ui`), **remove that gate**: mounting only once already open, with the hook
+- **Nothing to change.** Take the release. If you gated the overlay yourself in a wrapper (one
+  consumer tried it in its own UI library), **remove that gate**: mounting only once already open, with the hook
   initialized to `visible`, gives framer-motion no transition to play and leaves the backdrop stuck
   at `opacity: 0`. The fix has to live where the animation state is derived.
 - ⚠️ Do not read the mount as a signal. Nothing should depend on a closed trigger-driven overlay

package/docs/migrations/2026/09/ui-2026-09-18-pin-input-autofill-and-controlled-value.md

@@ -5,11 +5,11 @@
 **Affects:** `src/components/PinInput/PinInput.tsx`, `PinInput.types.ts`. Every consumer of `<PinInput>` (signup, forgot-password and email/password-change verification on the storefront).
 **Classification:** BUGFIX (three) + IMPROVEMENT (`value`/`name` honored)
 **Breaking:** No API change. **Behavioral:** passing `value` now controls the boxes (it was silently ignored); `maxLength` is no longer rendered; `autoComplete="one-time-code"` is on the first box only.
-**Ticket:** CTAP-1749 (from NOCOE-2944)
+**Ticket:** CTAP-1749
 
 ## What was wrong
 
-Four things, all in this component (a consumer wrapper such as noco's `libs/noco-ui` only restyles it):
+Four things, all in this component (a consumer wrapper in a consumer's UI library only restyles it):
 
 1. **Android autofill and Gboard's clipboard chip lost five of six digits.** The paste handler split
    digits across the boxes correctly, but autofill and the keyboard chip insert text as an *input*

package/docs/migrations/2026/09/ui-2026-09-30-modal-fade-no-final-frame-blink.md

@@ -0,0 +1,30 @@
+# BUGFIX: `ModalOverlay` and `Dialog` no longer blink at the end of each fade
+
+**Date:** 2026-09-30
+**Package:** `@clicktap/ui`
+**Affects:** `ModalOverlay`, `Dialog`, and the new `utils/frameDrivenOnUpdate`
+**Classification:** BUGFIX
+**Breaking:** No. Both components gain an optional `onUpdate` prop.
+**Ticket:** CTAP-2075
+
+## What changed
+
+Every modal blinked for one frame when its fade finished. On open the backdrop and dialog dropped
+back to opacity 0 for a frame; on close the dialog flashed back to 1 and the backdrop to full dark
+before unmounting.
+
+framer-motion 11 runs `opacity` as a native browser (WAAPI) animation. When it finishes, framer sets
+the final value, which it writes to the style on its next frame, and cancels the animation at once,
+which removes the animation's fill. For that frame the element shows its stale inline opacity.
+
+Both motion elements now always pass an `onUpdate`. framer never uses WAAPI for an element with
+one, so the fade runs frame by frame in JavaScript and the gap is gone. Custom `animationVariants`
+still apply, and the exit still completes and unmounts.
+
+A consumer's own `onUpdate` still runs: both components accept it as a prop and call it every
+frame.
+
+## Migrate
+
+Nothing beyond taking the release. A fork with its own copy of these components adds
+`onUpdate={frameDrivenOnUpdate(onUpdate)}` to each motion element.

package/docs/migrations/2026/10/ui-2026-10-02-user-icon-drops-project-color-class.md

@@ -0,0 +1,25 @@
+# `UserIcon` no longer carries a project's color class
+
+**Date:** 2026-10-02
+**Package:** `@clicktap/ui`
+**Affects:** `components/Icon/UserIcon`
+**Classification:** IMPROVEMENT
+**Breaking:** No for any app that does not define the removed color token. One that does loses that color on the icon until it passes the class itself.
+**Ticket:** CTAP-2094
+
+## What changed
+
+`UserIcon` hard-coded a `text-*-gray-500` class for a color token one consuming project defines in its
+own theme. The platform defines no such token, so the class did nothing here, and it named a project in
+the shared library. The icon now carries only `flex-shrink-0` and inherits its color like the other
+icons, so a consumer sets the color it wants through `className`.
+
+## Migrate
+
+If your theme defined that token (or any color you relied on for this icon), pass it:
+
+```tsx
+<UserIcon className="text-brand-gray-500" />
+```
+
+Nothing else.

package/docs/migrations/index.json

@@ -1,4 +1,24 @@
 [
+  {
+    "path": "2026/10/ui-2026-10-02-user-icon-drops-project-color-class.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-10-02",
+    "title": "`UserIcon` no longer carries a project's color class",
+    "classification": "IMPROVEMENT",
+    "breaking": "No for any app that does not define the removed color token. One that does loses that color on the icon until it passes the class itself.",
+    "affects": "`components/Icon/UserIcon`"
+  },
+  {
+    "path": "2026/09/ui-2026-09-30-modal-fade-no-final-frame-blink.md",
+    "module": "libs/frontend-modules/ui",
+    "package": "@clicktap/ui",
+    "date": "2026-09-30",
+    "title": "BUGFIX: `ModalOverlay` and `Dialog` no longer blink at the end of each fade",
+    "classification": "BUGFIX",
+    "breaking": "No. Both components gain an optional `onUpdate` prop.",
+    "affects": "`ModalOverlay`, `Dialog`, and the new `utils/frameDrivenOnUpdate`"
+  },
   {
     "path": "2026/09/ui-2026-09-24-semantic-color-token-lint-rule.md",
     "module": "libs/frontend-modules/ui",
@@ -146,7 +166,7 @@
     "date": "2026-08-24",
     "title": "Accordion controlled selection matches authored keys again",
     "classification": "BUGFIX",
-    "breaking": "No — unless you shipped a workaround that pre-prefixes keys (see crispi note).",
+    "breaking": "No — unless you shipped a workaround that pre-prefixes keys (see the shim note below).",
     "affects": "every controlled or default-expanded `Accordion` — checkout payment method selection, checkout's `defaultExpandedKeys={['cart']}`, totals/discount panel, PDP mobile overview, filter groups."
   },
   {
@@ -383,7 +403,7 @@
     "breaking": "No — additive to the `exports` map. Existing `moduleResolution: node` / `node10`",
     "affects": "",
     "revised": "2026-08-08",
-    "revised_note": "2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See \"Test runners (Jest)\" below; reported by noco."
+    "revised_note": "2026-08-08 — the test-runner half (CTAP-1195): every runtime subpath entry gains a `default` condition, so CJS resolvers (Jest) stop falling through to the `.d.ts`. See \"Test runners (Jest)\" below; reported by a consumer."
   },
   {
     "path": "2026/06/ui-2026-06-18-select-hiddenselect-setvalue-crash.md",
@@ -403,7 +423,7 @@
     "title": "Select standardization — one `<Select searchable>`, `DropdownSelect` removed",
     "classification": "FEATURE + BREAKING",
     "breaking": "Yes — (1) `DropdownSelect` removed, (2) the bare `<Select>` is now a **button picker**, not a combobox, (3) `DropdownSelect`'s `classNames.trigger` is now `classNames.input`, (4) the root is `w-full` by default, (5) `<Option>` is react-stately's `Item` — keyed by `key` (no `id`) and **cannot be wrapped**.",
-    "affects": "Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (Crispi, FFL, and any fork that renders pickers, sort controls, country/region selects, or configurable-product options)."
+    "affects": "Any app consuming `@clicktap/ui`'s `Select` / `DropdownSelect` (downstream projects and any fork that renders pickers, sort controls, country/region selects, or configurable-product options)."
   },
   {
     "path": "2026/05/ui-2026-05-29-password-check-requirements-variant.md",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",

package/utils/frameDrivenOnUpdate.d.ts

@@ -0,0 +1,18 @@
+import { MotionProps } from 'framer-motion';
+type OnUpdate = NonNullable<MotionProps['onUpdate']>;
+/**
+ * An `onUpdate` for a motion element that must not animate through WAAPI (CTAP-2075).
+ *
+ * framer-motion 11 runs `opacity` as a native (WAAPI) animation. Its finish handler sets the final
+ * value, which framer writes to the style on its NEXT frame, and then cancels the animation at once,
+ * removing the WAAPI fill. For that one frame the element shows its stale inline opacity: a modal
+ * blinks back to 0 at the end of its fade in, and to 1 at the end of its fade out.
+ *
+ * framer never uses WAAPI for an element that has an `onUpdate` prop, so the fade runs frame by frame
+ * in JS instead. This always returns one, calling the consumer's `onUpdate` when there is one.
+ *
+ * It looks removable. It is not, until framer-motion writes the final value before cancelling (check
+ * `AcceleratedAnimation`'s `onfinish` when upgrading to 12.x).
+ */
+export declare function frameDrivenOnUpdate(onUpdate?: OnUpdate): OnUpdate;
+export {};

package/utils/frameDrivenOnUpdate.js

@@ -0,0 +1 @@
+function r(e){return n=>e?.(n)}export{r as frameDrivenOnUpdate};