fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,12 +1,12 @@
 ---
 import type { HTMLAttributes } from "astro/types"
 
-interface Props extends Omit<HTMLAttributes<"svg">, "name" | "href"> {
+type Props = Omit<HTMLAttributes<"svg">, "name" | "href"> & {
   href?: HTMLAttributes<"a">["href"]
-  name?: string | number
+  name?: string | number | null
 }
 
-const { name, href, ...rest } = Astro.props
+const { name, href, ...props } = Astro.props
 
 const hrefMap = {
   "x.com": "x",
@@ -37,35 +37,37 @@ const hrefMap = {
   linkedin: "linkedin",
 } as const
 
-const icons = import.meta.glob([
-  "node_modules/lucide-static/icons/*.svg",
-  "node_modules/simple-icons/icons/*.svg",
-])
+const icons = import.meta.glob(
+  [
+    "/node_modules/lucide-static/icons/*.svg",
+    "/node_modules/simple-icons/icons/*.svg",
+  ],
+  { eager: true }
+) as Record<string, { default: any }>
 
-// Get the right path from the icons glob
 const foundPath = () => {
   let foundPath: string | undefined = undefined
-  // For x.com, we use the simple-icons X instead of the lucide-static X, since they overlap
+
+  // For x.com, use the Simple Icons X instead of Lucide's X icon.
   if (name === "x.com") {
     foundPath = "/node_modules/simple-icons/icons/x.svg"
   } else if (name) {
     foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))
   } else if (href) {
-    const hrefKey =
-      Object.keys(hrefMap).find((key) => href.toString().includes(key)) || name
+    const hrefKey = Object.keys(hrefMap).find((key) =>
+      href.toString().includes(key)
+    )
     const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
-    const foundPath = Object.keys(icons)
-      // If href, reverse so that simple-icons takes precedence
+    foundPath = Object.keys(icons)
       .reverse()
       .find((key) => key.includes(`/${hrefValue}.svg`))
-    return foundPath
   }
-  // Else return the found path with lucide-icons taking precedence
+
   return foundPath
 }
 
-const foundModule = foundPath() && icons[foundPath() as keyof typeof icons]
-const module = foundModule && ((await foundModule()) as any)
+const iconPath = foundPath()
+const module = iconPath ? icons[iconPath] : undefined
 const Comp = module?.default
 ---
 
@@ -76,13 +78,13 @@ const Comp = module?.default
       width={24}
       fill="currentColor"
       class="size-[1em] text-base"
-      {...rest}
+      {...props}
     />
   )
 }
 
 {
   Comp && foundPath()?.includes("lucide-static") && (
-    <Comp height={24} width={24} class="size-[1em] text-base" {...rest} />
+    <Comp height={24} width={24} class="size-[1em] text-base" {...props} />
   )
 }

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

@@ -3,19 +3,19 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends Omit<HTMLAttributes<"input">, "type"> {
-  type: "text" | "email" | "tel"
-}
+type Props = HTMLAttributes<"input">
 
-const { class: className, ...props } = Astro.props
+const {
+  class: className,
+  "data-slot": dataSlot = "input",
+  ...props
+} = Astro.props
 ---
 
 <input
-  data-slot="input"
+  data-slot={dataSlot}
   class={cn(
-    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "dark:bg-input/30 border-input 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 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
     className
   )}
   {...props}

package/src/components/ui/input-group/index.ts

@@ -0,0 +1,6 @@
+export { default as InputGroup } from "./input-group.astro"
+export { default as InputGroupAddon } from "./input-group-addon.astro"
+export { default as InputGroupButton } from "./input-group-button.astro"
+export { default as InputGroupInput } from "./input-group-input.astro"
+export { default as InputGroupText } from "./input-group-text.astro"
+export { default as InputGroupTextarea } from "./input-group-textarea.astro"

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

@@ -0,0 +1,41 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const variants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>a]:-ml-1 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>a]:-mr-1 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
+
+const { class: className, align = "inline-start", ...props } = Astro.props
+---
+
+<div
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(variants({ align }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button, type ButtonVariantProps } from "@/components/ui/button"
+
+const variants = cva("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+  },
+})
+
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> & {
+    type?: "button" | "submit" | "reset"
+    variant?: ButtonVariantProps["variant"]
+  }
+
+const {
+  class: className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+} = Astro.props
+
+const isLink = "href" in Astro.props
+---
+
+<Button
+  data-size={size}
+  type={isLink ? undefined : type}
+  variant={variant}
+  size={size}
+  class={cn(variants({ size }), className)}
+  {...props}
+>
+  <slot />
+</Button>

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

@@ -0,0 +1,23 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+
+type Props = ComponentProps<typeof Input>
+
+const {
+  class: className,
+  "data-slot": dataSlot = "input-group-control",
+  ...props
+} = Astro.props
+---
+
+<Input
+  data-slot={dataSlot}
+  class={cn(
+    "h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="input-group-text"
+  class={cn(
+    "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

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

@@ -0,0 +1,19 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Textarea } from "@/components/ui/textarea"
+
+type Props = ComponentProps<typeof Textarea>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Textarea
+  data-slot="input-group-control"
+  class={cn(
+    "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="input-group"
+  role="group"
+  class={cn(
+    "group/input-group border-input has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-1.5 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  if (!document.documentElement.dataset.inputGroupBound) {
+    document.documentElement.dataset.inputGroupBound = "true"
+
+    document.addEventListener("click", (event) => {
+      const target = event.target
+
+      if (!(target instanceof Element)) return
+
+      const addon = target.closest('[data-slot="input-group-addon"]')
+      if (!(addon instanceof HTMLElement)) return
+
+      if (
+        target.closest(
+          "a, button, input, textarea, select, option, summary, [role='button']"
+        )
+      ) {
+        return
+      }
+
+      const group = addon.closest('[data-slot="input-group"]')
+      const control = group?.querySelector('[data-slot="input-group-control"]')
+
+      if (control instanceof HTMLElement) {
+        control.focus()
+      }
+    })
+  }
+</script>

package/src/components/ui/item/index.ts

@@ -1,7 +1,10 @@
 export { default as Item } from "./item.astro"
+export { default as ItemActions } from "./item-actions.astro"
 export { default as ItemContent } from "./item-content.astro"
 export { default as ItemDescription } from "./item-description.astro"
+export { default as ItemFooter } from "./item-footer.astro"
 export { default as ItemGroup } from "./item-group.astro"
+export { default as ItemHeader } from "./item-header.astro"
 export { default as ItemMedia } from "./item-media.astro"
+export { default as ItemSeparator } from "./item-separator.astro"
 export { default as ItemTitle } from "./item-title.astro"
-export { default as ItemActions } from "./item-actions.astro"

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

@@ -3,21 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="item-actions"
-      class={cn("flex items-center gap-2", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="item-actions"
+  class={cn("flex items-center gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -3,25 +3,19 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="item-content"
-      class={cn(
-        "flex flex-1 flex-col gap-1",
-        "[&+[data-slot=item-content]]:flex-none",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="item-content"
+  class={cn(
+    "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0",
+    "[&+[data-slot=item-content]]:flex-none",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -3,25 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"p"> {}
+type Props = HTMLAttributes<"p">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <p
-      data-slot="item-description"
-      class={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </p>
-  )
-}
+<p
+  data-slot="item-description"
+  class={cn(
+    "text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</p>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="item-footer"
+  class={cn("flex basis-full items-center justify-between gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -3,22 +3,19 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"div"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      role="list"
-      data-slot="item-group"
-      class={cn("group/item-group flex flex-col", className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  role="list"
+  data-slot="item-group"
+  class={cn(
+    "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="item-header"
+  class={cn("flex basis-full items-center justify-between gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const variants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
         image:
-          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: {
@@ -21,21 +21,16 @@ const variants = cva(
   }
 )
 
-interface Props extends HTMLAttributes<"div">, VariantProps<typeof variants> {}
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
 
 const { class: className, variant, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <div
-      data-slot="item-media"
-      class={cn(variants({ variant }), className)}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </div>
-  )
-}
+<div
+  data-slot="item-media"
+  data-variant={variant}
+  class={cn(variants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,17 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = ComponentProps<typeof Separator>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Separator
+  data-slot="item-separator"
+  orientation="horizontal"
+  class={cn("my-2", className)}
+  {...props}
+/>

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

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"h3"> {}
+type Props = HTMLAttributes<"div">
 
 const { class: className, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
 ---
 
-{
-  slot?.trim().length > 0 && (
-    <h3
-      data-slot="item-title"
-      class={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
-      )}
-      {...props}
-    >
-      <Fragment set:html={slot} />
-    </h3>
-  )
-}
+<div
+  data-slot="item-title"
+  class={cn(
+    "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>