fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/alert/alert-description.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="alert-description"
+  class={cn(
+    "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/alert/alert-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="alert-title"
+  class={cn(
+    "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/alert/alert.astro

@@ -0,0 +1,35 @@
+---
+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">
+
+const variants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant, ...props } = Astro.props
+---
+
+<div
+  data-slot="alert"
+  role="alert"
+  class={cn(variants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,4 @@
+export { default as Alert } from "./alert.astro"
+export { default as AlertAction } from "./alert-action.astro"
+export { default as AlertTitle } from "./alert-title.astro"
+export { default as AlertDescription } from "./alert-description.astro"

package/src/components/ui/alert-dialog/alert-dialog-action.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="alert-dialog-action" {...props}>
+  <slot />
+</Button>

package/src/components/ui/alert-dialog/alert-dialog-cancel.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { variant = "outline", ...props } = Astro.props
+---
+
+<Button data-slot="alert-dialog-cancel" variant={variant} {...props}>
+  <slot />
+</Button>

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

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import AlertDialogOverlay from "@/components/ui/alert-dialog/alert-dialog-overlay.astro"
+import AlertDialogPortal from "@/components/ui/alert-dialog/alert-dialog-portal.astro"
+
+type Props = HTMLAttributes<"div"> & {
+  size?: "default" | "sm"
+}
+
+const { class: className, size = "default", style, ...props } = Astro.props
+---
+
+<AlertDialogPortal>
+  <AlertDialogOverlay />
+  <div
+    data-slot="alert-dialog-content"
+    data-size={size}
+    hidden
+    class={cn(
+      "group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+      className
+    )}
+    style={`z-index: calc(var(--alert-dialog-content-stack-index, 0) + 111);${style ? ` ${style}` : ""}`}
+    {...props}
+  >
+    <slot />
+  </div>
+</AlertDialogPortal>

package/src/components/ui/alert-dialog/alert-dialog-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="alert-dialog-description"
+  class={cn(
+    "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</p>

package/src/components/ui/alert-dialog/alert-dialog-footer.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="alert-dialog-footer"
+  class={cn(
+    "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/alert-dialog/alert-dialog-header.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="alert-dialog-header"
+  class={cn(
+    "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/alert-dialog/alert-dialog-media.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="alert-dialog-media"
+  class={cn(
+    "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/alert-dialog/alert-dialog-overlay.astro

@@ -0,0 +1,21 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, style, ...props } = Astro.props
+---
+
+<div
+  data-slot="alert-dialog-overlay"
+  hidden
+  class={cn(
+    "data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-(--alert-dialog-overlay-stack-index) bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+    className
+  )}
+  style={`z-index: calc(var(--alert-dialog-overlay-stack-index, 0) + 110);${style ? ` ${style}` : ""}`}
+  {...props}
+>
+</div>

package/src/components/ui/alert-dialog/alert-dialog-portal.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="alert-dialog-portal" class={cn(className)} {...props}>
+  <slot />
+</div>

package/src/components/ui/alert-dialog/alert-dialog-title.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"h2">
+
+const { class: className, ...props } = Astro.props
+---
+
+<h2
+  data-slot="alert-dialog-title"
+  class={cn(
+    "text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</h2>

package/src/components/ui/alert-dialog/alert-dialog-trigger.astro

@@ -0,0 +1,13 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { Button } from "@/components/ui/button"
+
+type Props = ComponentProps<typeof Button>
+
+const { ...props } = Astro.props
+---
+
+<Button data-slot="alert-dialog-trigger" {...props}>
+  <slot />
+</Button>

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

@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div data-slot="alert-dialog" class={className} {...props}>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/alert-dialog"
+
+  create()
+</script>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,12 @@
+export { default as AlertDialog } from "./alert-dialog.astro"
+export { default as AlertDialogAction } from "./alert-dialog-action.astro"
+export { default as AlertDialogCancel } from "./alert-dialog-cancel.astro"
+export { default as AlertDialogContent } from "./alert-dialog-content.astro"
+export { default as AlertDialogDescription } from "./alert-dialog-description.astro"
+export { default as AlertDialogFooter } from "./alert-dialog-footer.astro"
+export { default as AlertDialogHeader } from "./alert-dialog-header.astro"
+export { default as AlertDialogMedia } from "./alert-dialog-media.astro"
+export { default as AlertDialogOverlay } from "./alert-dialog-overlay.astro"
+export { default as AlertDialogPortal } from "./alert-dialog-portal.astro"
+export { default as AlertDialogTitle } from "./alert-dialog-title.astro"
+export { default as AlertDialogTrigger } from "./alert-dialog-trigger.astro"

package/src/components/ui/avatar/avatar-badge.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"span">
+
+const { class: className, ...props } = Astro.props
+---
+
+<span
+  data-slot="avatar-badge"
+  class={cn(
+    "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+    "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+    "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+    "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/avatar/avatar-fallback.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="avatar-fallback"
+  class={cn(
+    "bg-muted text-muted-foreground absolute inset-0 z-0 flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/avatar/avatar-group-count.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="avatar-group-count"
+  class={cn(
+    "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/avatar/avatar-group.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="avatar-group"
+  class={cn(
+    "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,36 @@
+---
+import { Image } from "astro:assets"
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = Partial<ComponentProps<typeof Image>>
+
+const {
+  class: className,
+  alt = "",
+  width = 44,
+  height = 44,
+  sizes = "44px",
+  widths = [44, 88, 176],
+  ...props
+} = Astro.props
+---
+
+{
+  props.src && (
+    <Image
+      data-slot="avatar-image"
+      class={cn(
+        "absolute inset-0 z-10 aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      alt={alt}
+      width={width}
+      height={height}
+      sizes={sizes}
+      widths={widths}
+      {...(props as any)}
+    />
+  )
+}

package/src/components/ui/avatar/avatar.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  size?: "default" | "sm" | "lg"
+}
+
+const { class: className, size = "default", ...props } = Astro.props
+---
+
+<div
+  data-slot="avatar"
+  data-size={size}
+  class={cn(
+    "after:border-border group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -1,24 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-
-export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-  {
-    variants: {
-      size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl',
-      },
-      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
-      },
-    },
-  }
-)
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>
+export { default as Avatar } from "./avatar.astro"
+export { default as AvatarBadge } from "./avatar-badge.astro"
+export { default as AvatarFallback } from "./avatar-fallback.astro"
+export { default as AvatarGroup } from "./avatar-group.astro"
+export { default as AvatarGroupCount } from "./avatar-group-count.astro"
+export { default as AvatarImage } from "./avatar-image.astro"

package/src/components/ui/badge/badge-variants.ts

@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const badgeVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>

package/src/components/ui/badge/badge.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import { badgeVariants, type BadgeVariantProps } from "./badge-variants"
+
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & BadgeVariantProps
+
+const {
+  as: Tag = "span",
+  class: className,
+  variant = "default",
+  ...props
+} = Astro.props
+---
+
+<Tag
+  data-slot="badge"
+  class={cn(badgeVariants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -1,22 +1,3 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+export { badgeVariants, type BadgeVariantProps } from "./badge-variants"
 
-export { default as Badge } from './Badge.vue'
-
-export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>
+export { default as Badge } from "./badge.astro"

package/src/components/ui/banner/banner-container.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"div"> & {
+  showClose?: boolean
+}
+
+const { class: className, showClose = true, ...props } = Astro.props
+---
+
+<div
+  class={cn(
+    "relative mx-auto flex w-full max-w-7xl gap-4 px-4",
+    showClose && "pr-10",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  {
+    showClose && (
+      <button
+        type="button"
+        class="focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-sm text-current/65 transition-colors outline-none hover:text-current focus-visible:text-current focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 in-data-[variant=floating]:right-5"
+        aria-label="Close"
+        data-slot="banner-close"
+      >
+        <Icon name="x" class="size-4" />
+        <span class="sr-only">Close</span>
+      </button>
+    )
+  }
+</div>