fulldev-ui 0.9.2 → 0.10.0

package/src/components/ui/command/command-dialog.astro

@@ -28,18 +28,18 @@ const {
   <DialogContent
     class:list={[
       "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
-      "**:data-[slot=command]:border-0",
-      "**:data-[slot=command]:bg-transparent",
-      "**:data-[slot=command-input-wrapper]:h-12",
+      "[&_[data-slot=command]]:border-0",
+      "[&_[data-slot=command]]:bg-transparent",
+      "[&_[data-slot=command-input-wrapper]]:h-12",
       "[&_[data-slot=command-input-wrapper]_svg]:size-5",
-      "**:data-[slot=command-input]:h-12",
-      "**:data-[slot=command-item]:px-2",
-      "**:data-[slot=command-item]:py-3",
+      "[&_[data-slot=command-input]]:h-12",
+      "[&_[data-slot=command-item]]:px-2",
+      "[&_[data-slot=command-item]]:py-3",
       "[&_[data-slot=command-item]_svg]:size-5",
-      "**:data-[slot=command-group-heading]:text-muted-foreground",
-      "**:data-[slot=command-group-heading]:px-2",
-      "**:data-[slot=command-group-heading]:font-medium",
-      "**:data-[slot=command-group]:px-2",
+      "[&_[data-slot=command-group-heading]]:text-muted-foreground",
+      "[&_[data-slot=command-group-heading]]:px-2",
+      "[&_[data-slot=command-group-heading]]:font-medium",
+      "[&_[data-slot=command-group]]:px-2",
       "[&_[data-slot=command-group]:not([hidden])_~[data-slot=command-group]]:pt-0",
       contentClass,
     ]}

package/src/components/ui/command/command-input.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLAttributes } from "astro/types"
+import SearchIcon from "@lucide/astro/icons/search"
 
 import { cn } from "@/lib/utils"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"input"> & {
   wrapperClass?: string
@@ -16,7 +16,7 @@ const { class: className, wrapperClass, ...props } = Astro.props
     class="border-input/30 bg-input/30 flex h-8! items-center rounded-lg! border shadow-none!"
   >
     <div class="flex items-center pl-2">
-      <Icon name="search" class="size-4 shrink-0 opacity-50" />
+      <SearchIcon class="size-4 shrink-0 opacity-50" />
     </div>
     <input
       type="text"

package/src/components/ui/command/command-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<"a"> & {
   disabled?: boolean
@@ -37,14 +37,13 @@ const keywordsValue = Array.isArray(keywords) ? keywords.join(", ") : keywords
   data-force-mount={forceMount ? "true" : undefined}
   href={href}
   class={cn(
-    "group/command-item data-selected:bg-accent data-selected:text-accent-foreground data-selected:**:[svg]:text-accent-foreground href:cursor-pointer href:no-underline relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground href:cursor-pointer href:no-underline relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
 >
   <slot />
-  <Icon
-    name="check"
-    class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+  <CheckIcon
+    class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-selected/command-item:opacity-100"
   />
 </Tag>

package/src/components/ui/dialog/dialog-close.astro

@@ -1,9 +1,9 @@
 ---
 import type { ComponentProps } from "astro/types"
+import X from "@lucide/astro/icons/x"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
 
 type Props = ComponentProps<typeof Button>
 
@@ -12,6 +12,6 @@ const { class: className, ...props } = Astro.props
 
 <Button class={cn(className)} data-slot="dialog-close" {...props}>
   <slot>
-    <Icon name="x" />
+    <X />
   </slot>
 </Button>

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

@@ -1,11 +1,11 @@
 ---
 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 DialogOverlay from "@/components/ui/dialog/dialog-overlay.astro"
 import DialogPortal from "@/components/ui/dialog/dialog-portal.astro"
-import { Icon } from "@/components/ui/icon"
 
 type Props = HTMLAttributes<"div"> & {
   showCloseButton?: boolean
@@ -40,7 +40,7 @@ const {
           size="icon-sm"
           class="absolute top-4 right-4"
         >
-          <Icon name="x" class="size-4" />
+          <XIcon />
           <span class="sr-only">Close</span>
         </Button>
       )

package/src/components/ui/dialog/dialog.astro

@@ -1,12 +1,35 @@
 ---
 import type { HTMLAttributes } from "astro/types"
 
-type Props = HTMLAttributes<"div">
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+  lockScroll?: boolean
+  alertDialog?: boolean
+}
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  defaultOpen,
+  closeOnClickOutside,
+  closeOnEscape,
+  lockScroll,
+  alertDialog,
+  ...props
+} = Astro.props
 ---
 
-<div data-slot="dialog" class={className} {...props}>
+<div
+  data-slot="dialog"
+  data-default-open={defaultOpen}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  data-lock-scroll={lockScroll}
+  data-alert-dialog={alertDialog}
+  class={className}
+  {...props}
+>
   <slot />
 </div>
 

package/src/components/ui/dropdown-menu/dropdown-menu-checkbox-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<"button"> & {
   value: string
@@ -34,7 +34,7 @@ const {
   disabled={disabled ? true : undefined}
   type={type}
   class={cn(
-    "group/dropdown-menu-checkbox-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**: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:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/dropdown-menu-checkbox-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:**: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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -43,9 +43,8 @@ const {
     data-slot="dropdown-menu-checkbox-item-indicator"
     class="pointer-events-none absolute right-2 flex items-center justify-center"
   >
-    <Icon
-      name="check"
-      class="size-4 opacity-0 group-data-checked/dropdown-menu-checkbox-item:opacity-100"
+    <CheckIcon
+      class="opacity-0 group-data-[checked]/dropdown-menu-checkbox-item:opacity-100"
     />
   </span>
   <slot />

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

@@ -16,10 +16,10 @@ type Props = HTMLAttributes<"div"> & {
 const {
   class: className,
   hidden = true,
-  side = "bottom",
-  align = "start",
-  sideOffset = 4,
-  alignOffset = 0,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
   avoidCollisions,
   collisionPadding,
   ...props

package/src/components/ui/dropdown-menu/dropdown-menu-item.astro

@@ -27,7 +27,7 @@ const {
   disabled={disabled ? true : undefined}
   type={type}
   class={cn(
-    "group/dropdown-menu-item data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/dropdown-menu-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground not-data-[variant=destructive]:data-[highlighted]:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:text-destructive dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}

package/src/components/ui/dropdown-menu/dropdown-menu-label.astro

@@ -14,7 +14,7 @@ const { class: className, inset, ...props } = Astro.props
   data-slot="dropdown-menu-label"
   data-inset={inset}
   class={cn(
-    "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
+    "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
     className
   )}
   {...props}

package/src/components/ui/dropdown-menu/dropdown-menu-radio-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<"button"> & {
   value: string
@@ -34,7 +34,7 @@ const {
   disabled={disabled ? true : undefined}
   type={type}
   class={cn(
-    "group/dropdown-menu-radio-item data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**: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:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "group/dropdown-menu-radio-item data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:**: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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     className
   )}
   {...props}
@@ -43,9 +43,8 @@ const {
     data-slot="dropdown-menu-radio-item-indicator"
     class="pointer-events-none absolute right-2 flex items-center justify-center"
   >
-    <Icon
-      name="check"
-      class="size-4 opacity-0 group-data-checked/dropdown-menu-radio-item:opacity-100"
+    <CheckIcon
+      class="opacity-0 group-data-[checked]/dropdown-menu-radio-item:opacity-100"
     />
   </span>
   <slot />

package/src/components/ui/dropdown-menu/dropdown-menu-shortcut.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <span
   data-slot="dropdown-menu-shortcut"
   class={cn(
-    "text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+    "text-muted-foreground group-data-[highlighted]/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
     className
   )}
   {...props}

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

@@ -16,6 +16,7 @@ type Props = HTMLAttributes<"div"> & {
   alignOffset?: number
   avoidCollisions?: boolean
   collisionPadding?: number
+  lockScroll?: boolean
 }
 
 const {
@@ -33,6 +34,7 @@ const {
   alignOffset,
   avoidCollisions,
   collisionPadding,
+  lockScroll,
   ...props
 } = Astro.props
 
@@ -55,6 +57,7 @@ const defaultValuesAttr =
   data-align-offset={alignOffset}
   data-avoid-collisions={avoidCollisions}
   data-collision-padding={collisionPadding}
+  data-lock-scroll={lockScroll}
   class={className}
   {...props}
 >

package/src/components/ui/field/field-label.astro

@@ -12,7 +12,7 @@ const { class: className, ...props } = Astro.props
 <Label
   data-slot="field-label"
   class={cn(
-    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-3",
     "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
     className
   )}

package/src/components/ui/field/field-title.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <div
   data-slot="field-label"
   class={cn(
-    "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+    "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
     className
   )}
   {...props}

package/src/components/ui/hover-card/hover-card-content.astro

@@ -15,10 +15,10 @@ type Props = HTMLAttributes<"div"> & {
 const {
   class: className,
   hidden = true,
-  side = "bottom",
-  align = "center",
-  sideOffset = 4,
-  alignOffset = 4,
+  side,
+  align,
+  sideOffset,
+  alignOffset,
   avoidCollisions,
   collisionPadding,
   ...props

package/src/components/ui/hover-card/hover-card.astro

@@ -24,13 +24,13 @@ const {
   class: className,
   defaultOpen,
   open,
-  delay = 300,
+  delay = 700,
   skipDelayDuration = 300,
   closeDelay = 300,
   side = "bottom",
   align = "center",
   sideOffset = 4,
-  alignOffset = 4,
+  alignOffset = 0,
   avoidCollisions = true,
   collisionPadding = 8,
   portal = true,

package/src/components/ui/icon/icon.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types"
 
 type Props = Omit<HTMLAttributes<"svg">, "name" | "href"> & {
   href?: HTMLAttributes<"a">["href"]
-  name?: string | number | null
+  name?: string | number
 }
 
 const { name, href, ...props } = Astro.props
@@ -37,13 +37,10 @@ const hrefMap = {
   linkedin: "linkedin",
 } as const
 
-const icons = import.meta.glob(
-  [
-    "/node_modules/lucide-static/icons/*.svg",
-    "/node_modules/simple-icons/icons/*.svg",
-  ],
-  { eager: true }
-) as Record<string, { default: any }>
+const icons = import.meta.glob([
+  "node_modules/lucide-static/icons/*.svg",
+  "node_modules/simple-icons/icons/*.svg",
+])
 
 const foundPath = () => {
   let foundPath: string | undefined = undefined
@@ -66,8 +63,8 @@ const foundPath = () => {
   return foundPath
 }
 
-const iconPath = foundPath()
-const module = iconPath ? icons[iconPath] : undefined
+const foundModule = foundPath() && icons[foundPath() as keyof typeof icons]
+const module = foundModule && ((await foundModule()) as any)
 const Comp = module?.default
 ---
 

package/src/components/ui/input-group/input-group-button.astro

@@ -41,7 +41,6 @@ const isLink = "href" in Astro.props
   data-size={size}
   type={isLink ? undefined : type}
   variant={variant}
-  size={size}
   class={cn(variants({ size }), className)}
   {...props}
 >

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

@@ -23,7 +23,7 @@ const variants = cva(
 
 type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
 
-const { class: className, variant, ...props } = Astro.props
+const { class: className, variant = "default", ...props } = Astro.props
 ---
 
 <div

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

@@ -14,7 +14,6 @@ const variants = cva(
     variants: {
       variant: {
         default: "border-transparent",
-        inset: "border-transparent",
         outline: "border-border",
         muted: "bg-muted/50 border-transparent",
       },
@@ -24,23 +23,6 @@ const variants = cva(
         xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
       },
     },
-    compoundVariants: [
-      {
-        variant: "inset",
-        size: "default",
-        class: "-mx-4",
-      },
-      {
-        variant: "inset",
-        size: "sm",
-        class: "-mx-3",
-      },
-      {
-        variant: "inset",
-        size: "xs",
-        class: "-mx-2.5",
-      },
-    ],
     defaultVariants: {
       variant: "default",
       size: "default",

package/src/components/ui/kbd/kbd-group.astro

@@ -10,7 +10,7 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="kbd-group"
-  class={cn("inline-flex items-center gap-1 leading-none", className)}
+  class={cn("inline-flex items-center gap-1", className)}
   {...props}
 >
   <slot />

package/src/components/ui/kbd/kbd.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <kbd
   data-slot="kbd"
   class={cn(
-    "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs leading-none font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+    "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
     className
   )}
   {...props}

package/src/components/ui/layout/layout-body.astro

@@ -21,6 +21,6 @@ const { class: className, ...props } = Astro.props
 
 <style is:global>
   body {
-    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+    font-family: var(--font-sans);
   }
 </style>

package/src/components/ui/layout/layout-head.astro

@@ -1,6 +1,6 @@
 ---
 import type { ImageMetadata } from "astro"
-import { getImage } from "astro:assets"
+import { Font, getImage } from "astro:assets"
 import { AstroSeo } from "@lexingtonthemes/seo"
 
 type Props = {
@@ -73,6 +73,8 @@ const openGraphImage =
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="generator" content={Astro.generator} />
   <meta charset="utf-8" />
+  <Font cssVariable="--font-sans" />
+  <Font cssVariable="--font-mono" />
   <AstroSeo
     title={title}
     description={description}
@@ -95,6 +97,5 @@ const openGraphImage =
       }),
     }}
   />
-  <slot name="head" />
   <slot />
 </head>

package/src/components/ui/layout/layout-main.astro

@@ -11,7 +11,7 @@ const { class: className, ...props } = Astro.props
 <main
   data-slot="layout-main"
   class={cn(
-    "@container flex flex-col in-data-[slot=sidebar-inset]:rounded-[inherit]",
+    "@container flex flex-col in-[[data-slot=sidebar-inset]]:rounded-[inherit]",
     className
   )}
   {...props}

package/src/components/ui/layout/layout.astro

@@ -31,4 +31,8 @@ const { class: className, lang, ...props } = Astro.props
   .dark {
     color-scheme: dark;
   }
+
+  @view-transition {
+    navigation: auto;
+  }
 </style>