@quan-erp/shared-ui 1.0.0

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

@@ -0,0 +1,71 @@
+import { VariantProps } from 'class-variance-authority';
+import { TooltipContent } from './tooltip';
+import * as React from "react";
+type SidebarContextProps = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "input" | "select" | "link" | "default" | "destructive" | "secondary" | "outline" | "default2" | "destructive2" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React.ForwardRefExoticComponent<Omit<Omit<import('./input').InputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-separator').SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1,3 @@
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1,12 @@
+export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange"> {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1,6 @@
+import { Toaster as Sonner } from 'sonner';
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
+export * from 'sonner';
+export { Toaster };
+//# sourceMappingURL=sonner.d.ts.map

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const spinnerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.ComponentProps<"svg">, VariantProps<typeof spinnerVariants> {
+}
+declare function Spinner({ className, size, ...props }: SpinnerProps): import("react").JSX.Element;
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

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

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+declare const switchVariants: (props?: ({
+    switchSize?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    wrapper?: string;
+    parentContainer?: string;
+} & 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>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+    size?: "default" | "sm" | "lg";
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const textareaVariants: (props?: ({
+    inputSize?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TextareaProps extends React.ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
+}
+declare function Textarea({ className, inputSize, ...props }: TextareaProps): React.JSX.Element;
+export { Textarea };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/ui/time-picker.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export declare function TimePicker({ value, format, onChange, }: {
+    value?: {
+        hour: number;
+        minute: number;
+    };
+    format?: '24hr' | '12hr';
+    onChange?: (v: {
+        hour: number;
+        minute: number;
+    }) => void;
+}): React.JSX.Element;
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/es/common/common.js

@@ -0,0 +1,4 @@
+const BUILTIN_PLUGIN_NAME = "builtin";
+export {
+  BUILTIN_PLUGIN_NAME
+};

package/dist/es/components/blocks/editor-00/editor.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import "lexical";
+import { editorTheme } from "../../editor/themes/editor-theme.js";
+import { TooltipProvider } from "../../ui/tooltip.js";
+import { nodes } from "./nodes.js";
+import { Plugins } from "./plugins.js";
+const editorConfig = {
+  namespace: "Editor",
+  theme: editorTheme,
+  nodes,
+  onError: (error) => {
+    console.error(error);
+  }
+};
+function Editor({
+  editorState,
+  editorSerializedState,
+  onChange,
+  onSerializedChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "bg-background overflow-hidden rounded-lg border shadow", children: /* @__PURE__ */ jsx(
+    LexicalComposer,
+    {
+      initialConfig: {
+        ...editorConfig,
+        ...editorState ? { editorState } : {},
+        ...editorSerializedState ? { editorState: JSON.stringify(editorSerializedState) } : {}
+      },
+      children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+        /* @__PURE__ */ jsx(Plugins, {}),
+        /* @__PURE__ */ jsx(
+          OnChangePlugin,
+          {
+            ignoreSelectionChange: true,
+            onChange: (editorState2) => {
+              onChange?.(editorState2);
+              onSerializedChange?.(editorState2.toJSON());
+            }
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  Editor
+};

package/dist/es/components/blocks/editor-00/nodes.js

@@ -0,0 +1,6 @@
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ParagraphNode, TextNode } from "lexical";
+const nodes = [HeadingNode, ParagraphNode, TextNode, QuoteNode];
+export {
+  nodes
+};

package/dist/es/components/blocks/editor-00/plugins.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "../../editor/editor-ui/content-editable.js";
+function Plugins() {
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+  const onRef = (_floatingAnchorElem) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx("div", { className: "", ref: onRef, children: /* @__PURE__ */ jsx(ContentEditable, { placeholder: "Start typing ..." }) }) }),
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ) }) });
+}
+export {
+  Plugins
+};

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "../ui/alert-dialog.js";
+import "react";
+import "react-dom/client";
+function ConfirmDialog({
+  options,
+  open,
+  onClose,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange: (next) => !next && onClose(false), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: options.title ?? "Are you sure?" }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { children: options.description ?? "This action cannot be undone." })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { className: "shared:flex shared:gap-2 shared:flex-row shared:justify-end", children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { variant: "secondary", className: "shared:self-end", onClick: () => onClose(false), children: options.cancelText ?? "Cancel" }),
+      /* @__PURE__ */ jsx(
+        AlertDialogAction,
+        {
+          onClick: () => {
+            onClose(true);
+            onConfirm();
+          },
+          className: options.variant === "destructive" ? "shared:bg-destructive shared:text-destructive-foreground shared:self-end" : "",
+          children: options.confirmText ?? "Confirm"
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  ConfirmDialog
+};

package/dist/es/components/custom/dashboard.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ApplicationTwo } from "@icon-park/react";
+import { useRef } from "react";
+import { ProtectedPage } from "./protected-page.js";
+import { SCREENS } from "../../hooks/use-mobile.js";
+import "uuid";
+import "@quan-erp/shared-frontend-core";
+import { useIsInView } from "../../hooks/use-is-inview.js";
+import { BUILTIN_PLUGIN_NAME } from "../../common/common.js";
+function DashboardItem({
+  id,
+  colSpan,
+  rowSpan = 1,
+  children,
+  rootMargin = "0px",
+  threshold = 0,
+  once = true,
+  className,
+  wapperClassName,
+  pluginName,
+  titleClassName,
+  icon,
+  label,
+  requiredApis
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: id || "" });
+  const isMobile = window.innerWidth < SCREENS.md || window.innerWidth == SCREENS.md;
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    ...{ gridColumn: `span ${isMobile ? 1 : colSpan ?? 1} / span ${isMobile ? 1 : rowSpan ?? 1}` },
+    height: `${(rowSpan ?? 1) * 200}px`,
+    maxHeight: `${(rowSpan ?? 1) * 200}px`
+  };
+  const ref = useRef(null);
+  const visible = useIsInView({ ref, rootMargin, threshold, once });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        setNodeRef(node);
+        ref.current = node;
+      },
+      style,
+      "data-plugin": pluginName || BUILTIN_PLUGIN_NAME,
+      className: cn("shared:w-full shared:flex shared:flex-col shared:group shared:bg-primary/10 shared:outline-2 shared:hover:p-1 shared:hover:outline-primary/40 shared:outline-transparent shared:rounded-3xl shared:cupertino-corner shared:overflow-hidden", isDragging ? "shared:overscroll-none shared:touch-none" : "shared:transition-all shared:duration-300", wapperClassName),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: cn("shared:transition-all shared:duration-300 shared:cursor-grab shared:px-2 shared:py-2 shared:group-hover:px-2 shared:group-hover:py-2 shared:justify-between shared:font-bold shared:text-primary shared:text-sm shared:flex shared:items-center shared:gap-2 shared:overscroll-none shared:touch-none", titleClassName),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2", children: [
+                icon || /* @__PURE__ */ jsx(ApplicationTwo, { theme: "outline", size: "13" }),
+                " ",
+                label
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "shared:text-xs shared:font-light shared:whitespace-nowrap shared:overflow-hidden shared:text-ellipsis", children: [
+                pluginName,
+                "/",
+                id
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-plugin": pluginName, className: cn("shared:w-full shared:h-full shared:bg-background shared:rounded-2xl shared:border-2 shared:border-primary/10", className), children: visible && /* @__PURE__ */ jsx(ProtectedPage, { requiredApis: requiredApis || [], children }) })
+      ]
+    }
+  );
+}
+export {
+  DashboardItem
+};

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

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import "../../ui/accordion.js";
+import "../../ui/alert.js";
+import "../../ui/avatar.js";
+import "../../ui/badge.js";
+import "../../ui/breadcrumb.js";
+import "../../ui/button-group.js";
+import "../../ui/button.js";
+import "react";
+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";
+import "../../ui/carousel.js";
+import "../../ui/chart.js";
+import "../../ui/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "../../ui/command.js";
+import "../../ui/context-menu.js";
+import "@radix-ui/react-dialog";
+import "../../ui/dropdown-menu.js";
+import "../../ui/field.js";
+import "../../ui/form.js";
+import "../../ui/hover-card.js";
+import "../../ui/input-group.js";
+import "../../ui/input-otp.js";
+import "../../ui/input.js";
+import "../../ui/item.js";
+import "@radix-ui/react-label";
+import "../../ui/menubar.js";
+import "../../ui/navigation-menu.js";
+import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationNext } from "../../ui/pagination.js";
+import "../../ui/progress.js";
+import "../../ui/radio-group.js";
+import "react-resizable-panels";
+import "../../ui/scroll-area.js";
+import "@radix-ui/react-separator";
+import "../../ui/sidebar.js";
+import "../../ui/slider.js";
+import "next-themes";
+import "sonner";
+import "../../ui/spinner.js";
+import "../../ui/switch.js";
+import "../../ui/table.js";
+import "../../ui/tabs.js";
+import "../../ui/textarea.js";
+import "../../ui/toggle-group.js";
+import "../../ui/toggle.js";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-alert-dialog";
+function CursorBasedPagination({
+  pagination,
+  onPageChange,
+  className
+}) {
+  const {
+    nextCursor,
+    previousCursor,
+    hasNextPage,
+    hasPreviousPage,
+    totalItems
+  } = pagination;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Keep it flex-row always to prevent stacking
+        "shared:border-border shared:bg-background/50 shared:mt-3 shared:flex shared:w-full shared:flex-row shared:items-center shared:justify-between shared:border-t shared:pt-3 shared:backdrop-blur-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-2 shared:text-xs shared:whitespace-nowrap sm:shared:gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "shared:flex shared:items-center shared:gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "shared:text-muted-foreground shared:font-medium", children: "Total" }),
+            /* @__PURE__ */ jsx("span", { className: "shared:text-foreground shared:font-bold shared:tabular-nums", children: totalItems.toLocaleString() })
+          ] }),
+          /* @__PURE__ */ jsx("div", {})
+        ] }),
+        /* @__PURE__ */ jsx(Pagination, { className: "shared:m-0 shared:w-auto", children: /* @__PURE__ */ jsxs(PaginationContent, { className: "shared:gap-1 sm:shared:gap-2", children: [
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationPrevious,
+            {
+              href: "#",
+              onClick: (e) => {
+                e.preventDefault();
+                if (hasPreviousPage) onPageChange(previousCursor, true);
+              },
+              className: cn(
+                // h-8 w-8 + p-0 makes it a square icon button on mobile
+                // [&_span]:hidden removes the hardcoded "Previous" text
+                "shared:h-8 shared:w-max shared:p-0 shared:text-xs shared:transition-all sm:shared:w-auto sm:shared:px-3 sm:shared:pl-2.5 [&_span]:shared:hidden sm:[&_span]:shared:inline",
+                !hasPreviousPage ? "shared:pointer-events-none shared:opacity-20 shared:grayscale" : "shared:border-border hover:shared:bg-accent shared:bg-background shared:cursor-pointer shared:border shared:shadow-sm active:shared:scale-95"
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+            PaginationNext,
+            {
+              href: "#",
+              onClick: (e) => {
+                e.preventDefault();
+                if (hasNextPage) onPageChange(nextCursor, false);
+              },
+              className: cn(
+                // [&_span]:hidden removes the hardcoded "Next" text
+                "shared:h-8 shared:w-max shared:p-0 shared:text-xs shared:transition-all sm:shared:w-auto sm:shared:px-3 sm:shared:pr-2.5 [&_span]:shared:hidden sm:[&_span]:shared:inline",
+                !hasNextPage ? "shared:pointer-events-none shared:opacity-20 shared:grayscale" : "shared:border-border hover:shared:bg-accent shared:bg-background shared:cursor-pointer shared:border shared:shadow-sm active:shared:scale-95"
+              )
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  CursorBasedPagination
+};