@starwind-ui/core 1.13.0 → 1.15.0

package/dist/src/components/sidebar/SidebarMenuSkeleton.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps, HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Skeleton } from "@/components/starwind/skeleton";
+
+const sidebarMenuSkeleton = tv({
+  base: "flex h-8 items-center gap-2 rounded-md px-2",
+});
+
+type Props = 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;
+};
+
+const { showIcon = false, width, class: className, ...rest } = Astro.props;
+
+const skeletonWidth = width || `${Math.floor(Math.random() * 40) + 50}%`;
+---
+
+<div
+  class={sidebarMenuSkeleton({ class: className })}
+  data-slot="sidebar-menu-skeleton"
+  data-sidebar="menu-skeleton"
+  {...rest}
+>
+  {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/dist/src/components/sidebar/SidebarMenuSub.astro

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

package/dist/src/components/sidebar/SidebarMenuSubButton.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+type Props = HTMLAttributes<"a"> &
+  VariantProps<typeof sidebarMenuSubButton> & {
+    /**
+     * Whether the menu sub item is currently active
+     */
+    isActive?: boolean;
+  };
+
+export const sidebarMenuSubButton = tv({
+  base: [
+    "text-sidebar-foreground ring-sidebar-outline",
+    "flex h-8 min-w-0 -translate-x-px items-center gap-2 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:opacity-50",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-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={sidebarMenuSubButton({ size, class: className })}
+  data-slot="sidebar-menu-sub-button"
+  data-sidebar="menu-sub-button"
+  data-size={size || "md"}
+  data-active={isActive}
+  {...rest}
+>
+  <slot />
+</a>

package/dist/src/components/sidebar/SidebarMenuSubItem.astro

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

package/dist/src/components/sidebar/SidebarProvider.astro

@@ -0,0 +1,213 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Default open state of the sidebar
+   * @default true
+   */
+  defaultOpen?: boolean;
+  /**
+   * Keyboard shortcut to toggle the sidebar
+   * @default "b"
+   */
+  keyboardShortcut?: string;
+};
+
+export const sidebarProvider = tv({
+  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={sidebarProvider({ class: className })}
+  data-slot="sidebar-provider"
+  data-state={defaultOpen ? "expanded" : "collapsed"}
+  data-mobile-open="false"
+  data-keyboard-shortcut={keyboardShortcut}
+  style={mergedStyle}
+  {...rest}
+>
+  <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/dist/src/components/sidebar/SidebarRail.astro

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"button">;
+
+export const sidebarRail = tv({
+  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-[2px]",
+    "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={sidebarRail({ class: className })}
+  data-slot="sidebar-rail"
+  data-sidebar="rail"
+  aria-label="Toggle Sidebar"
+  tabindex="-1"
+  {...rest}></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/dist/src/components/sidebar/SidebarSeparator.astro

@@ -0,0 +1,22 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Separator } from "@/components/starwind/separator";
+
+const sidebarSeparator = tv({
+  base: "bg-sidebar-border mx-2 w-auto",
+});
+
+type Props = ComponentProps<typeof Separator>;
+
+const { orientation = "horizontal", class: className, ...rest } = Astro.props;
+---
+
+<Separator
+  orientation={orientation}
+  class={sidebarSeparator({ class: className })}
+  data-slot="sidebar-separator"
+  data-sidebar="separator"
+  {...rest}
+/>

package/dist/src/components/sidebar/SidebarTrigger.astro

@@ -0,0 +1,66 @@
+---
+import PanelLeft from "@tabler/icons/outline/layout-sidebar.svg";
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+const sidebarTrigger = tv({
+  base: "starwind-sidebar-trigger",
+});
+
+import { Button } from "@/components/starwind/button";
+
+type Props = ComponentProps<typeof Button>;
+
+const { class: className, size = "icon-sm", variant = "ghost", ...rest } = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class={sidebarTrigger({ class: className })}
+  data-slot="sidebar-trigger"
+  data-sidebar="trigger"
+  aria-label="Toggle Sidebar"
+  {...rest}
+>
+  <slot name="icon">
+    <PanelLeft />
+  </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/dist/src/components/sidebar/index.ts

@@ -0,0 +1,103 @@
+import Sidebar, {
+  sidebar,
+  sidebarContainer,
+  sidebarGap,
+  sidebarInner,
+  sidebarMobileContent,
+} from "./Sidebar.astro";
+import SidebarContent, { sidebarContent } from "./SidebarContent.astro";
+import SidebarFooter, { sidebarFooter } from "./SidebarFooter.astro";
+import SidebarGroup, { sidebarGroup } from "./SidebarGroup.astro";
+import SidebarGroupContent, { sidebarGroupContent } from "./SidebarGroupContent.astro";
+import SidebarGroupLabel, { sidebarGroupLabel } from "./SidebarGroupLabel.astro";
+import SidebarHeader, { sidebarHeader } from "./SidebarHeader.astro";
+import SidebarInput from "./SidebarInput.astro";
+import SidebarInset, { sidebarInset } from "./SidebarInset.astro";
+import SidebarMenu, { sidebarMenu } from "./SidebarMenu.astro";
+import SidebarMenuAction, { sidebarMenuAction } from "./SidebarMenuAction.astro";
+import SidebarMenuBadge, { sidebarMenuBadge } from "./SidebarMenuBadge.astro";
+import SidebarMenuButton, { sidebarMenuButton } from "./SidebarMenuButton.astro";
+import SidebarMenuItem, { sidebarMenuItem } from "./SidebarMenuItem.astro";
+import SidebarMenuSkeleton from "./SidebarMenuSkeleton.astro";
+import SidebarMenuSub, { sidebarMenuSub } from "./SidebarMenuSub.astro";
+import SidebarMenuSubButton, { sidebarMenuSubButton } from "./SidebarMenuSubButton.astro";
+import SidebarMenuSubItem from "./SidebarMenuSubItem.astro";
+import SidebarProvider, { sidebarProvider } from "./SidebarProvider.astro";
+import SidebarRail, { sidebarRail } from "./SidebarRail.astro";
+import SidebarSeparator from "./SidebarSeparator.astro";
+import SidebarTrigger from "./SidebarTrigger.astro";
+
+const SidebarVariants = {
+  sidebar,
+  sidebarGap,
+  sidebarContainer,
+  sidebarInner,
+  sidebarMobileContent,
+  sidebarContent,
+  sidebarFooter,
+  sidebarGroup,
+  sidebarGroupContent,
+  sidebarGroupLabel,
+  sidebarHeader,
+  sidebarInset,
+  sidebarMenu,
+  sidebarMenuAction,
+  sidebarMenuBadge,
+  sidebarMenuButton,
+  sidebarMenuItem,
+  sidebarMenuSub,
+  sidebarMenuSubButton,
+  sidebarProvider,
+  sidebarRail,
+};
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  SidebarVariants,
+};
+
+export default {
+  Root: SidebarProvider,
+  Sidebar,
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupContent: SidebarGroupContent,
+  GroupLabel: SidebarGroupLabel,
+  Header: SidebarHeader,
+  Input: SidebarInput,
+  Inset: SidebarInset,
+  Menu: SidebarMenu,
+  MenuAction: SidebarMenuAction,
+  MenuBadge: SidebarMenuBadge,
+  MenuButton: SidebarMenuButton,
+  MenuItem: SidebarMenuItem,
+  MenuSkeleton: SidebarMenuSkeleton,
+  MenuSub: SidebarMenuSub,
+  MenuSubButton: SidebarMenuSubButton,
+  MenuSubItem: SidebarMenuSubItem,
+  Rail: SidebarRail,
+  Separator: SidebarSeparator,
+  Trigger: SidebarTrigger,
+};