@rimelight/ui 0.0.29 → 0.0.31

package/src/themes/alert.theme.ts

@@ -0,0 +1,51 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createAlertTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "icon", "content", "title", "description"],
+    base: {
+      root: "relative w-full rounded-lg border p-4 flex gap-3 text-sm transition-all shadow-sm",
+      icon: "shrink-0 size-5 text-current",
+      content: "flex flex-col gap-1 w-full",
+      title: "font-semibold leading-none tracking-tight text-foreground",
+      description: "text-xs opacity-90 leading-relaxed"
+    },
+    variants: {
+      variant: {
+        default: { root: "bg-background text-foreground border-border" },
+        destructive: { root: "bg-error-500/10 text-error-700 border-error-500/20 dark:text-error-400" },
+        outline: { root: "border bg-transparent" },
+        solid: { root: "border-transparent text-white" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      hasIcon: {
+        true: { icon: "block" },
+        false: { icon: "hidden" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500 text-white border-transparent`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      hasIcon: false
+    }
+  })
+
+export default createAlertTheme()

package/src/themes/alertDialog.theme.ts

@@ -0,0 +1,33 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const alertDialogTheme = defineTheme({
+  slots: ["root", "trigger", "backdrop", "content", "header", "title", "description", "footer", "cancelButton", "actionButton"],
+  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-md -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",
+    cancelButton: "w-full sm:w-auto",
+    actionButton: "w-full sm:w-auto"
+  },
+  variants: {
+    variant: {
+      default: { actionButton: "" },
+      destructive: { actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50" }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+})
+
+export default alertDialogTheme

package/src/themes/aspectRatio.theme.ts

@@ -0,0 +1,11 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const aspectRatioTheme = defineTheme({
+  slots: ["root", "content"],
+  base: {
+    root: "relative w-full overflow-hidden",
+    content: "absolute inset-0 h-full w-full object-cover"
+  }
+})
+
+export default aspectRatioTheme

package/src/themes/avatar.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const avatarTheme = defineTheme({
+  slots: ["root", "image", "fallback", "badge"],
+  base: {
+    root: "relative flex shrink-0 overflow-hidden rounded-full select-none",
+    image: "aspect-square h-full w-full object-cover",
+    fallback: "flex h-full w-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground uppercase",
+    badge: "absolute bottom-0 right-0 block size-2.5 rounded-full ring-2 ring-background"
+  },
+  variants: {
+    size: {
+      sm: { root: "size-8", fallback: "text-xs" },
+      md: { root: "size-10", fallback: "text-sm" },
+      lg: { root: "size-12", fallback: "text-base" }
+    },
+    hasBadge: {
+      true: { badge: "block" },
+      false: { badge: "hidden" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    hasBadge: false
+  }
+})
+
+export default avatarTheme

package/src/themes/avatarGroup.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const avatarGroupTheme = defineTheme({
+  slots: ["root"],
+  base: {
+    root: "flex -space-x-3 hover:space-x-0 transition-all duration-300 [&_[data-slot=root]]:ring-2 [&_[data-slot=root]]:ring-background [&_[data-slot=root]]:transition-all"
+  }
+})
+
+export default avatarGroupTheme

package/src/themes/badge.theme.ts

@@ -0,0 +1,61 @@
+import { defineTheme } from "../utils/defineTheme"
+
+const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export const createBadgeTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center gap-1.5 font-medium select-none overflow-hidden transition-all duration-150"
+    },
+    variants: {
+      variant: {
+        solid: { root: "border border-transparent text-white" },
+        outline: { root: "border" },
+        soft: { root: "border border-transparent" },
+        ghost: { root: "bg-transparent hover:bg-muted" }
+      },
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      size: {
+        sm: { root: "px-2 py-0.5 text-2xs rounded-full h-5" },
+        md: { root: "px-2.5 py-0.5 text-xs rounded-full h-6" },
+        lg: { root: "px-3 py-1 text-sm rounded-full h-7" }
+      },
+      shape: {
+        square: { root: "rounded-sm" },
+        rounded: { root: "rounded-md" },
+        pill: { root: "rounded-full" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500 text-white hover:bg-${color}-600`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: `border-${color}-500/20 text-${color}-600 bg-transparent hover:bg-${color}-500/5`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20`
+        }
+      }))
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      shape: "pill"
+    }
+  })
+
+export default createBadgeTheme()

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