@konstructio/ui 0.1.2-alpha.2 → 0.1.2-alpha.21

package/dist/{index-h-Ul0anl.js → index-N2OStZoU.js}

@@ -1,4 +1,4 @@
-import { g as ge } from "./_commonjsHelpers-C6fGbg64.js";
+import { g as ge } from "./_commonjsHelpers-DaMA6jEr.js";
 var V = { exports: {} }, N = { exports: {} }, T = {};
 /** @license React v16.13.1
 * react-is.production.min.js

package/dist/{index-BXuxPoz7.js → index-amYX3uxF.js}

@@ -2,10 +2,11 @@ import * as i from "react";
 import { a as Ee, c as he, b as _, d as ye } from "./index-BfXxHr_2.js";
 import { u as S, c as De } from "./index-DQH6odE9.js";
 import { u as w } from "./index-bwWKd82e.js";
-import { P as be, D as Ce } from "./index-CrBonFvu.js";
-import { P as N } from "./index-C9T9HQaa.js";
+import { D as be } from "./index-CffpTFMi.js";
+import { P as N } from "./index-BVRIAMfe.js";
 import { u as j } from "./index-0ioNhtNM.js";
 import { jsx as l, jsxs as q, Fragment as B } from "react/jsx-runtime";
+import { P as Ce } from "./index-DdXGVVBv.js";
 import { P as U } from "./index-C1g_chDT.js";
 import { R as Ae } from "./Combination-VYaRRJBZ.js";
 var x = "focusScope.autoFocusOnMount", L = "focusScope.autoFocusOnUnmount", V = { bubbles: !1, cancelable: !0 }, Re = "FocusScope", Q = i.forwardRef((e, o) => {
@@ -197,7 +198,7 @@ var Se = function(e) {
   return r ? (n.push.apply(n, Array.from(r.querySelectorAll("[aria-live]"))), we(n, r, t, "aria-hidden")) : function() {
     return null;
   };
-}, M = "Dialog", [te, et] = he(M), [Le, m] = te(M), oe = (e) => {
+}, M = "Dialog", [te, tt] = he(M), [Le, m] = te(M), oe = (e) => {
   const {
     __scopeDialog: o,
     children: t,
@@ -252,7 +253,7 @@ var K = "DialogPortal", [ke, ae] = te(K, {
   forceMount: void 0
 }), se = (e) => {
   const { __scopeDialog: o, forceMount: t, children: n, container: r } = e, a = m(K, o);
-  return /* @__PURE__ */ l(ke, { scope: o, forceMount: t, children: i.Children.map(n, (d) => /* @__PURE__ */ l(U, { present: t || a.open, children: /* @__PURE__ */ l(be, { asChild: !0, container: r, children: d }) })) });
+  return /* @__PURE__ */ l(ke, { scope: o, forceMount: t, children: i.Children.map(n, (d) => /* @__PURE__ */ l(U, { present: t || a.open, children: /* @__PURE__ */ l(Ce, { asChild: !0, container: r, children: d }) })) });
 };
 se.displayName = K;
 var I = "DialogOverlay", ie = i.forwardRef(
@@ -347,7 +348,7 @@ var Ke = i.forwardRef(
           onMountAutoFocus: r,
           onUnmountAutoFocus: a,
           children: /* @__PURE__ */ l(
-            Ce,
+            be,
             {
               role: "dialog",
               id: s.contentId,
@@ -399,7 +400,7 @@ ve.displayName = pe;
 function H(e) {
   return e ? "open" : "closed";
 }
-var me = "DialogTitleWarning", [tt, ge] = ye(me, {
+var me = "DialogTitleWarning", [ot, ge] = ye(me, {
   contentName: A,
   titleName: G,
   docsSlug: "dialog"
@@ -418,18 +419,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/${o.do
     const r = e.current?.getAttribute("aria-describedby");
     o && r && (document.getElementById(o) || console.warn(n));
   }, [n, e, o]), null;
-}, ot = oe, nt = re, rt = se, at = ie, st = ce, it = le, ct = de, ut = ve;
+}, nt = oe, rt = re, at = se, st = ie, it = ce, ct = le, ut = de, lt = ve;
 export {
-  st as C,
+  it as C,
   le as D,
-  at as O,
-  rt as P,
-  ot as R,
-  it as T,
-  tt as W,
+  st as O,
+  at as P,
+  nt as R,
+  ct as T,
+  ot as W,
   se as a,
-  ut as b,
-  et as c,
-  ct as d,
-  nt as e
+  lt as b,
+  tt as c,
+  ut as d,
+  rt as e
 };

package/dist/{index-DB2XhXHn.js → index-l3NwplN0.js}

@@ -2,8 +2,9 @@ import * as l from "react";
 import { a as ce, c as le, b as _ } from "./index-BfXxHr_2.js";
 import { u as M } from "./index-DQH6odE9.js";
 import { u as de } from "./index-BdMNhZnh.js";
-import { a as ue, u as fe } from "./index-CZnD2QxM.js";
-import { P as T } from "./index-C9T9HQaa.js";
+import { u as ue } from "./index-BZPx6jYI.js";
+import { u as fe } from "./index-BAEWsOG1.js";
+import { P as T } from "./index-BVRIAMfe.js";
 import { c as me } from "./index-Cvx4lqTq.js";
 import { jsx as g, jsxs as Se } from "react/jsx-runtime";
 function $(e, [t, n]) {
@@ -14,7 +15,7 @@ var j = ["PageUp", "PageDown"], X = ["ArrowUp", "ArrowDown", "ArrowLeft", "Arrow
   "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
   "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
   "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
-}, C = "Slider", [N, pe, he] = me(C), [W, ze] = le(C, [
+}, C = "Slider", [N, pe, he] = me(C), [W, He] = le(C, [
   he
 ]), [ge, V] = W(C), q = l.forwardRef(
   (e, t) => {
@@ -305,7 +306,7 @@ var O = "SliderThumb", oe = l.forwardRef(
   }
 ), be = l.forwardRef(
   (e, t) => {
-    const { __scopeSlider: n, index: o, name: s, ...c } = e, r = V(O, n), a = Q(O, n), [u, w] = l.useState(null), p = M(t, (D) => w(D)), i = u ? r.form || !!u.closest("form") : !0, d = ue(u), v = r.values[o], y = v === void 0 ? 0 : ie(v, r.min, r.max), h = Pe(o, r.values.length), m = d?.[a.size], f = m ? De(m, y, a.direction) : 0;
+    const { __scopeSlider: n, index: o, name: s, ...c } = e, r = V(O, n), a = Q(O, n), [u, w] = l.useState(null), p = M(t, (D) => w(D)), i = u ? r.form || !!u.closest("form") : !0, d = fe(u), v = r.values[o], y = v === void 0 ? 0 : ie(v, r.min, r.max), h = Pe(o, r.values.length), m = d?.[a.size], f = m ? De(m, y, a.direction) : 0;
     return l.useEffect(() => {
       if (u)
         return r.thumbs.add(u), () => {
@@ -357,7 +358,7 @@ var O = "SliderThumb", oe = l.forwardRef(
 oe.displayName = O;
 var Re = "RadioBubbleInput", re = l.forwardRef(
   ({ __scopeSlider: e, value: t, ...n }, o) => {
-    const s = l.useRef(null), c = M(s, o), r = fe(t);
+    const s = l.useRef(null), c = M(s, o), r = ue(t);
     return l.useEffect(() => {
       const a = s.current;
       if (!a) return;
@@ -422,10 +423,10 @@ function Ce(e, t) {
   const n = Math.pow(10, t);
   return Math.round(e * n) / n;
 }
-var He = q, Ne = te, Le = ne, Oe = oe;
+var Ne = q, Le = te, Oe = ne, Ue = oe;
 export {
-  He as R,
-  Ne as T,
-  Le as a,
-  Oe as b
+  Ne as R,
+  Le as T,
+  Oe as a,
+  Ue as b
 };

package/dist/{index-iXyXtdgP.js → index-sp5ZfG6g.js}

@@ -1,5 +1,5 @@
 import * as i from "react";
-import { P as o } from "./index-C9T9HQaa.js";
+import { P as o } from "./index-BVRIAMfe.js";
 import { jsx as t } from "react/jsx-runtime";
 var d = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-dialog';
 import { ButtonHTMLAttributes } from 'react';
+import { CellContext } from '@tanstack/react-table';
 import { CheckboxProps as CheckboxProps_2 } from '@radix-ui/react-checkbox';
 import { ClassProp } from 'class-variance-authority/types';
+import { ColumnDef as ColumnDef_2 } from '@tanstack/react-table';
 import { ComponentRef } from 'react';
 import { Context } from 'react';
 import { DayPickerProps } from 'react-day-picker';
@@ -11,15 +13,25 @@ import { getAllTimezones } from 'countries-and-timezones';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { JSX as JSX_2 } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import * as ReactTabs from '@radix-ui/react-tabs';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
+import { RowData as RowData_2 } from '@tanstack/react-table';
 import { SliderProps } from '@radix-ui/react-slider';
 import { TabsContentProps } from '@radix-ui/react-tabs';
+import { UseQueryOptions } from '@tanstack/react-query';
 import { VariantProps } from 'class-variance-authority';
 
+declare type Action<TData> = {
+    label: string | React.ReactNode;
+    onClick: (rowData: TData) => void;
+    className?: string;
+};
+
 export declare const Alert: FC<AlertProps>;
 
 export declare const AlertDialog: FC<AlertDialogProps>;
@@ -81,16 +93,17 @@ declare type BadgeMultiSelectProps = {
 };
 
 declare type BadgeProps = VariantProps<typeof badgeVariants> & {
-    label: string;
     className?: string;
-    loading?: boolean;
     dismissible?: true;
+    label: string;
+    leftIcon?: ReactNode;
+    loading?: boolean;
     onClick?: VoidFunction;
     onDismiss?: VoidFunction;
 };
 
 declare const badgeVariants: (props?: ({
-    variant?: "info" | "warning" | "danger" | "default" | "success" | null | undefined;
+    variant?: "info" | "warning" | "danger" | "default" | "success" | "violet" | null | undefined;
     size?: "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -170,8 +183,12 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare type ColumnDef<TData extends RowData> = ColumnDef_2<TData, string>;
+
 export declare const Content: FC<TabsContentProps>;
 
+declare type CSSColor = `var(--${string})` | `rgb(${number}, ${number}, ${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})`;
+
 export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
 
 declare type DateFilterDropdownProps = {
@@ -198,32 +215,46 @@ export declare const Dropdown: FC<DropdownProps>;
 
 export declare const DropdownButton: FC<Props>;
 
-declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+declare type DropdownProps = VariantProps<typeof dropdownVariants> & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+    additionalOptions?: ReactNode[] | string[];
     className?: string;
+    disabled?: boolean;
     error?: string;
     helperText?: string;
+    highlightSearch?: boolean;
     iconClassName?: string;
+    inputClassName?: string;
     isLoading?: boolean;
     isRequired?: boolean;
     label?: string;
     labelClassName?: string;
     listClassName?: string;
     listItemClassName?: string;
+    listItemSecondRowClassName?: string;
     options: Option_3[];
     searchable?: boolean;
+    showSearchIcon?: boolean;
     theme?: Theme;
     value?: string;
     wrapperClassName?: string;
     onBlur?: VoidFunction;
     onChange?: OnChangeFn;
-}
+    onSearchChange?: (searchTerm: string) => void;
+};
 
 declare const dropdownVariants: (props?: ({
     hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Filter: FilterComponentProps;
 
+declare type FilterAction = {
+    label: string;
+    onClick: () => void;
+    variant?: ButtonProps['variant'];
+};
+
 declare type FilterComponentProps = FC<FilterProps> & {
     BadgeMultiSelect: FC<BadgeMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;
@@ -320,6 +351,13 @@ declare interface ModalProps extends PropsWithChildren, VariantProps<typeof moda
 
 declare const modalVariants: (props?: ClassProp | undefined) => string;
 
+declare type MultiSelectFilter = {
+    key: string;
+    label: string;
+    position?: 'right' | 'left';
+    options: Option_5[];
+};
+
 export declare const Navigation: FC<NavigationProps> & NavigationChildrenProps;
 
 declare type NavigationChildrenProps = {
@@ -414,6 +452,7 @@ declare type Option_2 = {
 
 declare type Option_3 = {
     label: string | ReactNode;
+    subLabel?: string | ReactNode;
     leftIcon?: ReactNode | string;
     value: string;
 };
@@ -465,7 +504,7 @@ declare type Props_2 = {
      * Array of hexadecimal colors for the borders of the pie chart segments
      * @default ['#FFFFFF', '#FFFFFF']
      */
-    borderColors?: HexColor[];
+    borderColors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
      * Width of the border for pie chart segments in pixels
      * @default 0
@@ -475,7 +514,7 @@ declare type Props_2 = {
      * Array of hexadecimal colors for filling the pie chart segments
      * @default ['#525252', '#00D492']
      */
-    colors?: HexColor[];
+    colors?: HexColor[] | CSSColor[] | (HexColor | CSSColor)[];
     /**
      * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
      * @default 80
@@ -535,6 +574,63 @@ declare type Props_2 = {
     subtitle?: string;
 });
 
+declare type Props_3<TData extends RowData> = CellContext<TData, string> & {
+    value?: string;
+};
+
+declare type Props_4<TData extends RowData_2> = VariantProps<typeof virtualizeTableVariants> & {
+    id: string | string[];
+    ariaLabel?: string;
+    columns: ColumnDef_2<TData, string>[];
+    data: TData[];
+    className?: string;
+    classNameHeaderActiveArrows?: string;
+    classNameHeaderArrows?: string;
+    classNameHeaderTable?: string;
+    classNameTable?: string;
+    classNameWrapperTable?: string;
+    queryOptions?: Omit<UseQueryOptions<any, any, any, any>, 'queryKey' | 'queryFn'>;
+    isLoading?: boolean;
+    fetchData?: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
+        data: TData[];
+        totalItemsCount?: number;
+    }>;
+} & ({
+    showPagination: true;
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+    totalItems: number;
+} | {
+    showPagination?: false | undefined;
+    showTotalItems?: never;
+    showDropdownPagination?: never;
+    showDotPagination?: never;
+    showFormPagination?: never;
+    pageSizes?: never;
+    totalItems?: never;
+}) & ({
+    filterSearchPlaceholder?: string;
+    multiSelectFilter?: MultiSelectFilter[];
+    showFilter: true;
+    showFilterInput?: boolean;
+    filterActions?: FilterAction[];
+    showResetButton?: boolean;
+} | {
+    filterSearchPlaceholder?: never;
+    multiSelectFilter?: never;
+    showFilter?: false | undefined;
+    showFilterInput?: never;
+    filterActions?: FilterAction[];
+    showResetButton?: never;
+});
+
+declare type Props_5<TData extends RowData> = CellContext<TData, unknown> & {
+    actions: Action<TData>[];
+};
+
 export declare const Radio: FC<RadioProps>;
 
 export declare const RadioCard: FC<RadioCardProps>;
@@ -615,6 +711,8 @@ declare type ResetButtonProps = ButtonProps & {
     onClick?: VoidFunction;
 };
 
+export declare type RowData = RowData_2;
+
 declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
     width?: string;
     isSelected?: boolean;
@@ -637,11 +735,12 @@ declare type SidebarChildrenProps = {
 };
 
 declare interface SidebarProps extends VariantProps<typeof wrapperSiderbarVariants>, PropsWithChildren {
-    wrapperClassName?: string;
-    minWith?: number;
-    maxWith?: number;
     canResize?: boolean;
+    dividerClassName?: string;
+    maxWith?: number;
+    minWith?: number;
     theme?: Theme;
+    wrapperClassName?: string;
 }
 
 export declare const Slider: FC<SliderProps_2>;
@@ -829,6 +928,8 @@ declare const triggerVariants: (props?: ({
     variant?: "default" | "active" | "inactive" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const TruncateText: <TData>({ getValue, value }: Props_3<TData>) => JSX.Element;
+
 export declare const Typography: ForwardRefExoticComponent<Omit<TypographyProps, 'ref'> & RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
 
 declare interface TypographyProps extends HTMLAttributes<ComponentRef<HeadingTag | 'p' | 'span'>>, VariantProps<typeof typographyVariants> {
@@ -846,6 +947,16 @@ export declare const useTheme: () => ThemeProps;
 
 export declare const useToggle: (initialState?: boolean) => [boolean, (value?: boolean) => void];
 
+export declare const VirtualizedTable: VirtualizedTableCompound;
+
+declare type VirtualizedTableCompound = (<TData extends RowData>(props: Props_4<TData>) => JSX_2.Element) & {
+    TruncateText: typeof TruncateText;
+    Actions: <TData extends RowData>(props: Props_5<TData>) => JSX_2.Element | null;
+    displayName?: string;
+};
+
+declare const virtualizeTableVariants: (props?: ClassProp | undefined) => string;
+
 declare const wrapperSiderbarVariants: (props?: ClassProp | undefined) => string;
 
 export { }

package/dist/index.js

@@ -4,10 +4,10 @@ import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
 import { Badge as a } from "./components/Badge/Badge.js";
 import { Breadcrumb as d } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button as n } from "./components/Button/Button.js";
-import { Card as T } from "./components/Card/Card.js";
+import { Card as l } from "./components/Card/Card.js";
 import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
-import { DatePicker as h } from "./components/Datepicker/DatePicker.js";
-import { Divider as D } from "./components/Divider/Divider.js";
+import { DatePicker as b } from "./components/Datepicker/DatePicker.js";
+import { Divider as C } from "./components/Divider/Divider.js";
 import { Dropdown as v } from "./components/Dropdown/Dropdown.js";
 import { DropdownButton as S } from "./components/DropdownButton/DropdownButton.js";
 import { Filter as P } from "./components/Filter/Filter.js";
@@ -15,12 +15,12 @@ import { BadgeMultiSelect as w } from "./components/Filter/components/BadgeDropd
 import { DateFilterDropdown as k } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
 import { Input as G } from "./components/Input/Input.js";
 import { Loading as M } from "./components/Loading/Loading.js";
-import { M as I } from "./Modal-V67Uz78z.js";
-import { NumberInput as j } from "./components/NumberInput/NumberInput.js";
-import { PieChart as z } from "./components/PieChart/PieChart.js";
-import { ProgressBar as H } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as K } from "./components/Radio/Radio.js";
-import { RadioCard as U } from "./components/RadioCard/RadioCard.js";
+import { M as I } from "./Modal-B8jrP02v.js";
+import { NumberInput as O } from "./components/NumberInput/NumberInput.js";
+import { PieChart as j } from "./components/PieChart/PieChart.js";
+import { ProgressBar as E } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as J } from "./components/Radio/Radio.js";
+import { RadioCard as Q } from "./components/RadioCard/RadioCard.js";
 import { RadioCardGroup as W } from "./components/RadioCardGroup/RadioCardGroup.js";
 import { RadioGroup as Y } from "./components/RadioGroup/RadioGroup.js";
 import { Range as _ } from "./components/Range/Range.js";
@@ -30,11 +30,11 @@ import { Navigation as po } from "./components/Sidebar/components/Navigation/Nav
 import { NavigationGroup as xo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
 import { NavigationOption as ao } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
 import { NavigationSeparator as go } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as lo } from "./components/Sidebar/Sidebar.js";
+import { Sidebar as To } from "./components/Sidebar/Sidebar.js";
 import { Slider as uo } from "./components/Slider/Slider.js";
 import { Switch as so } from "./components/Switch/Switch.js";
-import { Table as Co } from "./components/Table/Table.js";
-import { Content as bo } from "./components/Tabs/components/Content.js";
+import { Table as ho } from "./components/Table/Table.js";
+import { Content as Do } from "./components/Tabs/components/Content.js";
 import { List as Bo } from "./components/Tabs/components/List.js";
 import { Tabs as No } from "./components/Tabs/Tabs.js";
 import { Trigger as Ro } from "./components/Tabs/components/Trigger.js";
@@ -42,13 +42,15 @@ import { Tag as Ao } from "./components/Tag/Tag.js";
 import { TagSelect as Fo } from "./components/TagSelect/TagSelect.js";
 import { TextArea as Lo } from "./components/TextArea/TextArea.js";
 import { TimePicker as yo } from "./components/TimePicker/TimePicker.js";
-import { Toast as Oo } from "./components/Toast/Toast.js";
-import { Tooltip as qo } from "./components/Tooltip/Tooltip.js";
-import { Typography as Eo } from "./components/Typography/Typography.js";
-import { ThemeContext as Jo } from "./contexts/theme.context.js";
-import { useTheme as Qo } from "./contexts/theme.hook.js";
-import { ThemeProvider as Vo } from "./contexts/theme.provider.js";
-import { useToggle as Xo } from "./hooks/useToggle.js";
+import { Toast as zo } from "./components/Toast/Toast.js";
+import { Tooltip as Vo } from "./components/Tooltip/Tooltip.js";
+import { Typography as qo } from "./components/Typography/Typography.js";
+import { TruncateText as Ho } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { VirtualizedTable as Ko } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { ThemeContext as Uo } from "./contexts/theme.context.js";
+import { useTheme as Xo } from "./contexts/theme.hook.js";
+import { ThemeProvider as Zo } from "./contexts/theme.provider.js";
+import { useToggle as $o } from "./hooks/useToggle.js";
 export {
   e as Alert,
   p as AlertDialog,
@@ -57,12 +59,12 @@ export {
   w as BadgeMultiSelect,
   d as Breadcrumb,
   n as Button,
-  T as Card,
+  l as Card,
   c as Checkbox,
-  bo as Content,
+  Do as Content,
   k as DateFilterDropdown,
-  h as DatePicker,
-  D as Divider,
+  b as DatePicker,
+  C as Divider,
   v as Dropdown,
   S as DropdownButton,
   P as Filter,
@@ -76,29 +78,31 @@ export {
   xo as NavigationGroup,
   ao as NavigationOption,
   go as NavigationSeparator,
-  j as NumberInput,
-  z as PieChart,
-  H as ProgressBar,
-  K as Radio,
-  U as RadioCard,
+  O as NumberInput,
+  j as PieChart,
+  E as ProgressBar,
+  J as Radio,
+  Q as RadioCard,
   W as RadioCardGroup,
   Y as RadioGroup,
   _ as Range,
-  lo as Sidebar,
+  To as Sidebar,
   uo as Slider,
   so as Switch,
-  Co as Table,
+  ho as Table,
   No as Tabs,
   Ao as Tag,
   Fo as TagSelect,
   Lo as TextArea,
-  Jo as ThemeContext,
-  Vo as ThemeProvider,
+  Uo as ThemeContext,
+  Zo as ThemeProvider,
   yo as TimePicker,
-  Oo as Toast,
-  qo as Tooltip,
+  zo as Toast,
+  Vo as Tooltip,
   Ro as Trigger,
-  Eo as Typography,
-  Qo as useTheme,
-  Xo as useToggle
+  Ho as TruncateText,
+  qo as Typography,
+  Ko as VirtualizedTable,
+  Xo as useTheme,
+  $o as useToggle
 };

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.1",
+  "version": "0.1.2-alpha.20",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -63,22 +63,25 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.3",
-    "chart.js": "^4.5.0",
+    "@tanstack/react-table": "^8.21.3",
+    "chart.js": "^4.5.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "countries-and-timezones": "^3.8.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.544.0",
-    "react-chartjs-2": "^5.3.0",
-    "react-day-picker": "^9.11.0",
+    "lucide-react": "^0.548.0",
+    "react-chartjs-2": "^5.3.1",
+    "react-day-picker": "^9.11.1",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
     "react-remove-scroll": "^2.7.1",
     "tailwind-merge": "^3.3.1"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.90",
     "@types/react": "*",
     "@types/react-dom": "*",
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
@@ -104,46 +107,51 @@
     },
     "@types/react-router-dom": {
       "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": false
     }
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-links": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@faker-js/faker": "^10.1.0",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-links": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.16",
+    "@tanstack/react-query": "^5.90.5",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.20",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
-    "@vitejs/plugin-react": "^5.0.3",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitejs/plugin-react": "^5.1.0",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.7",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "eslint-plugin-storybook": "^9.1.13",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^11.0.3",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.0.1",
     "lodash": "^4.17.21",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "storybook": "^9.1.7",
-    "tailwindcss": "^4.1.13",
+    "storybook": "^10.0.0",
+    "tailwindcss": "^4.1.16",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.5.0",