fulldev-ui 0.9.3 → 0.10.1

package/src/components/ui/sidebar/sidebar-menu-button.astro

@@ -17,7 +17,7 @@ const variants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",
@@ -45,14 +45,17 @@ type TooltipValue =
       collisionPadding?: number
     })
 
-interface Props
-  extends VariantProps<typeof variants>, HTMLAttributes<"button"> {
-  as?: "a" | "button" | "div" | "span"
-  href?: string
-  isActive?: boolean
-  active?: boolean
-  tooltip?: TooltipValue
-}
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"span"> & {
+    as?: "a" | "button" | "div" | "span"
+    href?: string
+    isActive?: boolean
+    active?: boolean
+    tooltip?: TooltipValue
+  }
 
 const {
   as: explicitTag,
@@ -64,7 +67,7 @@ const {
   tooltip,
   type,
   ...props
-} = Astro.props satisfies Props
+} = Astro.props
 
 const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
 const resolvedActive = isActive ?? active
@@ -88,7 +91,6 @@ const {
     <Tooltip>
       <TooltipTrigger
         as={Tag}
-        data-slot="sidebar-menu-button"
         data-sidebar="menu-button"
         data-size={size}
         data-active={resolvedActive ? "true" : undefined}

package/src/components/ui/sidebar/sidebar-menu-sub-button.astro

@@ -19,13 +19,15 @@ const variants = cva(
   }
 )
 
-interface Props
-  extends VariantProps<typeof variants>, HTMLAttributes<"button"> {
-  as?: "a" | "button" | "span"
-  href?: string
-  isActive?: boolean
-  active?: boolean
-}
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"span"> & {
+    as?: "a" | "button" | "span"
+    href?: string
+    isActive?: boolean
+    active?: boolean
+  }
 
 const {
   as: explicitTag,
@@ -35,7 +37,7 @@ const {
   active = false,
   type,
   ...props
-} = Astro.props satisfies Props
+} = Astro.props
 
 const Tag = explicitTag || "a"
 const resolvedActive = isActive ?? active

package/src/components/ui/sidebar/sidebar-provider.astro

@@ -34,7 +34,6 @@ const resolvedStyle = [
   data-slot="sidebar-wrapper"
   data-default-open={defaultOpen ? "true" : "false"}
   data-open={open === undefined ? undefined : open ? "true" : "false"}
-  data-sidebar-initializing="true"
   style={resolvedStyle}
   class={cn(
     "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
@@ -43,14 +42,6 @@ const resolvedStyle = [
   {...props}
 >
   <slot />
-  <style is:inline>
-    [data-slot="sidebar-wrapper"][data-sidebar-initializing="true"]
-      [data-slot="sidebar-gap"],
-    [data-slot="sidebar-wrapper"][data-sidebar-initializing="true"]
-      [data-slot="sidebar-container"] {
-      transition: none !important;
-    }
-  </style>
   <script is:inline>
     ;(() => {
       window.__fulldevSyncSidebarProvider ??= (provider, open) => {
@@ -76,9 +67,16 @@ const resolvedStyle = [
           })
 
         provider
-          .querySelectorAll("[data-sidebar='menu-tooltip']")
+          .querySelectorAll("[data-slot='tooltip']")
           .forEach((tooltip) => {
-            tooltip.hidden = state !== "collapsed"
+            if (
+              state !== "collapsed" &&
+              tooltip.querySelector("[data-sidebar='menu-button']")
+            ) {
+              tooltip.dispatchEvent(
+                new CustomEvent("tooltip:set", { detail: { open: false } })
+              )
+            }
           })
       }
 
@@ -102,9 +100,6 @@ const resolvedStyle = [
 
       provider.dataset.openMobile = "false"
       window.__fulldevSyncSidebarProvider(provider, isOpen)
-      requestAnimationFrame(() => {
-        provider.removeAttribute("data-sidebar-initializing")
-      })
     })()
   </script>
 </div>
@@ -144,6 +139,33 @@ const resolvedStyle = [
       window.__fulldevSyncSidebarProvider?.(provider, open)
     }
 
+    document.addEventListener("dialog:change", (event) => {
+      const root = event.target
+      if (!(root instanceof HTMLElement) || root.dataset.sidebar !== "sheet")
+        return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      if (provider)
+        provider.dataset.openMobile = String(Boolean(event.detail?.open))
+    })
+
+    document.addEventListener("tooltip:change", (event) => {
+      if (!event.detail?.open) return
+      const root = event.target
+      if (!(root instanceof HTMLElement)) return
+      if (!root.querySelector("[data-sidebar='menu-button']")) return
+      const provider = root.closest("[data-slot='sidebar-wrapper']")
+      const sidebar = root.closest("[data-slot='sidebar']")
+      if (
+        provider?.dataset.state !== "collapsed" ||
+        sidebar?.dataset.collapsible !== "icon" ||
+        !window.matchMedia("(min-width: 768px)").matches
+      ) {
+        root.dispatchEvent(
+          new CustomEvent("tooltip:set", { detail: { open: false } })
+        )
+      }
+    })
+
     document.addEventListener("click", (event) => {
       const control = event.target?.closest?.(
         "[data-sidebar='trigger'], [data-sidebar='rail']"
@@ -160,7 +182,7 @@ const resolvedStyle = [
 
     document.addEventListener("keydown", (event) => {
       if (event.key.toLowerCase() !== "b") return
-      if (!event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+      if (!(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey) {
         return
       }
       if (event.defaultPrevented) return

package/src/components/ui/sidebar/sidebar-rail.astro

@@ -16,7 +16,7 @@ const { class: className, type = "button", ...props } = Astro.props
   title="Toggle Sidebar"
   type={type}
   class={cn(
-    "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear 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] sm:flex",
+    "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
     "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",

package/src/components/ui/sidebar/sidebar-trigger.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import PanelLeftIcon from "@lucide/astro/icons/panel-left"
 
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"button"> & {
   variant?: "ghost" | "secondary"
@@ -17,10 +17,10 @@ const { class: className, ...props } = Astro.props
   variant="ghost"
   size="icon-sm"
   class={className}
-  aria-keyshortcuts="Meta+B"
+  aria-keyshortcuts="Control+B Meta+B"
   {...props}
 >
-  <Icon name="panel-left" />
+  <PanelLeftIcon />
   <span class="sr-only">Toggle Sidebar</span>
   <slot />
 </Button>

package/src/components/ui/sidebar/sidebar.astro

@@ -54,7 +54,6 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
           side={side}
           showCloseButton={false}
           data-sidebar="sidebar"
-          data-slot="sidebar"
           data-mobile="true"
           style="--sidebar-width: var(--sidebar-width-mobile);"
           class={cn(
@@ -96,7 +95,7 @@ const desktopCollapsible = desktopState === "collapsed" ? collapsible : ""
           data-slot="sidebar-container"
           data-side={side}
           class={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:-left-(--sidebar-width) data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:-right-(--sidebar-width) md:flex",
+            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
             variant === "floating" || variant === "inset"
               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
               : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",

package/src/components/ui/slider/slider.astro

@@ -33,7 +33,7 @@ const {
 const serializedDefaultValue = Array.isArray(defaultValue)
   ? defaultValue.join(",")
   : defaultValue
-const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
+const thumbCount = String(serializedDefaultValue ?? "").includes(",") ? 2 : 1
 ---
 
 <div
@@ -45,16 +45,18 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
   data-large-step={largeStep}
   data-orientation={orientation}
   data-thumb-alignment={thumbAlignment}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   class={cn(
-    "relative flex touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+    "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
     className
   )}
   {...props}
 >
   <div
     data-slot="slider-control"
-    class="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+    data-orientation={orientation}
+    data-disabled={disabled ? "true" : undefined}
+    class="relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
   >
     <div
       data-slot="slider-track"
@@ -62,7 +64,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
     >
       <div
         data-slot="slider-range"
-        class="bg-primary rounded-full select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        class="bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
       >
       </div>
     </div>
@@ -70,7 +72,7 @@ const thumbCount = Array.isArray(defaultValue) ? defaultValue.length : 1
       Array.from({ length: thumbCount }).map(() => (
         <div
           data-slot="slider-thumb"
-          class="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+          class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
         />
       ))
     }

package/src/components/ui/spinner/spinner.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import LoaderCircle from "@lucide/astro/icons/loader-circle"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"svg"> & {
   color?: string
@@ -15,10 +15,10 @@ type Props = HTMLAttributes<"svg"> & {
 const { class: className, ...props } = Astro.props
 ---
 
-<Icon
-  {...props}
+<LoaderCircle
+  data-slot="spinner"
   role="status"
   aria-label="Loading"
-  name="loader-circle"
   class={cn("size-4 animate-spin", className)}
+  {...props}
 />

package/src/components/ui/switch/switch.astro

@@ -29,7 +29,7 @@ const {
 
 const initialChecked = defaultChecked === true
 const switchStyle =
-  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
+  "peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-readonly:cursor-default"
 const switchSizeStyle = {
   sm: "h-[14px] w-[24px]",
   default: "h-[18.4px] w-[32px]",
@@ -47,9 +47,9 @@ const switchSizeStyle = {
   data-checked={initialChecked ? "" : undefined}
   data-unchecked={initialChecked ? undefined : ""}
   data-default-checked={defaultChecked}
-  data-disabled={disabled}
+  data-disabled={disabled ? "true" : undefined}
   data-read-only={readOnly}
-  data-readonly={readOnly}
+  data-readonly={readOnly ? "" : undefined}
   data-required={required}
   data-name={name}
   data-value={value}
@@ -60,6 +60,8 @@ const switchSizeStyle = {
   <span
     aria-hidden="true"
     data-slot="switch-thumb"
+    data-checked={initialChecked ? "" : undefined}
+    data-unchecked={initialChecked ? undefined : ""}
     class="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
   ></span>
 </span>

package/src/components/ui/tabs/tabs-content.astro

@@ -7,11 +7,12 @@ type Props = HTMLAttributes<"div"> & {
   value?: string
 }
 
-const { class: className, value, ...props } = Astro.props
+const { class: className, hidden = true, value, ...props } = Astro.props
 ---
 
 <div
   data-slot="tabs-content"
+  hidden={hidden}
   data-value={value}
   class={cn("flex-1 text-sm outline-none", className)}
   {...props}

package/src/components/ui/theme-toggle/theme-toggle.astro

@@ -1,9 +1,10 @@
 ---
 import type { ComponentProps } from "astro/types"
+import Moon from "@lucide/astro/icons/moon"
+import Sun from "@lucide/astro/icons/sun"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = ComponentProps<typeof Button>
 
@@ -23,8 +24,8 @@ const {
   class={cn("relative", className)}
   {...props}
 >
-  <Icon name="sun" class="dark:hidden" />
-  <Icon name="moon" class="hidden dark:block" />
+  <Sun class="dark:hidden" />
+  <Moon class="hidden dark:block" />
   <span class="sr-only">Toggle theme</span>
 </Button>
 

package/src/components/ui/toggle/toggle.astro

@@ -27,6 +27,8 @@ const {
   data-default-pressed={defaultPressed}
   data-disabled={disabled}
   type={type}
+  disabled={disabled}
+  aria-pressed={defaultPressed === true ? "true" : "false"}
   class={cn(toggleVariants({ variant, size }), className)}
   {...props}
 >

package/src/components/ui/tooltip/tooltip-content.astro

@@ -35,7 +35,7 @@ const {
     data-align-offset={alignOffset}
     data-avoid-collisions={avoidCollisions}
     data-collision-padding={collisionPadding}
-    class="z-50"
+    class="isolate z-50"
   >
     <div
       data-slot="tooltip-content"

package/src/components/ui/typography/typography-a.astro

@@ -3,12 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"a">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"a"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<a data-slot="typography-a" class={cn(className)} {...props}>
+<a data-slot="typography-a" data-size={size} class={cn(className)} {...props}>
   <slot />
 </a>
 
@@ -16,7 +19,19 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-a"],
-  [data-slot="typography"] a:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > a:not([data-slot]) {
     @apply text-primary font-medium underline underline-offset-4;
   }
+
+  [data-slot="typography-a"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-a"][data-size="default"] {
+    @apply text-base;
+  }
+
+  [data-slot="typography-a"][data-size="lg"] {
+    @apply text-lg;
+  }
 </style>

package/src/components/ui/typography/typography-blockquote.astro

@@ -3,12 +3,20 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"blockquote">
+type Size = "sm" | "default" | "lg"
+type Props = HTMLAttributes<"blockquote"> & {
+  size?: Size
+}
 
-const { class: className, ...props } = Astro.props
+const { class: className, size = "default", ...props } = Astro.props
 ---
 
-<blockquote data-slot="typography-blockquote" class={cn(className)} {...props}>
+<blockquote
+  data-slot="typography-blockquote"
+  data-size={size}
+  class={cn(className)}
+  {...props}
+>
   <slot />
 </blockquote>
 
@@ -16,8 +24,20 @@ const { class: className, ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-blockquote"],
-  [data-slot="typography"]
-    blockquote:not(.no-typography):not(.no-typography *) {
-    @apply border-l-2 pl-6 text-base italic;
+  [data-slot="typography"] > blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+
+  [data-slot="typography-blockquote"][data-size="sm"] {
+    @apply text-sm;
+  }
+
+  [data-slot="typography-blockquote"][data-size="default"],
+  [data-slot="typography"] > blockquote {
+    @apply text-base;
+  }
+
+  [data-slot="typography-blockquote"][data-size="lg"] {
+    @apply text-lg;
   }
 </style>

package/src/components/ui/typography/typography-h1.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h1"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h1"],
-  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h1 {
     @apply scroll-m-20 font-semibold tracking-tight text-balance;
   }
 
   [data-slot="typography-h1"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h1 {
     @apply text-3xl;
   }
 
   [data-slot="typography-h1"][data-size="default"],
-  [data-slot="typography"] h1:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h1,
+  [data-slot="typography"][data-size="default"] > h1 {
     @apply text-4xl;
   }
 
   [data-slot="typography-h1"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h1:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h1 {
     @apply text-5xl;
   }
 </style>

package/src/components/ui/typography/typography-h2.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h2"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,28 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h2"],
-  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h2 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h2"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h2 {
     @apply text-2xl;
   }
 
   [data-slot="typography-h2"][data-size="default"],
-  [data-slot="typography"] h2:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h2,
+  [data-slot="typography"][data-size="default"] > h2 {
     @apply text-3xl;
   }
 
   [data-slot="typography-h2"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h2:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h2 {
     @apply text-4xl;
   }
+
+  [data-slot="typography-h2"]:first-child,
+  [data-slot="typography"] > h2:first-child {
+    @apply mt-0;
+  }
 </style>

package/src/components/ui/typography/typography-h3.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h3"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h3"],
-  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h3 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h3"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h3 {
     @apply text-xl;
   }
 
   [data-slot="typography-h3"][data-size="default"],
-  [data-slot="typography"] h3:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h3,
+  [data-slot="typography"][data-size="default"] > h3 {
     @apply text-2xl;
   }
 
   [data-slot="typography-h3"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h3:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h3 {
     @apply text-3xl;
   }
 </style>

package/src/components/ui/typography/typography-h4.astro

@@ -3,8 +3,9 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
+type Size = "sm" | "default" | "lg"
 type Props = HTMLAttributes<"h4"> & {
-  size?: "sm" | "default" | "lg"
+  size?: Size
 }
 
 const { class: className, size = "default", ...props } = Astro.props
@@ -18,26 +19,23 @@ const { class: className, size = "default", ...props } = Astro.props
   @reference "@/styles/global.css";
 
   [data-slot="typography-h4"],
-  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h4 {
     @apply scroll-m-20 font-semibold tracking-tight;
   }
 
   [data-slot="typography-h4"][data-size="sm"],
-  [data-slot="typography"][data-size="sm"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="sm"] > h4 {
     @apply text-lg;
   }
 
   [data-slot="typography-h4"][data-size="default"],
-  [data-slot="typography"] h4:not(.no-typography):not(.no-typography *),
-  [data-slot="typography"][data-size="default"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"] > h4,
+  [data-slot="typography"][data-size="default"] > h4 {
     @apply text-xl;
   }
 
   [data-slot="typography-h4"][data-size="lg"],
-  [data-slot="typography"][data-size="lg"]
-    h4:not(.no-typography):not(.no-typography *) {
+  [data-slot="typography"][data-size="lg"] > h4 {
     @apply text-2xl;
   }
 </style>