@rimelight/ui 0.0.32 → 0.0.34

package/src/themes/pricing-table.theme.ts

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

package/src/themes/progress.theme.ts

@@ -1,7 +1,6 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createProgressTheme = (colors: string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "indicator"],
@@ -10,13 +9,15 @@ export const createProgressTheme = (colors: string[] = defaultColors) =>
       indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
     },
     variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          indicator: `bg-[var(--rl-bg)]`
-        }
-      ])),
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            indicator: `bg-[var(--rl-bg)]`
+          }
+        ])
+      ),
       size: {
         sm: { root: "h-1.5" },
         md: { root: "h-3" },

package/src/themes/prose.theme.ts

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

package/src/themes/qr-code.theme.ts

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

package/src/themes/quote.theme.ts

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

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

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

package/src/themes/rating.theme.ts

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

package/src/themes/scroll-area.theme.ts

@@ -5,8 +5,10 @@ export const createScrollAreaTheme = () =>
     slots: ["root", "viewport", "scrollbar", "thumb"],
     base: {
       root: "relative overflow-hidden w-full",
-      viewport: "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-      scrollbar: "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
+      viewport:
+        "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+      scrollbar:
+        "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
       thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
     },
     variants: {

package/src/themes/scroll-to-top.theme.ts

@@ -12,16 +12,18 @@ export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary
       icon: "size-6 text-white"
     },
     variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          progressBase: "",
-          svg: "",
-          iconContainer: "",
-          icon: ""
-        }
-      ])),
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            progressBase: "",
+            svg: "",
+            iconContainer: "",
+            icon: ""
+          }
+        ])
+      ),
       theme: {
         flat: { root: "rl-flat" },
         light: { root: "rl-light" },

package/src/themes/select.theme.ts

@@ -6,8 +6,10 @@ export const createSelectTheme = () =>
     base: {
       root: "relative w-full flex flex-col gap-1.5",
       label: "text-sm font-medium text-foreground",
-      trigger: "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      content: "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
+      trigger:
+        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      content:
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
       item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       itemText: "truncate",
       itemIcon: "ml-auto size-4"

package/src/themes/separator.theme.ts

@@ -1,19 +1,147 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const separatorTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "shrink-0 bg-border"
-  },
-  variants: {
-    orientation: {
-      horizontal: { root: "h-[1px] w-full" },
-      vertical: { root: "h-full w-[1px]" }
+export const createSeparatorTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
+    base: {
+      root: "flex items-center align-center text-center",
+      border: "",
+      container: "font-medium text-default flex",
+      icon: "shrink-0 size-5",
+      avatar: "shrink-0",
+      avatarSize: "2xs",
+      label: "text-sm"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
+        neutral: { border: "border-default" }
+      },
+      orientation: {
+        horizontal: {
+          root: "w-full flex-row",
+          border: "w-full",
+          container: "whitespace-nowrap"
+        },
+        vertical: {
+          root: "h-full flex-col",
+          border: "h-full",
+          container: ""
+        }
+      },
+      size: {
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
+      },
+      position: {
+        start: {},
+        center: {},
+        end: {}
+      },
+      type: {
+        solid: {
+          border: "border-solid"
+        },
+        dashed: {
+          border: "border-dashed"
+        },
+        dotted: {
+          border: "border-dotted"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        orientation: "horizontal",
+        position: "start",
+        classNames: { container: "me-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "center",
+        classNames: { container: "mx-3" }
+      },
+      {
+        orientation: "horizontal",
+        position: "end",
+        classNames: { container: "ms-3" }
+      },
+      {
+        orientation: "vertical",
+        position: "start",
+        classNames: { container: "mb-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "center",
+        classNames: { container: "my-2" }
+      },
+      {
+        orientation: "vertical",
+        position: "end",
+        classNames: { container: "mt-2" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xs",
+        classNames: { border: "border-t" }
+      },
+      {
+        orientation: "horizontal",
+        size: "sm",
+        classNames: { border: "border-t-[2px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "md",
+        classNames: { border: "border-t-[3px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "lg",
+        classNames: { border: "border-t-[4px]" }
+      },
+      {
+        orientation: "horizontal",
+        size: "xl",
+        classNames: { border: "border-t-[5px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xs",
+        classNames: { border: "border-s" }
+      },
+      {
+        orientation: "vertical",
+        size: "sm",
+        classNames: { border: "border-s-[2px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "md",
+        classNames: { border: "border-s-[3px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "lg",
+        classNames: { border: "border-s-[4px]" }
+      },
+      {
+        orientation: "vertical",
+        size: "xl",
+        classNames: { border: "border-s-[5px]" }
+      }
+    ],
+    defaultVariants: {
+      color: "neutral",
+      size: "xs",
+      type: "solid",
+      orientation: "horizontal"
     }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
-})
+  })
 
-export default separatorTheme
+export default createSeparatorTheme()

package/src/themes/sidebar.theme.ts

@@ -5,13 +5,16 @@ export const createSidebarTheme = () =>
     slots: ["root", "header", "content", "footer", "item", "itemLink", "itemIcon", "itemBadge"],
     base: {
       root: "flex flex-col h-full w-64 bg-background border-r border-border shadow-sm transition-all duration-300",
-      header: "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
+      header:
+        "flex h-16 items-center px-6 border-b border-border gap-2 font-semibold text-lg text-foreground",
       content: "flex-1 overflow-y-auto p-4 flex flex-col gap-1.5",
       footer: "p-4 border-t border-border flex items-center justify-between",
       item: "relative",
-      itemLink: "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
+      itemLink:
+        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer",
       itemIcon: "size-4 text-current",
-      itemBadge: "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
+      itemBadge:
+        "ml-auto flex size-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold"
     },
     variants: {
       side: {
@@ -19,7 +22,9 @@ export const createSidebarTheme = () =>
         right: { root: "right-0 border-l" }
       },
       collapsible: {
-        icon: { root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden" },
+        icon: {
+          root: "w-16 [&_[data-slot=item-text]]:hidden [&_[data-slot=item-badge]]:hidden [&_[data-slot=sidebar-logo]]:hidden"
+        },
         offcanvas: { root: "-translate-x-full" },
         none: {}
       }

package/src/themes/skeleton.theme.ts

@@ -1,20 +1,21 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const skeletonTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "animate-pulse bg-muted shrink-0"
-  },
-  variants: {
-    shape: {
-      circle: { root: "rounded-full" },
-      rectangle: { root: "rounded-none" },
-      rounded: { root: "rounded-md" }
+export const createSkeletonTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "animate-pulse bg-elevated shrink-0"
+    },
+    variants: {
+      shape: {
+        circle: { root: "rounded-full" },
+        rectangle: { root: "rounded-none" },
+        rounded: { root: "rounded-md" }
+      }
+    },
+    defaultVariants: {
+      shape: "rounded"
     }
-  },
-  defaultVariants: {
-    shape: "rounded"
-  }
-})
+  })
 
-export default skeletonTheme
+export default createSkeletonTheme()

package/src/themes/slideover.theme.ts

@@ -1,43 +1,59 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const slideoverTheme = 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 z-50 bg-background p-6 shadow-xl border-border transition-all duration-300 outline-none",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out"
+export const createSlideoverTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "backdrop",
+      "content",
+      "header",
+      "title",
+      "description",
+      "footer",
+      "closeButton"
     ],
-    header: "flex flex-col gap-1.5 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 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: {
-    side: {
-      top: {
-        content: "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
-      },
-      bottom: {
-        content: "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
-      },
-      left: {
-        content: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
-      },
-      right: {
-        content: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+    base: {
+      root: "relative inline-block",
+      trigger: "",
+      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+      content: [
+        "fixed z-50 bg-background p-6 shadow-xl border-border transition-all duration-300 outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out"
+      ],
+      header: "flex flex-col gap-1.5 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 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 text-foreground",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      ]
+    },
+    variants: {
+      side: {
+        top: {
+          content:
+            "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top"
+        },
+        bottom: {
+          content:
+            "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+        },
+        left: {
+          content:
+            "inset-y-0 left-0 right-auto h-full w-2/3 max-w-sm border-r m-0 max-h-none data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left"
+        },
+        right: {
+          content:
+            "inset-y-0 right-0 left-auto h-full w-2/3 max-w-sm border-l m-0 max-h-none data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+        }
       }
+    },
+    defaultVariants: {
+      side: "left"
     }
-  },
-  defaultVariants: {
-    side: "right"
-  }
-})
+  })
 
-export default slideoverTheme
+export default createSlideoverTheme()

package/src/themes/slider.theme.ts

@@ -1,7 +1,6 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createSliderTheme = (colors: string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "track", "range", "thumb"],
@@ -9,17 +8,20 @@ export const createSliderTheme = (colors: string[] = defaultColors) =>
       root: "relative flex w-full touch-none select-none items-center",
       track: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
       range: "absolute h-full",
-      thumb: "block size-4.5 rounded-full border border-border bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
+      thumb:
+        "block size-4.5 rounded-full border border-border bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
     },
     variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          range: `bg-[var(--rl-bg)]`,
-          thumb: `focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)]`
-        }
-      ])),
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            range: `bg-[var(--rl-bg)]`,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)]`
+          }
+        ])
+      ),
       theme: {
         flat: { root: "rl-flat" },
         light: { root: "rl-light" },

package/src/themes/speed-dial.theme.ts

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

package/src/themes/spinner.theme.ts

@@ -1,7 +1,6 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createSpinnerTheme = (colors: string[] = defaultColors) =>
   defineTheme({
     slots: ["root"],
@@ -18,7 +17,7 @@ export const createSpinnerTheme = (colors: string[] = defaultColors) =>
       },
       color: Object.fromEntries([
         ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: `rl-color-${color} text-[var(--rl-text)]` }])
+        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
       ]),
       theme: {
         flat: { root: "rl-flat" },

package/src/themes/splitter.theme.ts

@@ -6,7 +6,8 @@ export const createSplitterTheme = () =>
     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"
+      handle:
+        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
     },
     variants: {
       direction: {