@rimelight/ui 0.0.1

package/src/components/sidebar/SidebarMenuItem.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarMenuItemProps extends HTMLAttributes<"li"> {}
+type Props = SidebarMenuItemProps;
+
+export const sidebarMenuItem = cv({
+  base: "group/menu-item relative",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  class:list={[sidebarMenuItem(), className]}
+  data-sidebar="menu-item"
+  {...rest}
+  data-slot="sidebar-menu-item"
+>
+  <slot />
+</li>

package/src/components/sidebar/SidebarMenuSkeleton.astro

@@ -0,0 +1,43 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+import Skeleton from "../skeleton/Skeleton.astro";
+
+const sidebarMenuSkeleton = cv({
+  base: "flex h-8 items-center gap-md rounded-md px-2",
+});
+
+export interface SidebarMenuSkeletonProps extends HTMLAttributes<"div"> {
+  /**
+   * Whether to show the icon skeleton
+   * @default false
+   */
+  showIcon?: boolean;
+  /**
+   * Width of the text skeleton (random 50-90% if not specified)
+   */
+  width?: string;
+}
+
+type Props = SidebarMenuSkeletonProps;
+
+const { showIcon = false, width, class: className, ...rest } = Astro.props;
+
+const skeletonWidth = width || `${Math.floor(Math.random() * 40) + 50}%`;
+---
+
+<div
+  class:list={[sidebarMenuSkeleton(), className]}
+  data-sidebar="menu-skeleton"
+  {...rest}
+  data-slot="sidebar-menu-skeleton"
+>
+  {showIcon && <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+  <Skeleton
+    class="h-4 max-w-(--skeleton-width) flex-1"
+    style={`--skeleton-width: ${skeletonWidth}`}
+    data-sidebar="menu-skeleton-text"
+  />
+</div>
+

package/src/components/sidebar/SidebarMenuSub.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarMenuSubProps extends HTMLAttributes<"ul"> {}
+type Props = SidebarMenuSubProps;
+
+export const sidebarMenuSub = cv({
+  base: [
+    "border-sidebar-border mx-4.5 flex min-w-0 translate-x-px flex-col gap-5xs b-l px-2.5 py-6xs",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul
+  class:list={[sidebarMenuSub(), className]}
+  data-sidebar="menu-sub"
+  {...rest}
+  data-slot="sidebar-menu-sub"
+>
+  <slot />
+</ul>

package/src/components/sidebar/SidebarMenuSubButton.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+export interface SidebarMenuSubButtonProps extends HTMLAttributes<"a">, VariantProps<typeof sidebarMenuSubButton> {
+  /**
+   * Whether the menu sub item is currently active
+   */
+  isActive?: boolean;
+}
+
+type Props = SidebarMenuSubButtonProps;
+
+export const sidebarMenuSubButton = cv({
+  base: [
+    "text-sidebar-foreground ring-sidebar-outline",
+    "flex h-3xs min-w-0 -translate-x-px items-center gap-md overflow-hidden rounded-md px-2.5",
+    "outline-hidden",
+    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    "focus-visible:ring-2",
+    "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+    "disabled:pointer-events-none disabled:op-50",
+    "aria-disabled:pointer-events-none aria-disabled:op-50",
+    "[&>svg]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+  ],
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const { size, isActive = false, class: className, ...rest } = Astro.props;
+---
+
+<a
+  class:list={[sidebarMenuSubButton({ size }), className]}
+  data-sidebar="menu-sub-button"
+  data-size={size || "md"}
+  data-active={isActive}
+  {...rest}
+  data-slot="sidebar-menu-sub-button"
+>
+  <slot />
+</a>

package/src/components/sidebar/SidebarMenuSubItem.astro

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+export interface SidebarMenuSubItemProps extends HTMLAttributes<"li"> {}
+type Props = SidebarMenuSubItemProps;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  class:list={["group/menu-sub-item relative", className]}
+  data-sidebar="menu-sub-item"
+  {...rest}
+  data-slot="sidebar-menu-sub-item"
+>
+  <slot />
+</li>

package/src/components/sidebar/SidebarProvider.astro

@@ -0,0 +1,215 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarProviderProps extends HTMLAttributes<"div"> {
+  /**
+   * Default open state of the sidebar
+   * @default true
+   */
+  defaultOpen?: boolean;
+  /**
+   * Keyboard shortcut to toggle the sidebar
+   * @default "b"
+   */
+  keyboardShortcut?: string;
+}
+
+type Props = SidebarProviderProps;
+
+export const sidebarProvider = cv({
+  base: [
+    "starwind-sidebar-provider",
+    "group/sidebar-wrapper flex min-h-svh w-full",
+    "has-data-[variant=inset]:bg-sidebar",
+  ],
+});
+
+const {
+  defaultOpen = true,
+  keyboardShortcut = "b",
+  class: className,
+  style,
+  ...rest
+} = Astro.props;
+
+const SIDEBAR_WIDTH = "18rem";
+const SIDEBAR_WIDTH_ICON = "3.5rem";
+
+// Parse style prop to extract CSS variable overrides
+const styleObj = typeof style === "string" ? {} : ((style as Record<string, string>) ?? {});
+const mergedStyle = {
+  "--sidebar-width": styleObj["--sidebar-width"] ?? SIDEBAR_WIDTH,
+  "--sidebar-width-icon": styleObj["--sidebar-width-icon"] ?? SIDEBAR_WIDTH_ICON,
+  ...styleObj,
+};
+---
+
+<div
+  class:list={[sidebarProvider(), className]}
+  data-state={defaultOpen ? "expanded" : "collapsed"}
+  data-mobile-open="false"
+  data-keyboard-shortcut={keyboardShortcut}
+  style={mergedStyle}
+  {...rest}
+  data-slot="sidebar-provider"
+>
+  <slot />
+</div>
+
+<script>
+  class SidebarController {
+    private provider: HTMLElement;
+    private boundKeyHandler: (e: KeyboardEvent) => void;
+    private boundResizeHandler: () => void;
+    private wasMobile: boolean = false;
+
+    constructor(provider: HTMLElement) {
+      this.provider = provider;
+      this.boundKeyHandler = this.handleKeydown.bind(this);
+      this.boundResizeHandler = this.handleResize.bind(this);
+      this.wasMobile = this.isMobile();
+      this.setupKeyboardShortcut();
+      this.setupCustomEvents();
+      this.setupResizeListener();
+    }
+
+    private handleKeydown(e: KeyboardEvent) {
+      // Skip if focus is in an editable element
+      const target = e.target as HTMLElement | null;
+      if (target) {
+        const tagName = target.tagName.toLowerCase();
+        if (
+          tagName === "input" ||
+          tagName === "textarea" ||
+          tagName === "select" ||
+          target.isContentEditable ||
+          target.closest("[contenteditable='true']")
+        ) {
+          return;
+        }
+      }
+
+      const shortcut = this.provider.getAttribute("data-keyboard-shortcut") || "b";
+      if (e.key === shortcut && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        this.toggle();
+      }
+    }
+
+    private setupKeyboardShortcut() {
+      document.removeEventListener("keydown", this.boundKeyHandler);
+      document.addEventListener("keydown", this.boundKeyHandler);
+    }
+
+    private setupCustomEvents() {
+      this.provider.addEventListener("sidebar:toggle", () => this.toggle());
+      this.provider.addEventListener("sidebar:open", () => this.setOpen(true));
+      this.provider.addEventListener("sidebar:close", () => this.setOpen(false));
+      this.provider.addEventListener("sidebar:toggle-mobile", () => this.toggleMobile());
+      this.provider.addEventListener("sidebar:open-mobile", () => this.setMobileOpen(true));
+      this.provider.addEventListener("sidebar:close-mobile", () => this.setMobileOpen(false));
+    }
+
+    private handleResize() {
+      const isMobileNow = this.isMobile();
+      // Close mobile sheet when transitioning from mobile to desktop
+      if (this.wasMobile && !isMobileNow) {
+        this.setMobileOpen(false);
+      }
+      this.wasMobile = isMobileNow;
+    }
+
+    private setupResizeListener() {
+      window.removeEventListener("resize", this.boundResizeHandler);
+      window.addEventListener("resize", this.boundResizeHandler);
+    }
+
+    isMobile(): boolean {
+      // Check if desktop sidebar is hidden (has display: none from hidden class)
+      const desktopSidebar = this.provider.querySelector<HTMLElement>('[data-slot="sidebar"]');
+      if (!desktopSidebar) return false;
+      return getComputedStyle(desktopSidebar).display === "none";
+    }
+
+    getState(): "expanded" | "collapsed" {
+      return this.provider.getAttribute("data-state") as "expanded" | "collapsed";
+    }
+
+    isOpen(): boolean {
+      return this.getState() === "expanded";
+    }
+
+    isMobileOpen(): boolean {
+      return this.provider.getAttribute("data-mobile-open") === "true";
+    }
+
+    toggle() {
+      if (this.isMobile()) {
+        this.toggleMobile();
+      } else {
+        this.setOpen(!this.isOpen());
+      }
+    }
+
+    setOpen(open: boolean) {
+      const state = open ? "expanded" : "collapsed";
+      this.provider.setAttribute("data-state", state);
+      this.provider.dispatchEvent(new CustomEvent("sidebar:change", { detail: { open, state } }));
+    }
+
+    toggleMobile() {
+      // Check the actual dialog state instead of our tracked state
+      const mobileSheet = this.provider.querySelector<HTMLElement>(".starwind-sheet");
+      const dialogContent = mobileSheet?.querySelector<HTMLElement>(".starwind-dialog-content");
+      const isCurrentlyOpen = dialogContent?.dataset.state === "open";
+
+      this.setMobileOpen(!isCurrentlyOpen);
+    }
+
+    setMobileOpen(open: boolean) {
+      this.provider.setAttribute("data-mobile-open", String(open));
+
+      // Find the mobile sidebar Sheet and use Dialog's programmatic API
+      const mobileSheet = this.provider.querySelector<HTMLElement>(".starwind-sheet");
+      if (mobileSheet) {
+        const eventName = open ? "dialog:open" : "dialog:close";
+        mobileSheet.dispatchEvent(new CustomEvent(eventName));
+      }
+
+      this.provider.dispatchEvent(new CustomEvent("sidebar:mobile-change", { detail: { open } }));
+    }
+
+    destroy() {
+      document.removeEventListener("keydown", this.boundKeyHandler);
+      window.removeEventListener("resize", this.boundResizeHandler);
+    }
+  }
+
+  const sidebarInstances = new WeakMap<HTMLElement, SidebarController>();
+  const trackedProviders = new Set<HTMLElement>();
+
+  const cleanupSidebars = () => {
+    // Destroy controllers for providers no longer in DOM
+    for (const provider of trackedProviders) {
+      if (!document.contains(provider)) {
+        sidebarInstances.get(provider)?.destroy();
+        trackedProviders.delete(provider);
+      }
+    }
+  };
+
+  const setupSidebars = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-sidebar-provider").forEach((provider) => {
+      if (!sidebarInstances.has(provider)) {
+        sidebarInstances.set(provider, new SidebarController(provider));
+        trackedProviders.add(provider);
+      }
+    });
+  };
+
+  setupSidebars();
+  document.addEventListener("astro:before-swap", cleanupSidebars);
+  document.addEventListener("astro:after-swap", setupSidebars);
+  document.addEventListener("starwind:init", setupSidebars);
+</script>

package/src/components/sidebar/SidebarRail.astro

@@ -0,0 +1,72 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarRailProps extends HTMLAttributes<"button"> {}
+type Props = SidebarRailProps;
+
+export const sidebarRail = cv({
+  base: [
+    "starwind-sidebar-rail",
+    "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex",
+    "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
+    "after:absolute after:inset-y-0 after:left-1/2 after:w-6xs",
+    "hover:after:bg-sidebar-border",
+    "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+    "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
+    "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+    "hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+    "group-data-[collapsible=offcanvas]:translate-x-0",
+    "group-data-[collapsible=offcanvas]:after:left-full",
+    "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+    "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<button
+  type="button"
+  class:list={[sidebarRail(), className]}
+  data-sidebar="rail"
+  aria-label="Toggle Sidebar"
+  tabindex="-1"
+  {...rest}
+  data-slot="sidebar-rail"></button>
+
+<script>
+  class SidebarRailHandler {
+    private rail: HTMLElement;
+    private provider: HTMLElement | null;
+
+    constructor(rail: HTMLElement) {
+      this.rail = rail;
+      this.provider = rail.closest<HTMLElement>('[data-slot="sidebar-provider"]');
+      this.init();
+    }
+
+    private init() {
+      this.rail.addEventListener("click", this.handleClick.bind(this));
+    }
+
+    private handleClick() {
+      if (this.provider) {
+        this.provider.dispatchEvent(new CustomEvent("sidebar:toggle"));
+      }
+    }
+  }
+
+  const railInstances = new WeakMap<HTMLElement, SidebarRailHandler>();
+
+  const setupSidebarRails = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-sidebar-rail").forEach((rail) => {
+      if (railInstances.has(rail)) return;
+      railInstances.set(rail, new SidebarRailHandler(rail));
+    });
+  };
+
+  setupSidebarRails();
+  document.addEventListener("astro:after-swap", setupSidebarRails);
+  document.addEventListener("starwind:init", setupSidebarRails);
+</script>

package/src/components/sidebar/SidebarSeparator.astro

@@ -0,0 +1,25 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Separator from "../separator/Separator.astro";
+
+const sidebarSeparator = cv({
+  base: "bg-sidebar-border mx-5xs w-auto",
+});
+
+export interface SidebarSeparatorProps extends ComponentProps<typeof Separator> {}
+type Props = SidebarSeparatorProps;
+
+const { orientation = "horizontal", class: className, ...rest } = Astro.props;
+---
+
+<Separator
+  orientation={orientation}
+  class:list={[sidebarSeparator(), className]}
+  data-sidebar="separator"
+  {...rest}
+  data-slot="sidebar-separator"
+/>
+

package/src/components/sidebar/SidebarTrigger.astro

@@ -0,0 +1,69 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+import IconPanelLeft from "~icons/lucide/panel-left";
+
+const sidebarTrigger = cv({
+  base: "starwind-sidebar-trigger",
+});
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Button from "../button/Button.astro";
+
+export interface SidebarTriggerProps extends ComponentProps<typeof Button> {}
+type Props = SidebarTriggerProps;
+
+const { class: className, size = "icon-sm", variant = "ghost", ...rest } = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class:list={[sidebarTrigger(), className]}
+  data-sidebar="trigger"
+  aria-label="Toggle Sidebar"
+  {...rest}
+  data-slot="sidebar-trigger"
+>
+  <slot name="icon">
+    <IconPanelLeft />
+  </slot>
+  <span class="sr-only">Toggle Sidebar</span>
+</Button>
+
+<script>
+  class SidebarTriggerHandler {
+    private trigger: HTMLElement;
+    private provider: HTMLElement | null;
+
+    constructor(trigger: HTMLElement) {
+      this.trigger = trigger;
+      this.provider = trigger.closest<HTMLElement>('[data-slot="sidebar-provider"]');
+      this.init();
+    }
+
+    private init() {
+      this.trigger.addEventListener("click", this.handleClick.bind(this));
+    }
+
+    private handleClick() {
+      if (this.provider) {
+        this.provider.dispatchEvent(new CustomEvent("sidebar:toggle"));
+      }
+    }
+  }
+
+  const triggerInstances = new WeakMap<HTMLElement, SidebarTriggerHandler>();
+
+  const setupSidebarTriggers = () => {
+    document.querySelectorAll<HTMLElement>(".starwind-sidebar-trigger").forEach((trigger) => {
+      if (triggerInstances.has(trigger)) return;
+      triggerInstances.set(trigger, new SidebarTriggerHandler(trigger));
+    });
+  };
+
+  setupSidebarTriggers();
+  document.addEventListener("astro:after-swap", setupSidebarTriggers);
+  document.addEventListener("starwind:init", setupSidebarTriggers);
+</script>
+

package/src/components/skeleton/Skeleton.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+
+export const skeleton = cv({
+  base: "bg-muted animate-pulse rounded-md",
+});
+---
+
+<div class:list={[skeleton(), className]} {...rest} data-slot="skeleton"></div>