@rimelight/ui 0.0.30 → 0.0.31

package/src/themes/breadcrumb.theme.ts

@@ -0,0 +1,15 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const breadcrumbTheme = defineTheme({
+  slots: ["root", "list", "item", "link", "separator", "page"],
+  base: {
+    root: "aria-label='breadcrumb'",
+    list: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    item: "flex items-center gap-1.5",
+    link: "transition-colors hover:text-foreground cursor-pointer decoration-none text-current",
+    separator: "flex size-3.5 items-center justify-center [&_svg]:size-3.5 opacity-60",
+    page: "font-normal text-foreground"
+  }
+})
+
+export default breadcrumbTheme

package/src/themes/card.theme.ts

@@ -0,0 +1,34 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const cardTheme = defineTheme({
+  slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
+  base: {
+    root: [
+      "rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden flex flex-col transition-all duration-300",
+      "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
+    ],
+    media: "relative w-full aspect-video overflow-hidden shrink-0 bg-muted",
+    header: "flex flex-col gap-1.5 p-6 shrink-0",
+    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+    description: "text-sm text-muted-foreground leading-relaxed",
+    content: "p-6 pt-0 flex-1 leading-relaxed text-sm",
+    footer: "flex items-center p-6 pt-0 mt-auto shrink-0",
+    overlay: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-6 flex flex-col justify-end text-white"
+  },
+  variants: {
+    interactive: {
+      true: { root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30" },
+      false: { root: "" }
+    },
+    overlay: {
+      true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
+      false: { root: "" }
+    }
+  },
+  defaultVariants: {
+    interactive: false,
+    overlay: false
+  }
+})
+
+export default cardTheme

package/src/themes/carousel.theme.ts

@@ -0,0 +1,32 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const carouselTheme = defineTheme({
+  slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
+  base: {
+    root: "relative w-full overflow-hidden select-none group/carousel",
+    viewport: "w-full overflow-hidden cursor-grab active:cursor-grabbing",
+    container: "flex backface-hidden",
+    slide: "min-w-0 shrink-0 grow-0 basis-full pl-4 relative",
+    buttonPrev: [
+      "absolute left-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    buttonNext: [
+      "absolute right-4 top-1/2 -translate-y-1/2 z-10 flex size-9 items-center justify-center rounded-full border border-border bg-background/80 backdrop-blur-sm text-foreground shadow transition-all hover:bg-background cursor-pointer",
+      "opacity-0 scale-90 group-hover/carousel:opacity-100 group-hover/carousel:scale-100"
+    ],
+    dots: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 items-center",
+    dot: "block size-2 rounded-full bg-foreground/20 cursor-pointer transition-all duration-350 hover:bg-foreground/45"
+  },
+  variants: {
+    active: {
+      true: { dot: "bg-foreground size-2.5" },
+      false: { dot: "" }
+    }
+  },
+  defaultVariants: {
+    active: false
+  }
+})
+
+export default carouselTheme

package/src/themes/chart.theme.ts

@@ -0,0 +1,21 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChartTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "container", "svg", "axis", "bar", "line", "tooltip", "legend"],
+    base: {
+      root: "flex flex-col gap-3 p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm",
+      title: "text-sm font-semibold tracking-tight text-foreground",
+      container: "relative w-full aspect-video flex items-end justify-between",
+      svg: "w-full h-full",
+      axis: "text-[10px] text-muted-foreground",
+      bar: "rounded-t transition-all hover:opacity-85",
+      line: "stroke-2 fill-none",
+      tooltip: "absolute z-50 bg-background text-foreground border border-border rounded shadow p-2 text-xs",
+      legend: "flex items-center justify-center gap-4 text-xs text-muted-foreground"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChartTheme()

package/src/themes/checkbox.theme.ts

@@ -0,0 +1,42 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createCheckboxTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input", "box", "indicator", "label"],
+    base: {
+      root: "inline-flex items-center gap-2 cursor-pointer select-none",
+      input: "absolute opacity-0 size-0 pointer-events-none peer",
+      box: [
+        "size-4 shrink-0 rounded border border-border bg-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      indicator: "flex items-center justify-center text-white scale-0 transition-transform duration-150",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(colors.map((color) => [
+        color,
+        {
+          box: `peer-checked:bg-${color}-500 peer-checked:border-${color}-500 focus-within:ring-${color}-500/50`
+        }
+      ])),
+      size: {
+        sm: { box: "size-3.5", label: "text-xs" },
+        md: { box: "size-4", label: "text-sm" },
+        lg: { box: "size-4.5", label: "text-base" }
+      },
+      checked: {
+        true: { indicator: "scale-100" },
+        false: { indicator: "scale-0" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createCheckboxTheme()

package/src/themes/collapsible.theme.ts

@@ -0,0 +1,22 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCollapsibleTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "w-full",
+      trigger: "flex items-center justify-between w-full font-medium transition-all",
+      content: "overflow-hidden transition-all duration-300"
+    },
+    variants: {
+      open: {
+        true: { trigger: "", content: "h-auto" },
+        false: { trigger: "", content: "h-0 invisible" }
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  })
+
+export default createCollapsibleTheme()

package/src/themes/combobox.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createComboboxTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "trigger", "input", "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",
+      input: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-all placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring 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", input: "h-8 text-xs", item: "py-1 px-1.5 text-xs" },
+        md: { trigger: "h-9 px-3 text-sm", input: "h-9 text-sm", item: "py-1.5 px-2 text-sm" },
+        lg: { trigger: "h-10 px-4 text-base", input: "h-10 text-base", item: "py-2 px-2.5 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createComboboxTheme()

package/src/themes/dialog.theme.ts

@@ -0,0 +1,37 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const dialogTheme = 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 left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
+      "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+    ],
+    header: "flex flex-col gap-1.5 text-center sm:text-left 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-reverse 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: {
+    size: {
+      sm: { content: "max-w-sm" },
+      md: { content: "max-w-lg" },
+      lg: { content: "max-w-2xl" },
+      xl: { content: "max-w-4xl" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})
+
+export default dialogTheme

package/src/themes/drawer.theme.ts

@@ -0,0 +1,44 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const drawerTheme = defineTheme({
+  slots: ["root", "trigger", "backdrop", "content", "handle", "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"
+    ],
+    handle: "mx-auto h-1.5 w-[100px] rounded-full bg-muted mb-4",
+    header: "flex flex-col gap-1.5 mb-4 text-center",
+    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+    description: "text-sm text-muted-foreground leading-relaxed",
+    footer: "flex flex-col 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: {
+    direction: {
+      top: {
+        content: "inset-x-0 top-0 border-b rounded-b-xl data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
+      },
+      bottom: {
+        content: "inset-x-0 bottom-0 border-t rounded-t-xl 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 rounded-r-xl 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 rounded-l-xl data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+      }
+    }
+  },
+  defaultVariants: {
+    direction: "bottom"
+  }
+})
+
+export default drawerTheme

package/src/themes/dropdownMenu.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createDropdownMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content", "item", "shortcut", "separator", "label"],
+    base: {
+      root: "relative inline-block text-left",
+      trigger: "inline-flex justify-center w-full rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      content: "absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none",
+      item: "group flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+      shortcut: "ml-auto text-xs tracking-widest opacity-60",
+      separator: "-mx-1 my-1 h-px bg-muted",
+      label: "px-2 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase"
+    },
+    variants: {
+      size: {
+        sm: { trigger: "px-3 py-1.5 text-xs", item: "px-2 py-1 text-xs" },
+        md: { trigger: "px-4 py-2 text-sm", item: "px-2 py-1.5 text-sm" },
+        lg: { trigger: "px-5 py-2.5 text-base", item: "px-3 py-2 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createDropdownMenuTheme()

package/src/themes/dropzone.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createDropzoneTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "content", "icon", "title", "description"],
+    base: {
+      root: "flex flex-col items-center justify-center w-full min-h-[150px] border-2 border-dashed border-border rounded-lg bg-background/50 hover:bg-muted/30 transition-colors cursor-pointer select-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input: "absolute opacity-0 size-0 pointer-events-none",
+      content: "flex flex-col items-center justify-center p-6 text-center gap-1.5",
+      icon: "size-8 text-muted-foreground",
+      title: "text-sm font-semibold text-foreground",
+      description: "text-xs text-muted-foreground"
+    },
+    variants: {
+      disabled: {
+        true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  })
+
+export default createDropzoneTheme()

package/src/themes/field.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createFieldTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "description", "error"],
+    base: {
+      root: "flex flex-col gap-1.5 w-full",
+      label: "text-sm font-medium text-foreground",
+      description: "text-xs text-muted-foreground leading-normal",
+      error: "text-xs font-medium text-error-500 leading-normal"
+    },
+    variants: {
+      size: {
+        sm: { label: "text-xs", description: "text-[10px]", error: "text-[10px]" },
+        md: { label: "text-sm", description: "text-xs", error: "text-xs" },
+        lg: { label: "text-base", description: "text-sm", error: "text-sm" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createFieldTheme()

package/src/themes/hoverCard.theme.ts

@@ -0,0 +1,27 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const hoverCardTheme = defineTheme({
+  slots: ["root", "trigger", "content"],
+  base: {
+    root: "relative inline-block group/hover-card",
+    trigger: "",
+    content: [
+      "absolute z-50 w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-md outline-none",
+      "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
+      "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
+    ]
+  },
+  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 hoverCardTheme

package/src/themes/input.theme.ts

@@ -0,0 +1,36 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createInputTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "leading", "trailing"],
+    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",
+      input: "w-full bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      leading: "absolute left-3 flex items-center justify-center text-muted-foreground",
+      trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
+    },
+    variants: {
+      size: {
+        sm: { input: "py-1 text-xs", leading: "left-2.5", trailing: "right-2.5" },
+        md: { input: "py-1.5 text-sm", leading: "left-3", trailing: "right-3" },
+        lg: { input: "py-2 text-base", leading: "left-3.5", trailing: "right-3.5" }
+      },
+      hasLeading: {
+        true: { input: "pl-9" }
+      },
+      hasTrailing: {
+        true: { input: "pr-9" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasLeading: false,
+      hasTrailing: false,
+      error: false
+    }
+  })
+
+export default createInputTheme()

package/src/themes/inputGroup.theme.ts

@@ -0,0 +1,23 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createInputGroupTheme = () =>
+  defineTheme({
+    slots: ["root", "prepend", "append"],
+    base: {
+      root: "relative flex items-stretch w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 overflow-hidden",
+      prepend: "flex items-center bg-muted px-3 text-sm text-muted-foreground border-r border-input",
+      append: "flex items-center bg-muted px-3 text-sm text-muted-foreground border-l border-input"
+    },
+    variants: {
+      size: {
+        sm: { prepend: "px-2 text-xs", append: "px-2 text-xs" },
+        md: { prepend: "px-3 text-sm", append: "px-3 text-sm" },
+        lg: { prepend: "px-4 text-base", append: "px-4 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createInputGroupTheme()

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/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