@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,11 +1,10 @@
 export interface DashboardNavbarProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  as?: any
+  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,36 @@
 ---
-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,
+  resizable = false,
   class: className,
   ...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}>
+<div class={classes.root} data-slot="root" style="flex: 1 1 0%; min-width: 0;" {...rest}>
   <slot name="header" />
-  <slot name="body" />
-  <slot />
-</div>
+
+  <div data-slot="body" class={classes.body}>
+    <slot name="body">
+      <slot />
+    </slot>
+  </div>
+
+  <slot name="footer" />
+</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-[var(--width,16rem)]"
+      },
+      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
 }

package/src/components/dashboard-search/RLADashboardSearch.astro

@@ -1,21 +1,100 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardSearchProps } from "./dashboard-search"
-import dashboardSearchTheme from "./dashboard-search.theme"
-
-
-const dashboardSearch = scv(dashboardSearchTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSearchProps
-
-const classes = resolveClasses(dashboardSearch, {}, useUi("dashboardSearch", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardSearchProps } from "./dashboard-search"
+import { dashboardSearchTheme } from "./dashboard-search.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const props = Astro.props as DashboardSearchProps
+
+const classes = dashboardSearchTheme({
+  ...Astro.props,
+  ...props,
+  fullscreen: false,
+  size: "md"
+})
+---
+
+<template id="dashboard-search-template">
+  <div data-dashboard-search data-slot="modal" class={classes.modal + " fixed inset-0 z-50 flex items-start justify-center sm:pt-16"} style="display:none">
+    <div class="fixed inset-0 bg-default/80 backdrop-blur-sm" data-dashboard-search-close></div>
+    <div class:list={["relative w-full bg-default border border-default sm:rounded-xl shadow-2xl overflow-hidden", classes.modal]}>
+      <div class="flex items-center gap-2 border-b border-default px-4">
+        <RLAIcon name="search" class="size-5 shrink-0 text-muted" />
+        <input
+          type="text"
+          data-dashboard-search-input
+          placeholder="Search..."
+          class="flex-1 h-12 bg-transparent border-0 outline-none text-default placeholder:text-muted"
+        />
+        <button type="button" data-dashboard-search-close class="shrink-0 size-8 flex items-center justify-center rounded-md hover:bg-muted text-muted">
+          <RLAIcon name="close" class="size-4" />
+        </button>
+      </div>
+      <div class="p-4 text-sm text-muted text-center">
+        Type to search...
+      </div>
+    </div>
+  </div>
+</template>
+
+<div data-dashboard-search-target>
+  <slot />
+</div>
+
+<script>
+  (function() {
+    const template = document.getElementById('dashboard-search-template') as HTMLTemplateElement | null;
+    if (!template) return;
+
+    let searchEl: HTMLElement | null = null;
+    const shortcutKey = 'k';
+
+    const open = () => {
+      if (searchEl) return;
+      const clone = template.content.cloneNode(true) as DocumentFragment;
+      searchEl = clone.firstElementChild as HTMLElement | null;
+      if (!searchEl) return;
+      document.body.appendChild(searchEl);
+
+      const input = searchEl.querySelector<HTMLInputElement>('[data-dashboard-search-input]');
+      const closeBtns = searchEl.querySelectorAll('[data-dashboard-search-close]');
+
+      setTimeout(() => input?.focus(), 50);
+
+      closeBtns.forEach(btn => {
+        btn.addEventListener('click', close);
+      });
+
+      searchEl.addEventListener('click', (e: MouseEvent) => {
+        if (e.target === searchEl) close();
+      });
+    };
+
+    const close = () => {
+      if (searchEl) {
+        searchEl.remove();
+        searchEl = null;
+      }
+    };
+
+    const toggle = () => {
+      if (searchEl) close();
+      else open();
+    };
+
+    document.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
+        e.preventDefault();
+        toggle();
+      }
+    });
+
+    document.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as Element | null;
+      const btn = target?.closest('[data-dashboard-search-button]');
+      if (btn) toggle();
+    });
+
+    (window as any).dashboardSearch = { open, close, toggle };
+  })();
+</script>

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

@@ -1,13 +1,26 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardSearchTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
+export const dashboardSearchTheme = defineTheme("dashboard-search", {
+  slots: ["modal", "input"],
+  base: {
+    modal: "",
+    input: ""
+  },
+  variants: {
+    fullscreen: {
+      false: {
+        modal: "sm:max-w-3xl h-full sm:h-[28rem]"
+      }
     },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardSearchTheme()
+    size: {
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

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

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

package/src/components/dashboard-search-button/RLADashboardSearchButton.astro

@@ -1,21 +1,45 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardSearchButtonProps } from "./dashboard-search-button"
-import dashboardSearchButtonTheme from "./dashboard-search-button.theme"
-
-
-const dashboardSearchButton = scv(dashboardSearchButtonTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSearchButtonProps
-
-const classes = resolveClasses(dashboardSearchButton, {}, useUi("dashboardSearchButton", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardSearchButtonProps } from "./dashboard-search-button"
+import { dashboardSearchButtonTheme } from "./dashboard-search-button.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  icon,
+  label = "Search",
+  kbds = [{ value: "meta" }, { value: "k" }],
+  ...rest
+} = Astro.props as DashboardSearchButtonProps
+
+const classes = dashboardSearchButtonTheme(Astro.props);
+---
+
+<button
+  type="button"
+  data-dashboard-search-button
+  class={classes.base}
+  data-slot="root"
+  {...rest}
+>
+  {icon !== false && (
+    <RLAIcon name={typeof icon === 'string' ? icon : 'search'} class="size-5 shrink-0 text-muted" />
+  )}
+
+  <span data-slot="label" class={classes.label}>
+    {label}
+  </span>
+
+  <span data-slot="trailing" class={classes.trailing}>
+    <slot name="trailing">
+      {kbds && kbds.length > 0 && (
+        <span class="flex items-center gap-0.5">
+          {kbds.map((kbd) => {
+            const value = typeof kbd === 'string' ? kbd : kbd.value;
+            const label = value === 'meta' ? '⌘' : value === 'k' ? 'K' : value;
+            return <kbd class="inline-flex items-center justify-center rounded border border-default bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted min-w-[20px] h-5">{label}</kbd>;
+          })}
+        </span>
+      )}
+    </slot>
+  </span>
+</button>

package/src/components/dashboard-search-button/dashboard-search-button.theme.ts

@@ -1,13 +1,21 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createDashboardSearchButtonTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createDashboardSearchButtonTheme()
+export const dashboardSearchButtonTheme = defineTheme("dashboard-search-button", {
+  slots: ["base", "label", "trailing"],
+  base: {
+    base: "group flex items-center gap-2 w-full rounded-md border border-default px-3 py-2 text-sm text-muted hover:text-default hover:bg-muted transition-colors cursor-pointer",
+    label: "flex-1 text-start truncate",
+    trailing: "hidden lg:flex items-center gap-0.5 ms-auto"
+  },
+  variants: {
+    collapsed: {
+      true: {
+        label: "hidden",
+        trailing: "lg:hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    collapsed: false
+  }
+})

package/src/components/dashboard-search-button/dashboard-search-button.ts

@@ -1,11 +1,9 @@
 export interface DashboardSearchButtonProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  icon?: string | false
+  label?: string
+  collapsed?: boolean
+  kbds?: Array<string | { value: string; variant?: string }>
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/dashboard-sidebar/RLADashboardSidebar.astro

@@ -1,21 +1,122 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { DashboardSidebarProps } from "./dashboard-sidebar"
-import dashboardSidebarTheme from "./dashboard-sidebar.theme"
-
-
-const dashboardSidebar = scv(dashboardSidebarTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarProps
-
-const classes = resolveClasses(dashboardSidebar, {}, useUi("dashboardSidebar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import type { DashboardSidebarProps } from "./dashboard-sidebar"
+import { dashboardSidebarTheme } from "./dashboard-sidebar.theme"
+
+
+const {
+  side = "left",
+  collapsible = false,
+  collapsed = false,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarProps
+
+const classes = dashboardSidebarTheme({
+  ...Astro.props,
+  collapsed: collapsible && collapsed
+});
+
+const collapsedWidth = "4rem";
+const defaultWidth = "16rem";
+---
+
+<div
+  data-dashboard-sidebar
+  data-side={side}
+  data-collapsible={collapsible ? "true" : "false"}
+  data-collapsed={collapsible && collapsed ? "true" : "false"}
+  data-slot="root"
+  class={classes.root}
+  {...rest}
+  style={`width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; min-width: ${collapsible && collapsed ? collapsedWidth : defaultWidth}; flex-shrink: 0; --width: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
+>
+  <div data-slot="header" class={classes.header} style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; box-sizing: border-box;">
+    <slot name="header" />
+  </div>
+
+  <div data-slot="body" class={classes.body}>
+    <slot />
+  </div>
+
+  <div data-slot="footer" class={classes.footer}>
+    <slot name="footer" />
+  </div>
+</div>
+
+<div data-dashboard-sidebar-overlay data-slot="overlay" class={classes.overlay + " fixed inset-0 z-40 bg-default/80 backdrop-blur-sm transition-opacity duration-300 hidden"} />
+
+<div
+  data-dashboard-sidebar-mobile
+  data-slot="content"
+  class={classes.content + " fixed inset-y-0 left-0 z-50 w-64 bg-default shadow-xl border-e border-default transform -translate-x-full transition-transform duration-300"}
+>
+  <div data-slot="header" class={classes.header + " " + "sm:px-6"} data-menu>
+    <slot name="header" />
+  </div>
+  <div data-slot="body" class={classes.body + " " + "sm:px-6"} data-menu>
+    <slot />
+  </div>
+  <div data-slot="footer" class={classes.footer + " " + "sm:px-6"} data-menu>
+    <slot name="footer" />
+  </div>
+</div>
+
+<script>
+  (function() {
+    const sidebar = document.querySelector<HTMLElement>('[data-dashboard-sidebar]');
+    if (!sidebar) return;
+
+    const collapsible = sidebar.dataset.collapsible === 'true';
+    const mobilePanel = document.querySelector<HTMLElement>('[data-dashboard-sidebar-mobile]');
+    const overlay = document.querySelector<HTMLElement>('[data-dashboard-sidebar-overlay]');
+
+    const toggleMobile = () => {
+      if (!mobilePanel || !overlay) return;
+      const isOpen = mobilePanel.classList.toggle('translate-x-0');
+      mobilePanel.classList.toggle('-translate-x-full', !isOpen);
+      overlay.classList.toggle('hidden', !isOpen);
+    };
+
+    const collapseSidebar = (val?: boolean) => {
+      if (!collapsible) return;
+      const isCollapsed = val !== undefined ? val : sidebar.dataset.collapsed !== 'true';
+      const w = isCollapsed ? '4rem' : '16rem';
+      sidebar.style.width = w;
+      sidebar.style.minWidth = w;
+      sidebar.style.setProperty('--width', w);
+
+      document.querySelectorAll('[data-dashboard-toggle="collapse"]').forEach(btn => {
+        btn.querySelectorAll('[data-dashboard-collapse-icon]').forEach(el => {
+          el.classList.toggle('hidden', el.matches(isCollapsed ? '[data-expanded]' : '[data-collapsed]'));
+        });
+      });
+    };
+
+    document.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as Element | null;
+      const toggle = target?.closest<HTMLElement>('[data-dashboard-toggle]');
+      if (toggle) {
+        const side = toggle.dataset.dashboardToggle;
+        if (side === 'mobile') toggleMobile();
+        if (side === 'collapse') collapseSidebar();
+      }
+
+      const navItem = target?.closest<HTMLElement>('[data-dashboard-nav]');
+      if (navItem) {
+        const container = navItem.closest('[data-dashboard-nav-container]');
+        if (container) {
+          container.querySelectorAll('[data-dashboard-nav]').forEach((item: Element) => {
+            item.classList.remove('bg-muted', 'text-highlighted');
+            item.classList.add('text-default', 'hover:text-highlighted', 'hover:bg-muted');
+          });
+          navItem.classList.remove('text-default', 'hover:text-highlighted', 'hover:bg-muted');
+          navItem.classList.add('bg-muted', 'text-highlighted');
+        }
+      }
+    });
+
+    overlay?.addEventListener('click', toggleMobile);
+
+    (window as any).dashboardSidebar = { toggleMobile, collapseSidebar };
+  })();
+</script>