@clicktap/ui 0.40.8 → 0.40.10

package/components/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps } from '@nextui-org/accordion';
+import { AccordionProps } from '@heroui/accordion';
 export declare function Accordion({ children, variant, isCompact, className, itemClasses, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 export default Accordion;
 export declare function AccordionItemArrow(): import("react/jsx-runtime").JSX.Element;

package/components/Accordion/Accordion.js

@@ -1 +1 @@
-"use client";import{jsx as d}from"react/jsx-runtime";import{Accordion as a}from"@nextui-org/accordion";import{cn as r}from"../../utils/cn.js";import{DownArrow as u}from"../Icon/DownArrow.js";function x({children:n,variant:t,isCompact:o,className:l,itemClasses:e,...i}){return d(a,{variant:t,isCompact:o,dividerProps:{className:r("my-2 border-solid border-slate-200",t==="shadow"&&"border-slate-300")},className:r("px-0",t==="bordered"&&["px-4 py-4 rounded-xl border-2 border-slate-200"],t==="shadow"&&["px-4 py-4 rounded-xl bg-slate-100 shadow-slate-200 border border-slate-200"],l),itemClasses:{base:r("w-full py-2",'data-[disabled="true"]:pointer-events-none data-[disabled="true"]:opacity-50',t==="bordered"&&["rounded-xl py-0"],t==="splitted"&&["flex flex-col bg-slate-100 rounded-xl border border-slate-200"],o&&"py-0",e?.base),trigger:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none",'data-[focus-visible="true"]:outline-2 data-[focus-visible="true"]:outline data-[focus-visible="true"]:outline-slate-100',"bg-transparent text-inherit",o&&["py-2"],e?.trigger),title:r("text-xl font-semibold",o&&"text-base",e?.title),subtitle:r("text-base",o&&"text-sm",e?.subtitle),titleWrapper:r("text-left",e?.titleWrapper),startContent:r("shrink-0",e?.startContent),content:r([o?"py-1":"py-2"],e?.content),indicator:e?.indicator,heading:e?.heading},...i,children:n})}function f(){return d(u,{className:"w-4 h-4"})}export{x as Accordion,f as AccordionItemArrow,x as default};
+"use client";import{jsx as d}from"react/jsx-runtime";import{Accordion as a}from"@heroui/accordion";import{cn as r}from"../../utils/cn.js";import{DownArrow as u}from"../Icon/DownArrow.js";function x({children:n,variant:t,isCompact:o,className:l,itemClasses:e,...i}){return d(a,{variant:t,isCompact:o,dividerProps:{className:r("my-2 border-solid border-slate-200",t==="shadow"&&"border-slate-300")},className:r("px-0",t==="bordered"&&["px-4 py-4 rounded-xl border-2 border-slate-200"],t==="shadow"&&["px-4 py-4 rounded-xl bg-slate-100 shadow-slate-200 border border-slate-200"],l),itemClasses:{base:r("w-full py-2",'data-[disabled="true"]:pointer-events-none data-[disabled="true"]:opacity-50',t==="bordered"&&["rounded-xl py-0"],t==="splitted"&&["flex flex-col bg-slate-100 rounded-xl border border-slate-200"],o&&"py-0",e?.base),trigger:r("w-full h-full flex items-center gap-3 py-0 appearance-none cursor-pointer select-none",'data-[focus-visible="true"]:outline-2 data-[focus-visible="true"]:outline data-[focus-visible="true"]:outline-slate-100',"bg-transparent text-inherit",o&&["py-2"],e?.trigger),title:r("text-xl font-semibold",o&&"text-base",e?.title),subtitle:r("text-base",o&&"text-sm",e?.subtitle),titleWrapper:r("text-left",e?.titleWrapper),startContent:r("shrink-0",e?.startContent),content:r([o?"py-1":"py-2"],e?.content),indicator:e?.indicator,heading:e?.heading},...i,children:n})}function f(){return d(u,{className:"w-4 h-4"})}export{x as Accordion,f as AccordionItemArrow,x as default};

package/components/Accordion/index.d.ts

@@ -1,3 +1,3 @@
 export { Accordion, AccordionItemArrow } from './Accordion';
-export { AccordionItem } from '@nextui-org/accordion';
-export type { AccordionProps } from '@nextui-org/accordion';
+export { AccordionItem } from '@heroui/accordion';
+export type { AccordionProps } from '@heroui/accordion';

package/components/Accordion/index.js

@@ -1 +1 @@
-import{Accordion as i,AccordionItemArrow as p}from"./Accordion.js";import{AccordionItem as A}from"@nextui-org/accordion";import"react/jsx-runtime";import"../../utils/cn.js";import"../Icon/DownArrow.js";export{i as Accordion,A as AccordionItem,p as AccordionItemArrow};
+import{Accordion as i,AccordionItemArrow as p}from"./Accordion.js";import{AccordionItem as A}from"@heroui/accordion";import"react/jsx-runtime";import"../../utils/cn.js";import"../Icon/DownArrow.js";export{i as Accordion,A as AccordionItem,p as AccordionItemArrow};

package/components/Badge/Badge.js

@@ -1 +1 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import{useId as y}from"react";import{AnimatePresence as V,motion as z}from"framer-motion";import{Badge as C}from"@nextui-org/badge";import{cn as l}from"../../utils/cn.js";const B={hidden:{opacity:0,scale:0},show:{opacity:1,scale:1}};function q({children:b,isInvisible:n,disableAnimation:d,placement:t="top-right",shape:o="rectangle",className:h,classNames:g,showOutline:x=!1,content:r,isDot:s,isOneChar:f,size:a="md",variant:e="solid",...m}){const c=y(),p=d?{duration:0}:{type:"spring",bounce:.3},_=String(r)?.length===1||f,w={sm:"text-xs",md:"text-sm",lg:"text-sm"},u=_?{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[a]:{sm:"min-w-4 h-4",md:"min-w-5 h-5",lg:"min-w-6 h-6"}[a];return i(C,{...m,size:a,variant:e,isInvisible:n,isDot:s,classNames:{base:l("relative","inline-flex shrink-0",g?.base),badge:l("p-0","border-0","absolute z-10",[t==="top-right"&&o==="rectangle"&&"top-0.5 right-px",t==="top-right"&&o==="circle"&&"top-1 right-1",t==="bottom-right"&&o==="rectangle"&&"bottom-0.5 right-px",t==="bottom-right"&&o==="circle"&&"bottom-1 right-1",t==="top-left"&&o==="rectangle"&&"top-0.5 left-px",t==="top-left"&&o==="circle"&&"top-1 left-1",t==="bottom-left"&&o==="rectangle"&&"bottom-0.5 left-px",t==="bottom-left"&&o==="circle"&&"bottom-1 left-1"],[t==="top-right"&&"translate-x-1/2 -translate-y-1/2",t==="bottom-right"&&"translate-x-1/2 translate-y-1/2",t==="bottom-left"&&"-translate-x-1/2 translate-y-1/2",t==="top-left"&&"-translate-x-1/2 -translate-y-1/2"],g?.badge)},content:i(V,{children:!n&&i(z.span,{layout:!0,variants:B,initial:d?"show":"hidden",transition:p,animate:"show",exit:"hidden",className:l("flex flex-wrap","place-content-center","z-10","box-border","rounded-full","py-0 px-1","font-normal text-slate-900","select-none","whitespace-normal",e==="faded"?"text-slate-800":"text-white",!r||s?"w-3.5 h-3.5":u,typeof r=="string"&&r.length>1||s?"text-xs":w[a],[e==="solid"&&"bg-slate-800",e==="shadow"&&"bg-slate-800",e==="flat"&&"bg-slate-800/55",e==="faded"&&"bg-white"],[e==="faded"&&"border-2 border-solid border-slate-800",x&&e!=="faded"&&"border-2 border-solid border-white"],e==="shadow"&&"shadow-[0_0_0_0_rgba(0,0,0,0),_0_0_0_0_rgba(0,0,0,0),_0_10px_15px_-3px_rgba(30,41,59,0.3),_0_4px_6px_-4px_rgba(30,41,59,0.3)]",h),children:r},`badge-${c}`)}),children:b})}export{q as Badge,q as default};
+"use client";import{jsx as i}from"react/jsx-runtime";import{useId as y}from"react";import{AnimatePresence as V,motion as z}from"framer-motion";import{Badge as C}from"@heroui/badge";import{cn as l}from"../../utils/cn.js";const B={hidden:{opacity:0,scale:0},show:{opacity:1,scale:1}};function q({children:b,isInvisible:n,disableAnimation:d,placement:t="top-right",shape:o="rectangle",className:h,classNames:g,showOutline:x=!1,content:r,isDot:s,isOneChar:f,size:a="md",variant:e="solid",...m}){const c=y(),p=d?{duration:0}:{type:"spring",bounce:.3},_=String(r)?.length===1||f,w={sm:"text-xs",md:"text-sm",lg:"text-sm"},u=_?{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[a]:{sm:"min-w-4 h-4",md:"min-w-5 h-5",lg:"min-w-6 h-6"}[a];return i(C,{...m,size:a,variant:e,isInvisible:n,isDot:s,classNames:{base:l("relative","inline-flex shrink-0",g?.base),badge:l("p-0","border-0","absolute z-10",[t==="top-right"&&o==="rectangle"&&"top-0.5 right-px",t==="top-right"&&o==="circle"&&"top-1 right-1",t==="bottom-right"&&o==="rectangle"&&"bottom-0.5 right-px",t==="bottom-right"&&o==="circle"&&"bottom-1 right-1",t==="top-left"&&o==="rectangle"&&"top-0.5 left-px",t==="top-left"&&o==="circle"&&"top-1 left-1",t==="bottom-left"&&o==="rectangle"&&"bottom-0.5 left-px",t==="bottom-left"&&o==="circle"&&"bottom-1 left-1"],[t==="top-right"&&"translate-x-1/2 -translate-y-1/2",t==="bottom-right"&&"translate-x-1/2 translate-y-1/2",t==="bottom-left"&&"-translate-x-1/2 translate-y-1/2",t==="top-left"&&"-translate-x-1/2 -translate-y-1/2"],g?.badge)},content:i(V,{children:!n&&i(z.span,{layout:!0,variants:B,initial:d?"show":"hidden",transition:p,animate:"show",exit:"hidden",className:l("flex flex-wrap","place-content-center","z-10","box-border","rounded-full","py-0 px-1","font-normal text-slate-900","select-none","whitespace-normal",e==="faded"?"text-slate-800":"text-white",!r||s?"w-3.5 h-3.5":u,typeof r=="string"&&r.length>1||s?"text-xs":w[a],[e==="solid"&&"bg-slate-800",e==="shadow"&&"bg-slate-800",e==="flat"&&"bg-slate-800/55",e==="faded"&&"bg-white"],[e==="faded"&&"border-2 border-solid border-slate-800",x&&e!=="faded"&&"border-2 border-solid border-white"],e==="shadow"&&"shadow-[0_0_0_0_rgba(0,0,0,0),_0_0_0_0_rgba(0,0,0,0),_0_10px_15px_-3px_rgba(30,41,59,0.3),_0_4px_6px_-4px_rgba(30,41,59,0.3)]",h),children:r},`badge-${c}`)}),children:b})}export{q as Badge,q as default};

package/components/Badge/Badge.types.d.ts

@@ -1,2 +1,2 @@
-import { BadgeProps as NextBadgeProps } from '@nextui-org/badge';
+import { BadgeProps as NextBadgeProps } from '@heroui/badge';
 export type BadgeProps = Omit<NextBadgeProps, 'color | disableOutline'>;

package/components/Badge/index.js

@@ -1 +1 @@
-import{Badge as a}from"./Badge.js";import"react/jsx-runtime";import"react";import"framer-motion";import"@nextui-org/badge";import"../../utils/cn.js";export{a as Badge};
+import{Badge as a}from"./Badge.js";import"react/jsx-runtime";import"react";import"framer-motion";import"@heroui/badge";import"../../utils/cn.js";export{a as Badge};

package/components/Collection/CollectionFilters/CollectionFilters.js

@@ -1 +1 @@
-"use client";import{jsxs as o,Fragment as f,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as w}from"../../Accordion/Accordion.js";import{AccordionItem as g}from"@nextui-org/accordion";import{Button as h}from"../../Button/Button.js";import"framer-motion";import{ModalOverlay as y}from"../../ModalOverlay/ModalOverlay.js";import{Modal as N}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"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"react-aria-components";import"../../DialogTrigger/DialogTrigger.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:n,onChange:r}){const[l,c]=v(n),m=()=>{r(l.trim())};return o("div",{className:"relative",children:[e("input",{type:"search",value:l,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-slate-300 bg-white text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:border-slate-400 [&::-webkit-search-cancel-button]:hidden"}),l&&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-slate-100 transition-colors",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-slate-400",children:e(D,{})})]})}function he({availableFilters:n,appliedFilters:r,onFilterChange:l,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:a,totalItems:i}){const p=b(()=>S(r,n).filter(t=>t.includeInFilters!==!1),[r,n]),d=a&&e(V,{value:s??"",onChange:a},s),u=()=>p.length>0&&e(w,{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-gray-200",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:p.map(t=>e(g,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:l}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:l,appliedFilters:r,variant:"sidebar"})})},t.code))});return o(f,{children:[o("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,u(),r.length>0&&e("button",{type:"button",className:"text-sm text-slate-500 hover:text-slate-700 transition-colors mt-4 mb-8",onClick:()=>l([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(y,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(N,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>o("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[o("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-slate-800",children:"Filters"}),e(h,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),o("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}),u(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>l([]),onClearSearch:s&&a?()=>a(""):void 0})]}),o("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-gray-200",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-slate-500 hover:text-slate-700 transition-colors",onClick:()=>l([]),children:"Clear all"}),e(h,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{he as CollectionFilters};
+"use client";import{jsxs as o,Fragment as f,jsx as e}from"react/jsx-runtime";import{useMemo as b,Suspense as x,useState as v}from"react";import{Accordion as w}from"../../Accordion/Accordion.js";import{AccordionItem as g}from"@heroui/accordion";import{Button as h}from"../../Button/Button.js";import"framer-motion";import{ModalOverlay as y}from"../../ModalOverlay/ModalOverlay.js";import{Modal as N}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"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"react-aria-components";import"../../DialogTrigger/DialogTrigger.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:n,onChange:r}){const[l,c]=v(n),m=()=>{r(l.trim())};return o("div",{className:"relative",children:[e("input",{type:"search",value:l,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-slate-300 bg-white text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:border-slate-400 [&::-webkit-search-cancel-button]:hidden"}),l&&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-slate-100 transition-colors",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-slate-400",children:e(D,{})})]})}function he({availableFilters:n,appliedFilters:r,onFilterChange:l,showMobileFilters:c,setShowMobileFilters:m,searchQuery:s,onSearchChange:a,totalItems:i}){const p=b(()=>S(r,n).filter(t=>t.includeInFilters!==!1),[r,n]),d=a&&e(V,{value:s??"",onChange:a},s),u=()=>p.length>0&&e(w,{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-gray-200",indicator:'data-[open="true"]:rotate-180',content:"pt-2 pb-3"},children:p.map(t=>e(g,{textValue:t.label,title:e(j,{filter:t,appliedFilters:r,onFilterChange:l}),disableIndicatorAnimation:!0,indicator:M,children:e("div",{className:"pt-2",children:e(I,{filter:t,onFilterChange:l,appliedFilters:r,variant:"sidebar"})})},t.code))});return o(f,{children:[o("div",{className:"hidden lg:flex lg:flex-col lg:basis-[16.5rem] lg:shrink-0",children:[d,u(),r.length>0&&e("button",{type:"button",className:"text-sm text-slate-500 hover:text-slate-700 transition-colors mt-4 mb-8",onClick:()=>l([]),children:"Clear all filters"})]}),e("div",{className:"lg:hidden",children:e(x,{children:e(y,{isOpen:c,onOpenChange:t=>m(t),isDismissable:!0,children:e(N,{children:e(k,{size:"30rem",direction:"left","aria-label":"Filters",className:"p-5",children:({close:t})=>o("div",{className:"flex flex-col w-full h-full overflow-hidden",children:[o("div",{className:"flex items-center w-full justify-between",children:[e("span",{className:"text-xl font-bold text-slate-800",children:"Filters"}),e(h,{variant:"ghost","aria-label":"Close",onPress:()=>t(),className:"justify-start size-auto p-0",children:e(C,{})})]}),o("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}),u(),i===0&&e(L,{searchQuery:s,hasFilters:r.length>0,onClearFilters:()=>l([]),onClearSearch:s&&a?()=>a(""):void 0})]}),o("div",{className:"shrink-0 pt-3 flex flex-col gap-3 border-t border-gray-200",children:[r.length>0&&e("button",{type:"button",className:"text-sm py-2 text-slate-500 hover:text-slate-700 transition-colors",onClick:()=>l([]),children:"Clear all"}),e(h,{className:"w-full py-6 text-base rounded-xl",variant:"primary",onPress:()=>t(),children:"View Results"})]})]})})})})})})]})}export{he as CollectionFilters};

package/components/Collection/CollectionFilters/index.js

@@ -1 +1 @@
-import{CollectionFilters as L}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"@nextui-org/accordion";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"react-aria-components";import"framer-motion";import"../../ModalOverlay/ModalOverlay.js";import"../../DialogTrigger/DialogTrigger.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{L as CollectionFilters};
+import{CollectionFilters as L}from"./CollectionFilters.js";import"react/jsx-runtime";import"react";import"../../Accordion/Accordion.js";import"@heroui/accordion";import"../../../utils/cn.js";import"../../Icon/DownArrow.js";import"../../Button/Button.js";import"react-aria-components";import"framer-motion";import"../../ModalOverlay/ModalOverlay.js";import"../../DialogTrigger/DialogTrigger.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{L as CollectionFilters};

package/components/Collection/index.js

@@ -1 +1 @@
-import{AttributeDataProvider as V,useAttributeData as W}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as Y}from"./EmptyResults/EmptyResults.js";import{ProductPrice as _}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as rr}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as tr}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as pr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as er}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as cr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as xr}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"framer-motion";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@nextui-org/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"../DialogTrigger/DialogTrigger.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{V as AttributeDataProvider,tr as CollectionFilterChips,cr as CollectionFilters,xr as CollectionToolbar,Y as EmptyResults,pr as FilterAccordionTitle,rr as FilterRenderer,er as ProductCardSwatches,_ as ProductPrice,W as useAttributeData};
+import{AttributeDataProvider as V,useAttributeData as W}from"./AttributeDataProvider/AttributeDataProvider.js";import{EmptyResults as Y}from"./EmptyResults/EmptyResults.js";import{ProductPrice as _}from"./ProductPrice/ProductPrice.js";import{FilterRenderer as rr}from"./FilterRenderer/FilterRenderer.js";import{CollectionFilterChips as tr}from"./CollectionFilterChips/CollectionFilterChips.js";import{FilterAccordionTitle as pr}from"./FilterAccordionTitle/FilterAccordionTitle.js";import{ProductCardSwatches as er}from"./ProductCardSwatches/ProductCardSwatches.js";import{CollectionFilters as cr}from"./CollectionFilters/CollectionFilters.js";import{CollectionToolbar as xr}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"framer-motion";import"../Icon/CrossSmall.js";import"../../utils/collection/getAppliedFilterChips.js";import"../../utils/collection/removeFilterChip.js";import"../Accordion/Accordion.js";import"@heroui/accordion";import"../Icon/DownArrow.js";import"../ModalOverlay/ModalOverlay.js";import"../DialogTrigger/DialogTrigger.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{V as AttributeDataProvider,tr as CollectionFilterChips,cr as CollectionFilters,xr as CollectionToolbar,Y as EmptyResults,pr as FilterAccordionTitle,rr as FilterRenderer,er as ProductCardSwatches,_ as ProductPrice,W as useAttributeData};

package/components/Pagination/Pagination.d.ts

@@ -1,3 +1,3 @@
-import { PaginationProps } from '@nextui-org/pagination';
+import { PaginationProps } from '@heroui/pagination';
 export declare function Pagination({ showControls, className, classNames, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export default Pagination;

package/components/Pagination/Pagination.js

@@ -1 +1 @@
-"use client";import{jsx as s}from"react/jsx-runtime";import{Pagination as n}from"@nextui-org/pagination";import{cn as t}from"../../utils/cn.js";const r=t("w-8 h-8 flex justify-center items-center cursor-pointer shadow-none","border border-slate-200 data-[disabled=true]:border-0",'rounded transition-colors duration-300 data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',"hover:bg-slate-50 data-[disabled=true]:bg-slate-100 data-[disabled=true]:text-slate-400","[&>svg]:w-4.5 [&>svg]:h-auto");function c({showControls:a=!0,className:o,classNames:e,...i}){return s(n,{showControls:a,className:t("text-slate-600",o),classNames:{wrapper:t("flex flex-nowrap gap-2 lg:gap-3",e?.wrapper),item:t("w-8 h-8 flex text-sm justify-center items-center cursor-pointer rounded shadow-none","border-solid border border-slate-100 bg-transparent transition-colors duration-300",'data-[active=true]:bg-slate-500 data-[active=true]:text-white data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',"[&[data-hover=true]:not([data-active=true])]:border-slate-200",e?.item),prev:t(r,e?.prev),next:t(r,e?.next),ellipsis:t("w-4 h-4.5 scale-110 translate-y-1",e?.ellipsis)},...i})}export{c as Pagination,c as default};
+"use client";import{jsx as s}from"react/jsx-runtime";import{Pagination as n}from"@heroui/pagination";import{cn as t}from"../../utils/cn.js";const r=t("w-8 h-8 flex justify-center items-center cursor-pointer shadow-none","border border-slate-200 data-[disabled=true]:border-0",'rounded transition-colors duration-300 data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',"hover:bg-slate-50 data-[disabled=true]:bg-slate-100 data-[disabled=true]:text-slate-400","[&>svg]:w-4.5 [&>svg]:h-auto");function c({showControls:a=!0,className:o,classNames:e,...i}){return s(n,{showControls:a,className:t("text-slate-600",o),classNames:{wrapper:t("flex flex-nowrap gap-2 lg:gap-3",e?.wrapper),item:t("w-8 h-8 flex text-sm justify-center items-center cursor-pointer rounded shadow-none","border-solid border border-slate-100 bg-transparent transition-colors duration-300",'data-[active=true]:bg-slate-500 data-[active=true]:text-white data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',"[&[data-hover=true]:not([data-active=true])]:border-slate-200",e?.item),prev:t(r,e?.prev),next:t(r,e?.next),ellipsis:t("w-4 h-4.5 scale-110 translate-y-1",e?.ellipsis)},...i})}export{c as Pagination,c as default};

package/components/Pagination/index.js

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

package/components/Tooltip/Tooltip.d.ts

@@ -1,2 +1,2 @@
-export declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<import('@nextui-org/tooltip').TooltipProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: import('react').ForwardRefExoticComponent<Omit<import('@heroui/tooltip').TooltipProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/components/Tooltip/Tooltip.js

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

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

@@ -1,2 +1,2 @@
-import { TooltipProps as UITooltipProps } from '@nextui-org/tooltip';
+import { TooltipProps as UITooltipProps } from '@heroui/tooltip';
 export type TooltipProps = UITooltipProps;

package/components/Tooltip/index.js

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

package/docs/migrations/2026/01/2026-01-14-external-link-detection.md

@@ -0,0 +1,290 @@
+# External Link Detection Migration
+
+**Date:** 2026-01-14
+**Affects:** `@clicktap/ui`, `apps/frontend`
+**Breaking:** No (additive, but requires provider setup for SSR)
+**Classification:** IMPROVEMENT
+
+
+## Dependencies
+
+*None*
+
+## Summary
+
+The `Link` component from `@clicktap/ui` now automatically detects external URLs and applies `target="_blank"` and `rel="noopener noreferrer"` attributes. This requires setting up `LinkProvider` for proper SSR support.
+
+## Changes
+
+1. `Link` component auto-detects external URLs
+2. New `LinkProvider` for SSR base URL configuration
+3. New `isExternalUrl` utility function
+4. Layout files must pass `baseUrl` from host header
+
+## Setup
+
+### 1. Update Layouts to Pass baseUrl
+
+In your Next.js layout files (Server Components), extract the host header and pass it to Providers:
+
+```tsx
+// app/(base)/layout.tsx
+import { headers } from 'next/headers';
+
+export default function Layout({ children }) {
+  const h = headers();
+  const baseUrl = `https://${h.get('host')}`;
+
+  return (
+    <Providers baseUrl={baseUrl}>
+      {children}
+    </Providers>
+  );
+}
+```
+
+```tsx
+// app/(checkout)/layout.tsx
+import { headers } from 'next/headers';
+
+export default function CheckoutLayout({ children }) {
+  const h = headers();
+  const baseUrl = `https://${h.get('host')}`;
+
+  return (
+    <Providers baseUrl={baseUrl}>
+      {children}
+    </Providers>
+  );
+}
+```
+
+### 2. Update Providers Component
+
+Add the `baseUrl` prop and wrap with `LinkProvider`:
+
+```tsx
+// providers/Providers.tsx
+import { LinkProvider } from '@clicktap/ui/components/Link';
+
+type Props = {
+  baseUrl?: string;
+  children: ReactNode;
+  // ... other props
+};
+
+export function Providers({ baseUrl, children, ...props }: Props) {
+  return (
+    <LinkProvider config={{ baseUrl }}>
+      {/* other providers */}
+      {children}
+    </LinkProvider>
+  );
+}
+```
+
+## How It Works
+
+### Detection Logic
+
+- **Relative URLs** (`/path`, `#anchor`) → Internal (no attributes added)
+- **Absolute URLs** → Compared against current host
+  - Same host → Internal
+  - Different host → External (adds `target="_blank"` and `rel="noopener noreferrer"`)
+
+### Host Detection
+
+- **Client-side:** Uses `window.location.host` automatically
+- **Server-side (SSR):** Uses `baseUrl` from `LinkProvider`
+
+This ensures external links are correctly identified during both SSR and client-side rendering.
+
+## Usage
+
+No changes needed in component code. The `Link` component handles detection automatically:
+
+```tsx
+import { Link } from '@clicktap/ui/components/Link';
+
+// Internal - renders normally
+<Link href="/products">Products</Link>
+
+// External - automatically gets target="_blank" rel="noopener noreferrer"
+<Link href="https://google.com">Google</Link>
+
+// Anchor - renders normally
+<Link href="#section">Jump to section</Link>
+```
+
+### Override Behavior
+
+You can override the automatic behavior if needed:
+
+```tsx
+// Force internal link behavior on external URL
+<Link href="https://subdomain.mysite.com" target="_self">
+  Subdomain
+</Link>
+
+// Force external link behavior on internal URL
+<Link href="/download" target="_blank" rel="noopener noreferrer">
+  Download
+</Link>
+```
+
+## Utility Function
+
+The `isExternalUrl` utility is exported for use outside the Link component:
+
+```tsx
+import { isExternalUrl } from '@clicktap/ui/components/Link';
+
+const external = isExternalUrl('https://google.com', 'mysite.com');
+// true
+
+const internal = isExternalUrl('/products', 'mysite.com');
+// false
+```
+
+## Files Changed
+
+- `libs/ui/src/components/Link/Link.tsx` - Auto-detection logic
+- `libs/ui/src/components/Link/LinkContext.tsx` - New provider
+- `libs/ui/src/components/Link/utils.ts` - `isExternalUrl` utility
+- `libs/ui/src/components/Link/index.ts` - Updated exports
+- `apps/frontend/app/(base)/layout.tsx` - Pass baseUrl
+- `apps/frontend/app/(checkout)/layout.tsx` - Pass baseUrl
+- `apps/frontend/providers/Providers.tsx` - Add LinkProvider
+
+## Migration Checklist
+
+1. [ ] Update `libs/ui` to latest version
+2. [ ] Add `baseUrl` prop to Providers component
+3. [ ] Wrap app with `LinkProvider`
+4. [ ] Update all layout files to pass `baseUrl` from host header
+5. [ ] Test external links open in new tab
+6. [ ] Test internal links work normally
+7. [ ] Verify SSR renders correct attributes
+
+---
+
+# LinkAsButton → @clicktap/ui
+
+**Date:** 2026-02-06
+
+## Summary
+
+`LinkAsButton` has been promoted from `apps/frontend/components/LinkAsButton/` into the shared UI library. `Button` also gains `primary`/`secondary`/`tertiary` variant aliases.
+
+## Changes
+
+### `LinkAsButton` promoted to shared UI library
+
+- **Old import:** `import { LinkAsButton } from '../LinkAsButton/LinkAsButton'` (relative, app-level)
+- **New import:** `import { LinkAsButton } from '@clicktap/ui/components/LinkAsButton'`
+- The `[k: string]: any` catch-all type is removed — proper typing via `LinkProps` + `Pick<ButtonProps, 'variant' | 'size'>`
+- Now supports all Button variants (`solid`, `outline`, `ghost`) plus aliases (`primary`, `secondary`, `tertiary`), `size` prop (`sm`, `md`, `lg`), and `isLoading`
+- `apps/frontend/components/LinkAsButton/` has been deleted
+
+### Breaking: `LinkAsButton` default behavior changed
+
+The old local component had no default variant — it rendered as a transparent link with base layout classes. The new shared component defaults to `variant="solid"` and `size="md"`:
+
+| Property | Old (local) | New (`@clicktap/ui`) |
+|----------|-------------|----------------------|
+| `variant` | none (transparent background, transparent border) | `solid` (dark background, white text) |
+| `size` | none (no height constraint) | `md` (`h-10` = 40px height) |
+
+**Impact:** Any `<LinkAsButton>` without an explicit `variant` prop now renders as a dark solid button with a 40px height constraint. This is especially problematic when wrapping images — the image gets constrained inside a styled button container.
+
+**Fix:** Use `variant="ghost"` for transparent links, or use `<Link>` directly when button styling isn't appropriate (e.g., clickable product images):
+
+```tsx
+// Before: image wrapped in default LinkAsButton (was transparent, now solid)
+<LinkAsButton href={url}>
+  <Image ... />
+</LinkAsButton>
+
+// After: use plain Link for image wrappers
+<Link href={url}>
+  <Image ... />
+</Link>
+
+// After: use ghost variant if button semantics are needed
+<LinkAsButton variant="ghost" href={url}>
+  Text link
+</LinkAsButton>
+```
+
+### Button variant aliases
+
+- `Button` now accepts `primary`, `secondary`, and `tertiary` as variant values
+- `primary` → `solid`, `secondary` → `outline`, `tertiary` → `ghost`
+- Existing `solid`, `outline`, `ghost` values continue to work unchanged
+
+---
+
+# Image Component: Remove `width: 'auto'` Auto-Styling
+
+**Date:** 2026-02-08
+**Affects:** `@clicktap/ui` Image component, all consumers
+**Breaking:** Yes - images using `width`/`height` props may render differently
+
+## Summary
+
+The `@clicktap/ui` Image component previously auto-prepended `{ width: 'auto', height: 'auto' }` to the style prop when `width` and `height` props were provided (not `fill`). The `width: 'auto'` has been removed because it overrides the HTML `width` attribute via CSS, causing images to render at their natural intrinsic size instead of the dimensions specified by the props.
+
+## What Changed
+
+```diff
+  const imageStyle = hasSizedProps
+-   ? { width: 'auto' as const, height: 'auto' as const, ...style }
++   ? { height: 'auto' as const, ...style }
+    : style;
+```
+
+**Before:** Images with `width={100} height={100}` and no explicit `style` rendered at their natural resolution (CSS `width: auto` overrode the HTML attribute).
+
+**After:** Images render at the width specified by the `width` prop. `height: 'auto'` preserves the natural aspect ratio.
+
+## Migration
+
+### Review Image usages without explicit `style` prop
+
+Any `<Image>` that passes `width` and `height` props without a `style` override will now render at the `width` prop size instead of the natural image size. In most cases this is the correct behavior.
+
+If the natural-size behavior was intentional, restore it with an explicit style:
+
+```tsx
+<Image width={100} height={100} style={{ width: 'auto', height: 'auto' }} ... />
+```
+
+### Add aspect ratio control where needed
+
+If the displayed image needs a specific aspect ratio that differs from the source image's natural ratio, add CSS classes. Use the actual source image dimensions to determine the ratio (e.g., 960x1200 images → `aspect-[4/5]`):
+
+```tsx
+// Explicit aspect ratio matching source images (e.g., 960x1200 = 4:5)
+<Image
+  width={100} height={125}
+  className="aspect-[4/5] object-cover"
+  style={{ width: '100%', height: 'auto' }}
+/>
+
+// Fill container width, natural aspect ratio (common pattern, no extra classes needed)
+<Image
+  width={400} height={300}
+  style={{ width: '100%', height: 'auto' }}
+/>
+```
+
+### Affected areas to check
+
+Visually inspect any page that displays product images:
+- Cart drawer (mini-cart)
+- Cart page
+- Checkout order summary
+- Checkout success / order confirmation
+- Category listing pages
+- Product collection components
+- Account order history

package/docs/migrations/2026/01/2026-01-14-use-route-hook.md

@@ -0,0 +1,142 @@
+# useRoute Hook Migration
+
+**Date:** 2026-01-14
+**Affects:** `@clicktap/ui`, `apps/frontend`
+**Breaking:** No (additive, but recommended migration)
+**Classification:** IMPROVEMENT
+
+
+## Dependencies
+
+*None*
+
+## Summary
+
+Introduces a centralized route configuration system with the `useRoute` hook for generating URLs. Handles dynamic params, protected route redirects, and login-with-return patterns automatically.
+
+## New Files
+
+- `libs/ui/src/hooks/useRoute/` - Hook and RouteProvider
+- `apps/frontend/config/routes.ts` - Centralized route definitions
+
+## Provider Setup
+
+Add `RouteProviderWithAuth` inside your `AuthProvider`:
+
+```tsx
+import { RouteProvider } from '@clicktap/ui/hooks/useRoute';
+import { useAuth } from '../state/auth/AuthProvider';
+
+function RouteProviderWithAuth({ children }: { children: ReactNode }) {
+  const { isLoggedIn } = useAuth();
+  return <RouteProvider config={{ isLoggedIn }}>{children}</RouteProvider>;
+}
+
+// In provider tree:
+<AuthProvider actor={authActor}>
+  <RouteProviderWithAuth>
+    {children}
+  </RouteProviderWithAuth>
+</AuthProvider>
+```
+
+## Migration Patterns
+
+### Static Routes
+
+```tsx
+// Before
+<Link href="/cart">Cart</Link>
+
+// After
+import { useRoute } from '@clicktap/ui/hooks/useRoute';
+import { Routes } from '../config/routes';
+
+const cartUrl = useRoute(Routes.cart.index);
+<Link href={cartUrl}>Cart</Link>
+```
+
+### Dynamic Routes
+
+```tsx
+// Before
+<Link href={`/account/orders/${orderId}`}>View Order</Link>
+
+// After
+const orderUrl = useRoute(Routes.account.orders.view, { orderId });
+<Link href={orderUrl}>View Order</Link>
+```
+
+### Protected Routes
+
+Protected routes automatically redirect through auth when logged out:
+
+```tsx
+// Before
+const ordersUrl = isLoggedIn
+  ? '/account/orders'
+  : `/account/authenticate?redirect=${encodeURIComponent('/account/orders')}`;
+
+// After
+const ordersUrl = useRoute(Routes.account.orders.index);
+// Logged in:  '/account/orders'
+// Logged out: '/account/authenticate?redirect=%2Faccount%2Forders'
+```
+
+### Login with Return
+
+```tsx
+// Before
+const loginUrl = `/account/authenticate?redirect=${encodeURIComponent(pathname)}`;
+const loginUrl = Routes.account.loginAndReturn(Routes.cart.index);
+
+// After
+const loginUrl = useRoute(Routes.account.authenticate, null, { returnHere: true });
+```
+
+### router.push
+
+```tsx
+// Before
+router.push('/checkout');
+router.push(`/checkout/success/${orderId}`);
+
+// After
+const checkoutUrl = useRoute(Routes.checkout.index);
+router.push(checkoutUrl);
+
+const successUrl = useRoute(Routes.checkout.success, { orderId });
+router.push(successUrl);
+```
+
+## Adding New Routes
+
+Add to `apps/frontend/config/routes.ts`:
+
+```tsx
+const RawRoutes = {
+  // Static route
+  newPage: {
+    path: '/new-page',
+    isProtected: false,
+  },
+
+  // Nested with dynamic param
+  feature: {
+    index: {
+      path: '/feature',
+      isProtected: false,
+    },
+    details: {
+      path: '/feature/:featureId',
+      isProtected: true,
+    },
+  },
+} as const;
+```
+
+## Deprecated
+
+- `Routes.account.loginAndReturn()` - Use `useRoute(route, null, { returnHere: true })`
+- `isProtectedRoute(pathname)` - Use `route.isProtected` directly
+- Direct `.path` access - Use `useRoute()` for all URL generation