@sito/dashboard 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sito
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# -sito-dashboard
+The library for dashboard

package/dist/components/Chevron/ChevronDown.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function ChevronDown(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronDown;

package/dist/components/Chevron/ChevronUp.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './types';
+declare function ChevronUp(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ChevronUp;

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

@@ -0,0 +1,3 @@
+import { default as ChevronUp } from './ChevronUp';
+import { default as ChevronDown } from './ChevronDown';
+export { ChevronDown, ChevronUp };

package/dist/components/Chevron/types.d.ts

@@ -0,0 +1,3 @@
+export type IconProps = {
+    className: string;
+};

package/dist/components/Form/SelectInput/SelectInput.d.ts

@@ -0,0 +1,8 @@
+import { SelectInputPropsType } from './types';
+/**
+ *
+ * @param {object} props
+ * @returns
+ */
+declare const SelectInput: import('react').ForwardRefExoticComponent<Omit<SelectInputPropsType, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;
+export default SelectInput;

package/dist/components/Form/SelectInput/types.d.ts

@@ -0,0 +1,21 @@
+import { HTMLProps } from 'react';
+import { State } from '../utils';
+export type Option = {
+    id: number | string;
+    value: number | string;
+};
+export interface SelectInputPropsType extends HTMLProps<HTMLSelectElement> {
+    state?: State;
+    value: any;
+    onChange: (e: any) => void;
+    options: Option[];
+    name?: string;
+    id?: string;
+    label?: string;
+    containerClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+    placeholder?: string;
+}

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

@@ -0,0 +1,4 @@
+import { default as SelectInput } from './SelectInput/SelectInput';
+import { Option, SelectInputPropsType } from './SelectInput/types';
+export type { Option, SelectInputPropsType };
+export { SelectInput };

package/dist/components/Form/utils.d.ts

@@ -0,0 +1,23 @@
+export declare enum State {
+    error = "error",
+    good = "good",
+    default = "default"
+}
+/**
+ * Input State Class Name
+ * @param {string} state - input state
+ * @returns input class name by
+ */
+export declare const inputStateClassName: (state: State) => "border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500" | "border-green-500 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500" | "text-gray-900 border-gray-300 focus:border-blue-600";
+/**
+ * Label State Class Name
+ * @param {string} state - input state
+ * @returns input class name by
+ */
+export declare const labelStateClassName: (state: State) => "peer-focus:text-red-700 text-red-700" | "peer-focus:text-green-700 text-green-700" | "peer-focus:text-blue-600 text-gray-500";
+/**
+ * Helper Text State Class Name
+ * @param {string} state - input state
+ * @returns input class name by
+ */
+export declare const helperTextStateClassName: (state: State) => "text-red-600" | "text-green-600" | "text-gray-500";

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,13 @@
+import { HTMLProps } from 'react';
+interface LoadingPropsType extends HTMLProps<HTMLDivElement> {
+    color?: string;
+    loaderClass?: string;
+    strokeWidth?: string;
+}
+/**
+ * Loading
+ * @param {object} props - Props
+ * @returns Loading component
+ */
+export declare function Loading(props: LoadingPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Loading } from './Loading';

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,2 @@
+import { TablePropsType } from './types';
+export declare function Table(props: TablePropsType): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Columns.d.ts

@@ -0,0 +1,7 @@
+import { ColumnPropTypes } from '../types';
+/**
+ * Columns component
+ * @param {object} props properties for the columns
+ * @returns Row of columns
+ */
+export declare function Columns(props: ColumnPropTypes): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Empty.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Empty component
+ * @returns Empty component
+ */
+export declare function Empty(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/Navigation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Navigation component
+ * @returns Navigation component
+ */
+export declare function Navigation(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/components/PageSize.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Page size component
+ * @returns Page size component
+ */
+export declare function PageSize(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/hooks/TableOptionsProvider.d.ts

@@ -0,0 +1,23 @@
+import { SortOrder } from '../../../lib/models/query';
+type TableOptionsContextType = {
+    onSort: (column: string) => void;
+    total: number;
+    setTotal: (total: number) => void;
+    sortingBy: string;
+    sortingOrder: SortOrder;
+    pageSize: number;
+    pageSizes: number[];
+    setPageSize: (pageSize: number) => void;
+    currentPage: number;
+    setCurrentPage: (currentPage: number) => void;
+};
+type TableOptionsProviderPropsType = {
+    children: React.ReactNode;
+};
+declare const TableOptionsProvider: (props: TableOptionsProviderPropsType) => import("react/jsx-runtime").JSX.Element;
+/**
+ *
+ * @returns {TableOptions} - options
+ */
+declare const useTableOptions: () => TableOptionsContextType;
+export { TableOptionsProvider, useTableOptions };

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

@@ -0,0 +1,2 @@
+export { useTableOptions, TableOptionsProvider, } from './hooks/TableOptionsProvider';
+export { Table } from './Table';

package/dist/components/Table/types.d.ts

@@ -0,0 +1,43 @@
+export type Action = {
+    id: string;
+    onClick: (entity: object) => void;
+    icon: any;
+    tooltip: string;
+    hidden: (entity: object) => boolean;
+};
+export type ColumnsOptionsType = {
+    noSortableColumns: {
+        [key: string]: boolean;
+    };
+    columnClassNames: {
+        [key: string]: string;
+    };
+    icons: {
+        className: string;
+        asc: string;
+        desc: string;
+    };
+};
+export type ColumnType = {
+    key: string;
+    label: string;
+};
+export type ColumnPropTypes = {
+    entity: string;
+    columns: ColumnType[];
+    columnsOptions?: ColumnsOptionsType;
+    hasAction: boolean;
+};
+export type TablePropsType = {
+    entity: string;
+    title?: string;
+    subtitle?: string;
+    rows: object[];
+    parseRows?: any;
+    isLoading?: boolean;
+    actions?: Action[];
+    columns?: ColumnType[];
+    columnsOptions?: ColumnsOptionsType;
+    contentClassName?: string;
+    className?: string;
+};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface TooltipPropsType extends HTMLAttributes<HTMLDivElement> {
+    content: string;
+    children: React.ReactNode;
+}
+export declare function Tooltip(props: TooltipPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+import { Table, TableOptionsProvider, useTableOptions } from './Table';
+import { ChevronDown, ChevronUp } from './Chevron';
+import { Loading } from './Loading';
+export { Loading, TableOptionsProvider, useTableOptions, Table, ChevronDown, ChevronUp, };

package/dist/dashboard.cjs

@@ -0,0 +1 @@
+var W=require("./main.css");Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react");var j=(t=>(t.ASC="ASC",t.DESC="DESC",t))(j||{});const P=[20,50,100],C=x.createContext({}),z=t=>{const{children:r}=t,[l,s]=x.useState(0),[a,n]=x.useState(20),[u,m]=x.useState(0),[h,f]=x.useState("id"),[c,o]=x.useState(j.ASC),p={onSort:x.useCallback(b=>{let i=c;if(h===b)switch(c){case j.ASC:i=j.DESC;break;default:i=j.ASC;break}f(b),o(i)},[h,c]),total:l,setTotal:s,sortingBy:h,sortingOrder:c,pageSize:a,pageSizes:P,setPageSize:n,currentPage:u,setCurrentPage:m};return e.jsx(C.Provider,{value:p,children:r})},v=()=>{const t=x.useContext(C);if(t===void 0)throw new Error("tableOptionsContext must be used within a Provider");return t},w=x.createContext({});function _(t){const{children:r,t:l}=t;return e.jsx(w.Provider,{value:{t:l},children:r})}const y=()=>{const t=x.useContext(w);if(t===void 0)throw new Error("translationContext must be used within a Provider");return t};function A(t){const{content:r,children:l}=t;return e.jsxs("div",{className:"tooltip-container",children:[l,e.jsx("div",{className:"tooltip-text",children:r})]})}function S(t){const{color:r="stroke-blue-800",loaderClass:l,strokeWidth:s="4",...a}=t;return e.jsx("div",{...a,className:`loading ${a.className}`,children:e.jsx("div",{className:"loader-container",children:e.jsx("div",{className:`loader ${l}`,children:e.jsx("svg",{className:"circular",viewBox:"25 25 50 50",children:e.jsx("circle",{className:`path ${r}`,cx:"50",cy:"50",r:"20",fill:"none",strokeWidth:s,strokeMiterlimit:"10"})})})})})}function B(){const{t}=y();return e.jsx("div",{className:"w-full flex items-center justify-center py-2 border-t-[1px]",children:e.jsx("p",{children:t("_accessibility:components.table.empty")})})}function k(t){const{className:r}=t;return e.jsx("svg",{className:r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",children:e.jsx("path",{d:"M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"})})}function T(t){const{className:r}=t;return e.jsx("svg",{className:r,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",children:e.jsx("path",{d:"M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"})})}function M(t){const{t:r}=y(),{entity:l="",columns:s=[],hasAction:a=!0,columnsOptions:n}=t,{onSort:u,sortingOrder:m,sortingBy:h}=v(),f=x.useMemo(()=>{const{noSortableColumns:c={},columnClassNames:o={}}=n??{};return s==null?void 0:s.map(d=>({id:d.key,label:d.label,className:o[d.key]??"",sortable:!c[d.key]}))},[s,n,l,r]);return e.jsx("thead",{className:"text-xs text-gray-700 bg-gray-50",children:e.jsxs("tr",{children:[f.map(c=>{var o,d;return e.jsx("th",{scope:"col",className:`px-6 py-3 ${c.className}`,children:e.jsxs("button",{disabled:!c.sortable,onClick:()=>u(c.id),className:"flex items-center gap-2",children:[e.jsx("span",{className:"whitespace-nowrap",children:c.label}),c.sortable&&e.jsx("span",{className:`${h===c.id?"opacity-100":"opacity-0"}`,children:m===j.ASC?((o=n==null?void 0:n.icons)==null?void 0:o.asc)??e.jsx(k,{className:(n==null?void 0:n.icons.className)??"w-3"}):((d=n==null?void 0:n.icons)==null?void 0:d.desc)??e.jsx(T,{className:(n==null?void 0:n.icons.className)??"w-3"})})]})},c.id)}),a&&e.jsx("th",{scope:"col",className:"px-6 py-3 text-center",children:r("_accessibility:labels.actions")})]})})}var $=(t=>(t.error="error",t.good="good",t.default="default",t))($||{});const E=t=>{switch(t){case"error":return"border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500";case"good":return"border-green-500 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500";default:return"text-gray-900 border-gray-300 focus:border-blue-600"}},D=t=>{switch(t){case"error":return"peer-focus:text-red-700 text-red-700";case"good":return"peer-focus:text-green-700 text-green-700";default:return"peer-focus:text-blue-600 text-gray-500"}},L=t=>{switch(t){case"error":return"text-red-600";case"good":return"text-green-600";default:return"text-gray-500"}},q=x.forwardRef(function(t,r){const{value:l,onChange:s,options:a,containerClassName:n="",inputClassName:u="",labelClassName:m="",helperText:h="",helperTextClassName:f="",placeholder:c="",label:o="",name:d="",id:p="",state:b=$.default,...i}=t;return x.useEffect(()=>{var g;(!l||l==="")&&(a!=null&&a.length)&&s({target:{value:(g=a[0])==null?void 0:g.id}})},[s,a,l]),e.jsxs("div",{className:`relative z-0 w-full mb-5 group ${n}`,children:[e.jsx("select",{...i,id:p,ref:r,name:d,value:l,onChange:s,className:`block py-2.5 px-0 w-full text-sm bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 disabled:text-[#6b7280] ${E(b)} peer ${u}`,children:a==null?void 0:a.map(g=>e.jsx("option",{value:g.id,children:g.value},g.id))}),e.jsx("label",{htmlFor:d,className:`peer-focus:font-medium absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 ${D(b)} ${m}`,children:o}),e.jsx("p",{className:`mt-2 text-sm ${L(b)} ${f}`,children:b!=="error"&&b!=="good"?c:h})]})}),F=q;function I(){const{t}=y(),{pageSizes:r,pageSize:l,setPageSize:s}=v(),a=x.useMemo(()=>r==null?void 0:r.map(n=>({id:n,value:n})),[r]);return e.jsxs("div",{className:"flex gap-2 items-center justify-start",children:[e.jsx("p",{children:t("_accessibility:components.table.pageSizes")}),e.jsx(F,{value:l,options:a,inputClassName:"!py-0 !pl-2 !pr-7 !border-none font-bold",containerClassName:"!w-auto !mb-0 !border-none",helperTextClassName:"hidden",onChange:n=>s(n.target.value)})]})}function R(){const{t}=y(),{total:r,pageSize:l,pageSizes:s,currentPage:a,setCurrentPage:n}=v(),u=(a+1)*l>r?r:(a+1)*l;return e.jsxs("div",{className:"flex w-full items-center justify-between mt-5",children:[e.jsxs("div",{className:"flex w-full items-center justify-start gap-1",children:[e.jsx("p",{children:t("_accessibility:components.table.pageSizes")}),s[0]<r&&e.jsx(e.Fragment,{children:e.jsxs("p",{children:[t("_accessibility:components.table.from")," ",a*l+1," ",t("_accessibility:components.table.to")," ",u," ",t("_accessibility:components.table.of")]})}),e.jsxs("p",{children:[r," ",t("_accessibility:components.table.results")]})]}),e.jsxs("div",{className:"flex gap-5 items-center justify-end",children:[e.jsx("button",{className:"disabled:text-light-primary/40",disabled:a===0,onClick:()=>n(a-1),children:t("_accessibility:buttons.previous")}),e.jsx("button",{disabled:Math.floor(r/((a+1)*l))===0,className:"disabled:text-light-primary/40",onClick:()=>n(a+1),children:t("_accessibility:buttons.next")})]})]})}function U(t){const{t:r}=y(),{title:l="",rows:s,parseRows:a,entity:n="",isLoading:u=!1,actions:m=[],columns:h=[],contentClassName:f="h-[calc(100vh-280px)]",className:c="bg-gray-50",columnsOptions:o}=t,d=x.useMemo(()=>(s==null?void 0:s.map(p=>a(p)))??[],[a,s,r]);return e.jsxs("div",{className:`${c} relative overflow-x-auto w-full h-full`,children:[e.jsx("div",{className:"mb-5 flex w-full items-center justify-between",children:e.jsxs("div",{children:[e.jsx("h1",{className:"text-2xl md:text-3xl font-bold",children:l}),(s==null?void 0:s.length)&&!u&&e.jsx(I,{})]})}),e.jsx("div",{className:`${f} overflow-auto`,children:!(s!=null&&s.length)&&!u?e.jsx(B,{}):e.jsxs("table",{className:"w-full text-sm text-left text-gray-500",children:[e.jsx(M,{entity:n,columns:h,columnsOptions:o,hasAction:(m==null?void 0:m.length)>0}),!u&&!!(s!=null&&s.length)&&e.jsx("tbody",{children:d==null?void 0:d.map(p=>{var b;return e.jsxs("tr",{className:`border-b ${p.deleted.value?"bg-secondary/10":"bg-white"}`,children:[h==null?void 0:h.map((i,g)=>{var N;return e.jsx("td",{className:`px-6 py-4 font-medium ${g===0?"text-gray-900 whitespace-nowrap":""} ${o!=null&&o.columnClassNames?o==null?void 0:o.columnClassNames[i.key]:""}`,children:((N=p[i.key])==null?void 0:N.render)??p[i.key]},i.key)}),!!m.length&&e.jsx("td",{children:e.jsx("div",{className:"flex items-center gap-3 w-full justify-center",children:(b=m.filter(i=>!i.hidden||!i.hidden(p)))==null?void 0:b.map(i=>e.jsx(A,{content:i.tooltip,children:e.jsx("button",{onClick:()=>i.onClick(p),children:i.icon})},i.id))})})]},p.id)})})]})}),u&&e.jsx(S,{className:"bg-white top-0 left-0 w-full h-full"}),!u&&(s==null?void 0:s.length)&&e.jsx(R,{})]})}exports.ChevronDown=T;exports.ChevronUp=k;exports.Loading=S;exports.Table=U;exports.TableOptionsProvider=z;exports.TranslationProvider=_;exports.useTableOptions=v;exports.useTranslation=y;

package/dist/dashboard.js

@@ -0,0 +1,372 @@
+import "./main.css";
+import { jsx as t, jsxs as u, Fragment as _ } from "react/jsx-runtime";
+import { createContext as k, useState as N, useCallback as j, useContext as $, useMemo as C, forwardRef as A, useEffect as B } from "react";
+var y = /* @__PURE__ */ ((e) => (e.ASC = "ASC", e.DESC = "DESC", e))(y || {});
+const E = [20, 50, 100], P = k({}), Y = (e) => {
+  const { children: a } = e, [n, r] = N(0), [s, l] = N(20), [h, f] = N(0), [p, x] = N("id"), [c, o] = N(y.ASC), m = {
+    onSort: j(
+      (b) => {
+        let i = c;
+        if (p === b)
+          switch (c) {
+            case y.ASC:
+              i = y.DESC;
+              break;
+            default:
+              i = y.ASC;
+              break;
+          }
+        x(b), o(i);
+      },
+      [p, c]
+    ),
+    total: n,
+    setTotal: r,
+    sortingBy: p,
+    sortingOrder: c,
+    pageSize: s,
+    pageSizes: E,
+    setPageSize: l,
+    currentPage: h,
+    setCurrentPage: f
+  };
+  return /* @__PURE__ */ t(P.Provider, { value: m, children: a });
+}, w = () => {
+  const e = $(P);
+  if (e === void 0)
+    throw new Error("tableOptionsContext must be used within a Provider");
+  return e;
+}, z = k({});
+function Z(e) {
+  const { children: a, t: n } = e;
+  return /* @__PURE__ */ t(z.Provider, { value: { t: n }, children: a });
+}
+const v = () => {
+  const e = $(z);
+  if (e === void 0)
+    throw new Error("translationContext must be used within a Provider");
+  return e;
+};
+function M(e) {
+  const { content: a, children: n } = e;
+  return /* @__PURE__ */ u("div", { className: "tooltip-container", children: [
+    n,
+    /* @__PURE__ */ t("div", { className: "tooltip-text", children: a })
+  ] });
+}
+function D(e) {
+  const {
+    color: a = "stroke-blue-800",
+    loaderClass: n,
+    strokeWidth: r = "4",
+    ...s
+  } = e;
+  return /* @__PURE__ */ t("div", { ...s, className: `loading ${s.className}`, children: /* @__PURE__ */ t("div", { className: "loader-container", children: /* @__PURE__ */ t("div", { className: `loader ${n}`, children: /* @__PURE__ */ t("svg", { className: "circular", viewBox: "25 25 50 50", children: /* @__PURE__ */ t(
+    "circle",
+    {
+      className: `path ${a}`,
+      cx: "50",
+      cy: "50",
+      r: "20",
+      fill: "none",
+      strokeWidth: r,
+      strokeMiterlimit: "10"
+    }
+  ) }) }) }) });
+}
+function L() {
+  const { t: e } = v();
+  return /* @__PURE__ */ t("div", { className: "w-full flex items-center justify-center py-2 border-t-[1px]", children: /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.empty") }) });
+}
+function F(e) {
+  const { className: a } = e;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: a,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      children: /* @__PURE__ */ t("path", { d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" })
+    }
+  );
+}
+function I(e) {
+  const { className: a } = e;
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: a,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      children: /* @__PURE__ */ t("path", { d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" })
+    }
+  );
+}
+function R(e) {
+  const { t: a } = v(), { entity: n = "", columns: r = [], hasAction: s = !0, columnsOptions: l } = e, { onSort: h, sortingOrder: f, sortingBy: p } = w(), x = C(() => {
+    const { noSortableColumns: c = {}, columnClassNames: o = {} } = l ?? {};
+    return r == null ? void 0 : r.map((d) => ({
+      id: d.key,
+      label: d.label,
+      className: o[d.key] ?? "",
+      sortable: !c[d.key]
+    }));
+  }, [r, l, n, a]);
+  return /* @__PURE__ */ t("thead", { className: "text-xs text-gray-700 bg-gray-50", children: /* @__PURE__ */ u("tr", { children: [
+    x.map((c) => {
+      var o, d;
+      return /* @__PURE__ */ t(
+        "th",
+        {
+          scope: "col",
+          className: `px-6 py-3 ${c.className}`,
+          children: /* @__PURE__ */ u(
+            "button",
+            {
+              disabled: !c.sortable,
+              onClick: () => h(c.id),
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ t("span", { className: "whitespace-nowrap", children: c.label }),
+                c.sortable && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: `${p === c.id ? "opacity-100" : "opacity-0"}`,
+                    children: f === y.ASC ? ((o = l == null ? void 0 : l.icons) == null ? void 0 : o.asc) ?? /* @__PURE__ */ t(
+                      F,
+                      {
+                        className: (l == null ? void 0 : l.icons.className) ?? "w-3"
+                      }
+                    ) : ((d = l == null ? void 0 : l.icons) == null ? void 0 : d.desc) ?? /* @__PURE__ */ t(
+                      I,
+                      {
+                        className: (l == null ? void 0 : l.icons.className) ?? "w-3"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        },
+        c.id
+      );
+    }),
+    s && /* @__PURE__ */ t("th", { scope: "col", className: "px-6 py-3 text-center", children: a("_accessibility:labels.actions") })
+  ] }) });
+}
+var T = /* @__PURE__ */ ((e) => (e.error = "error", e.good = "good", e.default = "default", e))(T || {});
+const U = (e) => {
+  switch (e) {
+    case "error":
+      return "border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500";
+    case "good":
+      return "border-green-500 text-green-900 placeholder-green-700 focus:ring-green-500 focus:border-green-500";
+    default:
+      return "text-gray-900 border-gray-300 focus:border-blue-600";
+  }
+}, W = (e) => {
+  switch (e) {
+    case "error":
+      return "peer-focus:text-red-700 text-red-700";
+    case "good":
+      return "peer-focus:text-green-700 text-green-700";
+    default:
+      return "peer-focus:text-blue-600 text-gray-500";
+  }
+}, q = (e) => {
+  switch (e) {
+    case "error":
+      return "text-red-600";
+    case "good":
+      return "text-green-600";
+    default:
+      return "text-gray-500";
+  }
+}, G = A(function(e, a) {
+  const {
+    value: n,
+    onChange: r,
+    options: s,
+    containerClassName: l = "",
+    inputClassName: h = "",
+    labelClassName: f = "",
+    helperText: p = "",
+    helperTextClassName: x = "",
+    placeholder: c = "",
+    label: o = "",
+    name: d = "",
+    id: m = "",
+    state: b = T.default,
+    ...i
+  } = e;
+  return B(() => {
+    var g;
+    (!n || n === "") && (s != null && s.length) && r({ target: { value: (g = s[0]) == null ? void 0 : g.id } });
+  }, [r, s, n]), /* @__PURE__ */ u("div", { className: `relative z-0 w-full mb-5 group ${l}`, children: [
+    /* @__PURE__ */ t(
+      "select",
+      {
+        ...i,
+        id: m,
+        ref: a,
+        name: d,
+        value: n,
+        onChange: r,
+        className: `block py-2.5 px-0 w-full text-sm bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 disabled:text-[#6b7280] ${U(b)} peer ${h}`,
+        children: s == null ? void 0 : s.map((g) => /* @__PURE__ */ t("option", { value: g.id, children: g.value }, g.id))
+      }
+    ),
+    /* @__PURE__ */ t(
+      "label",
+      {
+        htmlFor: d,
+        className: `peer-focus:font-medium absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 ${W(b)} ${f}`,
+        children: o
+      }
+    ),
+    /* @__PURE__ */ t(
+      "p",
+      {
+        className: `mt-2 text-sm ${q(b)} ${x}`,
+        children: b !== "error" && b !== "good" ? c : p
+      }
+    )
+  ] });
+}), H = G;
+function J() {
+  const { t: e } = v(), { pageSizes: a, pageSize: n, setPageSize: r } = w(), s = C(
+    () => a == null ? void 0 : a.map((l) => ({ id: l, value: l })),
+    [a]
+  );
+  return /* @__PURE__ */ u("div", { className: "flex gap-2 items-center justify-start", children: [
+    /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.pageSizes") }),
+    /* @__PURE__ */ t(
+      H,
+      {
+        value: n,
+        options: s,
+        inputClassName: "!py-0 !pl-2 !pr-7 !border-none font-bold",
+        containerClassName: "!w-auto !mb-0 !border-none",
+        helperTextClassName: "hidden",
+        onChange: (l) => r(l.target.value)
+      }
+    )
+  ] });
+}
+function K() {
+  const { t: e } = v(), { total: a, pageSize: n, pageSizes: r, currentPage: s, setCurrentPage: l } = w(), h = (s + 1) * n > a ? a : (s + 1) * n;
+  return /* @__PURE__ */ u("div", { className: "flex w-full items-center justify-between mt-5", children: [
+    /* @__PURE__ */ u("div", { className: "flex w-full items-center justify-start gap-1", children: [
+      /* @__PURE__ */ t("p", { children: e("_accessibility:components.table.pageSizes") }),
+      r[0] < a && /* @__PURE__ */ t(_, { children: /* @__PURE__ */ u("p", { children: [
+        e("_accessibility:components.table.from"),
+        " ",
+        s * n + 1,
+        " ",
+        e("_accessibility:components.table.to"),
+        " ",
+        h,
+        " ",
+        e("_accessibility:components.table.of")
+      ] }) }),
+      /* @__PURE__ */ u("p", { children: [
+        a,
+        " ",
+        e("_accessibility:components.table.results")
+      ] })
+    ] }),
+    /* @__PURE__ */ u("div", { className: "flex gap-5 items-center justify-end", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          className: "disabled:text-light-primary/40",
+          disabled: s === 0,
+          onClick: () => l(s - 1),
+          children: e("_accessibility:buttons.previous")
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          disabled: Math.floor(a / ((s + 1) * n)) === 0,
+          className: "disabled:text-light-primary/40",
+          onClick: () => l(s + 1),
+          children: e("_accessibility:buttons.next")
+        }
+      )
+    ] })
+  ] });
+}
+function O(e) {
+  const { t: a } = v(), {
+    title: n = "",
+    rows: r,
+    parseRows: s,
+    entity: l = "",
+    isLoading: h = !1,
+    actions: f = [],
+    columns: p = [],
+    contentClassName: x = "h-[calc(100vh-280px)]",
+    className: c = "bg-gray-50",
+    columnsOptions: o
+  } = e, d = C(
+    () => (r == null ? void 0 : r.map((m) => s(m))) ?? [],
+    [s, r, a]
+  );
+  return /* @__PURE__ */ u("div", { className: `${c} relative overflow-x-auto w-full h-full`, children: [
+    /* @__PURE__ */ t("div", { className: "mb-5 flex w-full items-center justify-between", children: /* @__PURE__ */ u("div", { children: [
+      /* @__PURE__ */ t("h1", { className: "text-2xl md:text-3xl font-bold", children: n }),
+      (r == null ? void 0 : r.length) && !h && /* @__PURE__ */ t(J, {})
+    ] }) }),
+    /* @__PURE__ */ t("div", { className: `${x} overflow-auto`, children: !(r != null && r.length) && !h ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ u("table", { className: "w-full text-sm text-left text-gray-500", children: [
+      /* @__PURE__ */ t(
+        R,
+        {
+          entity: l,
+          columns: p,
+          columnsOptions: o,
+          hasAction: (f == null ? void 0 : f.length) > 0
+        }
+      ),
+      !h && !!(r != null && r.length) && /* @__PURE__ */ t("tbody", { children: d == null ? void 0 : d.map((m) => {
+        var b;
+        return /* @__PURE__ */ u(
+          "tr",
+          {
+            className: `border-b ${m.deleted.value ? "bg-secondary/10" : "bg-white"}`,
+            children: [
+              p == null ? void 0 : p.map((i, g) => {
+                var S;
+                return /* @__PURE__ */ t(
+                  "td",
+                  {
+                    className: `px-6 py-4 font-medium ${g === 0 ? "text-gray-900 whitespace-nowrap" : ""} ${o != null && o.columnClassNames ? o == null ? void 0 : o.columnClassNames[i.key] : ""}`,
+                    children: ((S = m[i.key]) == null ? void 0 : S.render) ?? m[i.key]
+                  },
+                  i.key
+                );
+              }),
+              !!f.length && /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3 w-full justify-center", children: (b = f.filter(
+                (i) => !i.hidden || !i.hidden(m)
+              )) == null ? void 0 : b.map((i) => /* @__PURE__ */ t(M, { content: i.tooltip, children: /* @__PURE__ */ t("button", { onClick: () => i.onClick(m), children: i.icon }) }, i.id)) }) })
+            ]
+          },
+          m.id
+        );
+      }) })
+    ] }) }),
+    h && /* @__PURE__ */ t(D, { className: "bg-white top-0 left-0 w-full h-full" }),
+    !h && (r == null ? void 0 : r.length) && /* @__PURE__ */ t(K, {})
+  ] });
+}
+export {
+  I as ChevronDown,
+  F as ChevronUp,
+  D as Loading,
+  O as Table,
+  Y as TableOptionsProvider,
+  Z as TranslationProvider,
+  w as useTableOptions,
+  v as useTranslation
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './main'
+export {}

package/dist/lib/models/query.d.ts

@@ -0,0 +1,4 @@
+export declare enum SortOrder {
+    ASC = "ASC",
+    DESC = "DESC"
+}

package/dist/main.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.top-0{top:0}.top-3{top:.75rem}.-z-10{z-index:-10}.z-0{z-index:0}.\!mb-0{margin-bottom:0!important}.mb-5{margin-bottom:1.25rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-\[calc\(100vh-280px\)\]{height:calc(100vh - 280px)}.h-full{height:100%}.\!w-auto{width:auto!important}.w-3{width:.75rem}.w-full{width:100%}.origin-\[0\]{transform-origin:0}.-translate-y-6{--tw-translate-y: -1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-75{--tw-scale-x: .75;--tw-scale-y: .75;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t-\[1px\]{border-top-width:1px}.\!border-none{border-style:none!important}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.stroke-blue-800{stroke:#1e40af}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-0{padding-left:0;padding-right:0}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.\!pl-2{padding-left:.5rem!important}.\!pr-7{padding-right:1.75rem!important}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity))}.text-green-900{--tw-text-opacity: 1;color:rgb(20 83 45 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity))}.text-red-900{--tw-text-opacity: 1;color:rgb(127 29 29 / var(--tw-text-opacity))}.placeholder-green-700::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(21 128 61 / var(--tw-placeholder-opacity))}.placeholder-green-700::placeholder{--tw-placeholder-opacity: 1;color:rgb(21 128 61 / var(--tw-placeholder-opacity))}.placeholder-red-700::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(185 28 28 / var(--tw-placeholder-opacity))}.placeholder-red-700::placeholder{--tw-placeholder-opacity: 1;color:rgb(185 28 28 / var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.duration-300{transition-duration:.3s}.focus\:border-blue-600:focus{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}.focus\:border-green-500:focus{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity))}.focus\:ring-red-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity))}.disabled\:text-\[\#6b7280\]:disabled{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:placeholder-shown~.peer-placeholder-shown\:translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:placeholder-shown~.peer-placeholder-shown\:scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:start-0{inset-inline-start:0px}.peer:focus~.peer-focus\:-translate-y-6{--tw-translate-y: -1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:scale-75{--tw-scale-x: .75;--tw-scale-y: .75;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:focus~.peer-focus\:font-medium{font-weight:500}.peer:focus~.peer-focus\:text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.peer:focus~.peer-focus\:text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity))}.peer:focus~.peer-focus\:text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity))}@media (min-width: 768px){.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}.peer:focus~.rtl\:peer-focus\:left-auto:where([dir=rtl],[dir=rtl] *){left:auto}.peer:focus~.rtl\:peer-focus\:translate-x-1\/4:where([dir=rtl],[dir=rtl] *){--tw-translate-x: 25%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tooltip-container{position:relative;display:inline-block;cursor:pointer}.tooltip-text{visibility:hidden;background-color:#000;color:#fff;text-align:center;padding:5px 10px;border-radius:5px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.loader-container{padding:5%}.loader{width:40px;position:relative;margin:0 auto}.loader:before{content:"";padding-top:100%;display:block}.circular{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;animation:rotate 2s linear infinite;transform-origin:center center}.path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.loading{display:flex;width:100%;height:100%;align-items:center;justify-content:center}

package/dist/main.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './providers';

package/dist/providers/Translation/TranslationProvider.d.ts

@@ -0,0 +1,6 @@
+import { TFunction, TranslationProviderPropsType } from './types';
+declare function TranslationProvider(props: TranslationProviderPropsType): import("react/jsx-runtime").JSX.Element;
+declare const useTranslation: () => {
+    t: TFunction;
+};
+export { useTranslation, TranslationProvider };

package/dist/providers/Translation/types.d.ts

@@ -0,0 +1,6 @@
+/**Define a translation function */
+export type TFunction = (text: string, options?: any) => string;
+export type TranslationProviderPropsType = {
+    t: TFunction;
+    children: React.ReactNode;
+};

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+import { useTranslation, TranslationProvider } from './Translation/TranslationProvider';
+export { useTranslation, TranslationProvider };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@sito/dashboard",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "description": "UI library with custom components for dashboards",
+  "main": "dist/dashboard.cjs",
+  "module": "dist/dashboard.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sito8943/-sito-dashboard.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/dashboard.js",
+      "require": "./dist/dashboard.cjs"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "20.8.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "18.2.14",
+    "@typescript-eslint/eslint-plugin": "6.0.0",
+    "@typescript-eslint/parser": "6.0.0",
+    "@vitejs/plugin-react": "4.0.3",
+    "autoprefixer": "^10.4.16",
+    "eslint": "8.45.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.3",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^4.2.0",
+    "vite-plugin-dts": "^4.0.2",
+    "vite-plugin-lib-inject-css": "1.3.0"
+  }
+}