@starwind-ui/core 1.15.0 → 1.15.1

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

@@ -1,213 +0,0 @@
----
-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

@@ -1,24 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,52 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,22 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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

@@ -1,59 +0,0 @@
----
-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

@@ -1,30 +0,0 @@
----
-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

@@ -1,129 +0,0 @@
----
-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

@@ -1,21 +0,0 @@
----
-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>