@rimelight/ui 0.0.33 → 0.0.35

package/src/themes/input.theme.ts

@@ -1,42 +1,48 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createInputTheme = () =>
-  defineTheme({
-    slots: ["root", "input", "leading", "trailing"],
-    base: {
-      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-      input:
-        "w-full bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-      leading: "absolute left-3 flex items-center justify-center text-muted-foreground",
-      trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
-    },
-    variants: {
-      size: {
-        sm: { input: "py-1 text-xs", leading: "left-2.5", trailing: "right-2.5" },
-        md: { input: "py-1.5 text-sm", leading: "left-3", trailing: "right-3" },
-        lg: { input: "py-2 text-base", leading: "left-3.5", trailing: "right-3.5" }
-      },
-      hasLeading: {
-        true: { input: "pl-9" }
-      },
-      hasTrailing: {
-        true: { input: "pr-9" }
-      },
-      error: {
-        true: { root: "border-error-500 focus-within:ring-error-500/50" }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      hasLeading: false,
-      hasTrailing: false,
-      error: false
-    }
-  })
-
-export default createInputTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createInputTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "leading", "trailing"],
+    base: {
+      root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input:
+        "w-full bg-transparent px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      leading: "absolute left-3 flex items-center justify-center text-muted-foreground",
+      trailing: "absolute right-3 flex items-center justify-center text-muted-foreground"
+    },
+    variants: {
+      variant: {
+        default: {},
+        ghost: {
+          root: "bg-transparent border-none shadow-none focus-within:ring-0"
+        }
+      },
+      size: {
+        sm: { input: "py-1 text-xs", leading: "left-2.5", trailing: "right-2.5" },
+        md: { input: "py-1.5 text-sm", leading: "left-3", trailing: "right-3" },
+        lg: { input: "py-2 text-base", leading: "left-3.5", trailing: "right-3.5" }
+      },
+      hasLeading: {
+        true: { input: "pl-9" }
+      },
+      hasTrailing: {
+        true: { input: "pr-9" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      hasLeading: false,
+      hasTrailing: false,
+      error: false
+    }
+  })
+
+export default createInputTheme()

package/src/themes/kbd.theme.ts

@@ -1,89 +1,94 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createKbdTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
-        neutral: { root: "" }
-      },
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      size: {
-        sm: { root: "h-4 min-w-[16px] text-[10px]" },
-        md: { root: "h-5 min-w-[20px] text-[11px]" },
-        lg: { root: "h-6 min-w-[24px] text-[12px]" }
-      },
-      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 + " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)]"
-        }
-      })),
-      ...colors.map((color) => ({
-        variant: "soft" as const,
-        color,
-        classNames: {
-          root: "rl-color-" + color + " text-[var(--rl-text)] 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"
-        }
-      })),
-      {
-        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" }
-      }
-    ],
-    defaultVariants: {
-      variant: "outline",
-      color: "neutral",
-      size: "md"
-    }
-  })
-
-export default createKbdTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createKbdTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+        neutral: { root: "" }
+      } as Record<string, { root: string }>,
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      size: {
+        sm: { root: "h-4 min-w-[16px] text-[10px]" },
+        md: { root: "h-5 min-w-[20px] text-[11px]" },
+        lg: { root: "h-6 min-w-[24px] text-[12px]" }
+      },
+      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 +
+            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " text-[var(--rl-text)] 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"
+        }
+      })),
+      {
+        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" }
+      }
+    ],
+    defaultVariants: {
+      variant: "outline",
+      color: "neutral",
+      size: "md"
+    }
+  })
+
+export default createKbdTheme()

package/src/themes/knob.theme.ts

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

package/src/themes/label.theme.ts

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

package/src/themes/layout-grid.theme.ts

@@ -0,0 +1,16 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export const createLayoutGridTheme = () =>
+  defineTheme({
+    slots: ["root", "overlay", "container", "columns"],
+    base: {
+      root: "",
+      overlay: "fixed top-0 left-0 w-full h-full pointer-events-none",
+      container: "h-full mx-auto",
+      columns: "grid h-full"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createLayoutGridTheme()

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

@@ -1,32 +1,28 @@
-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()
+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 pl-2.5",
+      list: "flex flex-col gap-2",
+      item: "",
+      link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
+    },
+    variants: {
+      theme: {
+        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,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createLinkTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createLinkTheme()
+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,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createListboxTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createListboxTheme()
+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,49 +1,49 @@
-import { defineTheme } from "../utils/defineTheme"
-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"
-    },
-    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"
-        }
-      },
-      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"
-    }
-  })
-
-export default createLocaleSelectorTheme()
+import { defineTheme } from "../utils/defineTheme"
+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"
+    },
+    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"
+        }
+      },
+      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"
+    }
+  })
+
+export default createLocaleSelectorTheme()

package/src/themes/logo.theme.ts

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

package/src/themes/marquee.theme.ts

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

package/src/themes/meter.theme.ts

@@ -1,13 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createMeterTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createMeterTheme()
+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,7 +1,7 @@
 import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const createModalTheme = (colors: string[] = defaultColors) =>
+export const createModalTheme = (_colors: readonly string[] = defaultColors) =>
   defineTheme({
     slots: [
       "root",