@quoreadmin/ui 1.7.20 → 1.8.1

package/dist/index168.js

@@ -1,282 +1,863 @@
-const i = {
-  content: ({ parent: o, props: t }) => ({
+const o = {
+  root: ({ props: e }) => ({
     class: [
-      "flex",
-      {
-        "flex-col": t.fullScreen
-      },
-      {
-        "flex-col": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
-        "flex-row": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
-      }
-    ]
-  }),
-  // Contains main photo & previous/next button container "itemcontainer" below
-  itemwrapper: ({ parent: o, props: t }) => ({
-    class: [
-      "group",
-      "flex relative",
-      "mt-14 md:mt-20 min-h-[74vh]",
-      {
-        "grow shrink w-0 justify-center": t.fullScreen
-      },
-      {
-        "flex-col": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "top",
-        "flex-row items-center": o.props.indicatorsPosition === "left" || o.props.indicatorsPosition === "right"
-      },
-      {
-        "order-2": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left",
-        "flex-row": o.props.thumbnailsPosition === "right"
-      }
-    ]
-  }),
-  // Contains main photo & previous/next buttons
-  itemcontainer: ({ parent: o }) => ({
-    class: [
-      "flex w-full md:w-screen h-full relative grow items-center",
-      {
-        "order-1": o.props.indicatorsPosition === "bottom" || o.props.indicatorsPosition === "right",
-        "order-2": o.props.indicatorsPosition === "top" || o.props.indicatorsPosition === "left"
-      }
+      "relative",
+      // Flex & Alignment
+      { "flex flex-col": e.scrollable && e.scrollHeight === "flex" },
+      // Size
+      { "h-full": e.scrollable && e.scrollHeight === "flex" }
     ]
   }),
-  // Div that contains main img element
-  item: {
+  loadingoverlay: {
     class: [
-      // Flex
-      "flex justify-center items-center",
-      // Sizing
-      "h-full w-full",
-      "rounded-lg overflow-auto",
-      // Misc
-      "md:max-w-[592px] mx-auto"
+      // Position
+      "absolute",
+      "top-0 left-0",
+      "z-20",
+      // Flex & Alignment
+      "flex items-center justify-center",
+      // Size
+      "w-full h-full",
+      // Color
+      "bg-surface-100/0 dark:bg-surface-800/0",
+      // Transition
+      "transition duration-200"
     ]
   },
-  // Contains div that contains thumbnail container "thumbnailcontainer"
-  thumbnailwrapper: ({ parent: o }) => ({
+  loadingicon: {
+    class: "w-8 h-8 animate-spin hidden"
+  },
+  wrapper: ({ props: e }) => ({
     class: [
-      // Flex
-      "flex flex-col shrink-0",
-      {
-        "order-1": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "left"
-      },
-      // Misc
-      "overflow-auto"
+      { relative: e.scrollable, "flex flex-col grow": e.scrollable && e.scrollHeight === "flex" },
+      // Size
+      { "h-full": e.scrollable && e.scrollHeight === "flex" }
     ]
   }),
-  thumbnailcontainer: ({ parent: o }) => ({
+  header: ({ props: e }) => ({
     class: [
-      // Flex
-      "flex",
+      "font-bold",
+      // Shape
+      e.showGridlines ? "border-x border-t border-b-0" : "border-y-0 border-x-0",
       // Spacing
       "p-4",
-      // Colors
-      "bg-transparent",
-      "md:max-w-[592px] mx-auto",
-      {
-        "flex-row": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom",
-        "flex-col grow": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
-      }
+      // Color
+      "bg-surface-50 dark:bg-surface-800",
+      "border-surface-200 dark:border-surface-700",
+      "text-surface-700 dark:text-white/80"
     ]
   }),
-  // Container for the previous thumbnail button
-  previousthumbnailbutton: {
-    class: [
-      // Positioning
-      "self-center relative",
-      // Display & Flexbox
-      "flex shrink-0 justify-center items-center overflow-hidden",
-      // Spacing
-      "m-2 ml-0",
-      // Appearance
-      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
-      // Hover Effects
-      "hover:bg-surface-0/10 hover:text-white",
-      // Focus Effects
-      "focus:outline-none focus:outline-offset-0"
-    ]
-  },
-  // The container for just the thumbnails (not including the previous/next buttons) - contains another div "thumbnailitems"
-  thumbnailitemscontainer: {
-    class: "overflow-hidden w-full md:w-[30rem]"
+  table: {
+    class: "w-full border-spacing-0 border-separate"
   },
-  // The div that contains just the thumbnails
-  thumbnailitems: ({ parent: o }) => ({
+  thead: ({ context: e }) => ({
     class: [
-      "flex",
       {
-        "flex-col h-full": o.props.thumbnailsPosition === "right" || o.props.thumbnailsPosition === "left"
+        "bg-surface-50 z-40 sticky": e.scrollable
       }
     ]
   }),
-  thumbnailitem: ({ parent: o }) => ({
+  tbody: ({ instance: e, context: r }) => ({
     class: [
-      // Flexbox
-      "flex items-center justify-center",
-      "grow shrink-0",
       {
-        "w-full md:w-[25%]": o.props.thumbnailsPosition === "top" || o.props.thumbnailsPosition === "bottom"
-      },
-      // Misc
-      "overflow-auto",
-      "cursor-pointer",
-      // 'opacity-50',
-      // States
-      "hover:opacity-100",
-      "hover:transition-opacity",
-      "hover:duration-300"
-    ]
-  }),
-  nextthumbnailbutton: {
-    class: [
-      // Positioning
-      "self-center relative",
-      // Display & Flexbox
-      "flex shrink-0 justify-center items-center overflow-hidden",
-      // Spacing
-      "m-2 mr-0",
-      // Appearance
-      "bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out",
-      // Hover Effects
-      "hover:bg-surface-0/10 hover:text-white",
-      // Focus Effects
-      "focus:outline-none focus:outline-offset-0"
-    ]
-  },
-  indicators: ({ parent: o }) => ({
-    class: [
-      // flex
-      "flex items-center justify-center",
-      // Spacing
-      "p-4",
-      // Indicators Position
-      {
-        "order-2": o.props.indicatorsPosition == "bottom",
-        "order-1": o.props.indicatorsPosition == "top",
-        "order-1 flex-col": o.props.indicatorsPosition == "left",
-        "flex-col order-2": o.props.indicatorsPosition == "right"
-      },
-      {
-        "absolute z-10 bg-black/50": o.props.showIndicatorsOnItem
-      },
-      {
-        "bottom-0 left-0 w-full items-start": o.props.indicatorsPosition == "bottom" && o.props.showIndicatorsOnItem,
-        "top-0 left-0 w-full items-start": o.props.indicatorsPosition == "top" && o.props.showIndicatorsOnItem,
-        "left-0 top-0 h-full items-start": o.props.indicatorsPosition == "left" && o.props.showIndicatorsOnItem,
-        "right-0 top-0 h-full items-start": o.props.indicatorsPosition == "right" && o.props.showIndicatorsOnItem
+        "sticky z-20": e.frozenRow && r.scrollable
       }
     ]
   }),
-  indicator: ({ parent: o }) => ({
+  tfoot: ({ context: e }) => ({
     class: [
       {
-        "mr-2": o.props.indicatorsPosition == "bottom" || o.props.indicatorsPosition == "top",
-        "mb-2": o.props.indicatorsPosition == "left" || o.props.indicatorsPosition == "right"
+        "bg-surface-50 bottom-0 z-0": e.scrollable
       }
     ]
   }),
-  indicatorbutton: ({ context: o }) => ({
-    class: [
-      // Size
-      "w-2 h-2",
-      // Appearance
-      "rounded-full transition duration-200",
-      // Focus Effects
-      "focus:outline-none focus:outline-offset-0",
-      // Conditional Appearance: Not Highlighted
-      {
-        "bg-inkwell-30 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600": !o.highlighted
-      },
-      // Conditional Appearance: Highlighted
-      { "bg-white hover:bg-primary-600": o.highlighted }
-    ]
-  }),
-  mask: {
+  footer: {
     class: [
-      "fixed top-0 left-0 w-full h-full",
-      "flex items-center justify-center",
-      "bg-inkwell-40/95",
-      "image-overlay"
-    ]
-  },
-  closebutton: {
-    class: [
-      // Positioning
-      "!absolute top-0 right-0 z-[1001]",
-      // Display & Flexbox
-      "flex justify-center items-center overflow-hidden",
+      "font-bold",
+      // Shape
+      "border-t-0 border-b border-x-0",
       // Spacing
-      "m-2",
-      // Appearance
-      "text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out",
-      // Focus Effects
-      "focus:outline-none"
+      "p-4",
+      // Color
+      "bg-surface-50 dark:bg-surface-800",
+      "border-surface-200 dark:border-surface-700",
+      "text-surface-700 dark:text-white/80"
     ]
   },
-  closeicon: {
-    class: "w-6 h-6"
-  },
-  previousitembutton: ({ parent: o }) => ({
-    class: [
-      // Display & Flexbox
-      "inline-flex justify-center items-center overflow-hidden",
-      // Appearance
-      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
-      {
-        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+  column: {
+    headercell: ({ context: e, props: r }) => ({
+      class: [
+        "font-bold",
+        // Position
+        { "sticky z-20 border-b": r.frozen || r.frozen === "" },
+        { relative: e.resizable },
+        // Alignment
+        "text-left",
+        // Shape
+        { "first:border-l border-y border-r": e?.showGridlines },
+        "border-0 border-b border-solid",
+        // Spacing
+        e?.size === "small" ? "p-2" : e?.size === "large" ? "p-5" : "p-4",
+        // Color
+        (r.sortable === "" || r.sortable) && e.sorted ? "bg-primary-50 text-primary-700" : "bg-surface-50 text-surface-700",
+        (r.sortable === "" || r.sortable) && e.sorted ? "dark:text-white dark:bg-primary-400/30" : "dark:text-white/80 dark:bg-surface-800",
+        "border-surface-200 dark:border-surface-700 ",
+        // States
+        { "hover:bg-surface-100 dark:hover:bg-surface-400/30": (r.sortable === "" || r.sortable) && !e?.sorted },
+        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+        // Transition
+        { "transition duration-200": r.sortable === "" || r.sortable },
+        // Misc
+        { "cursor-pointer": r.sortable === "" || r.sortable },
+        {
+          "overflow-hidden space-nowrap border-y bg-clip-padding": e.resizable
+          // Resizable
+        }
+      ]
+    }),
+    headercontent: {
+      class: "flex items-center"
+    },
+    sort: ({ context: e }) => ({
+      class: [e.sorted ? "text-primary-500" : "text-surface-700", e.sorted ? "dark:text-primary-400" : "dark:text-white/80"]
+    }),
+    bodycell: ({ props: e, context: r, state: t, parent: a }) => ({
+      class: [
+        //Position
+        { "sticky box-border border-b": a.instance.frozenRow },
+        { "sticky box-border border-b": e.frozen || e.frozen === "" },
+        // Alignment
+        "text-left",
+        // Shape
+        "border-0 border-b border-solid",
+        { "first:border-l border-r border-b": r?.showGridlines },
+        { "bg-surface-0 dark:bg-surface-800": a.instance.frozenRow || e.frozen || e.frozen === "" },
+        // Spacing
+        { "p-2": r?.size === "small" && !t.d_editing },
+        { "p-5": r?.size === "large" && !t.d_editing },
+        { "p-4": r?.size !== "large" && r?.size !== "small" && !t.d_editing },
+        { "py-[0.6rem] px-2": t.d_editing },
+        // Color
+        "border-surface-200 dark:border-surface-700"
+      ]
+    }),
+    footercell: ({ context: e }) => ({
+      class: [
+        // Font
+        "font-bold",
+        // Alignment
+        "text-left",
+        // Shape
+        "border-0 border-b border-solid",
+        { "border-x border-y": e?.showGridlines },
+        // Spacing
+        e?.size === "small" ? "p-2" : e?.size === "large" ? "p-5" : "p-4",
+        // Color
+        "border-surface-200 dark:border-surface-700",
+        "text-surface-700 dark:text-white/80",
+        "bg-surface-50 dark:bg-surface-800"
+      ]
+    }),
+    sorticon: ({ context: e }) => ({
+      class: ["ml-2", e.sorted ? "text-primary-700 dark:text-white/80" : "text-surface-700 dark:text-white/70"]
+    }),
+    sortbadge: {
+      class: [
+        // Flex & Alignment
+        "flex items-center justify-center align-middle",
+        // Shape
+        "rounded-full",
+        // Size
+        "w-[1.143rem] leading-[1.143rem]",
+        // Spacing
+        "ml-2",
+        // Color
+        "text-primary-700 dark:text-white",
+        "bg-primary-50 dark:bg-primary-400/30"
+      ]
+    },
+    columnfilter: {
+      class: "inline-flex items-center ml-auto"
+    },
+    filteroverlay: {
+      class: [
+        // Position
+        "absolute top-0 left-0",
+        // Shape
+        "border-0 dark:border",
+        "rounded-md",
+        "shadow-md",
+        // Size
+        "min-w-[12.5rem]",
+        // Color
+        "bg-surface-0 dark:bg-surface-800",
+        "text-surface-800 dark:text-white/80",
+        "dark:border-surface-700"
+      ]
+    },
+    filtermatchmodedropdown: {
+      root: ({ state: e }) => ({
+        class: [
+          // Display and Position
+          "flex",
+          "relative",
+          // Spacing
+          "my-2",
+          // Shape
+          "w-full",
+          "rounded-md",
+          // Color and Background
+          "bg-surface-0 dark:bg-surface-900",
+          "border border-surface-300 dark:border-surface-700",
+          "text-surface-800 dark:text-white/80",
+          "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+          // Transitions
+          "transition-all",
+          "duration-200",
+          // States
+          "hover:border-primary-500 dark:hover:border-primary-300",
+          { "outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50": e.focused },
+          // Misc
+          "cursor-pointer",
+          "select-none"
+        ]
+      })
+    },
+    filterrowitems: {
+      class: "m-0 p-0 py-3 list-none"
+    },
+    filterrowitem: ({ context: e }) => ({
+      class: [
+        // Font
+        "font-normal",
+        "leading-none",
+        // Position
+        "relative",
+        // Shape
+        "border-0",
+        "rounded-none",
+        // Spacing
+        "m-0",
+        "py-3 px-5",
+        // Color
+        { "text-surface-700 dark:text-white/80": !e?.highlighted },
+        { "bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80": !e?.highlighted },
+        { "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80": e?.highlighted },
+        { "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80": e?.highlighted },
+        //States
+        { "hover:bg-surface-100 dark:hover:bg-surface-600/80": !e?.highlighted },
+        { "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80": !e?.highlighted },
+        "focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+        // Transitions
+        "transition-shadow",
+        "duration-200",
+        // Misc
+        "cursor-pointer",
+        "overflow-hidden",
+        "whitespace-nowrap"
+      ]
+    }),
+    filteroperator: {
+      class: [
+        // Spacing
+        "px-5 py-3",
+        // Shape
+        "border-b border-solid",
+        "rounded-t-md",
+        // Color
+        "text-surface-700 dark:text-white/80",
+        "border-surface-200 dark:border-surface-800",
+        "bg-surface-0 dark:bg-surface-700"
+      ]
+    },
+    filteroperatordropdown: {
+      root: ({ state: e }) => ({
+        class: [
+          // Display and Position
+          "inline-flex",
+          "relative",
+          // Shape
+          "w-full",
+          "rounded-md",
+          // Color and Background
+          "bg-surface-0 dark:bg-surface-900",
+          "border border-surface-300 dark:border-surface-700",
+          // Transitions
+          "transition-all",
+          "duration-200",
+          // States
+          "hover:border-primary-500 dark:hover:border-primary-300",
+          { "outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50": e.focused },
+          // Misc
+          "cursor-pointer",
+          "select-none"
+        ]
+      }),
+      input: ({ props: e }) => ({
+        class: [
+          //Font
+          "font-sans",
+          "leading-none",
+          // Display
+          "block",
+          "flex-auto",
+          // Color and Background
+          "bg-transparent",
+          "border-0",
+          { "text-surface-800 dark:text-white/80": e.modelValue, "text-surface-400 dark:text-surface-500": !e.modelValue },
+          "placeholder:text-surface-400 dark:placeholder:text-surface-500",
+          // Sizing and Spacing
+          "w-[1%]",
+          "p-3",
+          //Shape
+          "rounded-none",
+          // Transitions
+          "transition",
+          "duration-200",
+          // States
+          "focus:outline-none focus:shadow-none",
+          // Misc
+          "relative",
+          "cursor-pointer",
+          "overflow-hidden overflow-ellipsis",
+          "whitespace-nowrap",
+          "appearance-none"
+        ]
+      }),
+      trigger: {
+        class: [
+          // Flexbox
+          "flex items-center justify-center",
+          "shrink-0",
+          // Color and Background
+          "bg-transparent",
+          "text-surface-500",
+          // Size
+          "w-12",
+          // Shape
+          "rounded-tr-md",
+          "rounded-br-md"
+        ]
       },
-      // Spacing
-      "mx-2",
-      // Positioning
-      "top-1/2 mt-[-0.5rem] left-0",
-      {
-        "!absolute": o.props.showItemNavigators,
-        "!fixed": !o.props.showItemNavigators
+      panel: {
+        class: [
+          // Position
+          "absolute top-0 left-0",
+          // Shape
+          "border-0 dark:border",
+          "rounded-md",
+          "shadow-md",
+          // Color
+          "bg-surface-0 dark:bg-surface-800",
+          "text-surface-800 dark:text-white/80",
+          "dark:border-surface-700"
+        ]
       },
-      // Hover Effect
-      "hover:bg-surface-0/10 hover:text-white",
-      // Focus Effects
-      "focus:outline-none focus:outline-offset-0"
-    ]
-  }),
-  nextitembutton: ({ parent: o }) => ({
-    class: [
-      // Display & Flexbox
-      "inline-flex justify-center items-center overflow-hidden",
-      // Appearance
-      "bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md",
-      {
-        "opacity-0 group-hover:opacity-100": o.props.showItemNavigatorsOnHover
+      item: ({ context: e }) => ({
+        class: [
+          // Font
+          "font-normal",
+          "leading-none",
+          // Position
+          "relative",
+          // Shape
+          "border-0",
+          "rounded-none",
+          // Spacing
+          "m-0",
+          "py-3 px-5",
+          // Color
+          { "text-surface-700 dark:text-white/80": !e.focused && !e.selected },
+          { "bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80": e.focused && !e.selected },
+          { "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80": e.focused && e.selected },
+          { "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80": !e.focused && e.selected },
+          //States
+          { "hover:bg-surface-100 dark:hover:bg-surface-600/80": !e.focused && !e.selected },
+          { "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80": e.focused && !e.selected },
+          // Transitions
+          "transition-shadow",
+          "duration-200",
+          // Misc
+          "cursor-pointer",
+          "overflow-hidden",
+          "whitespace-nowrap"
+        ]
+      })
+    },
+    filterconstraint: {
+      class: [
+        // Spacing
+        "py-3 px-5",
+        // Shape
+        "border-b border-solid",
+        // Color
+        "border-surface-200 dark:border-surface-700"
+      ]
+    },
+    filteraddrule: {
+      class: "py-3 px-5"
+    },
+    filteraddrulebutton: {
+      root: {
+        class: [
+          "relative",
+          // Alignments
+          "items-center inline-flex text-center align-bottom justify-center",
+          // Sizes & Spacing
+          "text-sm py-2 px-3 w-full",
+          // Shape
+          "rounded-md",
+          "bg-transparent border-transparent",
+          "text-primary-500 dark:text-primary-400",
+          "hover:bg-primary-300/20",
+          // Transitions
+          "transition duration-200 ease-in-out",
+          // Misc
+          "cursor-pointer overflow-hidden select-none"
+        ]
       },
-      // Spacing
-      "mx-2",
-      // Positioning
-      "top-1/2 mt-[-0.5rem] right-0",
-      {
-        "!absolute": o.props.showItemNavigators,
-        "!fixed": !o.props.showItemNavigators
+      label: {
+        class: "flex-auto grow-0"
       },
-      // Hover Effect
-      "hover:bg-surface-0/10 hover:text-white",
-      // Focus Effects
-      "focus:outline-none focus:outline-offset-0"
+      icon: {
+        class: "mr-2"
+      }
+    },
+    filterremovebutton: {
+      root: {
+        class: [
+          "relative",
+          // Alignments
+          "items-center inline-flex text-center align-bottom justify-center",
+          // Sizes & Spacing
+          "text-sm py-2 px-3 w-full mt-2",
+          // Shape
+          "rounded-md",
+          "bg-transparent border-transparent",
+          "text-red-500 dark:text-red-400",
+          "hover:bg-red-300/20",
+          // Transitions
+          "transition duration-200 ease-in-out",
+          // Misc
+          "cursor-pointer overflow-hidden select-none"
+        ]
+      },
+      label: {
+        class: "flex-auto grow-0"
+      },
+      icon: {
+        class: "mr-2"
+      }
+    },
+    filterbuttonbar: {
+      class: [
+        // Flex & Alignment
+        "flex items-center justify-between",
+        // Space
+        "py-3 px-5"
+      ]
+    },
+    filterclearbutton: {
+      root: {
+        class: [
+          "relative",
+          // Alignments
+          "items-center inline-flex text-center align-bottom justify-center",
+          // Sizes & Spacing
+          "text-sm py-2 px-3",
+          // Shape
+          "rounded-md",
+          "text-primary-500 border border-primary-500",
+          "hover:bg-primary-300/20",
+          // Transitions
+          "transition duration-200 ease-in-out",
+          // Misc
+          "cursor-pointer overflow-hidden select-none"
+        ]
+      }
+    },
+    filterapplybutton: {
+      root: {
+        class: [
+          "relative",
+          // Alignments
+          "items-center inline-flex text-center align-bottom justify-center",
+          // Sizes & Spacing
+          "text-sm py-2 px-3",
+          // Shape
+          "rounded-md",
+          "text-white dark:text-surface-900",
+          "bg-primary-500 dark:bg-primary-400",
+          "hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300",
+          // Transitions
+          "transition duration-200 ease-in-out",
+          // Misc
+          "cursor-pointer overflow-hidden select-none"
+        ]
+      }
+    },
+    filtermenubutton: ({ context: e }) => ({
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        // Size
+        "w-8 h-8",
+        // Spacing
+        "ml-2",
+        // Shape
+        "rounded-full",
+        // Color
+        { "bg-primary-50 text-primary-700": e.active },
+        "dark:text-white/70 dark:hover:text-white/80 dark:bg-surface-800",
+        // States
+        "hover:text-surface-700 hover:bg-surface-300/20",
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        // Transition
+        "transition duration-200",
+        // Misc
+        "cursor-pointer no-underline overflow-hidden"
+      ]
+    }),
+    headerfilterclearbutton: ({ context: e }) => ({
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        "text-left",
+        // Shape
+        "border-none",
+        // Spacing
+        "m-0 p-0 ml-2",
+        // Color
+        "bg-transparent",
+        // Misc
+        "cursor-pointer no-underline overflow-hidden select-none",
+        {
+          invisible: !e.hidden
+        }
+      ]
+    }),
+    rowtoggler: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        "text-left",
+        // Spacing
+        "m-0 p-0",
+        // Size
+        "w-8 h-8",
+        // Shape
+        "border-0 rounded-full",
+        // Color
+        "text-surface-500 dark:text-white/70",
+        "bg-transparent",
+        "focus-visible:outline-none focus-visible:outline-offset-0",
+        "focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+        // Transition
+        "transition duration-200",
+        // Misc
+        "overflow-hidden",
+        "cursor-pointer select-none"
+      ]
+    },
+    columnresizer: {
+      class: [
+        "block",
+        // Position
+        "absolute top-0 right-0",
+        // Sizing
+        "w-2 h-full",
+        // Spacing
+        "m-0 p-0",
+        // Color
+        "border border-transparent",
+        // Misc
+        "cursor-col-resize"
+      ]
+    },
+    rowreordericon: {
+      class: "cursor-move"
+    },
+    roweditorinitbutton: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        "text-left",
+        // Size
+        "w-8 h-8",
+        // Shape
+        "border-0 rounded-full",
+        // Color
+        "text-surface-700 dark:text-white/70",
+        "border-transparent",
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        "hover:text-surface-700 hover:bg-surface-300/20",
+        // Transition
+        "transition duration-200",
+        // Misc
+        "overflow-hidden",
+        "cursor-pointer select-none"
+      ]
+    },
+    roweditorsavebutton: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        "text-left",
+        // Size
+        "w-8 h-8",
+        // Shape
+        "border-0 rounded-full",
+        // Color
+        "text-surface-700 dark:text-white/70",
+        "border-transparent",
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        "hover:text-surface-700 hover:bg-surface-300/20",
+        // Transition
+        "transition duration-200",
+        // Misc
+        "overflow-hidden",
+        "cursor-pointer select-none"
+      ]
+    },
+    roweditorcancelbutton: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex items-center justify-center",
+        "text-left",
+        // Size
+        "w-8 h-8",
+        // Shape
+        "border-0 rounded-full",
+        // Color
+        "text-surface-700 dark:text-white/70",
+        "border-transparent",
+        // States
+        "focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50",
+        "hover:text-surface-700 hover:bg-surface-300/20",
+        // Transition
+        "transition duration-200",
+        // Misc
+        "overflow-hidden",
+        "cursor-pointer select-none"
+      ]
+    },
+    radiobuttonwrapper: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex align-bottom",
+        // Size
+        "w-6 h-6",
+        // Misc
+        "cursor-pointer select-none"
+      ]
+    },
+    radiobutton: ({ context: e }) => ({
+      class: [
+        // Flexbox
+        "flex justify-center items-center",
+        // Size
+        "w-[1.571rem] h-[1.571rem]",
+        // Shape
+        "border-2 rounded-full",
+        // Color
+        { "text-surface-700 dark:text-white/80": !e.checked },
+        { "bg-surface-0 dark:bg-surface-900": !e.checked },
+        { "border-surface-300 dark:border-surface-700": !e.checked },
+        { "border-primary-500 dark:border-primary-400": e.checked },
+        { "bg-primary-500 dark:bg-primary-400": e.checked },
+        // States
+        { "hover:border-primary-500 dark:hover:border-primary-400": !e.disabled },
+        { "outline-none outline-offset-0 ring ring-primary-400/50 ring-inset dark:ring-primary-300/50": e.focused },
+        // Transition
+        "transition duration-200 ease-in-out",
+        // Misc
+        { "cursor-default opacity-60": e.disabled }
+      ]
+    }),
+    radiobuttonicon: ({ context: e }) => ({
+      class: [
+        "block",
+        // Shape
+        "rounded-full",
+        // Size
+        "w-3 h-3",
+        // Color
+        "bg-surface-0 dark:bg-surface-900",
+        // Transition
+        "transition duration-200 transform",
+        {
+          "backface-hidden scale-10 invisible": e.checked === !1,
+          "transform scale-100 visible": e.checked === !0
+        }
+      ]
+    }),
+    headercheckboxwrapper: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex align-bottom",
+        // Size
+        "w-6 h-6",
+        // Misc
+        "cursor-pointer select-none"
+      ]
+    },
+    headercheckbox: ({ context: e }) => ({
+      class: [
+        // Flex & Alignment
+        "flex items-center justify-center",
+        // Shape
+        "border-2 rounded-lg",
+        // Size
+        "w-6 h-6",
+        // Color
+        "text-surface-600",
+        {
+          "border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900": !e.checked,
+          "border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400": e.checked
+        },
+        // States
+        "focus:outline-none focus:outline-offset-0",
+        {
+          "ring ring-primary-400/50 dark:ring-primary-300/50": e.focused
+        },
+        // Transition
+        "transition-colors duration-200",
+        // Misc
+        { "cursor-default opacity-60": e.disabled }
+      ]
+    }),
+    headercheckboxicon: {
+      class: [
+        // Size
+        "w-4 h-4",
+        "text-base leading-none",
+        // Color
+        "text-white dark:text-surface-900",
+        // Transition
+        "transition-all duration-200"
+      ]
+    },
+    checkboxwrapper: {
+      class: [
+        "relative",
+        // Flex & Alignment
+        "inline-flex align-bottom",
+        // Size
+        "w-6 h-6",
+        // Misc
+        "cursor-pointer select-none"
+      ]
+    },
+    checkbox: ({ context: e }) => ({
+      class: [
+        // Flex & Alignment
+        "flex items-center justify-center",
+        // Shape
+        "border-2 rounded-lg",
+        // Size
+        "w-6 h-6",
+        // Color
+        "text-surface-600",
+        {
+          "border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900": !e.checked,
+          "border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400": e.checked
+        },
+        // States
+        "focus:outline-none focus:outline-offset-0",
+        {
+          "ring ring-primary-400/50 dark:ring-primary-300/50": e.focused
+        },
+        // Transition
+        "transition-colors duration-200",
+        // Misc
+        { "cursor-default opacity-60": e.disabled }
+      ]
+    }),
+    checkboxicon: {
+      class: [
+        // Size
+        "w-4 h-4",
+        "text-base leading-none",
+        // Color
+        "text-white dark:text-surface-900",
+        // Transition
+        "transition-all duration-200"
+      ]
+    },
+    transition: {
+      enterFromClass: "opacity-0 scale-y-[0.8]",
+      enterActiveClass: "transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]",
+      leaveActiveClass: "transition-opacity duration-100 ease-linear",
+      leaveToClass: "opacity-0"
+    }
+  },
+  bodyrow: ({ context: e, props: r }) => ({
+    class: [
+      // Color
+      "dark:text-white/80",
+      { "bg-primary-50 text-primary-600 dark:bg-primary-400/30": e.selected },
+      { "bg-surface-0 text-surface-600 dark:bg-surface-800": !e.selected },
+      { "font-bold bg-surface-0 dark:bg-surface-800": r.frozenRow },
+      { "odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-800 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-900/50": e.stripedRows },
+      // State
+      // { 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 ring-inset dark:focus:ring-primary-300/50': context.selectable },
+      { "hover:bg-surface-300/20 hover:text-surface-600": r.selectionMode && !e.selected },
+      // Transition
+      { "transition duration-200": r.selectionMode && !e.selected || r.rowHover },
+      // Misc
+      { "cursor-pointer": r.selectionMode }
     ]
   }),
-  caption: {
+  rowexpansion: {
+    class: "bg-surface-0 dark:bg-surface-800 text-surface-600 dark:text-white/80"
+  },
+  rowgroupheader: {
+    class: ["sticky z-20", "bg-surface-0 text-surface-600 dark:text-white/70", "dark:bg-surface-800"]
+  },
+  rowgroupfooter: {
+    class: ["sticky z-20", "bg-surface-0 text-surface-600 dark:text-white/70", "dark:bg-surface-800"]
+  },
+  rowgrouptoggler: {
     class: [
-      // Positioning
-      "absolute bottom-0 left-0 w-full",
-      // Appearance
-      "bg-black/50 text-white p-4"
+      "relative",
+      // Flex & Alignment
+      "inline-flex items-center justify-center",
+      "text-left",
+      // Spacing
+      "m-0 p-0",
+      // Size
+      "w-8 h-8",
+      // Shape
+      "border-0 rounded-full",
+      // Color
+      "text-surface-500 dark:text-white/70",
+      "bg-transparent",
+      "focus-visible:outline-none focus-visible:outline-offset-0",
+      "focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50",
+      // Transition
+      "transition duration-200",
+      // Misc
+      "overflow-hidden",
+      "cursor-pointer select-none"
     ]
   },
-  transition: {
-    enterFromClass: "opacity-0 scale-75",
-    enterActiveClass: "transition-all duration-150 ease-in-out",
-    leaveActiveClass: "transition-all duration-150 ease-in",
-    leaveToClass: "opacity-0 scale-75"
+  rowgrouptogglericon: {
+    class: "inline-block w-4 h-4"
+  },
+  resizehelper: {
+    class: "absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400"
   }
 };
 export {
-  i as default
+  o as default
 };