@rimelight/ui 0.0.33 → 0.0.35

package/src/themes/spinner.theme.ts

@@ -1,34 +1,33 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSpinnerTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
-    },
-    variants: {
-      size: {
-        xs: { root: "size-3" },
-        sm: { root: "size-4" },
-        md: { root: "size-6" },
-        lg: { root: "size-8" },
-        xl: { root: "size-10" }
-      },
-      color: Object.fromEntries([
-        ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
-      ]),
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "current"
-    }
-  })
-
-export default createSpinnerTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSpinnerTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
+    },
+    variants: {
+      size: {
+        xs: { root: "size-3" },
+        sm: { root: "size-4" },
+        md: { root: "size-6" },
+        lg: { root: "size-8" },
+        xl: { root: "size-10" }
+      },
+      color: Object.fromEntries([
+        ["current", { root: "text-current" }],
+        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
+      ]),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "current"
+    }
+  })
+
+export default createSpinnerTheme()

package/src/themes/splitter.theme.ts

@@ -1,23 +1,23 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSplitterTheme = () =>
-  defineTheme({
-    slots: ["root", "panel", "handle"],
-    base: {
-      root: "flex w-full h-full",
-      panel: "overflow-auto transition-all",
-      handle:
-        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
-    },
-    variants: {
-      direction: {
-        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
-        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
-      }
-    },
-    defaultVariants: {
-      direction: "horizontal"
-    }
-  })
-
-export default createSplitterTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSplitterTheme = () =>
+  defineTheme({
+    slots: ["root", "panel", "handle"],
+    base: {
+      root: "flex w-full h-full",
+      panel: "overflow-auto transition-all",
+      handle:
+        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+    },
+    variants: {
+      direction: {
+        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
+        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
+      }
+    },
+    defaultVariants: {
+      direction: "horizontal"
+    }
+  })
+
+export default createSplitterTheme()

package/src/themes/spoiler.theme.ts

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

package/src/themes/stepper.theme.ts

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

package/src/themes/{megamenu.theme.ts → steps.theme.ts}

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

package/src/themes/sticky-surface.theme.ts

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

package/src/themes/switch.theme.ts

@@ -1,67 +1,66 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSwitchTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "input", "track", "thumb", "label"],
-    base: {
-      root: "inline-flex items-center gap-2 cursor-pointer select-none",
-      input: "absolute opacity-0 size-0 pointer-events-none peer",
-      track: [
-        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-      ],
-      thumb:
-        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
-      label: "text-sm text-foreground leading-none"
-    },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      size: {
-        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
-        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
-        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
-      },
-      checked: {
-        true: { thumb: "translate-x-full" },
-        false: { thumb: "translate-x-0" }
-      },
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    compoundVariants: [
-      {
-        size: "sm",
-        checked: true,
-        classNames: { thumb: "translate-x-3" }
-      },
-      {
-        size: "md",
-        checked: true,
-        classNames: { thumb: "translate-x-4" }
-      },
-      {
-        size: "lg",
-        checked: true,
-        classNames: { thumb: "translate-x-5" }
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
-      size: "md",
-      checked: false
-    }
-  })
-
-export default createSwitchTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSwitchTheme = (colors: readonly string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "input", "track", "thumb", "label"],
+    base: {
+      root: "inline-flex items-center gap-2 cursor-pointer select-none",
+      input: "absolute opacity-0 size-0 pointer-events-none peer",
+      track: [
+        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      thumb:
+        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      size: {
+        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
+        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
+        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
+      },
+      checked: {
+        true: { thumb: "translate-x-full" },
+        false: { thumb: "translate-x-0" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        checked: true,
+        classNames: { thumb: "translate-x-3" }
+      },
+      {
+        size: "md",
+        checked: true,
+        classNames: { thumb: "translate-x-4" }
+      },
+      {
+        size: "lg",
+        checked: true,
+        classNames: { thumb: "translate-x-5" }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createSwitchTheme()

package/src/themes/table-of-contents.theme.ts

@@ -1,48 +1,67 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTableOfContentsTheme = () =>
-  defineTheme({
-    slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
-    base: {
-      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
-      container:
-        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
-      top: "",
-      bottom: "hidden lg:flex lg:flex-col gap-6",
-      trigger:
-        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
-      title: "truncate",
-      trailing: "ms-auto inline-flex gap-1.5 items-center",
-      trailingIcon:
-        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
-      content:
-        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
-      list: "min-w-0",
-      listWithChildren: "ms-3",
-      item: "min-w-0",
-      itemWithChildren: "",
-      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
-      linkText: "truncate",
-      indicator: "",
-      indicatorLine: "",
-      indicatorActive: ""
-    },
-    variants: {
-      interactive: {
-        true: {
-          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
-        },
-        false: { root: "" }
-      },
-      overlay: {
-        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
-        false: { root: "" }
-      }
-    },
-    defaultVariants: {
-      interactive: false,
-      overlay: false
-    }
-  })
-
-export default createTableOfContentsTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTableOfContentsTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "container",
+      "top",
+      "bottom",
+      "trigger",
+      "title",
+      "trailing",
+      "trailingIcon",
+      "content",
+      "list",
+      "listWithChildren",
+      "item",
+      "itemWithChildren",
+      "link",
+      "linkText",
+      "indicator",
+      "indicatorLine",
+      "indicatorActive"
+    ],
+    base: {
+      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 xl:mx-0 overflow-y-auto overflow-x-hidden max-h-[calc(100vh-var(--ui-header-height))]",
+      container:
+        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+      top: "",
+      bottom: "hidden lg:flex lg:flex-col gap-6",
+      trigger:
+        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+      title: "truncate",
+      trailing: "ms-auto inline-flex gap-1.5 items-center",
+      trailingIcon:
+        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+      content:
+        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+      list: "min-w-0",
+      listWithChildren: "ms-3",
+      item: "min-w-0",
+      itemWithChildren: "",
+      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+      linkText: "truncate",
+      indicator: "",
+      indicatorLine: "",
+      indicatorActive: ""
+    },
+    variants: {
+      interactive: {
+        true: {
+          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
+        },
+        false: { root: "" }
+      },
+      overlay: {
+        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
+        false: { root: "" }
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      overlay: false
+    }
+  })
+
+export default createTableOfContentsTheme()

package/src/themes/tabs.theme.ts

@@ -1,52 +1,52 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTabsTheme = () =>
-  defineTheme({
-    slots: ["root", "list", "trigger", "content"],
-    base: {
-      root: "w-full flex flex-col gap-4",
-      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
-      trigger:
-        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
-      content:
-        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-    },
-    variants: {
-      variant: {
-        solid: {
-          list: "bg-muted p-1 rounded-lg",
-          trigger:
-            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
-        },
-        underline: {
-          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
-          trigger:
-            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
-        },
-        pills: {
-          list: "bg-transparent p-0 gap-2",
-          trigger:
-            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
-        }
-      },
-      orientation: {
-        horizontal: { root: "flex-col", list: "w-full" },
-        vertical: {
-          root: "flex-row gap-6",
-          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
-        }
-      },
-      size: {
-        sm: { trigger: "text-xs px-2.5 py-1" },
-        md: { trigger: "text-sm px-3.5 py-1.5" },
-        lg: { trigger: "text-base px-4.5 py-2" }
-      }
-    },
-    defaultVariants: {
-      variant: "solid",
-      orientation: "horizontal",
-      size: "md"
-    }
-  })
-
-export default createTabsTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTabsTheme = () =>
+  defineTheme({
+    slots: ["root", "list", "trigger", "content"],
+    base: {
+      root: "w-full flex flex-col gap-4",
+      list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
+      trigger:
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
+      content:
+        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    },
+    variants: {
+      variant: {
+        solid: {
+          list: "bg-muted p-1 rounded-lg",
+          trigger:
+            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+        },
+        underline: {
+          list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
+          trigger:
+            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+        },
+        pills: {
+          list: "bg-transparent p-0 gap-2",
+          trigger:
+            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+        }
+      },
+      orientation: {
+        horizontal: { root: "flex-col", list: "w-full" },
+        vertical: {
+          root: "flex-row gap-6",
+          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
+        }
+      },
+      size: {
+        sm: { trigger: "text-xs px-2.5 py-1" },
+        md: { trigger: "text-sm px-3.5 py-1.5" },
+        lg: { trigger: "text-base px-4.5 py-2" }
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      orientation: "horizontal",
+      size: "md"
+    }
+  })
+
+export default createTabsTheme()

package/src/themes/textarea.theme.ts

@@ -1,27 +1,27 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTextareaTheme = () =>
-  defineTheme({
-    slots: ["root", "textarea"],
-    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",
-      textarea:
-        "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
-    },
-    variants: {
-      size: {
-        sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
-        md: { textarea: "py-2 text-sm min-h-[80px]" },
-        lg: { textarea: "py-2.5 text-base min-h-[100px]" }
-      },
-      error: {
-        true: { root: "border-error-500 focus-within:ring-error-500/50" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      error: false
-    }
-  })
-
-export default createTextareaTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTextareaTheme = () =>
+  defineTheme({
+    slots: ["root", "textarea"],
+    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",
+      textarea:
+        "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+    },
+    variants: {
+      size: {
+        sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
+        md: { textarea: "py-2 text-sm min-h-[80px]" },
+        lg: { textarea: "py-2.5 text-base min-h-[100px]" }
+      },
+      error: {
+        true: { root: "border-error-500 focus-within:ring-error-500/50" }
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  })
+
+export default createTextareaTheme()

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

@@ -1,15 +1,15 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createThemeSelectorTheme = () =>
-  defineTheme({
-    slots: ["root", "sun", "moon"],
-    base: {
-      root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
-      sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
-      moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createThemeSelectorTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createThemeSelectorTheme = () =>
+  defineTheme({
+    slots: ["root", "sun", "moon"],
+    base: {
+      root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
+      sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
+      moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createThemeSelectorTheme()