@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.5

package/dist/{index-BXuxPoz7.js → index-DzIBBMjs.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-Cd2vhaop.js";
+import { P as N } from "./index-BITvcJAz.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-ti1b9kqV.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-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-Oq5GlCHP.js → index-os7vysFS.js}

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as O } from "react/jsx-runtime";
 import * as l from "react";
 import { c as w, b as M } from "./index-BfXxHr_2.js";
 import { u, b as x } from "./index-DQH6odE9.js";
-import { c as A, R as I, P as $, O as L, W as F, C as G, T as W, d as j, b as v, e as B } from "./index-BXuxPoz7.js";
+import { c as A, R as I, P as $, O as L, W as F, C as G, T as W, d as j, b as v, e as B } from "./index-DzIBBMjs.js";
 import { Button as Y } from "./components/Button/Button.js";
 import { cn as k } from "./utils/index.js";
 var D = "AlertDialog", [q, le] = w(D, [

package/dist/index-ti1b9kqV.js

@@ -0,0 +1,14 @@
+import * as o from "react";
+import { R as m, P as c } from "./index-BITvcJAz.js";
+import { u as f } from "./index-BfXxHr_2.js";
+import { jsx as l } from "react/jsx-runtime";
+var u = "Portal", p = o.forwardRef((r, a) => {
+  const { container: e, ...s } = r, [n, i] = o.useState(!1);
+  f(() => i(!0), []);
+  const t = e || n && globalThis?.document?.body;
+  return t ? m.createPortal(/* @__PURE__ */ l(c.div, { ...s, ref: a }), t) : null;
+});
+p.displayName = u;
+export {
+  p as P
+};

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 } from '@tanstack/react-table';
 import { ComponentRef } from 'react';
 import { Context } from 'react';
 import { DayPickerProps } from 'react-day-picker';
@@ -11,15 +13,23 @@ 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 { VariantProps } from 'class-variance-authority';
 
+declare type Action<TData> = {
+    label: string;
+    onClick: (rowData: TData) => void;
+};
+
 export declare const Alert: FC<AlertProps>;
 
 export declare const AlertDialog: FC<AlertDialogProps>;
@@ -324,6 +334,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: OptionType[];
+};
+
 export declare const Navigation: FC<NavigationProps> & NavigationChildrenProps;
 
 declare type NavigationChildrenProps = {
@@ -433,6 +450,12 @@ declare type Option_5 = {
     variant?: BadgeProps['variant'];
 };
 
+declare type OptionType = {
+    id: string;
+    label: string;
+    variant?: 'info' | 'danger' | 'success' | 'default' | 'warning' | null;
+};
+
 export declare const PieChart: FC<Props_2>;
 
 export declare const ProgressBar: FC<ProgressBarProps>;
@@ -539,6 +562,53 @@ 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;
+    ariaLabel?: string;
+    columns: ColumnDef<TData, string>[];
+    data: TData[];
+    totalItems: number;
+    fetchData: (params: Record<string, string | number | string[] | number[] | undefined>) => Promise<{
+        data: TData[];
+        totalItemsCount: number;
+    }>;
+    classNameHeaderTable?: string;
+    classNameHeaderArrows?: string;
+    classNameHeaderActiveArrows?: string;
+} & ({
+    showPagination: true;
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+} | {
+    showPagination?: false | undefined;
+    showTotalItems?: never;
+    showDropdownPagination?: never;
+    showDotPagination?: never;
+    showFormPagination?: never;
+    pageSizes?: never;
+}) & ({
+    filterSearchPlaceholder?: string;
+    multiSelectFilter?: MultiSelectFilter[];
+    showFilter: true;
+    showFilterInput?: boolean;
+} | {
+    filterSearchPlaceholder?: never;
+    multiSelectFilter?: never;
+    showFilter?: false | undefined;
+    showFilterInput?: 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>;
@@ -619,6 +689,8 @@ declare type ResetButtonProps = ButtonProps & {
     onClick?: VoidFunction;
 };
 
+declare type RowData = RowData_2;
+
 declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
     width?: string;
     isSelected?: boolean;
@@ -641,11 +713,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>;
@@ -833,6 +906,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> {
@@ -850,6 +925,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-D-NOEWMX.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.3",
+  "version": "0.1.2-alpha.4",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -63,16 +63,19 @@
     "@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-query": "^5.90.3",
+    "@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",
+    "lucide-react": "^0.545.0",
     "react-chartjs-2": "^5.3.0",
-    "react-day-picker": "^9.11.0",
+    "react-day-picker": "^9.11.1",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.6",
     "react-remove-scroll": "^2.7.1",
@@ -107,28 +110,29 @@
     }
   },
   "devDependencies": {
+    "@faker-js/faker": "^10.0.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.1.10",
     "@storybook/react-vite": "^9.1.10",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.9.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@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.16",
-    "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.45.0",
-    "@typescript-eslint/parser": "^8.45.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/parser": "^8.46.1",
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-storybook": "^9.1.10",
     "eslint-plugin-vitest": "^0.5.4",
     "glob": "^11.0.3",
@@ -140,10 +144,10 @@
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "storybook": "^9.1.10",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.14",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
-    "vite": "^7.1.7",
+    "vite": "^7.1.10",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-svgr": "^4.5.0",