@rimelight/ui 0.0.33 → 0.0.34

package/src/themes/button.theme.ts

@@ -1,202 +1,224 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createButtonTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: [
-        "group inline-flex items-center justify-center rounded-md font-medium ws-nowrap 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"
-      ],
-      label: "truncate",
-      leadingIcon: "shrink-0 flex items-center justify-center",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" },
-        ghost: { root: "" },
-        link: { root: "" }
-      },
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      },
-      size: {
-        xs: {
-          root: "text-xs gap-1 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        sm: {
-          root: "text-xs gap-1.5 [&_svg]:size-4",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        md: {
-          root: "text-sm gap-1.5 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-5"
-        },
-        lg: {
-          root: "text-sm gap-2 [&_svg]:size-5",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-base gap-2 [&_svg]:size-6",
-          leadingIcon: "size-6",
-          leadingAvatarSize: "xs",
-          trailingIcon: "size-6"
-        }
-      },
-      block: {
-        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
-      },
-      square: {
-        true: {},
-        false: {}
-      },
-      leading: { true: {} },
-      trailing: { true: {} },
-      loading: { true: {} },
-      active: {
-        true: { root: "" },
-        false: { root: "" }
-      },
-      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 hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "subtle" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "ghost" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "link" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
-        }
-      })),
-      {
-        color: "neutral",
-        variant: "solid",
-        classNames: {
-          root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "outline",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      {
-        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"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "link",
-        classNames: {
-          root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
-        }
-      },
-      { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
-      { 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" } },
-      {
-        loading: true,
-        leading: true,
-        classNames: {
-          leadingIcon: "animate-spin"
-        }
-      },
-      {
-        loading: true,
-        leading: false,
-        trailing: true,
-        classNames: {
-          trailingIcon: "animate-spin"
-        }
-      }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md"
-    }
-  })
-
-export default createButtonTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createButtonTheme = (colors: 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",
+        "transition-colors outline-none",
+        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
+      ],
+      label: "truncate",
+      leadingIcon: "shrink-0 flex items-center justify-center",
+      leadingAvatar: "shrink-0",
+      leadingAvatarSize: "",
+      trailingIcon: "shrink-0"
+    },
+    variants: {
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" },
+        ghost: { root: "" },
+        link: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      },
+      size: {
+        xs: {
+          root: "text-xs gap-1 [&_svg]:size-4",
+          leadingIcon: "size-4",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-4"
+        },
+        sm: {
+          root: "text-xs gap-1.5 [&_svg]:size-4",
+          leadingIcon: "size-4",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-4"
+        },
+        md: {
+          root: "text-sm gap-1.5 [&_svg]:size-5",
+          leadingIcon: "size-5",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-5"
+        },
+        lg: {
+          root: "text-sm gap-2 [&_svg]:size-5",
+          leadingIcon: "size-5",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-5"
+        },
+        xl: {
+          root: "text-base gap-2 [&_svg]:size-6",
+          leadingIcon: "size-6",
+          leadingAvatarSize: "xs",
+          trailingIcon: "size-6"
+        }
+      },
+      block: {
+        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
+      },
+      square: {
+        true: {},
+        false: {}
+      },
+      rounded: {
+        true: { root: "rounded-full" },
+        false: { root: "rounded-md" }
+      },
+      leading: { true: {} },
+      trailing: { true: {} },
+      loading: { true: {} },
+      active: {
+        true: { root: "" },
+        false: { root: "" }
+      },
+      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 hover:bg-[var(--rl-bg-hover)] active:bg-[var(--rl-bg-hover)] disabled:bg-[var(--rl-bg)] aria-disabled:bg-[var(--rl-bg)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--rl-ring)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 focus:outline-none focus-visible:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10 hover:bg-[var(--rl-bg)]/15 active:bg-[var(--rl-bg)]/15 disabled:bg-[var(--rl-bg)]/10 aria-disabled:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--rl-ring)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "ghost" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] hover:bg-[var(--rl-bg)]/10 active:bg-[var(--rl-bg)]/10 focus:outline-none focus-visible:bg-[var(--rl-bg)]/10 disabled:bg-transparent aria-disabled:bg-transparent"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "link" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] hover:text-[var(--rl-text)]/75 active:text-[var(--rl-text)]/75 disabled:text-[var(--rl-text)] aria-disabled:text-[var(--rl-text)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--rl-ring)]"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "ring ring-inset ring-current text-default bg-transparent hover:bg-elevated active:bg-elevated disabled:bg-transparent aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted"
+        }
+      },
+      {
+        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"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "link",
+        classNames: {
+          root: "text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted"
+        }
+      },
+      { square: false, size: "xs", classNames: { root: "px-2 py-1" } },
+      { 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" } },
+      {
+        loading: true,
+        leading: true,
+        classNames: {
+          leadingIcon: "animate-spin"
+        }
+      },
+      {
+        loading: true,
+        leading: false,
+        trailing: true,
+        classNames: {
+          trailingIcon: "animate-spin"
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md"
+    }
+  })
+
+export default createButtonTheme()

package/src/themes/calendar.theme.ts

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

package/src/themes/card.theme.ts

@@ -1,42 +1,42 @@
-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"],
+    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()

package/src/themes/changelog.theme.ts

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

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