admin-ui-starter-kit 0.6.8 → 0.7.0

package/dist/showcase/assets/command-BXhyoNX1.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{l as n,u as r}from"./section-DLqBJGPH.js";import{Or as i}from"./example-DDhaO2UY.js";import{P as a,a as o,d as s,n as c}from"./index-DSBghWdd.js";import{a as l,i as u,l as d,n as f,o as p}from"./dist-DrnHE1zU.js";import{n as m,t as h}from"./input-group-CCaNByLp.js";var g=1,_=.9,v=.8,y=.17,b=.1,x=.999,S=.9999,C=.99,w=/[\\\/_+.#"@\[\(\{&]/,T=/[\\\/_+.#"@\[\(\{&]/g,E=/[\s-]/,D=/[\s-]/g;function O(e,t,n,r,i,a,o){if(a===t.length)return i===e.length?g:C;var s=`${i},${a}`;if(o[s]!==void 0)return o[s];for(var c=r.charAt(a),l=n.indexOf(c,i),u=0,d,f,p,m;l>=0;)d=O(e,t,n,r,l+1,a+1,o),d>u&&(l===i?d*=g:w.test(e.charAt(l-1))?(d*=v,p=e.slice(i,l-1).match(T),p&&i>0&&(d*=x**+p.length)):E.test(e.charAt(l-1))?(d*=_,m=e.slice(i,l-1).match(D),m&&i>0&&(d*=x**+m.length)):(d*=y,i>0&&(d*=x**+(l-i))),e.charAt(l)!==t.charAt(a)&&(d*=S)),(d<b&&n.charAt(l-1)===r.charAt(a+1)||r.charAt(a+1)===r.charAt(a)&&n.charAt(l-1)!==r.charAt(a))&&(f=O(e,t,n,r,l+1,a+2,o),f*b>d&&(d=f*b)),d>u&&(u=d),l=n.indexOf(c,l+1);return o[s]=u,u}function k(e){return e.toLowerCase().replace(D,` `)}function A(e,t,n){return e=n&&n.length>0?`${e+` `+n.join(` `)}`:e,O(e,t,k(e),k(t),0,0,{})}var j=e(t(),1);a();var M=s(),N=[`a`,`button`,`div`,`form`,`h2`,`h3`,`img`,`input`,`label`,`li`,`nav`,`ol`,`p`,`select`,`span`,`svg`,`ul`].reduce((e,t)=>{let r=n(`Primitive.${t}`),i=j.forwardRef((e,n)=>{let{asChild:i,...a}=e,o=i?r:t;return typeof window<`u`&&(window[Symbol.for(`radix-ui`)]=!0),(0,M.jsx)(o,{...a,ref:n})});return i.displayName=`Primitive.${t}`,{...e,[t]:i}},{}),P=`[cmdk-group=""]`,F=`[cmdk-group-items=""]`,ee=`[cmdk-group-heading=""]`,I=`[cmdk-item=""]`,L=`${I}:not([aria-disabled="true"])`,R=`cmdk-item-select`,z=`data-value`,te=(e,t,n)=>A(e,t,n),B=j.createContext(void 0),V=()=>j.useContext(B),H=j.createContext(void 0),U=()=>j.useContext(H),W=j.createContext(void 0),G=j.forwardRef((e,t)=>{let n=Z(()=>({search:``,value:e.value??e.defaultValue??``,selectedItemId:void 0,filtered:{count:0,items:new Map,groups:new Set}})),r=Z(()=>new Set),i=Z(()=>new Map),a=Z(()=>new Map),o=Z(()=>new Set),s=le(e),{label:c,children:l,value:u,onValueChange:f,filter:p,shouldFilter:m,loop:h,disablePointerSelection:g=!1,vimBindings:_=!0,...v}=e,y=d(),b=d(),x=d(),S=j.useRef(null),C=de();X(()=>{if(u!==void 0){let e=u.trim();n.current.value=e,w.emit()}},[u]),X(()=>{C(6,A)},[]);let w=j.useMemo(()=>({subscribe:e=>(o.current.add(e),()=>o.current.delete(e)),snapshot:()=>n.current,setState:(e,t,r)=>{var i,a,o;if(!Object.is(n.current[e],t)){if(n.current[e]=t,e===`search`)k(),D(),C(1,O);else if(e===`value`){if(document.activeElement.hasAttribute(`cmdk-input`)||document.activeElement.hasAttribute(`cmdk-root`)){let e=document.getElementById(x);e?e.focus():(i=document.getElementById(y))==null||i.focus()}if(C(7,()=>{n.current.selectedItemId=M()?.id,w.emit()}),r||C(5,A),s.current?.value!==void 0){let e=t??``;(o=(a=s.current).onValueChange)==null||o.call(a,e);return}}w.emit()}},emit:()=>{o.current.forEach(e=>e())}}),[]),T=j.useMemo(()=>({value:(e,t,r)=>{t!==a.current.get(e)?.value&&(a.current.set(e,{value:t,keywords:r}),n.current.filtered.items.set(e,E(t,r)),C(2,()=>{D(),w.emit()}))},item:(e,t)=>(r.current.add(e),t&&(i.current.has(t)?i.current.get(t).add(e):i.current.set(t,new Set([e]))),C(3,()=>{k(),D(),n.current.value||O(),w.emit()}),()=>{a.current.delete(e),r.current.delete(e),n.current.filtered.items.delete(e);let t=M();C(4,()=>{k(),t?.getAttribute(`id`)===e&&O(),w.emit()})}),group:e=>(i.current.has(e)||i.current.set(e,new Set),()=>{a.current.delete(e),i.current.delete(e)}),filter:()=>s.current.shouldFilter,label:c||e[`aria-label`],getDisablePointerSelection:()=>s.current.disablePointerSelection,listId:y,inputId:x,labelId:b,listInnerRef:S}),[]);function E(e,t){let r=s.current?.filter??te;return e?r(e,n.current.search,t):0}function D(){if(!n.current.search||s.current.shouldFilter===!1)return;let e=n.current.filtered.items,t=[];n.current.filtered.groups.forEach(n=>{let r=i.current.get(n),a=0;r.forEach(t=>{let n=e.get(t);a=Math.max(n,a)}),t.push([n,a])});let r=S.current;V().sort((t,n)=>{let r=t.getAttribute(`id`),i=n.getAttribute(`id`);return(e.get(i)??0)-(e.get(r)??0)}).forEach(e=>{let t=e.closest(F);t?t.appendChild(e.parentElement===t?e:e.closest(`${F} > *`)):r.appendChild(e.parentElement===r?e:e.closest(`${F} > *`))}),t.sort((e,t)=>t[1]-e[1]).forEach(e=>{let t=S.current?.querySelector(`${P}[${z}="${encodeURIComponent(e[0])}"]`);t?.parentElement.appendChild(t)})}function O(){let e=V().find(e=>e.getAttribute(`aria-disabled`)!==`true`)?.getAttribute(z);w.setState(`value`,e||void 0)}function k(){if(!n.current.search||s.current.shouldFilter===!1){n.current.filtered.count=r.current.size;return}n.current.filtered.groups=new Set;let e=0;for(let t of r.current){let r=E(a.current.get(t)?.value??``,a.current.get(t)?.keywords??[]);n.current.filtered.items.set(t,r),r>0&&e++}for(let[e,t]of i.current)for(let r of t)if(n.current.filtered.items.get(r)>0){n.current.filtered.groups.add(e);break}n.current.filtered.count=e}function A(){var e;let t=M();t&&(t.parentElement?.firstChild===t&&((e=t.closest(P)?.querySelector(ee))==null||e.scrollIntoView({block:`nearest`})),t.scrollIntoView({block:`nearest`}))}function M(){return S.current?.querySelector(`${I}[aria-selected="true"]`)}function V(){return Array.from(S.current?.querySelectorAll(L)||[])}function U(e){let t=V()[e];t&&w.setState(`value`,t.getAttribute(z))}function W(e){var t;let n=M(),r=V(),i=r.findIndex(e=>e===n),a=r[i+e];(t=s.current)!=null&&t.loop&&(a=i+e<0?r[r.length-1]:i+e===r.length?r[0]:r[i+e]),a&&w.setState(`value`,a.getAttribute(z))}function G(e){let t=M()?.closest(P),n;for(;t&&!n;)t=e>0?se(t,P):ce(t,P),n=t?.querySelector(L);n?w.setState(`value`,n.getAttribute(z)):W(e)}let K=()=>U(V().length-1),q=e=>{e.preventDefault(),e.metaKey?K():e.altKey?G(1):W(1)},J=e=>{e.preventDefault(),e.metaKey?U(0):e.altKey?G(-1):W(-1)};return j.createElement(N.div,{ref:t,tabIndex:-1,...v,"cmdk-root":``,onKeyDown:e=>{var t;(t=v.onKeyDown)==null||t.call(v,e);let n=e.nativeEvent.isComposing||e.keyCode===229;if(!(e.defaultPrevented||n))switch(e.key){case`n`:case`j`:_&&e.ctrlKey&&q(e);break;case`ArrowDown`:q(e);break;case`p`:case`k`:_&&e.ctrlKey&&J(e);break;case`ArrowUp`:J(e);break;case`Home`:e.preventDefault(),U(0);break;case`End`:e.preventDefault(),K();break;case`Enter`:{e.preventDefault();let t=M();if(t){let e=new Event(R);t.dispatchEvent(e)}}}}},j.createElement(`label`,{"cmdk-label":``,htmlFor:T.inputId,id:T.labelId,style:pe},c),$(e,e=>j.createElement(H.Provider,{value:w},j.createElement(B.Provider,{value:T},e))))}),K=j.forwardRef((e,t)=>{let n=d(),i=j.useRef(null),a=j.useContext(W),o=V(),s=le(e),c=s.current?.forceMount??a?.forceMount;X(()=>{if(!c)return o.item(n,a?.id)},[c]);let l=ue(n,i,[e.value,e.children,i],e.keywords),u=U(),f=Q(e=>e.value&&e.value===l.current),p=Q(e=>c||o.filter()===!1?!0:e.search?e.filtered.items.get(n)>0:!0);j.useEffect(()=>{let t=i.current;if(!(!t||e.disabled))return t.addEventListener(R,m),()=>t.removeEventListener(R,m)},[p,e.onSelect,e.disabled]);function m(){var e,t;h(),(t=(e=s.current).onSelect)==null||t.call(e,l.current)}function h(){u.setState(`value`,l.current,!0)}if(!p)return null;let{disabled:g,value:_,onSelect:v,forceMount:y,keywords:b,...x}=e;return j.createElement(N.div,{ref:r(i,t),...x,id:n,"cmdk-item":``,role:`option`,"aria-disabled":!!g,"aria-selected":!!f,"data-disabled":!!g,"data-selected":!!f,onPointerMove:g||o.getDisablePointerSelection()?void 0:h,onClick:g?void 0:m},e.children)}),q=j.forwardRef((e,t)=>{let{heading:n,children:i,forceMount:a,...o}=e,s=d(),c=j.useRef(null),l=j.useRef(null),u=d(),f=V(),p=Q(e=>a||f.filter()===!1?!0:e.search?e.filtered.groups.has(s):!0);X(()=>f.group(s),[]),ue(s,c,[e.value,e.heading,l]);let m=j.useMemo(()=>({id:s,forceMount:a}),[a]);return j.createElement(N.div,{ref:r(c,t),...o,"cmdk-group":``,role:`presentation`,hidden:p?void 0:!0},n&&j.createElement(`div`,{ref:l,"cmdk-group-heading":``,"aria-hidden":!0,id:u},n),$(e,e=>j.createElement(`div`,{"cmdk-group-items":``,role:`group`,"aria-labelledby":n?u:void 0},j.createElement(W.Provider,{value:m},e))))}),J=j.forwardRef((e,t)=>{let{alwaysRender:n,...i}=e,a=j.useRef(null),o=Q(e=>!e.search);return!n&&!o?null:j.createElement(N.div,{ref:r(a,t),...i,"cmdk-separator":``,role:`separator`})}),ne=j.forwardRef((e,t)=>{let{onValueChange:n,...r}=e,i=e.value!=null,a=U(),o=Q(e=>e.search),s=Q(e=>e.selectedItemId),c=V();return j.useEffect(()=>{e.value!=null&&a.setState(`search`,e.value)},[e.value]),j.createElement(N.input,{ref:t,...r,"cmdk-input":``,autoComplete:`off`,autoCorrect:`off`,spellCheck:!1,"aria-autocomplete":`list`,role:`combobox`,"aria-expanded":!0,"aria-controls":c.listId,"aria-labelledby":c.labelId,"aria-activedescendant":s,id:c.inputId,type:`text`,value:i?e.value:o,onChange:e=>{i||a.setState(`search`,e.target.value),n?.(e.target.value)}})}),re=j.forwardRef((e,t)=>{let{children:n,label:i=`Suggestions`,...a}=e,o=j.useRef(null),s=j.useRef(null),c=Q(e=>e.selectedItemId),l=V();return j.useEffect(()=>{if(s.current&&o.current){let e=s.current,t=o.current,n,r=new ResizeObserver(()=>{n=requestAnimationFrame(()=>{let n=e.offsetHeight;t.style.setProperty(`--cmdk-list-height`,n.toFixed(1)+`px`)})});return r.observe(e),()=>{cancelAnimationFrame(n),r.unobserve(e)}}},[]),j.createElement(N.div,{ref:r(o,t),...a,"cmdk-list":``,role:`listbox`,tabIndex:-1,"aria-activedescendant":c,"aria-label":i,id:l.listId},$(e,e=>j.createElement(`div`,{ref:r(s,l.listInnerRef),"cmdk-list-sizer":``},e)))}),ie=j.forwardRef((e,t)=>{let{open:n,onOpenChange:r,overlayClassName:i,contentClassName:a,container:o,...s}=e;return j.createElement(p,{open:n,onOpenChange:r},j.createElement(l,{container:o},j.createElement(u,{"cmdk-overlay":``,className:i}),j.createElement(f,{"aria-label":e.label,"cmdk-dialog":``,className:a},j.createElement(G,{ref:t,...s}))))}),ae=j.forwardRef((e,t)=>Q(e=>e.filtered.count===0)?j.createElement(N.div,{ref:t,...e,"cmdk-empty":``,role:`presentation`}):null),oe=j.forwardRef((e,t)=>{let{progress:n,children:r,label:i=`Loading...`,...a}=e;return j.createElement(N.div,{ref:t,...a,"cmdk-loading":``,role:`progressbar`,"aria-valuenow":n,"aria-valuemin":0,"aria-valuemax":100,"aria-label":i},$(e,e=>j.createElement(`div`,{"aria-hidden":!0},e)))}),Y=Object.assign(G,{List:re,Item:K,Input:ne,Group:q,Separator:J,Dialog:ie,Empty:ae,Loading:oe});function se(e,t){let n=e.nextElementSibling;for(;n;){if(n.matches(t))return n;n=n.nextElementSibling}}function ce(e,t){let n=e.previousElementSibling;for(;n;){if(n.matches(t))return n;n=n.previousElementSibling}}function le(e){let t=j.useRef(e);return X(()=>{t.current=e}),t}var X=typeof window>`u`?j.useEffect:j.useLayoutEffect;function Z(e){let t=j.useRef();return t.current===void 0&&(t.current=e()),t}function Q(e){let t=U(),n=()=>e(t.snapshot());return j.useSyncExternalStore(t.subscribe,n,n)}function ue(e,t,n,r=[]){let i=j.useRef(),a=V();return X(()=>{var o;let s=(()=>{for(let e of n){if(typeof e==`string`)return e.trim();if(typeof e==`object`&&`current`in e)return e.current?e.current.textContent?.trim():i.current}})(),c=r.map(e=>e.trim());a.value(e,s,c),(o=t.current)==null||o.setAttribute(z,s),i.current=s}),i}var de=()=>{let[e,t]=j.useState(),n=Z(()=>new Map);return X(()=>{n.current.forEach(e=>e()),n.current=new Map},[e]),(e,r)=>{n.current.set(e,r),t({})}};function fe(e){let t=e.type;return typeof t==`function`?t(e.props):`render`in t?t.render(e.props):e}function $({asChild:e,children:t},n){return e&&j.isValidElement(t)?j.cloneElement(fe(t),{ref:t.ref},n(t.props.children)):n(t)}var pe={position:`absolute`,width:`1px`,height:`1px`,padding:`0`,margin:`-1px`,overflow:`hidden`,clip:`rect(0, 0, 0, 0)`,whiteSpace:`nowrap`,borderWidth:`0`};function me({className:e,...t}){return(0,M.jsx)(Y,{"data-slot":`command`,className:c(`bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden`,e),...t})}function he({className:e,...t}){return(0,M.jsx)(`div`,{"data-slot":`command-input-wrapper`,className:`p-1 pb-0`,children:(0,M.jsxs)(h,{className:`bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!`,children:[(0,M.jsx)(Y.Input,{"data-slot":`command-input`,className:c(`w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50`,e),...t}),(0,M.jsx)(m,{children:(0,M.jsx)(o,{className:`size-4 shrink-0 opacity-50`})})]})})}function ge({className:e,...t}){return(0,M.jsx)(Y.List,{"data-slot":`command-list`,className:c(`no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto`,e),...t})}function _e({className:e,...t}){return(0,M.jsx)(Y.Empty,{"data-slot":`command-empty`,className:c(`py-6 text-center text-sm`,e),...t})}function ve({className:e,...t}){return(0,M.jsx)(Y.Group,{"data-slot":`command-group`,className:c(`text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium`,e),...t})}function ye({className:e,...t}){return(0,M.jsx)(Y.Separator,{"data-slot":`command-separator`,className:c(`bg-border -mx-1 h-px w-auto`,e),...t})}function be({className:e,children:t,...n}){return(0,M.jsxs)(Y.Item,{"data-slot":`command-item`,className:c(`data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,e),...n,children:[t,(0,M.jsx)(i,{className:`ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100`})]})}export{be as a,he as i,_e as n,ge as o,ve as r,ye as s,me as t};

package/dist/showcase/assets/command-DNHjxTyl.js

@@ -0,0 +1 @@
+import"./chunk-QTnfLwEv.js";import{t as e}from"./react-sKtkuLrH.js";import{d as t,n}from"./index-DSBghWdd.js";import{a as r,n as i,o as a,r as o,t as s}from"./command-BXhyoNX1.js";e();var c=t();function l({className:e,...t}){return(0,c.jsx)(s,{className:n(`command--component`,`rounded-md! p-0 bg-transparent`,e),...t})}function u({className:e,...t}){return(0,c.jsx)(a,{className:n(`max-h-72 px-space-xs py-space-xs`,e),...t})}function d({className:e,...t}){return(0,c.jsx)(o,{className:n(`p-0 [&_[cmdk-group-heading]]:px-control-sm [&_[cmdk-group-heading]]:pt-space-sm [&_[cmdk-group-heading]]:pb-space-2xs [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground/70`,e),...t})}function f({className:e,...t}){return(0,c.jsx)(r,{className:n(`gap-space-sm rounded-md px-control-sm py-row-y text-pxs`,e),...t})}function p({className:e,...t}){return(0,c.jsx)(i,{className:n(`py-space-xl text-center text-xs text-muted-foreground`,e),...t})}export{u as a,f as i,p as n,d as r,l as t};

package/dist/showcase/assets/comment-composer-BtE5Erp8.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{C as n,p as r,y as i}from"./section-DLqBJGPH.js";import{Er as a,r as o}from"./example-DDhaO2UY.js";import{t as s}from"./file-text-BzM5AARd.js";import{t as c}from"./file-D3AT65yE.js";import{t as l}from"./image-BXWnqpeJ.js";import{t as u}from"./rich-text-editor-BCTbpMcY.js";import{t as d}from"./paperclip-CAcGOT6G.js";import{t as f}from"./send-B4jTMdd9.js";import{t as p}from"./x-DVQ0XpIT.js";import{N as m,d as h,l as g,n as _}from"./index-DSBghWdd.js";import{i as v,t as y}from"./popover-BZsIv1AP.js";import{n as b,r as x,t as S}from"./mention-inline-suggestions-Chbuzkb7.js";var C=g(`at-sign`,[[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}],[`path`,{d:`M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8`,key:`7n84p3`}]]),w=g(`calendar-range`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`4`,rx:`2`,key:`1hopcy`}],[`path`,{d:`M16 2v4`,key:`4m81vk`}],[`path`,{d:`M3 10h18`,key:`8toen8`}],[`path`,{d:`M8 2v4`,key:`1cmpym`}],[`path`,{d:`M17 14h-6`,key:`bkmgh3`}],[`path`,{d:`M13 18H7`,key:`bb0bb7`}],[`path`,{d:`M7 14h.01`,key:`1qa3f1`}],[`path`,{d:`M17 18h.01`,key:`1bdyru`}]]),T=e(t(),1),E=h(),D={title:`Comments`,subtitle:``,empty:`No comments yet.`,emptyHint:`Start the conversation — your team will see it instantly.`,composerPlaceholder:`Write a comment…`,composerSubmit:`Post comment`,composerSubmitting:`Posting…`,composerSave:`Save changes`,invalidContent:`Comment cannot be empty.`,composerCancel:`Cancel`,composerEditingEyebrow:`Editing comment`,composerReplyingEyebrow:`Replying to {{name}}`,composerAttachmentLabel:`Attach file`,composerReferenceLabel:`Mention or link`,composerReferenceMenuTitle:`Insert reference`,composerReferenceSearchPlaceholder:`Search…`,composerReferenceEmpty:`No matches.`,composerReferenceLoading:`Searching…`,fallbackAuthor:`Anonymous`,pinned:`Pinned`,edited:`edited`,deleteLabel:`Delete`,editLabel:`Edit`,replyLabel:`Reply`,pinLabel:`Pin`,unpinLabel:`Unpin`,moreActionsLabel:`More actions`,confirmDeleteLabel:`Delete comment`,attachmentFallback:`Attachment`,attachmentRemoveLabel:`Remove attachment`,attachmentUploadingLabel:`Uploading…`,attachmentFailedLabel:`Upload failed`,attachmentTooLargeError:`File is too large.`,attachmentTooManyError:`Too many attachments.`,attachmentRetryLabel:`Retry`,attachmentDownloadLabel:`Download`,addReactionLabel:`Add reaction`,showRepliesLabel:`Show replies`,hideRepliesLabel:`Hide replies`};function O(e){return m(D,e)}function k(e){let t=n(),r=i();return(0,T.useMemo)(()=>({getMediaUrl:e?.getMediaUrl??(e=>t.resolveUrl?.(e??{})),getMediaName:e?.getMediaName??(e=>t.resolveName?.(e??{})),getStatusLabel:e?.getStatusLabel,formatRelativeTime:e?.formatRelativeTime??r.formatRelativeTime}),[e,t,r.formatRelativeTime])}function A(e={}){let{resources:t,onResourceSearch:n,initialMentions:r,debounceMs:i=200}=e,a=(0,T.useMemo)(()=>t?Object.keys(t):[],[t]),[o,s]=(0,T.useState)(()=>a[0]??null),[c,l]=(0,T.useState)(!1),[u,d]=(0,T.useState)(``),[f,p]=(0,T.useState)({}),[m,h]=(0,T.useState)(!1),[g,_]=(0,T.useState)(()=>r?[...r]:[]),v=(0,T.useRef)(0),y=(0,T.useRef)(null);(0,T.useEffect)(()=>{if(a.length===0){s(null);return}(!o||!a.includes(o))&&s(a[0])},[o,a]);let b=(0,T.useMemo)(()=>o&&t?t[o]??null:null,[o,t]),x=(0,T.useCallback)(async(e,r)=>{let i=t?.[e];if(i?.search)return(await i.search(r)).map(t=>({...t,kind:e}));if(i?.suggestions){let t=i.suggestions;return(r.trim().length===0?t:t.filter(e=>e.label.toLowerCase().includes(r.toLowerCase()))).map(t=>({...t,kind:e}))}return n?(await n(r,e)).map(t=>({...t,kind:e})):[]},[t,n]);(0,T.useEffect)(()=>{if(y.current&&clearTimeout(y.current),a.length===0){p({});return}let e=++v.current,t=async()=>{h(!0);try{let t=await Promise.all(a.map(async e=>{try{return[e,await x(e,u)]}catch{return[e,[]]}}));if(e!==v.current)return;let n={};for(let[e,r]of t)n[e]=r;p(n)}finally{e===v.current&&h(!1)}};return y.current=setTimeout(()=>{t()},i),()=>{y.current&&clearTimeout(y.current)}},[a,u,x,i]),(0,T.useEffect)(()=>{if(c||!o||(f[o]??[]).length>0)return;let e=a.find(e=>(f[e]?.length??0)>0);e&&e!==o&&s(e)},[o,a,c,f]);let S=(0,T.useCallback)(e=>{s(e)},[]),C=(0,T.useCallback)(e=>{d(e)},[]),w=(0,T.useCallback)(e=>{_(t=>t.some(t=>t.id===e.id)?t:[...t,e])},[]),E=(0,T.useCallback)(e=>{_(t=>t.filter(t=>t.id!==e))},[]),D=(0,T.useCallback)(e=>{_([...e])},[]),O=(0,T.useCallback)(()=>{_([]),d(``),l(!1),v.current++},[]),k=(0,T.useCallback)(e=>{let n=e.kind??o,r=`${n}:${e.id}`,i=t?.[n],a=e.href??i?.buildHref?.(e),s={id:r,kind:n,label:e.label,href:a,data:e.data};return w(s),s},[o,w,t]);return{kinds:a,activeKind:o,setActiveKind:S,activeResource:b,query:u,setQuery:C,suggestions:(0,T.useMemo)(()=>o?f[o]??[]:[],[o,f]),suggestionsByKind:f,isLoading:m,mentions:g,addMention:w,removeMention:E,setMentions:D,reset:O,selectSuggestion:k,manualKindOverride:c,setManualKindOverride:l}}function j(e,t){let n=String(e.label??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),r=String(e.id).replace(/"/g,`&quot;`),i=String(e.kind).replace(/"/g,`&quot;`),a=t?.tone?String(t.tone).replace(/"/g,`&quot;`):``,o=t?.triggerChar??(e.kind===`user`?`@`:``);return`<span class="rsc-mention" data-ref-id="${r}" data-ref-kind="${i}"${a?` data-ref-tone="${a}"`:``} contenteditable="false">${o}${n}</span>&nbsp;`}function M(e={}){let t=e.resources,n=e.onResourceSearch,r=A({...e,resources:t,onResourceSearch:n}),[i,a]=(0,T.useState)(!1),[o,s]=(0,T.useState)(!1),c=(0,T.useRef)(null),l=(0,T.useRef)(null),u=(0,T.useCallback)(e=>{a(e),e||(c.current=null,l.current=null,s(!1),r.setManualKindOverride(!1))},[r]),d=e.editorRef,f=(0,T.useCallback)(()=>{if(!t)return;let e={};for(let[n,r]of Object.entries(t)){let t=r?.trigger;typeof t==`string`&&t.length>0&&(e[t]=n)}if(Object.keys(e).length===0)return;let n=d?.current?.getCaretContext();if(!n){c.current&&(c.current=null,u(!1));return}let i=Object.keys(e).map(e=>e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)).join(``),o=RegExp(`(?:^|\\s)([${i}])([\\p{L}\\p{N}_-]*)$`,`u`),f=n.textBefore.match(o);if(!f){c.current&&(c.current=null,u(!1));return}let p=f[1],m=f[2]??``,h=e[p];c.current={kind:h,triggerChar:p,consumedLength:p.length+m.length},s(!0),l.current!==p&&(r.activeKind!==h&&r.setActiveKind(h),r.setManualKindOverride(!1),l.current=p),r.query!==m&&r.setQuery(m),a(!0)},[d,t,r,u]),p=(0,T.useCallback)(e=>{let n=r.selectSuggestion(e),i=c.current,a=t?.[n.kind]?.tone,o=j(n,{triggerChar:i?.triggerChar,tone:a});return i&&i.consumedLength>0&&d?.current?(d.current.replaceBeforeCaret(i.consumedLength,o),c.current=null):d?.current&&d.current.insertHTML(o),u(!1),n},[d,t,r,u]);return{...r,pickerOpen:i,setPickerOpen:u,triggerActive:o,handleCaretChange:f,pickSuggestion:p}}var N=/<(span|a)\b([^>]*?)data-ref-id\s*=\s*"([^"]+)"([^>]*)>([\s\S]*?)<\/\1>/gi;function P(e){if(!e)return[];let t=[],n=0,r;for(N.lastIndex=0;(r=N.exec(e))!==null;){let[i,,,a]=r,o=e.slice(n,r.index);o.length>0&&t.push({kind:`html`,value:o}),t.push({kind:`mention`,refId:a,fallback:i}),n=r.index+i.length}let i=e.slice(n);return i.length>0&&t.push({kind:`html`,value:i}),t}var F=`prose prose-sm prose-p:my-0.5 prose-p:leading-relaxed prose-headings:my-1 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:font-semibold prose-ul:my-0.5 prose-ol:my-0.5 prose-li:my-0.5 max-w-none`;function I(e){let{html:t,mentions:n,resources:r,renderMention:i,sanitizer:a,className:o,prose:s=!0}=e,c=r,l=a?a(t??``):t??``,u=new Map;for(let e of n??[])u.set(e.id,e);let d=u.size>0?P(l):[{kind:`html`,value:l}],f=e=>{if(i)return i(e);let t=c?.[e.kind];return(0,E.jsx)(x,{mention:e,resource:t})},p=d.map((e,t)=>{if(e.kind===`mention`){let n=u.get(e.refId);return n?(0,E.jsx)(T.Fragment,{children:f(n)},`ref-${t}-${e.refId}`):(0,E.jsx)(`span`,{dangerouslySetInnerHTML:{__html:e.fallback}},`fallback-${t}`)}return(0,E.jsx)(`span`,{dangerouslySetInnerHTML:{__html:e.value}},`html-${t}`)});return s?(0,E.jsx)(`div`,{className:_(`mention-content--component`,F,o),children:p}):(0,E.jsx)(E.Fragment,{children:p})}var L=/<(?:span|a)\b[^>]*?data-ref-id\s*=\s*"([^"]+)"[^>]*?>([\s\S]*?)<\/(?:span|a)>/gi,R=/data-ref-kind\s*=\s*"([^"]+)"/i;function z(e){let t=[];if(!e)return t;let n=new Set,r;for(L.lastIndex=0;(r=L.exec(e))!==null;){let[e,i,a]=r;if(n.has(i))continue;n.add(i);let o=e.match(R)?.[1]??i.split(`:`)[0]??``,s=(a??``).replace(/<[^>]*>/g,``).replace(/&nbsp;/g,` `).replace(/^[@#$&%!~]\s*/,``).trim();t.push({id:i,kind:o,label:s})}return t}function B(e){return typeof e!=`number`||e<=0?null:e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(1)} KB`:`${(e/(1024*1024)).toFixed(1)} MB`}function V(e){return e.mimeType?.startsWith(`image/`)?l:e.mimeType===`application/pdf`||e.mimeType?.startsWith(`text/`)?s:e.mimeType?c:d}var H=({attachment:e,editable:t=!1,onRemove:n,onRetry:i,accessors:s,strings:c,compact:l=!1,className:u})=>{let d=m(D,c),f=s?.getMediaUrl?.(e)??e.url,h=s?.getMediaName?.(e)??e.name??d.attachmentFallback,g=V(e),v=e.status===`uploading`,y=e.status===`failed`,b=B(e.size),x=v?d.attachmentUploadingLabel+(typeof e.progress==`number`?` ${Math.round(e.progress)}%`:``):y?e.error??d.attachmentFailedLabel:b,S=_(`relative inline-flex min-w-0 max-w-[20rem] items-center gap-1.5 rounded-md`,`ring-1 ring-inset transition-colors`,l?`px-2 py-1 text-xs`:`px-2.5 py-1 text-xs`,y?`bg-destructive/[0.04] ring-destructive/30 hover:bg-destructive/[0.08]`:`bg-foreground/[0.03] ring-border/60 hover:bg-foreground/[0.06]`,u),C=v?(0,E.jsx)(a,{className:_(`shrink-0 animate-spin text-muted-foreground`,`size-3.5`),"aria-hidden":!0}):(0,E.jsx)(g,{className:_(`shrink-0`,`size-3.5`,y?`text-destructive`:`text-muted-foreground`),"aria-hidden":!0}),w=(0,E.jsxs)(`span`,{className:`inline-flex min-w-0 items-baseline gap-1.5`,children:[(0,E.jsx)(r,{tag:`span`,size:`xs`,weight:`medium`,className:_(`truncate`,y&&`text-destructive`),children:h}),x?(0,E.jsx)(r,{tag:`span`,size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:x}):null]});return(0,E.jsxs)(`div`,{className:S,children:[C,f&&!v&&!y?(0,E.jsx)(`a`,{href:f,target:`_blank`,rel:`noreferrer noopener`,className:`inline-flex min-w-0 flex-1 items-baseline gap-1.5 hover:underline`,"aria-label":d.attachmentDownloadLabel,children:w}):w,v&&typeof e.progress==`number`&&(0,E.jsx)(`div`,{className:`bg-primary/15 absolute bottom-0 left-2 right-2 h-px overflow-hidden rounded-full`,children:(0,E.jsx)(`div`,{className:`bg-primary h-full transition-[width]`,style:{width:`${Math.min(100,Math.max(0,e.progress))}%`}})}),y&&i&&(0,E.jsx)(o,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`small`,onClick:()=>i(e.id),className:`h-auto shrink-0 rounded px-1.5 py-px text-xs font-medium ring-1 ring-inset ring-destructive/30 hover:ring-destructive/60`,children:d.attachmentRetryLabel}),t&&n&&(0,E.jsx)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:()=>n(e.id),className:`-mr-0.5 size-4 shrink-0 rounded p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground`,"aria-label":d.attachmentRemoveLabel,title:d.attachmentRemoveLabel,children:(0,E.jsx)(p,{className:`size-3`})})]})};function U(e={}){let{onUpload:t,maxSize:n,maxFiles:r,disabled:i,initialAttachments:a,onChange:o,onError:s}=e,[c,l]=(0,T.useState)(()=>a?[...a]:[]),u=(0,T.useRef)(new Map),d=(0,T.useRef)(new Map),f=(0,T.useRef)(o);f.current=o;let p=(0,T.useCallback)((e,t)=>{l(n=>n.map(n=>n.id===e?{...n,...t}:n))},[]),m=(0,T.useCallback)(e=>{l([...e])},[]),h=(0,T.useCallback)((e,n)=>{if(!t)return;let r=new AbortController;u.current.set(e,{controller:r}),p(e,{status:`uploading`,progress:0,error:void 0}),t({file:n,onProgress:t=>{p(e,{progress:t})},signal:r.signal}).then(t=>{u.current.delete(e),p(e,{...t,id:e,status:`uploaded`,progress:100,error:void 0})}).catch(t=>{if(u.current.delete(e),r.signal.aborted)return;let n=t instanceof Error?t.message:`Upload failed`;p(e,{status:`failed`,error:n}),s?.(n)})},[s,t,p]),g=(0,T.useCallback)(e=>{if(i||!t)return;let a=Array.from(e);a.length!==0&&l(e=>{let t=[...e];for(let e of a){if(typeof r==`number`&&t.length>=r){s?.(`Too many attachments.`);break}if(typeof n==`number`&&e.size>n){s?.(`File is too large.`);continue}let i=typeof crypto<`u`&&`randomUUID`in crypto?crypto.randomUUID():`att-${Date.now()}-${Math.random().toString(36).slice(2)}`;d.current.set(i,e),t.push({id:i,name:e.name,size:e.size,mimeType:e.type,status:`uploading`,progress:0}),queueMicrotask(()=>h(i,e))}return t})},[h,i,r,n,s,t]),_=(0,T.useCallback)(e=>{let t=u.current.get(e);t&&(t.controller.abort(),u.current.delete(e)),d.current.delete(e),l(t=>t.filter(t=>t.id!==e))},[]),v=(0,T.useCallback)(e=>{let t=d.current.get(e);t&&h(e,t)},[h]),y=(0,T.useCallback)(()=>{for(let e of u.current.values())e.controller.abort();u.current.clear(),d.current.clear(),l([])},[]);return(0,T.useEffect)(()=>{f.current?.(c)},[c]),(0,T.useEffect)(()=>{let e=u.current;return()=>{for(let t of e.values())t.controller.abort()}},[]),{attachments:c,uploadedAttachments:(0,T.useMemo)(()=>c.filter(e=>e.status===`uploaded`||!e.status),[c]),isUploading:(0,T.useMemo)(()=>c.some(e=>e.status===`uploading`),[c]),addFiles:g,removeAttachment:_,retryAttachment:v,setAttachments:m,reset:y}}function W(e){return!e||typeof e!=`string`?!1:e.replace(/<[^>]*>/g,``).trim().length>0}var G=(0,T.forwardRef)(function({context:e,canComment:t=!0,isSubmitting:n=!1,errors:i,resetKey:s=0,onSubmit:c,onCancel:l,editingComment:p,strings:m,resources:h,onResourceSearch:g,attachments:_,initialValues:x,autoFocus:w=!1,inlineSubmit:D=!0,placeholder:k},A){let j=O(m),N=h,P=g,F=_,I=(0,T.useRef)(null),[L,R]=(0,T.useState)(()=>x?.content??p?.content??``),[B,V]=(0,T.useState)(null),G=M({resources:N,onResourceSearch:P,editorRef:I,initialMentions:x?.references??p?.references}),q=U({...F,initialAttachments:x?.attachments??void 0});(0,T.useImperativeHandle)(A,()=>({focus:()=>I.current?.focus(),clear:()=>{I.current?.clear(),G.reset(),q.reset(),V(null)},setBody:e=>{I.current?.setHTML(e)}}),[q,G]),(0,T.useEffect)(()=>{I.current?.setHTML(x?.content??``),G.setMentions(x?.references??[]),q.setAttachments(x?.attachments??[]),V(null)},[e.id,e.type,s]),(0,T.useEffect)(()=>{if(!p)return;I.current?.setHTML(p.content??``),G.setMentions(p.references??[]);let e=(p.attachments??p.media??[]).filter(e=>!!e);q.setAttachments(e)},[p?.id]),(0,T.useEffect)(()=>{i?.content&&V(i.content)},[i]);let J=t=>{t?.preventDefault();let n=I.current?.getHTML()??L;if(!W(n)){V(j.invalidContent);return}V(null),c({content:n,commentableId:e.id,commentableType:e.type,contentType:`html`,references:G.mentions,attachments:q.uploadedAttachments,editingId:p?.id})},Y=(0,T.useRef)(null),X=()=>Y.current?.click(),ee=e=>{e&&q.addFiles(e)},Z=q.attachments.length>0,Q=!!p,te=n?j.composerSubmitting:Q?j.composerSave:j.composerSubmit,ne=Q?(0,E.jsx)(K,{label:j.composerEditingEyebrow,closeLabel:j.composerCancel,onClose:l}):null,re=(0,T.useMemo)(()=>{let e=[];return N&&Object.keys(N).length>0&&e.push({id:`reference`,icon:C,label:j.composerReferenceLabel,onClick:()=>G.setPickerOpen(!0)}),F?.onUpload&&!F.disabled&&e.push({id:`attachment`,icon:d,label:j.composerAttachmentLabel,onClick:X}),e},[N,F?.onUpload,F?.disabled,j.composerReferenceLabel,j.composerAttachmentLabel]);if(!t)return null;let $=(0,E.jsx)(o,{type:`button`,onClick:()=>J(),disabled:n||q.isUploading,icon:n?a:f,children:te}),ie=Q||l?(0,E.jsx)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,onClick:l,disabled:n,children:j.composerCancel}):null,ae=Z?(0,E.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:q.attachments.map(e=>(0,E.jsx)(H,{attachment:e,editable:!0,onRemove:q.removeAttachment,onRetry:q.retryAttachment,strings:m},e.id))}):null,oe=Z?ae:null,se=D===!1?null:$,ce=D===!1||Q;return(0,E.jsxs)(`form`,{onSubmit:J,className:`space-y-2`,children:[ne,(0,E.jsx)(`input`,{ref:Y,type:`file`,multiple:!0,hidden:!0,accept:F?.accept,onChange:e=>{ee(e.target.files),e.target.value=``}}),!G.triggerActive&&(0,E.jsxs)(y,{open:G.pickerOpen,onOpenChange:G.setPickerOpen,children:[(0,E.jsx)(v,{render:(0,E.jsx)(`button`,{type:`button`,className:`sr-only`,tabIndex:-1}),children:j.composerReferenceLabel}),(0,E.jsx)(b,{open:G.pickerOpen,activeKind:G.activeKind,setActiveKind:G.setActiveKind,kinds:G.kinds,resources:N,query:G.query,setQuery:G.setQuery,suggestions:G.suggestions,isLoading:G.isLoading,onSelect:G.pickSuggestion,strings:{title:j.composerReferenceMenuTitle,searchPlaceholder:j.composerReferenceSearchPlaceholder,empty:j.composerReferenceEmpty,loading:j.composerReferenceLoading}})]}),(0,E.jsxs)(`div`,{className:`relative`,children:[(0,E.jsx)(u,{ref:I,value:L,onChange:e=>{R(e);let t=z(e),n=G.mentions;if(n.map(e=>e.id).join(`|`)!==t.map(e=>e.id).join(`|`)){let e=new Map(n.map(e=>[e.id,e])),r=t.map(t=>e.get(t.id)??t);G.setMentions(r)}},placeholder:k??j.composerPlaceholder,strings:{editorLabel:k??j.composerPlaceholder},minHeight:`3rem`,autoFocus:w||Q,extraToolbarItems:re,toolbarTrailing:se,footerSlot:oe,onCaretChange:G.handleCaretChange}),(0,E.jsx)(S,{open:G.triggerActive&&G.pickerOpen,activeKind:G.activeKind,setActiveKind:G.setActiveKind,onManualKindChange:()=>G.setManualKindOverride(!0),kinds:G.kinds,resources:N,query:G.query,suggestions:G.suggestions,suggestionsByKind:G.suggestionsByKind,isLoading:G.isLoading,onSelect:G.pickSuggestion,strings:{title:j.composerReferenceMenuTitle,empty:j.composerReferenceEmpty,loading:j.composerReferenceLoading}})]}),B&&(0,E.jsx)(r,{size:`xs`,type:`error`,children:B}),ce&&(0,E.jsxs)(`div`,{className:`flex items-center justify-end gap-2`,children:[ie,$]})]})});function K({label:e,closeLabel:t,onClose:n}){return(0,E.jsxs)(`div`,{className:`bg-muted/40 ring-border/60 flex items-center justify-between rounded px-2.5 py-1.5 ring-1 ring-inset`,children:[(0,E.jsx)(r,{size:`xs`,type:`secondary`,weight:`medium`,className:`uppercase tracking-wide`,children:e}),n?(0,E.jsx)(o,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,onClick:n,className:`size-4 rounded p-0 text-muted-foreground hover:text-foreground`,"aria-label":t,children:(0,E.jsx)(p,{className:`size-3`})}):null]})}export{O as a,k as i,H as n,w as o,I as r,G as t};

package/dist/showcase/assets/comment-item-TztxmXc7.js

@@ -0,0 +1 @@
+import{r as e}from"./chunk-QTnfLwEv.js";import{t}from"./react-sKtkuLrH.js";import{f as n,o as r,p as i}from"./section-DLqBJGPH.js";import{a,i as o,n as ee,r as s}from"./comment-composer-BtE5Erp8.js";import{a as c,c as l,o as u,r as d,s as f}from"./example-DDhaO2UY.js";import{t as p}from"./pencil-Db0qlNpO.js";import{t as m}from"./trash-2-DZ5FSAFb.js";import{d as h,l as g,n as _,p as v}from"./index-DSBghWdd.js";import{o as te,r as y,t as b}from"./avatar-CTFW3AQa.js";var x=g(`corner-down-right`,[[`path`,{d:`m15 10 5 5-5 5`,key:`qqa56n`}],[`path`,{d:`M4 4v7a4 4 0 0 0 4 4h12`,key:`z08zvw`}]]),S=g(`pin`,[[`path`,{d:`M12 17v5`,key:`bb1du9`}],[`path`,{d:`M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z`,key:`1nkz8b`}]]),C=g(`smile`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M8 14s1.5 2 4 2 4-2 4-2`,key:`1y1vjs`}],[`line`,{x1:`9`,x2:`9.01`,y1:`9`,y2:`9`,key:`yxxnd0`}],[`line`,{x1:`15`,x2:`15.01`,y1:`9`,y2:`9`,key:`1p4y9e`}]]),w=e(t(),1),T=h();function E(e){let{comment:t,resources:n,renderReference:r,sanitizer:a}=e,o=t.contentType??t.content_type??`text`;return o===`rich`?D(t.content):o===`html`?(0,T.jsx)(s,{html:t.content??``,mentions:t.references,resources:n,renderMention:r,sanitizer:a}):(0,T.jsx)(i,{className:`whitespace-pre-line`,children:A(t.content??``)})}function D(e){if(!e)return null;try{let t=JSON.parse(e);return!t||!Array.isArray(t.blocks)||t.blocks.length===0?null:(0,T.jsx)(`div`,{className:`prose prose-sm prose-p:my-0.5 prose-headings:my-1 prose-a:text-primary prose-a:no-underline hover:prose-a:underline max-w-none space-y-1`,children:t.blocks.map((e,t)=>(0,T.jsx)(w.Fragment,{children:O(e)},e.id??`${e.type}-${t}`))})}catch{return(0,T.jsx)(i,{className:`whitespace-pre-line`,children:A(e)})}}function O(e){let t=e.data??{};switch(e.type){case`paragraph`:{let e=String(t.text??``).trim();return e?(0,T.jsx)(i,{asHTML:!0,content:e}):null}case`header`:{let e=k(String(t.text??``)),r=Number(t.level??3);return e?(0,w.createElement)(n,{tag:`h${Math.min(Math.max(r,1),6)}`},e):null}case`list`:{let e=(Array.isArray(t.items)?t.items:[]).map(e=>k(String(e??``))).filter(e=>e.length>0);return e.length===0?null:t.style===`ordered`?(0,T.jsx)(`ol`,{className:`ml-6 list-decimal space-y-1 text-sm`,children:e.map((e,t)=>(0,T.jsx)(`li`,{children:e},`${e}-${t}`))}):(0,T.jsx)(`ul`,{className:`ml-6 list-disc space-y-1 text-sm`,children:e.map(e=>(0,T.jsx)(`li`,{children:e},e))})}case`quote`:{let e=String(t.text??``).trim();if(!e)return null;let n=k(String(t.caption??``));return(0,T.jsxs)(`blockquote`,{className:`border-muted text-muted-foreground border-l-2 pl-3 text-sm italic`,children:[(0,T.jsx)(i,{asHTML:!0,content:e}),n.length>0&&(0,T.jsxs)(`cite`,{className:`text-muted-foreground/80 mt-1 block text-xs not-italic`,children:[`— `,n]})]})}case`delimiter`:return(0,T.jsx)(`div`,{className:`border-muted my-4 border-b border-dashed`,"aria-hidden":`true`});default:{let e=k(String(t.text??``));return e?(0,T.jsx)(i,{className:`whitespace-pre-line`,children:e}):null}}}function k(e){return e.replace(/<[^>]*>/g,``).trim()}function A(e){if(typeof e!=`string`)return``;let t=e.trim();if(t===``)return``;if(t.startsWith(`{`)||t.startsWith(`[`))return t;try{let e=JSON.parse(t);if(typeof e==`string`)return e}catch{}return t.startsWith(`"`)&&t.endsWith(`"`)?t.slice(1,-1):t}var j=`?`,ne=e=>e?.url,M=e=>e?.name,N=e=>e.charAt(0).toUpperCase()+e.slice(1).replace(/_/g,` `),P=e=>{try{return v(new Date(e),{addSuffix:!0})}catch{return`—`}},F=(0,w.memo)(function({comment:e,canModerate:t,onDelete:n,onPinToggle:s,onReact:h,onReply:g,strings:v,getMediaUrl:D,getMediaName:O,getStatusLabel:k,formatRelativeTime:A,resources:F,renderAttachment:I,renderReference:L}){let R=a(v),z=o({getMediaUrl:D,getMediaName:O,getStatusLabel:k,formatRelativeTime:A}),B=z.getMediaUrl??ne,V=z.getMediaName??M,H=z.getStatusLabel??N,U=z.formatRelativeTime??P,W=e.user?.name??R.fallbackAuthor,G=e.user?.avatar??void 0,K=(0,w.useMemo)(()=>e.createdAt?U(e.createdAt):`—`,[e.createdAt,U]),q=(0,w.useMemo)(()=>{if(!W)return j;let e=W.trim();return e===``?j:e.charAt(0).toUpperCase()},[W]),J=(0,w.useMemo)(()=>Array.isArray(e.tagsArray)?e.tagsArray.filter(e=>typeof e==`string`):e.tagsArray&&typeof e.tagsArray==`object`?Object.values(e.tagsArray).filter(e=>typeof e==`string`):[],[e.tagsArray]),Y=(0,w.useMemo)(()=>(e.attachments??e.media??[]).filter(e=>!!e&&typeof e==`object`),[e.attachments,e.media]),X=e.reactions??[],Z=e.isPinned===!0,re=e.isEdited===!0,Q=e.status&&e.status!==`active`,$=Q&&e.status?H(e.status):null,ie=e.canDelete===!0||t===!0,ae=e.canEdit===!0||t===!0,oe=Y.length>0;return(0,T.jsx)(`article`,{className:_(`comment-item--component group relative overflow-hidden rounded-lg border transition-colors`,`border-border/60 bg-card hover:bg-muted/30 px-3 py-2.5`),"data-comment-id":e.id,children:(0,T.jsxs)(`div`,{className:`flex min-w-0 items-start gap-3`,children:[(0,T.jsxs)(b,{className:`mt-0.5 size-avatar shrink-0`,children:[!!G&&(0,T.jsx)(te,{src:G,alt:W}),(0,T.jsx)(y,{className:`bg-muted text-muted-foreground text-xs font-medium`,children:q})]}),(0,T.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,T.jsxs)(`div`,{className:`flex min-w-0 items-baseline gap-2`,children:[(0,T.jsx)(i,{tag:`span`,weight:`semibold`,className:`truncate`,children:W}),!!Z&&(0,T.jsx)(f,{delayDuration:0,children:(0,T.jsxs)(c,{children:[(0,T.jsx)(l,{render:(0,T.jsx)(`span`,{className:`inline-flex shrink-0 self-center`}),children:(0,T.jsx)(S,{className:`text-warning size-3`,"aria-hidden":!0})}),(0,T.jsx)(u,{side:`top`,className:`text-xs`,children:R.pinned})]})}),(0,T.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,className:`shrink-0 tabular-nums`,children:K}),!!re&&(0,T.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,className:`shrink-0`,children:R.edited}),!!Q&&!!$&&(0,T.jsx)(r,{variant:`secondary`,className:`self-center uppercase tracking-wide`,children:$})]}),(0,T.jsx)(`div`,{className:`mt-1 text-sm leading-relaxed`,children:(0,T.jsx)(E,{comment:e,resources:F,renderReference:L})}),J.length>0&&(0,T.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1.5`,children:J.map(e=>(0,T.jsx)(r,{variant:`secondary`,className:`uppercase tracking-wide`,children:e},e))}),oe&&(0,T.jsx)(`div`,{className:`mt-2 flex flex-wrap gap-1.5`,children:Y.map(e=>I?(0,T.jsx)(`div`,{children:I(e)},e.id??e.name):(0,T.jsx)(ee,{attachment:e,accessors:{getMediaUrl:B,getMediaName:V},strings:v},e.id??e.name))}),X.length>0&&(0,T.jsx)(`div`,{className:`mt-2 flex flex-wrap items-center gap-1`,children:X.map(t=>(0,T.jsx)(d,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`small`,onClick:()=>h&&e.id?h(e.id,t.emoji):void 0,title:t.users?.join(`, `),className:`h-auto rounded-full p-0`,children:(0,T.jsxs)(r,{variant:t.mine?`primary`:`secondary`,className:`cursor-pointer transition-colors hover:opacity-90`,children:[(0,T.jsx)(`span`,{"aria-hidden":!0,className:`leading-none`,children:t.emoji}),(0,T.jsx)(`span`,{className:`tabular-nums`,children:t.count})]})},t.emoji))})]}),(0,T.jsxs)(`div`,{className:_(`absolute right-2 top-2 opacity-0 transition-opacity`,`group-hover:opacity-100 focus-within:opacity-100`,`inline-flex items-center gap-0.5 rounded-md bg-card/95 shadow-sm ring-1 ring-border/70`),children:[!!g&&(0,T.jsx)(d,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>e.id&&g(e.id),title:R.replyLabel,"aria-label":R.replyLabel,children:(0,T.jsx)(x,{className:`size-3.5`})}),!!h&&(0,T.jsx)(d,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>e.id&&h(e.id,`👍`),title:R.addReactionLabel,"aria-label":R.addReactionLabel,children:(0,T.jsx)(C,{className:`size-3.5`})}),!!s&&t&&(0,T.jsx)(d,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>s(e),title:Z?R.unpinLabel:R.pinLabel,"aria-label":Z?R.unpinLabel:R.pinLabel,children:(0,T.jsx)(S,{className:_(`size-3.5`,Z&&`text-warning`)})}),!!ae&&!!e.id&&(0,T.jsx)(d,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,title:R.editLabel,"aria-label":R.editLabel,children:(0,T.jsx)(p,{className:`size-3.5`})}),!!ie&&!!n&&!!e.id&&(0,T.jsx)(d,{type:`button`,size:`icon-small`,variant:`secondary`,buttonStyle:`ghost`,className:`hover:bg-destructive/10 hover:text-destructive`,onClick:()=>n(e.id),title:R.deleteLabel,"aria-label":R.deleteLabel,children:(0,T.jsx)(m,{className:`size-3.5`})})]})]})})});export{F as t};

package/dist/showcase/assets/comments-CEMkLRtb.js

@@ -0,0 +1,357 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a,v as o}from"./section-DLqBJGPH.js";import{a as s,o as c,t as l}from"./comment-composer-BtE5Erp8.js";import{t as u}from"./briefcase-BCMmOuh2.js";import{t as d}from"./example-DDhaO2UY.js";import{t as f}from"./comment-item-TztxmXc7.js";import{t as p}from"./git-branch-CZga8VLM.js";import{t as m}from"./package-Db-MTVUx.js";import{t as h}from"./user-DlFWtE-h.js";import{d as g,l as _,n as v}from"./index-DSBghWdd.js";import{t as y}from"./props-table-CzpevabQ.js";import{t as b}from"./smart-card-BA097ZGN.js";var x=_(`message-circle`,[[`path`,{d:`M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719`,key:`1sd12s`}]]),S=g(),C=({strings:e,icon:t,className:n})=>{let r=s(e);return(0,S.jsxs)(`div`,{className:v(`flex flex-col items-center justify-center py-8 text-center`,n),children:[(0,S.jsx)(`div`,{className:`bg-muted/50 mb-3 flex h-12 w-12 items-center justify-center rounded-full`,children:t??(0,S.jsx)(x,{className:`text-muted-foreground/60 h-5 w-5`})}),(0,S.jsx)(i,{weight:`medium`,children:r.empty}),r.emptyHint?(0,S.jsx)(i,{size:`xs`,type:`secondary`,className:`mt-1 max-w-[28ch]`,children:r.emptyHint}):null]})},w=function({comments:e,canModerate:t,onDelete:n,onPinToggle:r,onReact:i,onReply:a,strings:o,getMediaUrl:s,getMediaName:c,getStatusLabel:l,formatRelativeTime:u,resources:d,renderItem:p,renderAttachment:m,renderReference:h,emptySlot:g}){return e.length?(0,S.jsx)(`div`,{className:`flex flex-col gap-2`,children:e.map((e,g)=>{let _=(0,S.jsx)(f,{comment:e,canModerate:t,onDelete:n,onPinToggle:r,onReact:i,onReply:a,strings:o,getMediaUrl:s,getMediaName:c,getStatusLabel:l,formatRelativeTime:u,resources:d,renderAttachment:m,renderReference:h});return p?(0,S.jsx)(`div`,{children:p({comment:e,canModerate:t??!1,onDelete:n,defaultItem:_})},e.id??`comment-${g}`):(0,S.jsx)(`div`,{children:_},e.id??`comment-${g}`)})}):(0,S.jsx)(S.Fragment,{children:g??(0,S.jsx)(C,{strings:o})})},T=t(n(),1);function E(e){let t=o(),n=e.composerPosition??t.composerPosition??`top`,r=e.canComment??!1,i=e.canModerate??!1,a=e.onSubmit,c=e.onDelete,u=e.onPinToggle,d=e.onReact,f=e.onReply,p=e.resources,m=e.attachments,h=s(e.strings),g=e.title===void 0?h.title:e.title,[_,y]=(0,T.useState)({}),[x,E]=(0,T.useState)(!1),[D,O]=(0,T.useState)(0),k={setErrors:e=>y(e),reset:()=>{O(e=>e+1),y({}),E(!1)},setSubmitting:E},A=(0,T.useCallback)(e=>{a&&(E(!0),y({}),a(e,k))},[a]),j=e.composerSlot??(r?(0,S.jsx)(l,{context:e.context,canComment:r,isSubmitting:x,errors:_,resetKey:D,onSubmit:A,strings:e.strings,resources:p,attachments:m}):null),M=(0,S.jsx)(w,{comments:e.comments,canModerate:i,onDelete:c,onPinToggle:u,onReact:d,onReply:f,strings:e.strings,getMediaUrl:e.getMediaUrl,getMediaName:e.getMediaName,getStatusLabel:e.getStatusLabel,formatRelativeTime:e.formatRelativeTime,resources:p,renderItem:e.renderItem,renderAttachment:e.renderAttachment,renderReference:e.renderReference,emptySlot:e.emptySlot??(0,S.jsx)(C,{strings:e.strings})}),N=j?(0,S.jsx)(`div`,{children:j}):null,P=(0,S.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[e.headerSlot,n===`top`&&N,M,n===`bottom`&&N,e.footerSlot]});return e.bare?P:(0,S.jsx)(b,{title:g===!1?void 0:g,description:h.subtitle||void 0,padding:`default`,className:v(`comments--component`,e.className),children:P})}var D=e({APISurface:()=>V,CommentsExample:()=>H,CustomReferenceRendering:()=>G,EmptyStateCustomStrings:()=>W,ReadOnly:()=>U}),O=[{id:`maria`,label:`Sarah Smitha`,description:`Head of Operations`},{id:`ivana`,label:`Davida Todorova`,description:`Refunds Specialist`},{id:`stefan`,label:`Daniel Kowalski`,description:`Customer`},{id:`kris`,label:`Kris Dineva`,description:`Engineering`},{id:`jordan`,label:`Jordan Jones`,description:`Finance`}],k=[{id:`BKG-2026-0408`,label:`BKG-2026-0408`,description:`Daniel Kowalski · Apr 12 → Apr 14`},{id:`BKG-2026-0421`,label:`BKG-2026-0421`,description:`Sarah Smitha · Apr 19 → Apr 22`},{id:`BKG-2026-0510`,label:`BKG-2026-0510`,description:`Davida Todorova · May 04 → May 09`}],A=[{id:`ORD-A219`,label:`ORD-A219`,description:`€420.00 · Refund pending`},{id:`ORD-A284`,label:`ORD-A284`,description:`€88.50 · Captured`},{id:`ORD-A301`,label:`ORD-A301`,description:`€1,140.00 · Captured`}],j=[{id:`SPR-Q2-W3`,label:`Sprint Q2-W3`,description:`Refund flows`},{id:`SPR-Q2-W4`,label:`Sprint Q2-W4`,description:`Booking calendar`}],M={user:{icon:h,label:`Person`,trigger:`@`,tone:`info`,buildHref:e=>`/people/${e.id}`},booking:{icon:c,label:`Booking`,trigger:`#`,tone:`success`,buildHref:e=>`/bookings/${e.id}`},order:{icon:m,label:`Order`,trigger:`$`,tone:`warning`,buildHref:e=>`/orders/${e.id}`},sprint:{icon:p,label:`Sprint`,tone:`secondary`,buildHref:e=>`/sprints/${e.id}`}};function N(e,t){let n=t===`user`?O:t===`booking`?k:t===`order`?A:j,r=e.trim().toLowerCase();return(r.length===0?n:n.filter(e=>e.label.toLowerCase().includes(r)||(e.description??``).toLowerCase().includes(r))).slice(0,8)}async function P(e){let{file:t,onProgress:n,signal:r}=e;return new Promise((e,i)=>{let a=0,o=()=>{if(r.aborted){i(Error(`aborted`));return}if(a=Math.min(100,a+18+Math.random()*14),n(a),a>=100){e({id:`att-${Math.random().toString(36).slice(2)}`,name:t.name,size:t.size,mimeType:t.type,url:`#`});return}window.setTimeout(o,220)};window.setTimeout(o,220)})}var F={id:`BKG-2026-0408`,type:`booking`,moduleKey:`bookings`},I=Date.now(),L=e=>new Date(I-e*60*60*1e3).toISOString(),R=(e,t,n)=>({id:`${e}:${t}`,kind:e,label:n,href:`/${e}s/${t}`}),z=[{id:`1`,user:{id:`maria`,name:`Sarah Smitha`},createdAt:L(2),contentType:`html`,content:`Approving the refund for <span data-ref-id="user:stefan" data-ref-kind="user">@Daniel Kowalski</span> on <span data-ref-id="booking:BKG-2026-0408" data-ref-kind="booking">BKG-2026-0408</span> — please process before EOD so the payout window doesn't shift.`,references:[R(`user`,`stefan`,`Daniel Kowalski`),R(`booking`,`BKG-2026-0408`,`BKG-2026-0408`)],isPinned:!0,canDelete:!0,reactions:[{emoji:`👍`,count:2,mine:!0,users:[`Davida Todorova`,`You`]}]},{id:`2`,user:{id:`ivana`,name:`Davida Todorova`},createdAt:L(1),contentType:`html`,content:`Done — refund issued via the original Visa ending 4242 for <span data-ref-id="order:ORD-A219" data-ref-kind="order">ORD-A219</span>. ETA Apr 14 per the gateway.`,references:[R(`order`,`ORD-A219`,`ORD-A219`)],attachments:[{id:`m1`,name:`refund-receipt.pdf`,url:`#`,size:184320,mimeType:`application/pdf`,status:`uploaded`}]},{id:`3`,user:{id:`stefan`,name:`Daniel Kowalski`},createdAt:L(.2),contentType:`text`,content:`Thanks for the quick turnaround. Booking #BKG-2026-0408 has been removed from the customer's active list.`,canDelete:!0}],B={resources:M,onResourceSearch:N,attachments:{onUpload:P,maxSize:8*1024*1024,maxFiles:4,accept:`.pdf,.png,.jpg,.jpeg,.txt,.csv`},onSubmit:()=>{},onDelete:()=>{},onReact:()=>{}};function V(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsxs)(i,{type:`secondary`,children:[(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<Comments<TUser, TMeta, TResource> context comments canComment canModerate composerPosition resources attachments onSubmit onDelete onUpdate onReact onReply onPinToggle strings emptySlot composerSlot headerSlot footerSlot renderItem renderAttachment renderReference />`}),`. Wire callbacks (`,(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`onSubmit`}),`, `,(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`onDelete`}),`, …), `,(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`resources`}),` (mentions/badges), and `,(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`attachments.onUpload`}),` at the call site. App-wide display defaults (composer position, max attachments) live in `,(0,S.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<UIProvider config={{ comments: { … } }}>`}),`.`]})})}function H(){let[e]=(0,T.useState)(z);return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,S.jsx)(E,{...B,context:F,comments:e,canComment:!0,canModerate:!0})})})}function U(){let[e]=(0,T.useState)(z);return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,S.jsx)(E,{...B,context:F,comments:e,canComment:!1})})})}function W(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,S.jsx)(E,{...B,context:F,comments:[],canComment:!0,strings:{title:`Internal notes`,empty:`Nothing logged yet.`,emptyHint:`Drop a note for whoever picks this thread up next.`,composerPlaceholder:`Add an internal note…`,composerSubmit:`Save note`}})})})}function G(){let[e]=(0,T.useState)(z);return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(`div`,{className:`w-full max-w-3xl`,children:(0,S.jsx)(E,{...B,context:F,comments:e.slice(0,2),canComment:!0,renderReference:e=>(0,S.jsxs)(`span`,{className:`inline-flex items-center gap-1 rounded bg-foreground/5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset ring-foreground/10`,children:[(0,S.jsx)(u,{className:`size-3`,"aria-hidden":!0}),e.label]},e.id)})})})}var K=`import {
+    Briefcase,
+    CalendarRange,
+    GitBranch,
+    Package,
+    User,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+    Comments,
+    type CommentAttachment,
+    type CommentAttachmentUploadContext,
+    type CommentData,
+    type CommentReference,
+    type CommentResourceType,
+    type CommentableContext,
+} from '@/components/features/comments';
+import { Text } from '@/components/typography';
+
+/* ------------------------------------------------------------------ */
+/*  Domain — resource catalogue                                        */
+/* ------------------------------------------------------------------ */
+
+type ResourceKind = 'user' | 'booking' | 'order' | 'sprint';
+
+const PEOPLE = [
+    { id: 'maria', label: 'Sarah Smitha', description: 'Head of Operations' },
+    { id: 'ivana', label: 'Davida Todorova', description: 'Refunds Specialist' },
+    { id: 'stefan', label: 'Daniel Kowalski', description: 'Customer' },
+    { id: 'kris', label: 'Kris Dineva', description: 'Engineering' },
+    { id: 'jordan', label: 'Jordan Jones', description: 'Finance' },
+];
+
+const BOOKINGS = [
+    { id: 'BKG-2026-0408', label: 'BKG-2026-0408', description: 'Daniel Kowalski · Apr 12 → Apr 14' },
+    { id: 'BKG-2026-0421', label: 'BKG-2026-0421', description: 'Sarah Smitha · Apr 19 → Apr 22' },
+    { id: 'BKG-2026-0510', label: 'BKG-2026-0510', description: 'Davida Todorova · May 04 → May 09' },
+];
+
+const ORDERS = [
+    { id: 'ORD-A219', label: 'ORD-A219', description: '€420.00 · Refund pending' },
+    { id: 'ORD-A284', label: 'ORD-A284', description: '€88.50 · Captured' },
+    { id: 'ORD-A301', label: 'ORD-A301', description: '€1,140.00 · Captured' },
+];
+
+const SPRINTS = [
+    { id: 'SPR-Q2-W3', label: 'Sprint Q2-W3', description: 'Refund flows' },
+    { id: 'SPR-Q2-W4', label: 'Sprint Q2-W4', description: 'Booking calendar' },
+];
+
+/**
+ * Resource registry. Each kind declares an icon, label, and trigger char
+ * (\`@\`, \`#\`, …). When the user types a trigger followed by characters,
+ * the picker auto-opens with that kind active and the typed needle as
+ * the query — results come from \`onResourceSearch\` (below).
+ *
+ * Kinds can also opt-in to per-kind \`search\` / \`suggestions\` for fully
+ * custom catalogues; here we use the global callback for everything.
+ */
+const RESOURCES: Partial<Record<ResourceKind, CommentResourceType<ResourceKind>>> = {
+    user: {
+        icon: User,
+        label: 'Person',
+        trigger: '@',
+        tone: 'info',
+        buildHref: (s) => \`/people/\${s.id}\`,
+    },
+    booking: {
+        icon: CalendarRange,
+        label: 'Booking',
+        trigger: '#',
+        tone: 'success',
+        buildHref: (s) => \`/bookings/\${s.id}\`,
+    },
+    order: {
+        icon: Package,
+        label: 'Order',
+        trigger: '$',
+        tone: 'warning',
+        buildHref: (s) => \`/orders/\${s.id}\`,
+    },
+    sprint: {
+        icon: GitBranch,
+        label: 'Sprint',
+        tone: 'secondary',
+        buildHref: (s) => \`/sprints/\${s.id}\`,
+    },
+};
+
+/**
+ * Single search callback that handles every resource kind. The composer
+ * passes both the current \`needle\` and the kind that owned the trigger
+ * char — consumers dispatch internally to whatever data source they want
+ * (REST, GraphQL, local cache, fuzzy search, …).
+ */
+function onResourceSearch(needle: string, kind: ResourceKind) {
+    const haystack: Array<{ id: string; label: string; description?: string }> =
+        kind === 'user'
+            ? PEOPLE
+            : kind === 'booking'
+              ? BOOKINGS
+              : kind === 'order'
+                ? ORDERS
+                : SPRINTS;
+    const q = needle.trim().toLowerCase();
+    const matches = q.length === 0
+        ? haystack
+        : haystack.filter(
+              (item) =>
+                  item.label.toLowerCase().includes(q) ||
+                  (item.description ?? '').toLowerCase().includes(q),
+          );
+    return matches.slice(0, 8);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mock attachment uploader                                           */
+/* ------------------------------------------------------------------ */
+
+async function mockUpload(
+    ctx: CommentAttachmentUploadContext,
+): Promise<CommentAttachment> {
+    const { file, onProgress, signal } = ctx;
+    return new Promise<CommentAttachment>((resolve, reject) => {
+        let progress = 0;
+        const tick = () => {
+            if (signal.aborted) {
+                reject(new Error('aborted'));
+                return;
+            }
+            progress = Math.min(100, progress + 18 + Math.random() * 14);
+            onProgress(progress);
+            if (progress >= 100) {
+                resolve({
+                    id: \`att-\${Math.random().toString(36).slice(2)}\`,
+                    name: file.name,
+                    size: file.size,
+                    mimeType: file.type,
+                    url: '#',
+                });
+                return;
+            }
+            window.setTimeout(tick, 220);
+        };
+        window.setTimeout(tick, 220);
+    });
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mock comments                                                      */
+/* ------------------------------------------------------------------ */
+
+const CONTEXT: CommentableContext = {
+    id: 'BKG-2026-0408',
+    type: 'booking',
+    moduleKey: 'bookings',
+};
+
+const NOW = Date.now();
+const HOURS = (n: number) => new Date(NOW - n * 60 * 60 * 1000).toISOString();
+
+const REF = (
+    kind: ResourceKind,
+    id: string,
+    label: string,
+): CommentReference<ResourceKind> => ({
+    id: \`\${kind}:\${id}\`,
+    kind,
+    label,
+    href: \`/\${kind}s/\${id}\`,
+});
+
+const INITIAL_COMMENTS: CommentData<
+    { id: string; name: string; avatar?: string },
+    unknown,
+    ResourceKind
+>[] = [
+    {
+        id: '1',
+        user: { id: 'maria', name: 'Sarah Smitha' },
+        createdAt: HOURS(2),
+        contentType: 'html',
+        content:
+            'Approving the refund for <span data-ref-id="user:stefan" data-ref-kind="user">@Daniel Kowalski</span> on <span data-ref-id="booking:BKG-2026-0408" data-ref-kind="booking">BKG-2026-0408</span> — please process before EOD so the payout window doesn\\'t shift.',
+        references: [
+            REF('user', 'stefan', 'Daniel Kowalski'),
+            REF('booking', 'BKG-2026-0408', 'BKG-2026-0408'),
+        ],
+        isPinned: true,
+        canDelete: true,
+        reactions: [
+            { emoji: '👍', count: 2, mine: true, users: ['Davida Todorova', 'You'] },
+        ],
+    },
+    {
+        id: '2',
+        user: { id: 'ivana', name: 'Davida Todorova' },
+        createdAt: HOURS(1),
+        contentType: 'html',
+        content:
+            'Done — refund issued via the original Visa ending 4242 for <span data-ref-id="order:ORD-A219" data-ref-kind="order">ORD-A219</span>. ETA Apr 14 per the gateway.',
+        references: [REF('order', 'ORD-A219', 'ORD-A219')],
+        attachments: [
+            {
+                id: 'm1',
+                name: 'refund-receipt.pdf',
+                url: '#',
+                size: 184_320,
+                mimeType: 'application/pdf',
+                status: 'uploaded',
+            },
+        ],
+    },
+    {
+        id: '3',
+        user: { id: 'stefan', name: 'Daniel Kowalski' },
+        createdAt: HOURS(0.2),
+        contentType: 'text',
+        content:
+            'Thanks for the quick turnaround. Booking #BKG-2026-0408 has been removed from the customer\\'s active list.',
+        canDelete: true,
+    },
+];
+
+/* ------------------------------------------------------------------ */
+/*  Shared per-mount wiring                                            */
+/* ------------------------------------------------------------------ */
+
+const commonProps = {
+	resources: RESOURCES,
+	onResourceSearch,
+	attachments: {
+		onUpload: mockUpload,
+		maxSize: 8 * 1024 * 1024,
+		maxFiles: 4,
+		accept: '.pdf,.png,.jpg,.jpeg,.txt,.csv',
+	},
+	onSubmit: () => {},
+	onDelete: () => {},
+	onReact: () => {},
+};
+
+/* ------------------------------------------------------------------ */
+/*  Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export function APISurface() {
+	return (
+		<>
+			<Text type="secondary">
+			                    <code className="rounded bg-muted px-1 py-0.5 text-xs">
+			                        {'<Comments<TUser, TMeta, TResource> context comments canComment canModerate composerPosition resources attachments onSubmit onDelete onUpdate onReact onReply onPinToggle strings emptySlot composerSlot headerSlot footerSlot renderItem renderAttachment renderReference />'}
+			                    </code>
+			                    . Wire callbacks (<code className="rounded bg-muted px-1 py-0.5 text-xs">onSubmit</code>, <code className="rounded bg-muted px-1 py-0.5 text-xs">onDelete</code>, …), <code className="rounded bg-muted px-1 py-0.5 text-xs">resources</code> (mentions/badges), and <code className="rounded bg-muted px-1 py-0.5 text-xs">attachments.onUpload</code> at the call site. App-wide display defaults (composer position, max attachments) live in <code className="rounded bg-muted px-1 py-0.5 text-xs">{'<UIProvider config={{ comments: { … } }}>'}</code>.
+			                </Text>
+		</>
+	);
+}
+
+export function CommentsExample() {
+	const [comments] = useState<
+	        CommentData<
+	            { id: string; name: string; avatar?: string },
+	            unknown,
+	            ResourceKind
+	        >[]
+	    >(INITIAL_COMMENTS);
+	return (
+		<>
+			<div className="w-full max-w-3xl">
+				<Comments
+			                    {...commonProps}
+			                    context={CONTEXT}
+			                    comments={comments}
+			                    canComment
+			                    canModerate
+			                />
+			</div>
+		</>
+	);
+}
+
+export function ReadOnly() {
+	const [comments] = useState<
+	        CommentData<
+	            { id: string; name: string; avatar?: string },
+	            unknown,
+	            ResourceKind
+	        >[]
+	    >(INITIAL_COMMENTS);
+	return (
+		<>
+			<div className="w-full max-w-3xl">
+				<Comments
+			                    {...commonProps}
+			                    context={CONTEXT}
+			                    comments={comments}
+			                    canComment={false}
+			                />
+			</div>
+		</>
+	);
+}
+
+export function EmptyStateCustomStrings() {
+	return (
+		<>
+			<div className="w-full max-w-3xl">
+				<Comments
+			                    {...commonProps}
+			                    context={CONTEXT}
+			                    comments={[]}
+			                    canComment
+			                    strings={{
+			                        title: 'Internal notes',
+			                        empty: 'Nothing logged yet.',
+			                        emptyHint: 'Drop a note for whoever picks this thread up next.',
+			                        composerPlaceholder: 'Add an internal note…',
+			                        composerSubmit: 'Save note',
+			                    }}
+			                />
+			</div>
+		</>
+	);
+}
+
+export function CustomReferenceRendering() {
+	const [comments] = useState<
+	        CommentData<
+	            { id: string; name: string; avatar?: string },
+	            unknown,
+	            ResourceKind
+	        >[]
+	    >(INITIAL_COMMENTS);
+	return (
+		<>
+			<div className="w-full max-w-3xl">
+				<Comments
+			                    {...commonProps}
+			                    context={CONTEXT}
+			                    comments={comments.slice(0, 2)}
+			                    canComment
+			                    renderReference={(ref) => (
+			                        <span
+			                            key={ref.id}
+			                            className="inline-flex items-center gap-1 rounded bg-foreground/5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset ring-foreground/10"
+			                        >
+			                            <Briefcase className="size-3" aria-hidden />
+			                            {ref.label}
+			                        </span>
+			                    )}
+			                />
+			</div>
+		</>
+	);
+}
+`;function q(e){let t={h4:`h4`,...e.components};return D||Y(`Examples`,!1),V||Y(`Examples.APISurface`,!0),H||Y(`Examples.CommentsExample`,!0),G||Y(`Examples.CustomReferenceRendering`,!0),W||Y(`Examples.EmptyStateCustomStrings`,!0),U||Y(`Examples.ReadOnly`,!0),(0,S.jsxs)(r,{title:`Features · Comments`,description:`Generic, framework-agnostic comments with rich-text composer (TipTap-backed), inline resource references (mentions, links, badges), attachment uploads with progress, and reactions. Every callback / registry flows as a direct prop — no provider.`,layer:`features`,status:`ready`,children:[(0,S.jsx)(a,{title:`Thread`,id:`thread`,children:(0,S.jsx)(d,{name:`CommentsExample`,source:K,children:(0,S.jsx)(H,{})})}),(0,S.jsxs)(a,{title:`States`,id:`states`,children:[(0,S.jsx)(d,{name:`ReadOnly`,source:K,children:(0,S.jsx)(U,{})}),(0,S.jsx)(d,{name:`EmptyStateCustomStrings`,source:K,children:(0,S.jsx)(W,{})})]}),(0,S.jsx)(a,{title:`Customization`,id:`customization`,children:(0,S.jsx)(d,{name:`CustomReferenceRendering`,source:K,children:(0,S.jsx)(G,{})})}),(0,S.jsx)(a,{title:`API surface`,id:`api-surface`,children:(0,S.jsx)(d,{name:`APISurface`,source:K,children:(0,S.jsx)(V,{})})}),(0,S.jsxs)(a,{title:`API`,id:`api`,children:[(0,S.jsx)(t.h4,{children:`Comments`}),(0,S.jsx)(y,{component:`Comments`})]})]})}function J(e={}){let{wrapper:t}=e.components||{};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(q,{...e})}):q(e)}function Y(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{J as default};

package/dist/showcase/assets/commerce-BtvCQH0C.js

@@ -0,0 +1,19 @@
+import{n as e,t}from"./section-DLqBJGPH.js";import{d as n}from"./index-DSBghWdd.js";var r=n();function i(n){let i={a:`a`,code:`code`,li:`li`,p:`p`,ul:`ul`,...n.components};return(0,r.jsx)(e,{title:`Composed · Commerce`,description:`Commerce component family for product, order, payment, fulfillment, promotion, and customer-detail surfaces. Each component has its own page and examples.`,layer:`composed`,status:`ready`,sourcePath:`src/components/composed/commerce`,children:(0,r.jsxs)(t,{title:`Component pages`,id:`component-pages`,children:[(0,r.jsx)(i.p,{children:`The Commerce family is split into focused component pages so each surface has
+its own examples, props table, and usage context.`}),(0,r.jsxs)(i.ul,{children:[`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-upcoming-booking`,children:`Upcoming booking`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-loyalty-points`,children:`Loyalty points`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-discount-stack`,children:`Discount stack`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-shipment-tracking`,children:`Shipment tracking`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-cart-summary`,children:`Cart summary`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-coupon-input`,children:`Coupon input`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-voucher-entry`,children:`Voucher entry`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-order-status`,children:`Order status`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-payment-method`,children:`Payment method`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-tax-breakdown`,children:`Tax breakdown`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-subscription-summary`,children:`Subscription summary`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-refund-status`,children:`Refund status`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-address-card`,children:`Address card`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-seo-listing`,children:`SEO listing`})}),`
+`,(0,r.jsx)(i.li,{children:(0,r.jsx)(i.a,{href:`#/composed/commerce-inventory-section`,children:`Inventory section`})}),`
+`]}),(0,r.jsxs)(i.p,{children:[`All components import from the same public package surface:
+`,(0,r.jsx)(i.code,{children:`admin-ui-starter-kit/composed/commerce`}),`.`]})]})})}function a(e={}){let{wrapper:t}=e.components||{};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(i,{...e})}):i(e)}export{a as default};

package/dist/showcase/assets/commerce-address-card-8PUGRwNW.js

@@ -0,0 +1,33 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-DLqBJGPH.js";import{t as a}from"./example-DDhaO2UY.js";import{t as o}from"./map-pin-CEcA7jdk.js";import{t as s}from"./star-Ccv6TKPm.js";import{t as c}from"./trash-2-DZ5FSAFb.js";import{N as l,d as u,l as d,n as f}from"./index-DSBghWdd.js";import{t as p}from"./props-table-CzpevabQ.js";import{t as m}from"./smart-card-BA097ZGN.js";var h=d(`pen`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}]]),g={defaultBadge:`Default`,edit:`Edit`,remove:`Remove`,makeDefault:`Make default`,shipping:`Shipping address`,billing:`Billing address`,pickup:`Pickup address`},_=u();function v({kind:e=`shipping`,name:t,line1:i,line2:a,city:u,region:d,postalCode:p,country:v,phone:y,isDefault:b=!1,onEdit:x,onRemove:S,onMakeDefault:C,className:w,strings:T}){let E=l(g,T),D={shipping:E.shipping,billing:E.billing,pickup:E.pickup},O=[u,d,p].filter(Boolean).join(`, `),k=[];return x&&k.push({id:`edit`,label:E.edit,icon:(0,_.jsx)(h,{className:`size-3.5`}),onClick:x}),C&&!b&&k.push({id:`make-default`,label:E.makeDefault,icon:(0,_.jsx)(s,{className:`size-3.5`}),onClick:C}),S&&k.push({id:`remove`,label:E.remove,icon:(0,_.jsx)(c,{className:`size-3.5`}),onClick:S}),(0,_.jsx)(m,{icon:(0,_.jsx)(o,{className:`size-4`}),title:D[e],titleSuffix:b?(0,_.jsx)(n,{variant:`primary`,children:E.defaultBadge}):null,actions:k.length>0?k:void 0,className:f(`address-card--component w-full`,w),children:(0,_.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,_.jsx)(r,{weight:`semibold`,children:t}),(0,_.jsx)(r,{children:i}),!!a&&(0,_.jsx)(r,{children:a}),!!O&&(0,_.jsx)(r,{children:O}),(0,_.jsx)(r,{type:`secondary`,children:v}),!!y&&(0,_.jsx)(r,{size:`xs`,type:`secondary`,className:`mt-1.5 tabular-nums`,children:y})]})})}v.displayName=`AddressCard`;var y=e({ShippingAndBilling:()=>b});function b(){return(0,_.jsxs)(`div`,{className:`grid w-full max-w-3xl gap-3 md:grid-cols-2`,children:[(0,_.jsx)(v,{kind:`shipping`,name:`Sarah Smitha`,line1:`ul. Vitosha 24, ap. 5`,city:`New York`,postalCode:`1000`,country:`USA`,phone:`+1 888 123 456`,isDefault:!0,onEdit:()=>{},onRemove:()=>{}}),(0,_.jsx)(v,{kind:`billing`,name:`Daniel Smith`,line1:`ul. Slavyanska 9`,line2:`floor 3`,city:`Los Angeles`,postalCode:`4000`,country:`USA`,onEdit:()=>{},onRemove:()=>{},onMakeDefault:()=>{}})]})}var x=`import { AddressCard } from '@/components/composed/commerce';
+
+export function ShippingAndBilling() {
+	return (
+		<div className="grid w-full max-w-3xl gap-3 md:grid-cols-2">
+			<AddressCard
+				kind="shipping"
+				name="Sarah Smitha"
+				line1="ul. Vitosha 24, ap. 5"
+				city="New York"
+				postalCode="1000"
+				country="USA"
+				phone="+1 888 123 456"
+				isDefault
+				onEdit={() => {}}
+				onRemove={() => {}}
+			/>
+			<AddressCard
+				kind="billing"
+				name="Daniel Smith"
+				line1="ul. Slavyanska 9"
+				line2="floor 3"
+				city="Los Angeles"
+				postalCode="4000"
+				country="USA"
+				onEdit={() => {}}
+				onRemove={() => {}}
+				onMakeDefault={() => {}}
+			/>
+		</div>
+	);
+}
+`;function S(e){return y||w(`Examples`,!1),b||w(`Examples.ShippingAndBilling`,!0),(0,_.jsxs)(t,{title:`Composed · Commerce · Address card`,description:`Shipping and billing address cards with edit, remove, default, and make-default callbacks.`,layer:`composed`,status:`ready`,sourcePath:`src/components/composed/commerce/address-card`,children:[(0,_.jsx)(i,{title:`Examples`,id:`examples`,children:(0,_.jsx)(a,{name:`ShippingAndBilling`,source:x,children:(0,_.jsx)(b,{})})}),(0,_.jsx)(i,{title:`API`,id:`api`,children:(0,_.jsx)(p,{component:`AddressCard`})})]})}function C(e={}){let{wrapper:t}=e.components||{};return t?(0,_.jsx)(t,{...e,children:(0,_.jsx)(S,{...e})}):S(e)}function w(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{C as default};

package/dist/showcase/assets/commerce-cart-summary-nrO5v1O8.js

@@ -0,0 +1,43 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,p as n,t as r}from"./section-DLqBJGPH.js";import{r as i,t as a}from"./example-DDhaO2UY.js";import{t as o}from"./shopping-bag-x4S32KGc.js";import{N as s,d as c,n as l}from"./index-DSBghWdd.js";import{t as u}from"./props-table-CzpevabQ.js";import{t as d}from"./smart-card-BA097ZGN.js";import{c as f,i as p,n as m,o as h,r as g,t as _,u as v}from"./item-D5xwkRvf.js";import{t as y}from"./separator-DeMF0eCd.js";import{t as b}from"./inline-stat-CufTTte_.js";var x={title:`Cart`,subtotal:`Subtotal`,tax:`Tax`,shipping:`Shipping`,discount:`Discount`,total:`Total`,checkout:`Checkout`},S=c(),C=e=>e.replace(/^[\s−-]+/,``),w=e=>[e.productTitle,e.title,e.name].find(e=>!!e?.trim())??e.id,T=e=>[e.imageUrl,e.imageSrc,e.src,e.url].find(e=>!!e?.trim()),E=e=>e.trim().split(/\s+/).map(e=>e[0]).join(``).slice(0,2).toUpperCase()||e.trim().slice(0,2).toUpperCase();function D({title:e}){return(0,S.jsx)(`div`,{"aria-hidden":`true`,className:`flex size-full items-center justify-center rounded-[inherit] bg-muted text-xs font-semibold text-muted-foreground ring-1 ring-border/60`,children:E(e)})}function O({items:e,subtotal:t,tax:r,shipping:a,discount:c,total:u,onCheckout:E,className:O,strings:k}){let A=s(x,k),j=!!(t||r||a||c);return(0,S.jsxs)(d,{icon:(0,S.jsx)(o,{className:`size-4`}),title:A.title,className:l(`cart-summary--component w-full`,O),children:[(0,S.jsx)(h,{children:e.map(e=>{let t=w(e),r=T(e);return(0,S.jsxs)(_,{className:`cart-summary--item`,children:[(0,S.jsx)(f,{variant:`image`,className:`cart-summary--item-media`,children:r?(0,S.jsx)(`img`,{src:r,alt:e.imageAlt??t}):(0,S.jsx)(D,{title:t})}),(0,S.jsxs)(g,{className:`cart-summary--item-content`,children:[(0,S.jsx)(v,{children:t}),!!e.variantTitle&&(0,S.jsx)(p,{clamp:1,children:e.variantTitle})]}),(0,S.jsx)(m,{className:`cart-summary--item-actions`,children:(0,S.jsxs)(`div`,{className:`flex shrink-0 flex-col items-end gap-0.5`,children:[(0,S.jsxs)(n,{tag:`span`,size:`xs`,type:`secondary`,className:`tabular-nums`,children:[`x`,e.qty]}),(0,S.jsx)(n,{tag:`span`,weight:`semibold`,className:`tabular-nums`,children:e.price})]})})]},e.id)})}),!!j&&(0,S.jsxs)(`div`,{className:`mt-3 space-y-1.5 rounded-lg bg-muted/30 px-3 py-2.5`,children:[!!t&&(0,S.jsx)(b,{label:A.subtotal,value:t,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!r&&(0,S.jsx)(b,{label:A.tax,value:r,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!a&&(0,S.jsx)(b,{label:A.shipping,value:a,mono:!0,valueClassName:`text-xs font-medium`,labelClassName:`text-xs`}),!!c&&(0,S.jsx)(b,{label:A.discount,value:`−${C(c)}`,mono:!0,labelClassName:`text-xs`,valueClassName:`text-xs font-semibold text-success`})]}),(0,S.jsx)(y,{className:`my-3`}),(0,S.jsx)(b,{label:A.total,value:u,mono:!0,labelClassName:`text-sm font-semibold`,valueClassName:`text-base font-bold`}),!!E&&(0,S.jsx)(i,{onClick:E,fullWidth:!0,className:`mt-4`,children:A.checkout})]})}O.displayName=`CartSummaryCard`;var k=e({CartSummary:()=>M}),A=`data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%09%3Crect%20width%3D%2296%22%20height%3D%2296%22%20rx%3D%2218%22%20fill%3D%22%23edf1e9%22%2F%3E%0A%09%3Crect%20x%3D%2234%22%20y%3D%2220%22%20width%3D%2228%22%20height%3D%2258%22%20rx%3D%229%22%20fill%3D%22%2353624d%22%2F%3E%0A%09%3Crect%20x%3D%2239%22%20y%3D%2212%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%224%22%20fill%3D%22%23303b2e%22%2F%3E%0A%09%3Crect%20x%3D%2239%22%20y%3D%2239%22%20width%3D%2218%22%20height%3D%2222%22%20rx%3D%224%22%20fill%3D%22%23f7f0d7%22%2F%3E%0A%3C%2Fsvg%3E%0A`,j=`data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%09%3Crect%20width%3D%2296%22%20height%3D%2296%22%20rx%3D%2218%22%20fill%3D%22%23eef1f5%22%2F%3E%0A%09%3Cellipse%20cx%3D%2249%22%20cy%3D%2273%22%20rx%3D%2229%22%20ry%3D%227%22%20fill%3D%22%23d6dde6%22%2F%3E%0A%09%3Crect%20x%3D%2224%22%20y%3D%2238%22%20width%3D%2232%22%20height%3D%2230%22%20rx%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%0A%09%3Crect%20x%3D%2230%22%20y%3D%2230%22%20width%3D%2232%22%20height%3D%2230%22%20rx%3D%228%22%20fill%3D%22%23dfe6ef%22%2F%3E%0A%09%3Crect%20x%3D%2255%22%20y%3D%2224%22%20width%3D%2214%22%20height%3D%2244%22%20rx%3D%227%22%20fill%3D%22%23697586%22%2F%3E%0A%09%3Crect%20x%3D%2258%22%20y%3D%2217%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%223%22%20fill%3D%22%23485467%22%2F%3E%0A%09%3Ccircle%20cx%3D%2235%22%20cy%3D%2266%22%20r%3D%229%22%20fill%3D%22%23cad6df%22%2F%3E%0A%3C%2Fsvg%3E%0A`;function M(){return(0,S.jsx)(`div`,{className:`w-full max-w-md`,children:(0,S.jsx)(O,{items:[{id:`1`,name:`Estate olive oil`,variantTitle:`500 ml bottle`,qty:2,price:`48 USD`,src:A},{id:`2`,productTitle:`Spa day voucher`,variantTitle:`Weekend package`,qty:1,price:`180 USD`,url:j},{id:`3`,name:`Gift wrap`,variantTitle:`Matte white box`,qty:1,price:`15 USD`}],subtotal:`243 USD`,tax:`48.60 USD`,shipping:`0 USD`,discount:`25 USD`,total:`266.60 USD`,onCheckout:()=>{}})})}var N=`import { CartSummaryCard } from '@/components/composed/commerce';
+
+const bottleThumb = \`data:image/svg+xml;utf8,\${encodeURIComponent(\`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#edf1e9"/>
+	<rect x="34" y="20" width="28" height="58" rx="9" fill="#53624d"/>
+	<rect x="39" y="12" width="18" height="13" rx="4" fill="#303b2e"/>
+	<rect x="39" y="39" width="18" height="22" rx="4" fill="#f7f0d7"/>
+</svg>
+\`)}\`;
+
+const voucherThumb = \`data:image/svg+xml;utf8,\${encodeURIComponent(\`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#eef1f5"/>
+	<ellipse cx="49" cy="73" rx="29" ry="7" fill="#d6dde6"/>
+	<rect x="24" y="38" width="32" height="30" rx="8" fill="#ffffff"/>
+	<rect x="30" y="30" width="32" height="30" rx="8" fill="#dfe6ef"/>
+	<rect x="55" y="24" width="14" height="44" rx="7" fill="#697586"/>
+	<rect x="58" y="17" width="8" height="9" rx="3" fill="#485467"/>
+	<circle cx="35" cy="66" r="9" fill="#cad6df"/>
+</svg>
+\`)}\`;
+
+export function CartSummary() {
+	return (
+		<div className="w-full max-w-md">
+			<CartSummaryCard
+				items={[
+					{ id: '1', name: 'Estate olive oil', variantTitle: '500 ml bottle', qty: 2, price: '48 USD', src: bottleThumb },
+					{ id: '2', productTitle: 'Spa day voucher', variantTitle: 'Weekend package', qty: 1, price: '180 USD', url: voucherThumb },
+					{ id: '3', name: 'Gift wrap', variantTitle: 'Matte white box', qty: 1, price: '15 USD' },
+				]}
+				subtotal="243 USD"
+				tax="48.60 USD"
+				shipping="0 USD"
+				discount="25 USD"
+				total="266.60 USD"
+				onCheckout={() => {}}
+			/>
+		</div>
+	);
+}
+`;function P(e){return k||I(`Examples`,!1),M||I(`Examples.CartSummary`,!0),(0,S.jsxs)(t,{title:`Composed · Commerce · Cart summary`,description:`Checkout summary card with line items, thumbnails, totals, discounts, tax, and checkout callback.`,layer:`composed`,status:`ready`,sourcePath:`src/components/composed/commerce/cart-summary`,children:[(0,S.jsx)(r,{title:`Examples`,id:`examples`,children:(0,S.jsx)(a,{name:`CartSummary`,source:N,children:(0,S.jsx)(M,{})})}),(0,S.jsx)(r,{title:`API`,id:`api`,children:(0,S.jsx)(u,{component:`CartSummaryCard`})})]})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(P,{...e})}):P(e)}function I(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{F as default};

package/dist/showcase/assets/commerce-coupon-input-C-sT1FNq.js

@@ -0,0 +1,11 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,p as i,t as a}from"./section-DLqBJGPH.js";import{Or as o,r as s,t as c}from"./example-DDhaO2UY.js";import{t as l}from"./sparkles-a2TsduRv.js";import{t as u}from"./x-DVQ0XpIT.js";import{N as d,d as f,l as p,n as m}from"./index-DSBghWdd.js";import{t as h}from"./props-table-CzpevabQ.js";import{t as g}from"./icon-badge-CrSkFExw.js";import{t as _}from"./smart-card-BA097ZGN.js";import{a as v,c as y,i as b,n as x,r as S,t as C,u as w}from"./item-D5xwkRvf.js";import{t as T}from"./input-Bq9vs-9_.js";var E=p(`ticket-percent`,[[`path`,{d:`M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z`,key:`1l48ns`}],[`path`,{d:`M9 9h.01`,key:`1q5me6`}],[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`M15 15h.01`,key:`lqbp3k`}]]),D={title:`Have a code?`,placeholder:`Enter coupon code`,apply:`Apply`,remove:`Remove`,applied:`Applied`,invalid:`That code is not valid`},O=t(n(),1),k=f(),A=e=>e.replace(/^[\s−-]+/,``),j=e=>e.toUpperCase();function M({appliedCode:e,appliedDiscount:t,error:n,onApply:r,onRemove:a,loading:c,className:f,strings:p}){let h=d(D,p),[M,N]=(0,O.useState)(``),P=M.trim();return e?(0,k.jsx)(_,{icon:(0,k.jsx)(E,{className:`size-4`}),title:h.title,className:m(`coupon-input--component w-full`,f),children:(0,k.jsxs)(C,{size:`small`,variant:`muted`,className:`items-center gap-x-2.5 gap-y-1.5 border border-success/30 bg-success/8`,children:[(0,k.jsx)(y,{children:(0,k.jsx)(g,{icon:o,tone:`success`,size:`default`,className:`ring-1 ring-success/20`})}),(0,k.jsxs)(S,{className:`min-w-0`,children:[(0,k.jsx)(w,{className:`max-w-full font-mono tracking-wider`,children:e}),(0,k.jsx)(b,{className:`uppercase tracking-wide`,clamp:1,children:h.applied})]}),(0,k.jsxs)(v,{className:`border-t border-success/15 pt-1`,children:[(0,k.jsx)(`span`,{}),(0,k.jsxs)(x,{className:`shrink-0 gap-1.5`,children:[!!t&&(0,k.jsxs)(i,{tag:`span`,size:`xs`,weight:`semibold`,type:`success`,className:`tabular-nums shrink-0`,children:[`−`,A(t)]}),!!a&&(0,k.jsx)(s,{type:`button`,variant:`error`,buttonStyle:`ghost`,size:`icon-small`,onClick:a,"aria-label":h.remove,className:`size-7 shrink-0 text-muted-foreground hover:text-destructive`,children:(0,k.jsx)(u,{className:`size-3.5`})})]})]})]})}):(0,k.jsx)(_,{icon:(0,k.jsx)(E,{className:`size-4`}),title:h.title,className:m(`coupon-input--component w-full`,f),children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,k.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,k.jsx)(`div`,{className:`min-w-44 flex-1`,children:(0,k.jsx)(T,{value:M,onChange:e=>N(j(e.target.value)),placeholder:h.placeholder,startIcon:l,autoCapitalize:`characters`,spellCheck:!1,className:`font-mono`,invalid:!!n})}),(0,k.jsx)(s,{size:`default`,onClick:()=>r?.(P),loading:c,disabled:!P,className:`shrink-0`,children:h.apply})]}),!!n&&(0,k.jsx)(i,{size:`xs`,type:`error`,children:n||h.invalid})]})})}M.displayName=`CouponInputCard`;var N=e({EmptyAndApplied:()=>P});function P(){return(0,k.jsxs)(`div`,{className:`grid w-full max-w-4xl gap-4 md:grid-cols-2`,children:[(0,k.jsx)(M,{onApply:()=>{}}),(0,k.jsx)(M,{appliedCode:`SPRING2026`,appliedDiscount:`88.40 USD`,onRemove:()=>{}})]})}var F=`import { CouponInputCard } from '@/components/composed/commerce';
+
+export function EmptyAndApplied() {
+	return (
+		<div className="grid w-full max-w-4xl gap-4 md:grid-cols-2">
+			<CouponInputCard onApply={() => {}} />
+			<CouponInputCard appliedCode="SPRING2026" appliedDiscount="88.40 USD" onRemove={() => {}} />
+		</div>
+	);
+}
+`;function I(e){return N||R(`Examples`,!1),P||R(`Examples.EmptyAndApplied`,!0),(0,k.jsxs)(r,{title:`Composed · Commerce · Coupon input`,description:`Coupon input card with empty and applied states plus apply/remove callbacks.`,layer:`composed`,status:`ready`,sourcePath:`src/components/composed/commerce/coupon-input`,children:[(0,k.jsx)(a,{title:`Examples`,id:`examples`,children:(0,k.jsx)(c,{name:`EmptyAndApplied`,source:F,children:(0,k.jsx)(P,{})})}),(0,k.jsx)(a,{title:`API`,id:`api`,children:(0,k.jsx)(h,{component:`CouponInputCard`})})]})}function L(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(I,{...e})}):I(e)}function R(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default};