fulldev-ui 0.7.0 → 0.9.0

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

@@ -4,25 +4,43 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-interface Props
-  extends VariantProps<typeof variants>,
-    HTMLAttributes<"div">,
-    HTMLAttributes<"a"> {}
+type Props = 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",
+  "[a]:hover:bg-muted group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: "border-transparent",
+        inset: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50",
+        muted: "bg-muted/50 border-transparent",
       },
       size: {
-        default: "gap-4 p-4",
-        sm: "gap-2.5 px-4 py-3",
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        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",
@@ -30,22 +48,24 @@ const variants = cva(
   }
 )
 
-const { class: className, variant, size, href, ...props } = Astro.props
-
-const slot = await Astro.slots.render("default")
+const {
+  class: className,
+  variant = "default",
+  size = "default",
+  href,
+  ...props
+} = Astro.props
 
 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>
-  )
-}
+<Comp
+  data-slot="item"
+  data-variant={variant}
+  data-size={size}
+  class={cn(variants({ variant, size }), className)}
+  href={href}
+  {...props}
+>
+  <slot />
+</Comp>

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

@@ -0,0 +1,2 @@
+export { default as Kbd } from "./kbd.astro"
+export { default as KbdGroup } from "./kbd-group.astro"

package/src/components/ui/kbd/kbd-group.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="kbd-group"
+  class={cn("inline-flex items-center gap-1 leading-none", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"kbd">
+
+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",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</kbd>

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

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

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

@@ -0,0 +1,4 @@
+export { default as Layout } from "./layout.astro"
+export { default as LayoutBody } from "./layout-body.astro"
+export { default as LayoutHead } from "./layout-head.astro"
+export { default as LayoutMain } from "./layout-main.astro"

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"body">
+
+const { class: className, ...props } = Astro.props
+---
+
+<body
+  class={cn(
+    "bg-background text-foreground overscroll-none antialiased",
+    className
+  )}
+  data-slot="layout-body"
+  {...props}
+>
+  <slot />
+</body>
+
+<style is:global>
+  body {
+    font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
+  }
+</style>

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

@@ -0,0 +1,100 @@
+---
+import type { ImageMetadata } from "astro"
+import { getImage } from "astro:assets"
+import { AstroSeo } from "@lexingtonthemes/seo"
+
+type Props = {
+  name?: string
+  title?: string
+  description?: string
+  image?: {
+    src?: ImageMetadata | string
+    alt?: string
+  }
+  noindex?: boolean
+  nofollow?: boolean
+  canonical?: string
+}
+
+const baseUrl = Astro.site?.origin || Astro.url.origin
+const pagePathname = Astro.url.pathname.endsWith("/")
+  ? Astro.url.pathname
+  : `${Astro.url.pathname}/`
+
+const {
+  name,
+  title,
+  description,
+  image,
+  noindex,
+  nofollow,
+  canonical,
+  ...props
+} = Astro.props
+
+const resolvedCanonical = new URL(canonical || pagePathname, baseUrl).toString()
+
+const toImageMimeType = (format?: string) => {
+  if (!format) return undefined
+  if (format.includes("/")) return format
+  if (format === "jpg") return "image/jpeg"
+  return `image/${format}`
+}
+
+const transformedImage =
+  image?.src && typeof image.src !== "string"
+    ? await getImage({
+        src: image.src,
+        format: "png",
+        width: 1200,
+        height: 630,
+        quality: "medium",
+      })
+    : undefined
+
+const openGraphImage =
+  typeof image?.src === "string"
+    ? {
+        url: new URL(image.src, baseUrl).toString(),
+        alt: image.alt,
+      }
+    : transformedImage
+      ? {
+          url: new URL(transformedImage.src, baseUrl).toString(),
+          alt: image?.alt,
+          width: transformedImage.attributes.width,
+          height: transformedImage.attributes.height,
+          type: toImageMimeType(transformedImage.attributes.format),
+        }
+      : undefined
+---
+
+<head data-slot="layout-head" {...props}>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="generator" content={Astro.generator} />
+  <meta charset="utf-8" />
+  <AstroSeo
+    title={title}
+    description={description}
+    canonical={resolvedCanonical}
+    noindex={noindex}
+    nofollow={nofollow}
+    openGraph={{
+      url: resolvedCanonical,
+      type: "website",
+      ...(name && { site_name: name }),
+      ...(openGraphImage && {
+        images: [
+          {
+            ...openGraphImage,
+            ...(openGraphImage.url.startsWith("https://") && {
+              secureUrl: openGraphImage.url,
+            }),
+          },
+        ],
+      }),
+    }}
+  />
+  <slot name="head" />
+  <slot />
+</head>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"main">
+
+const { class: className, ...props } = Astro.props
+---
+
+<main
+  data-slot="layout-main"
+  class={cn(
+    "@container flex flex-col in-data-[slot=sidebar-inset]:rounded-[inherit]",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</main>

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

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import "@/styles/global.css"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"html">
+
+const { class: className, lang, ...props } = Astro.props
+---
+
+<html
+  class={cn(
+    "bg-background text-foreground has-data-[variant=inset]:bg-sidebar overscroll-none scroll-smooth",
+    className
+  )}
+  data-slot="layout"
+  lang={Astro.currentLocale || "en"}
+  {...props}
+>
+  <slot />
+</html>
+
+<style is:global>
+  :root {
+    --container: 1280px;
+    color-scheme: light;
+  }
+
+  .dark {
+    color-scheme: dark;
+  }
+</style>

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

@@ -1,24 +1,48 @@
 ---
-import type { ComponentProps } from "astro/types"
+import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
-import { Image } from "@/components/ui/image"
 
-type props = ComponentProps<typeof Image>
+type Props = Omit<HTMLAttributes<"img">, "src"> & {
+  src?: ImageMetadata
+  srcLight?: ImageMetadata
+  srcDark?: ImageMetadata
+}
+
+const { class: className, src, srcLight, srcDark, ...props } = Astro.props
 
-const { class: className, src, alt = "", ...props } = Astro.props
+const baseClasses = "w-auto shrink-0 h-6 object-contain"
 ---
 
 {
-  src && (
+  srcLight && srcDark ? (
+    <>
+      <Image
+        class={cn(baseClasses, "dark:hidden", className)}
+        data-slot="logo-image"
+        src={srcLight}
+        sizes="200px"
+        widths={[200]}
+        {...(props as any)}
+      />
+      <Image
+        class={cn(baseClasses, "hidden dark:block", className)}
+        data-slot="logo-image"
+        src={srcDark}
+        sizes="200px"
+        widths={[200]}
+        {...(props as any)}
+      />
+    </>
+  ) : src ? (
     <Image
-      class={cn("h-8 w-auto max-w-[200px] shrink-0 object-contain", className)}
+      class={cn(baseClasses, className)}
       data-slot="logo-image"
       src={src}
-      alt={alt}
       sizes="200px"
       widths={[200]}
-      {...props}
+      {...(props as any)}
     />
-  )
+  ) : null
 }

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

@@ -3,17 +3,11 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"span"> {}
+type Props = 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>
-  )
-}
+<span class={cn("text-lg", className)} {...props}>
+  <slot />
+</span>

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

@@ -8,21 +8,15 @@ 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>
-  )
-}
+<Comp
+  class={cn(
+    "flex h-10 items-center justify-start gap-2 text-base font-semibold whitespace-nowrap",
+    className
+  )}
+  href={href}
+  {...props}
+>
+  <slot />
+</Comp>

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

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

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

@@ -1,19 +1,106 @@
 ---
-import type { HTMLAttributes } from "astro/types"
+import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-type Props = HTMLAttributes<"div">
+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 { class: className, ...props } = Astro.props
+const {
+  class: className = "",
+  direction = "left",
+  duration,
+  gap = "1rem",
+  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",
+  },
+})
 ---
 
 <div
+  data-marquee
+  data-direction={direction}
+  data-pause-on-hover={pauseOnHover ? "true" : undefined}
   class={cn(
-    "group/marquee flex justify-stretch overflow-hidden select-none",
+    "",
+    // container utilities
+    "group flex w-full overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col",
+    marqueeVariants({ variant }),
     className
   )}
+  style={styleValue}
   {...props}
 >
-  <slot />
+  <div class={contentClass}>
+    <slot />
+  </div>
+  {
+    infinite && (
+      <div class={contentClass} aria-hidden="true">
+        <slot />
+      </div>
+    )
+  }
 </div>
+
+<style>
+  @keyframes marquee-x {
+    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-optgroup.astro

@@ -3,11 +3,15 @@ import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 
-interface Props extends HTMLAttributes<"optgroup"> {}
+type Props = HTMLAttributes<"optgroup">
 
 const { class: className, ...props } = Astro.props
 ---
 
-<optgroup data-slot="native-select-optgroup" class={cn(className)} {...props}>
+<optgroup
+  data-slot="native-select-optgroup"
+  class={cn("bg-[Canvas] text-[CanvasText]", className)}
+  {...props}
+>
   <slot />
 </optgroup>

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

@@ -1,12 +1,17 @@
 ---
 import type { HTMLAttributes } from "astro/types"
 
-interface Props extends HTMLAttributes<"option"> {}
+import { cn } from "@/lib/utils"
 
-const { ...props } = Astro.props
+type Props = HTMLAttributes<"option">
+
+const { class: className, ...props } = Astro.props
 ---
 
-<option data-slot="native-select-option" {...props}>
+<option
+  data-slot="native-select-option"
+  class={cn("bg-[Canvas] text-[CanvasText]", className)}
+  {...props}
+>
   <slot />
 </option>
-