@rimelight/ui 0.0.42 → 0.0.44

package/src/components/confirm/RLAConfirm.astro

@@ -1,122 +1,114 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ConfirmProps } from "./confirm"
-import { resolveTheme } from "../../utils/resolveTheme"
-import confirmThemeDefault, { createConfirmTheme } from "./confirm.theme"
-const confirmTheme = resolveTheme(confirmThemeDefault, createConfirmTheme)
-import RLAButton from "../button/RLAButton.astro"
-
-const alertDialog = scv(confirmTheme)
-
-const {
-  variant = "default",
-  title,
-  description,
-  actionLabel = "Confirm",
-  cancelLabel = "Cancel",
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ConfirmProps & { variant?: "default" | "destructive" }
-
-const classes = resolveClasses(alertDialog, {
-  variant
-}, useUi("alertDialog", uiProp), className)
-
-const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
-const isDestructive = variant === "destructive"
----
-
-<div class={classes.root} data-slot="alert-dialog-container">
-  {triggerLabel ? (
-    <RLAButton
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      data-dialog-show={dialogId}
-    >
-      {triggerLabel}
-    </RLAButton>
-  ) : (
-    <span data-dialog-show={dialogId}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-lock-scroll="true"
-    {...rest}
-  >
-    <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">
-        <RLAButton
-          class={classes.cancelButton}
-          data-slot="cancel"
-          variant="outline"
-          color={isDestructive ? "error" : "neutral"}
-          type="button"
-          data-dialog-close={dialogId}
-        >
-          {cancelLabel}
-        </RLAButton>
-        <RLAButton
-          class={classes.actionButton}
-          data-slot="action"
-          color={isDestructive ? "error" : "primary"}
-          variant={isDestructive ? "subtle" : "solid"}
-          type="button"
-          data-dialog-close={dialogId}
-        >
-          {actionLabel}
-        </RLAButton>
-      </slot>
-    </div>
-  </dialog>
-</div>
-
-<script>
-(function() {
-  const win = window as unknown as Window & { rlConfirm?: () => Promise<boolean> };
-  if (win.rlConfirm) return;
-  var pendingResolve: ((value: boolean) => void) | null = null;
-
-  document.addEventListener("click", function(e) {
-    const target = e.target as HTMLElement | null;
-    var btn = target?.closest("[data-slot='cancel'], [data-slot='action']");
-    if (!btn || !pendingResolve) return;
-    pendingResolve(btn.getAttribute("data-slot") === "action");
-    pendingResolve = null;
-  }, true);
-
-  win.rlConfirm = function() {
-    return new Promise<boolean>(function(resolve) {
-      var dialog = document.querySelector("[data-slot='alert-dialog-container'] dialog") as HTMLDialogElement | null;
-      if (!dialog) { resolve(false); return; }
-      pendingResolve = resolve;
-      dialog.addEventListener("close", function() {
-        if (pendingResolve) {
-          pendingResolve(false);
-          pendingResolve = null;
-        }
-      }, { once: true });
-      dialog.showModal();
-    });
-  };
-})();
-</script>
+---
+import type { ConfirmProps } from "./confirm"
+import { confirmTheme } from "./confirm.theme"
+import RLAButton from "../button/RLAButton.astro"
+
+
+const {
+  variant = "default",
+  title,
+  description,
+  actionLabel = "Confirm",
+  cancelLabel = "Cancel",
+  triggerLabel,
+  ...rest
+} = Astro.props as ConfirmProps
+
+
+
+const classes = confirmTheme(Astro.props)
+
+const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
+const isDestructive = variant === "destructive"
+---
+
+<div class={classes.root} data-slot="alert-dialog-container">
+  {triggerLabel ? (
+    <RLAButton
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      data-dialog-show={dialogId}
+    >
+      {triggerLabel}
+    </RLAButton>
+  ) : (
+    <span data-dialog-show={dialogId}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll="true"
+    {...rest}
+  >
+    <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">
+        <RLAButton
+          class={classes.cancelButton}
+          data-slot="cancel"
+          variant="outline"
+          color={isDestructive ? "error" : "neutral"}
+          type="button"
+          data-dialog-close={dialogId}
+        >
+          {cancelLabel}
+        </RLAButton>
+        <RLAButton
+          class={classes.actionButton}
+          data-slot="action"
+          color={isDestructive ? "error" : "primary"}
+          variant={isDestructive ? "subtle" : "solid"}
+          type="button"
+          data-dialog-close={dialogId}
+        >
+          {actionLabel}
+        </RLAButton>
+      </slot>
+    </div>
+  </dialog>
+</div>
+
+<script>
+(function() {
+  const win = window as unknown as Window & { rlConfirm?: () => Promise<boolean> };
+  if (win.rlConfirm) return;
+  var pendingResolve: ((value: boolean) => void) | null = null;
+
+  document.addEventListener("click", function(e) {
+    const target = e.target as HTMLElement | null;
+    var btn = target?.closest("[data-slot='cancel'], [data-slot='action']");
+    if (!btn || !pendingResolve) return;
+    pendingResolve(btn.getAttribute("data-slot") === "action");
+    pendingResolve = null;
+  }, true);
+
+  win.rlConfirm = function() {
+    return new Promise<boolean>(function(resolve) {
+      var dialog = document.querySelector("[data-slot='alert-dialog-container'] dialog") as HTMLDialogElement | null;
+      if (!dialog) { resolve(false); return; }
+      pendingResolve = resolve;
+      dialog.addEventListener("close", function() {
+        if (pendingResolve) {
+          pendingResolve(false);
+          pendingResolve = null;
+        }
+      }, { once: true });
+      dialog.showModal();
+    });
+  };
+})();
+</script>

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,15 @@
----
-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 = "div",
+  class: className,
+  ...rest
+} = Astro.props as DashboardGroupProps
+
+const Tag = as;
+const classes = dashboardGroupTheme(Astro.props);
+---
+<Tag class:list={[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 flex-row 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?: any
   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 = "header",
+  icon,
+  title,
+  toggle = true,
+  toggleSide = "left",
+  class: className,
+  ...rest
+} = Astro.props as DashboardNavbarProps 
+
+const Tag = as;
+const classes = dashboardNavbarTheme(Astro.props);
+---
+
+<Tag class:list={[classes.root]} data-slot="root" style="height: 4rem; min-height: 4rem; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;" {...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-16 min-h-16 shrink-0 flex items-center justify-between border-b border-default px-6 py-4 gap-3",
+    left: "flex items-center gap-3 min-w-0 h-full",
+    icon: "shrink-0 size-5 self-center me-1.5",
+    title: "flex items-center gap-2 font-semibold text-highlighted truncate text-lg",
+    center: "hidden lg:flex",
+    right: "flex items-center shrink-0 gap-1.5",
+    toggle: ""
+  },
+  variants: {
+    toggleSide: {
+      left: {
+        toggle: ""
+      },
+      right: {
+        toggle: ""
+      }
+    }
+  },
+  defaultVariants: {
+    toggleSide: "left"
+  }
+})