@g4rcez/components 0.0.24 → 0.0.26

package/dist/components/form/date-picker.js

@@ -2,11 +2,12 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, parse, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { Fragment, useMemo, useState } from "react";
+import { Fragment, useId, useMemo, useState } from "react";
 import { Is } from "sidekicker";
 import { Calendar } from "../display/calendar";
 import { Dropdown } from "../floating/dropdown";
 import { Input } from "./input";
+import { useTranslations } from "../../hooks/use-translate-context";
 const fixedDate = new Date(1970, 11, 31);
 const parts = {
     year: () => [/\d/, /\d/, /\d/, /\d/],
@@ -29,6 +30,8 @@ const partValues = {
 export const DatePicker = (_a) => {
     var _b;
     var { date, locale, disabledDate, autoFocusToday, onChange, markToday } = _a, props = __rest(_a, ["date", "locale", "disabledDate", "autoFocusToday", "onChange", "markToday"]);
+    const labelId = useId();
+    const translation = useTranslations();
     const datetimeFormat = useMemo(() => new Intl.DateTimeFormat(locale), [locale]);
     const [innerDate, setInnerDate] = useState(date || undefined);
     const [open, setOpen] = useState(false);
@@ -61,5 +64,5 @@ export const DatePicker = (_a) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(d);
         setValue(format(d, placeholder));
     };
-    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChangeDateInput, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { restoreFocus: true, trigger: _jsx(CalendarIcon, {}), onChange: setOpen, open: open, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
+    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChangeDateInput, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: innerDate === null || innerDate === void 0 ? void 0 : innerDate.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { open: open, restoreFocus: true, onChange: setOpen, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), buttonProps: { "aria-describedby": labelId }, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, date: innerDate, onChange: onChangeDate, markToday: markToday, disabledDate: disabledDate, autoFocusToday: autoFocusToday })) })] }) })));
 };

package/dist/components/form/input-field.d.ts

@@ -1,16 +1,19 @@
 import React, { PropsWithChildren } from "react";
-import { PolymorphicProps } from "../core/polymorph";
 import { Label } from "../../types";
+import { PolymorphicProps } from "../core/polymorph";
 export type FeedbackProps = React.PropsWithChildren<Partial<{
-    title: string | React.ReactElement | React.ReactNode;
+    info: Label;
+    title: Label;
     hideLeft?: boolean;
     className?: string;
     placeholder: string;
     reportStatus: boolean;
 }>>;
-export declare const InputFeedback: ({ reportStatus, hideLeft, className, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputFeedback: ({ reportStatus, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
 export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<Partial<{
-    error?: string;
+    info: Label;
+    labelClassName: string;
+    error: string;
     hideLeft: boolean;
     interactive: boolean;
     container: string;
@@ -23,5 +26,5 @@ export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<Par
     name: string;
     placeholder: string;
 }>, T>;
-export declare const InputField: <T extends "input" | "select">({ optionalText, left, rightLabel, container, feedback, interactive, right, children, error, form, id, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const InputField: <T extends "input" | "select">({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=input-field.d.ts.map

package/dist/components/form/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AACF,eAAO,MAAM,aAAa,2DAAoE,aAAa,4CA2B1G,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,IAAI,gBAAgB,CACxE,OAAO,CAAC;IACJ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,QAAQ,yJAiBpD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAsCvC,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CAiDhH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,IAAI,gBAAgB,CACxE,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,QAAQ,8LAmBpD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAmCvC,CAAC"}

package/dist/components/form/input-field.js

@@ -1,10 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircle, XCircle } from "lucide-react";
+import { CheckCircle, InfoIcon, XCircle } from "lucide-react";
 import { Fragment } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
 import { css } from "../../lib/dom";
-export const InputFeedback = ({ reportStatus, hideLeft = false, className, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger", children: [title, reportStatus ? (_jsxs("span", { className: "flex aspect-square h-4 w-4 items-center justify-center", children: [_jsx(CheckCircle, { className: "hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square h-3 w-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })), children] }));
-export const InputField = ({ optionalText = "Optional", left, rightLabel, container, feedback, interactive, right, children, error, form, id, name, title, placeholder, hideLeft, required, }) => {
+import { Tooltip } from "../floating/tooltip";
+export const InputFeedback = ({ reportStatus, hideLeft = false, className, info, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 group-hover:text-primary group-focus-within:text-primary transition-colors group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex gap-1 items-center justify-center", children: [info ? (_jsx(Tooltip, { title: _jsxs("span", { children: [_jsx("span", { className: "sr-only", children: info }), _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] }), children: info })) : null, reportStatus ? (_jsxs(Fragment, { children: [_jsx(CheckCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true }), _jsx(XCircle, { className: "hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] })) : null] })) : null] })), children] }));
+export const InputField = ({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, placeholder, hideLeft, required, }) => {
     const ID = id !== null && id !== void 0 ? id : name;
-    return (_jsxs("fieldset", { "data-interactive": !!interactive, "data-error": !!error, form: form, className: css("group inline-block w-full", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger group-hover:border-primary", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("div", { className: "relative group flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger", children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "group-error:block group-error:text-danger mt-1 hidden text-xs group-has-[input:not(:focus):invalid[data-initialized=true]]:block", children: error }), _jsx("p", { className: "mt-1 hidden text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block", children: feedback })] }));
+    const translation = useTranslations();
+    const optionalText = _optionalText !== null && _optionalText !== void 0 ? _optionalText : translation.inputOptionalLabel;
+    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-interactive": !!interactive, className: css("group inline-flex gap-1.5 w-full", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-error:text-danger group-hover:border-primary", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("div", { className: `relative group flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-focus-within:border-primary group-hover:border-primary group-error:border-danger ${labelClassName}`, children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "group-error:block empty:hidden group-error:text-danger hidden text-xs group-has-[input:not(:focus):invalid[data-initialized=true]]:block", children: error }), _jsx("p", { className: "text-xs group-assert:block group-error:hidden empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block", children: feedback })] }));
 };

package/dist/components/form/input.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TheMaskProps } from "the-mask-input";
-import { FeedbackProps, InputFieldProps } from "./input-field";
 import { Override } from "../../types";
+import { FeedbackProps, InputFieldProps } from "./input-field";
 export type InputProps = Override<InputFieldProps<"input">, TheMaskProps & FeedbackProps & {
     next?: string;
 }>;

package/dist/components/form/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,OAAO,CAAC,EACxB,YAAY,GACR,aAAa,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CACR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0D/B,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,OAAO,CAAC,EACxB,YAAY,GACR,aAAa,GAAG;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CACR,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqF/B,CAAC"}

package/dist/components/form/input.js

@@ -3,11 +3,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef } from "react";
 import MaskInput from "the-mask-input";
-import { InputField } from "./input-field";
 import { css, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
 export const Input = forwardRef((_a, ref) => {
     var _b;
-    var { type = "text", container, feedback = null, next, rightLabel, optionalText, hideLeft = false, right, left } = _a, props = __rest(_a, ["type", "container", "feedback", "next", "rightLabel", "optionalText", "hideLeft", "right", "left"]);
+    var { type = "text", feedback = null, info, labelClassName, next, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["type", "feedback", "info", "labelClassName", "next", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
     const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
     const inputRef = useRef(null);
     useEffect(() => {
@@ -35,5 +35,5 @@ export const Input = forwardRef((_a, ref) => {
             input.removeEventListener("focus", focus);
         };
     }, []);
-    return (_jsx(InputField, Object.assign({}, props, { feedback: feedback, right: right, left: left, hideLeft: hideLeft, rightLabel: rightLabel, optionalText: optionalText, container: css("group inline-block w-full", container), children: _jsx(MaskInput, Object.assign({}, props, { type: type, "data-next": next, ref: mergeRefs(ref, inputRef), id: id, name: id, className: css("input text-foreground group h-10 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right ? "pe-4" : "", !!left ? "ps-4" : "", props.className) })) })));
+    return (_jsx(InputField, { info: info, container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, right: right, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: props.required, children: _jsx(MaskInput, Object.assign({}, props, { type: type, "data-next": next, ref: mergeRefs(ref, inputRef), id: id, name: id, className: css("input text-foreground group h-11 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right ? "pe-4" : "", !!left ? "ps-4" : "", props.className) })) }));
 });

package/dist/components/form/radiobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAanF,CAAC"}
+{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAiBnF,CAAC"}

package/dist/components/form/select.d.ts

@@ -3,9 +3,11 @@ import { InputFieldProps } from "./input-field";
 import { Override } from "../../types";
 export type OptionProps = Override<React.ComponentProps<"option">, {
     value: string;
+    "data-dynamic"?: string;
 }>;
 export type SelectProps = Override<InputFieldProps<"select">, {
     options: OptionProps[];
+    selectContainer?: string;
 }>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=select.d.ts.map

package/dist/components/form/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEtF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;IAAE,OAAO,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC,CAAC;AAE1F,eAAO,MAAM,MAAM,oGA8CjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/G,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE;IAC1D,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,MAAM,oGAgEjB,CAAC"}

package/dist/components/form/select.js

@@ -5,9 +5,11 @@ import { ChevronDown } from "lucide-react";
 import { forwardRef, useEffect, useRef } from "react";
 import { InputField } from "./input-field";
 import { css, mergeRefs } from "../../lib/dom";
+import { useTranslations } from "../../hooks/use-translate-context";
 export const Select = forwardRef((_a, ref) => {
     var _b;
-    var { container, required = true, options } = _a, props = __rest(_a, ["container", "required", "options"]);
+    var { required = true, options, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["required", "options", "selectContainer", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
+    const translation = useTranslations();
     const inputRef = useRef(null);
     const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
     useEffect(() => {
@@ -23,8 +25,8 @@ export const Select = forwardRef((_a, ref) => {
             input.removeEventListener("change", change);
         };
     }, []);
-    return (_jsx(InputField, Object.assign({}, props, { required: required, container: css("group inline-block w-full", container), right: _jsx(ChevronDown, { size: 20 }), children: _jsxs("select", Object.assign({}, props, { ref: mergeRefs(ref, inputRef), id: id, name: id, required: required, "data-selected": !!props.value || false, className: css("input bg-transparent text-foreground select group h-10 w-full flex-1 rounded-md p-2 placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", hidden: true, disabled: true, children: props.placeholder }), options.map((option) => {
+    return (_jsx(InputField, { container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: required, right: _jsxs("button", { type: "button", className: "hover:text-primary transition-colors", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), children: _jsxs("select", Object.assign({}, props, { ref: mergeRefs(ref, inputRef), id: id, name: id, required: required, "data-selected": !!props.value || false, className: css("input bg-transparent text-foreground select group h-11 w-full flex-1 rounded-md p-2 placeholder-input-placeholder outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className), children: [_jsx("option", { value: "", hidden: true, disabled: true, children: props.placeholder }), options.map((option) => {
                     var _a;
                     return (_jsx("option", Object.assign({}, option, { children: (_a = option.label) !== null && _a !== void 0 ? _a : option.value }), `${id}-select-option-${option.value}`));
-                })] })) })));
+                })] })) }));
 });

package/dist/components/form/switch.js

@@ -15,5 +15,5 @@ export const Switch = (_a) => {
         setInnerChecked(checked);
         (_a = props === null || props === void 0 ? void 0 : props.onCheck) === null || _a === void 0 ? void 0 : _a.call(props, checked);
     };
-    return (_jsxs("div", { className: "flex items-center", children: [_jsx("input", Object.assign({}, props, { hidden: true, type: "checkbox", checked: checked, onChange: (e) => setInnerChecked(e.target.checked) })), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary transition-colors ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2", children: _jsx("span", { "aria-hidden": "true", "data-checked": checked, className: "data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch inline-block size-5 aspect-square data-[checked=false]translate-x-0 data-[checked=true]:translate-x-5 transform rounded-full shadow ring-0 transition ease-in-out" }) }), _jsx("span", { className: "ml-3 text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) })] }));
+    return (_jsxs("div", { className: "flex items-center", children: [_jsx("input", Object.assign({}, props, { hidden: true, type: "checkbox", checked: checked, onChange: (e) => setInnerChecked(e.target.checked) })), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, className: "relative duration-300 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary transition-colors ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2", children: _jsx("span", { "aria-hidden": "true", "data-checked": checked, className: "data-[checked=false]:bg-disabled duration-300 data-[checked=true]:bg-input-switch inline-block size-5 aspect-square data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out" }) }), _jsx("span", { className: "ml-3 text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) })] }));
 };

package/dist/components/index.d.ts

@@ -22,5 +22,6 @@ export * from "./form/select";
 export * from "./form/switch";
 export * from "./form/transfer-list";
 export * from "./table/index";
+export * from "./floating/menu";
 export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -22,4 +22,5 @@ export * from "./form/select";
 export * from "./form/switch";
 export * from "./form/transfer-list";
 export * from "./table/index";
+export * from "./floating/menu";
 export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";

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

@@ -1,51 +1,16 @@
 import React from "react";
 import { AllPaths } from "sidekicker";
 import { Label } from "../../types";
+import { OptionProps } from "../form/select";
 import { Col, ColType, TableConfiguration } from "./table-lib";
-declare const operators: {
-    contains: {
-        value: string;
-        label: string;
-        symbol: "includes";
-    };
-    is: {
-        value: string;
-        label: string;
-        symbol: "is";
-    };
-    isNot: {
-        value: string;
-        label: string;
-        symbol: "!==";
-    };
-    notContains: {
-        value: string;
-        label: string;
-        symbol: "notIncludes";
-    };
-    lessThan: {
-        value: string;
-        label: string;
-        symbol: "<=";
-    };
-    greaterThan: {
-        value: string;
-        label: string;
-        symbol: ">=";
-    };
-    startsWith: {
-        value: string;
-        label: string;
-        symbol: "startsWith";
-    };
-    endsWith: {
-        value: string;
-        label: string;
-        symbol: "endsWith";
-    };
+type Operators = {
+    value: string;
+    label: string;
+    symbol: string;
 };
-type Operator = keyof typeof operators;
-type Operators = (typeof operators)[Operator];
+type OperatorTypes = "contains" | "is" | "isNot" | "notContains" | "lessThan" | "greaterThan" | "startsWith" | "endsWith";
+type Operations = Record<OperatorTypes, Operators>;
+type OperationOptions = Partial<Record<ColType, OptionProps[]>>;
 type FilterValue = string | number | string[] | boolean;
 export type FilterConfig<T extends {} = {}> = {
     id: string;
@@ -60,7 +25,11 @@ type Props<T extends {}> = TableConfiguration<T, {
     filters: FilterConfig<T>[];
     set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
 }>;
-export declare const createFilterFromCol: <T extends {}>(f: Col<T>, rest?: Partial<FilterConfig<T>>) => FilterConfig<T>;
+export declare const createFilterFromCol: <T extends {}>(f: Col<T>, options: OperationOptions, operations: Operations, rest?: Partial<FilterConfig<T>>) => FilterConfig<T>;
+export declare const useOperators: () => {
+    operationOptions: Partial<Record<ColType, OptionProps[]>>;
+    operations: Operations;
+};
 export declare const Filter: <T extends {}>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 type ColumnHeaderFilterProps<T extends {}> = {
     filter: FilterConfig<T>;

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,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAExF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS8C,CAAC;AAE9D,KAAK,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAEvC,KAAK,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;AAQ9C,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI;IAC1C,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,EAAE,IAAI,kBAAkB,CACzC,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,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,SAAQ,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAQ,YAAY,CAAC,CAAC,CAMhH,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA6FnD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,EAAE,IAAI;IACzC,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,EAAE,6BAA6B,uBAAuB,CAAC,CAAC,CAAC,4CAoCrG,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;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAGxF,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjE,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAA;AAEzH,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;AAElD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAA;AAE/D,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI;IAC1C,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,EAAE,IAAI,kBAAkB,CACzC,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,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,gBAAgB,cAAc,UAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAQ,YAAY,CAAC,CAAC,CAMnK,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAwBxB,CAAA;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CAiGnD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,EAAE,IAAI;IACzC,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,EAAE,6BAA6B,uBAAuB,CAAC,CAAC,CAAC,4CAsCrG,CAAC"}

package/dist/components/table/filter.js

@@ -1,38 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ListFilterIcon, PlusIcon, Trash2Icon } from "lucide-react";
-import { Fragment } from "react";
+import { Fragment, useMemo } from "react";
 import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
 import { Input } from "../form/input";
 import { Select } from "../form/select";
 import { ColType, getLabel, valueFromType } from "./table-lib";
-const operators = {
-    contains: { value: "contains", label: "Contains", symbol: "includes" },
-    is: { value: "is", label: "Is", symbol: "is" },
-    isNot: { value: "isNot", label: "Is not", symbol: "!==" },
-    notContains: { value: "notContains", label: "Does not contains", symbol: "notIncludes" },
-    lessThan: { value: "lessThan", label: "Less Than", symbol: "<=" },
-    greaterThan: { value: "greaterThan", label: "Greater than", symbol: ">=" },
-    startsWith: { value: "startsWith", label: "Starts with", symbol: "startsWith" },
-    endsWith: { value: "endsWith", label: "Ends with", symbol: "endsWith" },
-};
-const operatorOptions = {
-    [ColType.Text]: [operators.is, operators.isNot, operators.contains, operators.notContains, operators.startsWith, operators.endsWith],
-    [ColType.Boolean]: [operators.is, operators.isNot],
-    [ColType.Number]: [operators.is, operators.isNot, operators.greaterThan, operators.lessThan],
-};
-export const createFilterFromCol = (f, rest = {}) => {
+import { useTranslations } from "../../hooks/use-translate-context";
+export const createFilterFromCol = (f, options, operations, rest = {}) => {
     var _a, _b;
     const name = f.id;
     const type = (_a = f.type) !== null && _a !== void 0 ? _a : ColType.Text;
-    const operatorId = (_b = operatorOptions[type]) === null || _b === void 0 ? void 0 : _b[0].value;
-    const operation = operators[operatorId];
+    const operatorId = (_b = options[type]) === null || _b === void 0 ? void 0 : _b[0].value;
+    const operation = operations[operatorId];
     return Object.assign({ id: uuid(), operation, label: getLabel(f), name, type, value: "" }, rest);
 };
+export const useOperators = () => {
+    const translation = useTranslations();
+    const operations = useMemo(() => {
+        return {
+            contains: { value: "contains", label: translation.tableFilterTypeContains, symbol: "includes" },
+            is: { value: "is", label: translation.tableFilterTypeIs, symbol: "is" },
+            isNot: { value: "isNot", label: translation.tableFilterTypeIsNot, symbol: "!==" },
+            notContains: { value: "notContains", label: translation.tableFilterTypeNotContains, symbol: "notIncludes" },
+            lessThan: { value: "lessThan", label: translation.tableFilterTypeLessThan, symbol: "<=" },
+            greaterThan: { value: "greaterThan", label: translation.tableFilterTypeGreaterThan, symbol: ">=" },
+            startsWith: { value: "startsWith", label: translation.tableFilterTypeStartsWith, symbol: "startsWith" },
+            endsWith: { value: "endsWith", label: translation.tableFilterTypeEndsWith, symbol: "endsWith" },
+        };
+    }, [translation]);
+    const operationOptions = useMemo(() => {
+        return {
+            [ColType.Text]: [operations.is, operations.isNot, operations.contains, operations.notContains, operations.startsWith, operations.endsWith],
+            [ColType.Boolean]: [operations.is, operations.isNot],
+            [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],
+        };
+    }, [translation]);
+    return { operationOptions, operations };
+};
 export const Filter = (props) => {
+    const translation = useTranslations();
+    const { operationOptions, operations } = useOperators();
     const onAddFilter = () => {
         const col = props.cols.at(0);
-        props.set((prev) => [...prev, createFilterFromCol(col)]);
+        props.set((prev) => [...prev, createFilterFromCol(col, operationOptions, operations)]);
     };
     const onSelectProperty = (e) => {
         const changedId = e.target.dataset.id || "";
@@ -41,13 +52,13 @@ export const Filter = (props) => {
             if (changedId !== x.id)
                 return x;
             const col = props.cols.find((x) => newId === x.id);
-            return createFilterFromCol(col, { value: "" });
+            return createFilterFromCol(col, operationOptions, operations, { value: "" });
         }));
     };
     const onSelectOperation = (e) => {
         const id = e.target.dataset.id || "";
         const operator = e.target.value;
-        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operators[operator] }) : x)));
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operations[operator] }) : x)));
     };
     const onDelete = (e) => {
         const id = e.currentTarget.dataset.id || "";
@@ -58,21 +69,23 @@ export const Filter = (props) => {
         const value = valueFromType(e.target);
         props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value }) : x)));
     };
-    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: false, title: "Filters", trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ListFilterIcon, { size: 14 }), "Filtros ", props.filters.length === 0 ? "" : ` (${props.filters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.filters.map((filter) => {
-                        const operators = operatorOptions[filter.type];
-                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { title: "Filter", options: props.options, placeholder: "Name...", value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { title: "Filter type", "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators, placeholder: "Operator..." }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, placeholder: "Search...", title: "Value", type: filter.type, value: filter.value }), _jsx("div", { className: "flex items-center justify-center mt-5", children: _jsx("button", { "data-id": filter.id, type: "button", onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 16 }) }) })] }, `filter-select-${filter.id}`));
-                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddFilter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " New filter"] }) })] }) }) }));
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: true, title: translation.tableFilterDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ListFilterIcon, { size: 14 }), translation.tableFilterLabel, " ", props.filters.length === 0 ? "" : ` (${props.filters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.filters.map((filter) => {
+                        const operators = operationOptions[filter.type];
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder, value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators, title: translation.tableFilterOperatorTitle, placeholder: translation.tableFilterOperatorPlaceholder }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValuePlaceholder, type: filter.type, value: filter.value, optionalText: "" }), _jsx("div", { className: "flex items-center justify-center mt-5", children: _jsx("button", { "data-id": filter.id, type: "button", onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 16 }) }) })] }, `filter-select-${filter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddFilter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] }) }) }));
 };
 export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
+    const translation = useTranslations();
+    const { operationOptions, operations } = useOperators();
     const onSelectOperation = (e) => {
         const operator = e.target.value;
         const id = e.target.dataset.id || "";
-        set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operators[operator] }) : x)));
+        set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: operations[operator] }) : x)));
     };
     const onChangeValue = (e) => {
         const id = e.target.dataset.id || "";
         const value = valueFromType(e.target);
         set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value }) : x)));
     };
-    return (_jsxs("div", { className: "flex flex-nowrap items-center gap-4 py-2", children: [_jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, options: operatorOptions[filter.type], placeholder: "Operation...", title: "Filter type", value: filter.operation.value }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, placeholder: "Looking for...", title: "Value", type: filter.type, value: filter.value }), _jsx("button", { onClick: onDelete, "data-id": filter.id, type: "button", className: "mt-4", children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }));
+    return (_jsxs("div", { className: "flex flex-nowrap items-center gap-4 py-2", children: [_jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, options: operationOptions[filter.type], title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder, value: filter.operation.value }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, type: filter.type, value: filter.value, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValueTitle }), _jsx("button", { onClick: onDelete, "data-id": filter.id, type: "button", className: "mt-4", children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }));
 };

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,KAAK,EAAE,EAAY,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM9F,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,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGtG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AA2JN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GAAG;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAO/E,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CAgGvD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM7G,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,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKtG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAyKN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GAAG;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAO/E,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CAgGvD,CAAC"}

package/dist/components/table/index.js

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import Linq from "linq-arrays";
 import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { TableVirtuoso } from "react-virtuoso";
-import { Is } from "sidekicker";
+import { clamp, Is } from "sidekicker";
 import { useReducer } from "use-typed-reducer";
 import { useCallbackRef } from "../../hooks/use-callback-ref";
 import { path } from "../../lib/fns";
@@ -14,19 +14,20 @@ import { Pagination } from "./pagination";
 import { multiSort } from "./sort";
 import { createOptionCols } from "./table-lib";
 import { TableHeader } from "./thead";
+const calculateSkeletonWidth = () => clamp(40, Math.random() * 90, 90);
 const TableBody = React.forwardRef((props, ref) => {
     var _a;
-    return (_jsx("tbody", Object.assign({}, props, { className: `divide-y divide-table-border ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
+    return (_jsx("tbody", Object.assign({}, props, { role: "rowgroup", className: `divide-y divide-table-border ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
 });
 const VirtualTable = React.forwardRef((props, ref) => {
     var _a;
-    return (_jsx("table", Object.assign({}, props, { ref: ref, className: `table min-w-full divide-y divide-table-border table-auto text-left ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
+    return (_jsx("table", Object.assign({}, props, { ref: ref, role: "table", className: `table min-w-full divide-y divide-table-border table-auto text-left ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
 });
-const Thead = React.forwardRef((props, ref) => _jsx("thead", Object.assign({}, props, { className: "bg-card-background shadow-xs group:sticky top-0", ref: ref })));
-const TRow = React.forwardRef((props, ref) => { var _a; return _jsx("tr", Object.assign({}, props, { ref: ref, className: `table-row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })); });
+const Thead = React.forwardRef((props, ref) => (_jsx("thead", Object.assign({}, props, { role: "rowgroup", className: "bg-card-background shadow-xs group:sticky top-0", ref: ref }))));
+const TRow = React.forwardRef((props, ref) => { var _a; return _jsx("tr", Object.assign({}, props, { role: "row", ref: ref, className: `table-row ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })); });
 const TFoot = React.forwardRef((props, ref) => {
     if (props.context.loadingMore) {
-        return (_jsx("tfoot", Object.assign({}, props, { ref: ref, className: "bg-card-background", children: _jsx("tr", { className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 bg-foreground rounded opacity-60 animate-pulse" }) }) }) })));
+        return (_jsx("tfoot", Object.assign({}, props, { ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 bg-foreground rounded opacity-60 animate-pulse" }) }) }) })));
     }
     return null;
 });
@@ -45,7 +46,7 @@ const ItemContent = (index, row, context) => {
             const matrix = `${colIndex},${index}`;
             const value = path(row, col.id);
             const Component = col.Element;
-            return (_createElement("td", Object.assign({}, col.cellProps, { "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: "px-2 h-14 border-none first:table-cell hidden md:table-cell" }), loading ? (_jsx("div", { className: "animate-pulse h-2 bg-table-border rounded" })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
+            return (_createElement("td", Object.assign({}, col.cellProps, { "data-matrix": matrix, role: "cell", key: `accessor-${index}-${colIndex}`, className: "px-2 h-14 border-none first:table-cell hidden md:table-cell" }), loading ? (_jsx("div", { className: "animate-pulse h-2 bg-table-border rounded", style: { width: `${calculateSkeletonWidth()}%` } })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
         }) }));
 };
 const Frag = () => _jsx(Fragment, {});
@@ -62,7 +63,7 @@ const InnerTable = (_a) => {
             return props.rows;
         const linq = new Linq(props.rows);
         if (filters.length > 0) {
-            filters.forEach((x) => (x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value)));
+            filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
         }
         if (sorters.length === 0)
             return linq.Select();
@@ -86,7 +87,7 @@ const InnerTable = (_a) => {
         observer.observe(div);
         return () => observer.disconnect();
     }, []);
-    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group  rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { sorters: sorters, setSorters: setSorters, filters: filters, setFilters: setFilters, headers: cols, setCols: setCols })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
+    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group  rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, sorters: sorters, filters: filters, setCols: setCols, setSorters: setSorters, setFilters: setFilters, loading: !!props.loading })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
 };
 const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
 export const Table = (props) => {

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAwB9C,eAAO,MAAM,UAAU,eAAgB,eAAe,4CA6CrD,CAAA"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAwB9C,eAAO,MAAM,UAAU,eAAgB,eAAe,4CAyErD,CAAC"}

package/dist/components/table/pagination.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useMemo } from "react";
+import { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
 function createPaginationItems(current, max) {
     if (!current || !max)
         return [];
@@ -26,19 +27,17 @@ function createPaginationItems(current, max) {
     return Array.from(new Set(items));
 }
 export const Pagination = (pagination) => {
+    const id = useId();
+    const translation = useTranslations();
     const Render = pagination.asLink || "button";
     const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
     const hasNext = pagination.current < pagination.pages;
-    return _jsxs("footer", { className: "flex px-1 py-2 items-center justify-center gap-4 lg:justify-between flex-wrap lg:flex-nowrap", children: [_jsxs("p", { children: [pagination.current, " to ", pagination.pages, " of ", pagination.totalItems, " items.", pagination.onChangeSize && Array.isArray(pagination.sizes) ?
-                        _jsxs(Fragment, { children: [_jsx("select", { value: pagination.size, className: "cursor-pointer bg-transparent", onChange: e => {
-                                        var _a;
-                                        (_a = pagination.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(pagination, Number(e.target.value));
-                                    }, children: pagination.sizes.map(value => _jsx("option", { value: value, children: value })) }), " per page"] })
-                        : null] }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? _jsx("li", { children: _jsx(Render, { href: "previous", className: "", children: "Previous" }) }) : null, pageNavigation.map(x => {
+    return (_jsxs("footer", { className: "flex px-1 py-4 items-center justify-center gap-4 lg:justify-between flex-wrap lg:flex-nowrap", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, Object.assign({}, pagination, { sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
+                                    var _a;
+                                    (_a = pagination.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(pagination, Number(e.target.value));
+                                }, children: pagination.sizes.map((value) => (_jsx("option", { value: value, children: value }, `pagination-opt-${value}`))) }), " "] })) : null })) }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? (_jsx("li", { children: _jsx(Render, { href: "previous", className: "", children: translation.tablePaginationPrevious }) })) : null, pageNavigation.map((x) => {
                             if (x === null)
                                 return null;
-                            return _jsx(Fragment, { children: typeof x === "string" ?
-                                    _jsx("li", { children: "..." }) :
-                                    _jsx("li", { children: _jsx(Render, { href: x, className: `cursor-pointer px-3 py-1 transition-colors border-b-2 hover:text-primary-subtle hover:border-primary-subtle proportional-nums ${x === pagination.current ? "text-primary border-primary" : "border-transparent"}`, children: x }) }, `pagination-${x}`) });
-                        }), hasNext ? _jsx("li", { children: _jsx(Render, { href: "next", className: "", children: "Next" }) }) : null] }) })] });
+                            return (_jsx(Fragment, { children: typeof x === "string" ? (_jsx("li", { children: "..." })) : (_jsx("li", { children: _jsx(Render, { href: x, className: `cursor-pointer px-3 py-1 transition-colors border-b-2 hover:text-primary-subtle hover:border-primary-subtle proportional-nums ${x === pagination.current ? "text-primary border-primary" : "border-transparent"}`, children: x }) })) }, `pagination-${x}`));
+                        }), hasNext ? (_jsx("li", { children: _jsx(Render, { href: "next", className: "", children: translation.tablePaginationNext }) })) : null] }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAE3E,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAAuC,CAAC;AAS/G,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CAkEjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CAyBjE,CAAC"}
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGrF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAAuC,CAAC;AAG/G,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA0EjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CA+BjE,CAAC"}