fulldev-ui 0.9.2 → 0.10.0

package/src/components/ui/marquee/marquee.astro

@@ -1,81 +1,73 @@
 ---
-import { cva } from "class-variance-authority"
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type Props = {
-  direction?: "left" | "right" | "top" | "bottom"
-  duration?: number | string
-  gap?: string
-  infinite?: boolean
-  pauseOnHover?: boolean
-  time?: number | string
-  variant?: "gradient" | "solid"
-  class?: string
-  style?: string
-}
+const trackVariants = cva(
+  "flex min-w-max shrink-0 [animation:marquee_var(--marquee-duration)_linear_infinite] items-center gap-[var(--marquee-gap)] before:block before:size-0 before:shrink-0 before:content-['']",
+  {
+    variants: {
+      direction: {
+        left: "",
+        right: "[animation-direction:reverse]",
+      },
+      pauseOnHover: {
+        true: "group-hover/marquee:[animation-play-state:paused]",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      direction: "left",
+      pauseOnHover: false,
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof trackVariants> & {
+    duration?: string
+    gap?: string
+    infinite?: boolean
+  }
 
 const {
-  class: className = "",
-  direction = "left",
-  duration,
-  gap = "1rem",
+  class: className,
+  direction,
+  pauseOnHover,
+  duration = "40s",
+  gap = "1.5rem",
   infinite = true,
-  pauseOnHover = false,
   style,
-  time = 30,
-  variant = "gradient",
   ...props
 } = Astro.props
 
-const resolvedDuration = duration ?? time
-const styleValue = `--duration:${
-  typeof resolvedDuration === "number"
-    ? `${resolvedDuration}s`
-    : resolvedDuration
-}; --gap:${gap}; ${style ?? ""}`
-const contentClass = cn(
-  "marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]",
-  infinite &&
-    "animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]",
-  direction === "top" && "flex-col",
-  direction === "bottom" && "flex-col"
-)
-
-const marqueeVariants = cva("relative w-full", {
-  variants: {
-    variant: {
-      gradient:
-        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]",
-      solid: "",
-    },
-  },
-  defaultVariants: {
-    variant: "gradient",
-  },
-})
+const resolvedStyle = [
+  `--marquee-duration:${duration}`,
+  `--marquee-gap:${gap}`,
+  typeof style === "string" ? style : undefined,
+]
+  .filter(Boolean)
+  .join(";")
 ---
 
 <div
-  data-marquee
-  data-direction={direction}
-  data-pause-on-hover={pauseOnHover ? "true" : undefined}
   class={cn(
-    "",
-    // container utilities
-    "group flex w-full overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col",
-    marqueeVariants({ variant }),
+    "group/marquee flex overflow-hidden select-none [--marquee-duration:40s] [--marquee-gap:1.5rem]",
     className
   )}
-  style={styleValue}
+  style={resolvedStyle}
   {...props}
 >
-  <div class={contentClass}>
+  <div class={trackVariants({ direction, pauseOnHover })}>
     <slot />
   </div>
   {
     infinite && (
-      <div class={contentClass} aria-hidden="true">
+      <div
+        aria-hidden="true"
+        class={trackVariants({ direction, pauseOnHover })}
+      >
         <slot />
       </div>
     )
@@ -83,24 +75,13 @@ const marqueeVariants = cva("relative w-full", {
 </div>
 
 <style>
-  @keyframes marquee-x {
+  @keyframes marquee {
     from {
       transform: translateX(0);
     }
+
     to {
       transform: translateX(-100%);
     }
   }
-  @keyframes marquee-y {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(-100%);
-    }
-  }
-
-  [data-marquee][data-pause-on-hover="true"]:hover .marquee-content {
-    animation-play-state: paused;
-  }
 </style>

package/src/components/ui/native-select/native-select.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = Omit<HTMLAttributes<"select">, "size"> & {
   size?: "sm" | "default"
@@ -27,8 +27,7 @@ const { class: className, size = "default", ...props } = Astro.props
   >
     <slot />
   </select>
-  <Icon
-    name="chevron-down"
+  <ChevronDownIcon
     class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
     aria-hidden="true"
     data-slot="native-select-icon"

package/src/components/ui/navigation-menu/navigation-menu-content.astro

@@ -29,7 +29,7 @@ const {
   data-side={side}
   data-side-offset={sideOffset}
   class={cn(
-    "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+    "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-2 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
     className
   )}
 >

package/src/components/ui/navigation-menu/navigation-menu-list.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <ul
   data-slot="navigation-menu-list"
   class={cn(
-    "group flex flex-1 list-none items-center justify-center gap-1",
+    "group flex flex-1 list-none items-center justify-center gap-0",
     className
   )}
   {...props}

package/src/components/ui/navigation-menu/navigation-menu-trigger.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 import navigationMenuTriggerStyle from "./navigation-menu-trigger-style"
 
@@ -19,8 +19,7 @@ const { class: className, type = "button", ...props } = Astro.props
 >
   <slot />
   {" "}
-  <Icon
-    name="chevron-down"
+  <ChevronDownIcon
     class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
     aria-hidden="true"
   />

package/src/components/ui/navigation-menu/navigation-menu.astro

@@ -48,7 +48,7 @@ const {
   data-safe-triangle={safeTriangle}
   data-debug-safe-triangle={debugSafeTriangle}
   class={cn(
-    "group/navigation-menu relative flex flex-1 items-center justify-center",
+    "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
     className
   )}
 >

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

@@ -51,7 +51,7 @@ const {
       data-position={position}
       hidden={hidden}
       class={cn(
-        "bg-popover text-popover-foreground ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 outline-none",
+        "bg-popover text-popover-foreground ring-foreground/10 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100",
         className
       )}
       {...props}

package/src/components/ui/radio-group/radio-group-item.astro

@@ -23,7 +23,7 @@ const {
   data-value={value}
   data-disabled={disabled ? "" : undefined}
   class={cn(
-    "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border 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",
+    "group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary group-has-[:focus-visible]/field-label:not-data-[checked]:border-input group-has-[:focus-visible]/field-label:data-[checked]:border-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none 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",
     className
   )}
   {...props}
@@ -32,12 +32,12 @@ const {
     aria-hidden="true"
     data-slot="radio-group-indicator"
     class={cn(
-      "flex size-4 items-center justify-center opacity-0 group-data-checked/radio-group-item:opacity-100",
+      "flex size-4 items-center justify-center opacity-0 group-data-[checked]/radio-group-item:opacity-100",
       indicatorClass
     )}
   >
     <span
-      class="bg-background absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+      class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
     ></span>
   </span>
 </span>

package/src/components/ui/rating/rating.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import Star from "@lucide/astro/icons/star"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   value?: number
@@ -23,13 +23,13 @@ const { value = 5, class: className, ...props } = Astro.props
 
       return (
         <span class="text-muted-foreground/25 relative inline-flex size-[1em]">
-          <Icon name="star" class="size-[1em] fill-current" />
+          <Star class="size-[1em] fill-current" />
           {fillPercentage > 0 && (
             <span
               class="text-primary absolute inset-0 overflow-hidden"
               style={{ width: `${fillPercentage}%` }}
             >
-              <Icon name="star" class="size-[1em] fill-current" />
+              <Star class="size-[1em] fill-current" />
             </span>
           )}
         </span>

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

@@ -60,7 +60,7 @@ const {
       <div
         data-slot="select-viewport"
         data-position={position}
-        class="p-1 data-[position=item-aligned]:w-full data-[position=popper]:min-w-36"
+        class="data-[position=item-aligned]:w-full data-[position=popper]:min-w-36"
       >
         <slot />
       </div>

package/src/components/ui/select/select-item.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import CheckIcon from "@lucide/astro/icons/check"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   value?: string
@@ -19,7 +19,7 @@ const { class: className, value, disabled, label, ...props } = Astro.props
   data-disabled={disabled ? "true" : undefined}
   data-label={label}
   class={cn(
-    "group/select-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 *:data-[slot=select-item-text]:flex *:data-[slot=select-item-text]:shrink-0 *:data-[slot=select-item-text]:items-center *:data-[slot=select-item-text]:gap-2 *:data-[slot=select-item-text]:whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/select-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:**:[svg]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 *:data-[slot=select-item-text]:flex *:data-[slot=select-item-text]:shrink-0 *:data-[slot=select-item-text]:items-center *:data-[slot=select-item-text]:gap-2 *:data-[slot=select-item-text]:whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -32,8 +32,8 @@ const { class: className, value, disabled, label, ...props } = Astro.props
   </span>
   <span
     aria-hidden="true"
-    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-selected/select-item:opacity-100"
+    class="pointer-events-none absolute right-2 flex size-4 items-center justify-center opacity-0 group-data-[selected]/select-item:opacity-100"
   >
-    <Icon name="check" />
+    <CheckIcon />
   </span>
 </div>

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

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"button"> & {
   size?: "sm" | "default"
@@ -23,7 +23,7 @@ const {
   data-size={size}
   type={type}
   class={cn(
-    "border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-placeholder:text-muted-foreground flex w-full items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "border-input dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-placeholder:text-muted-foreground flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -31,10 +31,7 @@ const {
   <slot />
   {
     showIcon && (
-      <Icon
-        name="chevron-down"
-        class="text-muted-foreground pointer-events-none size-4"
-      />
+      <ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
     )
   }
 </button>

package/src/components/ui/select/select.astro

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"
 
 type Props = HTMLAttributes<"div"> & {
   defaultValue?: string
+  defaultOpen?: boolean
   placeholder?: string
   disabled?: boolean
   required?: boolean
@@ -18,11 +19,13 @@ type Props = HTMLAttributes<"div"> & {
   avoidCollisions?: boolean
   collisionPadding?: number
   highlightItemOnHover?: boolean
+  lockScroll?: boolean
 }
 
 const {
   class: className,
   defaultValue,
+  defaultOpen,
   placeholder,
   disabled,
   required,
@@ -35,6 +38,7 @@ const {
   avoidCollisions,
   collisionPadding,
   highlightItemOnHover,
+  lockScroll,
   ...props
 } = Astro.props
 ---
@@ -42,6 +46,7 @@ const {
 <div
   data-slot="select"
   data-default-value={defaultValue}
+  data-default-open={defaultOpen}
   data-placeholder={placeholder}
   data-disabled={disabled}
   data-required={required}
@@ -54,6 +59,7 @@ const {
   data-avoid-collisions={avoidCollisions}
   data-collision-padding={collisionPadding}
   data-highlight-item-on-hover={highlightItemOnHover}
+  data-lock-scroll={lockScroll}
   class={cn(
     "group/select relative inline-flex w-fit flex-col gap-1.5",
     className

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

@@ -1,10 +1,10 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import XIcon from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import DialogPortal from "@/components/ui/dialog/dialog-portal.astro"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   side?: "top" | "right" | "bottom" | "left"
@@ -33,8 +33,7 @@ const {
     data-side={side}
     hidden
     class={cn(
-      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
-      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-10 data-[side=bottom]:data-starting-style:translate-y-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-10 data-[side=left]:data-starting-style:-translate-x-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-10 data-[side=right]:data-starting-style:translate-x-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-10 data-[side=top]:data-starting-style:-translate-y-10 data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+      "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
       className
     )}
     style={`z-index: calc(var(--dialog-content-stack-index, 0) + 101);${style ? ` ${style}` : ""}`}
@@ -48,9 +47,9 @@ const {
           data-slot="dialog-close"
           variant="ghost"
           size="icon-sm"
-          class="absolute top-3 right-3"
+          class="absolute top-4 right-4"
         >
-          <Icon name="x" class="size-4" />
+          <XIcon />
           <span class="sr-only">Close</span>
         </Button>
       )

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

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) => {
@@ -102,9 +93,6 @@ const resolvedStyle = [
 
       provider.dataset.openMobile = "false"
       window.__fulldevSyncSidebarProvider(provider, isOpen)
-      requestAnimationFrame(() => {
-        provider.removeAttribute("data-sidebar-initializing")
-      })
     })()
   </script>
 </div>
@@ -160,7 +148,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

@@ -96,7 +96,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",