@g4rcez/components 2.2.9 → 2.3.0

package/dist/components/page-calendar/month-view.jsx

@@ -0,0 +1,47 @@
+import { isSameMonth, isToday } from "date-fns";
+import { useLocale } from "../../hooks/use-locale";
+import { useTranslations } from "../../hooks/use-translations";
+import { EventPill } from "./event-pill";
+import { toDateKey, formatDay, getWeekDays, formatWeekDay } from "./page-calendar.utils";
+import { useMemo } from "react";
+export function MonthView({ days, eventsByDate, currentDate, onEventClick, onDayClick }) {
+    const locale = useLocale();
+    const t = useTranslations();
+    const WEEKDAY_LABELS = useMemo(() => getWeekDays(new Date()), []);
+    return (<div className="flex h-full flex-1 flex-col">
+            <ul 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">
+                            {day}
+                        </li>);
+        })}
+            </ul>
+            <div className="grid flex-1 auto-rows-fr grid-cols-7">
+                {days.map((day, idx) => {
+            const key = toDateKey(day);
+            const events = eventsByDate.get(key) || [];
+            const isCurrentMonth = isSameMonth(day, currentDate);
+            const isCurrentDay = isToday(day);
+            const visible = events.slice(0, 2);
+            const overflow = events.length - 2;
+            return (<button key={idx} type="button" onClick={() => onDayClick(day)} 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" : ""}`}>
+                            <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"}`}>
+                                    {formatDay(day, locale)}
+                                </span>
+                                <span className="text-lg leading-none text-muted-foreground opacity-0 transition-opacity group-hover:opacity-40">
+                                    +
+                                </span>
+                            </div>
+                            <div className="flex flex-col gap-0.5">
+                                {visible.map((event) => (<div key={event.id} onClick={(e) => e.stopPropagation()}>
+                                        <EventPill compact event={event} onClick={() => onEventClick(event)}/>
+                                    </div>))}
+                                {overflow > 0 && <span className="pl-1 text-xs text-muted-foreground">{t.pageCalendarMoreEvents(overflow)}</span>}
+                            </div>
+                        </button>);
+        })}
+            </div>
+        </div>);
+}

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { CalendarEvent, CalendarEventBase, CalendarFilter, ViewMode } from "./page-calendar.types";
+type PageCalendarProps<T extends CalendarEventBase> = {
+    defaultDate?: Date;
+    defaultView?: ViewMode;
+    filterArea?: ReactNode;
+    onAddEvent?: () => void;
+    getFilterId?: () => void;
+    events: CalendarEvent<T>[];
+    filters?: CalendarFilter[];
+    onSlotClick?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    renderEvent?: (event: CalendarEvent<T>) => ReactNode;
+    onChangeFilters?: (filters: CalendarFilter[]) => void;
+};
+export declare function PageCalendar<T extends CalendarEventBase>({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters, defaultView, onChangeFilters: onActiveFiltersChange, }: PageCalendarProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=page-calendar.d.ts.map

package/dist/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;AAC1D,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,+BAwEtB"}

package/dist/components/page-calendar/page-calendar.jsx

@@ -0,0 +1,39 @@
+import { useMemo, useState } from "react";
+import { groupEventsByDate, getMonthDays, getWeekDays } from "./page-calendar.utils";
+import { CalendarHeader } from "./calendar-header";
+import { MonthView } from "./month-view";
+import { WeekView } from "./week-view";
+import { DayView } from "./day-view";
+const noop = [];
+export function PageCalendar({ events, filterArea, onAddEvent, defaultDate, onSlotClick, getFilterId, renderEvent, onEventClick, filters = noop, defaultView = "month", onChangeFilters: onActiveFiltersChange, }) {
+    const [currentView, setCurrentView] = useState(defaultView);
+    const [currentDate, setCurrentDate] = useState(() => defaultDate ?? new Date());
+    const [internalFilters, setInternalFilters] = useState(filters);
+    const toggleFilter = (id) => {
+        setInternalFilters((prev) => {
+            const next = prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f));
+            onActiveFiltersChange?.(next);
+            return next;
+        });
+    };
+    const filteredEvents = useMemo(() => {
+        if (filters.length === 0)
+            return events;
+        const get = getFilterId ?? ((e) => e?.filterId);
+        return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);
+    }, [events, internalFilters, filters]);
+    const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);
+    const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);
+    const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);
+    const handleEventClick = (event) => onEventClick?.(event);
+    const handleDayClick = (date) => {
+        setCurrentDate(date);
+        setCurrentView("day");
+    };
+    return (<div className="flex h-full flex-grow flex-col gap-4">
+            <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}/>)}
+            {currentView === "day" && (<DayView currentDate={currentDate} onSlotClick={onSlotClick} renderEvent={renderEvent} eventsByDate={eventsByDate} onDateChange={setCurrentDate} onEventClick={handleEventClick}/>)}
+        </div>);
+}

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

@@ -0,0 +1,18 @@
+import type { TagProps } from "../core/tag";
+export type ViewMode = "month" | "week" | "day";
+export type CalendarEventBase = {
+    date: Date;
+    id: string;
+};
+export type CalendarEvent<T extends CalendarEventBase = CalendarEventBase> = T & {
+    title: string;
+    filterId?: string;
+    className?: string;
+};
+export type CalendarFilter = {
+    id: string;
+    label: string;
+    enabled: boolean;
+    theme: TagProps["theme"];
+};
+//# sourceMappingURL=page-calendar.types.d.ts.map

package/dist/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/components/page-calendar/page-calendar.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,18 @@
+import type { CalendarEvent, CalendarEventBase } from "./page-calendar.types";
+export declare function toDateKey(d: Date): string;
+export declare function groupEventsByDate<T extends CalendarEventBase>(events: CalendarEvent<T>[]): Map<string, CalendarEvent<T>[]>;
+export declare function getMonthDays(date: Date): Date[];
+export declare function getWeekDays(date: Date): Date[];
+export declare function getHourSlots(): number[];
+export declare function formatEventTime(date: Date, locale?: string): string;
+export declare function formatDay(date: Date, locale?: string): string;
+export declare function formatWeekDay(date: Date, locale?: string): string;
+export declare function formatWeekdayLong(date: Date, locale?: string): string;
+export declare function formatWeekdayShort(date: Date, locale?: string): string;
+export declare function formatMonthYear(date: Date, locale?: string): string;
+export declare function formatMonthShort(date: Date, locale?: string): string;
+export declare function formatHourLabel(hour: number, locale?: string): string;
+export declare function formatFullDate(date: Date, locale?: string): string;
+export declare function formatTime(date: Date, locale?: string): string;
+export declare function getWeekNumber(date: Date): number;
+//# sourceMappingURL=page-calendar.utils.d.ts.map

package/dist/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"}

package/dist/components/page-calendar/page-calendar.utils.js

@@ -0,0 +1,71 @@
+import { addDays, startOfMonth, startOfWeek, getISOWeek } from "date-fns";
+export function toDateKey(d) {
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+export function groupEventsByDate(events) {
+    const map = new Map();
+    for (const event of events) {
+        const key = toDateKey(event.date);
+        const existing = map.get(key);
+        if (existing) {
+            existing.push(event);
+        }
+        else {
+            map.set(key, [event]);
+        }
+    }
+    return map;
+}
+export function getMonthDays(date) {
+    const monthStart = startOfMonth(date);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+        days.push(addDays(gridStart, i));
+    }
+    return days;
+}
+export function getWeekDays(date) {
+    const weekStart = startOfWeek(date, { weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        days.push(addDays(weekStart, i));
+    }
+    return days;
+}
+export function getHourSlots() {
+    return Array.from({ length: 24 }, (_, i) => i);
+}
+export function formatEventTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(date));
+}
+export function formatDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { day: "numeric" }).format(date);
+}
+export function formatWeekDay(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatWeekdayLong(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long" }).format(date);
+}
+export function formatWeekdayShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "short" }).format(date);
+}
+export function formatMonthYear(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(date);
+}
+export function formatMonthShort(date, locale) {
+    return new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+}
+export function formatHourLabel(hour, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(new Date(0, 0, 0, hour));
+}
+export function formatFullDate(date, locale) {
+    return new Intl.DateTimeFormat(locale, { weekday: "long", month: "short", day: "numeric", year: "numeric" }).format(date);
+}
+export function formatTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+}
+export function getWeekNumber(date) {
+    return getISOWeek(date);
+}

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

@@ -0,0 +1,11 @@
+import type { CalendarEvent } from "./page-calendar.types";
+type WeekViewProps = {
+    days: Date[];
+    eventsByDate: Map<string, CalendarEvent[]>;
+    currentDate: Date;
+    onEventClick: (event: CalendarEvent) => void;
+    onSlotClick?: (date: Date) => void;
+};
+export declare function WeekView({ days, eventsByDate, onEventClick, onSlotClick }: WeekViewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=week-view.d.ts.map

package/dist/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,+BA2ExF"}

package/dist/components/page-calendar/week-view.jsx

@@ -0,0 +1,61 @@
+import { isToday } from "date-fns";
+import { useEffect, useRef } from "react";
+import { useLocale } from "../../hooks/use-locale";
+import { EventPill } from "./event-pill";
+import { getHourSlots, toDateKey, formatWeekdayShort, formatDay, formatHourLabel } from "./page-calendar.utils";
+const HOUR_HEIGHT = 48;
+function getTopOffset(event) {
+    const hour = event.date.getHours();
+    const minutes = event.date.getMinutes();
+    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;
+}
+export function WeekView({ days, eventsByDate, onEventClick, onSlotClick }) {
+    const locale = useLocale();
+    const currentHourRef = useRef(null);
+    const scrollBodyRef = useRef(null);
+    const hours = getHourSlots();
+    useEffect(() => {
+        if (scrollBodyRef.current && currentHourRef.current) {
+            const top = currentHourRef.current.offsetTop;
+            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;
+        }
+    }, []);
+    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"/>
+                {days.map((day, idx) => {
+            const isCurrentDay = isToday(day);
+            return (<div key={idx} className="flex-1 py-2 text-center text-xs 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"}`}>
+                                {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">
+                    {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">
+                                {hour === 0 ? "" : formatHourLabel(hour, locale)}
+                            </span>
+                            {hour === new Date().getHours() && <div ref={currentHourRef}/>}
+                        </div>))}
+                </div>
+                {days.map((day, dayIdx) => {
+            const key = toDateKey(day);
+            const events = eventsByDate.get(key) || [];
+            return (<div key={dayIdx} className="relative flex-1 border-l border-card-border">
+                            {hours.map((hour) => {
+                    const slotDate = new Date(day);
+                    slotDate.setHours(hour, 0, 0, 0);
+                    return (<div key={hour} className="cursor-pointer border-b border-border/50 hover:bg-muted/20" style={{ height: HOUR_HEIGHT }} onClick={() => onSlotClick?.(slotDate)}/>);
+                })}
+                            {events.map((event) => (<div key={event.id} className="absolute left-0.5 right-0.5" style={{ top: getTopOffset(event), height: HOUR_HEIGHT }} onClick={(e) => e.stopPropagation()}>
+                                    <EventPill event={event} onClick={() => onEventClick(event)}/>
+                                </div>))}
+                        </div>);
+        })}
+            </div>
+        </div>);
+}

package/dist/components/table/filter.jsx

@@ -86,7 +86,7 @@ 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 gap-1 items-center proportional-nums">
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-1 proportional-nums">
                         <ListFilterIcon size={14}/>
                         {translation.tableFilterLabel} {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
                     </span>}>
@@ -97,7 +97,7 @@ export const Filter = (props) => {
                                 <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}/>
-                                <div className="flex justify-center items-center mt-5">
+                                <div className="mt-5 flex items-center justify-center">
                                     <button data-id={filter.id} type="button" onClick={onDelete}>
                                         <Trash2Icon className="text-danger" size={16}/>
                                     </button>
@@ -105,7 +105,7 @@ export const Filter = (props) => {
                             </li>);
         })}
                     <li>
-                        <button type="button" onClick={onAddFilter} className="flex gap-1 items-center text-primary">
+                        <button type="button" onClick={onAddFilter} className="flex items-center gap-1 text-primary">
                             <PlusIcon size={14}/> {translation.tableFilterNewFilter}
                         </button>
                     </li>
@@ -131,7 +131,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 gap-4 items-center py-2">
+    return (<div className="flex flex-nowrap items-center gap-4 py-2">
             <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/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACvH,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,OAAO,CACT,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;CAC/C,CACF,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCAoHxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACrH,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,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCAuHxD,CAAC"}

package/dist/components/table/index.jsx

@@ -12,7 +12,7 @@ const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec
 export const Table = (props) => {
     const tweaks = useTweaks();
     const contextState = useMemo(() => ({
-        sticky: props.sticky === undefined ? tweaks.table.sticky ?? undefined : props.sticky ?? undefined
+        sticky: props.sticky === undefined ? (tweaks.table.sticky ?? undefined) : (props.sticky ?? undefined),
     }), [props.sticky, tweaks.table.sticky]);
     const operations = props.operations ?? tweaks.table.operations ?? true;
     const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
@@ -48,13 +48,13 @@ export const Table = (props) => {
         dispatch.cols(props.cols);
     }, [props.cols]);
     return (<TableProvider value={contextState}>
-      <AnimatePresence 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.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>))}
-          </div>)}
-      </AnimatePresence>
-    </TableProvider>);
+            <AnimatePresence 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.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>))}
+                    </div>)}
+            </AnimatePresence>
+        </TableProvider>);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,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;AAIzE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAC3E,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;CACjE,CAAC;AA8FJ,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,0HAYvC,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,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;AAIzE,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;AAsFN,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,0HAYvC,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}

package/dist/components/table/inner-table.jsx

@@ -13,32 +13,32 @@ import { useTable } from "./table.context";
 import { TableHeader } from "./thead";
 const TableBody = React.forwardRef(({ context, className = "", ...props }, ref) => {
     return (<tbody {...props} role="rowgroup" className={`divide-y divide-table-border ${className}`} ref={ref}>
-        <AnimatePresence>{props.children}</AnimatePresence>
-      </tbody>);
+                <AnimatePresence>{props.children}</AnimatePresence>
+            </tbody>);
 });
-const VirtualTable = React.forwardRef(({ context, className = "", ...props }, ref) => (<table {...props} role="table" ref={ref} style={{ ...props.style, "--table-cell-padding": "0.75rem" }} className={`table w-full table-fixed border-spacing-0 border-separate text-left ${className ?? ""}`}/>));
+const VirtualTable = React.forwardRef(({ context, className = "", ...props }, ref) => (<table {...props} role="table" ref={ref} style={{ ...props.style, "--table-cell-padding": "0.75rem" }} className={`table w-full table-fixed border-separate border-spacing-0 text-left ${className ?? ""}`}/>));
 const Thead = React.forwardRef(({ context, ...props }, ref) => {
     const ctx = useTable();
     const style = {
         ...props?.style,
         top: Is.number(ctx.sticky) ? `${ctx.sticky}px` : undefined,
     };
-    return (<thead {...props} ref={ref} style={style} role="rowgroup" className="hidden top-0 bg-transparent md:table-header-group group:sticky"/>);
+    return <thead {...props} ref={ref} style={style} role="rowgroup" className="group:sticky top-0 hidden bg-transparent md:table-header-group"/>;
 });
 const TRow = React.forwardRef(({ context, item, ...props }, ref) => {
     const contextProps = context?.getRowProps?.(item);
     const innerProps = { ...props, ...contextProps };
-    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row pb-4 flex h-fit flex-col flex-wrap justify-center gap-1 md:table-row ${props?.className ?? ""}`}/>);
+    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 ${props?.className ?? ""}`}/>);
 });
 const TFoot = React.forwardRef((props, ref) => {
     if (props.context.loadingMore) {
         return (<tfoot {...props} ref={ref} className="bg-card-background">
-        <tr role="row" className="bg-card-background">
-          <td colSpan={999} className="px-2 h-14 bg-card-background">
-            <span className="block w-full h-2 rounded opacity-60 animate-pulse bg-foreground"/>
-          </td>
-        </tr>
-      </tfoot>);
+                <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>
+                </tr>
+            </tfoot>);
     }
     return null;
 });
@@ -50,7 +50,7 @@ const components = {
     TableBody: TableBody,
 };
 const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-const EmptyContent = (props) => (<div className="flex justify-center items-center px-2 w-full h-48">{props.loading ? SkeletonCell : <Empty />}</div>);
+const EmptyContent = (props) => (<div className="flex h-48 w-full items-center justify-center px-2">{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 }) => {
@@ -95,10 +95,10 @@ export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSor
         getRowProps: props.getRowProps,
         loadingMore: props.loadingMore,
     };
-    return (<div className="flex relative flex-col w-full whitespace-nowrap rounded-lg group">
-      <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="w-full h-0.5"/>
-      {pagination !== null ? <Pagination {...pagination}/> : null}
-    </div>);
+    return (<div className="group relative flex w-full flex-col whitespace-nowrap rounded-lg">
+            <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"/>
+            {pagination !== null ? <Pagination {...pagination}/> : null}
+        </div>);
 };

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

@@ -1 +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,gCA6CpE,CAAC"}
+{"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,gCAwCpE,CAAC"}

package/dist/components/table/metadata.jsx

@@ -3,35 +3,34 @@ 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 flex-wrap gap-y-1 gap-x-4 justify-between items-center min-w-full">
-      <div className="flex gap-4 py-2 whitespace-nowrap w-fit items-centeend">
-        <span>
-          <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters}/>
-        </span>
-        <span>
-          <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters}/>
-        </span>
-        <span>
-          <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols}/>
-        </span>
-      </div>
-      <ul className="flex flex-row flex-wrap flex-1 flex-grow gap-4 items-center w-full md:justify-end">
-        {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex gap-1 items-center py-0.5 px-4 rounded-xl border border-card-border">
-            <span>
-              <span className="inline-block mr-2 rounded-full size-3 aspect-square bg-primary" aria-hidden="true"/>
-              {x.label} {x.operation.label.toLowerCase()}:
-            </span>
-            <div className="relative w-min min-w-[1ch]">
-              <span aria-hidden="true" className="invisible p-0 whitespace-pre">
-                {x.value || " "}
-              </span>
-              <input type={x.type} value={x.value} className="absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" onChange={(e) => {
+        <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">
+                <span>
+                    <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters}/>
+                </span>
+                <span>
+                    <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters}/>
+                </span>
+                <span>
+                    <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">
+                        <span>
+                            <span className="mr-2 inline-block aspect-square size-3 rounded-full bg-primary" aria-hidden="true"/>
+                            {x.label} {x.operation.label.toLowerCase()}:
+                        </span>
+                        <div className="relative w-min min-w-[1ch]">
+                            <span aria-hidden="true" className="invisible whitespace-pre p-0">
+                                {x.value || " "}
+                            </span>
+                            <input type={x.type} value={x.value} className="absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" onChange={(e) => {
             const value = valueFromType(e.target);
-            props.setFilters((prev) => prev.map((item) => x.id === item.id
-                ? { ...item, value, } : item));
+            props.setFilters((prev) => prev.map((item) => (x.id === item.id ? { ...item, value } : item)));
         }}/>
-            </div>
-          </li>))}
-      </ul>
-    </div>
-  </header>);
+                        </div>
+                    </li>))}
+            </ul>
+        </div>
+    </header>);

package/dist/components/table/pagination.jsx

@@ -31,7 +31,7 @@ export const Pagination = (pagination) => {
     const translation = useTranslations();
     const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
     const hasNext = pagination.current < pagination.pages;
-    return (<footer className="flex flex-wrap items-center justify-center gap-4 p-3 border-t-muted text-sm lg:flex-nowrap lg:justify-between">
+    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">
             <p>
                 <translation.tablePaginationFooter {...pagination} sizes={pagination.sizes} select={pagination.onChangeSize && Array.isArray(pagination.sizes) ? (<Fragment>
                                 <label htmlFor={id}>{translation.tablePaginationSelectLabel}</label>

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

@@ -1 +1 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CACzC,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,sBAwCvE,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CAC3C,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,sBA0CvE,CAAC"}