@rimelight/ui 0.0.32 → 0.0.33

package/src/themes/sidebar.theme.ts

@@ -1,33 +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,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" }
-    }
-  },
-  defaultVariants: {
-    shape: "rounded"
-  }
-})
-
-export default skeletonTheme
+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

@@ -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",
+        "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"
+        }
       }
+    },
+    defaultVariants: {
+      side: "right"
     }
-  },
-  defaultVariants: {
-    side: "right"
-  }
-})
+  })
 
-export default slideoverTheme
+export default createSlideoverTheme()

package/src/themes/slider.theme.ts

@@ -1,34 +1,36 @@
-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"],
-    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,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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,35 +1,34 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
-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,22 +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,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+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,10 +1,13 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createStepperTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createStepperTheme()

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

@@ -1,10 +1,12 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const stickySurfaceTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "sticky top-0 self-start transition-all duration-300"
-  }
-})
+export const createStickySurfaceTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "sticky top-0 self-start transition-all duration-300"
+    }
+  })
 
-export default stickySurfaceTheme
+export default createStickySurfaceTheme()

package/src/themes/switch.theme.ts

@@ -1,65 +1,67 @@
-import { defineTheme } from "../utils/defineTheme"
-
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
-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: 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()