@starwind-ui/core 1.15.0 → 1.15.1

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

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

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

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

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

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

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

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

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

@@ -1,103 +0,0 @@
-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,
-};

package/dist/src/components/skeleton/Skeleton.astro

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

package/dist/src/components/skeleton/index.ts

@@ -1,9 +0,0 @@
-import Skeleton, { skeleton } from "./Skeleton.astro";
-
-const SkeletonVariants = {
-  skeleton,
-};
-
-export { Skeleton, SkeletonVariants };
-
-export default Skeleton;