fulldev-ui 0.7.0-beta.9 → 0.9.0

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

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

package/src/components/ui/item/item-actions.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-actions"
+  class={cn("flex items-center gap-2", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,21 @@
+---
+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-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

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

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<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

@@ -0,0 +1,36 @@
+---
+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: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "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: {
+      variant: "default",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
+
+const { class: className, variant, ...props } = Astro.props
+---
+
+<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

@@ -0,0 +1,20 @@
+---
+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-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>

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

@@ -0,0 +1,71 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = VariantProps<typeof variants> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"a">
+
+const variants = cva(
+  "[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: "border-transparent",
+        inset: "border-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50 border-transparent",
+      },
+      size: {
+        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",
+    },
+  }
+)
+
+const {
+  class: className,
+  variant = "default",
+  size = "default",
+  href,
+  ...props
+} = Astro.props
+
+const Comp = href ? "a" : "div"
+---
+
+<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/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,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"label">
+
+const { class: className, ...props } = Astro.props
+---
+
+<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>