@rimelight/ui 0.0.30 → 0.0.32

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/theme-selector.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/timeline.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  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/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

package/src/themes/tour.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/themes/tree.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/themes/user.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/themes/watermark.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/themes/window-mockup.theme.ts

@@ -0,0 +1,10 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/types/components/3d-hover.ts

@@ -0,0 +1,11 @@
+export interface ThreeDHoverProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/accordion.ts

@@ -8,7 +8,7 @@ export interface AccordionProps {
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/alert.ts

@@ -0,0 +1,37 @@
+import type { Theme } from "../theme"
+
+export interface AlertProps {
+  /**
+   * The visual variant of the alert.
+   */
+  variant?: "default" | "destructive" | "outline" | "solid"
+  /**
+   * The color scheme of the alert.
+   */
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  /**
+   * The main title text of the alert.
+   */
+  title?: string
+  /**
+   * The secondary description text of the alert.
+   */
+  description?: string
+  /**
+   * An optional leading icon.
+   */
+  icon?: string
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/app.ts

@@ -0,0 +1,11 @@
+export interface AppProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/aspect-ratio.ts

@@ -0,0 +1,15 @@
+export interface AspectRatioProps {
+  /**
+   * The aspect ratio fraction/decimal (e.g. 16/9, 4/3, 1).
+   */
+  ratio?: number
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/audio.ts

@@ -0,0 +1,11 @@
+export interface AudioProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/avatar-group.ts

@@ -0,0 +1,12 @@
+export interface AvatarGroupProps {
+    /**
+     * Slot-specific CSS class overrides.
+     */
+    ui?: any
+    /**
+     * Additional CSS classes to apply to the root element.
+     */
+    class?: any
+    [key: string]: unknown
+}
+

package/src/types/components/avatar.ts

@@ -0,0 +1,35 @@
+export interface AvatarProps {
+  /**
+   * The source URL of the avatar image.
+   */
+  src?: string
+  /**
+   * Alt description for screen readers.
+   */
+  alt?: string
+  /**
+   * Two-letter fallback initials when src fails to load.
+   */
+  fallback?: string
+  /**
+   * The avatar dimensions scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Displays a status badge circle on the avatar.
+   */
+  badge?: boolean
+  /**
+   * The color of the status badge.
+   */
+  badgeColor?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/badge.ts

@@ -0,0 +1,33 @@
+import type { Theme } from "../theme"
+
+export interface BadgeProps {
+  /**
+   * Visual style variant.
+   */
+  variant?: "solid" | "outline" | "soft" | "ghost"
+  /**
+   * Color scheme applied.
+   */
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  /**
+   * The size scale of the badge.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * The shape corner rounding.
+   */
+  shape?: "square" | "rounded" | "pill"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/banner.ts

@@ -0,0 +1,11 @@
+export interface BannerProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/breadcrumb.ts

@@ -0,0 +1,24 @@
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  /**
+   * Quick-prop array to render breadcrumb items automatically.
+   */
+  items?: BreadcrumbItem[]
+  /**
+   * The icon separating the breadcrumbs.
+   */
+  separatorIcon?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/browser-mockup.ts

@@ -0,0 +1,11 @@
+export interface BrowserMockupProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/button.ts

@@ -1,3 +1,5 @@
+import type { Theme } from "../theme"
+
 export interface ButtonProps {
   /**
    * The visual style variant of the button
@@ -59,12 +61,16 @@ export interface ButtonProps {
    * Variant used when button is in active state
    */
   activeVariant?: "solid" | "outline" | "ghost" | "link" | "soft"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
   /**
    * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/calendar.ts

@@ -0,0 +1,11 @@
+export interface CalendarProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/card.ts

@@ -0,0 +1,31 @@
+export interface CardProps {
+  /**
+   * Card heading title.
+   */
+  title?: string
+  /**
+   * Subtitle description text.
+   */
+  description?: string
+  /**
+   * Media source (e.g. image url) displayed at top.
+   */
+  mediaSrc?: string
+  /**
+   * Link reference makes the entire card interactive.
+   */
+  href?: string
+  /**
+   * Glassmorphism or overlay style.
+   */
+  overlay?: boolean
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/carousel.ts

@@ -0,0 +1,25 @@
+export interface CarouselSlide {
+  imageSrc?: string
+  title?: string
+  description?: string
+}
+
+export interface CarouselProps {
+  /**
+   * The list of slide items to render.
+   */
+  slides?: CarouselSlide[]
+  /**
+   * Controlled autoplay.
+   */
+  autoplay?: boolean
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/changelog.ts

@@ -0,0 +1,11 @@
+export interface ChangelogProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/chart.ts

@@ -0,0 +1,38 @@
+export interface ChartDataPoint {
+  label: string
+  value: number
+  color?: string
+  [key: string]: any
+}
+
+export interface ChartProps {
+  /**
+   * Type of chart.
+   */
+  type?: "bar" | "line" | "pie" | "area" | "donut"
+  /**
+   * Data points array.
+   */
+  data?: ChartDataPoint[]
+  /**
+   * Title of the chart.
+   */
+  title?: string
+  /**
+   * Height of the chart in pixels.
+   */
+  height?: number
+  /**
+   * Color theme.
+   */
+  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/chat-message.ts

@@ -0,0 +1,11 @@
+export interface ChatMessageProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/chat-messages.ts

@@ -0,0 +1,11 @@
+export interface ChatMessagesProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/chat-palette.ts

@@ -0,0 +1,11 @@
+export interface ChatPaletteProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}