@rimelight/ui 0.0.1

package/src/components/sidebar/Sidebar.astro

@@ -0,0 +1,231 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+import Sheet from "../sheet/Sheet.astro";
+import SheetContent from "../sheet/SheetContent.astro";
+import SheetDescription from "../sheet/SheetDescription.astro";
+import SheetHeader from "../sheet/SheetHeader.astro";
+import SheetTitle from "../sheet/SheetTitle.astro";
+
+export interface SidebarProps extends HTMLAttributes<"div"> {
+  /**
+   * The side of the viewport the sidebar appears on
+   * @default "left"
+   */
+  side?: "left" | "right";
+  /**
+   * The visual variant of the sidebar
+   * @default "sidebar"
+   */
+  variant?: "sidebar" | "floating" | "inset";
+  /**
+   * How the sidebar collapses
+   * @default "offcanvas"
+   */
+  collapsible?: "offcanvas" | "icon" | "none";
+}
+
+type Props = SidebarProps;
+
+export const sidebar = cv({
+  base: "starwind-sidebar group peer text-sidebar-foreground hidden md:block",
+});
+
+export const sidebarGap = cv({
+  base: [
+    "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+    "group-data-[collapsible=offcanvas]:w-0",
+    "group-data-[side=right]:rotate-180",
+  ],
+  variants: {
+    variant: {
+      sidebar: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+      floating: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]",
+      inset: "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]",
+    },
+  },
+  defaultVariants: {
+    variant: "sidebar",
+  },
+});
+
+export const sidebarContainer = cv({
+  base: [
+    "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+  ],
+  variants: {
+    side: {
+      left: "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]",
+      right: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+    },
+    variant: {
+      sidebar: [
+        "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        "group-data-[side=left]:border-r group-data-[side=right]:border-l",
+      ],
+      floating: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]",
+      inset: "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem+2px)]",
+    },
+  },
+  defaultVariants: {
+    side: "left",
+    variant: "sidebar",
+  },
+});
+
+export const sidebarInner = cv({
+  base: "bg-sidebar flex h-full w-full flex-col",
+  variants: {
+    variant: {
+      sidebar: "",
+      floating: "border-sidebar-border rounded-lg b shadow-sm",
+      inset: "border-sidebar-border rounded-lg b shadow-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "sidebar",
+  },
+});
+
+export const sidebarMobileContent = cv({
+  base: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+});
+
+const {
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+---
+
+{/* Non-collapsible sidebar */}
+{
+  collapsible === "none" ? (
+    <div
+      class:list={[
+        "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+        className,
+      ]}
+      {...rest}
+      data-slot="sidebar"
+    >
+      <slot />
+    </div>
+  ) : (
+    <>
+      {/* Desktop sidebar */}
+      <div
+        class:list={[sidebar(), className]}
+        data-state="expanded"
+        data-collapsible=""
+        data-collapsible-mode={collapsible}
+        data-variant={variant}
+        data-side={side}
+        data-slot="sidebar"
+      >
+        {/* Gap placeholder for layout */}
+        <div data-slot="sidebar-gap" class={sidebarGap({ variant })} />
+
+        {/* Fixed sidebar container */}
+        <div class={sidebarContainer({ side, variant })} {...rest} data-slot="sidebar-container">
+          <div data-slot="sidebar-inner" class={sidebarInner({ variant })}>
+            <slot />
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile sidebar (Sheet) */}
+      <Sheet class="md:hidden" data-slot="sidebar-mobile">
+        <SheetContent
+          side={side}
+          class={sidebarMobileContent()}
+          style={{ "--sidebar-width": SIDEBAR_WIDTH_MOBILE }}
+        >
+          <SheetHeader class="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Mobile navigation sidebar</SheetDescription>
+          </SheetHeader>
+          <div class="flex h-full w-full flex-col">
+            <slot />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  )
+}
+
+<script>
+  class SidebarHandler {
+    private sidebar: HTMLElement;
+    private provider: HTMLElement;
+    private collapsibleMode: string;
+    private boundUpdateState: () => void;
+
+    constructor(sidebar: HTMLElement) {
+      this.sidebar = sidebar;
+      this.provider = sidebar.closest<HTMLElement>('[data-slot="sidebar-provider"]')!;
+      this.collapsibleMode =
+        sidebar.dataset.collapsibleMode ||
+        (sidebar.closest("[data-collapsible]") as HTMLElement)?.dataset.collapsible ||
+        "offcanvas";
+      sidebar.dataset.collapsibleMode = this.collapsibleMode;
+
+      this.boundUpdateState = this.updateState.bind(this);
+      this.init();
+    }
+
+    private init() {
+      this.updateState();
+      this.provider.addEventListener("sidebar:change", this.boundUpdateState);
+      this.provider.addEventListener("sidebar:mobile-change", this.boundUpdateState);
+    }
+
+    private updateState() {
+      const state = this.provider.getAttribute("data-state") || "expanded";
+      this.sidebar.setAttribute("data-state", state);
+
+      if (state === "collapsed") {
+        this.sidebar.setAttribute("data-collapsible", this.collapsibleMode);
+      } else {
+        this.sidebar.setAttribute("data-collapsible", "");
+      }
+
+      this.syncSidebarMenuTooltips();
+    }
+
+    private syncSidebarMenuTooltips() {
+      const hasEnabledSidebar = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          '[data-slot="sidebar"][data-collapsible-mode="icon"][data-state="collapsed"]',
+        ),
+      ).some((sidebar) => getComputedStyle(sidebar).display !== "none");
+
+      if (hasEnabledSidebar) {
+        document.documentElement.setAttribute("data-starwind-sidebar-tooltips", "enabled");
+      } else {
+        document.documentElement.removeAttribute("data-starwind-sidebar-tooltips");
+      }
+    }
+  }
+
+  const sidebarInstances = new WeakMap<HTMLElement, SidebarHandler>();
+
+  const setupSidebars = () => {
+    document.querySelectorAll<HTMLElement>('[data-slot="sidebar"]').forEach((sidebar) => {
+      if (sidebarInstances.has(sidebar)) return;
+      const provider = sidebar.closest<HTMLElement>('[data-slot="sidebar-provider"]');
+      if (!provider) return;
+      sidebarInstances.set(sidebar, new SidebarHandler(sidebar));
+    });
+  };
+
+  setupSidebars();
+  document.addEventListener("astro:after-swap", setupSidebars);
+  document.addEventListener("starwind:init", setupSidebars);
+</script>
+

package/src/components/sidebar/SidebarContent.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarContentProps extends HTMLAttributes<"div"> {}
+type Props = SidebarContentProps;
+
+export const sidebarContent = cv({
+  base: [
+    "flex min-h-0 flex-1 flex-col gap-5xs overflow-auto",
+    "group-data-[collapsible=icon]:overflow-hidden",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarContent(), className]}
+  data-sidebar="content"
+  {...rest}
+  data-slot="sidebar-content"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarFooter.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarFooterProps extends HTMLAttributes<"div"> {}
+type Props = SidebarFooterProps;
+
+export const sidebarFooter = cv({
+  base: "flex flex-col gap-5xs p-5xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarFooter(), className]}
+  data-sidebar="footer"
+  {...rest}
+  data-slot="sidebar-footer"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarGroup.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarGroupProps extends HTMLAttributes<"div"> {}
+type Props = SidebarGroupProps;
+
+export const sidebarGroup = cv({
+  base: "relative flex w-full min-w-0 flex-col p-5xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarGroup(), className]}
+  data-sidebar="group"
+  {...rest}
+  data-slot="sidebar-group"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarGroupContent.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarGroupContentProps extends HTMLAttributes<"div"> {}
+type Props = SidebarGroupContentProps;
+
+export const sidebarGroupContent = cv({
+  base: "w-full text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarGroupContent(), className]}
+  data-sidebar="group-content"
+  {...rest}
+  data-slot="sidebar-group-content"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarGroupLabel.astro

@@ -0,0 +1,53 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarGroupLabelProps extends HTMLAttributes<"div"> {
+  /**
+   * Render as a child element wrapper instead of a div
+   */
+  asChild?: boolean;
+}
+
+
+export const sidebarGroupLabel = cv({
+  base: [
+    "text-sidebar-foreground/70 ring-sidebar-outline",
+    "flex h-3xl shrink-0 items-center rounded-md px-2 text-sm font-medium",
+    "outline-hidden transition-[margin,opacity] duration-200 ease-linear",
+    "focus-visible:ring-2",
+    "[&>svg]:size-4.5 [&>svg]:shrink-0",
+    "group-data-[collapsible=icon]:-mt-10 group-data-[collapsible=icon]:op-0",
+  ],
+});
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={[sidebarGroupLabel(), className]}
+      data-sidebar="group-label"
+      data-as-child
+      {...rest}
+      data-slot="sidebar-group-label"
+    >
+      <slot />
+    </div>
+  ) : (
+    <div
+      class:list={[sidebarGroupLabel(), className]}
+      data-sidebar="group-label"
+      {...rest}
+      data-slot="sidebar-group-label"
+    >
+      <slot />
+    </div>
+  )
+}

package/src/components/sidebar/SidebarHeader.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarHeaderProps extends HTMLAttributes<"div"> {}
+type Props = SidebarHeaderProps;
+
+export const sidebarHeader = cv({
+  base: "flex flex-col gap-5xs p-5xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarHeader(), className]}
+  data-sidebar="header"
+  {...rest}
+  data-slot="sidebar-header"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarInput.astro

@@ -0,0 +1,24 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Input from "../input/Input.astro";
+
+const sidebarInput = cv({
+  base: "bg-background focus-visible:ring-sidebar-outline h-10 w-full shadow-none focus-visible:ring-2",
+});
+
+type Props = ComponentProps<typeof Input>;
+
+const { size = "md", class: className, ...rest } = Astro.props;
+---
+
+<Input
+  size={size}
+  class:list={[sidebarInput(), className]}
+  data-sidebar="input"
+  {...rest}
+  data-slot="sidebar-input"
+/>
+

package/src/components/sidebar/SidebarInset.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarInsetProps extends HTMLAttributes<"main"> {}
+type Props = SidebarInsetProps;
+
+export const sidebarInset = cv({
+  base: [
+    "bg-background relative flex w-full flex-1 flex-col",
+    "md:peer-data-[variant=inset]:m-2xl md:peer-data-[variant=inset]:ml-0",
+    "md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+    "md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2xl",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<main class:list={[sidebarInset(), className]} {...rest} data-slot="sidebar-inset">
+  <slot />
+</main>

package/src/components/sidebar/SidebarMenu.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarMenuProps extends HTMLAttributes<"ul"> {}
+type Props = SidebarMenuProps;
+
+export const sidebarMenu = cv({
+  base: "flex w-full min-w-0 flex-col gap-5xs",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul
+  class:list={[sidebarMenu(), className]}
+  data-sidebar="menu"
+  {...rest}
+  data-slot="sidebar-menu"
+>
+  <slot />
+</ul>

package/src/components/sidebar/SidebarMenuAction.astro

@@ -0,0 +1,63 @@
+---
+import type { ComponentProps } from "astro/types";
+import { cv } from "css-variants";
+
+// eslint-disable-next-line typescript/consistent-type-imports
+import Button from "../button/Button.astro";
+
+export interface SidebarMenuActionProps extends ComponentProps<typeof Button> {
+  /**
+   * When true, shows the action only when the menu item is hovered
+   * @default false
+   */
+  showOnHover?: boolean;
+}
+
+type Props = SidebarMenuActionProps;
+
+export const sidebarMenuAction = cv({
+  base: [
+    "text-sidebar-foreground ring-sidebar-outline",
+    "absolute top-xs right-2xs flex aspect-square w-2xs items-center justify-center rounded-md p-0",
+    "outline-hidden transition-transform",
+    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    "peer-hover/menu-button:text-sidebar-accent-foreground",
+    "[&>svg]:size-4 [&>svg]:shrink-0",
+    "after:absolute after:-inset-2 md:after:hidden",
+    "peer-data-[size=sm]/menu-button:top-2xs",
+    "peer-data-[size=default]/menu-button:top-xs",
+    "peer-data-[size=lg]/menu-button:top-sm",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+  variants: {
+    showOnHover: {
+      true: [
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "group-focus-within/menu-item:op-100 group-hover/menu-item:op-100",
+        "data-[state=open]:op-100",
+        "md:op-0",
+      ],
+    },
+  },
+});
+
+const {
+  showOnHover = false,
+  variant = "ghost",
+  size = "icon-sm",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class:list={[sidebarMenuAction({ showOnHover }), className]}
+  data-sidebar="menu-action"
+  {...rest}
+  data-slot="sidebar-menu-action"
+>
+  <slot />
+</Button>
+

package/src/components/sidebar/SidebarMenuBadge.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface SidebarMenuBadgeProps extends HTMLAttributes<"div"> {}
+type Props = SidebarMenuBadgeProps;
+
+export const sidebarMenuBadge = cv({
+  base: [
+    "text-sidebar-foreground pointer-events-none absolute right-2xs flex h-2xs min-w-2xs",
+    "items-center justify-center rounded-md px-2xs text-xs font-medium tabular-nums select-none",
+    "peer-hover/menu-button:text-sidebar-accent-foreground",
+    "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+    "peer-data-[size=sm]/menu-button:top-2xs",
+    "peer-data-[size=default]/menu-button:top-xs",
+    "peer-data-[size=lg]/menu-button:top-sm",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class:list={[sidebarMenuBadge(), className]}
+  data-sidebar="menu-badge"
+  {...rest}
+  data-slot="sidebar-menu-badge"
+>
+  <slot />
+</div>

package/src/components/sidebar/SidebarMenuButton.astro

@@ -0,0 +1,124 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type VariantProps<T extends (...args: any) => any> = NonNullable<Parameters<T>[0]>;
+
+import Tooltip from "../tooltip/Tooltip.astro";
+import TooltipContent from "../tooltip/TooltipContent.astro";
+import TooltipTrigger from "../tooltip/TooltipTrigger.astro";
+
+export interface SidebarMenuButtonProps
+  extends HTMLAttributes<"button">,
+    Omit<HTMLAttributes<"a">, "type">,
+    VariantProps<typeof sidebarMenuButton> {
+  /**
+   * Render as a child element wrapper instead of a button
+   */
+  asChild?: boolean;
+  /**
+   * Whether the menu item is currently active
+   */
+  isActive?: boolean;
+  /**
+   * Tooltip text to show when sidebar is collapsed
+   */
+  tooltip?: string;
+}
+
+
+export const sidebarMenuButton = cv({
+  base: [
+    "peer/menu-button flex w-full items-center gap-3 overflow-hidden rounded-md p-2xl text-left",
+    "ring-sidebar-outline outline-hidden transition-[width,height,padding]",
+    "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",
+    "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:font-medium",
+    "data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground",
+    "group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2.5!",
+    "[&>span:last-child]:truncate [&>svg]:size-4.5 [&>svg]:shrink-0",
+  ],
+  variants: {
+    variant: {
+      default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      outline: [
+        "bg-background shadow-sidebar-border shadow-xs",
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-accent",
+      ],
+    },
+    size: {
+      default: "h-3xl text-base",
+      sm: "h-3xs text-sm",
+      lg: "h-3xl text-lg group-data-[collapsible=icon]:p-0!",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const {
+  asChild = false,
+  isActive = false,
+  tooltip,
+  variant,
+  size,
+  class: className,
+  ...rest
+} = Astro.props;
+
+const Tag = Astro.props.href ? "a" : "button";
+
+const buttonClasses = sidebarMenuButton({ variant, size });
+const buttonDataAttrs = {
+  "data-slot": "sidebar-menu-button",
+  "data-sidebar": "menu-button",
+  "data-size": size || "default",
+  "data-active": isActive,
+};
+---
+
+{
+  tooltip ? (
+    <Tooltip openDelay={0} closeDelay={0} class="starwind-sidebar-menu-button-tooltip w-full">
+      <TooltipTrigger>
+        {asChild ? (
+          <div class:list={[buttonClasses, className]} {...buttonDataAttrs} data-as-child>
+            <slot />
+          </div>
+        ) : (
+          <Tag class:list={[buttonClasses, className]} {...buttonDataAttrs} {...rest}>
+            <slot />
+          </Tag>
+        )}
+      </TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        class="starwind-sidebar-tooltip-content ws-nowrap"
+      >
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : asChild ? (
+    <div class:list={[buttonClasses, className]} {...buttonDataAttrs} data-as-child>
+      <slot />
+    </div>
+  ) : (
+    <Tag class:list={[buttonClasses, className]} {...buttonDataAttrs} {...rest}>
+      <slot />
+    </Tag>
+  )
+}
+
+<style is:global>
+  :root:not([data-starwind-sidebar-tooltips="enabled"]) .starwind-sidebar-tooltip-content {
+    display: none !important;
+  }
+</style>
+