@rimelight/ui 0.0.30 → 0.0.31

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()

package/src/themes/tabs.theme.ts

@@ -0,0 +1,44 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTabsTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "trigger", "content"],
+    base: {
+      root: "w-full flex flex-col gap-4",
+      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
+      trigger: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
+      content: "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    },
+    variants: {
+      variant: {
+        solid: {
+          list: "bg-muted p-1 rounded-lg",
+          trigger: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        },
+        underline: {
+          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
+          trigger: "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+        },
+        pills: {
+          list: "bg-transparent p-0 gap-2",
+          trigger: "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+        }
+      },
+      orientation: {
+        horizontal: { root: "flex-col", list: "w-full" },
+        vertical: { root: "flex-row gap-6", list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent" }
+      },
+      size: {
+        sm: { trigger: "text-xs px-2.5 py-1" },
+        md: { trigger: "text-sm px-3.5 py-1.5" },
+        lg: { trigger: "text-base px-4.5 py-2" }
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      orientation: "horizontal",
+      size: "md"
+    }
+  })
+
+export default createTabsTheme()

package/src/themes/textarea.theme.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTextareaTheme = () =>
+  defineTheme({
+    slots: ["root", "textarea"],
+    base: {
+      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      textarea: "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+    },
+    variants: {
+      size: {
+        sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
+        md: { textarea: "py-2 text-sm min-h-[80px]" },
+        lg: { textarea: "py-2.5 text-base min-h-[100px]" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  })
+
+export default createTextareaTheme()

package/src/themes/themeSelector.theme.ts

@@ -0,0 +1,16 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+    slots: [
+        "root",
+        "sun",
+        "moon"
+    ],
+    base: {
+        root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
+        sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
+        moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
+    },
+    variants: {},
+    defaultVariants: {}
+})

package/src/themes/toast.theme.ts

@@ -0,0 +1,25 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createToastTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "description", "action", "close"],
+    base: {
+      root: "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
+      title: "text-sm font-semibold",
+      description: "text-xs opacity-90",
+      action: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      close: "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+    },
+    variants: {
+      variant: {
+        default: { root: "bg-background border-border" },
+        destructive: { root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400" },
+        success: { root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400" }
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  })
+
+export default createToastTheme()

package/src/themes/toggle.theme.ts

@@ -0,0 +1,42 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createToggleTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: [
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all duration-150 border border-transparent bg-transparent hover:bg-muted text-foreground cursor-pointer select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      ]
+    },
+    variants: {
+      size: {
+        sm: { root: "h-8 px-2 text-xs" },
+        md: { root: "h-9 px-3 text-sm" },
+        lg: { root: "h-10 px-4 text-base" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      active: {
+        true: { root: "bg-muted text-foreground border-border" },
+        false: { root: "" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        active: true as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500/10 text-${color}-600 border-${color}-500/20 hover:bg-${color}-500/20`
+        }
+      }))
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      active: false
+    }
+  })
+
+export default createToggleTheme()

package/src/themes/toggleGroup.theme.ts

@@ -0,0 +1,21 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createToggleGroupTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center justify-center gap-1 rounded-md border border-border bg-muted p-1"
+    },
+    variants: {
+      size: {
+        sm: { root: "h-8 gap-0.5" },
+        md: { root: "h-9 gap-1" },
+        lg: { root: "h-10 gap-1.5" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createToggleGroupTheme()

package/src/themes/tooltip.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const tooltipTheme = defineTheme({
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/tooltip",
+    trigger: "",
+    content: [
+      "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+      "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
+    ]
+  },
+  variants: {
+    placement: {
+      top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
+      bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
+      left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
+      right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
+    }
+  },
+  defaultVariants: {
+    placement: "top"
+  }
+})
+
+export default tooltipTheme