@gearbox-protocol/permissionless-ui 1.0.0

package/dist/esm/components/badge.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import cn from "../utils/index.js";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export {
+  Badge,
+  badgeVariants
+};

package/dist/esm/components/buttons/button.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import cn from "../../utils/index.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-white",
+        "pink-outline": "border border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-white",
+        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-white",
+        "blue-outline": "border border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-white"
+      },
+      size: {
+        xs: "rounded-full px-3 py-0.5 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};

package/dist/esm/components/buttons/copy-button.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import * as React from "react";
+import cn, { copyToClipboard } from "../../utils/index.js";
+import { Button } from "./button.js";
+const CopyButton = React.forwardRef(
+  ({ text, name, className, size = "3", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "ghost",
+        size: "sm",
+        className: cn(
+          "text-muted-foreground hover:text-white p-0 h-auto",
+          className
+        ),
+        onClick: () => copyToClipboard({ text, name }),
+        ...props,
+        children: /* @__PURE__ */ jsx(Copy, { className: `h-${size} w-${size}` })
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+export {
+  CopyButton
+};

package/dist/esm/components/buttons/external-button.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import * as React from "react";
+import cn from "../../utils/index.js";
+import { Button } from "./button.js";
+const ExternalButton = React.forwardRef(
+  ({ url, className, size = "3", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "ghost",
+        size: "sm",
+        className: cn(
+          "text-muted-foreground hover:text-white p-0 h-auto",
+          className
+        ),
+        onClick: () => window.open(url, "_blank"),
+        ...props,
+        children: /* @__PURE__ */ jsx(ExternalLink, { className: `h-${size} w-${size}` })
+      }
+    );
+  }
+);
+ExternalButton.displayName = "CopyButton";
+export {
+  ExternalButton
+};

package/dist/esm/components/buttons/tab-button.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../../utils/index.js";
+import { Button } from "./button.js";
+const TabButton = React.forwardRef(
+  ({ className, children, size = "sm", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        size,
+        className: cn(
+          "bg-gray-900 text-gray-100 border-gray-700 hover:bg-gray-800 border-gray-300",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TabButton.displayName = "TabButton";
+export {
+  TabButton
+};

package/dist/esm/components/card.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "font-semibold leading-none tracking-tight text-2xl",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+};

package/dist/esm/components/checkbox.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export {
+  Checkbox
+};

package/dist/esm/components/danger-zone.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from "./card.js";
+function DangerZone({ children }) {
+  return /* @__PURE__ */ jsxs(Card, { className: "border-destructive", children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-destructive", children: "Danger Zone" }) }),
+    /* @__PURE__ */ jsx(CardContent, { children })
+  ] });
+}
+export {
+  DangerZone
+};

package/dist/esm/components/dialog.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-3xl font-bold mb-6 text-white", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+};

package/dist/esm/components/dropdown-menu.js

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import cn from "../utils/index.js";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};

package/dist/esm/components/editable-table/edit-button.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Edit } from "lucide-react";
+import { Button } from "../buttons/button.js";
+function EditButton({
+  onClick,
+  customButton,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx("div", { className: customButton ? "px-4 py-2" : "px-2", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: customButton ? "p-0 h-fit hover:bg-accent/0" : "p-2 h-fit",
+      variant: "ghost",
+      onClick,
+      disabled,
+      children: customButton ?? /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" })
+    }
+  ) });
+}
+export {
+  EditButton
+};

package/dist/esm/components/editable-table/editable-table.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TabButton } from "../buttons/tab-button.js";
+import { Table, TableCell } from "../table.js";
+import { UpdatedValue } from "./updated-value.js";
+function TableCellUpdatable({
+  oldValue,
+  newValue,
+  onEdit,
+  isEditable = true,
+  className,
+  align = "right",
+  customButton,
+  postfix,
+  disabled,
+  nowrap
+}) {
+  const alignmentClass = {
+    left: "justify-start",
+    right: "justify-end",
+    center: "justify-center"
+  }[align];
+  return /* @__PURE__ */ jsx(TableCell, { className, children: /* @__PURE__ */ jsx("div", { className: `flex ${alignmentClass} w-full text-${align}`, children: /* @__PURE__ */ jsx(
+    UpdatedValue,
+    {
+      oldValue,
+      newValue,
+      onEdit,
+      isEditable,
+      customButton,
+      postfix,
+      disabled,
+      nowrap
+    }
+  ) }) });
+}
+function TableEditable({
+  title,
+  onNew,
+  newButtonText = "New",
+  buttonLoadingText = "Adding...",
+  isLoading,
+  actions,
+  children,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        onNew && /* @__PURE__ */ jsx(TabButton, { onClick: onNew, disabled: isLoading || disabled, children: isLoading ? buttonLoadingText : newButtonText }),
+        actions?.map((action, index) => /* @__PURE__ */ jsx(
+          TabButton,
+          {
+            onClick: action.onClick,
+            disabled: action.isLoading || disabled,
+            children: action.isLoading ? action.loadingText || "Loading..." : action.text
+          },
+          index
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsx(Table, { children }) })
+  ] });
+}
+export {
+  TableCellUpdatable,
+  TableEditable
+};

package/dist/esm/components/editable-table/updated-value.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EditButton } from "./edit-button.js";
+function UpdatedValue({
+  oldValue,
+  newValue,
+  onEdit,
+  isEditable = true,
+  customButton,
+  postfix,
+  disabled = false,
+  nowrap = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center ", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: oldValue !== void 0 && oldValue !== newValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `line-through text-muted-foreground ${nowrap ? "whitespace-nowrap" : ""}`,
+          children: oldValue
+        }
+      ),
+      " \u2192 ",
+      /* @__PURE__ */ jsxs("span", { className: nowrap ? "whitespace-nowrap" : "", children: [
+        newValue,
+        postfix && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " ",
+          postfix
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("span", { className: nowrap ? "whitespace-nowrap" : "", children: [
+      newValue,
+      postfix && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        " ",
+        postfix
+      ] })
+    ] }) }),
+    isEditable && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+      EditButton,
+      {
+        onClick: onEdit,
+        customButton,
+        disabled
+      }
+    ) })
+  ] });
+}
+export {
+  UpdatedValue
+};