@rimelight/ui 0.0.34 → 0.0.36

package/src/themes/badge.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createBadgeTheme = (colors: string[] = defaultColors) =>
+export const createBadgeTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
     base: {
@@ -22,7 +22,7 @@ export const createBadgeTheme = (colors: string[] = defaultColors) =>
       color: {
         ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
         neutral: { root: "" }
-      },
+      } as Record<string, { root: string }>,
       size: {
         xs: {
           root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
@@ -64,7 +64,6 @@ export const createBadgeTheme = (colors: string[] = defaultColors) =>
         true: { root: "" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/banner.theme.ts

@@ -2,12 +2,48 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createBannerTheme = () =>
   defineTheme({
-    slots: ["root"],
+    slots: ["root", "content", "container", "center", "left", "side", "actions", "dismiss"],
     base: {
-      root: ""
+      root: "w-full",
+      content: "w-full",
+      container:
+        "relative flex flex-row items-center min-h-12 md:h-14 px-xs sm:px-md md:px-xl lg:px-xl text-sm gap-2",
+      left: "absolute left-0 inset-y-0 flex items-center px-4 max-w-[30%] truncate",
+      center: "absolute left-1/2 -translate-x-1/2 max-w-[50%] truncate text-center",
+      side: "flex-none flex items-center gap-2",
+      actions: "flex-none flex items-center gap-2xs",
+      dismiss:
+        "flex-none flex items-center justify-center size-8 rounded-md hover:bg-black/10 dark:hover:bg-white/10 transition-colors cursor-pointer"
     },
-    variants: {},
-    defaultVariants: {}
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-90rem"
+        },
+        false: {
+          container: "max-w-none"
+        }
+      },
+      sticky: {
+        true: {
+          root: "sticky top-0 inset-x-0 z-50"
+        },
+        false: {
+          root: ""
+        }
+      },
+      fixed: {
+        true: {
+          root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
+        },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      contain: true,
+      sticky: false,
+      fixed: true
+    }
   })
 
 export default createBannerTheme()

package/src/themes/breadcrumb.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createBreadcrumbTheme = (colors: string[] = defaultColors) =>
+export const createBreadcrumbTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "list", "item", "link", "separator", "page"],
     base: {

package/src/themes/button.theme.ts

@@ -1,12 +1,12 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createButtonTheme = (colors: string[] = defaultColors) =>
+export const createButtonTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
     base: {
       root: [
-        "group inline-flex items-center justify-center font-medium ws-nowrap disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
+        "group inline-flex items-center justify-center font-medium ws-nowrap no-underline disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75",
         "transition-colors outline-none",
         "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
       ],
@@ -14,7 +14,7 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
       leadingIcon: "shrink-0 flex items-center justify-center",
       leadingAvatar: "shrink-0",
       leadingAvatarSize: "",
-      trailingIcon: "shrink-0"
+      trailingIcon: "shrink-0 flex items-center justify-center"
     },
     variants: {
       variant: {
@@ -28,7 +28,7 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
       color: {
         ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
         neutral: { root: "" }
-      },
+      } as Record<string, { root: string | string[] }>,
       size: {
         xs: {
           root: "text-xs gap-1 [&_svg]:size-4",
@@ -37,28 +37,28 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
           trailingIcon: "size-4"
         },
         sm: {
-          root: "text-xs gap-1.5 [&_svg]:size-4",
+          root: "text-sm gap-1.5 [&_svg]:size-4",
           leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
+          leadingAvatarSize: "2xs",
           trailingIcon: "size-4"
         },
         md: {
-          root: "text-sm gap-1.5 [&_svg]:size-5",
+          root: "text-base gap-2 [&_svg]:size-5",
           leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
+          leadingAvatarSize: "xs",
           trailingIcon: "size-5"
         },
         lg: {
-          root: "text-sm gap-2 [&_svg]:size-5",
+          root: "text-lg gap-2.5 [&_svg]:size-5",
           leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
+          leadingAvatarSize: "sm",
           trailingIcon: "size-5"
         },
         xl: {
-          root: "text-base gap-2 [&_svg]:size-6",
-          leadingIcon: "size-6",
-          leadingAvatarSize: "xs",
-          trailingIcon: "size-6"
+          root: "text-2xl gap-3 [&_svg]:size-7",
+          leadingIcon: "size-7",
+          leadingAvatarSize: "lg",
+          trailingIcon: "size-7"
         }
       },
       block: {
@@ -80,7 +80,6 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
         false: { root: "" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }
@@ -178,7 +177,7 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
         color: "neutral",
         variant: "ghost",
         classNames: {
-          root: "text-default hover:bg-elevated/10 active:bg-elevated/10 focus:outline-none focus-visible:bg-elevated/10 hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
+          root: "text-default hover:bg-hover active:bg-hover/80 focus:outline-none focus-visible:bg-hover hover:disabled:bg-transparent hover:aria-disabled:bg-transparent"
         }
       },
       {
@@ -192,12 +191,12 @@ export const createButtonTheme = (colors: string[] = defaultColors) =>
       { square: true, size: "xs", classNames: { root: "p-1" } },
       { square: false, size: "sm", classNames: { root: "px-2.5 py-1.5" } },
       { square: true, size: "sm", classNames: { root: "p-1.5" } },
-      { square: false, size: "md", classNames: { root: "px-2.5 py-1.5" } },
-      { square: true, size: "md", classNames: { root: "p-1.5" } },
-      { square: false, size: "lg", classNames: { root: "px-3 py-2" } },
-      { square: true, size: "lg", classNames: { root: "p-2" } },
-      { square: false, size: "xl", classNames: { root: "px-3 py-2" } },
-      { square: true, size: "xl", classNames: { root: "p-2" } },
+      { square: false, size: "md", classNames: { root: "px-3 py-2" } },
+      { square: true, size: "md", classNames: { root: "p-2" } },
+      { square: false, size: "lg", classNames: { root: "px-3.5 py-2.5" } },
+      { square: true, size: "lg", classNames: { root: "p-2.5" } },
+      { square: false, size: "xl", classNames: { root: "px-5 py-3.5" } },
+      { square: true, size: "xl", classNames: { root: "p-3.5" } },
       {
         loading: true,
         leading: true,

package/src/themes/{alert.theme.ts → callout.theme.ts}

@@ -1,29 +1,19 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createAlertTheme = (colors: string[] = defaultColors) =>
+export const createCalloutTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
-    slots: [
-      "root",
-      "wrapper",
-      "title",
-      "description",
-      "icon",
-      "avatar",
-      "avatarSize",
-      "actions",
-      "close"
-    ],
+    slots: ["root", "body", "icon", "title", "content", "avatar", "avatarSize", "actions", "close"],
     base: {
-      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5",
-      wrapper: "min-w-0 flex-1 flex flex-col",
-      title: "text-sm font-medium",
-      description: "text-sm opacity-90",
-      icon: "shrink-0 size-5",
+      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start",
+      body: "flex flex-col gap-2.5 flex-1 min-w-0",
+      icon: "shrink-0 size-6 inline-flex items-center justify-center",
+      title: "text-sm font-bold",
+      content: "text-sm opacity-90 leading-relaxed [&>:first-child]:mt-0 [&>:last-child]:mb-0",
       avatar: "shrink-0",
       avatarSize: "2xl",
-      actions: "flex flex-wrap gap-1.5 shrink-0",
-      close: "p-0"
+      actions: "flex flex-wrap gap-1.5",
+      close: "p-0 ml-auto"
     },
     variants: {
       variant: {
@@ -35,24 +25,8 @@ export const createAlertTheme = (colors: string[] = defaultColors) =>
       color: {
         ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
         neutral: { root: "" }
-      },
-      orientation: {
-        horizontal: {
-          root: "items-center",
-          actions: "items-center"
-        },
-        vertical: {
-          root: "items-start",
-          actions: "items-start mt-2.5"
-        }
-      },
-      title: {
-        true: {
-          description: "mt-1"
-        }
-      },
+      } as Record<string, { root: string }>,
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }
@@ -123,9 +97,8 @@ export const createAlertTheme = (colors: string[] = defaultColors) =>
     ],
     defaultVariants: {
       color: "primary",
-      variant: "solid",
-      orientation: "horizontal"
+      variant: "solid"
     }
   })
 
-export default createAlertTheme()
+export default createCalloutTheme()

package/src/themes/card.theme.ts

@@ -2,14 +2,17 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createCardTheme = () =>
   defineTheme({
-    slots: ["root", "header", "title", "description", "body", "footer"],
+    slots: ["root", "header", "title", "description", "body", "footer", "overlay", "media"],
     base: {
-      root: "rounded-lg overflow-hidden transition-all duration-300",
-      header: "p-4 sm:px-6",
+      root: "rounded-lg overflow-hidden",
+      header: "p-4 sm:px-6 border-default",
       title: "text-highlighted font-semibold",
-      description: "mt-1 text-muted text-sm",
-      body: "p-4 sm:p-6",
-      footer: "p-4 sm:px-6"
+      description: "mt-1 text-muted-foreground text-sm",
+      body: "p-4 sm:p-6 border-default",
+      footer: "p-4 sm:px-6 border-default",
+      overlay:
+        "absolute inset-0 z-10 flex flex-col justify-end p-4 bg-gradient-to-t from-black/80 to-transparent text-white",
+      media: "relative border-default"
     },
     variants: {
       variant: {
@@ -19,23 +22,28 @@ export const createCardTheme = () =>
           description: "text-dimmed"
         },
         outline: {
-          root: "bg-default ring ring-default divide-y divide-default"
+          root: "bg-default border border-default divide-y divide-default"
         },
         soft: {
           root: "bg-elevated/50 divide-y divide-default"
         },
         subtle: {
-          root: "bg-elevated/50 ring ring-default divide-y divide-default"
+          root: "bg-elevated/50 border border-default divide-y divide-default"
         }
       },
       interactive: {
         true: { root: "hover:shadow-md cursor-pointer" },
         false: { root: "" }
+      },
+      overlay: {
+        true: { root: "relative" },
+        false: {}
       }
     },
     defaultVariants: {
       variant: "outline",
-      interactive: false
+      interactive: false,
+      overlay: false
     }
   })
 

package/src/themes/carousel.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createCarouselTheme = (colors: string[] = defaultColors) =>
+export const createCarouselTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "viewport", "container", "slide", "buttonPrev", "buttonNext", "dots", "dot"],
     base: {

package/src/themes/checkbox.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createCheckboxTheme = (colors: string[] = defaultColors) =>
+export const createCheckboxTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "input", "box", "indicator", "label"],
     base: {
@@ -35,7 +35,6 @@ export const createCheckboxTheme = (colors: string[] = defaultColors) =>
         false: { indicator: "scale-0" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/chip.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createChipTheme = (colors: string[] = defaultColors) =>
+export const createChipTheme = (colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "base"],
     base: {
@@ -12,7 +12,7 @@ export const createChipTheme = (colors: string[] = defaultColors) =>
       color: {
         ...Object.fromEntries(colors.map((color) => [color, { base: `bg-${color}` }])),
         neutral: { base: "bg-inverted" }
-      },
+      } as Record<string, { base: string }>,
       size: {
         "3xs": { base: "h-[4px] min-w-[4px] text-[4px]" },
         "2xs": { base: "h-[5px] min-w-[5px] text-[5px]" },
@@ -37,7 +37,6 @@ export const createChipTheme = (colors: string[] = defaultColors) =>
         false: { base: "absolute" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }

package/src/themes/color-area.theme.ts

@@ -0,0 +1,33 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorAreaTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "area", "thumb"],
+    base: {
+      root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
+      area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
+      thumb:
+        "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorAreaTheme()

package/src/themes/color-field.theme.ts

@@ -0,0 +1,32 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorFieldTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input"],
+    base: {
+      root: "relative flex items-center border border-border rounded-lg bg-background shadow-sm px-3 py-1.5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input:
+        "w-full bg-transparent border-0 p-0 text-sm focus:outline-none focus:ring-0 text-foreground placeholder-muted-foreground"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            input: `focus:ring-0`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorFieldTheme()

package/src/themes/color-slider.theme.ts

@@ -0,0 +1,34 @@
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createColorSliderTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "track", "thumb"],
+    base: {
+      root: "relative flex w-full touch-none select-none items-center outline-none",
+      track:
+        "relative h-3 w-full grow rounded-full border border-border bg-muted cursor-pointer outline-none",
+      thumb:
+        "absolute block size-5 rounded-full border-2 border-white shadow-md cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorSliderTheme()

package/src/themes/confirm.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createConfirmTheme = (colors: string[] = defaultColors) =>
+export const createConfirmTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: [
       "root",

package/src/themes/container.theme.ts

@@ -4,7 +4,7 @@ export const createContainerTheme = () =>
   defineTheme({
     slots: ["root"],
     base: {
-      root: "w-full max-w-(--rl-container) mx-auto px-4 sm:px-6 lg:px-8"
+      root: "w-full max-w-[var(--rl-container)] mx-auto px-xs sm:px-md md:px-xl lg:px-xl"
     },
     variants: {},
     defaultVariants: {}

package/src/themes/drawer.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createDrawerTheme = (colors: string[] = defaultColors) =>
+export const createDrawerTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: [
       "root",

package/src/themes/footer.theme.ts

@@ -6,7 +6,7 @@ export const createFooterTheme = () =>
     base: {
       root: "py-8 lg:py-12 overflow-hidden",
       container:
-        "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-4 md:px-6 lg:px-8 w-full",
+        "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-xs sm:px-md md:px-xl lg:px-xl w-full",
       left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
       center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
       right:
@@ -15,7 +15,7 @@ export const createFooterTheme = () =>
     variants: {
       contain: {
         true: {
-          container: "mx-auto max-w-7xl"
+          container: "mx-auto max-w-(--rl-container)"
         },
         false: {
           container: "w-full"

package/src/themes/grid.theme.ts

@@ -0,0 +1,38 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createGridTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "grid w-full [&>*]:mt-0!"
+    },
+    variants: {
+      cols: {
+        1: { root: "grid-cols-1" },
+        2: { root: "grid-cols-1 sm:grid-cols-2" },
+        3: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" },
+        4: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" },
+        5: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5" },
+        6: { root: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6" }
+      },
+      gap: {
+        none: { root: "gap-0" },
+        xs: { root: "gap-1 sm:gap-2" },
+        sm: { root: "gap-2 sm:gap-4" },
+        md: { root: "gap-4 sm:gap-6" },
+        lg: { root: "gap-6 sm:gap-8" },
+        xl: { root: "gap-8 sm:gap-12" }
+      },
+      stagger: {
+        true: { root: "pb-20 [&>:nth-child(2n)]:translate-y-20" },
+        false: { root: "" }
+      }
+    },
+    defaultVariants: {
+      cols: 2,
+      gap: "md",
+      stagger: false
+    }
+  })
+
+export default createGridTheme()

package/src/themes/header.theme.ts

@@ -7,14 +7,15 @@ export const createHeaderTheme = () =>
       root: "w-full",
       content: "w-full",
       container:
-        "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-4 md:px-6 lg:px-8",
+        "flex flex-row items-center justify-between gap-4xs h-16 md:h-18 px-xs sm:px-md md:px-xl lg:px-xl",
       left: "flex-1 min-w-0 flex items-center justify-start truncate",
       center: "flex-none flex items-center justify-center mx-4",
-      right: "flex-1 min-w-0 flex items-center justify-end truncate"    },
+      right: "flex-1 min-w-0 flex items-center justify-end truncate"
+    },
     variants: {
       contain: {
         true: {
-          container: "mx-auto max-w-7xl"
+          container: "mx-auto max-w-90rem"
         },
         false: {
           container: "max-w-none"

package/src/themes/hover-card.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createHoverCardTheme = (colors: string[] = defaultColors) =>
+export const createHoverCardTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "trigger", "content"],
     base: {

package/src/themes/image.theme.ts

@@ -2,11 +2,21 @@ import { defineTheme } from "../utils/defineTheme"
 
 export const createImageTheme = () =>
   defineTheme({
-    slots: ["root", "trigger", "dialog", "image", "fileInfo", "download", "closeButton"],
+    slots: [
+      "root",
+      "trigger",
+      "triggerImage",
+      "dialog",
+      "image",
+      "fileInfo",
+      "download",
+      "closeButton"
+    ],
     base: {
       root: "relative inline-block group/image",
       trigger:
         "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
+      triggerImage: "",
       dialog:
         "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
       image: "object-contain max-w-full max-h-[65vh] rounded-lg",

package/src/themes/input.theme.ts

@@ -11,6 +11,12 @@ export const createInputTheme = () =>
       trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
     },
     variants: {
+      variant: {
+        default: {},
+        ghost: {
+          root: "bg-transparent border-none shadow-none focus-within:ring-0"
+        }
+      },
       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" },
@@ -26,12 +32,12 @@ export const createInputTheme = () =>
         true: { root: "border-error-500 focus-within:ring-error-500/50" }
       },
       theme: {
-        flat: { root: "rl-flat" },
         light: { root: "rl-light" },
         dark: { root: "rl-dark" }
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md",
       hasLeading: false,
       hasTrailing: false,