@rimelight/ui 0.0.33 → 0.0.34

package/src/themes/avatar.theme.ts

@@ -1,84 +1,84 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createAvatarTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "image", "fallback", "icon", "badge"],
-    base: {
-      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
-      image: "h-full w-full rounded-[inherit] object-cover",
-      fallback: "font-medium truncate",
-      icon: "shrink-0",
-      badge: "absolute rounded-full ring-2 ring-bg"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(
-          colors.map((color) => [
-            color,
-            {
-              root: `bg-${color}/10`,
-              fallback: `text-${color}`,
-              icon: `text-${color}`
-            }
-          ])
-        ),
-        neutral: {
-          root: "bg-elevated",
-          fallback: "text-muted",
-          icon: "text-muted"
-        }
-      },
-      size: {
-        "3xs": {
-          root: "size-4 text-[8px]",
-          badge: "size-1.5"
-        },
-        "2xs": {
-          root: "size-5 text-[10px]",
-          badge: "size-2"
-        },
-        "xs": {
-          root: "size-6 text-xs",
-          badge: "size-2"
-        },
-        "sm": {
-          root: "size-7 text-sm",
-          badge: "size-2.5"
-        },
-        "md": {
-          root: "size-8 text-base",
-          badge: "size-3"
-        },
-        "lg": {
-          root: "size-9 text-lg",
-          badge: "size-3"
-        },
-        "xl": {
-          root: "size-10 text-xl",
-          badge: "size-3.5"
-        },
-        "2xl": {
-          root: "size-11 text-[22px]",
-          badge: "size-4"
-        },
-        "3xl": {
-          root: "size-12 text-2xl",
-          badge: "size-4"
-        }
-      },
-      badgePosition: {
-        "top-right": { badge: "top-0 right-0" },
-        "bottom-right": { badge: "bottom-0 right-0" },
-        "top-left": { badge: "top-0 left-0" },
-        "bottom-left": { badge: "bottom-0 left-0" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "neutral",
-      badgePosition: "bottom-right"
-    }
-  })
-
-export default createAvatarTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createAvatarTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "image", "fallback", "icon", "badge"],
+    base: {
+      root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle relative",
+      image: "h-full w-full rounded-[inherit] object-cover",
+      fallback: "font-medium truncate",
+      icon: "shrink-0",
+      badge: "absolute rounded-full ring-2 ring-bg"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            {
+              root: `bg-${color}/10`,
+              fallback: `text-${color}`,
+              icon: `text-${color}`
+            }
+          ])
+        ),
+        neutral: {
+          root: "bg-elevated",
+          fallback: "text-muted",
+          icon: "text-muted"
+        }
+      },
+      size: {
+        "3xs": {
+          root: "size-4 text-[8px]",
+          badge: "size-1.5"
+        },
+        "2xs": {
+          root: "size-5 text-[10px]",
+          badge: "size-2"
+        },
+        "xs": {
+          root: "size-6 text-xs",
+          badge: "size-2"
+        },
+        "sm": {
+          root: "size-7 text-sm",
+          badge: "size-2.5"
+        },
+        "md": {
+          root: "size-8 text-base",
+          badge: "size-3"
+        },
+        "lg": {
+          root: "size-9 text-lg",
+          badge: "size-3"
+        },
+        "xl": {
+          root: "size-10 text-xl",
+          badge: "size-3.5"
+        },
+        "2xl": {
+          root: "size-11 text-[22px]",
+          badge: "size-4"
+        },
+        "3xl": {
+          root: "size-12 text-2xl",
+          badge: "size-4"
+        }
+      },
+      badgePosition: {
+        "top-right": { badge: "top-0 right-0" },
+        "bottom-right": { badge: "bottom-0 right-0" },
+        "top-left": { badge: "top-0 left-0" },
+        "bottom-left": { badge: "bottom-0 left-0" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "neutral",
+      badgePosition: "bottom-right"
+    }
+  })
+
+export default createAvatarTheme()

package/src/themes/badge.theme.ts

@@ -1,163 +1,169 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createBadgeTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
-    base: {
-      root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
-      label: "truncate",
-      leadingIcon: "shrink-0",
-      leadingAvatar: "shrink-0",
-      leadingAvatarSize: "",
-      trailingIcon: "shrink-0"
-    },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      },
-      size: {
-        xs: {
-          root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        sm: {
-          root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
-          leadingIcon: "size-3",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-3"
-        },
-        md: {
-          root: "text-xs px-2 py-1 gap-1 rounded-md",
-          leadingIcon: "size-4",
-          leadingAvatarSize: "3xs",
-          trailingIcon: "size-4"
-        },
-        lg: {
-          root: "text-sm px-2 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-5",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-5"
-        },
-        xl: {
-          root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
-          leadingIcon: "size-6",
-          leadingAvatarSize: "2xs",
-          trailingIcon: "size-6"
-        }
-      },
-      shape: {
-        square: { root: "rounded-sm" },
-        rounded: { root: "rounded-md" },
-        pill: { root: "rounded-full" }
-      },
-      square: {
-        true: { 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"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "outline" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50"
-        }
-      })),
-      ...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: "ring ring-inset ring-accented text-default bg-default"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "soft",
-        classNames: {
-          root: "text-default bg-elevated"
-        }
-      },
-      {
-        color: "neutral",
-        variant: "subtle",
-        classNames: {
-          root: "ring ring-inset ring-accented text-default bg-elevated"
-        }
-      },
-      {
-        size: "xs",
-        square: true,
-        classNames: { root: "p-0.5" }
-      },
-      {
-        size: "sm",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "md",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "lg",
-        square: true,
-        classNames: { root: "p-1" }
-      },
-      {
-        size: "xl",
-        square: true,
-        classNames: { root: "p-1" }
-      }
-    ],
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md",
-      shape: "pill"
-    }
-  })
-
-export default createBadgeTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createBadgeTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "label", "leadingIcon", "leadingAvatar", "leadingAvatarSize", "trailingIcon"],
+    base: {
+      root: "font-medium inline-flex items-center gap-1.5 transition-all duration-150 select-none",
+      label: "truncate",
+      leadingIcon: "shrink-0",
+      leadingAvatar: "shrink-0",
+      leadingAvatarSize: "",
+      trailingIcon: "shrink-0"
+    },
+    variants: {
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      },
+      size: {
+        xs: {
+          root: "text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm",
+          leadingIcon: "size-3",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-3"
+        },
+        sm: {
+          root: "text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm",
+          leadingIcon: "size-3",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-3"
+        },
+        md: {
+          root: "text-xs px-2 py-1 gap-1 rounded-md",
+          leadingIcon: "size-4",
+          leadingAvatarSize: "3xs",
+          trailingIcon: "size-4"
+        },
+        lg: {
+          root: "text-sm px-2 py-1 gap-1.5 rounded-md",
+          leadingIcon: "size-5",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-5"
+        },
+        xl: {
+          root: "text-base px-2.5 py-1 gap-1.5 rounded-md",
+          leadingIcon: "size-6",
+          leadingAvatarSize: "2xs",
+          trailingIcon: "size-6"
+        }
+      },
+      shape: {
+        square: { root: "rounded-sm" },
+        rounded: { root: "rounded-md" },
+        pill: { root: "rounded-full" }
+      },
+      square: {
+        true: { 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"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/50"
+        }
+      })),
+      ...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: "ring ring-inset ring-accented text-default bg-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-default bg-elevated"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "ring ring-inset ring-accented text-default bg-elevated"
+        }
+      },
+      {
+        size: "xs",
+        square: true,
+        classNames: { root: "p-0.5" }
+      },
+      {
+        size: "sm",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "md",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "lg",
+        square: true,
+        classNames: { root: "p-1" }
+      },
+      {
+        size: "xl",
+        square: true,
+        classNames: { root: "p-1" }
+      }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      shape: "pill"
+    }
+  })
+
+export default createBadgeTheme()

package/src/themes/banner.theme.ts

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

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

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