@starwind-ui/core 1.15.4 → 1.16.0

package/dist/src/components/popover/PopoverContent.astro

@@ -0,0 +1,102 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * Side of the popover
+   * @default bottom
+   */
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * Alignment of the popover
+   * @default center
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 4
+   */
+  sideOffset?: number;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+  /**
+   * Accessible name for the dialog when a PopoverTitle is not present.
+   * If neither aria-label nor aria-labelledby is provided, a fallback label is applied.
+   */
+  "aria-label"?: string;
+};
+
+export const popoverContent = tv({
+  base: [
+    "starwind-popover-content",
+    "bg-popover text-popover-foreground z-50 flex w-72 flex-col gap-2.5 overflow-x-hidden overflow-y-auto rounded-lg border p-2.5 shadow-md",
+    "data-[state=open]:animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+    "fixed isolate will-change-transform",
+  ],
+  variants: {
+    side: {
+      bottom: "slide-in-from-top-2 slide-out-to-top-2",
+      top: "slide-in-from-bottom-2 slide-out-to-bottom-2",
+      right: "slide-in-from-left-2 slide-out-to-left-2",
+      left: "slide-in-from-right-2 slide-out-to-right-2",
+    },
+    align: {
+      start: "",
+      center: "",
+      end: "",
+    },
+  },
+  compoundVariants: [
+    {
+      side: ["top", "bottom"],
+      align: "start",
+      class: "slide-in-from-left-1 slide-out-to-left-1",
+    },
+    {
+      side: ["top", "bottom"],
+      align: "end",
+      class: "slide-in-from-right-1 slide-out-to-right-1",
+    },
+  ],
+  defaultVariants: {
+    side: "bottom",
+    align: "center",
+  },
+});
+
+const {
+  class: className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  animationDuration = 150,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class={popoverContent({ side, align, class: className })}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-state="closed"
+  role="dialog"
+  aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : "Popover dialog")}
+  aria-labelledby={ariaLabelledBy}
+  tabindex="-1"
+  style={{
+    display: "none",
+    animationDuration: `${animationDuration}ms`,
+  }}
+  {...rest}
+  data-slot="popover-content"
+>
+  <slot />
+</div>

package/dist/src/components/popover/PopoverDescription.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"p">;
+
+export const popoverDescription = tv({ base: "text-muted-foreground" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<p class={popoverDescription({ class: className })} {...rest} data-slot="popover-description">
+  <slot />
+</p>

package/dist/src/components/popover/PopoverHeader.astro

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

package/dist/src/components/popover/PopoverTitle.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = HTMLAttributes<"h3">;
+
+export const popoverTitle = tv({ base: "font-medium" });
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<h3 class={popoverTitle({ class: className })} {...rest} data-slot="popover-title">
+  <slot />
+</h3>

package/dist/src/components/popover/PopoverTrigger.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { tv } from "tailwind-variants";
+
+type Props = Omit<HTMLAttributes<"button">, "role" | "type"> & {
+  /**
+   * When true, the component will render its child element with a simple wrapper instead of a button component
+   */
+  asChild?: boolean;
+};
+
+export const popoverTrigger = tv({
+  base: [
+    "starwind-popover-trigger",
+    "inline-flex items-center justify-center",
+    "focus-visible:ring-outline/50 transition-[color,box-shadow] outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none",
+  ],
+});
+
+const { class: className, asChild = false, ...rest } = Astro.props;
+
+let hasChildren = false;
+if (Astro.slots.has("default")) {
+  hasChildren = true;
+}
+---
+
+{
+  asChild && hasChildren ? (
+    <div
+      class:list={["starwind-popover-trigger", className]}
+      data-slot="popover-trigger"
+      data-as-child
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      class={popoverTrigger({ class: className })}
+      type="button"
+      aria-haspopup="dialog"
+      aria-expanded="false"
+      data-state="closed"
+      {...rest}
+      data-slot="popover-trigger"
+    >
+      <slot />
+    </button>
+  )
+}

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

@@ -0,0 +1,34 @@
+import Popover, { popover } from "./Popover.astro";
+import PopoverContent, { popoverContent } from "./PopoverContent.astro";
+import PopoverDescription, { popoverDescription } from "./PopoverDescription.astro";
+import PopoverHeader, { popoverHeader } from "./PopoverHeader.astro";
+import PopoverTitle, { popoverTitle } from "./PopoverTitle.astro";
+import PopoverTrigger, { popoverTrigger } from "./PopoverTrigger.astro";
+
+const PopoverVariants = {
+  popover,
+  popoverContent,
+  popoverDescription,
+  popoverHeader,
+  popoverTitle,
+  popoverTrigger,
+};
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverVariants,
+};
+
+export default {
+  Root: Popover,
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Header: PopoverHeader,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+};

package/dist/src/components/progress/Progress.astro

@@ -80,8 +80,8 @@ const indicatorStyle = isIndeterminate
   data-value={value}
   data-max={max}
   data-indeterminate={isIndeterminate}
-  data-slot="progress"
   {...rest}
+  data-slot="progress"
 >
   <div class:list={[indicatorClasses]} style={indicatorStyle}></div>
 </div>

package/dist/src/components/prose/Prose.astro

@@ -11,7 +11,7 @@ type Props = HTMLAttributes<"div">;
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class:list={[prose({ class: className })]} data-slot="prose" {...rest}><slot /></div>
+<div class:list={[prose({ class: className })]} {...rest} data-slot="prose"><slot /></div>
 
 <style is:global>
   /* ==========================================================================

package/dist/src/components/radio-group/RadioGroup.astro

@@ -53,8 +53,8 @@ const {
   class:list={[radioGroup({ orientation, class: className })]}
   data-value={value || defaultValue}
   disabled={disabled}
-  data-slot="radio-group"
   {...rest}
+  data-slot="radio-group"
 >
   {legend && <legend class="sr-only">{legend}</legend>}
   <slot />

package/dist/src/components/radio-group/RadioGroupItem.astro

@@ -118,8 +118,8 @@ const {
     value={value}
     checked={checked}
     disabled={disabled}
-    data-slot="radio-group-item"
     {...rest}
+    data-slot="radio-group-item"
   />
   <span class={radioControl({ variant, class: className })} data-slot="radio-group-item-control">
     <slot name="icon">

package/dist/src/components/select/Select.astro

@@ -26,8 +26,8 @@ const { class: className, name, defaultValue, required, ...rest } = Astro.props;
   data-name={name}
   data-value={defaultValue}
   data-required={required}
-  data-slot="select"
   {...rest}
+  data-slot="select"
 >
   <slot />
 </div>

package/dist/src/components/select/SelectContent.astro

@@ -77,7 +77,6 @@ const {
   data-side={side}
   data-align={align}
   data-state="closed"
-  data-slot="select-content"
   tabindex="-1"
   style={{
     // hide the content initially. Script will remove this
@@ -87,6 +86,7 @@ const {
     marginBottom: side === "top" ? `${sideOffset}px` : undefined,
   }}
   {...rest}
+  data-slot="select-content"
 >
   <div class={selectContentInner()}>
     <slot />

package/dist/src/components/select/SelectItem.astro

@@ -34,11 +34,11 @@ const { class: className, value, disabled, ...rest } = Astro.props;
   class={selectItem({ class: className })}
   data-value={value}
   data-disabled={disabled}
-  data-slot="select-item"
   aria-selected="false"
   role="option"
   tabindex="0"
   {...rest}
+  data-slot="select-item"
 >
   <span>
     <slot />

package/dist/src/components/select/SelectLabel.astro

@@ -9,6 +9,6 @@ export const selectLabel = tv({ base: "text-muted-foreground py-1.5 pr-8 pl-2" }
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={selectLabel({ class: className })} data-slot="select-label" {...rest}>
+<div class={selectLabel({ class: className })} {...rest} data-slot="select-label">
   <slot />
 </div>

package/dist/src/components/select/SelectSearch.astro

@@ -36,11 +36,11 @@ const {
   <input
     type="text"
     class={selectSearch({ class: className })}
-    data-slot="select-search"
     placeholder={placeholder}
     autocomplete="off"
     aria-label={placeholder}
     {...rest}
+    data-slot="select-search"
   />
 </div>
 

package/dist/src/components/select/SelectSeparator.astro

@@ -9,4 +9,4 @@ export const selectSeparator = tv({ base: "bg-muted -mx-1 my-1 h-px" });
 const { class: className, ...rest } = Astro.props;
 ---
 
-<div class={selectSeparator({ class: className })} data-slot="select-separator" {...rest}></div>
+<div class={selectSeparator({ class: className })} {...rest} data-slot="select-separator"></div>

package/dist/src/components/select/SelectTrigger.astro

@@ -44,8 +44,8 @@ const { class: className, size, ...rest } = Astro.props;
   aria-haspopup="listbox"
   aria-autocomplete="none"
   data-state="closed"
-  data-slot="select-trigger"
   {...rest}
+  data-slot="select-trigger"
 >
   <slot />
   <slot name="icon">

package/dist/src/components/select/SelectValue.astro

@@ -14,6 +14,6 @@ export const selectValue = tv({ base: "pointer-events-none" });
 const { placeholder = "select", class: className, ...rest } = Astro.props;
 ---
 
-<span class={selectValue({ class: className })} data-slot="select-value" {...rest}>
+<span class={selectValue({ class: className })} {...rest} data-slot="select-value">
   {placeholder}
 </span>

package/dist/src/components/separator/Separator.astro

@@ -30,7 +30,7 @@ const { class: className, orientation = "horizontal", ...rest } = Astro.props;
   role="separator"
   aria-orientation={orientation}
   class={separator({ orientation, class: className })}
-  data-slot="separator"
   {...rest}
+  data-slot="separator"
 >
 </div>

package/dist/src/components/sheet/Sheet.astro

@@ -8,6 +8,6 @@ type Props = ComponentProps<typeof Dialog>;
 const { class: className, ...rest } = Astro.props;
 ---
 
-<Dialog class:list={["starwind-sheet", className]} data-slot="sheet" {...rest}>
+<Dialog class:list={["starwind-sheet", className]} {...rest} data-slot="sheet">
   <slot />
 </Dialog>

package/dist/src/components/sheet/SheetContent.astro

@@ -73,9 +73,9 @@ export const sheetCloseButton = tv({
     class: className,
   })}
   data-state="closed"
-  data-slot="sheet-content"
   data-close-duration="300"
   {...rest}
+  data-slot="sheet-content"
 >
   <slot />
   <button

package/dist/src/components/sheet/SheetDescription.astro

@@ -11,6 +11,6 @@ export const sheetDescription = tv({
 });
 ---
 
-<p class={sheetDescription({ class: className })} data-slot="sheet-description" {...rest}>
+<p class={sheetDescription({ class: className })} {...rest} data-slot="sheet-description">
   <slot />
 </p>

package/dist/src/components/sheet/SheetFooter.astro

@@ -11,6 +11,6 @@ export const sheetFooter = tv({
 });
 ---
 
-<div class={sheetFooter({ class: className })} data-slot="sheet-footer" {...rest}>
+<div class={sheetFooter({ class: className })} {...rest} data-slot="sheet-footer">
   <slot />
 </div>

package/dist/src/components/sheet/SheetHeader.astro

@@ -11,6 +11,6 @@ export const sheetHeader = tv({
 });
 ---
 
-<div class={sheetHeader({ class: className })} data-slot="sheet-header" {...rest}>
+<div class={sheetHeader({ class: className })} {...rest} data-slot="sheet-header">
   <slot />
 </div>

package/dist/src/components/sheet/SheetTitle.astro

@@ -11,6 +11,6 @@ export const sheetTitle = tv({
 });
 ---
 
-<h2 class={sheetTitle({ class: className })} data-slot="sheet-title" {...rest}>
+<h2 class={sheetTitle({ class: className })} {...rest} data-slot="sheet-title">
   <slot />
 </h2>

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

@@ -111,8 +111,8 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
         "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
         className,
       ]}
-      data-slot="sidebar"
       {...rest}
+      data-slot="sidebar"
     >
       <slot />
     </div>
@@ -132,7 +132,7 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
         <div data-slot="sidebar-gap" class={sidebarGap({ variant })} />
 
         {/* Fixed sidebar container */}
-        <div data-slot="sidebar-container" class={sidebarContainer({ side, variant })} {...rest}>
+        <div class={sidebarContainer({ side, variant })} {...rest} data-slot="sidebar-container">
           <div data-slot="sidebar-inner" class={sidebarInner({ variant })}>
             <slot />
           </div>
@@ -182,6 +182,7 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
     private init() {
       this.updateState();
       this.provider.addEventListener("sidebar:change", this.boundUpdateState);
+      this.provider.addEventListener("sidebar:mobile-change", this.boundUpdateState);
     }
 
     private updateState() {
@@ -193,6 +194,22 @@ const SIDEBAR_WIDTH_MOBILE = "18rem";
       } 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");
+      }
     }
   }
 

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

@@ -16,9 +16,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarContent({ class: className })}
-  data-slot="sidebar-content"
   data-sidebar="content"
   {...rest}
+  data-slot="sidebar-content"
 >
   <slot />
 </div>

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

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarFooter({ class: className })}
-  data-slot="sidebar-footer"
   data-sidebar="footer"
   {...rest}
+  data-slot="sidebar-footer"
 >
   <slot />
 </div>

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

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarGroup({ class: className })}
-  data-slot="sidebar-group"
   data-sidebar="group"
   {...rest}
+  data-slot="sidebar-group"
 >
   <slot />
 </div>

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

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarGroupContent({ class: className })}
-  data-slot="sidebar-group-content"
   data-sidebar="group-content"
   {...rest}
+  data-slot="sidebar-group-content"
 >
   <slot />
 </div>

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

@@ -32,19 +32,19 @@ if (Astro.slots.has("default")) {
   asChild && hasChildren ? (
     <div
       class={sidebarGroupLabel({ class: className })}
-      data-slot="sidebar-group-label"
       data-sidebar="group-label"
       data-as-child
       {...rest}
+      data-slot="sidebar-group-label"
     >
       <slot />
     </div>
   ) : (
     <div
       class={sidebarGroupLabel({ class: className })}
-      data-slot="sidebar-group-label"
       data-sidebar="group-label"
       {...rest}
+      data-slot="sidebar-group-label"
     >
       <slot />
     </div>

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

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarHeader({ class: className })}
-  data-slot="sidebar-header"
   data-sidebar="header"
   {...rest}
+  data-slot="sidebar-header"
 >
   <slot />
 </div>

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

@@ -16,7 +16,7 @@ const { size = "md", class: className, ...rest } = Astro.props;
 <Input
   size={size}
   class={sidebarInput({ class: className })}
-  data-slot="sidebar-input"
   data-sidebar="input"
   {...rest}
+  data-slot="sidebar-input"
 />

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

@@ -16,6 +16,6 @@ export const sidebarInset = tv({
 const { class: className, ...rest } = Astro.props;
 ---
 
-<main class={sidebarInset({ class: className })} data-slot="sidebar-inset" {...rest}>
+<main class={sidebarInset({ class: className })} {...rest} data-slot="sidebar-inset">
   <slot />
 </main>

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

@@ -13,9 +13,9 @@ const { class: className, ...rest } = Astro.props;
 
 <ul
   class={sidebarMenu({ class: className })}
-  data-slot="sidebar-menu"
   data-sidebar="menu"
   {...rest}
+  data-slot="sidebar-menu"
 >
   <slot />
 </ul>

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

@@ -51,9 +51,9 @@ const {
   variant={variant}
   size={size}
   class={sidebarMenuAction({ showOnHover, class: className })}
-  data-slot="sidebar-menu-action"
   data-sidebar="menu-action"
   {...rest}
+  data-slot="sidebar-menu-action"
 >
   <slot />
 </Button>

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

@@ -22,9 +22,9 @@ const { class: className, ...rest } = Astro.props;
 
 <div
   class={sidebarMenuBadge({ class: className })}
-  data-slot="sidebar-menu-badge"
   data-sidebar="menu-badge"
   {...rest}
+  data-slot="sidebar-menu-badge"
 >
   <slot />
 </div>

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

@@ -79,7 +79,7 @@ const buttonDataAttrs = {
 
 {
   tooltip ? (
-    <Tooltip openDelay={0} closeDelay={0} class="w-full">
+    <Tooltip openDelay={0} closeDelay={0} class="starwind-sidebar-menu-button-tooltip w-full">
       <TooltipTrigger>
         {asChild ? (
           <div class={buttonClasses} {...buttonDataAttrs} data-as-child>
@@ -111,19 +111,7 @@ const buttonDataAttrs = {
 }
 
 <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 {
+  :root:not([data-starwind-sidebar-tooltips="enabled"]) .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>