@rimelight/ui 0.0.41 → 0.0.43

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,119 @@
----
-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,
+  ...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: ${defaultWidth}; --collapsed-width: ${collapsedWidth}`}
+>
+  <div data-slot="header" class={classes.header}>
+    <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';
+      sidebar.dataset.collapsed = isCollapsed ? 'true' : 'false';
+      sidebar.style.setProperty('--width', isCollapsed ? '4rem' : '16rem');
+
+      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>

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

@@ -1,13 +1,42 @@
-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 hidden lg:flex flex-col h-full min-h-0 min-w-16 w-(--width) shrink-0 transition-[width] duration-300",
+    header:
+      "h-(--rl-header-height) shrink-0 flex items-center gap-1.5 px-3 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-2",
+    footer: "shrink-0 flex items-center gap-1.5 px-3 py-2 group-data-[collapsed=true]:px-0",
+    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-(--collapsed-width) 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,24 @@
----
-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",
+  ...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>