@quan-erp/shared-ui 2.0.2 → 2.0.3

package/dist/components/ui/calendar.d.ts

@@ -1,11 +1,12 @@
 import { DayButton, DayPicker } from 'react-day-picker';
 import { Button } from './button';
 import * as React from "react";
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, type, trigger, label, ...props }: React.ComponentProps<typeof DayPicker> & {
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, type, trigger, label, onSelect, ...props }: React.ComponentProps<typeof DayPicker> & {
     type?: 'raw' | 'popover' | 'drawer' | 'automatic';
     trigger?: React.ReactNode;
     label?: React.ReactNode;
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    onSelect?: (...args: any[]) => void;
 }): React.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
 export { Calendar, CalendarDayButton };

package/dist/components/ui/dialog.d.ts

@@ -5,7 +5,7 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function DialogContent({ className, children, showCloseButton, onPointerDownOutside, onInteractOutside, onFocusOutside, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/sheet.d.ts

@@ -4,7 +4,7 @@ declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): React.JSX.Element;
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, showCloseButton, onPointerDownOutside, onInteractOutside, onFocusOutside, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
     showCloseButton?: boolean;
 }): React.JSX.Element;

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

@@ -2,6 +2,9 @@ import * as React from "react";
 declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
     wrapper?: string;
     parentContainer?: string;
+    style?: React.CSSProperties;
+    warpperStyle?: React.CSSProperties;
+    parentContainerStyle?: React.CSSProperties;
 } & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/es/components/custom/data-table/cursor-based-pagination.js

@@ -13,7 +13,6 @@ import "lucide-react";
 import "react-day-picker";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -40,6 +39,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-bulk-action-menu.js

@@ -13,7 +13,6 @@ import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -40,6 +39,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import { Separator } from "../../ui/separator.js";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-bulk-export.js

@@ -14,7 +14,6 @@ import "clsx";
 import "tailwind-merge";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -41,6 +40,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-column-header.js

@@ -13,7 +13,6 @@ import { Button } from "../../ui/button.js";
 import "react-day-picker";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -40,6 +39,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-grid.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
 import { groupTableRowsBy } from "./group-table-rows.js";
 import "../../ui/accordion.js";
@@ -15,7 +15,6 @@ import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -42,6 +41,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-list-view.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { flexRender } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { flexRender } from "@tanstack/react-table";
 import * as React from "react";
 import { groupTableRowsBy } from "./group-table-rows.js";
 import { cn } from "../../../lib/utils.js";

package/dist/es/components/custom/data-table/data-table-pagination.js

@@ -16,7 +16,6 @@ import { macrosSlot } from "../../../lib/macros.js";
 import { cn } from "../../../lib/utils.js";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
@@ -41,6 +40,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-toolbar.js

@@ -14,7 +14,6 @@ import "lucide-react";
 import "react-day-picker";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "@icon-park/react";
@@ -41,6 +40,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import { Separator } from "../../ui/separator.js";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table-view-options.js

@@ -18,7 +18,6 @@ import { Button } from "../../ui/button.js";
 import "react-day-picker";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import "../../ui/select.js";
 import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
@@ -43,6 +42,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";

package/dist/es/components/custom/data-table/data-table.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useReactTable } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { useReactTable, getSortedRowModel, getCoreRowModel } from "@tanstack/react-table";
 import * as React from "react";
 import { DataTableBulkActionMenu } from "./data-table-bulk-action-menu.js";
 import { DataTableBulkExportButton } from "./data-table-bulk-export.js";
@@ -27,7 +27,6 @@ import "lucide-react";
 import "react-day-picker";
 import "../../ui/popover.js";
 import "../../ui/drawer.js";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../ui/select.js";
 import "@icon-park/react";
 import "../../ui/carousel.js";
 import "../../ui/chart.js";
@@ -52,6 +51,7 @@ import "../../ui/progress.js";
 import "../../ui/radio-group.js";
 import "react-resizable-panels";
 import "../../ui/scroll-area.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../ui/select.js";
 import "@radix-ui/react-separator";
 import "../../ui/sidebar.js";
 import "../../ui/slider.js";
@@ -66,7 +66,6 @@ import "../../ui/toggle-group.js";
 import "../../ui/toggle.js";
 import "@radix-ui/react-tooltip";
 import "@radix-ui/react-alert-dialog";
-import { getSortedRowModel, getCoreRowModel } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
 const LazyDataTableGrid = React.lazy(
   () => import("./data-table-grid.js").then((m) => ({ default: m.DataTableGrid }))
 );

package/dist/es/components/custom/error-screen.js

@@ -13,7 +13,6 @@ import "lucide-react";
 import "react-day-picker";
 import "../ui/popover.js";
 import "../ui/drawer.js";
-import "../ui/select.js";
 import "uuid";
 import "@quan-erp/shared-frontend-core";
 import "../ui/carousel.js";
@@ -39,6 +38,7 @@ import "../ui/progress.js";
 import "../ui/radio-group.js";
 import "react-resizable-panels";
 import "../ui/scroll-area.js";
+import "../ui/select.js";
 import "@radix-ui/react-separator";
 import "../ui/sidebar.js";
 import "../ui/slider.js";

package/dist/es/components/custom/floating-action-btn.js

@@ -6,8 +6,8 @@ import { useUserHandBehavior } from "../../hooks/use-user-hand-behavior.js";
 import { Portal } from "./portal.js";
 import { cn } from "../../lib/utils.js";
 import { macrosSlot } from "../../lib/macros.js";
-import { AnimatePresence } from "../../shared-ui/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion } from "../../shared-ui/node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
 const FAB_BUTTON = "FAB_BUTTON";
 const FAB_CONTAINER = "FAB_CONTAINER";
 const FloatingButtonContext = createContext({

package/dist/es/components/custom/pull-to-refresh.js

@@ -15,7 +15,6 @@ import "clsx";
 import "tailwind-merge";
 import "../ui/popover.js";
 import "../ui/drawer.js";
-import "../ui/select.js";
 import "uuid";
 import { Vibration } from "@quan-erp/shared-frontend-core";
 import "../ui/carousel.js";
@@ -41,6 +40,7 @@ import "../ui/progress.js";
 import "../ui/radio-group.js";
 import "react-resizable-panels";
 import "../ui/scroll-area.js";
+import "../ui/select.js";
 import "@radix-ui/react-separator";
 import "../ui/sidebar.js";
 import "../ui/slider.js";

package/dist/es/components/custom/responsive-dialog.js

@@ -16,7 +16,6 @@ import { macrosSlot } from "../../lib/macros.js";
 import { cn } from "../../lib/utils.js";
 import "../ui/popover.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
-import "../ui/select.js";
 import "@icon-park/react";
 import "../ui/carousel.js";
 import "../ui/chart.js";
@@ -41,6 +40,7 @@ import "../ui/progress.js";
 import "../ui/radio-group.js";
 import "react-resizable-panels";
 import "../ui/scroll-area.js";
+import "../ui/select.js";
 import "@radix-ui/react-separator";
 import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger } from "../ui/sheet.js";
 import "../ui/sidebar.js";

package/dist/es/components/ui/calendar.js

@@ -7,7 +7,6 @@ import { cn } from "../../lib/utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
 import { Drawer, DrawerTrigger, DrawerContent, DrawerFooter, DrawerClose } from "./drawer.js";
-import "./select.js";
 import { useMediaQuery } from "../../hooks/use-mobile.js";
 import { useMobileBackDialog } from "../../hooks/use-mobile-back-dialog.js";
 import "@quan-erp/shared-frontend-core";
@@ -23,18 +22,86 @@ function Calendar({
   type = "raw",
   trigger,
   label,
+  onSelect,
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
   const isMobile = useMediaQuery();
   const [open, setOpen] = React.useState(false);
   const isDrawer = type === "drawer" || type === "automatic" && isMobile;
+  const contentRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
   const [internalMonth, setInternalMonth] = React.useState(props.defaultMonth || props.month || /* @__PURE__ */ new Date());
   useMobileBackDialog({
     open,
     enable: open && isDrawer,
     onOpenChange: setOpen
   });
+  React.useLayoutEffect(() => {
+    if (!open || isDrawer) return;
+    const pad = 8;
+    const gap = 6;
+    let applying = false;
+    let observed = null;
+    let obs;
+    function place() {
+      const el = contentRef.current;
+      const trigger2 = triggerRef.current;
+      if (!el || !trigger2 || !el.isConnected || applying) return;
+      const wrapper = el.closest("[data-radix-popper-content-wrapper]") || el;
+      const tr = trigger2.getBoundingClientRect();
+      const h = el.offsetHeight;
+      const w = el.offsetWidth;
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      let top = tr.bottom + gap;
+      if (top + h > vh - pad) top = tr.top - gap - h;
+      if (top < pad) top = pad;
+      if (top + h > vh - pad) top = Math.max(pad, vh - pad - h);
+      let left = tr.left;
+      if (left + w > vw - pad) left = Math.max(pad, vw - pad - w);
+      if (left < pad) left = pad;
+      applying = true;
+      wrapper.style.setProperty("position", "fixed", "important");
+      wrapper.style.setProperty("top", `${Math.round(top)}px`, "important");
+      wrapper.style.setProperty("left", `${Math.round(left)}px`, "important");
+      wrapper.style.setProperty("right", "auto", "important");
+      wrapper.style.setProperty("bottom", "auto", "important");
+      wrapper.style.setProperty("transform", "none", "important");
+      wrapper.style.setProperty("margin", "0", "important");
+      wrapper.style.setProperty("z-index", "200", "important");
+      applying = false;
+      if (observed !== wrapper) {
+        if (observed) obs.disconnect();
+        observed = wrapper;
+        obs.observe(wrapper, { attributes: true, attributeFilter: ["style"] });
+      }
+    }
+    obs = new MutationObserver(() => {
+      if (!applying) place();
+    });
+    place();
+    const rafs = [0, 1, 2].map(() => requestAnimationFrame(place));
+    const timers = [16, 50, 100, 200, 400].map((ms) => window.setTimeout(place, ms));
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      rafs.forEach((id) => cancelAnimationFrame(id));
+      timers.forEach((id) => window.clearTimeout(id));
+      obs.disconnect();
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, isDrawer]);
+  const handleSelect = React.useCallback(
+    (date, ...args) => {
+      onSelect?.(date, ...args);
+      if (props.mode === "single" && date && (type === "popover" || type === "automatic" || type === "drawer")) {
+        setOpen(false);
+      }
+    },
+    [onSelect, props.mode, type]
+  );
   React.useEffect(() => {
     if (props.month) {
       setInternalMonth(props.month);
@@ -106,8 +173,8 @@ function Calendar({
     const today = /* @__PURE__ */ new Date();
     setInternalMonth(today);
     props.onMonthChange?.(today);
-    if (props.mode === "single" && props.onSelect) {
-      props.onSelect(today, today, { selected: false }, {});
+    if (props.mode === "single" && onSelect) {
+      handleSelect(today, today, { selected: false }, {});
     }
   };
   const CalendarContent = /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:flex-col shared:gap-2 shared:w-full shared:overflow-hidden shared:md:h-[26.5rem] shared:h-[31.5rem] shared:md:mt-0 shared:mt-5", children: [
@@ -329,7 +396,8 @@ function Calendar({
           },
           ...components
         },
-        ...props
+        ...props,
+        onSelect: handleSelect
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "shared:px-2 shared:pb-2 shared:mt-[-4px] shared:min-h-min shared:flex shared:justify-end", children: showMonthYearPicker ? /* @__PURE__ */ jsx(
@@ -361,10 +429,29 @@ function Calendar({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "shared:w-auto shared:p-0", align: "start", children: CalendarContent })
-  ] });
+  return (
+    // modal={false}: works inside Dialog (pointer-events / focus trap won't swallow the panel)
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx("div", { ref: triggerRef, className: "shared:w-full shared:min-w-0", children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(Button, { type: "button", variant: "input", children: [
+        label,
+        /* @__PURE__ */ jsx(Calendar$1, { theme: "outline", size: "19", fill: "#000000" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          ref: contentRef,
+          align: "start",
+          side: "bottom",
+          sideOffset: 6,
+          avoidCollisions: false,
+          className: "shared:z-[100] shared:w-auto shared:p-0",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          children: CalendarContent
+        }
+      )
+    ] })
+  );
 }
 function CalendarDayButton({
   className,

package/dist/es/components/ui/dialog.js

@@ -40,10 +40,21 @@ function DialogOverlay({
     }
   );
 }
+function isPortaledOverlayTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      '[data-slot="popover-content"], [data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="combobox-content"]'
+    )
+  );
+}
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  onPointerDownOutside,
+  onInteractOutside,
+  onFocusOutside,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
@@ -57,6 +68,18 @@ function DialogContent({
           className
         ),
         ...props,
+        onPointerDownOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onPointerDownOutside?.(e);
+        },
+        onInteractOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onInteractOutside?.(e);
+        },
+        onFocusOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onFocusOutside?.(e);
+        },
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(

package/dist/es/components/ui/sheet.js

@@ -38,11 +38,22 @@ function SheetOverlay({
     }
   );
 }
+function isPortaledOverlayTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(
+    target.closest(
+      '[data-slot="popover-content"], [data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="combobox-content"]'
+    )
+  );
+}
 function SheetContent({
   className,
   children,
   side = "right",
   showCloseButton = true,
+  onPointerDownOutside,
+  onInteractOutside,
+  onFocusOutside,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
@@ -60,6 +71,18 @@ function SheetContent({
           className
         ),
         ...props,
+        onPointerDownOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onPointerDownOutside?.(e);
+        },
+        onInteractOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onInteractOutside?.(e);
+        },
+        onFocusOutside: (e) => {
+          if (isPortaledOverlayTarget(e.target)) e.preventDefault();
+          onFocusOutside?.(e);
+        },
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { ...macrosSlot("sheet-close"), className: "shared:p-2 shared:bg-muted shared:rounded-full shared:ring-offset-background shared:focus:ring-ring shared:data-[state=open]:bg-secondary shared:absolute shared:top-4 shared:right-4 shared:opacity-70 shared:transition-opacity shared:hover:opacity-100 shared:focus:ring-2 shared:focus:ring-offset-2 shared:focus:outline-hidden shared:disabled:pointer-events-none shared:cursor-pointer", children: [

package/dist/es/components/ui/table.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const Table = React.forwardRef(({ className, wrapper, parentContainer, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("shared:w-full shared:border shared:border-black/10 shared:rounded-xl shared:cupertino-corner shared:overflow-hidden", parentContainer), children: /* @__PURE__ */ jsx("div", { className: cn("shared:relative shared:w-full shared:overflow-auto", wrapper), children: /* @__PURE__ */ jsx(
+const Table = React.forwardRef(({ className, wrapper, parentContainer, parentContainerStyle, warpperStyle, style, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("shared:w-full shared:border shared:border-black/10 shared:rounded-xl shared:cupertino-corner shared:overflow-hidden", parentContainer), style: parentContainerStyle, children: /* @__PURE__ */ jsx("div", { className: cn("shared:relative shared:w-full shared:overflow-auto", wrapper), style: warpperStyle, children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
     className: cn("shared:w-full shared:caption-bottom shared:text-sm", className),
+    style,
     ...props
   }
 ) }) }));

package/dist/es/index.js

@@ -90,6 +90,7 @@ import { DataTableViewFallback } from "./components/custom/data-table/data-table
 import { DataTableViewOptions } from "./components/custom/data-table/data-table-view-options.js";
 import { buildColumnLayoutKey, loadViewPreferences, parseViewPreferences, saveViewPreferences, serializeViewPreferences, setColumnVisibleInState } from "./components/custom/data-table/data-table-view-preferences.storage.js";
 import { getDataTableViewPreferencesStorageKey, useDataTableViewPreferences } from "./components/custom/data-table/data-table-view-preferences.js";
+import "@tanstack/react-table";
 import { DataTable } from "./components/custom/data-table/data-table.js";
 import { useDataTablePageSize } from "./components/custom/data-table/use-data-table-page-size.js";
 import { SCREENS, useMediaQuery, useMediaQueryMultiStep } from "./hooks/use-mobile.js";