@rimelight/ui 0.0.42 → 0.0.43

package/src/components/confirm/confirm.theme.ts

@@ -1,48 +1,44 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createConfirmTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: [
-      "root",
-      "trigger",
-      "backdrop",
-      "content",
-      "header",
-      "title",
-      "description",
-      "footer",
-      "cancelButton",
-      "actionButton"
+export const confirmTheme = defineTheme("confirm", {
+  slots: [
+    "root",
+    "trigger",
+    "backdrop",
+    "content",
+    "header",
+    "title",
+    "description",
+    "footer",
+    "cancelButton",
+    "actionButton"
+  ],
+  base: {
+    root: "relative inline-block",
+    trigger: "",
+    backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+    content: [
+      "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-default",
+      "bg-default p-6 shadow-xl transition-all duration-300 outline-none",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
     ],
-    base: {
-      root: "relative inline-block",
-      trigger: "",
-      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
-      content: [
-        "fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
-        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
-      ],
-      header: "flex flex-col gap-1.5 text-center sm:text-left 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-reverse sm:flex-row sm:justify-end gap-2 mt-6",
-      cancelButton: "w-full sm:w-auto",
-      actionButton: "w-full sm:w-auto"
-    },
-    variants: {
-      variant: {
-        default: { actionButton: "" },
-        destructive: {
-          actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50"
-        }
+    header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+    title: "text-lg font-semibold leading-none tracking-tight text-highlighted",
+    description: "text-sm text-muted leading-relaxed",
+    footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
+    cancelButton: "w-full sm:w-auto",
+    actionButton: "w-full sm:w-auto"
+  },
+  variants: {
+    variant: {
+      default: { actionButton: "" },
+      destructive: {
+        actionButton: "bg-error-500 hover:bg-error-600 focus-visible:ring-error-500/50"
       }
-    },
-    defaultVariants: {
-      variant: "default"
     }
-  })
-
-export default createConfirmTheme()
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+})

package/src/components/confirm/confirm.ts

@@ -1,4 +1,5 @@
 export interface ConfirmProps {
+  variant?: "default" | "destructive"
   /**
    * Title of the alert confirmation dialog.
    */

package/src/components/container/RLAContainer.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ContainerProps } from "./container"
-import containerTheme from "./container.theme"
-
-
-const container = scv(containerTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ContainerProps
-
-const classes = resolveClasses(container, {}, useUi("container", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { containerTheme } from "./container.theme"
+
+
+
+const classes = containerTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/container/container.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createContainerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "w-full max-w-[var(--rl-container)] mx-auto px-xs sm:px-md md:px-xl lg:px-xl"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createContainerTheme()
+export const containerTheme = defineTheme("container", {
+  slots: ["root"],
+  base: {
+    root: "w-full max-w-[var(--rl-container)] mx-auto px-xs sm:px-md md:px-xl lg:px-xl"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/context-menu/RLAContextMenu.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ContextMenuProps } from "./context-menu"
-import contextMenuTheme from "./context-menu.theme"
-
-
-const contextMenu = scv(contextMenuTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ContextMenuProps
-
-const classes = resolveClasses(contextMenu, {}, useUi("contextMenu", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { contextMenuTheme } from "./context-menu.theme"
+
+
+
+const classes = contextMenuTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/context-menu/context-menu.theme.ts

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

package/src/components/dashboard-group/RLADashboardGroup.astro

@@ -1,21 +1,17 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardGroupProps } from "./dashboard-group"
-import dashboardGroupTheme from "./dashboard-group.theme"
-
-
-const dashboardGroup = scv(dashboardGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardGroupProps
-
-const classes = resolveClasses(dashboardGroup, {}, useUi("dashboardGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardGroupProps } from "./dashboard-group"
+import { dashboardGroupTheme } from "./dashboard-group.theme"
+
+
+const {
+  as: Tag = "div",
+  ...rest
+} = Astro.props as DashboardGroupProps 
+
+
+
+const classes = dashboardGroupTheme(Astro.props);
+---
+<Tag class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</Tag>

package/src/components/dashboard-group/dashboard-group.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardGroupTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardGroupTheme()
+export const dashboardGroupTheme = defineTheme("dashboard-group", {
+  slots: ["root"],
+  base: {
+    root: "relative w-full h-full min-h-0 flex overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/dashboard-group/dashboard-group.ts

@@ -1,11 +1,6 @@
 export interface DashboardGroupProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  as?: string
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-navbar/RLADashboardNavbar.astro

@@ -1,21 +1,61 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardNavbarProps } from "./dashboard-navbar"
-import dashboardNavbarTheme from "./dashboard-navbar.theme"
-
-
-const dashboardNavbar = scv(dashboardNavbarTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardNavbarProps
-
-const classes = resolveClasses(dashboardNavbar, {}, useUi("dashboardNavbar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardNavbarProps } from "./dashboard-navbar"
+import { dashboardNavbarTheme } from "./dashboard-navbar.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  as: Tag = "header",
+  icon,
+  title,
+  toggle = true,
+  toggleSide = "left",
+  ...rest
+} = Astro.props as DashboardNavbarProps 
+
+
+
+const classes = dashboardNavbarTheme(Astro.props);
+---
+
+<Tag class={classes.root} data-slot="root" {...rest}>
+  <div data-slot="left" class={classes.left}>
+    {toggle && toggleSide === "left" && (
+      <button type="button" data-dashboard-toggle="mobile" class={classes.toggle + " lg:hidden"} data-slot="toggle" aria-label="Toggle sidebar">
+        <RLAIcon name="menu" class="size-5" />
+      </button>
+    )}
+
+    <slot name="left">
+      <slot name="leading">
+        {icon && (
+          <RLAIcon name={icon} class={classes.icon} data-slot="icon" />
+        )}
+      </slot>
+
+      <h1 data-slot="title" class={classes.title}>
+        <slot name="title">
+          {title}
+        </slot>
+      </h1>
+
+      <slot name="trailing" />
+    </slot>
+  </div>
+
+  {Astro.slots.has("default") && (
+    <div data-slot="center" class={classes.center}>
+      <slot />
+    </div>
+  )}
+
+  <div data-slot="right" class={classes.right}>
+    <slot name="right" />
+
+    {toggle && toggleSide === "right" && (
+      <button type="button" data-dashboard-toggle="mobile" class={classes.toggle + " lg:hidden"} data-slot="toggle" aria-label="Toggle sidebar">
+        <RLAIcon name="menu" class="size-5" />
+      </button>
+    )}
+  </div>
+</Tag>

package/src/components/dashboard-navbar/dashboard-navbar.theme.ts

@@ -1,13 +1,27 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardNavbarTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardNavbarTheme()
+export const dashboardNavbarTheme = defineTheme("dashboard-navbar", {
+  slots: ["root", "left", "icon", "title", "center", "right", "toggle"],
+  base: {
+    root: "h-(--rl-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5",
+    left: "flex items-center gap-1.5 min-w-0",
+    icon: "shrink-0 size-5 self-center me-1.5",
+    title: "flex items-center gap-1.5 font-semibold text-highlighted truncate",
+    center: "hidden lg:flex",
+    right: "flex items-center shrink-0 gap-1.5",
+    toggle: ""
+  },
+  variants: {
+    toggleSide: {
+      left: {
+        toggle: ""
+      },
+      right: {
+        toggle: ""
+      }
+    }
+  },
+  defaultVariants: {
+    toggleSide: "left"
+  }
+})

package/src/components/dashboard-navbar/dashboard-navbar.ts

@@ -1,11 +1,10 @@
 export interface DashboardNavbarProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  as?: string
+  icon?: string
+  title?: string
+  toggle?: boolean
+  toggleSide?: "left" | "right"
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-panel/RLADashboardPanel.astro

@@ -1,23 +1,35 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { DashboardPanelProps } from "./dashboard-panel"
-import dashboardPanelTheme from "./dashboard-panel.theme"
+import { dashboardPanelTheme } from "./dashboard-panel.theme"
 
 
-const dashboardPanel = scv(dashboardPanelTheme)
-
 const {
-  ui: uiProp,
-  class: className,
+  resizable = false,
   ...rest
 } = Astro.props as DashboardPanelProps
 
-const classes = resolveClasses(dashboardPanel, {}, useUi("dashboardPanel", uiProp), className);
+const classes = dashboardPanelTheme({
+  ...Astro.props,
+  size: false
+});
 ---
 <div class={classes.root} data-slot="root" {...rest}>
-  <slot name="header" />
-  <slot name="body" />
-  <slot />
-</div>
+  <slot>
+    <slot name="header" />
+
+    <div data-slot="body" class={classes.body}>
+      <slot name="body" />
+    </div>
+
+    <slot name="footer" />
+  </slot>
+</div>
+
+{resizable && (
+  <slot name="resize-handle">
+    <div
+      data-slot="handle"
+      class={classes.handle + " hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"}
+    />
+  </slot>
+)}

package/src/components/dashboard-panel/dashboard-panel.theme.ts

@@ -1,13 +1,23 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardPanelTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardPanelTheme()
+export const dashboardPanelTheme = defineTheme("dashboard-panel", {
+  slots: ["root", "body", "handle"],
+  base: {
+    root: "relative flex flex-col min-w-0 h-full min-h-0 lg:not-last:border-e lg:not-last:border-default shrink-0 flex-1",
+    body: "flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6",
+    handle: ""
+  },
+  variants: {
+    size: {
+      true: {
+        root: "w-full lg:w-(--width)"
+      },
+      false: {
+        root: "flex-1"
+      }
+    }
+  },
+  defaultVariants: {
+    size: false
+  }
+})

package/src/components/dashboard-panel/dashboard-panel.ts

@@ -1,11 +1,9 @@
 export interface DashboardPanelProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  resizable?: boolean
+  defaultSize?: number
+  minSize?: number
+  maxSize?: number
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-resize-handle/RLADashboardResizeHandle.astro

@@ -1,21 +1,21 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardResizeHandleProps } from "./dashboard-resize-handle"
-import dashboardResizeHandleTheme from "./dashboard-resize-handle.theme"
-
-
-const dashboardResizeHandle = scv(dashboardResizeHandleTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardResizeHandleProps
-
-const classes = resolveClasses(dashboardResizeHandle, {}, useUi("dashboardResizeHandle", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardResizeHandleProps } from "./dashboard-resize-handle"
+import { dashboardResizeHandleTheme } from "./dashboard-resize-handle.theme"
+
+
+const {
+  as: Tag = "div",
+  ...rest
+} = Astro.props as DashboardResizeHandleProps 
+
+
+
+const classes = dashboardResizeHandleTheme(Astro.props);
+---
+<Tag
+  data-slot="root"
+  class={classes.root}
+  {...({ role: "separator", ...rest } as any)}
+>
+  <slot />
+</Tag>

package/src/components/dashboard-resize-handle/dashboard-resize-handle.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardResizeHandleTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardResizeHandleTheme()
+export const dashboardResizeHandleTheme = defineTheme("dashboard-resize-handle", {
+  slots: ["root"],
+  base: {
+    root: "hidden lg:block touch-none select-none cursor-ew-resize relative before:absolute before:inset-y-0 before:-left-1.5 before:-right-1.5 before:z-1"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/dashboard-resize-handle/dashboard-resize-handle.ts

@@ -1,11 +1,6 @@
 export interface DashboardResizeHandleProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  as?: string
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }