@g4rcez/components 4.1.2 → 5.0.0

package/dist/{components → src/components}/page-calendar/month-view.jsx

@@ -12,7 +12,7 @@ export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDay
             <ul role="row" aria-hidden="true" className="grid grid-cols-7 border-b border-border">
                 {WEEKDAY_LABELS.map((date) => {
             const day = formatWeekDay(date, locale);
-            return (<li key={day} className="py-2 text-center text-xs font-medium text-muted-foreground">
+            return (<li key={day} className="py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground">
                             {day}
                         </li>);
         })}
@@ -23,18 +23,18 @@ export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDay
             const events = eventsByDate.get(key) || [];
             const isCurrentMonth = isSameMonth(day, currentDate);
             const isCurrentDay = isToday(day);
-            return (<button key={idx} type="button" onClick={() => onDayClick(day)} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className={`group flex min-h-32 cursor-pointer flex-col gap-1 border-b border-r border-border p-2 transition-colors hover:bg-muted hover:bg-opacity-20 ${!isCurrentMonth ? "opacity-50" : ""}`}>
+            return (<button key={idx} type="button" onClick={() => onDayClick(day)} aria-label={`${formatFullDate(day, locale)}${events.length > 0 ? `, ${t.pageCalendarEventCount(events.length)}` : ""}`} className={`group flex min-h-page-calendar-cell-min-h cursor-pointer flex-col gap-page-calendar-cell-gap border-b border-r border-border p-page-calendar-cell-p transition-colors hover:bg-muted hover:bg-opacity-20 ${!isCurrentMonth ? "opacity-50" : ""}`}>
                             <div className="flex items-center justify-between">
-                                <span className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                                <span className={`flex size-page-calendar-month-badge-size items-center justify-center rounded-full text-page-calendar-month-badge-text font-medium ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
                                     {formatDay(day, locale)}
                                 </span>
-                                <span aria-hidden="true" className="text-lg leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
+                                <span aria-hidden="true" className="text-page-calendar-overflow-text leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
                                     +
                                 </span>
                             </div>
                             <div className="min-h-0 flex-1 overflow-y-auto">
-                                <div className="flex flex-col gap-0.5">
-                                    {events.map((event) => (<div key={event.id} onClick={(e) => e.stopPropagation()}>
+                                <div className="flex flex-col gap-page-calendar-cell-gap-tight">
+                                    {events.map((event) => (<div key={event.id} role="presentation" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
                                             <EventPill compact event={event} onClick={() => onEventClick(event)}/>
                                         </div>))}
                                 </div>

package/dist/src/components/page-calendar/page-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/page-calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAOxG,KAAK,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,IAAI;IAClD,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACrD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACzD,CAAC;AAIF,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,EAAE,EACtD,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,OAAc,EACd,WAAqB,EACrB,eAAe,EAAE,qBAAqB,GACzC,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAyEtB"}

package/dist/{components → src/components}/page-calendar/page-calendar.jsx

@@ -23,7 +23,7 @@ export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSl
             return events;
         const get = getFilterId ?? ((e) => e?.filterId);
         return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);
-    }, [events, internalFilters, filters]);
+    }, [events, internalFilters, filters, getFilterId]);
     const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);
     const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);
     const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);
@@ -32,7 +32,7 @@ export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSl
         setCurrentDate(date);
         setCurrentView("day");
     };
-    return (<div role="application" aria-label={t.pageCalendarLabel} className="flex h-full w-full flex-grow flex-col gap-4">
+    return (<div role="application" aria-label={t.pageCalendarLabel} className="flex h-full w-full flex-grow flex-col gap-page-calendar-gap">
             <CalendarHeader filters={internalFilters} filterArea={filterArea} onAddEvent={onAddEvent} currentDate={currentDate} currentView={currentView} setCurrentDate={setCurrentDate} setCurrentView={setCurrentView} onToggleFilter={toggleFilter}/>
             {currentView === "month" && (<MonthView days={monthDays} currentDate={currentDate} eventsByDate={eventsByDate} onDayClick={handleDayClick} onEventClick={handleEventClick}/>)}
             {currentView === "week" && (<WeekView days={weekDays} currentDate={currentDate} onSlotClick={onSlotClick} eventsByDate={eventsByDate} onEventClick={handleEventClick}/>)}

package/dist/src/components/page-calendar/page-calendar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/page-calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,IAAI,CAAC,GAAG;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC5B,CAAC"}

package/dist/src/components/page-calendar/page-calendar.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/page-calendar.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAEzC;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAY1H;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,CAQ/C;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,CAO9C;AAED,wBAAgB,YAAY,IAAI,MAAM,EAAE,CAEvC;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEnE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAElE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEhD;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,IAAI;IACnD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,iBAAiB,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,CAoB7G"}

package/dist/src/components/page-calendar/week-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"week-view.d.ts","sourceRoot":"","sources":["../../../../src/components/page-calendar/week-view.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,aAAa,GAAG;IACjB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;IAC3C,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC,CAAC;AAQF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,aAAa,+BAwFxF"}

package/dist/{components → src/components}/page-calendar/week-view.jsx

@@ -22,21 +22,21 @@ export function WeekView({ days, eventsByDate, onEventClick, onSlotClick }) {
     }, []);
     return (<div className="flex flex-1 flex-col overflow-hidden">
             <div className="flex flex-shrink-0 border-b border-border">
-                <div className="w-[60px] flex-shrink-0"/>
+                <div className="w-page-calendar-gutter-w flex-shrink-0"/>
                 {days.map((day, idx) => {
             const isCurrentDay = isToday(day);
-            return (<div key={idx} aria-label={formatFullDate(day, locale)} className="flex-1 py-2 text-center text-xs font-medium text-muted-foreground">
+            return (<div key={idx} aria-label={formatFullDate(day, locale)} className="flex-1 py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground">
                             <span className="block">{formatWeekdayShort(day, locale)}</span>
-                            <span className={`inline-flex h-6 w-6 items-center justify-center rounded-full text-sm font-bold ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
+                            <span className={`inline-flex size-page-calendar-week-badge-size items-center justify-center rounded-full text-page-calendar-week-badge-text font-bold ${isCurrentDay ? "bg-primary text-primary-foreground" : "text-foreground"}`}>
                                 {formatDay(day, locale)}
                             </span>
                         </div>);
         })}
             </div>
             <div ref={scrollBodyRef} className="flex flex-1 items-start overflow-y-auto">
-                <div className="w-[60px] flex-shrink-0">
+                <div className="w-page-calendar-gutter-w flex-shrink-0">
                     {hours.map((hour) => (<div key={hour} className="relative" style={{ height: HOUR_HEIGHT }}>
-                            <span className="absolute -top-2.5 right-2 text-[10px] text-muted-foreground">
+                            <span className="absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground">
                                 {hour === 0 ? "" : formatHourLabel(hour, locale)}
                             </span>
                             {hour === new Date().getHours() && <div ref={currentHourRef}/>}
@@ -49,19 +49,14 @@ export function WeekView({ days, eventsByDate, onEventClick, onSlotClick }) {
                             {hours.map((hour) => {
                     const slotDate = new Date(day);
                     slotDate.setHours(hour, 0, 0, 0);
-                    return (<div key={hour} role="button" tabIndex={0} aria-label={formatHourLabel(hour, locale)} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)} onKeyDown={(e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                onSlotClick?.(slotDate);
-                            }
-                        }}/>);
+                    return (<button key={hour} type="button" aria-label={formatHourLabel(hour, locale)} className="w-full cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)}/>);
                 })}
-                            {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} className="absolute" style={{
+                            {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (<div key={event.id} role="presentation" className="absolute" style={{
                         top: getTopOffset(event),
                         height: HOUR_HEIGHT,
                         left: `calc(${(columnIndex / columnCount) * 100}% + 1px)`,
                         width: `calc(${100 / columnCount}% - 2px)`,
-                    }} onClick={(e) => e.stopPropagation()}>
+                    }} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
                                     <EventPill event={event} onClick={() => onEventClick(event)}/>
                                 </div>))}
                         </div>);

package/dist/src/components/table/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAE1H,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAEnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;AAEhE,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,GAAG,EAC7C,GAAG,GAAG,CAAC,CAAC,CAAC,EACT,SAAS,gBAAgB,EACzB,YAAY,UAAU,EACtB,OAAM,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAM,KACpC,YAAY,CAAC,CAAC,CAehB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CA8DxB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0GvD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,2BAA2B,uBAAuB,CAAC,CAAC,CAAC,sBAiDzG,CAAC"}

package/dist/{components → src/components}/table/filter.jsx

@@ -12,7 +12,15 @@ export const createFilterFromCol = (f, options, operations, rest = {}) => {
     const typeOptions = options[type] ?? [];
     const operatorId = (typeOptions.find((x) => x["data-default"])?.value ?? typeOptions[0]?.value);
     const operation = operations[operatorId];
-    return { id: uuid(), operation, label: getLabel(f), name, type, value: "", ...rest };
+    return {
+        id: uuid(),
+        operation,
+        label: getLabel(f),
+        name,
+        type,
+        value: "",
+        ...rest,
+    };
 };
 export const useOperators = () => {
     const translation = useTranslations();
@@ -24,16 +32,36 @@ export const useOperators = () => {
             "data-default": "true",
         },
         is: { value: "is", label: translation.tableFilterTypeIs, symbol: "is" },
-        isNot: { value: "isNot", label: translation.tableFilterTypeIsNot, symbol: "!==" },
+        isNot: {
+            value: "isNot",
+            label: translation.tableFilterTypeIsNot,
+            symbol: "!==",
+        },
         notContains: {
             value: "notContains",
             label: translation.tableFilterTypeNotContains,
             symbol: "notIncludes",
         },
-        lessThan: { value: "lessThan", label: translation.tableFilterTypeLessThan, symbol: "<=" },
-        greaterThan: { value: "greaterThan", label: translation.tableFilterTypeGreaterThan, symbol: ">=" },
-        startsWith: { value: "startsWith", label: translation.tableFilterTypeStartsWith, symbol: "startsWith" },
-        endsWith: { value: "endsWith", label: translation.tableFilterTypeEndsWith, symbol: "endsWith" },
+        lessThan: {
+            value: "lessThan",
+            label: translation.tableFilterTypeLessThan,
+            symbol: "<=",
+        },
+        greaterThan: {
+            value: "greaterThan",
+            label: translation.tableFilterTypeGreaterThan,
+            symbol: ">=",
+        },
+        startsWith: {
+            value: "startsWith",
+            label: translation.tableFilterTypeStartsWith,
+            symbol: "startsWith",
+        },
+        endsWith: {
+            value: "endsWith",
+            label: translation.tableFilterTypeEndsWith,
+            symbol: "endsWith",
+        },
     }), [translation]);
     const options = useMemo(() => ({
         [ColType.Text]: [
@@ -86,14 +114,14 @@ export const Filter = (props) => {
         props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
     };
     return (<Fragment>
-            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
                         <FunnelIcon size={14}/>
                         {translation.tableFilterLabel} {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
                     </span>}>
-                <ul className="mt-4 space-y-2">
+                <ul className="mt-table-filter-list-mt space-y-2">
                     {props.filters.map((filter) => {
             const options = operators.options[filter.type];
-            return (<li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-3">
+            return (<li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-table-filter-row-gap">
                                 <Select options={props.options} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder} value={filter.name} data-id={filter.id} onChange={onSelectProperty}/>
                                 <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={options} title={translation.tableFilterOperatorTitle} placeholder={translation.tableFilterOperatorPlaceholder}/>
                                 <Input optionalText="" data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValuePlaceholder}/>
@@ -105,7 +133,7 @@ export const Filter = (props) => {
                             </li>);
         })}
                     <li>
-                        <button type="button" onClick={onAddFilter} className="flex items-center gap-1 text-primary">
+                        <button type="button" onClick={onAddFilter} className="flex items-center gap-table-inline-gap-tight text-primary">
                             <PlusIcon size={14}/> {translation.tableFilterNewFilter}
                         </button>
                     </li>
@@ -131,7 +159,7 @@ export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
         const value = valueFromType(e.target);
         set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
     };
-    return (<div className="flex flex-nowrap items-center gap-4 py-2">
+    return (<div className="flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py">
             <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={operators.options[filter.type]} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder}/>
             <Input optionalText=" " data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValueTitle}/>
             <button onClick={onDelete} data-id={filter.id} type="button" className="mt-4">

package/dist/src/components/table/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../../src/components/table/group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,GAAG,EAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CACJ,CAAC;AAqBF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBAmFtD,CAAC"}

package/dist/{components → src/components}/table/group.jsx

@@ -34,25 +34,32 @@ export const Group = (props) => {
         const col = props.cols.find((x) => x.id === key);
         props.setGroups(keys(groupBy).map((groupName, index) => {
             const rows = groupBy[groupName];
-            return { ...col, groupId: uuid(), groupKey: key, index, rows, groupName: groupName };
+            return {
+                ...col,
+                groupId: uuid(),
+                groupKey: key,
+                index,
+                rows,
+                groupName: groupName,
+            };
         }));
     };
     const onDelete = () => props.setGroups([]);
     return (<Fragment>
-            <Dropdown arrow={false} title={translations.tableGroupLabel} trigger={<span className="flex items-center gap-1 proportional-nums">
+            <Dropdown arrow={false} title={translations.tableGroupLabel} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
                         <StackMinusIcon size={14}/>
                         {translations.tableGroupLabelWithCount}
                         {props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""}
                     </span>}>
                 <div className="flex flex-nowrap items-center">
                     <Select value={group} title="Tipo de agrupamento" onChange={onChange} options={options} placeholder="Agrupar por..."/>
-                    <Button className="mt-4" onClick={onDelete} theme="raw" data-id={group}>
+                    <Button className="mt-table-groups-mt" onClick={onDelete} theme="raw" data-id={group}>
                         <TrashIcon size={16} className="text-danger"/>
                     </Button>
                 </div>
-                {props.groups.length > 0 ? (<section className="my-4">
+                {props.groups.length > 0 ? (<section className="my-table-groups-my">
                         <header>
-                            <h2 className="text-xl font-medium">Order groups</h2>
+                            <h2 className="text-typography-xl font-medium">Order groups</h2>
                         </header>
                         <LayoutGroup>
                             <Reorder.Group axis="y" className="relative space-y-2" drag dragControls={controls} dragListener={false} layoutScroll onReorder={props.setGroups} values={props.groups}>

package/dist/src/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAuC,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzI,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CACjD,CACJ,CAAC;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCA2H5E,CAAC"}

package/dist/{components → src/components}/table/index.jsx

@@ -24,7 +24,10 @@ export const Table = (props) => {
     }, (get) => {
         const create = (key) => (arg) => {
             const state = get.state();
-            return { ...state, [key]: dispatcherFun(state[key], arg) };
+            return {
+                ...state,
+                [key]: dispatcherFun(state[key], arg),
+            };
         };
         return {
             cols: create("cols"),
@@ -50,7 +53,7 @@ export const Table = (props) => {
     return (<TableProvider value={contextState}>
             <AnimatePresence propagate initial={false}>
                 {operations ? (<Metadata cols={state.cols} rows={props.rows} options={optionCols} groups={state.groups} filters={state.filters} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : null}
-                {state.groups.length === 0 ? (<InnerTable {...props} index={0} cols={state.cols} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : (<div className="flex flex-wrap gap-4">
+                {state.groups.length === 0 ? (<InnerTable {...props} index={0} cols={state.cols} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : (<div className="flex flex-wrap gap-table-groups-gap">
                         {state.groups.map((group, index) => (<div className="min-w-full" key={`group-${group.groupId}`}>
                                 <InnerTable {...props} group={group} index={index} cols={state.cols} pagination={null} rows={group.rows} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>
                             </div>))}

package/dist/{components → src/components}/table/inner-table.d.ts

@@ -4,7 +4,8 @@ import { FilterConfig } from "./filter";
 import { GroupItem } from "./group";
 import { Sorter } from "./sort";
 import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
-export type InnerTableProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+import { Any } from "../../types";
+export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
     rows: T[];
     index: number;
     cols: Col<T>[];

package/dist/src/components/table/inner-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM7H,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAYlC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACzE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AAmFN,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,0HAY3D,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}

package/dist/{components → src/components}/table/inner-table.jsx

@@ -26,14 +26,14 @@ const Thead = React.forwardRef(({ context: _context, ...props }, ref) => {
 const TRow = React.forwardRef(({ context, item, className, ...props }, ref) => {
     const contextProps = item ? context?.getRowProps?.(item) : undefined;
     const innerProps = { ...props, ...contextProps };
-    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row flex h-fit flex-col flex-wrap justify-center gap-1 pb-4 md:table-row ${[className, contextProps?.className].filter(Boolean).join(" ")}`}/>);
+    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row flex h-fit flex-col flex-wrap justify-center gap-table-row-gap pb-table-row-pb md:table-row ${[className, contextProps?.className].filter(Boolean).join(" ")}`}/>);
 });
 const TFoot = React.forwardRef(({ context, ...props }, ref) => {
     if (context?.loadingMore) {
         return (<tfoot {...props} ref={ref} className="bg-card-background">
                 <tr role="row" className="bg-card-background">
-                    <td colSpan={999} className="h-14 bg-card-background px-2">
-                        <span className="block h-2 w-full animate-pulse rounded bg-foreground opacity-60"/>
+                    <td colSpan={999} className="h-table-loading-h bg-card-background px-table-cell-px">
+                        <span className="rounded-table-loading-bar-radius block h-table-loading-bar-h w-full animate-pulse bg-foreground opacity-60"/>
                     </td>
                 </tr>
             </tfoot>);
@@ -48,7 +48,7 @@ const components = {
     TableBody: TableBody,
 };
 const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-const EmptyContent = (props) => (<div className="flex h-48 w-full items-center justify-center px-2">{props.loading ? SkeletonCell : <Empty />}</div>);
+const EmptyContent = (props) => (<div className="flex h-table-empty-h w-full items-center justify-center px-table-cell-px">{props.loading ? SkeletonCell : <Empty />}</div>);
 const EmptyCell = () => <Fragment />;
 const emptyRows = [];
 export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination = null, useControl = false, ...props }) => {
@@ -93,7 +93,7 @@ export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSor
         getRowProps: props.getRowProps,
         loadingMore: props.loadingMore,
     };
-    return (<div className="group relative flex w-full flex-col whitespace-nowrap rounded-lg bg-table-background">
+    return (<div className="group relative flex w-full flex-col whitespace-nowrap rounded-table-radius bg-table-background">
             <TableVirtuoso components={components} context={context} totalCount={rows.length} itemContent={empty ? EmptyCell : Row} data={empty ? emptyRows : rows} useWindowScroll={getScrollRef ? false : true} customScrollParent={getScrollRef ? getScrollRef() : undefined} fixedHeaderContent={() => (<TableHeader headers={cols} filters={filters} setCols={setCols} sorters={sorters} setFilters={setFilters} setSorters={setSorters} loading={!!props.loading} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter}/>)}/>
             {empty ? <EmptyContent loading={props.loading}/> : null}
             <div aria-hidden="true" ref={ref} className="h-0.5 w-full"/>

package/dist/src/components/table/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIlC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,mBAAmB,CAAC,CAAC,CAAC,gCA8CpE,CAAC"}

package/dist/{components → src/components}/table/metadata.jsx

@@ -2,9 +2,9 @@ import { Filter } from "./filter";
 import { Group } from "./group";
 import { Sort } from "./sort";
 import { valueFromType } from "./table-lib";
-export const Metadata = (props) => (<header className="mb-1 min-w-full">
-        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-4 gap-y-1">
-            <div className="items-centeend flex w-fit gap-4 whitespace-nowrap py-2">
+export const Metadata = (props) => (<header className="mb-table-metadata-mb min-w-full">
+        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-table-metadata-gap-x gap-y-table-metadata-gap-y">
+            <div className="items-centeend flex w-fit gap-table-ops-gap whitespace-nowrap py-table-ops-py">
                 <span>
                     <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters}/>
                 </span>
@@ -15,13 +15,13 @@ export const Metadata = (props) => (<header className="mb-1 min-w-full">
                     <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols}/>
                 </span>
             </div>
-            <ul className="flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-4 md:justify-end">
-                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex items-center gap-1 rounded-xl border border-card-border px-4 py-0.5">
+            <ul className="flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-table-filter-gap md:justify-end">
+                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="rounded-table-pill-radius flex items-center gap-table-inline-gap-tight border border-card-border px-table-pill-px py-table-pill-py">
                         <span>
-                            <span className="mr-2 inline-block aspect-square size-3 rounded-full bg-primary" aria-hidden="true"/>
+                            <span className="mr-table-filter-dot-mr inline-block aspect-square size-table-filter-dot-size rounded-full bg-primary" aria-hidden="true"/>
                             {x.label} {x.operation.label.toLowerCase()}:
                         </span>
-                        <div className="relative w-min min-w-[1ch]">
+                        <div className="relative w-min min-w-table-metadata-min-w">
                             <span aria-hidden="true" className="invisible whitespace-pre p-0">
                                 {x.value || " "}
                             </span>

package/dist/src/components/table/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,uBAmBjE;AAED,eAAO,MAAM,UAAU,GAAI,YAAY,eAAe,sBA4ErD,CAAC"}

package/dist/{components → src/components}/table/pagination.jsx

@@ -29,10 +29,10 @@ export function createPaginationItems(current, max) {
 export const Pagination = (pagination) => {
     const id = useId();
     const translation = useTranslations();
-    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
+    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination]);
     const hasNext = pagination.current < pagination.pages;
     const Link = pagination.asLink ?? "button";
-    return (<footer className="flex flex-wrap items-center justify-center gap-4 border-t-muted p-3 text-sm lg:flex-nowrap lg:justify-between">
+    return (<footer className="text-typography-sm flex flex-wrap items-center justify-center gap-table-pag-gap border-t-muted p-table-pag-p lg:flex-nowrap lg:justify-between">
             <p>
                 <translation.tablePaginationFooter {...pagination} sizes={pagination.sizes} select={pagination.onChangeSize && Array.isArray(pagination.sizes) ? (<Fragment>
                                 <label htmlFor={id}>{translation.tablePaginationSelectLabel}</label>
@@ -46,7 +46,7 @@ export const Pagination = (pagination) => {
                             </Fragment>) : null}/>
             </p>
             <nav>
-                <ul className="flex items-center gap-2">
+                <ul className="flex items-center gap-table-pag-items-gap">
                     {pagination.current > 1 ? (<li>
                             <Polymorph as={Link} href="previous" className="">
                                 {translation.tablePaginationPrevious}
@@ -57,7 +57,7 @@ export const Pagination = (pagination) => {
                 return null;
             return (<Fragment key={`pagination-${x}`}>
                                 {typeof x === "string" ? (<li>...</li>) : (<li>
-                                        <Polymorph href={x} as={Link} className={`cursor-pointer border-b-2 px-3 py-1 proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${x === pagination.current ? "border-primary text-primary" : "border-transparent"}`}>
+                                        <Polymorph href={x} as={Link} className={`cursor-pointer border-b-2 px-table-pag-item-px py-table-pag-item-py proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${x === pagination.current ? "border-primary text-primary" : "border-transparent"}`}>
                                             {x}
                                         </Polymorph>
                                     </li>)}

package/dist/src/components/table/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACzD,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAC;AAoCF,eAAO,MAAM,GAAG,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,sBAgD3G,CAAC"}

package/dist/{components → src/components}/table/row.jsx

@@ -33,11 +33,11 @@ export const Row = (index, row, context) => {
             const className = col.cellProps?.className || "";
             const exposeAside = colIndex === 0 && context.Aside && loading === false;
             const Aside = context.Aside;
-            return (<td {...col.cellProps} role="cell" data-matrix={matrix} key={`accessor-${index}-${colIndex}`} className={`typography group-table-cell flex border-collapse flex-col whitespace-pre-wrap border border-y border-b border-table-border p-[var(--table-cell-padding)] md:table-cell md:border-b-0 md:border-r md:border-l-transparent md:last:border-r-transparent ${className}`}>
+            return (<td {...col.cellProps} role="cell" data-matrix={matrix} key={`accessor-${index}-${colIndex}`} className={`typography group-table-cell flex border-collapse flex-col whitespace-pre-wrap border border-y border-b border-table-border p-table-cell-padding md:table-cell md:border-b-0 md:border-r md:border-l-transparent md:last:border-r-transparent ${className}`}>
                         {exposeAside ? (<RowAside>
                                 <Aside col={col} row={row} rowIndex={index}/>
                             </RowAside>) : null}
-                        <span className="block text-sm font-bold leading-tight md:hidden">{col.thead}</span>
+                        <span className="text-typography-sm block font-bold leading-tight md:hidden">{col.thead}</span>
                         <span className="relative">
                             {loading ? (SkeletonCell) : Component ? (<Fragment>
                                     <Component row={row} matrix={matrix} col={col} rowIndex={index} value={value}/>

package/dist/src/components/table/sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY/F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,EAAE,QAGvE,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,kBAAkB,CAC1C,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0ElD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE/G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,eAAe,CAAC,CAAC,CAAC,sBAkClE,CAAC"}

package/dist/{components → src/components}/table/sort.jsx

@@ -53,22 +53,22 @@ export const Sort = (props) => {
         props.set((prev) => prev.filter((x) => x.id !== id));
     };
     return (<Fragment>
-            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
+            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
                         <CaretUpDownIcon size={14}/>
                         {translation.tableSortOrderByLabel} {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
                     </span>}>
-                <ul className="mt-4 space-y-2">
+                <ul className="mt-table-groups-mt space-y-2">
                     {props.sorters.map((sorter) => {
             return (<li key={`sorter-select-${sorter.id}`} className="flex flex-nowrap gap-3">
                                 <Select options={props.options} value={sorter.value} onChange={onSetSorter(sorter.id)} title={translation.tableSortOrderInputTitle} placeholder={translation.tableSortOrderInputPlaceholder}/>
                                 <Select onChange={onSortOrderType(sorter.id)} value={sorter.type} options={orderOptions} title={translation.tableSortTypeInputTitle} placeholder={translation.tableSortTypeInputPlaceholder}/>
-                                <button className="mt-4" data-id={sorter.id} onClick={onDelete}>
+                                <button className="mt-table-groups-mt" data-id={sorter.id} onClick={onDelete}>
                                     <TrashIcon className="text-danger" size={14}/>
                                 </button>
                             </li>);
         })}
                     <li>
-                        <button type="button" onClick={onAddSorter} className="flex items-center gap-1 text-primary">
+                        <button type="button" onClick={onAddSorter} className="flex items-center gap-table-inline-gap-tight text-primary">
                             <PlusIcon size={14}/> {translation.tableSortAddButton}
                         </button>
                     </li>

package/dist/src/components/table/table-lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}

package/dist/src/components/table/table.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.context.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.context.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAI5D,eAAO,MAAM,aAAa;YAJwB,MAAM;GAIN,CAAC;AAEnD,eAAO,MAAM,QAAQ;YAN6B,MAAM;EAMF,CAAC"}

package/dist/{components → src/components}/table/table.context.jsx

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 const TableContext = createContext({});
 export const TableProvider = TableContext.Provider;

package/dist/src/components/table/thead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAmB,MAAM,aAAa,CAAC;AAIlF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAmKpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,gBAAgB,CAAC,CAAC,CAAC,sBAuBvE,CAAC"}

package/dist/{components → src/components}/table/thead.jsx

@@ -41,15 +41,15 @@ const HeaderChild = (props) => {
     const ownSorter = props.sorters.find((x) => props.header.id === x.value);
     const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
     const label = getLabel(props.header);
-    return (<Reorder.Item {...props.header.thProps} as="th" ref={dragRef} initial={false} dragSnapToOrigin dragDirectionLock role="columnheader" aria-sort={ariaSort} value={props.header} aria-busy={props.loading} data-tableheader={props.header.id} whileDrag={{ cursor: "grabbing" }} className={`typography relative min-w-0 cursor-grab overflow-clip border-r-[1px] border-table-border bg-table-header font-medium first:rounded-tl-lg last:rounded-tr-lg last:border-r-transparent md:h-14 ${props.header.thProps?.className ?? ""}`}>
-            <span className={`flex h-full items-center justify-between bg-table-header p-[var(--table-cell-padding)] ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`}>
-                <span className="flex items-center gap-1">
+    return (<Reorder.Item {...props.header.thProps} as="th" ref={dragRef} initial={false} dragSnapToOrigin dragDirectionLock role="columnheader" aria-sort={ariaSort} value={props.header} aria-busy={props.loading} data-tableheader={props.header.id} whileDrag={{ cursor: "grabbing" }} className={`typography relative min-w-0 cursor-grab overflow-clip border-r-table-cell-border border-table-border bg-table-header font-medium first:rounded-tl-table-radius last:rounded-tr-table-radius last:border-r-transparent md:h-14 ${props.header.thProps?.className ?? ""}`}>
+            <span className={`flex h-full items-center justify-between bg-table-header p-table-cell-padding ${props.isLast ? "rounded-tr-table-radius" : ""} ${props.index === 0 ? "rounded-tl-table-radius" : ""}`}>
+                <span className="flex items-center gap-table-inline-gap-tight">
                     {props.inlineFilter && defaultAllowFilter ? (<Dropdown arrow trigger={<span>
                                     <span id={`${props.header.id}-filter-dropdown-button`} className="sr-only">
                                         {translation.tableFilterDropdownTitleUnique} {label}
                                     </span>
                                     <FilterIcon aria-labelledby={`${props.header.id}-filter-dropdown-button`} size={14}/>
-                                </span>} title={<span className="text-lg">
+                                </span>} title={<span className="text-typography-lg">
                                     {translation.tableFilterDropdownTitleUnique} <span className="font-medium">{label}</span>
                                 </span>}>
                             <ul className="font-medium">
@@ -59,17 +59,17 @@ const HeaderChild = (props) => {
                                             </li>))}
                                     </Fragment>)}
                                 <li>
-                                    <button type="button" className="flex items-center gap-1 text-primary" onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations)))}>
+                                    <button type="button" className="flex items-center gap-table-inline-gap-tight text-primary" onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations)))}>
                                         <PlusIcon size={14}/> {translation.tableFilterNewFilter}
                                     </button>
                                 </li>
                             </ul>
                         </Dropdown>) : null}
-                    <span className="pointer-events-auto text-balance text-base">{props.header.thead}</span>
+                    <span className="text-typography-base pointer-events-auto text-balance">{props.header.thead}</span>
                     {props.inlineSorter && defaultAllowSort ? (<SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters}/>) : null}
                 </span>
             </span>
-            {props.isLast ? null : (<motion.button drag="x" draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} dragSnapToOrigin dragDirectionLock data-type="resizer" title={props.header.id} dragConstraints={dragConstraints} className="absolute -right-[0.5px] top-0 z-calendar block h-full w-[1px] cursor-col-resize bg-transparent hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary" onClick={(e) => void e.currentTarget.focus()} onKeyDown={(e) => {
+            {props.isLast ? null : (<motion.button drag="x" draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} dragSnapToOrigin dragDirectionLock data-type="resizer" title={props.header.id} dragConstraints={dragConstraints} className="absolute -right-[0.5px] top-0 z-calendar block h-full w-table-divider-w cursor-col-resize bg-transparent hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary" onClick={(e) => void e.currentTarget.focus()} onKeyDown={(e) => {
                 if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
                     if (th.current === null)
                         return;

package/dist/src/config/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/config/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;GAMlB,CAAC"}

package/dist/src/config/default-translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;+BAgBD,MAAM;;gCAEL,MAAM;;;;;;gCAMN,MAAM;iCACL,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmCb;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;;;;;CAKpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}

package/dist/src/config/default-tweaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-tweaks.d.ts","sourceRoot":"","sources":["../../../src/config/default-tweaks.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACjB,KAAK,EAAE;QACH,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;QACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;KAC9B,CAAC;IACF,KAAK,EAAE;QACH,YAAY,EAAE,OAAO,CAAC;KACzB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAG3B,CAAC"}

package/dist/src/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/dist/src/hooks/use-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,SAclI,CAAC"}

package/dist/src/hooks/use-color-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-color-parser.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-color-parser.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,wCAI1B,CAAC"}