@rimelight/ui 0.0.33 → 0.0.35

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

@@ -1,125 +1,104 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAlertTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "wrapper",
-      "title",
-      "description",
-      "icon",
-      "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",
-      avatar: "shrink-0",
-      avatarSize: "2xl",
-      actions: "flex flex-wrap gap-1.5 shrink-0",
-      close: "p-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      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"
-        }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      ...colors.map((color) => ({
-        variant: "solid" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "text-highlighted bg-default ring ring-inset ring-default"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-highlighted bg-elevated/50"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
-        }
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
-      variant: "solid",
-      orientation: "horizontal"
-    }
-  })
-
-export default createAlertTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCalloutTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    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 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",
+      close: "p-0 ml-auto"
+    },
+    variants: {
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      } as Record<string, { root: string }>,
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "text-highlighted bg-default ring ring-inset ring-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-highlighted bg-elevated/50"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
+        }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      variant: "solid"
+    }
+  })
+
+export default createCalloutTheme()

package/src/themes/card.theme.ts

@@ -1,42 +1,50 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createCardTheme = () =>
-  defineTheme({
-    slots: ["root", "header", "title", "description", "body", "footer"],
-    base: {
-      root: "rounded-lg overflow-hidden transition-all duration-300",
-      header: "p-4 sm:px-6",
-      title: "text-highlighted font-semibold",
-      description: "mt-1 text-muted text-sm",
-      body: "p-4 sm:p-6",
-      footer: "p-4 sm:px-6"
-    },
-    variants: {
-      variant: {
-        solid: {
-          root: "bg-inverted text-inverted",
-          title: "text-inverted",
-          description: "text-dimmed"
-        },
-        outline: {
-          root: "bg-default ring ring-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"
-        }
-      },
-      interactive: {
-        true: { root: "hover:shadow-md cursor-pointer" },
-        false: { root: "" }
-      }
-    },
-    defaultVariants: {
-      variant: "outline",
-      interactive: false
-    }
-  })
-
-export default createCardTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createCardTheme = () =>
+  defineTheme({
+    slots: ["root", "header", "title", "description", "body", "footer", "overlay", "media"],
+    base: {
+      root: "rounded-lg overflow-hidden",
+      header: "p-4 sm:px-6 border-default",
+      title: "text-highlighted font-semibold",
+      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: {
+        solid: {
+          root: "bg-inverted text-inverted",
+          title: "text-inverted",
+          description: "text-dimmed"
+        },
+        outline: {
+          root: "bg-default border border-default divide-y divide-default"
+        },
+        soft: {
+          root: "bg-elevated/50 divide-y divide-default"
+        },
+        subtle: {
+          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,
+      overlay: false
+    }
+  })
+
+export default createCardTheme()

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

@@ -1,22 +1,22 @@
-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()
+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/chat-message.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatMessageTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatMessageTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatMessageTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatMessageTheme()

package/src/themes/chat-messages.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatMessagesTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatMessagesTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatMessagesTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatMessagesTheme()

package/src/themes/chat-palette.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatPaletteTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPaletteTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatPaletteTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPaletteTheme()

package/src/themes/chat-prompt-submit.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatPromptSubmitTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPromptSubmitTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatPromptSubmitTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPromptSubmitTheme()

package/src/themes/chat-prompt.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatPromptTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatPromptTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatPromptTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatPromptTheme()

package/src/themes/chat-reasoning.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatReasoningTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatReasoningTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatReasoningTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatReasoningTheme()

package/src/themes/chat-shimmer.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatShimmerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatShimmerTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatShimmerTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatShimmerTheme()

package/src/themes/chat-tool.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatToolTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatToolTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatToolTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatToolTheme()

package/src/themes/chat.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createChatTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createChatTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createChatTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createChatTheme()