@rimelight/ui 0.0.33 → 0.0.34

package/src/themes/separator.theme.ts

@@ -1,147 +1,147 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-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"
-    }
-  })
-
-export default createSeparatorTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+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"
+    }
+  })
+
+export default createSeparatorTheme()

package/src/themes/sidebar.theme.ts

@@ -1,38 +1,38 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSidebarTheme = () =>
-  defineTheme({
-    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",
-      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",
-      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"
-    },
-    variants: {
-      side: {
-        left: { root: "left-0 border-r" },
-        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"
-        },
-        offcanvas: { root: "-translate-x-full" },
-        none: {}
-      }
-    },
-    defaultVariants: {
-      side: "left",
-      collapsible: "none"
-    }
-  })
-
-export default createSidebarTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSidebarTheme = () =>
+  defineTheme({
+    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",
+      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",
+      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"
+    },
+    variants: {
+      side: {
+        left: { root: "left-0 border-r" },
+        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"
+        },
+        offcanvas: { root: "-translate-x-full" },
+        none: {}
+      }
+    },
+    defaultVariants: {
+      side: "left",
+      collapsible: "none"
+    }
+  })
+
+export default createSidebarTheme()

package/src/themes/skeleton.theme.ts

@@ -1,21 +1,21 @@
-import { defineTheme } from "../utils/defineTheme"
-
-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"
-    }
-  })
-
-export default createSkeletonTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+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"
+    }
+  })
+
+export default createSkeletonTheme()

package/src/themes/slideover.theme.ts

@@ -27,7 +27,7 @@ export const createSlideoverTheme = (colors: string[] = defaultColors) =>
       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",
+        "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"
       ]
     },
@@ -43,16 +43,16 @@ export const createSlideoverTheme = (colors: string[] = defaultColors) =>
         },
         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"
+            "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 h-full w-3/4 max-w-sm border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right"
+            "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: "right"
+      side: "left"
     }
   })
 

package/src/themes/slider.theme.ts

@@ -1,36 +1,36 @@
-import { defaultColors } from "../presets/defaults"
-import { defineTheme } from "../utils/defineTheme"
-
-export const createSliderTheme = (colors: string[] = defaultColors) =>
-  defineTheme({
-    slots: ["root", "track", "range", "thumb"],
-    base: {
-      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"
-    },
-    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)]`
-          }
-        ])
-      ),
-      theme: {
-        flat: { root: "rl-flat" },
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      color: "primary"
-    }
-  })
-
-export default createSliderTheme()
+import { defaultColors } from "../presets/defaults"
+import { defineTheme } from "../utils/defineTheme"
+
+export const createSliderTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "track", "range", "thumb"],
+    base: {
+      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"
+    },
+    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)]`
+          }
+        ])
+      ),
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createSliderTheme()

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

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

package/src/themes/spinner.theme.ts

@@ -1,34 +1,34 @@
-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: 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()

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()