fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/ui/field/field-error.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}
+
+const { class: className, errors, ...props } = Astro.props
+
+const messages = [
+  ...new Set(
+    (errors ?? [])
+      .map((error) => error?.message?.trim())
+      .filter((message): message is string => Boolean(message))
+  ),
+]
+
+const hasDefaultSlot = Astro.slots.has("default")
+const shouldRender = hasDefaultSlot || messages.length > 0
+---
+
+{
+  shouldRender && (
+    <div
+      role="alert"
+      data-slot="field-error"
+      class={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {hasDefaultSlot ? (
+        <slot />
+      ) : messages.length === 1 ? (
+        messages[0]
+      ) : (
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          {messages.map((message) => (
+            <li>{message}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/ui/field/field-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="field-group"
+  class={cn(
+    "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,22 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+type Props = ComponentProps<typeof Label>
+
+const { class: className, ...props } = Astro.props
+---
+
+<Label
+  data-slot="field-label"
+  class={cn(
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</Label>

package/src/components/ui/field/field-legend.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"legend"> & {
+  variant?: "legend" | "label"
+}
+
+const { class: className, variant = "legend", ...props } = Astro.props
+---
+
+<legend
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn(
+    "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</legend>

package/src/components/ui/field/field-separator.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+const hasContent = Astro.slots.has("default")
+---
+
+<div
+  data-slot="field-separator"
+  data-content={hasContent}
+  class={cn(
+    "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+    className
+  )}
+  {...props}
+>
+  <Separator class="absolute inset-0 top-1/2" />
+  {
+    hasContent && (
+      <span
+        class="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+        data-slot="field-separator-content"
+      >
+        <slot />
+      </span>
+    )
+  }
+</div>

package/src/components/ui/field/field-set.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"fieldset">
+
+const { class: className, ...props } = Astro.props
+---
+
+<fieldset
+  data-slot="field-set"
+  class={cn(
+    "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</fieldset>

package/src/components/ui/field/field-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="field-label"
+  class={cn(
+    "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/ui/field/field.astro

@@ -0,0 +1,39 @@
+---
+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 variants>
+
+const variants = cva(
+  "data-[invalid=true]:text-destructive group/field flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical:
+          "flex-col [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto [&>:not([role=checkbox]):not([role=radio])]:w-full @md/field-group:[&>:not([role=checkbox]):not([role=radio])]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+const { class: className, orientation = "vertical", ...props } = Astro.props
+---
+
+<div
+  role="group"
+  data-slot="field"
+  data-orientation={orientation}
+  class={cn(variants({ orientation }), className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,10 @@
+export { default as Field } from "./field.astro"
+export { default as FieldContent } from "./field-content.astro"
+export { default as FieldDescription } from "./field-description.astro"
+export { default as FieldError } from "./field-error.astro"
+export { default as FieldGroup } from "./field-group.astro"
+export { default as FieldLabel } from "./field-label.astro"
+export { default as FieldLegend } from "./field-legend.astro"
+export { default as FieldSeparator } from "./field-separator.astro"
+export { default as FieldSet } from "./field-set.astro"
+export { default as FieldTitle } from "./field-title.astro"

package/src/components/ui/form/form.astro

@@ -0,0 +1,13 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"form">
+
+const { class: className, ...props } = Astro.props
+---
+
+<form data-slot="form" class={cn("flex flex-col gap-6", className)} {...props}>
+  <slot />
+</form>

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

@@ -1,7 +1 @@
-export { default as FormControl } from './FormControl.vue'
-export { default as FormDescription } from './FormDescription.vue'
-export { default as FormItem } from './FormItem.vue'
-export { default as FormLabel } from './FormLabel.vue'
-export { default as FormMessage } from './FormMessage.vue'
-export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
-export { Field as FormField, Form } from 'vee-validate'
+export { default as Form } from "./form.astro"

package/src/components/ui/header/header-container.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="header-container"
+  class={cn("relative mx-auto flex w-full max-w-7xl gap-4 px-4", className)}
+  {...props}
+>
+  <slot />
+</div>

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

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

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"header"> & VariantProps<typeof variants>
+
+const variants = cva("relative z-50 flex w-full items-center gap-4 py-2", {
+  variants: {
+    variant: {
+      default: "",
+      floating:
+        "bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})
+
+const { class: className, variant, ...props } = Astro.props
+---
+
+<header
+  class={cn(variants({ variant }), className)}
+  data-slot="header"
+  data-variant={variant}
+  {...props}
+>
+  <slot />
+</header>

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

@@ -0,0 +1,3 @@
+export { default as Header } from "./header.astro"
+export { default as HeaderContainer } from "./header-container.astro"
+export { default as HeaderGroup } from "./header-group.astro"

package/src/components/ui/hover-card/hover-card-content.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+}
+
+const {
+  class: className,
+  hidden = true,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 4,
+  avoidCollisions,
+  collisionPadding,
+  ...props
+} = Astro.props
+---
+
+<div data-slot="hover-card-portal">
+  <div
+    data-slot="hover-card-positioner"
+    data-side={side}
+    data-align={align}
+    data-side-offset={sideOffset}
+    data-align-offset={alignOffset}
+    data-avoid-collisions={avoidCollisions}
+    data-collision-padding={collisionPadding}
+    class="isolate z-50"
+  >
+    <div
+      data-slot="hover-card-content"
+      hidden={hidden}
+      class={cn(
+        "bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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 z-50 w-64 origin-(--transform-origin) rounded-lg p-4 text-sm shadow-md ring-1 outline-hidden duration-100",
+        className
+      )}
+      {...props}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/ui/hover-card/hover-card-trigger.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"button"> &
+  HTMLAttributes<"a"> &
+  HTMLAttributes<"div"> &
+  HTMLAttributes<"span"> & {
+    as?: "a" | "button" | "div" | "span"
+    href?: string
+  }
+
+const { as: explicitTag, class: className, type, ...props } = Astro.props
+
+const Tag = explicitTag || ("href" in Astro.props ? "a" : "button")
+---
+
+<Tag
+  data-slot="hover-card-trigger"
+  type={Tag === "button" ? type || "button" : undefined}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</Tag>

package/src/components/ui/hover-card/hover-card.astro

@@ -0,0 +1,69 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  delay?: number
+  skipDelayDuration?: number
+  closeDelay?: number
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+  sideOffset?: number
+  alignOffset?: number
+  avoidCollisions?: boolean
+  collisionPadding?: number
+  portal?: boolean
+  closeOnClickOutside?: boolean
+  closeOnEscape?: boolean
+}
+
+const {
+  class: className,
+  defaultOpen,
+  open,
+  delay = 300,
+  skipDelayDuration = 300,
+  closeDelay = 300,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 4,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = true,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  ...props
+} = Astro.props
+---
+
+<div
+  data-slot="hover-card"
+  data-default-open={defaultOpen}
+  data-open={open}
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  data-close-delay={closeDelay}
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  data-align-offset={alignOffset}
+  data-avoid-collisions={avoidCollisions}
+  data-collision-padding={collisionPadding}
+  data-portal={portal}
+  data-close-on-click-outside={closeOnClickOutside}
+  data-close-on-escape={closeOnEscape}
+  class={cn(className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/hover-card"
+
+  create()
+</script>

package/src/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./hover-card.astro"
+export { default as HoverCardContent } from "./hover-card-content.astro"
+export { default as HoverCardTrigger } from "./hover-card-trigger.astro"

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

@@ -0,0 +1,90 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+type Props = Omit<HTMLAttributes<"svg">, "name" | "href"> & {
+  href?: HTMLAttributes<"a">["href"]
+  name?: string | number | null
+}
+
+const { name, href, ...props } = 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",
+  ],
+  { eager: true }
+) as Record<string, { default: any }>
+
+const foundPath = () => {
+  let foundPath: string | undefined = undefined
+
+  // For x.com, use the Simple Icons X instead of Lucide's X icon.
+  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)
+    )
+    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
+    foundPath = Object.keys(icons)
+      .reverse()
+      .find((key) => key.includes(`/${hrefValue}.svg`))
+  }
+
+  return foundPath
+}
+
+const iconPath = foundPath()
+const module = iconPath ? icons[iconPath] : undefined
+const Comp = module?.default
+---
+
+{
+  Comp && foundPath()?.includes("simple-icons") && (
+    <Comp
+      height={24}
+      width={24}
+      fill="currentColor"
+      class="size-[1em] text-base"
+      {...props}
+    />
+  )
+}
+
+{
+  Comp && foundPath()?.includes("lucide-static") && (
+    <Comp height={24} width={24} class="size-[1em] text-base" {...props} />
+  )
+}

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

@@ -0,0 +1 @@
+export { default as Icon } from "./icon.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"
+
+type Props = HTMLAttributes<"input">
+
+const {
+  class: className,
+  "data-slot": dataSlot = "input",
+  ...props
+} = Astro.props
+---
+
+<input
+  data-slot={dataSlot}
+  class={cn(
+    "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 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 focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+    className
+  )}
+  {...props}
+/>

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

@@ -0,0 +1,6 @@
+export { default as InputGroup } from "./input-group.astro"
+export { default as InputGroupAddon } from "./input-group-addon.astro"
+export { default as InputGroupButton } from "./input-group-button.astro"
+export { default as InputGroupInput } from "./input-group-input.astro"
+export { default as InputGroupText } from "./input-group-text.astro"
+export { default as InputGroupTextarea } from "./input-group-textarea.astro"

package/src/components/ui/input-group/input-group-addon.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(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>a]:-ml-1 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>a]:-mr-1 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof variants>
+
+const { class: className, align = "inline-start", ...props } = Astro.props
+---
+
+<div
+  role="group"
+  data-slot="input-group-addon"
+  data-align={align}
+  class={cn(variants({ align }), className)}
+  {...props}
+>
+  <slot />
+</div>