fulldev-ui 0.12.0 → 0.13.0

package/src/components/blocks/reviews-3.astro

@@ -50,7 +50,7 @@ const { class: className, title, description, reviews, ...props } = Astro.props
     )
   }
   <SectionContainer>
-    <Carousel opts={{ loop: true, align: "center" }} class="mx-auto max-w-3xl">
+    <Carousel loop drag class="mx-auto w-[calc(100%-6rem)] max-w-3xl">
       <CarouselContent>
         {
           reviews.map((item) => (

package/src/components/ui/aspect-ratio/aspect-ratio.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  ratio: number
+}
+
+const { class: className, ratio, style, ...props } = Astro.props
+
+const resolvedStyle =
+  typeof style === "string"
+    ? `--ratio: ${ratio}; ${style}`
+    : { "--ratio": ratio, ...(style ?? {}) }
+---
+
+<div
+  data-slot="aspect-ratio"
+  style={resolvedStyle}
+  class={cn("relative aspect-(--ratio)", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from "./aspect-ratio.astro"

package/src/components/ui/attachment/attachment-action.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { Button, type ButtonVariantProps } from "@/components/ui/button"
+
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }> &
+  ButtonVariantProps
+
+const { as, variant = "ghost", size = "icon-xs", ...props } = Astro.props
+---
+
+<Button
+  as={as}
+  data-slot="attachment-action"
+  variant={variant}
+  size={size}
+  {...props}
+>
+  <slot />
+</Button>

package/src/components/ui/attachment/attachment-actions.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="attachment-actions"
+  class={cn(
+    "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-content.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="attachment-content"
+  class={cn(
+    "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-description.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="attachment-description"
+  class={cn(
+    "text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block max-w-full min-w-0 truncate text-xs",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/attachment/attachment-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="attachment-group"
+  class={cn(
+    "flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-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 attachmentMediaVariants = cva(
+  "bg-muted text-foreground group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image:
+          "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof attachmentMediaVariants>
+
+const { class: className, variant = "icon", ...props } = Astro.props
+---
+
+<div
+  data-slot="attachment-media"
+  data-variant={variant}
+  class={cn(attachmentMediaVariants({ variant }), className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/attachment/attachment-title.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="attachment-title"
+  class={cn(
+    "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</span>

package/src/components/ui/attachment/attachment-trigger.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }>
+
+const {
+  as: Tag = "href" in Astro.props ? "a" : "button",
+  class: className,
+  ...props
+} = Astro.props
+
+const attributes: Record<string, unknown> = { ...props }
+if (Tag === "button") attributes.type ??= "button"
+---
+
+<Tag
+  data-slot="attachment-trigger"
+  class={cn("absolute inset-0 z-10 outline-none", className)}
+  {...attributes}
+>
+  <slot />
+</Tag>

package/src/components/ui/attachment/attachment.astro

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const attachmentVariants = cva(
+  "group/attachment bg-card text-card-foreground focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default:
+          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      orientation: "horizontal",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> &
+  VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done"
+  }
+
+const {
+  class: className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="attachment"
+  data-state={state}
+  data-size={size}
+  data-orientation={orientation}
+  class={cn(attachmentVariants({ size, orientation }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,9 @@
+export { default as Attachment } from "./attachment.astro"
+export { default as AttachmentAction } from "./attachment-action.astro"
+export { default as AttachmentActions } from "./attachment-actions.astro"
+export { default as AttachmentContent } from "./attachment-content.astro"
+export { default as AttachmentDescription } from "./attachment-description.astro"
+export { default as AttachmentGroup } from "./attachment-group.astro"
+export { default as AttachmentMedia } from "./attachment-media.astro"
+export { default as AttachmentTitle } from "./attachment-title.astro"
+export { default as AttachmentTrigger } from "./attachment-trigger.astro"

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

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = HTMLAttributes<"div"> & {
+  orientation?: "horizontal" | "vertical"
+  decorative?: boolean
+}
+
+const {
+  class: className,
+  orientation = "vertical",
+  decorative = true,
+  ...props
+} = Astro.props
+---
+
+<Separator
+  data-slot="button-group-separator"
+  orientation={orientation}
+  decorative={decorative}
+  class={cn(
+    "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,20 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props<Tag extends HTMLTag = "div"> = Polymorphic<{ as: Tag }>
+
+const { as: Tag = "div", class: className, ...props } = Astro.props
+---
+
+<Tag
+  data-slot="button-group-text"
+  class={cn(
+    "bg-muted flex items-center gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/button-group/button-group-variants.ts

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>

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

@@ -0,0 +1,30 @@
+---
+import type { HTMLTag, Polymorphic } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+import {
+  buttonGroupVariants,
+  type ButtonGroupVariantProps,
+} from "./button-group-variants"
+
+type Props<Tag extends HTMLTag = "div"> = Polymorphic<{ as: Tag }> &
+  ButtonGroupVariantProps
+
+const {
+  as: Tag = "div",
+  class: className,
+  orientation = "horizontal",
+  ...props
+} = Astro.props
+---
+
+<Tag
+  role="group"
+  data-slot="button-group"
+  data-orientation={orientation}
+  class={cn(buttonGroupVariants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,7 @@
+export { default as ButtonGroup } from "./button-group.astro"
+export { default as ButtonGroupSeparator } from "./button-group-separator.astro"
+export { default as ButtonGroupText } from "./button-group-text.astro"
+export {
+  buttonGroupVariants,
+  type ButtonGroupVariantProps,
+} from "./button-group-variants"

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

@@ -8,17 +8,15 @@ type Props = HTMLAttributes<"div">
 const { class: className, ...props } = Astro.props
 ---
 
-<div class="overflow-hidden" data-slot="carousel-content">
-  <div
-    data-slot="carousel-container"
-    class={cn(
-      "flex [touch-action:pan-y_pinch-zoom]",
-      "group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col",
-      "group-data-[orientation=horizontal]/carousel:-ml-4",
-      className
-    )}
-    {...props}
-  >
-    <slot />
-  </div>
+<div
+  data-slot="carousel-content"
+  class={cn(
+    "no-scrollbar flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain",
+    "group-data-[dragging=true]/carousel:cursor-grabbing",
+    "group-data-[orientation=vertical]/carousel:snap-y group-data-[orientation=vertical]/carousel:flex-col group-data-[orientation=vertical]/carousel:overflow-x-hidden group-data-[orientation=vertical]/carousel:overflow-y-auto group-data-[orientation=vertical]/carousel:overscroll-y-contain",
+    className
+  )}
+  {...props}
+>
+  <slot />
 </div>

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

@@ -10,12 +10,9 @@ const { class: className, ...props } = Astro.props
 
 <div
   data-slot="carousel-item"
-  role="group"
-  aria-roledescription="slide"
   class={cn(
-    "min-w-0 shrink-0 grow-0 basis-full",
-    "group-data-[orientation=horizontal]/carousel:pl-4",
-    "group-data-[orientation=vertical]/carousel:pt-4",
+    "min-w-0 shrink-0 grow-0 basis-full snap-start",
+    "group-data-[orientation=vertical]/carousel:min-h-0",
     className
   )}
   {...props}

package/src/components/ui/carousel/carousel-next.astro

@@ -11,7 +11,6 @@ const {
   class: className,
   variant = "outline",
   size = "icon-sm",
-  disabled,
   ...props
 } = Astro.props
 ---
@@ -19,8 +18,6 @@ const {
 <button
   type="button"
   data-slot="carousel-next"
-  data-manual-disabled={disabled ? "true" : undefined}
-  disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
     "absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto",

package/src/components/ui/carousel/carousel-previous.astro

@@ -11,7 +11,6 @@ const {
   class: className,
   variant = "outline",
   size = "icon-sm",
-  disabled,
   ...props
 } = Astro.props
 ---
@@ -19,8 +18,6 @@ const {
 <button
   type="button"
   data-slot="carousel-previous"
-  data-manual-disabled={disabled ? "true" : undefined}
-  disabled={disabled}
   class={cn(
     buttonVariants({ variant, size }),
     "absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto",