@fy-/fws-vue 0.3.0 → 0.3.1

package/presets/Lara/datatable/index.js

@@ -1,1289 +0,0 @@
-export default {
-  root: ({ props }) => ({
-    class: [
-      "relative",
-
-      // Flex & Alignment
-      { "flex flex-col": props.scrollable && props.scrollHeight === "flex" },
-
-      // Size
-      { "h-full": props.scrollable && props.scrollHeight === "flex" },
-    ],
-  }),
-  loadingoverlay: {
-    class: [
-      // Position
-      "absolute",
-      "top-0 left-0",
-      "z-20",
-
-      // Flex & Alignment
-      "flex items-center justify-center",
-
-      // Size
-      "w-full h-full",
-
-      // Color
-      "bg-surface-100/40 dark:bg-surface-800/40",
-
-      // Transition
-      "transition duration-200",
-    ],
-  },
-  loadingicon: {
-    class: "w-8 h-8 animate-spin",
-  },
-  wrapper: ({ props }) => ({
-    class: [
-      {
-        relative: props.scrollable,
-        "flex flex-col grow": props.scrollable && props.scrollHeight === "flex",
-      },
-
-      // Size
-      { "h-full": props.scrollable && props.scrollHeight === "flex" },
-    ],
-  }),
-  header: ({ props }) => ({
-    class: [
-      "font-bold",
-
-      // Shape
-      props.showGridlines
-        ? "border-x border-t border-b-0"
-        : "border-y border-x-0",
-
-      // Spacing
-      "p-4",
-
-      // Color
-      "bg-surface-50 dark:bg-surface-800",
-      "border-surface-200 dark:border-surface-700",
-      "text-surface-700 dark:text-white/80",
-    ],
-  }),
-  table: {
-    class: "w-full border-spacing-0 border-separate",
-  },
-  thead: ({ context }) => ({
-    class: [
-      {
-        "bg-surface-50 top-0 z-40 sticky": context.scrollable,
-      },
-    ],
-  }),
-  tbody: ({ instance, context }) => ({
-    class: [
-      {
-        "sticky z-20": instance.frozenRow && context.scrollable,
-      },
-    ],
-  }),
-  tfoot: ({ context }) => ({
-    class: [
-      {
-        "bg-surface-50 bottom-0 z-0": context.scrollable,
-      },
-    ],
-  }),
-  footer: {
-    class: [
-      "font-bold",
-
-      // Shape
-      "border-t-0 border-b border-x-0",
-
-      // Spacing
-      "p-4",
-
-      // Color
-      "bg-surface-50 dark:bg-surface-800",
-      "border-surface-200 dark:border-surface-700",
-      "text-surface-700 dark:text-white/80",
-    ],
-  },
-  column: {
-    headercell: ({ context, props }) => ({
-      class: [
-        "font-bold",
-
-        // Position
-        { "sticky z-20 border-b": props.frozen || props.frozen === "" },
-
-        { relative: context.resizable },
-
-        // Alignment
-        "text-left",
-
-        // Shape
-        { "first:border-l border-y border-r": context?.showGridlines },
-        "border-0 border-b border-solid",
-
-        // Spacing
-        context?.size === "small"
-          ? "p-2"
-          : context?.size === "large"
-            ? "p-5"
-            : "p-4",
-
-        // Color
-        (props.sortable === "" || props.sortable) && context.sorted
-          ? "bg-primary-50 text-primary-700"
-          : "bg-surface-50 text-surface-700",
-        (props.sortable === "" || props.sortable) && context.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":
-            (props.sortable === "" || props.sortable) && !context?.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": props.sortable === "" || props.sortable },
-
-        // Misc
-        { "cursor-pointer": props.sortable === "" || props.sortable },
-        {
-          "overflow-hidden space-nowrap border-y bg-clip-padding":
-            context.resizable, // Resizable
-        },
-      ],
-    }),
-    headercontent: {
-      class: "flex items-center",
-    },
-    sort: ({ context }) => ({
-      class: [
-        context.sorted ? "text-primary-500" : "text-surface-700",
-        context.sorted ? "dark:text-primary-400" : "dark:text-white/80",
-      ],
-    }),
-    bodycell: ({ props, context, state, parent }) => ({
-      class: [
-        // Position
-        { "sticky box-border border-b": parent.instance.frozenRow },
-        { "sticky box-border border-b": props.frozen || props.frozen === "" },
-
-        // Alignment
-        "text-left",
-
-        // Shape
-        "border-0 border-b border-solid",
-        { "first:border-l border-r border-b": context?.showGridlines },
-        {
-          "bg-surface-0 dark:bg-surface-800":
-            parent.instance.frozenRow || props.frozen || props.frozen === "",
-        },
-
-        // Spacing
-        { "p-2": context?.size === "small" && !state.d_editing },
-        { "p-5": context?.size === "large" && !state.d_editing },
-        {
-          "p-4":
-            context?.size !== "large" &&
-            context?.size !== "small" &&
-            !state.d_editing,
-        },
-        { "py-[0.6rem] px-2": state.d_editing },
-
-        // Color
-        "border-surface-200 dark:border-surface-700",
-      ],
-    }),
-    footercell: ({ context }) => ({
-      class: [
-        // Font
-        "font-bold",
-
-        // Alignment
-        "text-left",
-
-        // Shape
-        "border-0 border-b border-solid",
-        { "border-x border-y": context?.showGridlines },
-
-        // Spacing
-        context?.size === "small"
-          ? "p-2"
-          : context?.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 }) => ({
-      class: [
-        "ml-2",
-        context.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 }) => ({
-        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":
-              state.focused,
-          },
-
-          // Misc
-          "cursor-pointer",
-          "select-none",
-        ],
-      }),
-    },
-    filterrowitems: {
-      class: "m-0 p-0 py-3 list-none",
-    },
-    filterrowitem: ({ context }) => ({
-      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": !context?.highlighted },
-        {
-          "bg-surface-0 dark:bg-surface-800 text-surface-700 dark:text-white/80":
-            !context?.highlighted,
-        },
-        {
-          "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-            context?.highlighted,
-        },
-        {
-          "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-            context?.highlighted,
-        },
-
-        // States
-        {
-          "hover:bg-surface-100 dark:hover:bg-surface-600/80":
-            !context?.highlighted,
-        },
-        {
-          "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80":
-            !context?.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 }) => ({
-        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":
-              state.focused,
-          },
-
-          // Misc
-          "cursor-pointer",
-          "select-none",
-        ],
-      }),
-      input: ({ props }) => ({
-        class: [
-          // Font
-          "font-sans",
-          "leading-none",
-
-          // Display
-          "block",
-          "flex-auto",
-
-          // Color and Background
-          "bg-transparent",
-          "border-0",
-          {
-            "text-surface-800 dark:text-white/80": props.modelValue,
-            "text-surface-400 dark:text-surface-500": !props.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",
-        ],
-      },
-      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",
-        ],
-      },
-      item: ({ context }) => ({
-        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":
-              !context.focused && !context.selected,
-          },
-          {
-            "bg-surface-50 dark:bg-surface-600/60 text-surface-700 dark:text-white/80":
-              context.focused && !context.selected,
-          },
-          {
-            "bg-primary-100 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-              context.focused && context.selected,
-          },
-          {
-            "bg-primary-50 dark:bg-primary-400/40 text-primary-700 dark:text-white/80":
-              !context.focused && context.selected,
-          },
-
-          // States
-          {
-            "hover:bg-surface-100 dark:hover:bg-surface-600/80":
-              !context.focused && !context.selected,
-          },
-          {
-            "hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-surface-600/80":
-              context.focused && !context.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",
-        ],
-      },
-      label: {
-        class: "flex-auto grow-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 }) => ({
-      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": context.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 }) => ({
-      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: !context.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",
-      ],
-    },
-    rowRadiobutton: {
-      root: {
-        class: [
-          "relative",
-
-          // Flexbox & Alignment
-          "inline-flex",
-          "align-bottom",
-
-          // Size
-          "w-[1.571rem] h-[1.571rem]",
-
-          // Misc
-          "cursor-pointer",
-          "select-none",
-        ],
-      },
-      box: ({ props }) => ({
-        class: [
-          // Flexbox
-          "flex justify-center items-center",
-
-          // Size
-          "w-[1.571rem] h-[1.571rem]",
-
-          // Shape
-          "border-2",
-          "rounded-full",
-
-          // Transition
-          "transition duration-200 ease-in-out",
-
-          // Colors
-          {
-            "text-surface-700 dark:text-white/80": !props.modelValue,
-            "bg-surface-0 dark:bg-surface-900": !props.modelValue,
-            "border-surface-300 dark:border-surface-700": !props.modelValue,
-            "border-primary-500 dark:border-primary-400": props.modelValue,
-            "bg-primary-500 dark:bg-primary-400": props.modelValue,
-          },
-
-          // States
-          {
-            "peer-hover:border-primary-500 dark:peer-hover:border-primary-400":
-              !props.disabled,
-            "peer-hover:border-primary-600 dark:peer-hover:border-primary-300 peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300":
-              !props.disabled && props.modelValue,
-            "peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20":
-              !props.disabled,
-            "opacity-60 cursor-default": props.disabled,
-          },
-        ],
-      }),
-      input: {
-        class: [
-          "peer",
-
-          // Size
-          "w-full ",
-          "h-full",
-
-          // Position
-          "absolute",
-          "top-0 left-0",
-          "z-10",
-
-          // Spacing
-          "p-0",
-          "m-0",
-
-          // Shape
-          "opacity-0",
-          "rounded-md",
-          "outline-none",
-          "border-2 border-surface-200 dark:border-surface-700",
-
-          // Misc
-          "appearance-none",
-          "cursor-pointer",
-        ],
-      },
-      icon: ({ props }) => ({
-        class: [
-          "block",
-
-          // Shape
-          "rounded-full",
-
-          // Size
-          "w-[0.857rem] h-[0.857rem]",
-
-          // Colors
-          "bg-surface-0 dark:bg-surface-900",
-
-          // Conditions
-          {
-            "backface-hidden scale-10 invisible": !props.modelValue,
-            "transform visible scale-[1.1]": props.modelValue,
-          },
-
-          // Transition
-          "transition duration-200",
-        ],
-      }),
-    },
-    headercheckbox: {
-      root: {
-        class: [
-          "relative",
-
-          // Alignment
-          "inline-flex",
-          "align-bottom",
-
-          // Size
-          "w-6",
-          "h-6",
-
-          // Misc
-          "cursor-pointer",
-          "select-none",
-        ],
-      },
-      box: ({ props, context }) => ({
-        class: [
-          // Alignment
-          "flex",
-          "items-center",
-          "justify-center",
-
-          // Size
-          "w-6",
-          "h-6",
-
-          // Shape
-          "rounded-md",
-          "border-2",
-
-          // Colors
-          {
-            "border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900":
-              !context.checked,
-            "border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400":
-              context.checked,
-          },
-
-          // States
-          {
-            "peer-hover:border-primary-500 dark:peer-hover:border-primary-400":
-              !props.disabled && !context.checked,
-            "peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300":
-              !props.disabled && context.checked,
-            "peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20":
-              !props.disabled,
-            "cursor-default opacity-60": props.disabled,
-          },
-
-          // Transitions
-          "transition-colors",
-          "duration-200",
-        ],
-      }),
-      input: {
-        class: [
-          "peer",
-
-          // Size
-          "w-full ",
-          "h-full",
-
-          // Position
-          "absolute",
-          "top-0 left-0",
-          "z-10",
-
-          // Spacing
-          "p-0",
-          "m-0",
-
-          // Shape
-          "opacity-0",
-          "rounded-md",
-          "outline-none",
-          "border-2 border-surface-200 dark:border-surface-700",
-
-          // Misc
-          "appearance-none",
-          "cursor-pointer",
-        ],
-      },
-      icon: {
-        class: [
-          // Font
-          "text-base leading-none",
-
-          // Size
-          "w-4",
-          "h-4",
-
-          // Colors
-          "text-white dark:text-surface-900",
-
-          // Transitions
-          "transition-all",
-          "duration-200",
-        ],
-      },
-    },
-    rowCheckbox: {
-      root: {
-        class: [
-          "relative",
-
-          // Alignment
-          "inline-flex",
-          "align-bottom",
-
-          // Size
-          "w-6",
-          "h-6",
-
-          // Misc
-          "cursor-pointer",
-          "select-none",
-        ],
-      },
-      box: ({ props, context }) => ({
-        class: [
-          // Alignment
-          "flex",
-          "items-center",
-          "justify-center",
-
-          // Size
-          "w-6",
-          "h-6",
-
-          // Shape
-          "rounded-md",
-          "border-2",
-
-          // Colors
-          {
-            "border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900":
-              !context.checked,
-            "border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400":
-              context.checked,
-          },
-
-          // States
-          {
-            "peer-hover:border-primary-500 dark:peer-hover:border-primary-400":
-              !props.disabled && !context.checked,
-            "peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300":
-              !props.disabled && context.checked,
-            "peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20":
-              !props.disabled,
-            "cursor-default opacity-60": props.disabled,
-          },
-
-          // Transitions
-          "transition-colors",
-          "duration-200",
-        ],
-      }),
-      input: {
-        class: [
-          "peer",
-
-          // Size
-          "w-full ",
-          "h-full",
-
-          // Position
-          "absolute",
-          "top-0 left-0",
-          "z-10",
-
-          // Spacing
-          "p-0",
-          "m-0",
-
-          // Shape
-          "opacity-0",
-          "rounded-md",
-          "outline-none",
-          "border-2 border-surface-200 dark:border-surface-700",
-
-          // Misc
-          "appearance-none",
-          "cursor-pointer",
-        ],
-      },
-      icon: {
-        class: [
-          // Font
-          "text-base leading-none",
-
-          // Size
-          "w-4",
-          "h-4",
-
-          // Colors
-          "text-white dark:text-surface-900",
-
-          // Transitions
-          "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, props }) => ({
-    class: [
-      // Color
-      "dark:text-white/80",
-      {
-        "bg-primary-50 text-primary-700 dark:bg-primary-400/30":
-          context.selected,
-      },
-      {
-        "bg-surface-0 text-surface-600 dark:bg-surface-800": !context.selected,
-      },
-      { "font-bold bg-surface-0 dark:bg-surface-800": props.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":
-          context.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":
-          props.selectionMode && !context.selected,
-      },
-
-      // Transition
-      {
-        "transition duration-200":
-          (props.selectionMode && !context.selected) || props.rowHover,
-      },
-
-      // Misc
-      { "cursor-pointer": props.selectionMode },
-    ],
-  }),
-  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: [
-      "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",
-    ],
-  },
-  rowgrouptogglericon: {
-    class: "inline-block w-4 h-4",
-  },
-  resizehelper: {
-    class: "absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400",
-  },
-};