@rimelight/ui 0.0.32 → 0.0.33

package/src/themes/link-group.theme.ts

@@ -1,10 +1,32 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createLinkGroupTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "list", "item", "link"],
+    base: {
+      root: "flex flex-col gap-4",
+      title: "font-bold text-sm uppercase tracking-wider text-neutral-500",
+      list: "flex flex-col gap-2",
+      item: "",
+      link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
+    },
+    variants: {
+      theme: {
+        flat: {
+          link: "text-white hover:text-accent-foreground",
+          title: "text-white"
+        },
+        dark: {
+          link: "text-white hover:text-accent-foreground",
+          title: "text-white"
+        },
+        light: {
+          link: "text-foreground hover:text-accent-foreground",
+          title: "text-foreground"
+        }
+      }
+    },
+    defaultVariants: {}
+  })
+
+export default createLinkGroupTheme()

package/src/themes/link.theme.ts

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

package/src/themes/listbox.theme.ts

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

package/src/themes/locale-selector.theme.ts

@@ -1,50 +1,49 @@
 import { defineTheme } from "../utils/defineTheme"
-export default defineTheme({
-    slots: [
-        "root",
-        "label",
-        "wrapper",
-        "select",
-        "option",
-        "iconWrapper"
-    ],
+export const createLocaleSelectorTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "wrapper", "select", "option", "iconWrapper"],
     base: {
-        root: "inline-flex flex-col gap-1.5",
-        label: "text-xs font-semibold text-muted select-none",
-        wrapper: "relative inline-block w-full",
-        select: "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
-        option: "bg-neutral-900 text-white selection:bg-neutral-800",
-        iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
+      root: "inline-flex flex-col gap-1.5",
+      label: "text-xs font-semibold text-muted select-none",
+      wrapper: "relative inline-block w-full",
+      select:
+        "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
+      option: "bg-neutral-900 text-white selection:bg-neutral-800",
+      iconWrapper:
+        "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
     },
     variants: {
-        variant: {
-            default: {
-                select: "bg-gray-100 text-gray-800 hover:bg-gray-200 border border-transparent"
-            },
-            outline: {
-                select: "bg-transparent border border-neutral-800 text-white hover:bg-neutral-900 hover:border-neutral-700"
-            },
-            ghost: {
-                select: "bg-transparent border border-transparent text-white hover:bg-neutral-900"
-            }
+      variant: {
+        default: {
+          select: "bg-gray-100 text-gray-800 hover:bg-gray-200 border border-transparent"
         },
-        size: {
-            sm: {
-                label: "text-xxs",
-                select: "text-xs px-3 py-1.5 pr-8"
-            },
-            md: {
-                label: "text-xs",
-                select: "text-sm px-4 py-2 pr-9"
-            },
-            lg: {
-                label: "text-sm",
-                select: "text-base px-5 py-2.5 pr-10"
-            }
+        outline: {
+          select:
+            "bg-transparent border border-neutral-800 text-white hover:bg-neutral-900 hover:border-neutral-700"
+        },
+        ghost: {
+          select: "bg-transparent border border-transparent text-white hover:bg-neutral-900"
+        }
+      },
+      size: {
+        sm: {
+          label: "text-xxs",
+          select: "text-xs px-3 py-1.5 pr-8"
+        },
+        md: {
+          label: "text-xs",
+          select: "text-sm px-4 py-2 pr-9"
+        },
+        lg: {
+          label: "text-sm",
+          select: "text-base px-5 py-2.5 pr-10"
         }
+      }
     },
     defaultVariants: {
-        variant: "default",
-        size: "md"
+      variant: "default",
+      size: "md"
     }
-})
+  })
+
+export default createLocaleSelectorTheme()

package/src/themes/logo.theme.ts

@@ -1,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
-  },
-  variants: {},
-  defaultVariants: {}
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createLogoTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createLogoTheme()

package/src/themes/main.theme.ts

@@ -1,12 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-    slots: [
-        "root"
-    ],
+export const createMainTheme = () =>
+  defineTheme({
+    slots: ["root"],
     base: {
-        root: "min-h-[calc(100vh-var(--ui-header-height))]"
+      root: "min-h-[calc(100vh-var(--ui-header-height))]"
     },
     variants: {},
     defaultVariants: {}
-})
+  })
+
+export default createMainTheme()

package/src/themes/marquee.theme.ts

@@ -1,27 +1,29 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const marqueeTheme = defineTheme({
-  slots: ["root", "track"],
-  base: {
-    root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
-    track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
-  },
-  variants: {
-    direction: {
-      left: { track: "flex-row animate-marquee-left" },
-      right: { track: "flex-row animate-marquee-right" },
-      up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
-      down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
+export const createMarqueeTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "track"],
+    base: {
+      root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
+      track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
     },
-    pauseOnHover: {
-      true: { track: "hover:[animation-play-state:paused]" },
-      false: { track: "" }
+    variants: {
+      direction: {
+        left: { track: "flex-row animate-marquee-left" },
+        right: { track: "flex-row animate-marquee-right" },
+        up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
+        down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
+      },
+      pauseOnHover: {
+        true: { track: "hover:[animation-play-state:paused]" },
+        false: { track: "" }
+      }
+    },
+    defaultVariants: {
+      direction: "left",
+      pauseOnHover: true
     }
-  },
-  defaultVariants: {
-    direction: "left",
-    pauseOnHover: true
-  }
-})
+  })
 
-export default marqueeTheme
+export default createMarqueeTheme()

package/src/themes/megamenu.theme.ts

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

package/src/themes/meter.theme.ts

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

package/src/themes/modal.theme.ts

@@ -1,37 +1,49 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const modalTheme = defineTheme({
-  slots: ["root", "trigger", "backdrop", "content", "header", "title", "description", "footer", "closeButton"],
-  base: {
-    root: "relative inline-block",
-    trigger: "",
-    backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
-    content: [
-      "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
-      "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+export const createModalTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "backdrop",
+      "content",
+      "header",
+      "title",
+      "description",
+      "footer",
+      "closeButton"
     ],
-    header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
-    title: "text-lg font-semibold leading-none tracking-tight text-foreground",
-    description: "text-sm text-muted-foreground leading-relaxed",
-    footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
-    closeButton: [
-      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
-      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
-    ]
-  },
-  variants: {
-    size: {
-      sm: { content: "max-w-sm" },
-      md: { content: "max-w-lg" },
-      lg: { content: "max-w-2xl" },
-      xl: { content: "max-w-4xl" }
+    base: {
+      root: "relative inline-block",
+      trigger: "",
+      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+      content: [
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
+        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+      ],
+      header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+      description: "text-sm text-muted-foreground leading-relaxed",
+      footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
+      closeButton: [
+        "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      ]
+    },
+    variants: {
+      size: {
+        sm: { content: "max-w-sm" },
+        md: { content: "max-w-lg" },
+        lg: { content: "max-w-2xl" },
+        xl: { content: "max-w-4xl" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
     }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-})
+  })
 
-export default modalTheme
+export default createModalTheme()

package/src/themes/navigation-menu.theme.ts

@@ -1,19 +1,27 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createNavigationMenuTheme = () =>
-  defineTheme({
-    slots: ["root", "list", "item", "link", "trigger", "content", "viewport"],
-    base: {
-      root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      list: "group flex flex-1 list-none items-center justify-center space-x-1",
-      item: "relative",
-      link: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-      trigger: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
-      content: "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
-      viewport: "absolute left-0 top-full flex justify-center w-full"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createNavigationMenuTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createNavigationMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "trigger", "content", "viewport"],
+    base: {
+      root: "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      list: "group flex flex-1 list-none items-center justify-center space-x-1",
+      item: "relative",
+      link: "inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors hover:text-accent-foreground focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+      trigger:
+        "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 gap-1",
+      content:
+        "absolute left-0 top-full z-50 mt-1.5 w-56 rounded-md border bg-popover p-1 text-popover-foreground shadow-md origin-top-left",
+      viewport: "absolute left-0 top-full flex justify-center w-full"
+    },
+    variants: {
+      theme: {
+        flat: { link: "rl-flat", trigger: "rl-flat" },
+        light: { link: "rl-light", trigger: "rl-light" },
+        dark: { link: "rl-dark", trigger: "rl-dark" }
+      }
+    },
+    defaultVariants: {}
+  })
+
+export default createNavigationMenuTheme()

package/src/themes/page-aside.theme.ts

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

package/src/themes/page-body.theme.ts

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

package/src/themes/page-header.theme.ts

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