@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,13 +1,43 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardSidebarTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
+export const dashboardSidebarTheme = defineTheme("dashboard-sidebar", {
+  slots: ["root", "header", "body", "footer", "toggle", "handle", "content", "overlay"],
+  base: {
+    root: "group relative flex flex-col h-full min-h-0 min-w-16 w-64 shrink-0 transition-[width] duration-300",
+    header:
+      "h-16 min-h-16 shrink-0 flex items-center gap-3 px-6 py-4 border-b border-default group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:gap-0 group-data-[collapsed=true]:px-0",
+    body: "flex flex-col gap-1 flex-1 overflow-y-auto px-3 py-3",
+    footer:
+      "shrink-0 flex items-center gap-1.5 px-3 py-3 group-data-[collapsed=true]:px-0 border-t border-default/40",
+    toggle: "",
+    handle: "",
+    content: "lg:hidden",
+    overlay: "lg:hidden"
+  },
+  variants: {
+    menu: {
+      true: {
+        header: "sm:px-6",
+        body: "sm:px-6",
+        footer: "sm:px-6"
+      }
     },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardSidebarTheme()
+    side: {
+      left: {
+        root: "border-e border-default"
+      },
+      right: {
+        root: ""
+      }
+    },
+    collapsed: {
+      true: {
+        root: "w-16 w-[var(--collapsed-width,4rem)] overflow-hidden",
+        body: "overflow-hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    side: "left"
+  }
+})

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

@@ -1,11 +1,13 @@
 export interface DashboardSidebarProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  side?: "left" | "right"
+  collapsible?: boolean
+  collapsed?: boolean
+  resizable?: boolean
+  defaultSize?: number
+  minSize?: number
+  maxSize?: number
+  collapsedSize?: number
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-sidebar-collapse/RLADashboardSidebarCollapse.astro

@@ -1,21 +1,25 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardSidebarCollapseProps } from "./dashboard-sidebar-collapse"
-import dashboardSidebarCollapseTheme from "./dashboard-sidebar-collapse.theme"
-
-
-const dashboardSidebarCollapse = scv(dashboardSidebarCollapseTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarCollapseProps
-
-const classes = resolveClasses(dashboardSidebarCollapse, {}, useUi("dashboardSidebarCollapse", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardSidebarCollapseProps } from "./dashboard-sidebar-collapse"
+import { dashboardSidebarCollapseTheme } from "./dashboard-sidebar-collapse.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  icon = "i-lucide-panel-left",
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarCollapseProps
+
+const classes = dashboardSidebarCollapseTheme(Astro.props);
+---
+<button
+  type="button"
+  data-dashboard-toggle="collapse"
+  class={classes.root}
+  data-slot="root"
+  aria-label="Collapse sidebar"
+  {...rest}
+>
+  <RLAIcon name="i-lucide-panel-left" class="size-5" data-dashboard-collapse-icon data-expanded />
+  <RLAIcon name="i-lucide-panel-right" class="size-5 hidden" data-dashboard-collapse-icon data-collapsed />
+</button>

package/src/components/dashboard-sidebar-collapse/dashboard-sidebar-collapse.theme.ts

@@ -1,13 +1,17 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardSidebarCollapseTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardSidebarCollapseTheme()
+export const dashboardSidebarCollapseTheme = defineTheme("dashboard-sidebar-collapse", {
+  slots: ["root"],
+  base: {
+    root: "hidden lg:inline-flex items-center justify-center rounded-md size-8 text-muted hover:text-default hover:bg-muted transition-colors"
+  },
+  variants: {
+    side: {
+      left: {},
+      right: {}
+    }
+  },
+  defaultVariants: {
+    side: "left"
+  }
+})

package/src/components/dashboard-sidebar-collapse/dashboard-sidebar-collapse.ts

@@ -1,11 +1,7 @@
 export interface DashboardSidebarCollapseProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  icon?: string
+  side?: "left" | "right"
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-sidebar-toggle/RLADashboardSidebarToggle.astro

@@ -1,21 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardSidebarToggleProps } from "./dashboard-sidebar-toggle"
-import dashboardSidebarToggleTheme from "./dashboard-sidebar-toggle.theme"
-
-
-const dashboardSidebarToggle = scv(dashboardSidebarToggleTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarToggleProps
-
-const classes = resolveClasses(dashboardSidebarToggle, {}, useUi("dashboardSidebarToggle", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardSidebarToggleProps } from "./dashboard-sidebar-toggle"
+import { dashboardSidebarToggleTheme } from "./dashboard-sidebar-toggle.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  icon = "menu",
+  ...rest
+} = Astro.props as DashboardSidebarToggleProps
+
+const classes = dashboardSidebarToggleTheme(Astro.props);
+---
+<button
+  type="button"
+  data-dashboard-toggle="mobile"
+  class={classes.root}
+  data-slot="root"
+  aria-label="Toggle sidebar"
+  {...rest}
+>
+  <RLAIcon name={icon} class="size-5" />
+</button>

package/src/components/dashboard-sidebar-toggle/dashboard-sidebar-toggle.theme.ts

@@ -1,13 +1,17 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardSidebarToggleTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardSidebarToggleTheme()
+export const dashboardSidebarToggleTheme = defineTheme("dashboard-sidebar-toggle", {
+  slots: ["root"],
+  base: {
+    root: "lg:hidden inline-flex items-center justify-center rounded-md size-8 text-muted hover:text-default hover:bg-muted transition-colors"
+  },
+  variants: {
+    side: {
+      left: {},
+      right: {}
+    }
+  },
+  defaultVariants: {
+    side: "left"
+  }
+})

package/src/components/dashboard-sidebar-toggle/dashboard-sidebar-toggle.ts

@@ -1,11 +1,7 @@
 export interface DashboardSidebarToggleProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  icon?: string
+  side?: "left" | "right"
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-toolbar/RLADashboardToolbar.astro

@@ -1,21 +1,25 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardToolbarProps } from "./dashboard-toolbar"
-import dashboardToolbarTheme from "./dashboard-toolbar.theme"
-
-
-const dashboardToolbar = scv(dashboardToolbarTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardToolbarProps
-
-const classes = resolveClasses(dashboardToolbar, {}, useUi("dashboardToolbar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardToolbarProps } from "./dashboard-toolbar"
+import { dashboardToolbarTheme } from "./dashboard-toolbar.theme"
+
+
+const {
+  as: Tag = "div",
+  ...rest
+} = Astro.props as DashboardToolbarProps 
+
+
+
+const classes = dashboardToolbarTheme(Astro.props);
+---
+<Tag class={classes.root} data-slot="root" {...rest}>
+  <slot>
+    <div data-slot="left" class={classes.left}>
+      <slot name="left" />
+    </div>
+
+    <div data-slot="right" class={classes.right}>
+      <slot name="right" />
+    </div>
+  </slot>
+</Tag>

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

@@ -1,13 +1,12 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardToolbarTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardToolbarTheme()
+export const dashboardToolbarTheme = defineTheme("dashboard-toolbar", {
+  slots: ["root", "left", "right"],
+  base: {
+    root: "shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]",
+    left: "flex items-center gap-1.5",
+    right: "flex items-center gap-1.5"
+  },
+  variants: {},
+  defaultVariants: {}
+})

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

@@ -1,11 +1,6 @@
 export interface DashboardToolbarProps {
-  /**
-   * 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/dock/RLADock.astro

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

package/src/components/dock/dock.theme.ts

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

package/src/components/drawer/RLADrawer.astro

@@ -1,126 +1,115 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DrawerProps } from "./drawer"
-import { resolveTheme } from "../../utils/resolveTheme"
-import drawerThemeDefault, { createDrawerTheme } from "./drawer.theme"
-const drawerTheme = resolveTheme(drawerThemeDefault, createDrawerTheme)
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const drawer = scv(drawerTheme)
-
-const {
-  direction = "bottom",
-  title,
-  description,
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DrawerProps
-
-const classes = resolveClasses(drawer, {
-  direction
-}, useUi("drawer", uiProp), className)
-
-const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="drawer-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      data-dialog-show={dialogId}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span data-dialog-show={dialogId}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-close-on-click-outside="true"
-    {...rest}
-  >
-    <div class={classes.handle} data-slot="handle" />
-
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      data-dialog-close={dialogId}
-      aria-label="Close drawer"
-    >
-      <RLAIcon name="close" class="size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
-
-<script>
-  if (!(window as any).rlaDialogListenerActive) {
-    (window as any).rlaDialogListenerActive = true;
-    document.addEventListener('click', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const showTrigger = target.closest('[data-dialog-show]');
-      if (showTrigger) {
-        const dialogId = showTrigger.getAttribute('data-dialog-show');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          if (dialog) {
-            if (typeof dialog.showModal === 'function') {
-              dialog.showModal();
-            } else if (typeof (dialog as any).showmodal === 'function') {
-              (dialog as any).showmodal();
-            }
-          }
-        }
-      }
-
-      const closeTrigger = target.closest('[data-dialog-close]');
-      if (closeTrigger) {
-        const dialogId = closeTrigger.getAttribute('data-dialog-close');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          dialog?.close();
-        }
-      }
-
-      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
-        const rect = target.getBoundingClientRect();
-        const isInModal = (
-          rect.top <= e.clientY &&
-          e.clientY <= rect.top + rect.height &&
-          rect.left <= e.clientX &&
-          e.clientX <= rect.left + rect.width
-        );
-        if (!isInModal) {
-          (target as HTMLDialogElement).close();
-        }
-      }
-    });
-  }
-</script>
+---
+import type { DrawerProps } from "./drawer"
+import { drawerTheme } from "./drawer.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+
+const {
+  title,
+  description,
+  triggerLabel,
+  ...rest
+} = Astro.props as DrawerProps
+
+const classes = drawerTheme(Astro.props)
+
+const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="drawer-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      data-dialog-show={dialogId}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span data-dialog-show={dialogId}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-close-on-click-outside="true"
+    {...rest}
+  >
+    <div class={classes.handle} data-slot="handle" />
+
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      data-dialog-close={dialogId}
+      aria-label="Close drawer"
+    >
+      <RLAIcon name="i-rl-close" class="size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>
+
+<script>
+  if (!(window as any).rlaDialogListenerActive) {
+    (window as any).rlaDialogListenerActive = true;
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const showTrigger = target.closest('[data-dialog-show]');
+      if (showTrigger) {
+        const dialogId = showTrigger.getAttribute('data-dialog-show');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            if (typeof dialog.showModal === 'function') {
+              dialog.showModal();
+            } else if (typeof (dialog as any).showmodal === 'function') {
+              (dialog as any).showmodal();
+            }
+          }
+        }
+      }
+
+      const closeTrigger = target.closest('[data-dialog-close]');
+      if (closeTrigger) {
+        const dialogId = closeTrigger.getAttribute('data-dialog-close');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          dialog?.close();
+        }
+      }
+
+      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
+        const rect = target.getBoundingClientRect();
+        const isInModal = (
+          rect.top <= e.clientY &&
+          e.clientY <= rect.top + rect.height &&
+          rect.left <= e.clientX &&
+          e.clientX <= rect.left + rect.width
+        );
+        if (!isInModal) {
+          (target as HTMLDialogElement).close();
+        }
+      }
+    });
+  }
+</script>