@g4rcez/components 0.0.25 → 0.0.27

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,oGAkDjB,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("button", { type: "button", className: "hover:text-primary transition-colors", children: _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/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;AA2KN,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,27 @@ 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((_a, ref) => {
+    var { context } = _a, props = __rest(_a, ["context"]);
+    return (_jsx("thead", Object.assign({}, props, { role: "rowgroup", className: "bg-card-background shadow-xs group:sticky top-0", ref: ref })));
+});
+const TRow = React.forwardRef((_a, ref) => {
+    var _b;
+    var { context, item } = _a, props = __rest(_a, ["context", "item"]);
+    return (_jsx("tr", Object.assign({}, props, { role: "row", ref: ref, className: `table-row ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` })));
 });
-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 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 +53,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 +70,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 +94,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;AAuB9C,eAAO,MAAM,UAAU,eAAgB,eAAe,4CAmErD,CAAC"}
+{"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,15 +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) => {
+    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}`))) }), " ", "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) => {
+                                }, 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] }) })] }));
+                        }), 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"}

package/dist/components/table/sort.js

@@ -5,6 +5,8 @@ import { Fragment, useEffect, useState } from "react";
 import { uuid } from "../../lib/fns";
 import { Dropdown } from "../floating/dropdown";
 import { Select } from "../form/select";
+import { getLabel } from "./table-lib";
+import { useTranslations } from "../../hooks/use-translate-context";
 var Order;
 (function (Order) {
     Order["Asc"] = "asc";
@@ -18,22 +20,23 @@ const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
     return acc !== 0 ? acc : p;
 }, 0);
 export const multiSort = (array, fields) => array.sort(createSorterFn(fields));
-const orders = {
-    asc: { label: "Ascending", value: Order.Asc },
-    desc: { label: "Descending", value: Order.Desc },
-};
-const orderOptions = [orders.asc, orders.desc];
-const createSorter = (col, order = Order.Asc) => ({
+const createSorter = (col, label, order = Order.Asc) => ({
     id: uuid(),
     type: order,
     value: col.id,
-    label: orders[Order.Asc].label,
+    label,
 });
 export const Sort = (props) => {
+    const translation = useTranslations();
+    const orders = {
+        asc: { label: translation.tableSortAsc, value: Order.Asc },
+        desc: { label: translation.tableSortDesc, value: Order.Desc },
+    };
+    const orderOptions = [orders.asc, orders.desc];
     const onAddSorter = () => {
         const col = props.cols[0];
         if (col)
-            props.set((prev) => [...prev, createSorter(col)]);
+            props.set((prev) => [...prev, createSorter(col, orders.asc.label)]);
     };
     const onSetSorter = (id) => (e) => {
         const value = e.target.value;
@@ -47,11 +50,12 @@ export const Sort = (props) => {
         const id = e.currentTarget.dataset.id || "";
         props.set((prev) => prev.filter((x) => x.id !== id));
     };
-    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: false, title: "Order By", trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ArrowUpDownIcon, { size: 14 }), "Order by ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
-                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { onChange: onSetSorter(sorter.id), options: props.options, title: "Field", placeholder: "Selecione um campo...", value: sorter.value }), _jsx(Select, { title: "Sort type", onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, placeholder: "Opera\u00E7\u00E3o..." }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
-                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " Add sort"] }) })] }) }) }));
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { title: translation.tableSortDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ArrowUpDownIcon, { size: 14 }), translation.tableSortOrderByLabel, " ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, value: sorter.value, onChange: onSetSorter(sorter.id), title: translation.tableSortOrderInputTitle, placeholder: translation.tableSortOrderInputPlaceholder }), _jsx(Select, { onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, title: translation.tableSortTypeInputTitle, placeholder: translation.tableSortTypeInputPlaceholder }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableSortAddButton] }) })] }) }) }));
 };
 export const SorterHead = (props) => {
+    const translations = useTranslations();
     const [status, setStatus] = useState(() => {
         const sorter = props.sorters.find((sort) => sort.value === props.col.id);
         return sorter ? sorter.type : Order.Undefined;
@@ -68,5 +72,7 @@ export const SorterHead = (props) => {
             return [...prev];
         });
     }, [status, props.col]);
-    return (_jsxs("button", { className: "isolate flex items-center", onClick: onClick, type: "button", children: [status === Order.Asc ? _jsx(ArrowUp01Icon, { size: 14 }) : null, status === Order.Desc ? _jsx(ArrowDown01Icon, { size: 14 }) : null, status === Order.Undefined ? _jsx(ArrowUpDownIcon, { size: 14 }) : null] }));
+    const labelId = `${props.col.id}-sorter-id`;
+    const label = getLabel(props.col);
+    return (_jsxs("button", { "aria-labelledby": labelId, className: "isolate flex items-center", onClick: onClick, type: "button", children: [_jsxs("span", { id: labelId, className: "sr-only", children: [translations.tableSortDropdownTitle, " ", label] }), status === Order.Asc ? _jsx(ArrowUp01Icon, { size: 14 }) : null, status === Order.Desc ? _jsx(ArrowDown01Icon, { size: 14 }) : null, status === Order.Undefined ? _jsx(ArrowUpDownIcon, { size: 14 }) : null] }));
 };

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

@@ -1,5 +1,6 @@
 import { Col, TableOperationProps } from "./table-lib";
 type TableHeaderProps<T extends {}> = {
+    loading: boolean;
     headers: Col<T>[];
 } & Pick<TableOperationProps<T>, "filters" | "setFilters" | "setCols" | "setSorters" | "sorters">;
 export declare const TableHeader: <T extends {}>(props: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC,CAAC;AA+DlG,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA0BnE,CAAC"}
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIjE,KAAK,gBAAgB,CAAC,CAAC,SAAS,EAAE,IAAI;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC,CAAC;AAyFlG,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,EAAE,SAAS,gBAAgB,CAAC,CAAC,CAAC,4CA4BnE,CAAC"}

package/dist/components/table/thead.js

@@ -2,21 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, Reorder } from "framer-motion";
 import { PlusIcon, SearchIcon, ZoomInIcon } from "lucide-react";
 import { Dropdown } from "../floating/dropdown";
-import { ColumnHeaderFilter, createFilterFromCol } from "./filter";
+import { ColumnHeaderFilter, createFilterFromCol, useOperators } from "./filter";
 import { SorterHead } from "./sort";
 import { getLabel } from "./table-lib";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { Order } from "linq-arrays";
 const targetTransitionAnimate = { opacity: 1 };
 const whileDrag = { opacity: 0.75, backgroundColor: "var(--table-border)" };
 const exit = { opacity: 0, transition: { duration: 0.4, type: "spring" } };
 const HeaderChild = (props) => {
     var _a, _b;
+    const translation = useTranslations();
     const ownFilters = props.filters.filter((x) => x.name === props.header.id);
     const hasFilters = ownFilters.length > 0;
     const FilterIcon = hasFilters ? ZoomInIcon : SearchIcon;
+    const { operationOptions, operations } = useOperators();
     const onDelete = (e) => {
         const id = e.currentTarget.dataset.id || "";
         return props.setFilters((prev) => prev.filter((x) => x.id !== id));
     };
-    return (_jsx(Reorder.Item, Object.assign({}, props.header.thProps, { as: "th", exit: exit, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, value: props.header, whileDrag: whileDrag, animate: targetTransitionAnimate, className: `hidden font-medium px-2 py-4 first:table-cell md:table-cell ${(_b = (_a = props.header.thProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`, children: _jsx("span", { className: "flex items-center justify-between", children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Dropdown, { title: `Filter by ${getLabel(props.header)}`, arrow: true, trigger: _jsx(FilterIcon, { size: 14 }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header))), className: "flex items-center", children: [_jsx(PlusIcon, { size: 14 }), " Add"] }) })] })) }), _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), _jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })] }) }) })));
+    const ownSorter = props.sorters.find(x => props.header.id === x.value);
+    const ariaSort = !(ownSorter === null || ownSorter === void 0 ? void 0 : ownSorter.type) ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
+    const label = getLabel(props.header);
+    return (_jsx(Reorder.Item, Object.assign({}, props.header.thProps, { as: "th", exit: exit, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", value: props.header, whileDrag: whileDrag, "aria-sort": ariaSort, "aria-busy": props.loading, animate: targetTransitionAnimate, className: `hidden font-medium px-2 py-4 first:table-cell md:table-cell ${(_b = (_a = props.header.thProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`, children: _jsx("span", { className: "flex items-center justify-between", children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "text-primary", children: label })] }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operationOptions, operations))), type: "button", className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] })) }), _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), _jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })] }) }) })));
 };
-export const TableHeader = (props) => (_jsx(Reorder.Group, { as: "tr", axis: "x", drag: true, layout: true, layoutRoot: true, layoutScroll: true, initial: false, values: props.headers, onReorder: props.setCols, className: "bg-table-background border-none text-lg", children: _jsx(AnimatePresence, { children: props.headers.map((header) => (_jsx(HeaderChild, { setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));
+export const TableHeader = (props) => (_jsx(Reorder.Group, { as: "tr", role: "row", axis: "x", drag: true, layout: true, layoutRoot: true, layoutScroll: true, initial: false, values: props.headers, onReorder: props.setCols, className: "bg-table-background border-none text-lg", children: _jsx(AnimatePresence, { children: props.headers.map((header) => (_jsx(HeaderChild, { loading: props.loading, setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (query: string, defaultValue?: boolean) => boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist/hooks/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/hooks/use-media-query.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa,UAAW,MAAM,iBAAgB,OAAO,YAkBjE,CAAC"}

package/dist/hooks/use-media-query.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect, useState } from "react";
+import { isSsr } from "../lib/fns";
+const getMatches = (query, defaultValue) => {
+    if (isSsr()) {
+        return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+};
+export const useMediaQuery = (query, defaultValue = true) => {
+    const [matches, setMatches] = useState(defaultValue);
+    useLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        const onChange = () => setMatches(getMatches(query, defaultValue));
+        onChange();
+        if (matchMedia.addListener) {
+            matchMedia.addListener(onChange);
+            return () => {
+                return matchMedia.removeListener ? matchMedia.removeListener(onChange) : undefined;
+            };
+        }
+        matchMedia.addEventListener("change", onChange);
+        return () => matchMedia.removeEventListener("change", onChange);
+    }, [query]);
+    return matches;
+};