admin-ui-starter-kit 0.1.4 → 0.4.3

package/dist/showcase/assets/event-calendar-BjcfC6fM.js

@@ -0,0 +1,138 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{a as r,i,n as a,o,r as s,s as c}from"./calendar-Bo17POsN.js";import{m as l,t as u}from"./format-DrTwpH65.js";import{t as d}from"./startOfDay-CtTeiGV0.js";import{t as f}from"./isToday-CXNS7ELW.js";import{Dr as p,Er as m,Lr as h,Rr as g,qr as _,r as v,t as y}from"./example-Cz_880po.js";import{t as b}from"./chevron-left-BNByuq3g.js";import{t as ee}from"./chevron-right-D4pIMCh9.js";import{t as te}from"./heart-BJVBFZ-j.js";import{t as ne}from"./sparkles-N8rqKQez.js";import{t as re}from"./star-BaV-UTPq.js";import{S as x,d as ie,f as S,h as ae,k as oe,m as C,n as w,p as T,s as E,v as D,x as O}from"./index-BQIv1ffM.js";import{a as k,i as A,n as se,o as ce,t as j}from"./select-Dymyvyh6.js";import{t as le}from"./props-table-2pIZzGC-.js";import{t as M}from"./month-year-picker-CVurc9L7.js";function ue(e,t){let n=O(e,t?.in).getDay();return n===0||n===6}function N(e,t){let{start:n,end:i}=r(t?.in,e),a=+n>+i,o=a?+n:+i,s=a?i:n;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(x(n,s)),s.setDate(s.getDate()+c),s.setHours(0,0,0,0);return a?l.reverse():l}function P(e,t,n){let[r,i]=D(n?.in,e,t);return+l(r,n)==+l(i,n)}function de(e,t,n){return c(e,-t,n)}function fe(e,t,n){return o(e,-t,n)}var pe={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}} години`}},F=(e,t,n)=>{let r,i=pe[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},me={date:C({formats:{full:`EEEE, dd MMMM yyyy`,long:`dd MMMM yyyy`,medium:`dd MMM yyyy`,short:`dd.MM.yyyy`},defaultWidth:`full`}),time:C({formats:{full:`HH:mm:ss zzzz`,long:`HH:mm:ss z`,medium:`HH:mm:ss`,short:`H:mm`},defaultWidth:`full`}),dateTime:C({formats:{any:`{{date}} {{time}}`},defaultWidth:`any`})},I=[`неделя`,`понеделник`,`вторник`,`сряда`,`четвъртък`,`петък`,`събота`];function he(e){let t=I[e];switch(e){case 0:case 3:case 6:return`'миналата `+t+` в' p`;case 1:case 2:case 4:case 5:return`'миналия `+t+` в' p`}}function ge(e){let t=I[e];return e===2?`'във `+t+` в' p`:`'в `+t+` в' p`}function _e(e){let t=I[e];switch(e){case 0:case 3:case 6:return`'следващата `+t+` в' p`;case 1:case 2:case 4:case 5:return`'следващия `+t+` в' p`}}var ve={lastWeek:(e,t,n)=>{let r=O(e),i=r.getDay();return P(r,t,n)?ge(i):he(i)},yesterday:`'вчера в' p`,today:`'днес в' p`,tomorrow:`'утре в' p`,nextWeek:(e,t,n)=>{let r=O(e),i=r.getDay();return P(r,t,n)?ge(i):_e(i)},other:`P`},ye=(e,t,n,r)=>{let i=ve[e];return typeof i==`function`?i(t,n,r):i},be={narrow:[`пр.н.е.`,`н.е.`],abbreviated:[`преди н. е.`,`н. е.`],wide:[`преди новата ера`,`новата ера`]},xe={narrow:[`1`,`2`,`3`,`4`],abbreviated:[`1-во тримес.`,`2-ро тримес.`,`3-то тримес.`,`4-то тримес.`],wide:[`1-во тримесечие`,`2-ро тримесечие`,`3-то тримесечие`,`4-то тримесечие`]},Se={abbreviated:[`яну`,`фев`,`мар`,`апр`,`май`,`юни`,`юли`,`авг`,`сеп`,`окт`,`ное`,`дек`],wide:[`януари`,`февруари`,`март`,`април`,`май`,`юни`,`юли`,`август`,`септември`,`октомври`,`ноември`,`декември`]},Ce={narrow:[`Н`,`П`,`В`,`С`,`Ч`,`П`,`С`],short:[`нд`,`пн`,`вт`,`ср`,`чт`,`пт`,`сб`],abbreviated:[`нед`,`пон`,`вто`,`сря`,`чет`,`пет`,`съб`],wide:[`неделя`,`понеделник`,`вторник`,`сряда`,`четвъртък`,`петък`,`събота`]},we={wide:{am:`преди обяд`,pm:`след обяд`,midnight:`в полунощ`,noon:`на обяд`,morning:`сутринта`,afternoon:`следобед`,evening:`вечерта`,night:`през нощта`}};function Te(e){return e===`year`||e===`week`||e===`minute`||e===`second`}function Ee(e){return e===`quarter`}function L(e,t,n,r,i){let a=Ee(t)?i:Te(t)?r:n;return e+`-`+a}var De={code:`bg`,formatDistance:F,formatLong:me,formatRelative:ye,localize:{ordinalNumber:(e,t)=>{let n=Number(e),r=t?.unit;if(n===0)return L(0,r,`ев`,`ева`,`ево`);if(n%1e3==0)return L(n,r,`ен`,`на`,`но`);if(n%100==0)return L(n,r,`тен`,`тна`,`тно`);let i=n%100;if(i>20||i<10)switch(i%10){case 1:return L(n,r,`ви`,`ва`,`во`);case 2:return L(n,r,`ри`,`ра`,`ро`);case 7:case 8:return L(n,r,`ми`,`ма`,`мо`)}return L(n,r,`ти`,`та`,`то`)},era:T({values:be,defaultWidth:`wide`}),quarter:T({values:xe,defaultWidth:`wide`,argumentCallback:e=>e-1}),month:T({values:Se,defaultWidth:`wide`}),day:T({values:Ce,defaultWidth:`wide`}),dayPeriod:T({values:we,defaultWidth:`wide`})},match:{ordinalNumber:ie({matchPattern:/^(\d+)(-?[врмт][аи]|-?т?(ен|на)|-?(ев|ева))?/i,parsePattern:/\d+/i,valueCallback:e=>parseInt(e,10)}),era:S({matchPatterns:{narrow:/^((пр)?н\.?\s?е\.?)/i,abbreviated:/^((пр)?н\.?\s?е\.?)/i,wide:/^(преди новата ера|новата ера|нова ера)/i},defaultMatchWidth:`wide`,parsePatterns:{any:[/^п/i,/^н/i]},defaultParseWidth:`any`}),quarter:S({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:S({matchPatterns:{abbreviated:/^(яну|фев|мар|апр|май|юни|юли|авг|сеп|окт|ное|дек)/i,wide:/^(януари|февруари|март|април|май|юни|юли|август|септември|октомври|ноември|декември)/i},defaultMatchWidth:`wide`,parsePatterns:{any:[/^я/i,/^ф/i,/^мар/i,/^ап/i,/^май/i,/^юн/i,/^юл/i,/^ав/i,/^се/i,/^окт/i,/^но/i,/^де/i]},defaultParseWidth:`any`}),day:S({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:S({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}},R=t(n(),1),z=E(),B={gray:`bg-muted-foreground`,red:`bg-destructive`,orange:`bg-warning`,amber:`bg-warning`,yellow:`bg-warning`,green:`bg-success`,blue:`bg-info`,purple:`bg-primary`};function V(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 H={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 Oe({event:e,category:t,compact:n=!1,onClick:r}){let i=B[V(t)],a=e.allDay?null:u(e.startDate,`HH:mm`),o=e.metadata?.calendar_cell_title,s=typeof o==`string`&&o.trim()!==``?o:e.title,c=a?`${s} at ${a}`:s;return(0,z.jsxs)(v,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:n?`xs`:`sm`,onClick:e=>{e.stopPropagation(),r?.()},className:w(`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`,`justify-start text-left shadow-none transition-colors hover:bg-accent/50`,`max-sm:h-3 max-sm:justify-center max-sm:gap-0 max-sm:border-transparent max-sm:bg-transparent max-sm:px-0`,n?`h-5`:`h-6`),"aria-label":c,title:typeof s==`string`?s:void 0,children:[(0,z.jsx)(`span`,{"aria-hidden":`true`,className:w(`size-1.5 shrink-0 rounded-full`,i)}),(0,z.jsx)(g,{tag:`span`,size:`xxs`,weight:`medium`,className:`min-w-0 flex-1 truncate max-sm:hidden`,children:s}),!!a&&(0,z.jsx)(g,{tag:`span`,size:`xxs`,type:`secondary`,className:`shrink-0 whitespace-nowrap tabular-nums max-sm:hidden`,children:a})]})}Oe.displayName=`EventCalendarEventBadge`;function ke(e,t,n,r={}){let{weekStartsOn:o=1,showWeekends:c=!0,visibleCategories:u}=r;return(0,R.useMemo)(()=>{let r=i(t),p=ae(t),m,h;n===`month`?(m=l(r,{weekStartsOn:o}),h=s(p,{weekStartsOn:o})):n===`week`?(m=l(t,{weekStartsOn:o}),h=s(t,{weekStartsOn:o})):(m=r,h=p);let g=N({start:m,end:h}),_=u&&u.length>0?e.filter(e=>u.includes(e.category)):e,v=new Map;return _.forEach(e=>{let t=d(e.startDate);if(Number.isNaN(t.getTime()))return;let n=t;if(e.endDate&&!Number.isNaN(e.endDate.getTime())){let r=d(e.endDate);!Number.isNaN(r.getTime())&&r.getTime()>=t.getTime()&&(n=r)}N({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=>c||!ue(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:a(e,t),isToday:f(e),isWeekend:ue(e),events:r,eventCount:r.length,hasMultipleEvents:r.length>1}})},[e,t,n,o,c,u])}function Ae(e,t){return e.find(e=>e.id===t)}function je({data:e,categories:t,maxEvents:n=3,onClick:r,compact:i=!1,strings:a,renderEvent:o}){let s={booking:a?.booking??H.booking,bookings:a?.bookings??H.bookings},{date:c,isCurrentMonth:l,isToday:u,isWeekend:d,events:f,eventCount:p}=e,m=f.slice(0,n),h=Math.max(0,p-n);return(0,z.jsx)(`div`,{className:w(`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,z.jsxs)(`div`,{role:`button`,tabIndex:0,onClick:r,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),r())},className:w(`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,z.jsx)(g,{className:w(`font-normal leading-none`,u&&`font-semibold`,!l&&`text-muted-foreground`,i&&`text-xs`),children:c.getDate()}),(0,z.jsxs)(`div`,{className:`w-full space-y-0.5`,children:[m.map(n=>{let a=Ae(t,n.category);return o?(0,z.jsx)(`div`,{children:o(n,a)},n.id):(0,z.jsx)(Oe,{event:n,category:a,compact:i||e.hasMultipleEvents,onClick:()=>r()},n.id)}),h>0&&(0,z.jsxs)(`div`,{className:`flex items-center gap-1 py-0.5 px-2`,children:[(0,z.jsx)(`div`,{className:`flex items-center -space-x-1`,children:t.slice(0,3).map((e,t)=>(0,z.jsx)(`span`,{className:w(`h-1.5 w-1.5 rounded-full border border-background`,B[V(e)])},e.id||t))}),(0,z.jsxs)(g,{size:`xs`,type:`secondary`,className:`font-medium text-xxs`,children:[h,` `,h===1?s.booking:s.bookings]})]})]})]})})}je.displayName=`EventCalendarDayCell`;function Me(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 Ne=(e,t)=>{if(!e)return null;if(e.element)return(0,z.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=Me(e.variant);return(0,z.jsxs)(v,{variant:a.variant,buttonStyle:a.buttonStyle,onClick:i,className:w(`h-8 gap-2`,a.className),disabled:!!e.disabled,children:[!!n&&(0,z.jsx)(n,{className:`h-4 w-4`}),e.label]},r)};function Pe({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:g=!1}){let _=oe(H,u),y=(0,R.useMemo)(()=>(l||[]).filter(e=>e.isVisible!==!1),[l]);return(0,z.jsxs)(`div`,{className:`flex items-center justify-between gap-4 mb-4`,children:[(0,z.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,z.jsx)(h,{tag:`h3`,className:`text-lg font-semibold`,children:n}),(0,z.jsx)(M,{value:{month:e.getMonth(),year:e.getFullYear()},onChange:e=>{e.date&&s?.(e.date)},fromYear:f?.getFullYear(),toYear:p?.getFullYear(),locale:c})]}),(0,z.jsxs)(`div`,{className:`flex items-center gap-2`,children:[y.length>0&&(0,z.jsxs)(z.Fragment,{children:[y.map((e,t)=>Ne(e,t)),(0,z.jsx)(`div`,{className:`h-6 w-px bg-border mx-1`})]}),(0,z.jsx)(v,{variant:`secondary`,buttonStyle:`outline`,onClick:a,className:`hidden sm:inline-flex`,children:_.today}),(0,z.jsxs)(`div`,{className:`flex items-center border border-border rounded-md`,children:[(0,z.jsx)(v,{variant:`secondary`,buttonStyle:`ghost`,size:`icon`,onClick:r,disabled:m,className:`h-8 w-8 rounded-r-none border-r`,"aria-label":_.previous,children:(0,z.jsx)(b,{className:`h-4 w-4`})}),(0,z.jsx)(v,{variant:`secondary`,buttonStyle:`ghost`,size:`icon`,onClick:i,disabled:g,className:`h-8 w-8 rounded-l-none`,"aria-label":_.next,children:(0,z.jsx)(ee,{className:`h-4 w-4`})})]}),!!o&&(0,z.jsxs)(j,{value:t,onValueChange:e=>{e&&o(e)},children:[(0,z.jsx)(k,{className:`w-28 h-8`,children:(0,z.jsx)(ce,{})}),(0,z.jsxs)(se,{children:[(0,z.jsx)(A,{value:`month`,children:_.viewMode.month}),(0,z.jsx)(A,{value:`week`,children:_.viewMode.week}),(0,z.jsx)(A,{value:`agenda`,children:_.viewMode.agenda})]})]})]})]})}Pe.displayName=`EventCalendarHeader`;var Fe={gray:{badgeBg:`bg-muted`,border:`border-border`,swatch:`bg-muted-foreground`},red:{badgeBg:`bg-destructive/10`,border:`border-destructive/40`,swatch:`bg-destructive`},orange:{badgeBg:`bg-warning/10`,border:`border-warning/40`,swatch:`bg-warning`},amber:{badgeBg:`bg-warning/10`,border:`border-warning/40`,swatch:`bg-warning`},yellow:{badgeBg:`bg-warning/10`,border:`border-warning/40`,swatch:`bg-warning`},green:{badgeBg:`bg-success/10`,border:`border-success/40`,swatch:`bg-success`},blue:{badgeBg:`bg-info/10`,border:`border-info/40`,swatch:`bg-info`},purple:{badgeBg:`bg-primary/10`,border:`border-primary/40`,swatch:`bg-primary`}};function Ie(e){let t=V(e);return{dot:B[t],...Fe[t]}}function Le({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,z.jsx)(`div`,{role:r?`group`:void 0,"aria-label":r?`Filter event categories`:void 0,className:w(`event-calendar-legend--component`,`flex flex-wrap items-center gap-1.5 py-1`),children:e.map(e=>{let t=a(e.id),n=Ie(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,z.jsxs)(z.Fragment,{children:[(0,z.jsx)(`span`,{className:w(`inline-block size-2 rounded-full`,t?n.swatch:`bg-muted-foreground/40`),"aria-hidden":`true`}),!!i&&(0,z.jsx)(i,{className:w(`size-3`,t?`text-foreground`:`text-muted-foreground`),"aria-hidden":`true`}),(0,z.jsx)(g,{tag:`span`,size:`xs`,weight:`medium`,type:t?`main`:`secondary`,children:e.label})]});return r?(0,z.jsx)(v,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`xs`,"aria-pressed":t,onClick:()=>o(e.id),className:w(s,`h-auto cursor-pointer shadow-none 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,z.jsx)(`span`,{className:w(s,`border-border bg-card cursor-default`),children:c},e.id)})})}Le.displayName=`EventCalendarLegend`;function Re({events:e,defaultDate:t=new Date,defaultViewMode:n=`month`,onDateChange:r,onViewModeChange:i,dataOptions:a={}}){let[s,l]=(0,R.useState)(t),[d,f]=(0,R.useState)(n),p=ke(e,s,d,a),m=(0,R.useMemo)(()=>a.visibleCategories&&a.visibleCategories.length>0?e.filter(e=>a.visibleCategories.includes(e.category)):e,[e,a.visibleCategories]);return{currentDate:s,viewMode:d,calendarDays:p,visibleEvents:m,goToToday:(0,R.useCallback)(()=>{let e=new Date;l(e),r?.(e)},[r]),goToNextPeriod:(0,R.useCallback)(()=>{let e=d===`month`?c(s,1):o(s,1);l(e),r?.(e)},[s,d,r]),goToPreviousPeriod:(0,R.useCallback)(()=>{let e=d===`month`?de(s,1):fe(s,1);l(e),r?.(e)},[s,d,r]),setDate:(0,R.useCallback)(e=>{l(e),r?.(e)},[r]),setViewMode:(0,R.useCallback)(e=>{f(e),i?.(e)},[i]),displayLabel:(0,R.useMemo)(()=>{if(d===`month`)return u(s,`MMMM yyyy`);if(d===`week`){let e=p[0]?.date,t=p[p.length-1]?.date;return e&&t?`${u(e,`MMM d`)} - ${u(t,`MMM d, yyyy`)}`:u(s,`MMMM yyyy`)}return u(s,`MMMM yyyy`)},[s,d,p]),hasEvents:(0,R.useMemo)(()=>m.length>0,[m])}}function ze(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 U({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:f,locale:p,enableCategoryFilter:m=!1,visibleCategories:h,onVisibleCategoriesChange:v,isLoading:y=!1,emptyStateMessage:b,className:ee,compact:te=!1,actions:ne,strings:re,dayHeadingVariant:x=`default`,dayHeadingClassName:ie,renderDayHeading:S,rangeMode:ae=`date`,minDate:C,maxDate:T,disabledDates:E,filterEvent:D,renderEvent:O,renderDayCell:k}){let A=oe(H,re),[se,ce]=(0,R.useState)([]),j=h??se,{weekStartsOn:le}=_(),M=f??le??1,ue=e=>{let t=j.includes(e)?j.filter(t=>t!==e):[...j,e];v?v(t):ce(t)},N=Re({events:e,defaultDate:i,defaultViewMode:n||`month`,onDateChange:a,onViewModeChange:r,dataOptions:{weekStartsOn:M,showWeekends:d,visibleCategories:j.length>0?j:void 0}}),P=(0,R.useMemo)(()=>{let e=A.weekdaysShort;return M===1?[...e.slice(1),e[0]]:e},[A.weekdaysShort,M]),de=e=>{ze(E,e.date)||C&&e.date<C||T&&e.date>T||s?.(e.date,e.events)},fe=(0,R.useMemo)(()=>D?N.calendarDays.map(e=>({...e,events:e.events.filter(D),eventCount:e.events.filter(D).length,hasMultipleEvents:e.events.filter(D).length>1})):N.calendarDays,[N.calendarDays,D]);function pe(e){return!!(ze(E,e)||C&&e<C||T&&e>T)}let F=(0,R.useMemo)(()=>{let e=N.calendarDays;if(e.length===0)return{prev:!1,next:!1};let t=e[0].date,n=e[e.length-1].date;return{prev:!!C&&t<=C,next:!!T&&n>=T}},[N.calendarDays,C,T]);if(y)return(0,z.jsx)(`div`,{className:w(`event-calendar--component`,`flex items-center justify-center py-12`),children:(0,z.jsx)(g,{type:`secondary`,children:A.loading})});let me=n?r:void 0,I=m?ue:void 0;return(0,z.jsxs)(`div`,{className:w(`w-full space-y-4`,ee),children:[!!u&&(0,z.jsx)(Pe,{currentDate:N.currentDate,viewMode:N.viewMode,displayLabel:N.displayLabel,onPrevious:N.goToPreviousPeriod,onNext:N.goToNextPeriod,onToday:N.goToToday,onViewModeChange:me,onDateChange:N.setDate,locale:p,actions:ne,rangeMode:ae,minDate:C,maxDate:T,prevDisabled:F.prev,nextDisabled:F.next,strings:{today:A.today,previous:A.previous,next:A.next,viewMode:A.viewMode}}),!!l&&t.length>0&&(0,z.jsx)(Le,{categories:t,visibleCategories:j,onToggleCategory:I,enableFiltering:m}),!N.hasEvents&&b?(0,z.jsx)(`div`,{className:`flex items-center justify-center py-12 border border-dashed border-border rounded-lg`,children:(0,z.jsx)(g,{type:`secondary`,children:b})}):(0,z.jsxs)(`div`,{className:`bg-background rounded-lg border border-border`,children:[(0,z.jsx)(`div`,{className:w(`grid grid-cols-7`,x===`bordered`&&`border-b border-border mb-0`,x===`tinted`&&`bg-muted/40 rounded-t-lg mb-0 overflow-hidden`,x===`accent`&&`bg-primary/8 rounded-t-lg mb-0 overflow-hidden`,x==="default"&&`mb-2`),children:P.map((e,t)=>S?(0,z.jsx)(`div`,{children:S(e,t)},e):(0,z.jsx)(`div`,{className:w(`text-center h-8 flex items-center justify-center`,ie),children:(0,z.jsx)(g,{size:`xs`,weight:x===`accent`?`medium`:`regular`,className:w(x==="default"&&`text-muted-foreground`,x===`tinted`&&`text-muted-foreground`,x===`bordered`&&`text-foreground`,x===`accent`&&`text-primary`),children:e})},e))}),(0,z.jsx)(`div`,{className:`grid grid-cols-7`,children:fe.map(e=>{let n=pe(e.date),r=()=>(0,z.jsx)(je,{data:e,categories:t,maxEvents:c,onClick:()=>de(e),compact:te,strings:{booking:A.booking,bookings:A.bookings},renderEvent:O});return(0,z.jsx)(`div`,{className:w(n&&`pointer-events-none opacity-40`),"aria-disabled":n||void 0,children:k?k(e,r):r()},e.date.toISOString())})})]})]})}U.displayName=`EventCalendar`;var Be=e({DayHeadingVariantAccent:()=>We,DayHeadingVariantBordered:()=>Ue,DayHeadingVariantTinted:()=>He,Default:()=>q,FilterEventRenderEventCustomEventRendering:()=>X,NavigationLimitsDisabledDates:()=>Y,RangeModeMonthYearCompactMonthYearJump:()=>J,WithCustomStringsBG:()=>Z}),Ve=new Date;function W(e,t=10){let n=new Date(Ve);return n.setDate(n.getDate()+e),n.setHours(t,0,0,0),n}var G=[{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}],K=[{id:`1`,title:`Couples Spa`,category:`spa`,startDate:W(0,14)},{id:`2`,title:`Wine Tasting`,category:`wine`,startDate:W(2,18)},{id:`3`,title:`Hot Air Balloon`,category:`adventure`,startDate:W(4,6)},{id:`4`,title:`Hot Stone Massage`,category:`spa`,startDate:W(7,10)},{id:`5`,title:`Sommelier Tour`,category:`wine`,startDate:W(7,18)},{id:`6`,title:`Paragliding`,category:`adventure`,startDate:W(11,9)},{id:`7`,title:`Aroma Therapy`,category:`spa`,startDate:W(14,11)}];function q(){let[e,t]=(0,R.useState)([]);return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,enableCategoryFilter:!0,visibleCategories:e,onVisibleCategoriesChange:t})})}function J(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,rangeMode:`month-year`})})}function Y(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,minDate:W(-30),maxDate:W(60),disabledDates:e=>e.getDay()===0})})}function X(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,filterEvent:e=>e.category!==`wine`,renderEvent:(e,t)=>(0,z.jsxs)(`div`,{className:`truncate rounded-sm bg-foreground/8 px-1.5 py-0.5 text-[length:var(--text-xxs)] text-foreground`,children:[t?.label?.split(` `)[0]??``,` · `,e.title]})})})}function He(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,dayHeadingVariant:`tinted`})})}function Ue(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,dayHeadingVariant:`bordered`})})}function We(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,dayHeadingVariant:`accent`})})}function Z(){return(0,z.jsx)(z.Fragment,{children:(0,z.jsx)(U,{events:K,categories:G,locale:De,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="truncate rounded-sm bg-foreground/8 px-1.5 py-0.5 text-[length:var(--text-xxs)] text-foreground">
+										{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 Ge(e){let t={code:`code`,p:`p`,...e.components};return Be||$(`Examples`,!1),We||$(`Examples.DayHeadingVariantAccent`,!0),Ue||$(`Examples.DayHeadingVariantBordered`,!0),He||$(`Examples.DayHeadingVariantTinted`,!0),q||$(`Examples.Default`,!0),X||$(`Examples.FilterEventRenderEventCustomEventRendering`,!0),Y||$(`Examples.NavigationLimitsDisabledDates`,!0),J||$(`Examples.RangeModeMonthYearCompactMonthYearJump`,!0),Z||$(`Examples.WithCustomStringsBG`,!0),(0,z.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,z.jsx)(m,{title:`Overview`,id:`overview`,children:(0,z.jsxs)(t.p,{children:[(0,z.jsx)(t.code,{children:`EventCalendar`}),` is the canonical month view — pass `,(0,z.jsx)(t.code,{children:`events`}),` and optional
+`,(0,z.jsx)(t.code,{children:`categories`}),`, drive filtering with `,(0,z.jsx)(t.code,{children:`enableCategoryFilter`}),` / `,(0,z.jsx)(t.code,{children:`visibleCategories`}),`
+or imperatively with `,(0,z.jsx)(t.code,{children:`filterEvent`}),`, and slot a custom renderer with
+`,(0,z.jsx)(t.code,{children:`renderEvent`}),`. Navigation can be capped via `,(0,z.jsx)(t.code,{children:`minDate`}),` / `,(0,z.jsx)(t.code,{children:`maxDate`}),` and
+`,(0,z.jsx)(t.code,{children:`disabledDates`}),`, and every string + locale is overridable.`]})}),(0,z.jsx)(m,{title:`Default`,id:`default`,children:(0,z.jsx)(y,{name:`Default`,source:Q,children:(0,z.jsx)(q,{})})}),(0,z.jsxs)(m,{title:`Navigation modes`,id:`navigation`,children:[(0,z.jsx)(y,{name:`RangeModeMonthYearCompactMonthYearJump`,source:Q,children:(0,z.jsx)(J,{})}),(0,z.jsx)(y,{name:`NavigationLimitsDisabledDates`,source:Q,children:(0,z.jsx)(Y,{})})]}),(0,z.jsxs)(m,{title:`Day-heading variants`,id:`day-heading`,children:[(0,z.jsx)(y,{name:`DayHeadingVariantTinted`,source:Q,children:(0,z.jsx)(He,{})}),(0,z.jsx)(y,{name:`DayHeadingVariantBordered`,source:Q,children:(0,z.jsx)(Ue,{})}),(0,z.jsx)(y,{name:`DayHeadingVariantAccent`,source:Q,children:(0,z.jsx)(We,{})})]}),(0,z.jsxs)(m,{title:`Customisation`,id:`custom`,children:[(0,z.jsx)(y,{name:`FilterEventRenderEventCustomEventRendering`,source:Q,children:(0,z.jsx)(X,{})}),(0,z.jsx)(y,{name:`WithCustomStringsBG`,source:Q,children:(0,z.jsx)(Z,{})})]}),(0,z.jsx)(m,{title:`API`,id:`api`,children:(0,z.jsx)(le,{component:`EventCalendar`})})]})}function Ke(e={}){let{wrapper:t}=e.components||{};return t?(0,z.jsx)(t,{...e,children:(0,z.jsx)(Ge,{...e})}):Ge(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ke as default};

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

@@ -0,0 +1,330 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,qr as o,t as s}from"./example-Cz_880po.js";import{o as c,r as l,t as u}from"./comment-composer-DeURrlgL.js";import{t as d}from"./bell-C80n9VRl.js";import{t as f}from"./circle-check-1MSds3Vu.js";import{t as p}from"./circle-V5hdlsIn.js";import{t as m}from"./comment-item-D07Qk-Nt.js";import{t as h}from"./credit-card-CAI3F3HB.js";import{t as g}from"./git-branch-Dl3AzbqP.js";import{t as _}from"./package-CjcwDJKu.js";import{t as v}from"./shield-alert-DWsbR2jn.js";import{t as y}from"./user-BZog6aIh.js";import{k as b,n as x,s as S}from"./index-BQIv1ffM.js";import{t as C}from"./props-table-2pIZzGC-.js";import{t as w}from"./smart-card-Dhu_1A_u.js";var T={listAriaLabel:`Activity timeline`,emptyMessage:`No activity yet.`},E=S(),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 i=e.icon??p,o=e.tone??`secondary`,s=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:x(`flex size-6 shrink-0 items-center justify-center rounded-full ring-1 ring-foreground/[0.04]`,D[o]),children:(0,E.jsx)(i,{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)(a,{tag:`span`,weight:`semibold`,children:e.actor}),!!e.action&&(0,E.jsx)(a,{tag:`span`,type:`secondary`,children:e.action}),!!e.target&&(0,E.jsx)(a,{tag:`span`,weight:`medium`,children:e.target}),!!e.headline&&!e.action&&!e.target&&(0,E.jsx)(a,{tag:`span`,children:e.headline}),!!s&&(0,E.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,className:`ml-auto shrink-0 tabular-nums`,children:s})]}),!!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)(a,{size:`xs`,type:`secondary`,className:`inline-flex items-baseline gap-1`,children:[(0,E.jsxs)(a,{tag:`span`,size:`xs`,type:`discrete`,children:[e.label,`:`]}),(0,E.jsx)(a,{tag:`span`,size:`xs`,type:`secondary`,children:e.value})]},e.label))})]})]})},k=t(n(),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:n=`desc`,resources:r,onResourceSearch:i,canModerate:s,onCommentDelete:c,onCommentReact:l,onCommentReply:d,onCommentPinToggle:f,strings:p,eventLogStrings:h,renderers:g,composer:_,bare:v=!1,title:y,getMediaUrl:S,getMediaName:C,getStatusLabel:D,formatRelativeTime:M,className:N}=e,P=r,F=i,I=(0,k.useMemo)(()=>j(t,n),[t,n]),L=b(T,h),{formatRelativeTime:R}=o(),z=M??R??(e=>e),B=(e,t,n)=>{let r=t===n-1,i=g?.[e.kind];if(i)return(0,E.jsx)(k.Fragment,{children:i(e,{resources:P,accessors:{getMediaUrl:S,getMediaName:C,getStatusLabel:D,formatRelativeTime:z},strings:p})},e.id);if(e.kind===`comment`){let t=e;return(0,E.jsx)(`li`,{className:x(`event-log--item`,`relative`),"data-event-id":t.id,children:(0,E.jsx)(m,{comment:t.comment,canModerate:s,onDelete:c,onPinToggle:f,onReact:l,onReply:d,strings:p,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=_?.enabled?(0,E.jsx)(`div`,{children:(0,E.jsx)(u,{context:_.context,canComment:!0,onSubmit:A(_.onSubmit),resources:P,onResourceSearch:F,placeholder:_.placeholder,autoFocus:_.autoFocus})}):null,H=_?.position??`top`,U=I.length===0?(0,E.jsx)(a,{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:x(v&&`event-log--component`,`flex flex-col gap-4`,v&&N),children:[H===`top`&&V,U,H===`bottom`&&V]});return v?W:(0,E.jsx)(w,{title:y,padding:`sm`,className:x(`event-log--component`,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)(a,{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)(`div`,{className:`w-full max-w-3xl`,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)(`div`,{className:`w-full max-w-3xl`,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 (
+		<>
+			<div className="w-full max-w-3xl">
+				<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,
+			                    }}
+			                />
+			</div>
+		</>
+	);
+}
+
+export function ReadOnlyTimelineNoComposer() {
+	const [entries] = useState<typeof INITIAL_ENTRIES>(INITIAL_ENTRIES);
+	return (
+		<>
+			<div className="w-full max-w-3xl">
+				<EventLog
+			                    entries={entries.slice(0, 4)}
+			                    order="asc"
+			                    resources={RESOURCES}
+			                />
+			</div>
+		</>
+	);
+}
+`;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)(i,{title:`Examples`,id:`examples`,children:[(0,E.jsx)(s,{name:`APISurface`,source:q,children:(0,E.jsx)(W,{})}),(0,E.jsx)(s,{name:`CommentsEventsUnderOneLog`,source:q,children:(0,E.jsx)(G,{})}),(0,E.jsx)(s,{name:`ReadOnlyTimelineNoComposer`,source:q,children:(0,E.jsx)(K,{})})]}),(0,E.jsxs)(i,{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};