@g4rcez/components 5.0.2 → 5.0.3

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

@@ -0,0 +1,75 @@
+import { t as e } from "../../calendar-header-Dfr-CwkY.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { g as n, m as r, p as i } from "../../page-calendar.utils-Bd0PHktL.js";
+import { MonthView as a } from "./month-view.js";
+import { WeekView as o } from "./week-view.js";
+import { DayView as s } from "./day-view.js";
+import { useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/page-calendar/page-calendar.tsx
+var f = [];
+function p({ events: p, filterArea: m, onAddEvent: h, defaultDate: g, onSlotClick: _, getFilterId: v, renderEvent: y, onEventClick: b, filters: x = f, defaultView: S = "month", onChangeFilters: C }) {
+	let w = t(), [T, E] = l(S), [D, O] = l(() => g ?? /* @__PURE__ */ new Date()), [k, A] = l(x), j = (e) => {
+		A((t) => {
+			let n = t.map((t) => t.id === e ? {
+				...t,
+				enabled: !t.enabled
+			} : t);
+			return C?.(n), n;
+		});
+	}, M = c(() => {
+		if (x.length === 0) return p;
+		let e = v ?? ((e) => e?.filterId);
+		return p.filter((t) => k.find((n) => n.id === e(t))?.enabled ?? !0);
+	}, [
+		p,
+		k,
+		x,
+		v
+	]), N = c(() => n(M), [M]), P = c(() => i(D), [D]), F = c(() => r(D), [D]), I = (e) => b?.(e);
+	return /* @__PURE__ */ d("section", {
+		"aria-label": w.pageCalendarLabel,
+		"data-component": "page-calendar",
+		className: "flex h-full w-full flex-grow flex-col gap-page-calendar-gap",
+		children: [
+			/* @__PURE__ */ u(e, {
+				filters: k,
+				filterArea: m,
+				onAddEvent: h,
+				currentDate: D,
+				currentView: T,
+				setCurrentDate: O,
+				setCurrentView: E,
+				onToggleFilter: j
+			}),
+			T === "month" && /* @__PURE__ */ u(a, {
+				days: P,
+				currentDate: D,
+				eventsByDate: N,
+				onDayClick: (e) => {
+					O(e), E("day");
+				},
+				onEventClick: I
+			}),
+			T === "week" && /* @__PURE__ */ u(o, {
+				days: F,
+				currentDate: D,
+				onSlotClick: _,
+				eventsByDate: N,
+				onEventClick: I
+			}),
+			T === "day" && /* @__PURE__ */ u(s, {
+				currentDate: D,
+				onSlotClick: _,
+				renderEvent: y,
+				eventsByDate: N,
+				onDateChange: O,
+				onEventClick: I
+			})
+		]
+	});
+}
+//#endregion
+export { p as PageCalendar };
+
+//# sourceMappingURL=page-calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-calendar.js","names":[],"sources":["../../../src/components/page-calendar/page-calendar.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport type { CalendarEvent, CalendarEventBase, CalendarFilter, ViewMode } from \"./page-calendar.types\";\nimport { groupEventsByDate, getMonthDays, getWeekDays } from \"./page-calendar.utils\";\nimport { CalendarHeader } from \"./calendar-header\";\nimport { MonthView } from \"./month-view\";\nimport { WeekView } from \"./week-view\";\nimport { DayView } from \"./day-view\";\n\ntype PageCalendarProps<T extends CalendarEventBase> = {\n    defaultDate?: Date;\n    defaultView?: ViewMode;\n    filterArea?: ReactNode;\n    onAddEvent?: () => void;\n    getFilterId?: () => void;\n    events: CalendarEvent<T>[];\n    filters?: CalendarFilter[];\n    onSlotClick?: (date: Date) => void;\n    onEventClick?: (event: CalendarEvent) => void;\n    renderEvent?: (event: CalendarEvent<T>) => ReactNode;\n    onChangeFilters?: (filters: CalendarFilter[]) => void;\n};\n\nconst noop: CalendarFilter[] = [];\n\nexport function PageCalendar<T extends CalendarEventBase>({\n    events,\n    filterArea,\n    onAddEvent,\n    defaultDate,\n    onSlotClick,\n    getFilterId,\n    renderEvent,\n    onEventClick,\n    filters = noop,\n    defaultView = \"month\",\n    onChangeFilters: onActiveFiltersChange,\n}: PageCalendarProps<T>) {\n    const t = useTranslations();\n    const [currentView, setCurrentView] = useState<ViewMode>(defaultView);\n    const [currentDate, setCurrentDate] = useState<Date>(() => defaultDate ?? new Date());\n    const [internalFilters, setInternalFilters] = useState<CalendarFilter[]>(filters);\n\n    const toggleFilter = (id: string) => {\n        setInternalFilters((prev) => {\n            const next = prev.map((f) => (f.id === id ? { ...f, enabled: !f.enabled } : f));\n            onActiveFiltersChange?.(next);\n            return next;\n        });\n    };\n\n    const filteredEvents = useMemo(() => {\n        if (filters.length === 0) return events;\n        const get = getFilterId ?? ((e: CalendarEvent<T>) => e?.filterId);\n        return events.filter((e) => internalFilters.find((f) => f.id === get(e))?.enabled ?? true);\n    }, [events, internalFilters, filters, getFilterId]);\n\n    const eventsByDate = useMemo(() => groupEventsByDate(filteredEvents), [filteredEvents]);\n    const monthDays = useMemo(() => getMonthDays(currentDate), [currentDate]);\n    const weekDays = useMemo(() => getWeekDays(currentDate), [currentDate]);\n\n    const handleEventClick = (event: CalendarEvent) => onEventClick?.(event);\n\n    const handleDayClick = (date: Date) => {\n        setCurrentDate(date);\n        setCurrentView(\"day\");\n    };\n\n    return (\n        <section\n            aria-label={t.pageCalendarLabel}\n            data-component=\"page-calendar\"\n            className=\"flex h-full w-full flex-grow flex-col gap-page-calendar-gap\"\n        >\n            <CalendarHeader\n                filters={internalFilters}\n                filterArea={filterArea}\n                onAddEvent={onAddEvent}\n                currentDate={currentDate}\n                currentView={currentView}\n                setCurrentDate={setCurrentDate}\n                setCurrentView={setCurrentView}\n                onToggleFilter={toggleFilter}\n            />\n            {currentView === \"month\" && (\n                <MonthView\n                    days={monthDays}\n                    currentDate={currentDate}\n                    eventsByDate={eventsByDate}\n                    onDayClick={handleDayClick}\n                    onEventClick={handleEventClick}\n                />\n            )}\n            {currentView === \"week\" && (\n                <WeekView\n                    days={weekDays}\n                    currentDate={currentDate}\n                    onSlotClick={onSlotClick}\n                    eventsByDate={eventsByDate}\n                    onEventClick={handleEventClick}\n                />\n            )}\n            {currentView === \"day\" && (\n                <DayView<T>\n                    currentDate={currentDate}\n                    onSlotClick={onSlotClick}\n                    renderEvent={renderEvent}\n                    eventsByDate={eventsByDate}\n                    onDateChange={setCurrentDate}\n                    onEventClick={handleEventClick}\n                />\n            )}\n        </section>\n    );\n}\n"],"mappings":";;;;;;;;;AAuBA,IAAM,IAAyB,CAAC;AAEhC,SAAgB,EAA0C,EACtD,WACA,eACA,eACA,gBACA,gBACA,gBACA,gBACA,iBACA,aAAU,GACV,iBAAc,SACd,iBAAiB,KACI;CACrB,IAAM,IAAI,EAAgB,GACpB,CAAC,GAAa,KAAkB,EAAmB,CAAW,GAC9D,CAAC,GAAa,KAAkB,QAAqB,qBAAe,IAAI,KAAK,CAAC,GAC9E,CAAC,GAAiB,KAAsB,EAA2B,CAAO,GAE1E,KAAgB,MAAe;EACjC,GAAoB,MAAS;GACzB,IAAM,IAAO,EAAK,KAAK,MAAO,EAAE,OAAO,IAAK;IAAE,GAAG;IAAG,SAAS,CAAC,EAAE;GAAQ,IAAI,CAAE;GAE9E,OADA,IAAwB,CAAI,GACrB;EACX,CAAC;CACL,GAEM,IAAiB,QAAc;EACjC,IAAI,EAAQ,WAAW,GAAG,OAAO;EACjC,IAAM,IAAM,OAAiB,MAAwB,GAAG;EACxD,OAAO,EAAO,QAAQ,MAAM,EAAgB,MAAM,MAAM,EAAE,OAAO,EAAI,CAAC,CAAC,GAAG,WAAW,EAAI;CAC7F,GAAG;EAAC;EAAQ;EAAiB;EAAS;CAAW,CAAC,GAE5C,IAAe,QAAc,EAAkB,CAAc,GAAG,CAAC,CAAc,CAAC,GAChF,IAAY,QAAc,EAAa,CAAW,GAAG,CAAC,CAAW,CAAC,GAClE,IAAW,QAAc,EAAY,CAAW,GAAG,CAAC,CAAW,CAAC,GAEhE,KAAoB,MAAyB,IAAe,CAAK;CAOvE,OACI,kBAAC,WAAD;EACI,cAAY,EAAE;EACd,kBAAe;EACf,WAAU;YAHd;GAKI,kBAAC,GAAD;IACI,SAAS;IACG;IACA;IACC;IACA;IACG;IACA;IAChB,gBAAgB;GACnB,CAAA;GACA,MAAgB,WACb,kBAAC,GAAD;IACI,MAAM;IACO;IACC;IACd,aA1BQ,MAAe;KAEnC,AADA,EAAe,CAAI,GACnB,EAAe,KAAK;IACxB;IAwBgB,cAAc;GACjB,CAAA;GAEJ,MAAgB,UACb,kBAAC,GAAD;IACI,MAAM;IACO;IACA;IACC;IACd,cAAc;GACjB,CAAA;GAEJ,MAAgB,SACb,kBAAC,GAAD;IACiB;IACA;IACA;IACC;IACd,cAAc;IACd,cAAc;GACjB,CAAA;EAEA;;AAEjB"}

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

@@ -32,10 +32,10 @@ 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-page-calendar-gap">
+    return (<section aria-label={t.pageCalendarLabel} data-component="page-calendar" 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}/>)}
             {currentView === "day" && (<DayView currentDate={currentDate} onSlotClick={onSlotClick} renderEvent={renderEvent} eventsByDate={eventsByDate} onDateChange={setCurrentDate} onEventClick={handleEventClick}/>)}
-        </div>);
+        </section>);
 }

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

@@ -0,0 +1,88 @@
+import { t as e } from "../../use-locale-DPM_sg4s.js";
+import { t } from "../../isToday-COXfxFui.js";
+import { _ as n, a as r, d as i, f as a, i as o, n as s, t as c } from "../../page-calendar.utils-Bd0PHktL.js";
+import { EventPill as l } from "./event-pill.js";
+import { useEffect as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/page-calendar/week-view.tsx
+var m = 48;
+function h(e) {
+	let t = e.date.getHours(), n = e.date.getMinutes();
+	return t * m + n / 60 * m;
+}
+function g({ days: g, eventsByDate: _, onEventClick: v, onSlotClick: y }) {
+	let b = e(), x = d(null), S = d(null), C = a();
+	return u(() => {
+		if (S.current && x.current) {
+			let e = x.current.offsetTop;
+			S.current.scrollTop = e - S.current.clientHeight / 2;
+		}
+	}, []), /* @__PURE__ */ p("div", {
+		className: "flex flex-1 flex-col overflow-hidden",
+		children: [/* @__PURE__ */ p("div", {
+			className: "flex flex-shrink-0 border-b border-border",
+			children: [/* @__PURE__ */ f("div", { className: "w-page-calendar-gutter-w flex-shrink-0" }), g.map((e, n) => {
+				let r = t(e);
+				return /* @__PURE__ */ p("div", {
+					"aria-label": o(e, b),
+					className: "flex-1 py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground",
+					children: [/* @__PURE__ */ f("span", {
+						className: "block",
+						children: i(e, b)
+					}), /* @__PURE__ */ f("span", {
+						className: `inline-flex size-page-calendar-week-badge-size items-center justify-center rounded-full text-page-calendar-week-badge-text font-bold ${r ? "bg-primary text-primary-foreground" : "text-foreground"}`,
+						children: s(e, b)
+					})]
+				}, n);
+			})]
+		}), /* @__PURE__ */ p("div", {
+			ref: S,
+			className: "flex flex-1 items-start overflow-y-auto",
+			children: [/* @__PURE__ */ f("div", {
+				className: "w-page-calendar-gutter-w flex-shrink-0",
+				children: C.map((e) => /* @__PURE__ */ p("div", {
+					className: "relative",
+					style: { height: m },
+					children: [/* @__PURE__ */ f("span", {
+						className: "absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground",
+						children: e === 0 ? "" : r(e, b)
+					}), e === (/* @__PURE__ */ new Date()).getHours() && /* @__PURE__ */ f("div", { ref: x })]
+				}, e))
+			}), g.map((e, t) => {
+				let i = n(e), a = _.get(i) || [];
+				return /* @__PURE__ */ p("div", {
+					className: "relative flex-1 border-l border-card-border",
+					children: [C.map((t) => {
+						let n = new Date(e);
+						return n.setHours(t, 0, 0, 0), /* @__PURE__ */ f("button", {
+							type: "button",
+							"aria-label": r(t, b),
+							className: "w-full cursor-pointer border-b border-border/50 hover:bg-muted/20",
+							style: { height: m },
+							onClick: () => y?.(n)
+						}, t);
+					}), c(a).map(({ event: e, columnIndex: t, columnCount: n }) => /* @__PURE__ */ f("div", {
+						role: "presentation",
+						className: "absolute",
+						style: {
+							top: h(e),
+							height: m,
+							left: `calc(${t / n * 100}% + 1px)`,
+							width: `calc(${100 / n}% - 2px)`
+						},
+						onClick: (e) => e.stopPropagation(),
+						onKeyDown: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ f(l, {
+							event: e,
+							onClick: () => v(e)
+						})
+					}, e.id))]
+				}, t);
+			})]
+		})]
+	});
+}
+//#endregion
+export { g as WeekView };
+
+//# sourceMappingURL=week-view.js.map

package/dist/components/page-calendar/week-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"week-view.js","names":[],"sources":["../../../src/components/page-calendar/week-view.tsx"],"sourcesContent":["import { isToday } from \"date-fns\";\nimport { useEffect, useRef } from \"react\";\nimport { useLocale } from \"../../hooks/use-locale\";\nimport type { CalendarEvent } from \"./page-calendar.types\";\nimport { EventPill } from \"./event-pill\";\nimport { getHourSlots, toDateKey, formatWeekdayShort, formatDay, formatHourLabel, formatFullDate, computeEventColumns } from \"./page-calendar.utils\";\n\nconst HOUR_HEIGHT = 48;\n\ntype WeekViewProps = {\n    days: Date[];\n    eventsByDate: Map<string, CalendarEvent[]>;\n    currentDate: Date;\n    onEventClick: (event: CalendarEvent) => void;\n    onSlotClick?: (date: Date) => void;\n};\n\nfunction getTopOffset(event: CalendarEvent): number {\n    const hour = event.date.getHours();\n    const minutes = event.date.getMinutes();\n    return hour * HOUR_HEIGHT + (minutes / 60) * HOUR_HEIGHT;\n}\n\nexport function WeekView({ days, eventsByDate, onEventClick, onSlotClick }: WeekViewProps) {\n    const locale = useLocale();\n    const currentHourRef = useRef<HTMLDivElement>(null);\n    const scrollBodyRef = useRef<HTMLDivElement>(null);\n    const hours = getHourSlots();\n\n    useEffect(() => {\n        if (scrollBodyRef.current && currentHourRef.current) {\n            const top = currentHourRef.current.offsetTop;\n            scrollBodyRef.current.scrollTop = top - scrollBodyRef.current.clientHeight / 2;\n        }\n    }, []);\n\n    return (\n        <div className=\"flex flex-1 flex-col overflow-hidden\">\n            <div className=\"flex flex-shrink-0 border-b border-border\">\n                <div className=\"w-page-calendar-gutter-w flex-shrink-0\" />\n                {days.map((day, idx) => {\n                    const isCurrentDay = isToday(day);\n                    return (\n                        <div\n                            key={idx}\n                            aria-label={formatFullDate(day, locale)}\n                            className=\"flex-1 py-page-calendar-weekday-py text-center text-page-calendar-weekday-text font-medium text-muted-foreground\"\n                        >\n                            <span className=\"block\">{formatWeekdayShort(day, locale)}</span>\n                            <span\n                                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\"}`}\n                            >\n                                {formatDay(day, locale)}\n                            </span>\n                        </div>\n                    );\n                })}\n            </div>\n            <div ref={scrollBodyRef} className=\"flex flex-1 items-start overflow-y-auto\">\n                <div className=\"w-page-calendar-gutter-w flex-shrink-0\">\n                    {hours.map((hour) => (\n                        <div key={hour} className=\"relative\" style={{ height: HOUR_HEIGHT }}>\n                            <span className=\"absolute -top-2.5 right-2 text-page-calendar-hour-text text-muted-foreground\">\n                                {hour === 0 ? \"\" : formatHourLabel(hour, locale)}\n                            </span>\n                            {hour === new Date().getHours() && <div ref={currentHourRef} />}\n                        </div>\n                    ))}\n                </div>\n                {days.map((day, dayIdx) => {\n                    const key = toDateKey(day);\n                    const events = eventsByDate.get(key) || [];\n                    return (\n                        <div key={dayIdx} className=\"relative flex-1 border-l border-card-border\">\n                            {hours.map((hour) => {\n                                const slotDate = new Date(day);\n                                slotDate.setHours(hour, 0, 0, 0);\n                                return (\n                                    <button\n                                        key={hour}\n                                        type=\"button\"\n                                        aria-label={formatHourLabel(hour, locale)}\n                                        className=\"w-full cursor-pointer border-b border-border/50 hover:bg-muted/20\"\n                                        style={{ height: HOUR_HEIGHT }}\n                                        onClick={() => onSlotClick?.(slotDate)}\n                                    />\n                                );\n                            })}\n                            {computeEventColumns(events).map(({ event, columnIndex, columnCount }) => (\n                                <div\n                                    key={event.id}\n                                    role=\"presentation\"\n                                    className=\"absolute\"\n                                    style={{\n                                        top: getTopOffset(event),\n                                        height: HOUR_HEIGHT,\n                                        left: `calc(${(columnIndex / columnCount) * 100}% + 1px)`,\n                                        width: `calc(${100 / columnCount}% - 2px)`,\n                                    }}\n                                    onClick={(e) => e.stopPropagation()}\n                                    onKeyDown={(e) => e.stopPropagation()}\n                                >\n                                    <EventPill event={event} onClick={() => onEventClick(event)} />\n                                </div>\n                            ))}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAc;AAUpB,SAAS,EAAa,GAA8B;CAChD,IAAM,IAAO,EAAM,KAAK,SAAS,GAC3B,IAAU,EAAM,KAAK,WAAW;CACtC,OAAO,IAAO,IAAe,IAAU,KAAM;AACjD;AAEA,SAAgB,EAAS,EAAE,SAAM,iBAAc,iBAAc,kBAA8B;CACvF,IAAM,IAAS,EAAU,GACnB,IAAiB,EAAuB,IAAI,GAC5C,IAAgB,EAAuB,IAAI,GAC3C,IAAQ,EAAa;CAS3B,OAPA,QAAgB;EACZ,IAAI,EAAc,WAAW,EAAe,SAAS;GACjD,IAAM,IAAM,EAAe,QAAQ;GACnC,EAAc,QAAQ,YAAY,IAAM,EAAc,QAAQ,eAAe;EACjF;CACJ,GAAG,CAAC,CAAC,GAGD,kBAAC,OAAD;EAAK,WAAU;YAAf,CACI,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,OAAD,EAAK,WAAU,yCAA0C,CAAA,GACxD,EAAK,KAAK,GAAK,MAAQ;IACpB,IAAM,IAAe,EAAQ,CAAG;IAChC,OACI,kBAAC,OAAD;KAEI,cAAY,EAAe,GAAK,CAAM;KACtC,WAAU;eAHd,CAKI,kBAAC,QAAD;MAAM,WAAU;gBAAS,EAAmB,GAAK,CAAM;KAAQ,CAAA,GAC/D,kBAAC,QAAD;MACI,WAAW,wIAAwI,IAAe,uCAAuC;gBAExM,EAAU,GAAK,CAAM;KACpB,CAAA,CACL;OAVI,CAUJ;GAEb,CAAC,CACA;MACL,kBAAC,OAAD;GAAK,KAAK;GAAe,WAAU;aAAnC,CACI,kBAAC,OAAD;IAAK,WAAU;cACV,EAAM,KAAK,MACR,kBAAC,OAAD;KAAgB,WAAU;KAAW,OAAO,EAAE,QAAQ,EAAY;eAAlE,CACI,kBAAC,QAAD;MAAM,WAAU;gBACX,MAAS,IAAI,KAAK,EAAgB,GAAM,CAAM;KAC7C,CAAA,GACL,uBAAS,IAAI,KAAK,GAAE,SAAS,KAAK,kBAAC,OAAD,EAAK,KAAK,EAAiB,CAAA,CAC7D;OALK,CAKL,CACR;GACA,CAAA,GACJ,EAAK,KAAK,GAAK,MAAW;IACvB,IAAM,IAAM,EAAU,CAAG,GACnB,IAAS,EAAa,IAAI,CAAG,KAAK,CAAC;IACzC,OACI,kBAAC,OAAD;KAAkB,WAAU;eAA5B,CACK,EAAM,KAAK,MAAS;MACjB,IAAM,IAAW,IAAI,KAAK,CAAG;MAE7B,OADA,EAAS,SAAS,GAAM,GAAG,GAAG,CAAC,GAE3B,kBAAC,UAAD;OAEI,MAAK;OACL,cAAY,EAAgB,GAAM,CAAM;OACxC,WAAU;OACV,OAAO,EAAE,QAAQ,EAAY;OAC7B,eAAe,IAAc,CAAQ;MACxC,GANQ,CAMR;KAET,CAAC,GACA,EAAoB,CAAM,EAAE,KAAK,EAAE,UAAO,gBAAa,qBACpD,kBAAC,OAAD;MAEI,MAAK;MACL,WAAU;MACV,OAAO;OACH,KAAK,EAAa,CAAK;OACvB,QAAQ;OACR,MAAM,QAAS,IAAc,IAAe,IAAI;OAChD,OAAO,QAAQ,MAAM,EAAY;MACrC;MACA,UAAU,MAAM,EAAE,gBAAgB;MAClC,YAAY,MAAM,EAAE,gBAAgB;gBAEpC,kBAAC,GAAD;OAAkB;OAAO,eAAe,EAAa,CAAK;MAAI,CAAA;KAC7D,GAbI,EAAM,EAaV,CACR,CACA;OAhCK,CAgCL;GAEb,CAAC,CACA;IACJ;;AAEb"}

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

@@ -1 +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"}
+{"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;AAKxD,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,sBAiHvD,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,sBAyDzG,CAAC"}

package/dist/components/table/filter.js

@@ -0,0 +1,239 @@
+import { t as e } from "../../input-Cmyuea4Y.js";
+import { t } from "../../Funnel.es-DjKVl8Nj.js";
+import { t as n } from "../../Plus.es-DbyRkEE2.js";
+import { t as r } from "../../Trash.es-BFAc8PMf.js";
+import { t as i } from "../../use-translations-BE4PuhLm.js";
+import { c as a } from "../../fns-KbsWlOTG.js";
+import { Select as o } from "../form/select.js";
+import { Dropdown as s } from "../floating/dropdown.js";
+import { c, i as l, t as u } from "../../table-lib-1bkYSklk.js";
+import { Fragment as d, useMemo as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/table/filter.tsx
+var h = (e, t) => t(typeof e.label == "string" ? e.label : e.name), g = (e, t, n, r = {}) => {
+	let i = e.id, o = e.type ?? u.Text, s = t[o] ?? [], c = n[s.find((e) => e["data-default"])?.value ?? s[0]?.value];
+	return {
+		id: a(),
+		operation: c,
+		label: l(e),
+		name: i,
+		type: o,
+		value: "",
+		...r
+	};
+}, _ = () => {
+	let e = i(), t = f(() => ({
+		contains: {
+			value: "contains",
+			label: e.tableFilterTypeContains,
+			symbol: "includes",
+			"data-default": "true"
+		},
+		is: {
+			value: "is",
+			label: e.tableFilterTypeIs,
+			symbol: "is"
+		},
+		isNot: {
+			value: "isNot",
+			label: e.tableFilterTypeIsNot,
+			symbol: "!=="
+		},
+		notContains: {
+			value: "notContains",
+			label: e.tableFilterTypeNotContains,
+			symbol: "notIncludes"
+		},
+		lessThan: {
+			value: "lessThan",
+			label: e.tableFilterTypeLessThan,
+			symbol: "<="
+		},
+		greaterThan: {
+			value: "greaterThan",
+			label: e.tableFilterTypeGreaterThan,
+			symbol: ">="
+		},
+		startsWith: {
+			value: "startsWith",
+			label: e.tableFilterTypeStartsWith,
+			symbol: "startsWith"
+		},
+		endsWith: {
+			value: "endsWith",
+			label: e.tableFilterTypeEndsWith,
+			symbol: "endsWith"
+		}
+	}), [e]);
+	return {
+		options: f(() => ({
+			[u.Text]: [
+				t.is,
+				t.isNot,
+				t.contains,
+				t.notContains,
+				t.startsWith,
+				t.endsWith
+			],
+			[u.Boolean]: [t.is, t.isNot],
+			[u.Number]: [
+				t.is,
+				t.isNot,
+				t.greaterThan,
+				t.lessThan
+			]
+		}), [t]),
+		operations: t
+	};
+}, v = (a) => {
+	let l = i(), u = _(), f = () => {
+		let e = a.cols.at(0);
+		a.set((t) => [...t, g(e, u.options, u.operations)]);
+	}, v = (e) => {
+		let t = e.target.dataset.id || "", n = e.target.value;
+		a.set((e) => e.map((e) => t === e.id ? g(a.cols.find((e) => n === e.id), u.options, u.operations, { value: "" }) : e));
+	}, y = (e) => {
+		let t = e.target.dataset.id || "", n = e.target.value;
+		a.set((e) => e.map((e) => e.id === t ? {
+			...e,
+			operation: u.operations[n]
+		} : e));
+	}, b = (e) => {
+		let t = e.currentTarget.dataset.id || "";
+		a.set((e) => e.filter((e) => e.id !== t));
+	}, x = (e) => {
+		let t = e.target.dataset.id || "", n = c(e.target);
+		a.set((e) => e.map((e) => e.id === t ? {
+			...e,
+			value: n
+		} : e));
+	};
+	return /* @__PURE__ */ p(d, { children: /* @__PURE__ */ p(s, {
+		arrow: !0,
+		title: l.tableFilterDropdownTitle,
+		trigger: /* @__PURE__ */ m("span", {
+			className: "flex items-center gap-table-inline-gap-tight proportional-nums",
+			children: [
+				/* @__PURE__ */ p(t, { size: 14 }),
+				l.tableFilterLabel,
+				" ",
+				a.filters.length === 0 ? "" : ` (${a.filters.length})`
+			]
+		}),
+		children: /* @__PURE__ */ m("ul", {
+			className: "mt-table-filter-list-mt space-y-2",
+			children: [a.filters.map((t) => {
+				let n = u.options[t.type];
+				return /* @__PURE__ */ m("li", {
+					className: "flex flex-nowrap gap-table-filter-row-gap",
+					children: [
+						/* @__PURE__ */ p(o, {
+							options: a.options,
+							title: l.tableFilterColumnTitle,
+							placeholder: l.tableFilterColumnPlaceholder,
+							value: t.name,
+							"data-id": t.id,
+							onChange: v
+						}),
+						/* @__PURE__ */ p(o, {
+							"data-id": t.id,
+							onChange: y,
+							value: t.operation.value,
+							options: n,
+							title: l.tableFilterOperatorTitle,
+							placeholder: l.tableFilterOperatorPlaceholder
+						}),
+						/* @__PURE__ */ p(e, {
+							optionalText: "",
+							"data-id": t.id,
+							onChange: x,
+							value: t.value,
+							type: t.type,
+							title: l.tableFilterValueTitle,
+							placeholder: l.tableFilterValuePlaceholder
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "mt-5 flex items-center justify-center",
+							children: /* @__PURE__ */ p("button", {
+								"data-id": t.id,
+								type: "button",
+								onClick: b,
+								"aria-label": h(t, l.tableFilterDeleteLabel),
+								children: /* @__PURE__ */ p("span", {
+									className: "text-danger",
+									children: /* @__PURE__ */ p(r, {
+										"aria-hidden": "true",
+										size: 16
+									})
+								})
+							})
+						})
+					]
+				}, `filter-select-${t.id}`);
+			}), /* @__PURE__ */ p("li", { children: /* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: f,
+				className: "flex items-center gap-table-inline-gap-tight text-primary",
+				children: [
+					/* @__PURE__ */ p(n, { size: 14 }),
+					" ",
+					l.tableFilterNewFilter
+				]
+			}) })]
+		})
+	}) });
+}, y = ({ filter: t, onDelete: n, set: a }) => {
+	let s = i(), l = _();
+	return /* @__PURE__ */ m("div", {
+		className: "flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py",
+		children: [
+			/* @__PURE__ */ p(o, {
+				"data-id": t.id,
+				onChange: (e) => {
+					let t = e.target.value, n = e.target.dataset.id || "";
+					a((e) => e.map((e) => e.id === n ? {
+						...e,
+						operation: l.operations[t]
+					} : e));
+				},
+				value: t.operation.value,
+				options: l.options[t.type],
+				title: s.tableFilterColumnTitle,
+				placeholder: s.tableFilterColumnPlaceholder
+			}),
+			/* @__PURE__ */ p(e, {
+				optionalText: " ",
+				"data-id": t.id,
+				onChange: (e) => {
+					let t = e.target.dataset.id || "", n = c(e.target);
+					a((e) => e.map((e) => e.id === t ? {
+						...e,
+						value: n
+					} : e));
+				},
+				value: t.value,
+				type: t.type,
+				title: s.tableFilterValueTitle,
+				placeholder: s.tableFilterValueTitle
+			}),
+			/* @__PURE__ */ p("button", {
+				onClick: n,
+				"data-id": t.id,
+				type: "button",
+				className: "mt-4",
+				"aria-label": h(t, s.tableFilterDeleteLabel),
+				children: /* @__PURE__ */ p("span", {
+					className: "text-danger",
+					children: /* @__PURE__ */ p(r, {
+						"aria-hidden": "true",
+						size: 14
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { y as ColumnHeaderFilter, v as Filter, g as createFilterFromCol, _ as useOperators };
+
+//# sourceMappingURL=filter.js.map

package/dist/components/table/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","names":[],"sources":["../../../src/components/table/filter.tsx"],"sourcesContent":["import { Symbols } from \"linq-arrays\";\nimport { FunnelIcon, PlusIcon, TrashIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, useMemo } from \"react\";\nimport { AllPaths } from \"sidekicker\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { uuid } from \"../../lib/fns\";\nimport { Any, Label } from \"../../types\";\nimport { Dropdown } from \"../floating/dropdown\";\nimport { Input, InputTypes } from \"../form/input\";\nimport { OptionProps, Select } from \"../form/select\";\nimport { Col, ColType, getLabel, TableConfiguration, valueFromType } from \"./table-lib\";\n\ntype Operators = {\n    value: string;\n    label: string;\n    symbol: string;\n    \"data-default\"?: string;\n};\n\ntype OperatorTypes = \"contains\" | \"is\" | \"isNot\" | \"notContains\" | \"lessThan\" | \"greaterThan\" | \"startsWith\" | \"endsWith\";\n\ntype Operations = Record<OperatorTypes, Operators>;\n\ntype OperationOptions = Partial<Record<ColType, OptionProps[]>>;\n\ntype FilterValue = string | number | string[] | boolean;\n\nconst getFilterDeleteLabel = <T extends object>(filter: Pick<FilterConfig<T>, \"label\" | \"name\">, translate: (label: string) => string) =>\n    translate(typeof filter.label === \"string\" ? filter.label : filter.name);\n\nexport type FilterConfig<T extends object = object> = {\n    id: string;\n    label: Label;\n    name: AllPaths<T>;\n    type: ColType;\n    operation: Operators;\n    value: FilterValue;\n};\n\ntype Props<T extends object> = TableConfiguration<\n    T,\n    {\n        cols: Col<T>[];\n        filters: FilterConfig<T>[];\n        set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;\n    }\n>;\n\nexport const createFilterFromCol = <T extends Any>(\n    f: Col<T>,\n    options: OperationOptions,\n    operations: Operations,\n    rest: Partial<FilterConfig<T>> = {}\n): FilterConfig<T> => {\n    const name = f.id;\n    const type = f.type ?? ColType.Text;\n    const typeOptions = options[type] ?? [];\n    const operatorId = (typeOptions.find((x) => x[\"data-default\"])?.value ?? typeOptions[0]?.value) as OperatorTypes;\n    const operation = operations[operatorId];\n    return {\n        id: uuid(),\n        operation,\n        label: getLabel(f),\n        name,\n        type,\n        value: \"\",\n        ...rest,\n    };\n};\n\nexport const useOperators = () => {\n    const translation = useTranslations();\n    const operations = useMemo(\n        (): Operations =>\n            ({\n                contains: {\n                    value: \"contains\",\n                    label: translation.tableFilterTypeContains,\n                    symbol: \"includes\",\n                    \"data-default\": \"true\",\n                },\n                is: { value: \"is\", label: translation.tableFilterTypeIs, symbol: \"is\" },\n                isNot: {\n                    value: \"isNot\",\n                    label: translation.tableFilterTypeIsNot,\n                    symbol: \"!==\",\n                },\n                notContains: {\n                    value: \"notContains\",\n                    label: translation.tableFilterTypeNotContains,\n                    symbol: \"notIncludes\",\n                },\n                lessThan: {\n                    value: \"lessThan\",\n                    label: translation.tableFilterTypeLessThan,\n                    symbol: \"<=\",\n                },\n                greaterThan: {\n                    value: \"greaterThan\",\n                    label: translation.tableFilterTypeGreaterThan,\n                    symbol: \">=\",\n                },\n                startsWith: {\n                    value: \"startsWith\",\n                    label: translation.tableFilterTypeStartsWith,\n                    symbol: \"startsWith\",\n                },\n                endsWith: {\n                    value: \"endsWith\",\n                    label: translation.tableFilterTypeEndsWith,\n                    symbol: \"endsWith\",\n                },\n            }) satisfies Record<string, OptionProps & { symbol: Symbols }>,\n        [translation]\n    );\n\n    const options = useMemo(\n        (): OperationOptions => ({\n            [ColType.Text]: [\n                operations.is,\n                operations.isNot,\n                operations.contains,\n                operations.notContains,\n                operations.startsWith,\n                operations.endsWith,\n            ],\n            [ColType.Boolean]: [operations.is, operations.isNot],\n            [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],\n        }),\n        [operations]\n    );\n    return { options, operations };\n};\n\nexport const Filter = <T extends object>(props: Props<T>) => {\n    const translation = useTranslations();\n    const operators = useOperators();\n\n    const onAddFilter = () => {\n        const col = props.cols.at(0)!;\n        props.set((prev) => [...prev, createFilterFromCol(col, operators.options, operators.operations)]);\n    };\n\n    const onSelectProperty = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const changedId = e.target.dataset.id || \"\";\n        const newId = e.target.value;\n        props.set((prev) =>\n            prev.map((x) => {\n                if (changedId !== x.id) return x;\n                const col = props.cols.find((x) => newId === x.id)!;\n                return createFilterFromCol(col, operators.options, operators.operations, { value: \"\" });\n            })\n        );\n    };\n\n    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const operator = e.target.value;\n        props.set((prev) =>\n            prev.map((x) =>\n                x.id === id\n                    ? {\n                          ...x,\n                          operation: operators.operations[operator as OperatorTypes],\n                      }\n                    : x\n            )\n        );\n    };\n\n    const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n        const id = e.currentTarget.dataset.id || \"\";\n        props.set((prev) => prev.filter((x) => x.id !== id));\n    };\n\n    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const value = valueFromType(e.target);\n        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));\n    };\n\n    return (\n        <Fragment>\n            <Dropdown\n                arrow\n                title={translation.tableFilterDropdownTitle}\n                trigger={\n                    <span className=\"flex items-center gap-table-inline-gap-tight proportional-nums\">\n                        <FunnelIcon size={14} />\n                        {translation.tableFilterLabel} {props.filters.length === 0 ? \"\" : ` (${props.filters.length})`}\n                    </span>\n                }\n            >\n                <ul className=\"mt-table-filter-list-mt space-y-2\">\n                    {props.filters.map((filter) => {\n                        const options = operators.options[filter.type]!;\n                        return (\n                            <li key={`filter-select-${filter.id}`} className=\"flex flex-nowrap gap-table-filter-row-gap\">\n                                <Select\n                                    options={props.options}\n                                    title={translation.tableFilterColumnTitle}\n                                    placeholder={translation.tableFilterColumnPlaceholder}\n                                    value={filter.name as string}\n                                    data-id={filter.id}\n                                    onChange={onSelectProperty}\n                                />\n                                <Select\n                                    data-id={filter.id}\n                                    onChange={onSelectOperation}\n                                    value={filter.operation.value}\n                                    options={options}\n                                    title={translation.tableFilterOperatorTitle}\n                                    placeholder={translation.tableFilterOperatorPlaceholder}\n                                />\n                                <Input\n                                    optionalText=\"\"\n                                    data-id={filter.id}\n                                    onChange={onChangeValue}\n                                    value={filter.value as string}\n                                    type={filter.type as InputTypes}\n                                    title={translation.tableFilterValueTitle}\n                                    placeholder={translation.tableFilterValuePlaceholder}\n                                />\n                                <div className=\"mt-5 flex items-center justify-center\">\n                                    <button\n                                        data-id={filter.id}\n                                        type=\"button\"\n                                        onClick={onDelete}\n                                        aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}\n                                    >\n                                        <span className=\"text-danger\">\n                                            <TrashIcon aria-hidden=\"true\" size={16} />\n                                        </span>\n                                    </button>\n                                </div>\n                            </li>\n                        );\n                    })}\n                    <li>\n                        <button type=\"button\" onClick={onAddFilter} className=\"flex items-center gap-table-inline-gap-tight text-primary\">\n                            <PlusIcon size={14} /> {translation.tableFilterNewFilter}\n                        </button>\n                    </li>\n                </ul>\n            </Dropdown>\n        </Fragment>\n    );\n};\n\ntype ColumnHeaderFilterProps<T extends object> = {\n    filter: FilterConfig<T>;\n    onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;\n    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;\n};\n\nexport const ColumnHeaderFilter = <T extends object>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => {\n    const translation = useTranslations();\n    const operators = useOperators();\n\n    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const operator = e.target.value;\n        const id = e.target.dataset.id || \"\";\n        set((prev) =>\n            prev.map((x) =>\n                x.id === id\n                    ? {\n                          ...x,\n                          operation: operators.operations[operator as OperatorTypes],\n                      }\n                    : x\n            )\n        );\n    };\n\n    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const value = valueFromType(e.target);\n        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));\n    };\n\n    return (\n        <div className=\"flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py\">\n            <Select\n                data-id={filter.id}\n                onChange={onSelectOperation}\n                value={filter.operation.value}\n                options={operators.options[filter.type]!}\n                title={translation.tableFilterColumnTitle}\n                placeholder={translation.tableFilterColumnPlaceholder}\n            />\n            <Input\n                optionalText=\" \"\n                data-id={filter.id}\n                onChange={onChangeValue}\n                value={filter.value as string}\n                type={filter.type as InputTypes}\n                title={translation.tableFilterValueTitle}\n                placeholder={translation.tableFilterValueTitle}\n            />\n            <button\n                onClick={onDelete}\n                data-id={filter.id}\n                type=\"button\"\n                className=\"mt-4\"\n                aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}\n            >\n                <span className=\"text-danger\">\n                    <TrashIcon aria-hidden=\"true\" size={14} />\n                </span>\n            </button>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/components/table/filter.jsx

@@ -6,6 +6,7 @@ import { Dropdown } from "../floating/dropdown";
 import { Input } from "../form/input";
 import { Select } from "../form/select";
 import { ColType, getLabel, valueFromType } from "./table-lib";
+const getFilterDeleteLabel = (filter, translate) => translate(typeof filter.label === "string" ? filter.label : filter.name);
 export const createFilterFromCol = (f, options, operations, rest = {}) => {
     const name = f.id;
     const type = f.type ?? ColType.Text;
@@ -126,8 +127,10 @@ export const Filter = (props) => {
                                 <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="mt-5 flex items-center justify-center">
-                                    <button data-id={filter.id} type="button" onClick={onDelete}>
-                                        <TrashIcon className="text-danger" size={16}/>
+                                    <button data-id={filter.id} type="button" onClick={onDelete} aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}>
+                                        <span className="text-danger">
+                                            <TrashIcon aria-hidden="true" size={16}/>
+                                        </span>
                                     </button>
                                 </div>
                             </li>);
@@ -162,8 +165,10 @@ export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
     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">
-                <TrashIcon className="text-danger" size={14}/>
+            <button onClick={onDelete} data-id={filter.id} type="button" className="mt-4" aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}>
+                <span className="text-danger">
+                    <TrashIcon aria-hidden="true" size={14}/>
+                </span>
             </button>
         </div>);
 };

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

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

package/dist/components/table/group.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../group-Dl14TJXO.js";
+export { e as Group };

package/dist/components/table/group.jsx

@@ -52,14 +52,16 @@ export const Group = (props) => {
                         {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..."/>
+                    <Select value={group} title={translations.tableGroupTypeTitle} onChange={onChange} options={options} placeholder={translations.tableGroupPlaceholder}/>
                     <Button className="mt-table-groups-mt" onClick={onDelete} theme="raw" data-id={group}>
-                        <TrashIcon size={16} className="text-danger"/>
+                        <span className="text-danger">
+                            <TrashIcon size={16} aria-hidden="true"/>
+                        </span>
                     </Button>
                 </div>
                 {props.groups.length > 0 ? (<section className="my-table-groups-my">
                         <header>
-                            <h2 className="text-typography-xl font-medium">Order groups</h2>
+                            <h2 className="text-typography-xl font-medium">{translations.tableGroupOrderTitle}</h2>
                         </header>
                         <LayoutGroup>
                             <Reorder.Group axis="y" className="relative space-y-2" drag dragControls={controls} dragListener={false} layoutScroll onReorder={props.setGroups} values={props.groups}>