@rimelight/ui 0.0.29 → 0.0.31

package/src/themes/kbd.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const kbdTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: [
+      "inline-flex items-center justify-center font-sans font-medium select-none pointer-events-none rounded border border-border bg-muted",
+      "shadow-[0_1px_0px_0px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_0px_0px_rgba(255,255,255,0.05)]",
+      "text-muted-foreground"
+    ]
+  },
+  variants: {
+    size: {
+      sm: { root: "h-5 min-w-[20px] px-1 text-3xs" },
+      md: { root: "h-6 min-w-[24px] px-1.5 text-2xs" },
+      lg: { root: "h-7 min-w-[28px] px-2 text-xs" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})
+
+export default kbdTheme

package/src/themes/label.theme.ts

@@ -0,0 +1,20 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const labelTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  },
+  variants: {
+    size: {
+      sm: { root: "text-xs" },
+      md: { root: "text-sm" },
+      lg: { root: "text-base" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})
+
+export default labelTheme

package/src/themes/localeSelector.theme.ts

@@ -0,0 +1,50 @@
+import { defineTheme } from "../utils/defineTheme"
+export default defineTheme({
+    slots: [
+        "root",
+        "label",
+        "wrapper",
+        "select",
+        "option",
+        "iconWrapper"
+    ],
+    base: {
+        root: "inline-flex flex-col gap-1.5",
+        label: "text-xs font-semibold text-muted select-none",
+        wrapper: "relative inline-block w-full",
+        select: "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
+        option: "bg-neutral-900 text-white selection:bg-neutral-800",
+        iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
+    },
+    variants: {
+        variant: {
+            default: {
+                select: "bg-gray-100 text-gray-800 hover:bg-gray-200 border border-transparent"
+            },
+            outline: {
+                select: "bg-transparent border border-neutral-800 text-white hover:bg-neutral-900 hover:border-neutral-700"
+            },
+            ghost: {
+                select: "bg-transparent border border-transparent text-white hover:bg-neutral-900"
+            }
+        },
+        size: {
+            sm: {
+                label: "text-xxs",
+                select: "text-xs px-3 py-1.5 pr-8"
+            },
+            md: {
+                label: "text-xs",
+                select: "text-sm px-4 py-2 pr-9"
+            },
+            lg: {
+                label: "text-sm",
+                select: "text-base px-5 py-2.5 pr-10"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md"
+    }
+})

package/src/themes/main.theme.ts

@@ -0,0 +1,12 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+    slots: [
+        "root"
+    ],
+    base: {
+        root: "min-h-[calc(100vh-var(--ui-header-height))]"
+    },
+    variants: {},
+    defaultVariants: {}
+})

package/src/themes/marquee.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const marqueeTheme = defineTheme({
+  slots: ["root", "track"],
+  base: {
+    root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
+    track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
+  },
+  variants: {
+    direction: {
+      left: { track: "flex-row animate-marquee-left" },
+      right: { track: "flex-row animate-marquee-right" },
+      up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
+      down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
+    },
+    pauseOnHover: {
+      true: { track: "hover:[animation-play-state:paused]" },
+      false: { track: "" }
+    }
+  },
+  defaultVariants: {
+    direction: "left",
+    pauseOnHover: true
+  }
+})
+
+export default marqueeTheme

package/src/themes/nativeSelect.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createNativeSelectTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "select", "icon"],
+    base: {
+      root: "relative w-full flex flex-col gap-1.5",
+      label: "text-sm font-medium text-foreground",
+      select: "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 appearance-none pr-10",
+      icon: "pointer-events-none absolute right-3 top-[calc(50%+4px)] size-4 text-muted-foreground transform -translate-y-1/2"
+    },
+    variants: {
+      size: {
+        sm: { select: "h-8 text-xs px-2 pr-8" },
+        md: { select: "h-9 text-sm px-3 pr-10" },
+        lg: { select: "h-10 text-base px-4 pr-12" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createNativeSelectTheme()

package/src/themes/navigationMenu.theme.ts

@@ -0,0 +1,19 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createNavigationMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "trigger", "content", "viewport"],
+    base: {
+      root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      list: "group flex flex-1 list-none items-center justify-center space-x-1",
+      item: "relative",
+      link: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+      trigger: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
+      content: "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
+      viewport: "absolute left-0 top-full flex justify-center w-full"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createNavigationMenuTheme()

package/src/themes/pagination.theme.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const paginationTheme = defineTheme({
+  slots: ["root", "list", "item", "link", "ellipsis"],
+  base: {
+    root: "mx-auto flex w-full justify-center",
+    list: "flex flex-row items-center gap-1",
+    item: "",
+    link: [
+      "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all size-9 cursor-pointer border border-border bg-background hover:bg-muted text-foreground decoration-none",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+    ],
+    ellipsis: "flex size-9 items-center justify-center text-muted-foreground"
+  },
+  variants: {
+    active: {
+      true: { link: "border-primary bg-primary text-primary-foreground hover:bg-primary/95" },
+      false: { link: "" }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+})
+
+export default paginationTheme

package/src/themes/popover.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const popoverTheme = defineTheme({
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/popover",
+    trigger: "",
+    content: [
+      "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "transition-all duration-200 invisible opacity-0 scale-95 origin-center",
+      "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:scale-100",
+      "focus-within:visible focus-within:opacity-100 focus-within:scale-100"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+})
+
+export default popoverTheme

package/src/themes/progress.theme.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createProgressTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "indicator"],
+    base: {
+      root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
+      indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
+    },
+    variants: {
+      color: Object.fromEntries(colors.map((color) => [color, { indicator: `bg-${color}-500` }])),
+      size: {
+        sm: { root: "h-1.5" },
+        md: { root: "h-3" },
+        lg: { root: "h-5" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  })
+
+export default createProgressTheme()

package/src/themes/resizable.theme.ts

@@ -0,0 +1,22 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createResizableTheme = () =>
+  defineTheme({
+    slots: ["root", "panel", "handle"],
+    base: {
+      root: "flex w-full h-full",
+      panel: "overflow-auto transition-all",
+      handle: "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+    },
+    variants: {
+      direction: {
+        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
+        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
+      }
+    },
+    defaultVariants: {
+      direction: "horizontal"
+    }
+  })
+
+export default createResizableTheme()

package/src/themes/scrollArea.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createScrollAreaTheme = () =>
+  defineTheme({
+    slots: ["root", "viewport", "scrollbar", "thumb"],
+    base: {
+      root: "relative overflow-hidden w-full",
+      viewport: "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+      scrollbar: "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
+      thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
+    },
+    variants: {
+      orientation: {
+        vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
+        horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
+        both: { scrollbar: "" }
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  })
+
+export default createScrollAreaTheme()

package/src/themes/section.theme.ts

@@ -181,7 +181,6 @@ export default defineTheme({
   ],
   defaultVariants: {
     variant: "default",
-    orientation: "vertical",
-    ctaVariant: "solid"
+    orientation: "vertical"
   }
 })

package/src/themes/select.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSelectTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "trigger", "content", "item", "itemText", "itemIcon"],
+    base: {
+      root: "relative w-full flex flex-col gap-1.5",
+      label: "text-sm font-medium text-foreground",
+      trigger: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      content: "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
+      item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      itemText: "truncate",
+      itemIcon: "ml-auto size-4"
+    },
+    variants: {
+      size: {
+        sm: { trigger: "h-8 px-2 text-xs", item: "py-1 px-1.5 text-xs" },
+        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
+        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createSelectTheme()

package/src/themes/separator.theme.ts

@@ -0,0 +1,19 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const separatorTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "shrink-0 bg-border"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "h-[1px] w-full" },
+      vertical: { root: "h-full w-[1px]" }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+})
+
+export default separatorTheme

package/src/themes/sheet.theme.ts

@@ -0,0 +1,43 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const sheetTheme = defineTheme({
+  slots: ["root", "trigger", "backdrop", "content", "header", "title", "description", "footer", "closeButton"],
+  base: {
+    root: "relative inline-block",
+    trigger: "",
+    backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+    content: [
+      "fixed z-50 bg-background p-6 shadow-xl border-border transition-all duration-300 outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out"
+    ],
+    header: "flex flex-col gap-1.5 mb-4",
+    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+    description: "text-sm text-muted-foreground leading-relaxed",
+    footer: "flex flex-col sm:flex-row sm:justify-end gap-2 mt-6",
+    closeButton: [
+      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+    ]
+  },
+  variants: {
+    side: {
+      top: {
+        content: "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+      },
+      left: {
+        content: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
+      },
+      right: {
+        content: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+      }
+    }
+  },
+  defaultVariants: {
+    side: "right"
+  }
+})
+
+export default sheetTheme

package/src/themes/sidebar.theme.ts

@@ -0,0 +1,33 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSidebarTheme = () =>
+  defineTheme({
+    slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
+    base: {
+      root: "flex flex-col h-full w-64 bg-background border-r border-border shadow-sm transition-all duration-300",
+      header: "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
+      content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
+      footer: "p-4 border-t border-border flex items-center justify-between",
+      item: "relative",
+      itemLink: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
+      itemIcon: "size-4 text-current",
+      itemBadge: "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
+    },
+    variants: {
+      side: {
+        left: { root: "left-0 border-r" },
+        right: { root: "right-0 border-l" }
+      },
+      collapsible: {
+        icon: { root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden" },
+        offcanvas: { root: "-translate-x-full" },
+        none: {}
+      }
+    },
+    defaultVariants: {
+      side: "left",
+      collapsible: "none"
+    }
+  })
+
+export default createSidebarTheme()

package/src/themes/skeleton.theme.ts

@@ -0,0 +1,20 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const skeletonTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "animate-pulse bg-muted shrink-0"
+  },
+  variants: {
+    shape: {
+      circle: { root: "rounded-full" },
+      rectangle: { root: "rounded-none" },
+      rounded: { root: "rounded-md" }
+    }
+  },
+  defaultVariants: {
+    shape: "rounded"
+  }
+})
+
+export default skeletonTheme

package/src/themes/slider.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createSliderTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "track", "range", "thumb"],
+    base: {
+      root: "relative flex w-full touch-none select-none items-center",
+      track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
+      range: "absolute h-full",
+      thumb: "block size-4.5 rounded-full border border-border bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
+    },
+    variants: {
+      color: Object.fromEntries(colors.map((color) => [
+        color,
+        {
+          range: `bg-${color}-500`,
+          thumb: `focus-visible:ring-${color}-500/50 hover:border-${color}-500`
+        }
+      ]))
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createSliderTheme()

package/src/themes/spinner.theme.ts

@@ -0,0 +1,30 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createSpinnerTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
+    },
+    variants: {
+      size: {
+        xs: { root: "size-3" },
+        sm: { root: "size-4" },
+        md: { root: "size-6" },
+        lg: { root: "size-8" },
+        xl: { root: "size-10" }
+      },
+      color: Object.fromEntries([
+        ["current", { root: "text-current" }],
+        ...colors.map((color) => [color, { root: `text-${color}-500` }])
+      ])
+    },
+    defaultVariants: {
+      size: "md",
+      color: "current"
+    }
+  })
+
+export default createSpinnerTheme()

package/src/themes/stickySurface.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const stickySurfaceTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "sticky top-0 self-start transition-all duration-300"
+  }
+})
+
+export default stickySurfaceTheme

package/src/themes/switch.theme.ts

@@ -0,0 +1,59 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createSwitchTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input", "track", "thumb", "label"],
+    base: {
+      root: "inline-flex items-center gap-2 cursor-pointer select-none",
+      input: "absolute opacity-0 size-0 pointer-events-none peer",
+      track: [
+        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      thumb: "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(colors.map((color) => [
+        color,
+        {
+          track: `peer-checked:bg-${color}-500 focus-within:ring-${color}-500/50`
+        }
+      ])),
+      size: {
+        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
+        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
+        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
+      },
+      checked: {
+        true: { thumb: "translate-x-full" },
+        false: { thumb: "translate-x-0" }
+      }
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        checked: true,
+        classNames: { thumb: "translate-x-3" }
+      },
+      {
+        size: "md",
+        checked: true,
+        classNames: { thumb: "translate-x-4" }
+      },
+      {
+        size: "lg",
+        checked: true,
+        classNames: { thumb: "translate-x-5" }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createSwitchTheme()

package/src/themes/table.theme.ts

@@ -0,0 +1,36 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTableTheme = () =>
+  defineTheme({
+    slots: ["root", "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption"],
+    base: {
+      root: "relative w-full overflow-auto rounded-lg border border-border shadow-sm",
+      table: "w-full text-sm text-left border-collapse",
+      thead: "bg-muted/50 border-b border-border",
+      tbody: "divide-y divide-border",
+      tfoot: "bg-muted/30 border-t border-border font-medium",
+      tr: "transition-colors hover:bg-muted/30",
+      th: "p-4 text-xs font-semibold uppercase text-muted-foreground",
+      td: "p-4 text-foreground align-middle",
+      caption: "p-4 text-xs text-muted-foreground text-center"
+    },
+    variants: {
+      striped: {
+        true: { tr: "odd:bg-background even:bg-muted/20 hover:bg-muted/35" }
+      },
+      bordered: {
+        true: {
+          root: "border-2 border-border",
+          tr: "border-b border-border",
+          th: "border-r border-border last:border-r-0",
+          td: "border-r border-border last:border-r-0"
+        }
+      }
+    },
+    defaultVariants: {
+      striped: false,
+      bordered: false
+    }
+  })
+
+export default createTableTheme()