fulldev-ui 0.7.0-beta.9 → 0.7.0

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

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props
+  extends HTMLAttributes<"header">,
+    VariantProps<typeof variants> {}
+
+const variants = cva(
+  "relative top-0 z-50 mx-auto flex h-(--header-height) items-center justify-between gap-8 border-b border-transparent px-(--header-px) py-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-background sticky w-full",
+        floating: [
+          "w-[calc(100%-2*var(--gutter,24px))] max-w-(--header-width)",
+          "top-2 mt-2 h-[calc(var(--header-height)-var(--spacing)*2)] overflow-hidden rounded-xl",
+          "bg-background border-border sticky border",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <header
+      class={cn(variants({ variant }), className)}
+      data-slot="header"
+      data-variant={variant}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </header>
+  )
+}
+
+<style is:global>
+  [data-slot="header"] {
+    --header-width: var(--container, var(--breakpoint-xl));
+    --header-px: max(
+      var(--gutter, 24px),
+      calc((100cqw - var(--header-width)) / 2)
+    );
+  }
+
+  [data-slot="header"][data-variant="floating"] {
+    --header-px: calc(var(--spacing) * 6);
+  }
+
+  :root:has([data-slot="header"]) {
+    --header-height: calc(var(--spacing) * 16);
+  }
+
+  @media (min-width: 1024px) {
+    [data-slot="header"][data-variant="floating"] {
+      --header-px: calc(var(--spacing) * 16);
+    }
+  }
+</style>

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

@@ -0,0 +1,3 @@
+export { default as Header } from "./header.astro"
+export { default as HeaderActions } from "./header-actions.astro"
+export { default as HeaderContent } from "./header-content.astro"

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

@@ -0,0 +1,88 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+interface Props extends Omit<HTMLAttributes<"svg">, "name" | "href"> {
+  href?: HTMLAttributes<"a">["href"]
+  name?: string | number
+}
+
+const { name, href, ...rest } = Astro.props
+
+const hrefMap = {
+  "x.com": "x",
+  twitter: "twitter",
+  facebook: "facebook",
+  instagram: "instagram",
+  pinterest: "pinterest",
+  youtube: "youtube",
+  tiktok: "tiktok",
+  snapchat: "snapchat",
+  reddit: "reddit",
+  tumblr: "tumblr",
+  "wa.me": "whatsapp",
+  telegram: "telegram",
+  discord: "discord",
+  vimeo: "vimeo",
+  flickr: "flickr",
+  yelp: "yelp",
+  spotify: "spotify",
+  behance: "behance",
+  dribbble: "dribbble",
+  soundcloud: "soundcloud",
+  github: "github",
+  twitch: "twitch",
+  "tel:": "phone",
+  "mailto:": "mail",
+  "maps.app.goo.gl": "map-pin",
+  linkedin: "linkedin",
+} as const
+
+const icons = import.meta.glob([
+  "node_modules/lucide-static/icons/*.svg",
+  "node_modules/simple-icons/icons/*.svg",
+])
+
+// 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
+  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 hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
+    const foundPath = Object.keys(icons)
+      // If href, reverse so that simple-icons takes precedence
+      .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 Comp = module?.default
+---
+
+{
+  Comp && foundPath()?.includes("simple-icons") && (
+    <Comp
+      height={24}
+      width={24}
+      fill="currentColor"
+      class="size-[1em] text-base"
+      {...rest}
+    />
+  )
+}
+
+{
+  Comp && foundPath()?.includes("lucide-static") && (
+    <Comp height={24} width={24} class="size-[1em] text-base" {...rest} />
+  )
+}

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

@@ -0,0 +1 @@
+export { default as Icon } from "./icon.astro"

package/src/components/ui/image/image.astro

@@ -0,0 +1,22 @@
+---
+import { Image as AstroImage } from "astro:assets"
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = Partial<ComponentProps<typeof AstroImage>>
+
+const { class: className, alt = "", src, ...props } = Astro.props
+---
+
+{
+  src && (
+    <AstroImage
+      class={cn("h-auto w-full", className)}
+      alt={alt}
+      src={src}
+      inferSize={true}
+      {...(props as any)}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { default as Image } from "./image.astro"

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

@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from "./input.astro"

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"input">, "type"> {
+  type: "text" | "email" | "tel"
+}
+
+const { class: className, ...props } = Astro.props
+---
+
+<input
+  data-slot="input"
+  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",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,7 @@
+export { default as Item } from "./item.astro"
+export { default as ItemContent } from "./item-content.astro"
+export { default as ItemDescription } from "./item-description.astro"
+export { default as ItemGroup } from "./item-group.astro"
+export { default as ItemMedia } from "./item-media.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

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends 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>
+  )
+}

package/src/components/ui/item/item-media.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(
+  "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",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+interface Props extends 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>
+  )
+}

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"h3"> {}
+
+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>
+  )
+}

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

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+interface Props
+  extends VariantProps<typeof variants>,
+    HTMLAttributes<"div">,
+    HTMLAttributes<"a"> {}
+
+const variants = cva(
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const { class: className, variant, size, href, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+
+const Comp = href ? "a" : "div"
+---
+
+{
+  slot?.trim().length > 0 && (
+    <Comp
+      data-slot="item"
+      class={cn(variants({ variant, size }), className)}
+      href={href}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </Comp>
+  )
+}

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

@@ -1 +1 @@
-export { default as Label } from './Label.vue'
+export { default as Label } from "./label.astro"

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <label
+      data-slot="label"
+      class={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </label>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { default as List } from "./list.astro"
+export { default as ListItem } from "./list-item.astro"

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

@@ -0,0 +1,26 @@
+---
+import { cn } from "@/lib/utils"
+
+interface Props {
+  class?: string
+  icon?: boolean
+}
+
+const { class: className, icon = true, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <li
+      class={cn(
+        "flex shrink-0 items-start gap-3 text-start not-first:mt-2 [&_svg]:shrink-0 [&_svg]:translate-y-[30%] [&_svg:not([class*='size-'])]:size-[1em]",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </li>
+  )
+}

package/src/components/ui/list/list.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"ul"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <ul class={cn("list-disc space-y-2", className)} {...props}>
+      <Fragment set:html={slot} />
+    </ul>
+  )
+}

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

@@ -0,0 +1,3 @@
+export { default as Logo } from "./logo.astro"
+export { default as LogoImage } from "./logo-image.astro"
+export { default as LogoText } from "./logo-text.astro"

package/src/components/ui/logo/logo-image.astro

@@ -0,0 +1,24 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Image } from "@/components/ui/image"
+
+type props = ComponentProps<typeof Image>
+
+const { class: className, src, alt = "", ...props } = Astro.props
+---
+
+{
+  src && (
+    <Image
+      class={cn("h-8 w-auto max-w-[200px] shrink-0 object-contain", className)}
+      data-slot="logo-image"
+      src={src}
+      alt={alt}
+      sizes="200px"
+      widths={[200]}
+      {...props}
+    />
+  )
+}

package/src/components/ui/logo/logo-text.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"span"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <span class={cn("text-lg", className)} {...props}>
+      <Fragment set:html={slot} />
+    </span>
+  )
+}

package/src/components/ui/logo/logo.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & HTMLAttributes<"a">
+
+const { class: className, href, ...props } = Astro.props
+
+const Comp = href ? "a" : "div"
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <Comp
+      class={cn(
+        "flex items-center justify-start gap-2.5 text-base font-semibold whitespace-nowrap",
+        className
+      )}
+      href={href}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </Comp>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { default as Marquee } from "./marquee.astro"
+export { default as MarqueeContent } from "./marquee-content.astro"

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

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof contentVariants>
+
+const contentVariants = cva(
+  "animation-duration-40000 flex min-w-full shrink-0 justify-between gap-6 after:w-0",
+  {
+    variants: {
+      direction: {
+        left: "animate-[marquee-horizontal_linear_infinite]",
+        right: "reverse animate-[marquee-horizontal_linear_infinite_reverse]",
+      },
+      pauseOnHover: {
+        true: "group-hover/marquee:paused",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      direction: "left",
+      pauseOnHover: false,
+    },
+  }
+)
+
+const { class: className, direction, pauseOnHover, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+<div
+  class={cn(contentVariants({ direction, pauseOnHover }), className)}
+  data-slot="marquee-content"
+  data-direction={direction}
+  {...props}
+>
+  <Fragment set:html={slot} />
+</div>
+<div
+  class={cn(contentVariants({ direction, pauseOnHover }), className)}
+  data-slot="marquee-content"
+  data-direction={direction}
+  {...props}
+>
+  <Fragment set:html={slot} />
+</div>
+
+<style>
+  @keyframes marquee-horizontal {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+</style>