admin-ui-starter-kit 0.1.0 → 0.1.2

package/dist/showcase/assets/event-calendar-D-jGrrZS.js

@@ -0,0 +1,138 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{a as n,i as r,n as i,o as a,r as o,s}from"./calendar-B1zW0q6I.js";import{m as c,t as l}from"./format-D_ETCyg4.js";import{t as u}from"./startOfDay-zJBpxLuW.js";import{t as d}from"./isToday-F0CS28oK.js";import{Dr as f,cr as p,gr as m,hr as h,r as g,sr as _,t as v,vr as y}from"./example-6phCHGsN.js";import{t as ee}from"./chevron-left-T7dHNxYM.js";import{t as b}from"./chevron-right-D_EcqHpT.js";import{t as te}from"./heart-CEMKbRaZ.js";import{t as ne}from"./sparkles-CF9P5Tqh.js";import{t as re}from"./star-NsPNO9gR.js";import{a as x,b as S,d as C,f as w,g as ie,k as T,l as E,p as D,u as O,y as k}from"./index-B4ubXfly.js";import{a as A,i as j,n as ae,o as oe,t as M}from"./select-BoWQDtUf.js";import{t as se}from"./props-table-uDY4eIzt.js";import{t as N}from"./month-year-picker-DTDebPqf.js";function P(e,t){let n=k(e,t?.in).getDay();return n===0||n===6}function F(e,t){let{start:r,end:i}=n(t?.in,e),a=+r>+i,o=a?+r:+i,s=a?i:r;s.setHours(0,0,0,0);let c=t?.step??1;if(!c)return[];c<0&&(c=-c,a=!a);let l=[];for(;+s<=o;)l.push(S(r,s)),s.setDate(s.getDate()+c),s.setHours(0,0,0,0);return a?l.reverse():l}function ce(e,t,n){let[r,i]=ie(n?.in,e,t);return+c(r,n)==+c(i,n)}function le(e,t,n){return s(e,-t,n)}function ue(e,t,n){return a(e,-t,n)}var de={lessThanXSeconds:{one:`по-малко от секунда`,other:`по-малко от {{count}} секунди`},xSeconds:{one:`1 секунда`,other:`{{count}} секунди`},halfAMinute:`половин минута`,lessThanXMinutes:{one:`по-малко от минута`,other:`по-малко от {{count}} минути`},xMinutes:{one:`1 минута`,other:`{{count}} минути`},aboutXHours:{one:`около час`,other:`около {{count}} часа`},xHours:{one:`1 час`,other:`{{count}} часа`},xDays:{one:`1 ден`,other:`{{count}} дни`},aboutXWeeks:{one:`около седмица`,other:`около {{count}} седмици`},xWeeks:{one:`1 седмица`,other:`{{count}} седмици`},aboutXMonths:{one:`около месец`,other:`около {{count}} месеца`},xMonths:{one:`1 месец`,other:`{{count}} месеца`},aboutXYears:{one:`около година`,other:`около {{count}} години`},xYears:{one:`1 година`,other:`{{count}} години`},overXYears:{one:`над година`,other:`над {{count}} години`},almostXYears:{one:`почти година`,other:`почти {{count}} години`}},I=(e,t,n)=>{let r,i=de[e];return r=typeof i==`string`?i:t===1?i.one:i.other.replace(`{{count}}`,String(t)),n?.addSuffix?n.comparison&&n.comparison>0?`след `+r:`преди `+r:r},fe={date:w({formats:{full:`EEEE, dd MMMM yyyy`,long:`dd MMMM yyyy`,medium:`dd MMM yyyy`,short:`dd.MM.yyyy`},defaultWidth:`full`}),time:w({formats:{full:`HH:mm:ss zzzz`,long:`HH:mm:ss z`,medium:`HH:mm:ss`,short:`H:mm`},defaultWidth:`full`}),dateTime:w({formats:{any:`{{date}} {{time}}`},defaultWidth:`any`})},L=[`неделя`,`понеделник`,`вторник`,`сряда`,`четвъртък`,`петък`,`събота`];function pe(e){let t=L[e];switch(e){case 0:case 3:case 6:return`'миналата `+t+` в' p`;case 1:case 2:case 4:case 5:return`'миналия `+t+` в' p`}}function me(e){let t=L[e];return e===2?`'във `+t+` в' p`:`'в `+t+` в' p`}function he(e){let t=L[e];switch(e){case 0:case 3:case 6:return`'следващата `+t+` в' p`;case 1:case 2:case 4:case 5:return`'следващия `+t+` в' p`}}var ge={lastWeek:(e,t,n)=>{let r=k(e),i=r.getDay();return ce(r,t,n)?me(i):pe(i)},yesterday:`'вчера в' p`,today:`'днес в' p`,tomorrow:`'утре в' p`,nextWeek:(e,t,n)=>{let r=k(e),i=r.getDay();return ce(r,t,n)?me(i):he(i)},other:`P`},_e=(e,t,n,r)=>{let i=ge[e];return typeof i==`function`?i(t,n,r):i},ve={narrow:[`пр.н.е.`,`н.е.`],abbreviated:[`преди н. е.`,`н. е.`],wide:[`преди новата ера`,`новата ера`]},ye={narrow:[`1`,`2`,`3`,`4`],abbreviated:[`1-во тримес.`,`2-ро тримес.`,`3-то тримес.`,`4-то тримес.`],wide:[`1-во тримесечие`,`2-ро тримесечие`,`3-то тримесечие`,`4-то тримесечие`]},be={abbreviated:[`яну`,`фев`,`мар`,`апр`,`май`,`юни`,`юли`,`авг`,`сеп`,`окт`,`ное`,`дек`],wide:[`януари`,`февруари`,`март`,`април`,`май`,`юни`,`юли`,`август`,`септември`,`октомври`,`ноември`,`декември`]},xe={narrow:[`Н`,`П`,`В`,`С`,`Ч`,`П`,`С`],short:[`нд`,`пн`,`вт`,`ср`,`чт`,`пт`,`сб`],abbreviated:[`нед`,`пон`,`вто`,`сря`,`чет`,`пет`,`съб`],wide:[`неделя`,`понеделник`,`вторник`,`сряда`,`четвъртък`,`петък`,`събота`]},Se={wide:{am:`преди обяд`,pm:`след обяд`,midnight:`в полунощ`,noon:`на обяд`,morning:`сутринта`,afternoon:`следобед`,evening:`вечерта`,night:`през нощта`}};function Ce(e){return e===`year`||e===`week`||e===`minute`||e===`second`}function we(e){return e===`quarter`}function R(e,t,n,r,i){let a=we(t)?i:Ce(t)?r:n;return e+`-`+a}var Te={code:`bg`,formatDistance:I,formatLong:fe,formatRelative:_e,localize:{ordinalNumber:(e,t)=>{let n=Number(e),r=t?.unit;if(n===0)return R(0,r,`ев`,`ева`,`ево`);if(n%1e3==0)return R(n,r,`ен`,`на`,`но`);if(n%100==0)return R(n,r,`тен`,`тна`,`тно`);let i=n%100;if(i>20||i<10)switch(i%10){case 1:return R(n,r,`ви`,`ва`,`во`);case 2:return R(n,r,`ри`,`ра`,`ро`);case 7:case 8:return R(n,r,`ми`,`ма`,`мо`)}return R(n,r,`ти`,`та`,`то`)},era:C({values:ve,defaultWidth:`wide`}),quarter:C({values:ye,defaultWidth:`wide`,argumentCallback:e=>e-1}),month:C({values:be,defaultWidth:`wide`}),day:C({values:xe,defaultWidth:`wide`}),dayPeriod:C({values:Se,defaultWidth:`wide`})},match:{ordinalNumber:E({matchPattern:/^(\d+)(-?[врмт][аи]|-?т?(ен|на)|-?(ев|ева))?/i,parsePattern:/\d+/i,valueCallback:e=>parseInt(e,10)}),era:O({matchPatterns:{narrow:/^((пр)?н\.?\s?е\.?)/i,abbreviated:/^((пр)?н\.?\s?е\.?)/i,wide:/^(преди новата ера|новата ера|нова ера)/i},defaultMatchWidth:`wide`,parsePatterns:{any:[/^п/i,/^н/i]},defaultParseWidth:`any`}),quarter:O({matchPatterns:{narrow:/^[1234]/i,abbreviated:/^[1234](-?[врт]?o?)? тримес.?/i,wide:/^[1234](-?[врт]?о?)? тримесечие/i},defaultMatchWidth:`wide`,parsePatterns:{any:[/1/i,/2/i,/3/i,/4/i]},defaultParseWidth:`any`,valueCallback:e=>e+1}),month:O({matchPatterns:{abbreviated:/^(яну|фев|мар|апр|май|юни|юли|авг|сеп|окт|ное|дек)/i,wide:/^(януари|февруари|март|април|май|юни|юли|август|септември|октомври|ноември|декември)/i},defaultMatchWidth:`wide`,parsePatterns:{any:[/^я/i,/^ф/i,/^мар/i,/^ап/i,/^май/i,/^юн/i,/^юл/i,/^ав/i,/^се/i,/^окт/i,/^но/i,/^де/i]},defaultParseWidth:`any`}),day:O({matchPatterns:{narrow:/^[нпвсч]/i,short:/^(нд|пн|вт|ср|чт|пт|сб)/i,abbreviated:/^(нед|пон|вто|сря|чет|пет|съб)/i,wide:/^(неделя|понеделник|вторник|сряда|четвъртък|петък|събота)/i},defaultMatchWidth:`wide`,parsePatterns:{narrow:[/^н/i,/^п/i,/^в/i,/^с/i,/^ч/i,/^п/i,/^с/i],any:[/^н[ед]/i,/^п[он]/i,/^вт/i,/^ср/i,/^ч[ет]/i,/^п[ет]/i,/^с[ъб]/i]},defaultParseWidth:`any`}),dayPeriod:O({matchPatterns:{any:/^(преди о|след о|в по|на о|през|веч|сут|следо)/i},defaultMatchWidth:`any`,parsePatterns:{any:{am:/^преди о/i,pm:/^след о/i,midnight:/^в пол/i,noon:/^на об/i,morning:/^сут/i,afternoon:/^следо/i,evening:/^веч/i,night:/^през н/i}},defaultParseWidth:`any`})},options:{weekStartsOn:1,firstWeekContainsDate:1}},z=t(T(),1),B=x(),V={gray:`bg-gray-500`,red:`bg-red-500`,orange:`bg-orange-500`,amber:`bg-amber-500`,yellow:`bg-yellow-500`,green:`bg-green-500`,blue:`bg-blue-500`,purple:`bg-purple-500`};function H(e){if(!e)return`gray`;if(e.colorToken)return e.colorToken;let t=e.color??``;return t.includes(`orange`)?`orange`:t.includes(`yellow`)?`yellow`:t.includes(`amber`)?`amber`:t.includes(`purple`)?`purple`:t.includes(`green`)?`green`:t.includes(`blue`)?`blue`:t.includes(`red`)?`red`:`gray`}var U={today:`Today`,previous:`Previous`,next:`Next`,loading:`Loading…`,booking:`booking`,bookings:`bookings`,viewMode:{month:`Month`,week:`Week`,agenda:`Agenda`},weekdaysShort:[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`]};function Ee({event:e,category:t,compact:n=!1,onClick:r}){let i=V[H(t)],a=e.allDay?null:l(e.startDate,`HH:mm`),o=e.metadata?.calendar_cell_title,s=typeof o==`string`&&o.trim()!==``?o:e.title;return(0,B.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),r?.()},className:y(`event-calendar-event-badge--component`,`group/event flex w-full min-w-0 items-center gap-1 rounded-md border border-border/60 bg-card px-1.5`,`text-left transition-colors hover:bg-accent/50`,n?`h-5`:`h-6`),title:typeof s==`string`?s:void 0,children:[(0,B.jsx)(`span`,{"aria-hidden":`true`,className:y(`size-1.5 shrink-0 rounded-full`,i)}),(0,B.jsx)(m,{tag:`span`,size:`xxs`,weight:`medium`,className:`min-w-0 flex-1 truncate`,children:s}),!!a&&(0,B.jsx)(m,{tag:`span`,size:`xxs`,type:`secondary`,className:`shrink-0 whitespace-nowrap tabular-nums`,children:a}),void 0]})}Ee.displayName=`EventCalendarEventBadge`;function De(e,t,n,a={}){let{weekStartsOn:s=1,showWeekends:l=!0,visibleCategories:f}=a;return(0,z.useMemo)(()=>{let a=r(t),p=D(t),m,h;n===`month`?(m=c(a,{weekStartsOn:s}),h=o(p,{weekStartsOn:s})):n===`week`?(m=c(t,{weekStartsOn:s}),h=o(t,{weekStartsOn:s})):(m=a,h=p);let g=F({start:m,end:h}),_=f&&f.length>0?e.filter(e=>f.includes(e.category)):e,v=new Map;return _.forEach(e=>{let t=u(e.startDate);if(Number.isNaN(t.getTime()))return;let n=t;if(e.endDate&&!Number.isNaN(e.endDate.getTime())){let r=u(e.endDate);!Number.isNaN(r.getTime())&&r.getTime()>=t.getTime()&&(n=r)}F({start:t,end:n}).forEach(t=>{let n=t.toISOString().split(`T`)[0];v.has(n)||v.set(n,[]),v.get(n).push(e)})}),g.filter(e=>l||!P(e)).map(e=>{let n=e.toISOString().split(`T`)[0],r=[...v.get(n)||[]].sort((e,t)=>e.allDay&&!t.allDay?-1:!e.allDay&&t.allDay?1:e.startDate.getTime()-t.startDate.getTime());return{date:e,isCurrentMonth:i(e,t),isToday:d(e),isWeekend:P(e),events:r,eventCount:r.length,hasMultipleEvents:r.length>1}})},[e,t,n,s,l,f])}function Oe(e,t){return e.find(e=>e.id===t)}function ke({data:e,categories:t,maxEvents:n=3,onClick:r,compact:i=!1,strings:a,renderEvent:o}){let s={booking:a?.booking??U.booking,bookings:a?.bookings??U.bookings},{date:c,isCurrentMonth:l,isToday:u,isWeekend:d,events:f,eventCount:p}=e,h=f.slice(0,n),g=Math.max(0,p-n);return(0,B.jsx)(`div`,{className:y(`event-calendar-day-cell--component`,`p-0 relative w-full border-r border-b border-border last:border-r-0 [&:nth-child(7n)]:border-r-0`),children:(0,B.jsxs)(`div`,{role:`button`,tabIndex:0,onClick:r,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),r())},className:y(`relative w-full min-h-24 p-2 transition-colors`,`hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:z-10`,`flex flex-col items-start gap-1`,!l&&`text-muted-foreground opacity-50`,u&&`h-full bg-accent text-accent-foreground`,i&&`min-h-20 p-1`),"aria-label":c.toDateString(),"data-date":c.toISOString(),"data-today":u,"data-weekend":d,"data-current-month":l,children:[(0,B.jsx)(m,{className:y(`font-normal leading-none`,u&&`font-semibold`,!l&&`text-muted-foreground`,i&&`text-xs`),children:c.getDate()}),(0,B.jsxs)(`div`,{className:`w-full space-y-0.5`,children:[h.map(n=>{let a=Oe(t,n.category);return o?(0,B.jsx)(`div`,{children:o(n,a)},n.id):(0,B.jsx)(Ee,{event:n,category:a,compact:i||e.hasMultipleEvents,onClick:()=>r()},n.id)}),g>0&&(0,B.jsxs)(`div`,{className:`flex items-center gap-1 py-0.5 px-2`,children:[(0,B.jsx)(`div`,{className:`flex items-center -space-x-1`,children:t.slice(0,3).map((e,t)=>(0,B.jsx)(`span`,{className:y(`h-1.5 w-1.5 rounded-full border border-background`,V[H(e)])},e.id||t))}),(0,B.jsxs)(m,{size:`xs`,type:`secondary`,className:`font-medium text-xxs`,children:[g,` `,g===1?s.booking:s.bookings]})]})]})]})})}ke.displayName=`EventCalendarDayCell`;function Ae(e){switch(e){case`destructive`:return{variant:`error`,buttonStyle:`solid`};case`outline`:return{variant:`secondary`,buttonStyle:`outline`};case`secondary`:return{variant:`secondary`,buttonStyle:`solid`};case`ghost`:return{variant:`secondary`,buttonStyle:`ghost`};default:return{variant:`primary`,buttonStyle:`solid`}}}var je=(e,t)=>{if(!e)return null;if(e.element)return(0,B.jsx)(`div`,{className:`event-calendar-header--component`,children:e.element},e.id||t);let n=e.icon,r=e.id||`action-${t}`,i=()=>{e.onClick?.()},a=Ae(e.variant);return(0,B.jsxs)(g,{variant:a.variant,buttonStyle:a.buttonStyle,onClick:i,className:y(`h-8 gap-2`,a.className),disabled:!!e.disabled,children:[!!n&&(0,B.jsx)(n,{className:`h-4 w-4`}),e.label]},r)};function Me({currentDate:e,viewMode:t,displayLabel:n,onPrevious:r,onNext:i,onToday:a,onViewModeChange:o,onDateChange:s,locale:c,actions:l,strings:u,rangeMode:d=`date`,minDate:f,maxDate:p,prevDisabled:m=!1,nextDisabled:_=!1}){let v={today:u?.today??U.today,previous:u?.previous??U.previous,next:u?.next??U.next,viewMode:{...U.viewMode,...u?.viewMode??{}}},y=(0,z.useMemo)(()=>(l||[]).filter(e=>e.isVisible!==!1),[l]);return(0,B.jsxs)(`div`,{className:`flex items-center justify-between gap-4 mb-4`,children:[(0,B.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,B.jsx)(h,{tag:`h3`,className:`text-lg font-semibold`,children:n}),(0,B.jsx)(N,{value:{month:e.getMonth(),year:e.getFullYear()},onChange:e=>{e.date&&s?.(e.date)},fromYear:f?.getFullYear(),toYear:p?.getFullYear(),locale:c})]}),(0,B.jsxs)(`div`,{className:`flex items-center gap-2`,children:[y.length>0&&(0,B.jsxs)(B.Fragment,{children:[y.map((e,t)=>je(e,t)),(0,B.jsx)(`div`,{className:`h-6 w-px bg-border mx-1`})]}),(0,B.jsx)(g,{variant:`secondary`,buttonStyle:`outline`,onClick:a,className:`hidden sm:inline-flex`,children:v.today}),(0,B.jsxs)(`div`,{className:`flex items-center border border-border rounded-md`,children:[(0,B.jsx)(g,{variant:`secondary`,buttonStyle:`ghost`,size:`icon`,onClick:r,disabled:m,className:`h-8 w-8 rounded-r-none border-r`,"aria-label":v.previous,children:(0,B.jsx)(ee,{className:`h-4 w-4`})}),(0,B.jsx)(g,{variant:`secondary`,buttonStyle:`ghost`,size:`icon`,onClick:i,disabled:_,className:`h-8 w-8 rounded-l-none`,"aria-label":v.next,children:(0,B.jsx)(b,{className:`h-4 w-4`})})]}),!!o&&(0,B.jsxs)(M,{value:t,onValueChange:e=>{e&&o(e)},children:[(0,B.jsx)(A,{className:`w-28 h-8`,children:(0,B.jsx)(oe,{})}),(0,B.jsxs)(ae,{children:[(0,B.jsx)(j,{value:`month`,children:v.viewMode.month}),(0,B.jsx)(j,{value:`week`,children:v.viewMode.week}),(0,B.jsx)(j,{value:`agenda`,children:v.viewMode.agenda})]})]})]})]})}Me.displayName=`EventCalendarHeader`;var Ne={gray:{badgeBg:`bg-gray-500/10`,border:`border-gray-500/40`,swatch:`bg-gray-500`},red:{badgeBg:`bg-red-500/10`,border:`border-red-500/40`,swatch:`bg-red-500`},orange:{badgeBg:`bg-orange-500/10`,border:`border-orange-500/40`,swatch:`bg-orange-500`},amber:{badgeBg:`bg-amber-500/10`,border:`border-amber-500/40`,swatch:`bg-amber-500`},yellow:{badgeBg:`bg-yellow-500/10`,border:`border-yellow-500/40`,swatch:`bg-yellow-500`},green:{badgeBg:`bg-green-500/10`,border:`border-green-500/40`,swatch:`bg-green-500`},blue:{badgeBg:`bg-blue-500/10`,border:`border-blue-500/40`,swatch:`bg-blue-500`},purple:{badgeBg:`bg-purple-500/10`,border:`border-purple-500/40`,swatch:`bg-purple-500`}};function Pe(e){let t=H(e);return{dot:V[t],...Ne[t]}}function Fe({categories:e,visibleCategories:t,onToggleCategory:n,enableFiltering:r=!1}){let i=!t||t.length===0,a=e=>r?i||t?.includes(e):!0,o=e=>{!r||!n||n(e)};return e.length===0?null:(0,B.jsx)(`div`,{role:r?`group`:void 0,"aria-label":r?`Filter event categories`:void 0,className:y(`event-calendar-legend--component`,`flex flex-wrap items-center gap-1.5 py-1`),children:e.map(e=>{let t=a(e.id),n=Pe(e),i=e.icon,s=`group inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors`,c=(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`span`,{className:y(`inline-block size-2 rounded-full`,t?n.swatch:`bg-muted-foreground/40`),"aria-hidden":`true`}),!!i&&(0,B.jsx)(i,{className:y(`size-3`,t?`text-foreground`:`text-muted-foreground`),"aria-hidden":`true`}),(0,B.jsx)(m,{tag:`span`,size:`xs`,weight:`medium`,type:t?`main`:`secondary`,children:e.label})]});return r?(0,B.jsx)(`button`,{type:`button`,"aria-pressed":t,onClick:()=>o(e.id),className:y(s,`cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,t?`border-border bg-card hover:bg-muted/40`:`border-dashed border-border/60 bg-transparent text-muted-foreground hover:bg-muted/30`),children:c},e.id):(0,B.jsx)(`span`,{className:y(s,`border-border bg-card cursor-default`),children:c},e.id)})})}Fe.displayName=`EventCalendarLegend`;function Ie({events:e,defaultDate:t=new Date,defaultViewMode:n=`month`,onDateChange:r,onViewModeChange:i,dataOptions:o={}}){let[c,u]=(0,z.useState)(t),[d,f]=(0,z.useState)(n),p=De(e,c,d,o),m=(0,z.useMemo)(()=>o.visibleCategories&&o.visibleCategories.length>0?e.filter(e=>o.visibleCategories.includes(e.category)):e,[e,o.visibleCategories]);return{currentDate:c,viewMode:d,calendarDays:p,visibleEvents:m,goToToday:(0,z.useCallback)(()=>{let e=new Date;u(e),r?.(e)},[r]),goToNextPeriod:(0,z.useCallback)(()=>{let e=d===`month`?s(c,1):a(c,1);u(e),r?.(e)},[c,d,r]),goToPreviousPeriod:(0,z.useCallback)(()=>{let e=d===`month`?le(c,1):ue(c,1);u(e),r?.(e)},[c,d,r]),setDate:(0,z.useCallback)(e=>{u(e),r?.(e)},[r]),setViewMode:(0,z.useCallback)(e=>{f(e),i?.(e)},[i]),displayLabel:(0,z.useMemo)(()=>{if(d===`month`)return l(c,`MMMM yyyy`);if(d===`week`){let e=p[0]?.date,t=p[p.length-1]?.date;return e&&t?`${l(e,`MMM d`)} - ${l(t,`MMM d, yyyy`)}`:l(c,`MMMM yyyy`)}return l(c,`MMMM yyyy`)},[c,d,p]),hasEvents:(0,z.useMemo)(()=>m.length>0,[m])}}function Le(e,t){if(!e)return!1;if(Array.isArray(e))return e.some(e=>e.toDateString()===t.toDateString());if(typeof e==`function`)return e(t);let n=e.dates?.some(e=>e.toDateString()===t.toDateString())??!1,r=e.predicate?.(t)??!1;return n||r}function W({events:e,categories:t,viewMode:n,onViewModeChange:r,defaultDate:i,onDateChange:a,onEventClick:o,onDayClick:s,maxEventsPerDay:c=3,showLegend:l=!0,showHeader:u=!0,showWeekends:d=!0,weekStartsOn:p,locale:h,enableCategoryFilter:g=!1,visibleCategories:_,onVisibleCategoriesChange:v,isLoading:ee=!1,emptyStateMessage:b,className:te,compact:ne=!1,actions:re,strings:x,dayHeadingVariant:S=`default`,dayHeadingClassName:C,renderDayHeading:w,rangeMode:ie=`date`,minDate:T,maxDate:E,disabledDates:D,filterEvent:O,renderEvent:k,renderDayCell:A}){let j=(0,z.useMemo)(()=>({...U,...x,viewMode:{...U.viewMode,...x?.viewMode??{}},weekdaysShort:x?.weekdaysShort??U.weekdaysShort}),[x]),[ae,oe]=(0,z.useState)([]),M=_??ae,{weekStartsOn:se}=f(),N=p??se??1,P=e=>{let t=M.includes(e)?M.filter(t=>t!==e):[...M,e];v?v(t):oe(t)},F=Ie({events:e,defaultDate:i,defaultViewMode:n||`month`,onDateChange:a,onViewModeChange:r,dataOptions:{weekStartsOn:N,showWeekends:d,visibleCategories:M.length>0?M:void 0}}),ce=(0,z.useMemo)(()=>{let e=j.weekdaysShort;return N===1?[...e.slice(1),e[0]]:e},[j.weekdaysShort,N]),le=e=>{Le(D,e.date)||T&&e.date<T||E&&e.date>E||s?.(e.date,e.events)},ue=(0,z.useMemo)(()=>O?F.calendarDays.map(e=>({...e,events:e.events.filter(O),eventCount:e.events.filter(O).length,hasMultipleEvents:e.events.filter(O).length>1})):F.calendarDays,[F.calendarDays,O]);function de(e){return!!(Le(D,e)||T&&e<T||E&&e>E)}let I=(0,z.useMemo)(()=>{let e=F.calendarDays;if(e.length===0)return{prev:!1,next:!1};let t=e[0].date,n=e[e.length-1].date;return{prev:!!T&&t<=T,next:!!E&&n>=E}},[F.calendarDays,T,E]);if(ee)return(0,B.jsx)(`div`,{className:y(`event-calendar--component`,`flex items-center justify-center py-12`),children:(0,B.jsx)(m,{type:`secondary`,children:j.loading})});let fe=n?r:void 0,L=g?P:void 0;return(0,B.jsxs)(`div`,{className:y(`w-full space-y-4`,te),children:[!!u&&(0,B.jsx)(Me,{currentDate:F.currentDate,viewMode:F.viewMode,displayLabel:F.displayLabel,onPrevious:F.goToPreviousPeriod,onNext:F.goToNextPeriod,onToday:F.goToToday,onViewModeChange:fe,onDateChange:F.setDate,locale:h,actions:re,rangeMode:ie,minDate:T,maxDate:E,prevDisabled:I.prev,nextDisabled:I.next,strings:{today:j.today,previous:j.previous,next:j.next,viewMode:j.viewMode}}),!!l&&t.length>0&&(0,B.jsx)(Fe,{categories:t,visibleCategories:M,onToggleCategory:L,enableFiltering:g}),!F.hasEvents&&b?(0,B.jsx)(`div`,{className:`flex items-center justify-center py-12 border border-dashed border-border rounded-lg`,children:(0,B.jsx)(m,{type:`secondary`,children:b})}):(0,B.jsxs)(`div`,{className:`bg-background rounded-lg border border-border`,children:[(0,B.jsx)(`div`,{className:y(`grid grid-cols-7`,S===`bordered`&&`border-b border-border mb-0`,S===`tinted`&&`bg-muted/40 rounded-t-lg mb-0 overflow-hidden`,S===`accent`&&`bg-primary/8 rounded-t-lg mb-0 overflow-hidden`,S===`default`&&`mb-2`),children:ce.map((e,t)=>w?(0,B.jsx)(`div`,{children:w(e,t)},e):(0,B.jsx)(`div`,{className:y(`text-center h-8 flex items-center justify-center`,C),children:(0,B.jsx)(m,{size:`xs`,weight:S===`accent`?`medium`:`regular`,className:y(S===`default`&&`text-muted-foreground`,S===`tinted`&&`text-muted-foreground`,S===`bordered`&&`text-foreground`,S===`accent`&&`text-primary`),children:e})},e))}),(0,B.jsx)(`div`,{className:`grid grid-cols-7`,children:ue.map(e=>{let n=de(e.date),r=()=>(0,B.jsx)(ke,{data:e,categories:t,maxEvents:c,onClick:()=>le(e),compact:ne,strings:{booking:j.booking,bookings:j.bookings},renderEvent:k});return(0,B.jsx)(`div`,{className:y(n&&`pointer-events-none opacity-40`),"aria-disabled":n||void 0,children:A?A(e,r):r()},e.date.toISOString())})})]})]})}W.displayName=`EventCalendar`;var Re=e({DayHeadingVariantAccent:()=>He,DayHeadingVariantBordered:()=>Ve,DayHeadingVariantTinted:()=>Be,Default:()=>J,FilterEventRenderEventCustomEventRendering:()=>Z,NavigationLimitsDisabledDates:()=>X,RangeModeMonthYearCompactMonthYearJump:()=>Y,WithCustomStringsBG:()=>Ue}),ze=new Date;function G(e,t=10){let n=new Date(ze);return n.setDate(n.getDate()+e),n.setHours(t,0,0,0),n}var K=[{id:`spa`,label:`Spa & Wellness`,color:`green`,icon:te},{id:`wine`,label:`Wine & Dine`,color:`purple`,icon:re},{id:`adventure`,label:`Adventure`,color:`amber`,icon:ne}],q=[{id:`1`,title:`Couples Spa`,category:`spa`,startDate:G(0,14)},{id:`2`,title:`Wine Tasting`,category:`wine`,startDate:G(2,18)},{id:`3`,title:`Hot Air Balloon`,category:`adventure`,startDate:G(4,6)},{id:`4`,title:`Hot Stone Massage`,category:`spa`,startDate:G(7,10)},{id:`5`,title:`Sommelier Tour`,category:`wine`,startDate:G(7,18)},{id:`6`,title:`Paragliding`,category:`adventure`,startDate:G(11,9)},{id:`7`,title:`Aroma Therapy`,category:`spa`,startDate:G(14,11)}];function J(){let[e,t]=(0,z.useState)([]);return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,enableCategoryFilter:!0,visibleCategories:e,onVisibleCategoriesChange:t})})}function Y(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,rangeMode:`month-year`})})}function X(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,minDate:G(-30),maxDate:G(60),disabledDates:e=>e.getDay()===0})})}function Z(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,filterEvent:e=>e.category!==`wine`,renderEvent:(e,t)=>(0,B.jsxs)(`div`,{className:`px-1.5 py-0.5 text-[10px] rounded bg-foreground/8 text-foreground truncate`,children:[t?.label?.split(` `)[0]??``,` · `,e.title]})})})}function Be(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,dayHeadingVariant:`tinted`})})}function Ve(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,dayHeadingVariant:`bordered`})})}function He(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,dayHeadingVariant:`accent`})})}function Ue(){return(0,B.jsx)(B.Fragment,{children:(0,B.jsx)(W,{events:q,categories:K,locale:Te,strings:{today:`Днес`,previous:`Назад`,next:`Напред`,loading:`Зарежда…`,booking:`резервация`,bookings:`резервации`,viewMode:{month:`Месец`,week:`Седмица`,agenda:`Списък`},weekdaysShort:[`Нед`,`Пон`,`Вто`,`Сря`,`Чет`,`Пет`,`Съб`]}})})}var Q=`import { useState } from 'react';
+import { Heart, Star, Sparkles } from 'lucide-react';
+import { bg } from 'date-fns/locale';
+import { EventCalendar } from '@/components/base/event-calendar/event-calendar';
+import type { CalendarEvent, EventCategory } from '@/components/base/event-calendar/event-calendar.types';
+
+const today = new Date();
+function offset(days: number, hour = 10) {
+	const d = new Date(today);
+	d.setDate(d.getDate() + days);
+	d.setHours(hour, 0, 0, 0);
+	return d;
+}
+
+const categories: EventCategory[] = [
+	{ id: 'spa', label: 'Spa & Wellness', color: 'green', icon: Heart },
+	{ id: 'wine', label: 'Wine & Dine', color: 'purple', icon: Star },
+	{ id: 'adventure', label: 'Adventure', color: 'amber', icon: Sparkles },
+];
+
+const events: CalendarEvent[] = [
+	{ id: '1', title: 'Couples Spa', category: 'spa', startDate: offset(0, 14) },
+	{ id: '2', title: 'Wine Tasting', category: 'wine', startDate: offset(2, 18) },
+	{ id: '3', title: 'Hot Air Balloon', category: 'adventure', startDate: offset(4, 6) },
+	{ id: '4', title: 'Hot Stone Massage', category: 'spa', startDate: offset(7, 10) },
+	{ id: '5', title: 'Sommelier Tour', category: 'wine', startDate: offset(7, 18) },
+	{ id: '6', title: 'Paragliding', category: 'adventure', startDate: offset(11, 9) },
+	{ id: '7', title: 'Aroma Therapy', category: 'spa', startDate: offset(14, 11) },
+];
+
+export function Default() {
+	const [visible, setVisible] = useState<string[]>([]);
+	return (
+		<>
+			<EventCalendar
+								events={events}
+								categories={categories}
+								enableCategoryFilter
+								visibleCategories={visible}
+								onVisibleCategoriesChange={setVisible}
+							/>
+		</>
+	);
+}
+
+export function RangeModeMonthYearCompactMonthYearJump() {
+	return (
+		<>
+			<EventCalendar
+								events={events}
+								categories={categories}
+								rangeMode="month-year"
+							/>
+		</>
+	);
+}
+
+export function NavigationLimitsDisabledDates() {
+	return (
+		<>
+			<EventCalendar
+								events={events}
+								categories={categories}
+								minDate={offset(-30)}
+								maxDate={offset(60)}
+								disabledDates={(date) => date.getDay() === 0}
+							/>
+		</>
+	);
+}
+
+export function FilterEventRenderEventCustomEventRendering() {
+	return (
+		<>
+			<EventCalendar
+								events={events}
+								categories={categories}
+								filterEvent={(e) => e.category !== 'wine'}
+								renderEvent={(event, category) => (
+									<div className="px-1.5 py-0.5 text-[10px] rounded bg-foreground/8 text-foreground truncate">
+										{category?.label?.split(' ')[0] ?? ''} · {event.title}
+									</div>
+								)}
+							/>
+		</>
+	);
+}
+
+export function DayHeadingVariantTinted() {
+	return (
+		<>
+			<EventCalendar events={events} categories={categories} dayHeadingVariant="tinted" />
+		</>
+	);
+}
+
+export function DayHeadingVariantBordered() {
+	return (
+		<>
+			<EventCalendar events={events} categories={categories} dayHeadingVariant="bordered" />
+		</>
+	);
+}
+
+export function DayHeadingVariantAccent() {
+	return (
+		<>
+			<EventCalendar events={events} categories={categories} dayHeadingVariant="accent" />
+		</>
+	);
+}
+
+export function WithCustomStringsBG() {
+	return (
+		<>
+			<EventCalendar
+								events={events}
+								categories={categories}
+								locale={bg}
+								strings={{
+									today: 'Днес',
+									previous: 'Назад',
+									next: 'Напред',
+									loading: 'Зарежда…',
+									booking: 'резервация',
+									bookings: 'резервации',
+									viewMode: { month: 'Месец', week: 'Седмица', agenda: 'Списък' },
+									weekdaysShort: ['Нед', 'Пон', 'Вто', 'Сря', 'Чет', 'Пет', 'Съб'],
+								}}
+							/>
+		</>
+	);
+}
+`;function We(e){let t={code:`code`,p:`p`,...e.components};return Re||$(`Examples`,!1),He||$(`Examples.DayHeadingVariantAccent`,!0),Ve||$(`Examples.DayHeadingVariantBordered`,!0),Be||$(`Examples.DayHeadingVariantTinted`,!0),J||$(`Examples.Default`,!0),Z||$(`Examples.FilterEventRenderEventCustomEventRendering`,!0),X||$(`Examples.NavigationLimitsDisabledDates`,!0),Y||$(`Examples.RangeModeMonthYearCompactMonthYearJump`,!0),Ue||$(`Examples.WithCustomStringsBG`,!0),(0,B.jsxs)(p,{title:`Event calendar`,description:`Month view with categories, filtering, navigation rules, custom event rendering, and three day-heading variants.`,layer:`base`,status:`ready`,sourcePath:`src/components/base/event-calendar`,children:[(0,B.jsx)(_,{title:`Overview`,id:`overview`,children:(0,B.jsxs)(t.p,{children:[(0,B.jsx)(t.code,{children:`EventCalendar`}),` is the canonical month view — pass `,(0,B.jsx)(t.code,{children:`events`}),` and optional
+`,(0,B.jsx)(t.code,{children:`categories`}),`, drive filtering with `,(0,B.jsx)(t.code,{children:`enableCategoryFilter`}),` / `,(0,B.jsx)(t.code,{children:`visibleCategories`}),`
+or imperatively with `,(0,B.jsx)(t.code,{children:`filterEvent`}),`, and slot a custom renderer with
+`,(0,B.jsx)(t.code,{children:`renderEvent`}),`. Navigation can be capped via `,(0,B.jsx)(t.code,{children:`minDate`}),` / `,(0,B.jsx)(t.code,{children:`maxDate`}),` and
+`,(0,B.jsx)(t.code,{children:`disabledDates`}),`, and every string + locale is overridable.`]})}),(0,B.jsx)(_,{title:`Default`,id:`default`,children:(0,B.jsx)(v,{name:`Default`,source:Q,children:(0,B.jsx)(J,{})})}),(0,B.jsxs)(_,{title:`Navigation modes`,id:`navigation`,children:[(0,B.jsx)(v,{name:`RangeModeMonthYearCompactMonthYearJump`,source:Q,children:(0,B.jsx)(Y,{})}),(0,B.jsx)(v,{name:`NavigationLimitsDisabledDates`,source:Q,children:(0,B.jsx)(X,{})})]}),(0,B.jsxs)(_,{title:`Day-heading variants`,id:`day-heading`,children:[(0,B.jsx)(v,{name:`DayHeadingVariantTinted`,source:Q,children:(0,B.jsx)(Be,{})}),(0,B.jsx)(v,{name:`DayHeadingVariantBordered`,source:Q,children:(0,B.jsx)(Ve,{})}),(0,B.jsx)(v,{name:`DayHeadingVariantAccent`,source:Q,children:(0,B.jsx)(He,{})})]}),(0,B.jsxs)(_,{title:`Customisation`,id:`custom`,children:[(0,B.jsx)(v,{name:`FilterEventRenderEventCustomEventRendering`,source:Q,children:(0,B.jsx)(Z,{})}),(0,B.jsx)(v,{name:`WithCustomStringsBG`,source:Q,children:(0,B.jsx)(Ue,{})})]}),(0,B.jsx)(_,{title:`API`,id:`api`,children:(0,B.jsx)(se,{component:`EventCalendar`})})]})}function Ge(e={}){let{wrapper:t}=e.components||{};return t?(0,B.jsx)(t,{...e,children:(0,B.jsx)(We,{...e})}):We(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ge as default};

package/dist/showcase/assets/event-log-tA_i4eR9.js

@@ -0,0 +1,326 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{Dr as n,cr as r,gr as i,sr as a,t as o,vr as s}from"./example-6phCHGsN.js";import{o as c,r as l,t as u}from"./comment-composer-DC9oS1Yy.js";import{t as d}from"./bell-BvJELoaV.js";import{t as f}from"./circle-check-DlA6zidQ.js";import{t as p}from"./circle-BrCPAmDA.js";import{t as m}from"./comment-item-CAmKnJa7.js";import{t as h}from"./credit-card-BQK3KKb2.js";import{t as g}from"./git-branch-B_CBqPeO.js";import{t as _}from"./package-BJMP-Fcr.js";import{t as v}from"./shield-alert-D8i6gzMK.js";import{t as y}from"./user-Bgc2t2_e.js";import{D as b,a as x,k as S}from"./index-B4ubXfly.js";import{t as C}from"./props-table-uDY4eIzt.js";import{t as w}from"./smart-card-BisUbLPt.js";var T={listAriaLabel:`Activity timeline`,emptyMessage:`No activity yet.`},E=x(),D={primary:`bg-primary/10 text-primary`,success:`bg-success/15 text-success`,warning:`bg-warning/40 text-warning-foreground`,destructive:`bg-destructive/10 text-destructive`,info:`bg-info/15 text-info`,secondary:`bg-muted text-muted-foreground`},O=({entry:e,resources:t,formatRelativeTime:n,isLast:r})=>{let a=e.icon??p,o=e.tone??`secondary`,c=e.timestamp&&n?n(e.timestamp):e.timestamp;return(0,E.jsxs)(`li`,{className:`relative flex gap-3`,"data-event-id":e.id,children:[(0,E.jsxs)(`div`,{className:`relative flex flex-col items-center pt-1`,children:[(0,E.jsx)(`div`,{className:s(`flex size-6 shrink-0 items-center justify-center rounded-full ring-1 ring-foreground/[0.04]`,D[o]),children:(0,E.jsx)(a,{className:`size-3`,"aria-hidden":!0})}),!r&&(0,E.jsx)(`div`,{className:`bg-border/60 mt-1 w-px flex-1`,"aria-hidden":!0})]}),(0,E.jsxs)(`div`,{className:`min-w-0 flex-1 pb-3`,children:[(0,E.jsxs)(`div`,{className:`flex flex-wrap items-baseline gap-x-1.5`,children:[!!e.actor&&(0,E.jsx)(i,{tag:`span`,weight:`semibold`,children:e.actor}),!!e.action&&(0,E.jsx)(i,{tag:`span`,type:`secondary`,children:e.action}),!!e.target&&(0,E.jsx)(i,{tag:`span`,weight:`medium`,children:e.target}),!!e.headline&&!e.action&&!e.target&&(0,E.jsx)(i,{tag:`span`,children:e.headline}),!!c&&(0,E.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,className:`ml-auto shrink-0 tabular-nums`,children:c})]}),!!e.description&&(0,E.jsx)(`div`,{className:`mt-1 text-sm leading-relaxed`,children:(0,E.jsx)(l,{html:e.description,mentions:e.mentions,resources:t})}),e.metadata&&e.metadata.length>0&&(0,E.jsx)(`div`,{className:`mt-1 flex flex-wrap gap-x-3 gap-y-0.5`,children:e.metadata.map(e=>(0,E.jsxs)(i,{size:`xs`,type:`secondary`,className:`inline-flex items-baseline gap-1`,children:[(0,E.jsxs)(i,{tag:`span`,size:`xs`,type:`discrete`,children:[e.label,`:`]}),(0,E.jsx)(i,{tag:`span`,size:`xs`,type:`secondary`,children:e.value})]},e.label))})]})]})},k=t(S(),1);function A(e){if(!e)return()=>{};let t={setErrors:()=>{},reset:()=>{},setSubmitting:()=>{}};return n=>{e(n,t)}}function j(e,t){let n=[...e];return n.sort((e,n)=>{let r=e.timestamp?new Date(e.timestamp).getTime():0,i=n.timestamp?new Date(n.timestamp).getTime():0;return t===`asc`?r-i:i-r}),n}function M(e){let{entries:t,order:r=`desc`,resources:a,onResourceSearch:o,canModerate:c,onCommentDelete:l,onCommentReact:d,onCommentReply:f,onCommentPinToggle:p,strings:h,eventLogStrings:g,renderers:_,composer:v,bare:y=!1,title:x,getMediaUrl:S,getMediaName:C,getStatusLabel:D,formatRelativeTime:M,className:N}=e,P=a,F=o,I=(0,k.useMemo)(()=>j(t,r),[t,r]),L=b(T,g),{formatRelativeTime:R}=n(),z=M??R??(e=>e),B=(e,t,n)=>{let r=t===n-1,i=_?.[e.kind];if(i)return i(e,{resources:P,accessors:{getMediaUrl:S,getMediaName:C,getStatusLabel:D,formatRelativeTime:z},strings:h});if(e.kind===`comment`){let t=e;return(0,E.jsx)(`li`,{className:s(`event-log--component`,`relative`),"data-event-id":t.id,children:(0,E.jsx)(m,{comment:t.comment,canModerate:c,onDelete:l,onPinToggle:p,onReact:d,onReply:f,strings:h,resources:P,getMediaUrl:S,getMediaName:C,getStatusLabel:D,formatRelativeTime:z})},t.id)}let a=e;return(0,E.jsx)(O,{entry:a,resources:P,formatRelativeTime:z,isLast:r},a.id)},V=v?.enabled?(0,E.jsx)(`div`,{children:(0,E.jsx)(u,{context:v.context,canComment:!0,onSubmit:A(v.onSubmit),resources:P,onResourceSearch:F,placeholder:v.placeholder,autoFocus:v.autoFocus})}):null,H=v?.position??`top`,U=I.length===0?(0,E.jsx)(i,{type:`secondary`,className:`py-2`,children:L.emptyMessage}):(0,E.jsx)(`ul`,{"aria-label":L.listAriaLabel,className:`flex flex-col gap-2.5`,children:I.map((e,t)=>B(e,t,I.length))}),W=(0,E.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[H===`top`&&V,U,H===`bottom`&&V]});return y?W:(0,E.jsx)(w,{title:x,padding:`sm`,className:N,children:W})}M.displayName=`EventLog`;var N=e({APISurface:()=>W,CommentsEventsUnderOneLog:()=>G,ReadOnlyTimelineNoComposer:()=>K}),P=[{id:`maria`,label:`Sarah Smitha`,description:`Head of Operations`,kind:`user`},{id:`ivana`,label:`Davida Todorova`,description:`Refunds Specialist`,kind:`user`},{id:`stefan`,label:`Daniel Kowalski`,description:`Customer`,kind:`user`},{id:`kris`,label:`Kris Dineva`,description:`Engineering`,kind:`user`}],F=[{id:`BKG-2026-0408`,label:`BKG-2026-0408`,description:`Daniel Kowalski · Apr 12 → Apr 14`,kind:`booking`},{id:`BKG-2026-0421`,label:`BKG-2026-0421`,description:`Sarah Smitha · Apr 19 → Apr 22`,kind:`booking`}],I=[{id:`ORD-A219`,label:`ORD-A219`,description:`€420.00 · Refund pending`,kind:`order`},{id:`ORD-A284`,label:`ORD-A284`,description:`€88.50 · Captured`,kind:`order`}],L=[{id:`SPR-Q2-W3`,label:`Sprint Q2-W3`,description:`Refund flows`,kind:`sprint`}],R={user:{icon:y,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:_,label:`Order`,trigger:`$`,tone:`warning`,buildHref:e=>`/orders/${e.id}`},sprint:{icon:g,label:`Sprint`,tone:`secondary`,buildHref:e=>`/sprints/${e.id}`}};function z(e,t){let n=t===`user`?P:t===`booking`?F:t===`order`?I:L,r=e.trim().toLowerCase();return r.length===0?n:n.filter(e=>e.label.toLowerCase().includes(r)||(e.description??``).toLowerCase().includes(r))}var B=Date.now(),V=e=>new Date(B-e*60*60*1e3).toISOString(),H=(e,t,n)=>({id:`${e}:${t}`,kind:e,label:n,href:`/${e}s/${t}`}),U=[{id:`evt-1`,kind:`event`,timestamp:V(48),icon:f,tone:`success`,actor:`System`,action:`created`,target:`BKG-2026-0408`,description:`New booking opened by <span data-ref-id="user:stefan" data-ref-kind="user">@Daniel Kowalski</span>.`,mentions:[H(`user`,`stefan`,`Daniel Kowalski`)]},{id:`evt-2`,kind:`system`,timestamp:V(36),icon:h,tone:`info`,actor:`Payments`,action:`captured`,target:`€420.00`,description:`Captured for <span data-ref-id="order:ORD-A219" data-ref-kind="order">ORD-A219</span> via Visa •• 4242.`,mentions:[H(`order`,`ORD-A219`,`ORD-A219`)],metadata:[{label:`Method`,value:`card`},{label:`Receipt`,value:`rcpt_8z2`}]},{id:`1`,kind:`comment`,timestamp:V(2),comment:{id:`1`,user:{id:`maria`,name:`Sarah Smitha`},createdAt:V(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:[H(`user`,`stefan`,`Daniel Kowalski`),H(`booking`,`BKG-2026-0408`,`BKG-2026-0408`)],isPinned:!0,canDelete:!0,reactions:[{emoji:`👍`,count:2,mine:!0}]}},{id:`evt-3`,kind:`audit`,timestamp:V(1.5),icon:v,tone:`warning`,actor:`Sarah Smitha`,action:`overrode policy`,target:`partial-refund`,description:`Bypassed the 24h refund cap for <span data-ref-id="booking:BKG-2026-0408" data-ref-kind="booking">BKG-2026-0408</span>.`,mentions:[H(`booking`,`BKG-2026-0408`,`BKG-2026-0408`)],metadata:[{label:`Reason`,value:`customer-double-booked`}]},{id:`2`,kind:`comment`,timestamp:V(1),comment:{id:`2`,user:{id:`ivana`,name:`Davida Todorova`},createdAt:V(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:[H(`order`,`ORD-A219`,`ORD-A219`)],attachments:[{id:`m1`,name:`refund-receipt.pdf`,url:`#`,size:184320,mimeType:`application/pdf`,status:`uploaded`}]}},{id:`evt-4`,kind:`event`,timestamp:V(.5),icon:d,tone:`secondary`,actor:`Notifier`,action:`sent email to`,target:`Daniel Kowalski`,description:`Refund confirmation dispatched. Linked sprint: <span data-ref-id="sprint:SPR-Q2-W3" data-ref-kind="sprint">Sprint Q2-W3</span>.`,mentions:[H(`sprint`,`SPR-Q2-W3`,`Sprint Q2-W3`)]}];function W(){return(0,E.jsx)(E.Fragment,{children:(0,E.jsxs)(i,{type:`secondary`,children:[(0,E.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<EventLog entries={EventLogEntry[]} resources={…} onResourceSearch={…} composer={{…}} renderers={{…}} />`}),`  `,`Each entry's `,(0,E.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`kind`}),` selects a renderer — built-in`,` `,(0,E.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`'comment'`}),` uses`,` `,(0,E.jsx)(`code`,{className:`rounded bg-muted px-1 py-0.5 text-xs`,children:`<CommentItem>`}),`; everything else (events, audit, system, custom kinds) renders as an icon-rail row with full mention support in the description.`]})})}function G(){let[e,t]=(0,k.useState)(U);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(M,{entries:e,canModerate:!0,order:`asc`,resources:R,onResourceSearch:z,onCommentDelete:e=>{t(t=>t.filter(t=>!(t.kind===`comment`&&t.id===e)))},onCommentReact:(e,n)=>{t(t=>t.map(t=>{if(t.kind!==`comment`)return t;let r=t;if(r.comment.id!==e)return t;let i=r.comment.reactions??[],a=i.find(e=>e.emoji===n)?i.map(e=>e.emoji===n?{...e,mine:!e.mine,count:e.mine?e.count-1:e.count+1}:e):[...i,{emoji:n,count:1,mine:!0}];return{...r,comment:{...r.comment,reactions:a}}}))},composer:{enabled:!0,position:`top`,context:{id:`BKG-2026-0408`,type:`booking`},placeholder:"Add a note — try `@`, `#`, or `$`…",onSubmit:(e,n)=>{t(t=>[...t,{id:`local-${t.length+1}`,kind:`comment`,timestamp:new Date().toISOString(),comment:{id:`local-${t.length+1}`,user:{id:`me`,name:`You`},createdAt:new Date().toISOString(),contentType:`html`,content:e.content,references:e.references?[...e.references]:[],attachments:e.attachments?[...e.attachments]:[],canDelete:!0}}]),n.reset()}}})})}function K(){let[e]=(0,k.useState)(U);return(0,E.jsx)(E.Fragment,{children:(0,E.jsx)(M,{entries:e.slice(0,4),order:`asc`,resources:R})})}var q=`import {
+    Bell,
+    CalendarRange,
+    CheckCircle2,
+    CreditCard,
+    GitBranch,
+    Package,
+    ShieldAlert,
+    User,
+} from 'lucide-react';
+import { useState } from 'react';
+import {
+    EventLog,
+    type EventLogEntry,
+} from '@/components/features/event-log';
+import {
+    type CommentFormValues,
+    type CommentSubmitHelpers,
+} from '@/components/features/comments';
+import {
+    type MentionResource,
+    type MentionSuggestion,
+} from '@/components/features/mentions';
+import { Text } from '@/components/typography';
+
+/**
+ * EventLog preview — demonstrates the unified \`<EventLog>\` feature.
+ * Shows comments + audit events + system messages
+ * mixed under one chronological surface, all using the shared
+ * \`features/mentions\` registry for inline \`@user\` / \`#booking\` /
+ * \`$order\` references.
+ */
+
+
+
+
+
+
+
+/* ------------------------------------------------------------------ */
+/*  Resource registry — same shape as the comments demo               */
+/* ------------------------------------------------------------------ */
+
+type ResourceKind = 'user' | 'booking' | 'order' | 'sprint';
+
+const PEOPLE: MentionSuggestion<ResourceKind>[] = [
+    { id: 'maria', label: 'Sarah Smitha', description: 'Head of Operations', kind: 'user' },
+    { id: 'ivana', label: 'Davida Todorova', description: 'Refunds Specialist', kind: 'user' },
+    { id: 'stefan', label: 'Daniel Kowalski', description: 'Customer', kind: 'user' },
+    { id: 'kris', label: 'Kris Dineva', description: 'Engineering', kind: 'user' },
+];
+
+const BOOKINGS: MentionSuggestion<ResourceKind>[] = [
+    { id: 'BKG-2026-0408', label: 'BKG-2026-0408', description: 'Daniel Kowalski · Apr 12 → Apr 14', kind: 'booking' },
+    { id: 'BKG-2026-0421', label: 'BKG-2026-0421', description: 'Sarah Smitha · Apr 19 → Apr 22', kind: 'booking' },
+];
+
+const ORDERS: MentionSuggestion<ResourceKind>[] = [
+    { id: 'ORD-A219', label: 'ORD-A219', description: '€420.00 · Refund pending', kind: 'order' },
+    { id: 'ORD-A284', label: 'ORD-A284', description: '€88.50 · Captured', kind: 'order' },
+];
+
+const SPRINTS: MentionSuggestion<ResourceKind>[] = [
+    { id: 'SPR-Q2-W3', label: 'Sprint Q2-W3', description: 'Refund flows', kind: 'sprint' },
+];
+
+const RESOURCES: Partial<Record<ResourceKind, MentionResource<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}\` },
+};
+
+function onResourceSearch(needle: string, kind: ResourceKind) {
+    const haystack: MentionSuggestion<ResourceKind>[] =
+        kind === 'user' ? PEOPLE
+        : kind === 'booking' ? BOOKINGS
+        : kind === 'order' ? ORDERS
+        : SPRINTS;
+    const q = needle.trim().toLowerCase();
+    return q.length === 0
+        ? haystack
+        : haystack.filter(
+              (item) =>
+                  item.label.toLowerCase().includes(q) ||
+                  (item.description ?? '').toLowerCase().includes(q),
+          );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Mock entries — comments + audit/system/custom events              */
+/* ------------------------------------------------------------------ */
+
+const NOW = Date.now();
+const HOURS = (n: number) => new Date(NOW - n * 60 * 60 * 1000).toISOString();
+
+const REF = (kind: ResourceKind, id: string, label: string) => ({
+    id: \`\${kind}:\${id}\`,
+    kind,
+    label,
+    href: \`/\${kind}s/\${id}\`,
+});
+
+const INITIAL_ENTRIES: EventLogEntry<
+    { id: string; name: string },
+    unknown,
+    ResourceKind
+>[] = [
+    {
+        id: 'evt-1',
+        kind: 'event',
+        timestamp: HOURS(48),
+        icon: CheckCircle2,
+        tone: 'success',
+        actor: 'System',
+        action: 'created',
+        target: 'BKG-2026-0408',
+        description:
+            'New booking opened by <span data-ref-id="user:stefan" data-ref-kind="user">@Daniel Kowalski</span>.',
+        mentions: [REF('user', 'stefan', 'Daniel Kowalski')],
+    },
+    {
+        id: 'evt-2',
+        kind: 'system',
+        timestamp: HOURS(36),
+        icon: CreditCard,
+        tone: 'info',
+        actor: 'Payments',
+        action: 'captured',
+        target: '€420.00',
+        description:
+            'Captured for <span data-ref-id="order:ORD-A219" data-ref-kind="order">ORD-A219</span> via Visa •• 4242.',
+        mentions: [REF('order', 'ORD-A219', 'ORD-A219')],
+        metadata: [
+            { label: 'Method', value: 'card' },
+            { label: 'Receipt', value: 'rcpt_8z2' },
+        ],
+    },
+    {
+        id: '1',
+        kind: 'comment',
+        timestamp: HOURS(2),
+        comment: {
+            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 }],
+        },
+    },
+    {
+        id: 'evt-3',
+        kind: 'audit',
+        timestamp: HOURS(1.5),
+        icon: ShieldAlert,
+        tone: 'warning',
+        actor: 'Sarah Smitha',
+        action: 'overrode policy',
+        target: 'partial-refund',
+        description:
+            'Bypassed the 24h refund cap for <span data-ref-id="booking:BKG-2026-0408" data-ref-kind="booking">BKG-2026-0408</span>.',
+        mentions: [REF('booking', 'BKG-2026-0408', 'BKG-2026-0408')],
+        metadata: [{ label: 'Reason', value: 'customer-double-booked' }],
+    },
+    {
+        id: '2',
+        kind: 'comment',
+        timestamp: HOURS(1),
+        comment: {
+            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: 'evt-4',
+        kind: 'event',
+        timestamp: HOURS(0.5),
+        icon: Bell,
+        tone: 'secondary',
+        actor: 'Notifier',
+        action: 'sent email to',
+        target: 'Daniel Kowalski',
+        description:
+            'Refund confirmation dispatched. Linked sprint: <span data-ref-id="sprint:SPR-Q2-W3" data-ref-kind="sprint">Sprint Q2-W3</span>.',
+        mentions: [REF('sprint', 'SPR-Q2-W3', 'Sprint Q2-W3')],
+    },
+];
+
+/* ------------------------------------------------------------------ */
+/*  Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export function APISurface() {
+	return (
+		<>
+			<Text type="secondary">
+			                    <code className="rounded bg-muted px-1 py-0.5 text-xs">
+			                        {'<EventLog entries={EventLogEntry[]} resources={…} onResourceSearch={…} composer={{…}} renderers={{…}} />'}
+			                    </code>
+			                    {'  '}
+			                    Each entry's <code className="rounded bg-muted px-1 py-0.5 text-xs">kind</code> selects a renderer — built-in
+			                    {' '}<code className="rounded bg-muted px-1 py-0.5 text-xs">'comment'</code> uses{' '}
+			                    <code className="rounded bg-muted px-1 py-0.5 text-xs">{'<CommentItem>'}</code>; everything else (events,
+			                    audit, system, custom kinds) renders as an icon-rail row with full mention support in the description.
+			                </Text>
+		</>
+	);
+}
+
+export function CommentsEventsUnderOneLog() {
+	const [entries, setEntries] = useState<typeof INITIAL_ENTRIES>(INITIAL_ENTRIES);
+	const handleCommentSubmit = (
+	        values: CommentFormValues<ResourceKind>,
+	        helpers: CommentSubmitHelpers,
+	    ) => {
+	        setEntries((prev) => [
+	            ...prev,
+	            {
+	                id: \`local-\${prev.length + 1}\`,
+	                kind: 'comment',
+	                timestamp: new Date().toISOString(),
+	                comment: {
+	                    id: \`local-\${prev.length + 1}\`,
+	                    user: { id: 'me', name: 'You' },
+	                    createdAt: new Date().toISOString(),
+	                    contentType: 'html',
+	                    content: values.content,
+	                    references: values.references ? [...values.references] : [],
+	                    attachments: values.attachments ? [...values.attachments] : [],
+	                    canDelete: true,
+	                },
+	            },
+	        ]);
+	        helpers.reset();
+	    };
+	const handleCommentDelete = (id: string) => {
+	        setEntries((prev) =>
+	            prev.filter(
+	                (e) => !(e.kind === 'comment' && (e as { id: string }).id === id),
+	            ),
+	        );
+	    };
+	const handleCommentReact = (commentId: string, emoji: string) => {
+	        setEntries((prev) =>
+	            prev.map((e) => {
+	                if (e.kind !== 'comment') return e;
+	                const ce = e as Extract<typeof INITIAL_ENTRIES[number], { kind: 'comment' }>;
+	                if (ce.comment.id !== commentId) return e;
+	                const reactions = ce.comment.reactions ?? [];
+	                const existing = reactions.find((r) => r.emoji === emoji);
+	                const nextReactions = existing
+	                    ? reactions.map((r) =>
+	                          r.emoji === emoji
+	                              ? {
+	                                    ...r,
+	                                    mine: !r.mine,
+	                                    count: r.mine ? r.count - 1 : r.count + 1,
+	                                }
+	                              : r,
+	                      )
+	                    : [...reactions, { emoji, count: 1, mine: true }];
+	                return {
+	                    ...ce,
+	                    comment: { ...ce.comment, reactions: nextReactions },
+	                };
+	            }),
+	        );
+	    };
+	return (
+		<>
+			<EventLog
+			                    entries={entries}
+			                    canModerate
+			                    order="asc"
+			                    resources={RESOURCES}
+			                    onResourceSearch={onResourceSearch}
+			                    onCommentDelete={handleCommentDelete}
+			                    onCommentReact={handleCommentReact}
+			                    composer={{
+			                        enabled: true,
+			                        position: 'top',
+			                        context: { id: 'BKG-2026-0408', type: 'booking' },
+			                        placeholder: 'Add a note — try \`@\`, \`#\`, or \`$\`…',
+			                        onSubmit: handleCommentSubmit,
+			                    }}
+			                />
+		</>
+	);
+}
+
+export function ReadOnlyTimelineNoComposer() {
+	const [entries] = useState<typeof INITIAL_ENTRIES>(INITIAL_ENTRIES);
+	return (
+		<>
+			<EventLog
+			                    entries={entries.slice(0, 4)}
+			                    order="asc"
+			                    resources={RESOURCES}
+			                />
+		</>
+	);
+}
+`;function J(e){let t={h4:`h4`,...e.components};return N||X(`Examples`,!1),W||X(`Examples.APISurface`,!0),G||X(`Examples.CommentsEventsUnderOneLog`,!0),K||X(`Examples.ReadOnlyTimelineNoComposer`,!0),(0,E.jsxs)(r,{title:`Features · Event log`,description:"Unified, mentions-aware mixed-source log: comments + audit events + system messages + custom kinds under one chronological surface. Inline `@user` / `#booking` / `$order` triggers work in the composer; resource chips render with tone-driven Badge variants in every entry kind.",layer:`features`,status:`ready`,children:[(0,E.jsxs)(a,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(o,{name:`APISurface`,source:q,children:(0,E.jsx)(W,{})}),(0,E.jsx)(o,{name:`CommentsEventsUnderOneLog`,source:q,children:(0,E.jsx)(G,{})}),(0,E.jsx)(o,{name:`ReadOnlyTimelineNoComposer`,source:q,children:(0,E.jsx)(K,{})})]}),(0,E.jsxs)(a,{title:`API`,id:`api`,children:[(0,E.jsx)(t.h4,{children:`EventLog`}),(0,E.jsx)(C,{component:`EventLog`})]})]})}function Y(e={}){let{wrapper:t}=e.components||{};return t?(0,E.jsx)(t,{...e,children:(0,E.jsx)(J,{...e})}):J(e)}function X(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Y as default};