@rimelight/ui 0.0.33 → 0.0.35

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

@@ -1,27 +1,44 @@
-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()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createNavigationMenuTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "trigger", "content", "viewport", "viewportWrapper"],
+    base: {
+      root: "relative z-10 flex w-full",
+      list: "group flex flex-1 list-none",
+      item: "relative",
+      link: "text-foreground inline-flex items-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 items-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",
+      viewportWrapper: "absolute left-0 top-full flex justify-center w-full",
+      viewport:
+        "relative mt-1.5 h-auto w-full origin-[top_center] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90"
+    },
+    variants: {
+      theme: {
+        light: { link: "rl-light", trigger: "rl-light" },
+        dark: { link: "rl-dark", trigger: "rl-dark" }
+      },
+      orientation: {
+        horizontal: {
+          root: "max-w-max flex-1 items-center justify-center",
+          list: "items-center justify-center space-x-1",
+          link: "justify-center w-max",
+          trigger: "w-max"
+        },
+        vertical: {
+          root: "flex-col w-full items-stretch justify-start",
+          list: "flex-col flex-1 items-stretch justify-start space-y-2 w-full",
+          link: "justify-start w-full px-4 py-2 text-lg",
+          trigger: "justify-start w-full h-10 px-4 py-2 text-lg"
+        }
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  })
+
+export default createNavigationMenuTheme()

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

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createPageAsideTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPageAsideTheme()
+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,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createPageBodyTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPageBodyTheme()
+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,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createPageHeaderTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createPageHeaderTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createPageHeaderTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPageHeaderTheme()

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

@@ -1,187 +1,189 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createPageSectionTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "background",
-      "container",
-      "wrapper",
-      "header",
-      "leading",
-      "leadingIcon",
-      "headline",
-      "title",
-      "description",
-      "body",
-      "footer",
-      "links"
-    ],
-    base: {
-      root: "relative isolate",
-      background: "absolute inset-0 -z-1 overflow-hidden",
-      container: "mx-auto w-full max-w-90rem px-md flex flex-col lg:grid",
-      wrapper: "",
-      header: "",
-      leading: "flex items-center mb-6",
-      leadingIcon: "size-10 shrink-0 text-primary",
-      headline: "",
-      title: "text-pretty tracking-tight font-bold",
-      description: "text-muted-foreground",
-      body: "",
-      footer: "",
-      links: "flex flex-wrap"
-    },
-    variants: {
-      variant: {
-        default: {
-          container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
-          headline: "mb-3",
-          title: "text-3xl sm:text-4xl lg:text-5xl text-highlighted",
-          description: "text-base sm:text-lg",
-          body: "mt-8",
-          footer: "mt-8",
-          links: "gap-x-6 gap-y-3"
-        },
-        hero: {
-          container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
-          headline: "mb-4",
-          title: "text-5xl sm:text-7xl text-highlighted",
-          description: "text-lg sm:text-xl/8",
-          leading: "mb-6",
-          body: "mt-10",
-          footer: "mt-10",
-          links: "gap-x-6 gap-y-3"
-        },
-        cta: {
-          root: "rounded-xl overflow-hidden",
-          container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
-          title: "text-3xl sm:text-4xl",
-          description: "text-base sm:text-lg",
-          body: "mt-8",
-          footer: "mt-8",
-          links: "gap-x-6 gap-y-3"
-        }
-      },
-      ctaVariant: {
-        solid: {
-          root: "bg-inverted text-inverted",
-          description: "text-dimmed"
-        },
-        outline: {
-          root: "bg-default ring ring-default",
-          description: "text-muted"
-        },
-        soft: {
-          root: "bg-elevated/50",
-          description: "text-toned"
-        },
-        subtle: {
-          root: "bg-elevated/50 ring ring-default",
-          description: "text-toned"
-        },
-        naked: {
-          description: "text-muted"
-        }
-      },
-      orientation: {
-        horizontal: {
-          container: "lg:grid-cols-2 lg:items-center",
-          description: "text-pretty"
-        },
-        vertical: {
-          container: "",
-          headline: "justify-center",
-          leading: "justify-center",
-          title: "text-center",
-          description: "text-center text-balance",
-          links: "justify-center"
-        }
-      },
-      reverse: {
-        true: {
-          wrapper: "order-last"
-        }
-      },
-      headline: {
-        true: {
-          headline: "font-semibold text-primary flex items-center gap-1.5"
-        }
-      },
-      title: {
-        true: {
-          description: "mt-6"
-        }
-      },
-      description: {
-        true: {}
-      },
-      body: {
-        true: {}
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "default",
-        orientation: "vertical",
-        title: true,
-        classNames: {
-          body: "mt-16"
-        }
-      },
-      {
-        variant: "default",
-        orientation: "vertical",
-        description: true,
-        classNames: {
-          body: "mt-16"
-        }
-      },
-      {
-        variant: "default",
-        orientation: "vertical",
-        body: true,
-        classNames: {
-          footer: "mt-16"
-        }
-      },
-      {
-        variant: "cta",
-        ctaVariant: "outline",
-        classNames: {
-          root: "bg-default ring ring-default"
-        }
-      },
-      {
-        variant: "cta",
-        ctaVariant: "solid",
-        classNames: {
-          root: "bg-inverted text-inverted",
-          title: "text-inverted",
-          description: "text-dimmed"
-        }
-      },
-      {
-        variant: "cta",
-        ctaVariant: "soft",
-        classNames: {
-          root: "bg-elevated/50",
-          description: "text-toned"
-        }
-      },
-      {
-        variant: "cta",
-        ctaVariant: "subtle",
-        classNames: {
-          root: "bg-elevated/50 ring ring-default",
-          description: "text-toned"
-        }
-      }
-    ],
-    defaultVariants: {
-      variant: "default",
-      orientation: "vertical"
-    }
-  })
-
-export default createPageSectionTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createPageSectionTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "background",
+      "container",
+      "wrapper",
+      "header",
+      "leading",
+      "leadingIcon",
+      "headline",
+      "title",
+      "description",
+      "body",
+      "footer",
+      "links"
+    ],
+    base: {
+      root: "relative isolate",
+      background: "absolute inset-0 -z-1 overflow-hidden",
+      container:
+        "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl flex flex-col lg:grid",
+      wrapper: "",
+      header: "",
+      leading: "flex items-center mb-6",
+      leadingIcon: "size-10 shrink-0 text-primary",
+      headline: "",
+      title: "text-pretty tracking-tight font-bold",
+      description: "text-muted-foreground",
+      body: "",
+      footer: "",
+      links: "flex flex-wrap"
+    },
+    variants: {
+      variant: {
+        default: {
+          container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+          headline: "mb-3",
+          title: "text-3xl sm:text-4xl lg:text-5xl text-highlighted",
+          description: "text-base sm:text-lg",
+          body: "mt-8",
+          footer: "mt-8",
+          links: "gap-x-6 gap-y-3"
+        },
+        hero: {
+          container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+          headline: "mb-4",
+          title: "text-5xl sm:text-7xl text-highlighted",
+          description: "text-lg sm:text-xl/8",
+          leading: "mb-6",
+          body: "mt-10",
+          footer: "mt-10",
+          links: "gap-x-6 gap-y-3"
+        },
+        cta: {
+          root: "rounded-xl overflow-hidden",
+          container:
+            "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl lg:grid py-12 sm:py-24 lg:py-24 gap-8 sm:gap-16",
+          title: "text-3xl sm:text-4xl",
+          description: "text-base sm:text-lg",
+          body: "mt-8",
+          footer: "mt-8",
+          links: "gap-x-6 gap-y-3"
+        }
+      },
+      ctaVariant: {
+        solid: {
+          root: "bg-inverted text-inverted",
+          description: "text-dimmed"
+        },
+        outline: {
+          root: "bg-default ring ring-default",
+          description: "text-muted"
+        },
+        soft: {
+          root: "bg-elevated/50",
+          description: "text-toned"
+        },
+        subtle: {
+          root: "bg-elevated/50 ring ring-default",
+          description: "text-toned"
+        },
+        naked: {
+          description: "text-muted"
+        }
+      },
+      orientation: {
+        horizontal: {
+          container: "lg:grid-cols-2 lg:items-center",
+          description: "text-pretty"
+        },
+        vertical: {
+          container: "",
+          headline: "justify-center",
+          leading: "justify-center",
+          title: "text-center",
+          description: "text-center text-balance",
+          links: "justify-center"
+        }
+      },
+      reverse: {
+        true: {
+          wrapper: "order-last"
+        }
+      },
+      headline: {
+        true: {
+          headline: "font-semibold text-primary flex items-center gap-1.5"
+        }
+      },
+      title: {
+        true: {
+          description: "mt-6"
+        }
+      },
+      description: {
+        true: {}
+      },
+      body: {
+        true: {}
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        orientation: "vertical",
+        title: true,
+        classNames: {
+          body: "mt-16"
+        }
+      },
+      {
+        variant: "default",
+        orientation: "vertical",
+        description: true,
+        classNames: {
+          body: "mt-16"
+        }
+      },
+      {
+        variant: "default",
+        orientation: "vertical",
+        body: true,
+        classNames: {
+          footer: "mt-16"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "outline",
+        classNames: {
+          root: "bg-default ring ring-default"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "solid",
+        classNames: {
+          root: "bg-inverted text-inverted",
+          title: "text-inverted",
+          description: "text-dimmed"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "soft",
+        classNames: {
+          root: "bg-elevated/50",
+          description: "text-toned"
+        }
+      },
+      {
+        variant: "cta",
+        ctaVariant: "subtle",
+        classNames: {
+          root: "bg-elevated/50 ring ring-default",
+          description: "text-toned"
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "vertical"
+    }
+  })
+
+export default createPageSectionTheme()

package/src/themes/page.theme.ts

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

package/src/themes/pagination.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createPaginationTheme = (colors: string[] = defaultColors) =>
+export const createPaginationTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "list", "item", "link", "ellipsis"],
     base: {

package/src/themes/password.theme.ts

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

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

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

package/src/themes/pin-input.theme.ts

@@ -1,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createPinInputTheme = (colors: string[] = defaultColors) =>
+export const createPinInputTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
     base: {