@starwind-ui/core 1.13.0 → 1.15.0

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

@@ -0,0 +1,213 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/starwind/sheet";
+
+type Props = 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";
+};
+
+export const sidebar = tv({
+  base: "starwind-sidebar group peer text-sidebar-foreground hidden md:block",
+});
+
+export const sidebarGap = tv({
+  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 = tv({
+  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 = tv({
+  base: "bg-sidebar flex h-full w-full flex-col",
+  variants: {
+    variant: {
+      sidebar: "",
+      floating: "border-sidebar-border rounded-lg border shadow-sm",
+      inset: "border-sidebar-border rounded-lg border shadow-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "sidebar",
+  },
+});
+
+export const sidebarMobileContent = tv({
+  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,
+      ]}
+      data-slot="sidebar"
+      {...rest}
+    >
+      <slot />
+    </div>
+  ) : (
+    <>
+      {/* Desktop sidebar */}
+      <div
+        class={sidebar({ class: 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 data-slot="sidebar-container" class={sidebarContainer({ side, variant })} {...rest}>
+          <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);
+    }
+
+    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", "");
+      }
+    }
+  }
+
+  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/dist/src/components/sidebar/SidebarContent.astro

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

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const sidebarFooter = tv({
+  base: "flex flex-col gap-2 p-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarFooter({ class: className })}
+  data-slot="sidebar-footer"
+  data-sidebar="footer"
+  {...rest}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const sidebarGroup = tv({
+  base: "relative flex w-full min-w-0 flex-col p-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarGroup({ class: className })}
+  data-slot="sidebar-group"
+  data-sidebar="group"
+  {...rest}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const sidebarGroupContent = tv({
+  base: "w-full text-sm",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarGroupContent({ class: className })}
+  data-slot="sidebar-group-content"
+  data-sidebar="group-content"
+  {...rest}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Render as a child element wrapper instead of a div
+   */
+  asChild?: boolean;
+};
+
+export const sidebarGroupLabel = tv({
+  base: [
+    "text-sidebar-foreground/70 ring-sidebar-outline",
+    "flex h-10 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]:opacity-0",
+  ],
+});
+
+const { asChild = false, class: className, ...rest } = Astro.props;
+
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class={sidebarGroupLabel({ class: className })}
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      data-as-child
+      {...rest}
+    >
+      <slot />
+    </div>
+  ) : (
+    <div
+      class={sidebarGroupLabel({ class: className })}
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      {...rest}
+    >
+      <slot />
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const sidebarHeader = tv({
+  base: "flex flex-col gap-2 p-2",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarHeader({ class: className })}
+  data-slot="sidebar-header"
+  data-sidebar="header"
+  {...rest}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,22 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Input } from "@/components/starwind/input";
+
+const sidebarInput = tv({
+  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={sidebarInput({ class: className })}
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  {...rest}
+/>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"main">;
+
+export const sidebarInset = tv({
+  base: [
+    "bg-background relative flex w-full flex-1 flex-col",
+    "md:peer-data-[variant=inset]:m-2 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-2",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<main class={sidebarInset({ class: className })} data-slot="sidebar-inset" {...rest}>
+  <slot />
+</main>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"ul">;
+
+export const sidebarMenu = tv({
+  base: "flex w-full min-w-0 flex-col gap-1",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<ul
+  class={sidebarMenu({ class: className })}
+  data-slot="sidebar-menu"
+  data-sidebar="menu"
+  {...rest}
+>
+  <slot />
+</ul>

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

@@ -0,0 +1,59 @@
+---
+import type { ComponentProps } from "astro/types";
+import { tv } from "tailwind-variants";
+
+import { Button } from "@/components/starwind/button";
+
+type Props = ComponentProps<typeof Button> & {
+  /**
+   * When true, shows the action only when the menu item is hovered
+   * @default false
+   */
+  showOnHover?: boolean;
+};
+
+export const sidebarMenuAction = tv({
+  base: [
+    "text-sidebar-foreground ring-sidebar-outline",
+    "absolute top-1.5 right-1 flex aspect-square w-5 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-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+  variants: {
+    showOnHover: {
+      true: [
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100",
+        "data-[state=open]:opacity-100",
+        "md:opacity-0",
+      ],
+    },
+  },
+});
+
+const {
+  showOnHover = false,
+  variant = "ghost",
+  size = "icon-sm",
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<Button
+  variant={variant}
+  size={size}
+  class={sidebarMenuAction({ showOnHover, class: className })}
+  data-slot="sidebar-menu-action"
+  data-sidebar="menu-action"
+  {...rest}
+>
+  <slot />
+</Button>

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

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div">;
+
+export const sidebarMenuBadge = tv({
+  base: [
+    "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5",
+    "items-center justify-center rounded-md px-1 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-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden",
+  ],
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+  class={sidebarMenuBadge({ class: className })}
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  {...rest}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv, type VariantProps } from "tailwind-variants";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/starwind/tooltip";
+
+type Props = 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 = tv({
+  base: [
+    "peer/menu-button flex w-full items-center gap-3 overflow-hidden rounded-md p-2.5 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:opacity-50",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-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-10 text-base",
+      sm: "h-8 text-sm",
+      lg: "h-14 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, class: className });
+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="w-full">
+      <TooltipTrigger>
+        {asChild ? (
+          <div class={buttonClasses} {...buttonDataAttrs} data-as-child>
+            <slot />
+          </div>
+        ) : (
+          <Tag class={buttonClasses} {...buttonDataAttrs} {...rest}>
+            <slot />
+          </Tag>
+        )}
+      </TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        class="starwind-sidebar-tooltip-content whitespace-nowrap"
+      >
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : asChild ? (
+    <div class={buttonClasses} {...buttonDataAttrs} data-as-child>
+      <slot />
+    </div>
+  ) : (
+    <Tag class={buttonClasses} {...buttonDataAttrs} {...rest}>
+      <slot />
+    </Tag>
+  )
+}
+
+<style is:global>
+  /* Hide tooltip when sidebar is expanded */
+  [data-slot="sidebar"][data-state="expanded"] .starwind-sidebar-tooltip-content,
+  [data-slot="sidebar"]:not([data-collapsible="icon"]) .starwind-sidebar-tooltip-content {
+    display: none !important;
+  }
+
+  /* Hide tooltips in mobile sheet */
+  .starwind-sheet .starwind-sidebar-tooltip-content {
+    display: none !important;
+  }
+
+  /* Only show tooltip trigger wrapper styles when collapsed */
+  .starwind-sidebar-menu-button-tooltip-trigger {
+    display: contents;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"li">;
+
+export const sidebarMenuItem = tv({
+  base: "group/menu-item relative",
+});
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<li
+  class={sidebarMenuItem({ class: className })}
+  data-slot="sidebar-menu-item"
+  data-sidebar="menu-item"
+  {...rest}
+>
+  <slot />
+</li>