@clicktap/ui 0.41.1 → 0.42.0

package/components/Switch.d.ts

@@ -0,0 +1 @@
+export * from './Switch/index';

package/components/Switch.js

@@ -0,0 +1 @@
+export * from './Switch/index.js';

package/components/Table.d.ts

@@ -0,0 +1 @@
+export * from './Table/index';

package/components/Table.js

@@ -0,0 +1 @@
+export * from './Table/index.js';

package/components/Tabs/Tab.js

@@ -1 +1 @@
-"use client";import{jsx as r,jsxs as u,Fragment as b}from"react/jsx-runtime";import{useContext as c}from"react";import{Tab as m}from"react-aria-components";import{motion as f}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,...s}){return r(m,{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-slate-500",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-slate-400",(e==="underline"||e==="outline")&&"selected:text-slate-800",(e==="solid"||e==="enclosed")&&"selected:text-slate-100",l),...s,children:t})}function w({variant:o="base",children:e,className:l,classNames:t,...s}){const d=c(p);return r(x,{orientation:d,variant:o,className:l,...s,children:n=>u(b,{children:[typeof e=="function"?e({defaultChildren:void 0,...n}):e,(n.isFocusVisible||n.isSelected)&&r(f.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-slate-800",o==="underline"&&"rounded-lg bg-slate-800 mix-blend-color bottom-0",o==="underline"&&d==="horizontal"&&"left-0 w-full h-px",o==="underline"&&d==="vertical"&&"right-0 w-px h-full",o==="enclosed"&&"inset-0 border-solid border-1 border-slate-800 -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};
+"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};

package/components/Tabs/TabList.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import{useContext as n}from"react";import{TabList as f}from"react-aria-components";import{cn as s}from"../../utils/cn.js";import{BaseTab as m}from"./Tab.js";import{TabsOrientationContext as c}from"./Tabs.context.js";import"framer-motion";function T({items:t,children:i,variant:e="base",className:l,...a}){const o=n(c);return r(f,{className:s("flex flex-row w-full flex-wrap gap-2 relative",o==="vertical"&&"orientation-vertical:max-w-max orientation-vertical:flex-col orientation-vertical:justify-start",[e==="solid"&&["bg-slate-200 rounded-xl p-1"],e==="outline"&&["border-solid border-2 border-slate-200 rounded-xl p-1"],e==="underline"&&o==="vertical"&&["before:block before:absolute before:inset-y-0 before:right-0 before:w-px before:bg-slate-200"],e==="underline"&&o==="horizontal"&&["before:block before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-slate-200"]],l),items:t,...a,children:i||(b=>r(m,{orientation:o,children:b.title}))})}export{T as TabList,T as default};
+"use client";import{jsx as r}from"react/jsx-runtime";import{useContext as n}from"react";import{TabList as f}from"react-aria-components";import{cn as s}from"../../utils/cn.js";import{BaseTab as m}from"./Tab.js";import{TabsOrientationContext as c}from"./Tabs.context.js";import"framer-motion";function T({items:t,children:i,variant:e="base",className:l,...b}){const o=n(c);return r(f,{className:s("flex flex-row w-full flex-wrap gap-2 relative",o==="vertical"&&"orientation-vertical:max-w-max orientation-vertical:flex-col orientation-vertical:justify-start",[e==="solid"&&["bg-slate-200 rounded-xl p-1"],e==="outline"&&["border-solid border-2 border-border-subtle rounded-xl p-1"],e==="underline"&&o==="vertical"&&["before:block before:absolute before:inset-y-0 before:right-0 before:w-px before:bg-slate-200"],e==="underline"&&o==="horizontal"&&["before:block before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-slate-200"]],l),items:t,...b,children:i||(a=>r(m,{orientation:o,children:a.title}))})}export{T as TabList,T as default};

package/components/Tabs.d.ts

@@ -0,0 +1 @@
+export * from './Tabs/index';

package/components/Tabs.js

@@ -0,0 +1 @@
+export * from './Tabs/index.js';

package/components/Time.d.ts

@@ -0,0 +1 @@
+export * from './Time/index';

package/components/Time.js

@@ -0,0 +1 @@
+export * from './Time/index.js';

package/components/TimeInput/TimeInput.js

@@ -1 +1 @@
-"use client";import{jsxs as n,jsx as i}from"react/jsx-runtime";import{TimeField as u,Label as c,DateInput as f,DateSegment as x,Text as b,FieldError as m}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function w({label:a,description:l,errorMessage:r,className:o,classNames:t,...d}){return n(u,{className:e("text-slate-900",o),...d,children:[i(c,{className:e("flex text-slate-500 text-sm",t?.label),children:a}),i(f,{className:e("flex items-center","border-solid border border-slate-300 rounded-md","text-sm text-slate-900","h-10 px-1 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus-within:outline-2 focus-within:outline focus-within:outline-slate-200 focus-within:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus-within:border-red-600 invalid:focus-within:outline-red-200",t?.input),children:s=>i(x,{segment:s,className:e("p-1 tabular-nums text-end text-slate-900","invalid:text-red-500","disabled:cursor-default disabled:select-none disabled:text-slate-400","focus:text-slate-900 focus:bg-slate-200 focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-red-500 focus:invalid:text-white","type-literal:p-0.5","data-[placeholder]:text-slate-400 data-[placeholder]:invalid:text-red-500 data-[placeholder]:invalid:focus:text-white","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-slate-500 aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-slate-500 aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),l&&i(b,{className:e("flex text-slate-500 text-sm",t?.description),slot:"description",children:l}),i(m,{className:e("flex text-red-500 text-sm",t?.error),children:r})]})}export{w as TimeInput,w as default};
+"use client";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{TimeField as u,Label as f,DateInput as c,DateSegment as b,Text as x,FieldError as g}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:a,description:i,errorMessage:o,className:l,classNames:t,...d}){return s(u,{className:e("text-fg",l),...d,children:[r(f,{className:e("flex text-fg-muted text-sm",t?.label),children:a}),r(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus-within:border-danger invalid:focus-within:outline-danger-ring",t?.input),children:n=>r(b,{segment:n,className:e("p-1 tabular-nums text-end text-fg","invalid:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-slate-200 focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-danger-soft focus:invalid:text-white","type-literal:p-0.5","data-[placeholder]:text-fg-subtle data-[placeholder]:invalid:text-danger-soft data-[placeholder]:invalid:focus:text-white","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-slate-500 aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-slate-500 aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),i&&r(x,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:i}),r(g,{className:e("flex text-danger-soft text-sm",t?.error),children:o})]})}export{v as TimeInput,v as default};

package/components/TimeInput.d.ts

@@ -0,0 +1 @@
+export * from './TimeInput/index';

package/components/TimeInput.js

@@ -0,0 +1 @@
+export * from './TimeInput/index.js';

package/components/Timezone.d.ts

@@ -0,0 +1 @@
+export * from './Timezone/index';

package/components/Timezone.js

@@ -0,0 +1 @@
+export * from './Timezone/index.js';

package/components/ToggleButton/ToggleButton.js

@@ -1 +1 @@
-"use client";import{jsx as l}from"react/jsx-runtime";import{ToggleButton as n}from"react-aria-components";import{cn as b}from"../../utils/cn.js";function g({children:o,size:e="md",variant:t="solid",className:r,...d}){return l(n,{className:a=>{const{isDisabled:s}=a;return b("flex items-center justify-center","font-semibold text-sm","rounded-md border-solid border","px-4","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95",{"h-8":e==="sm","h-10":e==="md","h-12":e==="lg"},[t==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-slate-900 disabled:text-slate-400",s&&["disabled:text-slate-900","opacity-75"]],t==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-slate-300 hover:border-slate-400 focus:border-slate-400 disabled:border-slate-200","text-slate-900 disabled:text-slate-500",s&&["disabled:border-slate-300","disabled:text-slate-900","opacity-75"]],t==="solid"&&["bg-slate-800 hover:bg-slate-900 focus:bg-slate-900 disabled:bg-slate-900","border-slate-800 hover:border-slate-900 focus:border-slate-900 disabled:border-slate-200","text-white disabled:text-slate-400",s&&["disabled:border-slate-900","disabled:text-white","opacity-75"]]],typeof r=="function"?r(a):r)},...d,children:o})}export{g as ToggleButton,g as default};
+"use client";import{jsx as a}from"react/jsx-runtime";import{ToggleButton as n}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function g({children:d,size:e="md",variant:r="solid",className:t,...b}){return a(n,{className:s=>{const{isDisabled:o}=s;return i("flex items-center justify-center","font-semibold text-sm","rounded-md border-solid border","px-4","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",{"h-8":e==="sm","h-10":e==="md","h-12":e==="lg"},[r==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",o&&["disabled:text-fg","opacity-75"]],r==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",o&&["disabled:border-border","disabled:text-fg","opacity-75"]],r==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-white disabled:text-fg-subtle",o&&["disabled:border-fg","disabled:text-white","opacity-75"]]],typeof t=="function"?t(s):t)},...b,children:d})}export{g as ToggleButton,g as default};

package/components/ToggleButton.d.ts

@@ -0,0 +1 @@
+export * from './ToggleButton/index';

package/components/ToggleButton.js

@@ -0,0 +1 @@
+export * from './ToggleButton/index.js';

package/components/Tooltip.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip/index';

package/components/Tooltip.js

@@ -0,0 +1 @@
+export * from './Tooltip/index.js';

package/components/UploadImage/UploadImage.js

@@ -1 +1 @@
-"use client";import{jsxs as l,Fragment as p,jsx as e}from"react/jsx-runtime";import{forwardRef as y,useState as v}from"react";import{motion as j}from"framer-motion";import V from"next/image";import{FieldError as _}from"react-aria-components";import{cn as a}from"../../utils/cn.js";import k from"../../hooks/useIsClient.js";import{Skeleton as u}from"../Skeleton/Skeleton.js";function U({hasTitle:r,className:s}){return l("div",{className:"w-full h-full flex flex-col gap-4",children:[r&&e(u,{className:"w-1/2 h-8 mx-auto rounded-md z-20"}),e(u,{className:a("w-full h-56 rounded-md z-20 relative",s)})]})}const S=y(({title:r,description:s="Preview will display here.",fileExtension:d,actionTitle:g="select file",variant:i,errorMessage:h,defaultImagePath:n,classNames:f,...c},x)=>{const b=k(),[t,w]=v({src:null,alt:null}),C=!!h,N=d?d.split(",").map(o=>`image/${o.trim()}`).join(", "):"image/*";return l("div",{className:a("w-full h-full","flex flex-col gap-4"),children:[b?l(p,{children:[r&&e("h6",{className:a("text-center","text-2xl","m-0 mb-4"),children:r}),l("div",{className:a("w-full h-full","flex flex-col justify-between gap-5 items-center",["bg-slate-100",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:m}}=o;m&&w({src:URL.createObjectURL(m[0]),alt:m[0].name})},className:a("inline-flex justify-center items-center","uppercase text-base border-slate-200","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-slate-950","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:x,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(p,{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(V,{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-slate-950 text-center",children:t.alt||s})]})]})]}):e(U,{hasTitle:!!r,className:f?.skeleton}),C&&e(_,{className:a("-mt-2","self-start"),children:h})]})});export{S as UploadImage,S 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{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};

package/components/UploadImage/index.js

@@ -1 +1 @@
-import{UploadImage as g}from"./UploadImage.js";import"react/jsx-runtime";import"react";import"framer-motion";import"next/image";import"react-aria-components";import"../../utils/cn.js";import"../../hooks/useIsClient.js";import"../Skeleton/Skeleton.js";export{g as UploadImage};
+import{UploadImage as f}from"./UploadImage.js";import"react/jsx-runtime";import"react";import"framer-motion";import"react-aria-components";import"../../utils/cn.js";import"../../hooks/useIsClient.js";import"../Skeleton/Skeleton.js";export{f as UploadImage};

package/components/UploadImage.d.ts

@@ -0,0 +1 @@
+export * from './UploadImage/index';

package/components/UploadImage.js

@@ -0,0 +1 @@
+export * from './UploadImage/index.js';

package/docs/migrations/2026/04/2026-04-24-image-placeholder-frontend-fallback.md

@@ -7,7 +7,7 @@
 
 ## Dependencies
 
-- See [frontend counterpart](2026-04-24-image-placeholder-frontend-fallback.md) ↔ for the consuming-app changes.
+- See [frontend counterpart](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-image-placeholder-frontend-fallback.md) ↔ for the consuming-app changes.
 
 ## Summary
 
@@ -60,7 +60,7 @@ Works equally well with raw `<img>`:
 <img src={product.image ?? PLACEHOLDER_IMAGE} alt="" />
 ```
 
-For the PDP/PLP migration, see the [frontend counterpart guide](2026-04-24-image-placeholder-frontend-fallback.md) — it covers the full cascade decision (variant → placeholder, no parent fallback) and the dead `no_selection` checks to remove.
+For the PDP/PLP migration, see the [frontend counterpart guide](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-image-placeholder-frontend-fallback.md) — it covers the full cascade decision (variant → placeholder, no parent fallback) and the dead `no_selection` checks to remove.
 
 ## Files Changed
 
@@ -74,7 +74,7 @@ For the PDP/PLP migration, see the [frontend counterpart guide](2026-04-24-image
 
 - [ ] `@clicktap/ui >= 0.27.0` installed in consumers.
 - [ ] No need to copy any SVG into the consuming app's `public/` folder.
-- [ ] Apply the [frontend counterpart guide](2026-04-24-image-placeholder-frontend-fallback.md) for the consuming-app changes.
+- [ ] Apply the [frontend counterpart guide](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-image-placeholder-frontend-fallback.md) for the consuming-app changes.
 
 ## Why a data URL and not a bundled file?
 

package/docs/migrations/2026/04/2026-04-30-prune-invalid-pdp-selections.md

@@ -8,7 +8,7 @@
 ## Dependencies
 
 - Builds on [`2026-04-30-top-down-pdp-option-dependency.md`](./2026-04-30-top-down-pdp-option-dependency.md). That migration introduced top-down option filtering with a blanket "clear every downstream selection on any upstream change". This migration replaces the recommended consumer pattern with a more conservative prune that preserves still-valid downstream picks.
-- Frontend counterpart: [`apps/frontend/.../2026-04-30-prune-invalid-pdp-selections.md`](2026-04-30-prune-invalid-pdp-selections.md) ↔.
+- Frontend counterpart: [`apps/frontend/.../2026-04-30-prune-invalid-pdp-selections.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-30-prune-invalid-pdp-selections.md) ↔.
 
 ## Summary
 
@@ -162,5 +162,5 @@ Replace the manual delete loop with a single `pruneInvalidSelections` call (see
 
 ## References
 
-- Frontend counterpart migration: [`apps/frontend/.../2026-04-30-prune-invalid-pdp-selections.md`](2026-04-30-prune-invalid-pdp-selections.md) ↔
+- Frontend counterpart migration: [`apps/frontend/.../2026-04-30-prune-invalid-pdp-selections.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-30-prune-invalid-pdp-selections.md) ↔
 - Previous top-down migration this builds on: [`2026-04-30-top-down-pdp-option-dependency.md`](./2026-04-30-top-down-pdp-option-dependency.md)

package/docs/migrations/2026/04/2026-04-30-top-down-pdp-option-dependency.md

@@ -7,7 +7,7 @@
 
 ## Dependencies
 
-- Builds on the per-axis selection model used in [`apps/frontend/.../2026-04-24-pdp-configurable-selector-ux.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-pdp-configurable-selector-ux.md). The previous symmetric filter lived in the frontend app; that logic now lives here in generic, reusable form. See [`apps/frontend/.../2026-04-30-top-down-pdp-option-dependency.md`](2026-04-30-top-down-pdp-option-dependency.md) ↔ for the frontend-side migration steps that adopt the new utilities and switch to top-down semantics.
+- Builds on the per-axis selection model used in [`apps/frontend/.../2026-04-24-pdp-configurable-selector-ux.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-pdp-configurable-selector-ux.md). The previous symmetric filter lived in the frontend app; that logic now lives here in generic, reusable form. See [`apps/frontend/.../2026-04-30-top-down-pdp-option-dependency.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-30-top-down-pdp-option-dependency.md) ↔ for the frontend-side migration steps that adopt the new utilities and switch to top-down semantics.
 
 ## Summary
 
@@ -282,5 +282,5 @@ Skip this and you'll occasionally see the matched variant query against an impos
 
 ## References
 
-- Frontend counterpart migration: [`apps/frontend/.../2026-04-30-top-down-pdp-option-dependency.md`](2026-04-30-top-down-pdp-option-dependency.md) ↔
+- Frontend counterpart migration: [`apps/frontend/.../2026-04-30-top-down-pdp-option-dependency.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-30-top-down-pdp-option-dependency.md) ↔
 - Prior symmetric-filter implementation it replaces: [`apps/frontend/.../2026-04-24-pdp-configurable-selector-ux.md`](../../../../../../apps/frontend/docs/migrations/2026/04/2026-04-24-pdp-configurable-selector-ux.md)

package/docs/migrations/2026/08/2026-08-06-clicktap-ui-image-next-subpath.md

@@ -0,0 +1,101 @@
+# `Image` is framework-free; Next's optimizer moves to `@clicktap/ui/next`
+
+**Date:** 2026-08-06
+**Ticket:** CTAP-1125 (epic CTAP-1122)
+**Affects:** Any consumer importing `@clicktap/ui/components/Image` or `@clicktap/ui/components/UploadImage`. Consumer counterpart: [`apps/frontend/docs/migrations/2026/08/2026-08-06-image-from-clicktap-ui-next.md`](../../../../../../apps/frontend/docs/migrations/2026/08/2026-08-06-image-from-clicktap-ui-next.md)
+**Requires:** `@clicktap/ui` at the release bundling CTAP-1125. Next consumers additionally need `next >= 14` installed — it is now an **optional peer**, so your package manager will not add it for you.
+**Classification:** IMPROVEMENT
+**Breaking:** Yes, for Next consumers — one import path per call site. See "If you are a Next app" below.
+
+## What changed and why
+
+`next` was in `dependencies`, so **every** consumer installed Next to use **any**
+component. That is the concrete blocker behind CTAP-1122: a Capacitor app wanted
+one `PinInput`, could not take the package, and reimplemented it by reading the
+built output.
+
+- `@clicktap/ui/components/Image` now renders a plain `<img>` and imports nothing
+  from Next. Its whole transitive closure is 5 files importing only `react`.
+- `@clicktap/ui/next/Image` is the previous `NextImage`-backed component, moved
+  verbatim — error boundary, failed-render cache, `onError` debounce and all.
+- `next` moved from `dependencies` to an **optional peer**. A consumer that never
+  imports `@clicktap/ui/next` gets zero Next in its tree.
+- `UploadImage` no longer touches Next at all (it used it for a fixed 96×200
+  preview and already rendered a plain `<img>` beside it).
+
+## Read this before assuming you can drop Next
+
+**Next's optimizer is a server capability, not markup.** It resizes on demand,
+converts to WebP/AVIF, and caches. The base component cannot reproduce that — it
+can only emit the right `srcset`, and it cannot invent variants that do not
+exist.
+
+So the question is not "Next or not", it is **what generates your variants**:
+
+| Your images | What to do |
+|---|---|
+| Served from a **static store** with no resizing in front (e.g. `/assets/*`) | Use `@clicktap/ui/next`. Next's optimizer is the only thing producing variants |
+| Behind a **resizing CDN** (Cloudinary, imgix, URL-param resizing) | Use the base component with a `loader`. Fewer hops than proxying through Next |
+| **Bundled** with the app (local files the bundler sees) | Use the base component with `srcSet` from a build-time pipeline |
+| No optimization available | Use the base component. Single-`src` `<img>` — correct, just unoptimized |
+
+## If you are a Next app
+
+One line per call site, and behaviour is identical:
+
+```diff
+- import { Image } from '@clicktap/ui/components/Image';
++ import { Image } from '@clicktap/ui/next/Image';
+```
+
+Add `next` to your own `dependencies` if it is not already there (it will be).
+
+**Do this in the same change as the upgrade.** The base component renders a
+correct `<img>`, so leaving a call site behind compiles, passes tests, and
+silently serves full-size images — a perf regression with no failing signal.
+
+## If you are not a Next app
+
+Import from `@clicktap/ui/components/Image` and supply variants one of two ways.
+
+**Build-time (bundled images).** Your bundler already resolves the import, so
+directives on the specifier drive it — no code scan, no maintained map. With
+Vite:
+
+```ts
+imagetools({ defaultDirectives: () => new URLSearchParams('w=640;1200;1920&format=webp&as=srcset') })
+```
+
+```tsx
+import hero from './hero.jpg';
+<Image src={hero.src} srcSet={hero.srcset} sizes="100vw" />
+```
+
+**Runtime (remote URLs).** Supply a `loader` once, the same way `RouteProvider`
+takes `pathname`:
+
+```tsx
+<ImageProvider config={{ loader: ({ src, width, quality }) => `${src}?w=${width}&q=${quality ?? 75}` }}>
+```
+
+`srcSet` wins over the loader — the bundler produced those exact files, so a
+loader guessing URLs for the same image would be redundant and wrong.
+
+## Prop contract on the base component
+
+| Prop | Behaviour |
+|---|---|
+| `srcSet` | **New.** Build-time variants; takes precedence over the loader |
+| `sizes` | Live whenever a `srcSet` exists (supplied or loader-generated); ignored otherwise, since it only means anything alongside a `srcset` |
+| `quality` | Passed to the loader |
+| `priority` | Honoured as `loading="eager"` + `fetchPriority="high"`. **No `<link rel="preload">`** — that is Next head management and only happens in `@clicktap/ui/next` |
+| `fill` | Honoured via absolute-fill style |
+| `dimmed` / `hidden` / `onReady` | Unchanged |
+| `placeholder` / `blurDataURL` / Next's `loader` type | `@clicktap/ui/next` only |
+
+## Verification
+
+1. `grep -r "@clicktap/ui/components/Image"` — every remaining hit in a Next app
+   is a call site now serving unoptimized images.
+2. In a Next app, confirm images still request `/_next/image?url=…`.
+3. In a non-Next app, confirm no `next` resolves: `npm ls next` should be empty.

package/docs/migrations/2026/08/2026-08-06-clicktap-ui-loaders-drop-framer-motion.md

@@ -0,0 +1,77 @@
+# `Button` and the loaders no longer need `framer-motion` (CTAP-1156)
+
+**Date:** 2026-08-06
+**Affects:** `@clicktap/ui` — `Button`, `ButtonLoadingContent`, `Loader/CircularEasing`, `Loader/Pulse`
+**Breaking:** No API change. **One requirement to be aware of** — see below.
+**Requires:** `@import '@clicktap/ui/theme.css'` in your CSS entry
+([tokens guide](./2026-08-06-clicktap-ui-semantic-tokens.md))
+**Classification:** IMPROVEMENT
+
+## What changed
+
+`Button` used to require the optional `framer-motion` peer. Not for anything Button
+does — it arrived through `ButtonLoadingContent` → `Loader/CircularEasing`, whose
+spinner used framer-motion for two decorative infinite animations. That made the
+package's **most likely first import** drag in a motion runtime.
+
+Those animations are now CSS keyframes shipped in `theme.css`. `Loader/Pulse` moved
+the same way, so the whole `Loader` subpath is motion-runtime-free.
+
+## What you need to do
+
+**Nothing, if you already import `@clicktap/ui/theme.css`** — which the tokens guide
+already makes mandatory. No API changed, no props changed, and the animations look
+identical: the durations and easings are the same values the framer-motion
+transitions used (`ease-in-out` is the same cubic-bezier framer calls `easeInOut`).
+
+The one thing to know: **`theme.css` now carries animation as well as colour.** If
+you skip it, you get a *static* spinner on top of unstyled components. That is not a
+new import — it is a new reason the existing one matters.
+
+If you install `@clicktap/ui` fresh and only need `Button`, you can now drop
+`framer-motion` from your dependencies entirely — unless you also use `Drawer`,
+`Dialog`, `Tabs`, `ContextMenu` or `Badge`, which still need it.
+
+## Why this was worth doing
+
+The tiering in the README is enforced by `nx run ui:verify-minimal-install`, which
+installs **only** the required peers into a temp dir outside the repo and bundles each
+subpath. Before this change `Button` sat in the *gated* list with a comment admitting
+the tiering was awkward precisely because of it. It now sits in the core list, with
+the check proving it:
+
+```
+Core subpaths — must work with only: react@18 react-dom@18 react-aria-components
+  ok   @clicktap/ui/components/Button                 resolves
+  ok   @clicktap/ui/components/Loader                 resolves
+```
+
+A side benefit: framer-motion 11.x's complex-value parser could crash inside
+`mixObject` when an ancestor `AnimatePresence` remeasured mid-flow, which is why the
+old components carefully animated numeric primitives instead of transform strings.
+CSS keyframes have no equivalent failure mode, so those workarounds are gone.
+
+## If you are overriding the animations
+
+Three keyframes and three animation tokens are exposed, so you can retime or replace
+them without patching components:
+
+| Token | Default |
+|---|---|
+| `--animate-ct-loader-spin` | `ct-loader-spin 2s linear infinite` |
+| `--animate-ct-loader-dash` | `ct-loader-dash 1.5s ease-in-out infinite` |
+| `--animate-ct-loader-pulse` | `ct-loader-pulse 0.75s ease-in-out infinite` |
+
+Override like any other token:
+
+```css
+:root {
+  --animate-ct-loader-spin: ct-loader-spin 4s linear infinite;
+}
+```
+
+## Related
+
+- **CTAP-1124** — the subpath entry points and optional-peer tiering this feeds into.
+- **CTAP-1123** — the semantic tokens that made `theme.css` a required import.
+- **CTAP-1122** — the epic making `@clicktap/ui` adoptable outside clicktap.

package/docs/migrations/2026/08/2026-08-06-clicktap-ui-semantic-tokens.md

@@ -0,0 +1,106 @@
+# `@clicktap/ui` semantic design tokens — add one CSS import (CTAP-1123)
+
+**Date:** 2026-08-06
+**Affects:** `@clicktap/ui`, every app that renders its components
+**Breaking:** **Yes — one required import.** Components render *unstyled* without it.
+**Requires:** Tailwind v4 (`@import 'tailwindcss'` in your CSS entry). See
+[the v4 upgrade guide](../../../../../../apps/frontend/docs/migrations/2026/07/2026-07-31-tailwind-3-to-4.md).
+**Classification:** COMPATIBILITY
+
+## Do this
+
+Add one line to your CSS entry, directly after the Tailwind import:
+
+```css
+@import 'tailwindcss';
+@import '@clicktap/ui/theme.css';   /* <- add this */
+```
+
+That is the entire migration. There is no Tailwind config change, no preset, and no
+`@config` migration required — `theme.css` uses v4's `@theme`, which both defines the
+variables *and* registers the utilities that read them.
+
+**It must sit before any non-`@import` rule.** CSS requires `@import` to precede all other
+rules, so if you place it after (say) a `@config` line it is dropped **silently** — no
+error, no variables, no utilities, and a build that passes. If your components look
+unstyled after following this guide, check the ordering first.
+
+## Why it is breaking
+
+Components used to hardcode literal palette classes (`text-slate-900`, `border-slate-300`).
+Those worked in any consumer only because slate and red are Tailwind **defaults** — every
+config has them. They now use token classes (`text-fg`, `border-border-subtle`), which have
+no values until this file is imported, so a component that skips the import renders with no
+colour at all.
+
+`@theme` composes with a JS config, so this works whether you are on `@config`, CSS-first,
+or mid-migration between them.
+
+## What you get
+
+Re-theming is now a runtime override of a token — no rebuild, no config surgery — under a
+class, an attribute, or a media query:
+
+```css
+:root[data-theme='dark'] {
+  --color-fg: oklch(98% 0 0);
+  --color-surface-subtle: oklch(25% 0.02 260);
+}
+```
+
+Previously a dark-themed app got a white box with dark text and could only fix it by
+overriding every component state individually.
+
+### The tokens
+
+| Group | Tokens |
+|---|---|
+| Foreground | `fg-strong`, `fg`, `fg-muted`, `fg-subtle`, `fg-inverse` |
+| Surface | `surface`, `surface-subtle`, `surface-inverse`, `surface-inverse-hover` |
+| Border | `border-subtle`, `border`, `border-emphasis` |
+| Danger | `danger`, `danger-soft`, `danger-surface`, `danger-ring` |
+| Status | `success`, `warning`, `info` |
+
+Each is a Tailwind colour token, so it composes with every colour utility: `text-fg`,
+`bg-surface-subtle`, `border-border-subtle`, `outline-border-subtle`, `ring-danger-ring`.
+
+**On `border-border-subtle`.** v4 has a single `--color-*` namespace feeding every colour
+utility, so a token named `border-subtle` necessarily yields `border-border-subtle` —
+Tailwind prefixes the utility itself. The doubling is real, it is the ecosystem convention
+(shadcn/ui ships `border-border`, `bg-background`), and the same token reads correctly as
+`outline-border-subtle` / `ring-border-subtle`.
+
+## Nothing should look different
+
+Every token's default is the **exact** palette value the components used before — verified
+by asserting each one byte-for-byte against `tailwindcss/theme.css`. Adopting tokens is not
+a restyle; if anything changes visually, that is a bug, so report it rather than working
+around it.
+
+## Two gotchas if you define your own tokens
+
+Both cost real debugging time on this change:
+
+1. **Plain `@theme` prunes tokens no utility references.** A token you define but never use
+   in a class simply will not exist at runtime, so hand-written CSS doing
+   `color: var(--color-brand)` gets nothing. Use `@theme static` for a token set others
+   consume. (`@clicktap/ui/theme.css` already does.)
+2. **Do not define an alias by reference.** `--color-fill-subtle: var(--color-border-subtle)`
+   resolves at `:root`, so a later `.dark { --color-border-subtle: … }` override does **not**
+   propagate to the alias — dark mode silently half-applies. Either give the alias its own
+   literal value or do not create it.
+
+## Known gaps
+
+About 81 palette literals remain in lower-traffic components (`text-slate-600`,
+`bg-slate-200`, `outline-slate-500` and similar). They are **not** a theming dead-end —
+Tailwind compiles them to `var(--color-slate-600)` and emits the whole ramp at `:root`, so
+you can still override them. They just widen your override surface beyond the token list
+above. They were left literal deliberately: the values are a drifted ramp (eight distinct
+shades for text alone), and consolidating them is a visual change that needs its own review
+rather than being smuggled into a no-op refactor.
+
+## Related
+
+- **CTAP-1157** — the Tailwind v4 upgrade this depends on.
+- **CTAP-1122** — the epic making `@clicktap/ui` adoptable outside clicktap.

package/docs/migrations/README.md

@@ -29,5 +29,6 @@ For migrations affecting the frontend app, see [frontend migrations](../../../..
 | 2026-06-18 | [Select (searchable): fix "setValue is not a function" crash on browser autofill](./2026/06/2026-06-18-select-hiddenselect-setvalue-crash.md) | No | Select standardization |
 | 2026-08-04 | [`ResendCode` control + `useCooldown` hook](./2026/08/2026-08-04-resend-code-control.md) ↔ | No | OTP resend timer (CTAP-1114) |
 | 2026-08-04 | [Password reveal is press-and-hold, not a toggle](./2026/08/2026-08-04-password-reveal-press-and-hold.md) | Behavioural | *None* (CTAP-1128) |
+| 2026-08-06 | [`Image` is framework-free; Next's optimizer moves to `@clicktap/ui/next`](./2026/08/2026-08-06-clicktap-ui-image-next-subpath.md) ↔ | Yes (Next consumers) | *None* |
 
 ↔ = cross-app migration (has counterpart in frontend app)

package/hooks/useCollectionState.d.ts

@@ -0,0 +1 @@
+export * from './useCollectionState/index';

package/hooks/useCollectionState.js

@@ -0,0 +1 @@
+export * from './useCollectionState/index.js';

package/hooks/useRoute/RouteContext.d.ts

@@ -2,6 +2,14 @@ import { ReactNode } from 'react';
 export type RouteProviderConfig = {
     /** Whether the user is currently logged in */
     isLoggedIn: boolean;
+    /**
+     * Current pathname, supplied reactively by the consumer's router (e.g. Next's
+     * `usePathname()`). Used only by `useRoute(..., { returnHere: true })`. Keeping
+     * it in config — rather than importing `next/navigation` inside the hook — is
+     * what lets `@clicktap/ui` stay framework-agnostic (CTAP-1125). Omitted → the
+     * `returnHere` redirect falls back to `/`.
+     */
+    pathname?: string;
 };
 type RouteProviderProps = {
     children: ReactNode;

package/hooks/useRoute/index.js

@@ -1 +1 @@
-import{buildPath as m,resolveParams as u,useRoute as p}from"./useRoute.js";import{RouteProvider as a,useRouteConfig as f}from"./RouteContext.js";import"react";import"next/navigation";import"react/jsx-runtime";export{a as RouteProvider,m as buildPath,u as resolveParams,p as useRoute,f as useRouteConfig};
+import{buildPath as u,resolveParams as i,useRoute as m}from"./useRoute.js";import{RouteProvider as s,useRouteConfig as a}from"./RouteContext.js";import"react";import"react/jsx-runtime";export{s as RouteProvider,u as buildPath,i as resolveParams,m as useRoute,a as useRouteConfig};

package/hooks/useRoute/useRoute.js

@@ -1 +1 @@
-"use client";import{useMemo as f}from"react";import{usePathname as m}from"next/navigation";import{useRouteConfig as d}from"./RouteContext.js";import"react/jsx-runtime";const h="/account/authenticate";function c(e,r){return r?e.replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g,(o,t)=>{const n=r[t];if(n===void 0)throw new Error(`useRoute: missing required param "${t}" for path "${e}"`);return encodeURIComponent(n)}):e}function p(e){return/:([a-zA-Z_][a-zA-Z0-9_]*)/.test(e)}function _(e,r){return c(e.path,r)}function l(e,r,o){const t=m(),{isLoggedIn:n}=d();return f(()=>{const{path:u,isProtected:s,name:a="unknown"}=e;if(p(u)&&!r)throw new Error(`useRoute: params required for route "${a}" with path "${u}"`);const i=c(u,r);return o?.returnHere?`${i}?redirect=${encodeURIComponent(t??"/")}`:s&&!n?`${h}?redirect=${encodeURIComponent(i)}`:i},[e,r,o?.returnHere,t,n])}export{_ as buildPath,c as resolveParams,l as useRoute};
+"use client";import{useMemo as f}from"react";import{useRouteConfig as d}from"./RouteContext.js";import"react/jsx-runtime";const m="/account/authenticate";function c(e,r){return r?e.replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g,(o,t)=>{const n=r[t];if(n===void 0)throw new Error(`useRoute: missing required param "${t}" for path "${e}"`);return encodeURIComponent(n)}):e}function h(e){return/:([a-zA-Z_][a-zA-Z0-9_]*)/.test(e)}function R(e,r){return c(e.path,r)}function _(e,r,o){const{isLoggedIn:t,pathname:n}=d();return f(()=>{const{path:u,isProtected:s,name:a="unknown"}=e;if(h(u)&&!r)throw new Error(`useRoute: params required for route "${a}" with path "${u}"`);const i=c(u,r);return o?.returnHere?`${i}?redirect=${encodeURIComponent(n??"/")}`:s&&!t?`${m}?redirect=${encodeURIComponent(i)}`:i},[e,r,o?.returnHere,n,t])}export{R as buildPath,c as resolveParams,_ as useRoute};

package/hooks/useRoute.d.ts

@@ -0,0 +1 @@
+export * from './useRoute/index';

package/hooks/useRoute.js

@@ -0,0 +1 @@
+export * from './useRoute/index.js';

package/next/Image.d.ts

@@ -0,0 +1,11 @@
+import { ImageProps as NextImageProps } from 'next/image';
+export type ExtendedImageProps = NextImageProps & {
+    /** Reduce opacity to 50% (e.g., while waiting for data) */
+    dimmed?: boolean;
+    /** Hide image completely — opacity 0 (e.g., before grid rearrange) */
+    hidden?: boolean;
+    /** Fires when a new image has loaded after a src change */
+    onReady?: () => void;
+};
+export declare function Image({ src, className, style, dimmed, hidden, onReady, onLoad: externalOnLoad, ...rest }: ExtendedImageProps): import("react/jsx-runtime").JSX.Element;
+export default Image;

package/next/Image.js

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import R from"next/image";import{useState as x,useRef as z,Component as T}from"react";import{cn as K}from"../utils/cn.js";import{useManagedOpacity as L,useImageStyle as j,getSrcKey as c,resolveSrc as u}from"../components/Image/imageShared.js";const m=new Set;class B extends T{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}render(){if(this.state.hasError){m.add(c(this.props.src));const{src:i,alt:n,className:a,style:s,width:h,height:r}=this.props;return o("img",{src:u(i),alt:n??"",className:a,style:s,width:h,height:r,loading:"lazy"})}return this.props.children}}function P({src:e,className:i,style:n,dimmed:a,hidden:s,onReady:h,onLoad:r,...t}){const[g,p]=x(null),l=z(),{managed:f,setLoadingImg:y,onReadyRef:S,opacityStyle:w}=L({src:e,dimmed:a,hidden:s,onReady:h}),E="width"in t&&"height"in t&&!("fill"in t),d=j(n,E),v=c(e);return g===e||m.has(v)?o("img",{src:u(e),alt:t.alt??"",className:i,style:d,width:"width"in t?t.width:void 0,height:"height"in t?t.height:void 0,loading:"lazy"}):o(B,{src:e,alt:t.alt,className:i,style:d,width:"width"in t?t.width:void 0,height:"height"in t?t.height:void 0,children:o(R,{src:e,className:K(f&&"transition-opacity duration-200 ease-in-out",i),style:{...d,...w},onError:()=>{l.current=setTimeout(()=>p(e),2e3)},onLoad:I=>{clearTimeout(l.current),y(!1),S.current?.(),typeof r=="function"&&r(I)},...t})})}export{P as Image,P as default};

package/next/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Next-specific entry point (CTAP-1125).
+ *
+ * Everything in here imports from `next/*`. It is the ONLY part of the package
+ * that does, which is what lets `next` be an optional peer: a consumer that
+ * never imports `@clicktap/ui/next` gets zero `next` in its dependency tree.
+ */
+export { Image, type ExtendedImageProps } from './Image';

package/next/index.js

@@ -0,0 +1 @@
+import{Image as a}from"./Image.js";import"react/jsx-runtime";import"next/image";import"react";import"../utils/cn.js";import"../components/Image/imageShared.js";export{a as Image};