fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/starlight-markdown-content.astro

@@ -0,0 +1,68 @@
+---
+import Default from "@astrojs/starlight/components/MarkdownContent.astro"
+
+import Links1 from "@/components/blocks/links-1.astro"
+
+const isPage = Astro.locals.starlightRoute.id === "docs/components"
+---
+
+{
+  isPage ? (
+    <div class="@container">
+      <Links1
+        class="p-0! pt-4!"
+        links={[
+          { text: "Accordion", href: "/docs/components/accordion/" },
+          { text: "Alert", href: "/docs/components/alert/" },
+          { text: "Auto Form", href: "/docs/components/auto-form/" },
+          { text: "Avatar", href: "/docs/components/avatar/" },
+          { text: "Badge", href: "/docs/components/badge/" },
+          { text: "Banner", href: "/docs/components/banner/" },
+          { text: "Button", href: "/docs/components/button/" },
+          { text: "Checkbox", href: "/docs/components/checkbox/" },
+          { text: "Collapsible", href: "/docs/components/collapsible/" },
+          { text: "Empty", href: "/docs/components/empty/" },
+          { text: "Field", href: "/docs/components/field/" },
+          { text: "Footer", href: "/docs/components/footer/" },
+          { text: "Header", href: "/docs/components/header/" },
+          { text: "Icon", href: "/docs/components/icon/" },
+          { text: "Image", href: "/docs/components/image/" },
+          { text: "Input", href: "/docs/components/input/" },
+          { text: "Item", href: "/docs/components/item/" },
+          { text: "Label", href: "/docs/components/label/" },
+          { text: "List", href: "/docs/components/list/" },
+          { text: "Logo", href: "/docs/components/logo/" },
+          { text: "Marquee", href: "/docs/components/marquee/" },
+          {
+            text: "Native Carousel",
+            href: "/docs/components/native-carousel/",
+          },
+          { text: "Native Select", href: "/docs/components/native-select/" },
+          {
+            text: "Navigation Menu",
+            href: "/docs/components/navigation-menu/",
+          },
+          { text: "Price", href: "/docs/components/price/" },
+          { text: "Radio Group", href: "/docs/components/radio-group/" },
+          { text: "Rating", href: "/docs/components/rating/" },
+          { text: "Section", href: "/docs/components/section/" },
+          { text: "Separator", href: "/docs/components/separator/" },
+          { text: "Sheet", href: "/docs/components/sheet/" },
+          { text: "Sidebar", href: "/docs/components/sidebar/" },
+          { text: "Skeleton", href: "/docs/components/skeleton/" },
+          { text: "Spinner", href: "/docs/components/spinner/" },
+          { text: "Table", href: "/docs/components/table/" },
+          { text: "Tabs", href: "/docs/components/tabs/" },
+          { text: "Textarea", href: "/docs/components/textarea/" },
+          { text: "Theme Toggle", href: "/docs/components/theme-toggle/" },
+          { text: "Tile", href: "/docs/components/tile/" },
+          { text: "Video", href: "/docs/components/video/" },
+        ]}
+      />
+    </div>
+  ) : (
+    <Default>
+      <slot />
+    </Default>
+  )
+}

package/src/components/starlight-title.astro

@@ -0,0 +1,37 @@
+---
+import { getEntry } from "astro:content"
+
+import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
+import {
+  NavigationMenu,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu"
+
+const layout = await getEntry("layouts", "index")
+
+const menus = layout?.data?.headers?.[1]?.menus
+const logo = layout?.data?.headers?.[1]?.logo
+---
+
+<div class="flex items-center gap-8">
+  <Logo href="/">
+    <LogoImage src={logo?.src} alt={logo?.alt} />
+    <LogoText>{logo?.text}</LogoText>
+  </Logo>
+  <NavigationMenu class="mr-auto max-lg:hidden">
+    <NavigationMenuList>
+      {
+        menus?.map((menu) => (
+          <NavigationMenuLink
+            class="inline-flex h-8 items-center bg-transparent px-3 py-0"
+            variant="trigger"
+            href={menu.href}
+          >
+            {menu.text}
+          </NavigationMenuLink>
+        ))
+      }
+    </NavigationMenuList>
+  </NavigationMenu>
+</div>

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

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="accordion-content"
+      class={cn("overflow-hidden text-sm", "pt-0 pb-4", className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"details">, "class"> {
+  class?: string
+  open?: boolean
+}
+
+const { class: className, open = false, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <details
+      data-slot="accordion-item"
+      class={cn("border-b last:border-b-0", "group", className)}
+      open={open}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </details>
+  )
+}

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

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import ChevronDownIcon from "lucide-static/icons/chevron-down.svg"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends Omit<HTMLAttributes<"summary">, "class"> {
+  class?: string
+}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <summary
+      data-slot="accordion-trigger"
+      class={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+        "cursor-pointer list-none [&::-webkit-details-marker]:hidden group-open:[&>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      <span class="flex-1">
+        <Fragment set:html={slot} />
+      </span>
+      <ChevronDownIcon class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+    </summary>
+  )
+}

package/src/components/ui/accordion/accordion.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div data-slot="accordion" class={cn("w-full", className)} {...props}>
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -1,4 +1,4 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as Accordion } from "./accordion.astro"
+export { default as AccordionContent } from "./accordion-content.astro"
+export { default as AccordionItem } from "./accordion-item.astro"
+export { default as AccordionTrigger } from "./accordion-trigger.astro"

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="alert-description"
+      class={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="alert-title"
+      class={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,41 @@
+---
+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(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    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
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="alert"
+      role="alert"
+      class={cn(variants({ variant }), className)}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,135 @@
+---
+import type { ComponentProps, HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldSet,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Textarea } from "@/components/ui/textarea"
+
+type Field = {
+  label?: string
+  description?: string
+} & (
+  | (ComponentProps<typeof Textarea> & {
+      type: "textarea"
+    })
+  | (ComponentProps<typeof Checkbox> & {
+      type: "checkbox"
+    })
+  | (ComponentProps<typeof NativeSelect> & {
+      type: "select"
+      options: string[]
+      placeholder?: string
+    })
+  | (ComponentProps<typeof RadioGroupItem> & {
+      type: "radio-group"
+      options: string[]
+    })
+  | (ComponentProps<typeof Input> & {
+      type: "text" | "tel" | "email" | "number"
+    })
+)
+
+interface Props extends HTMLAttributes<"form"> {
+  inbox?: string
+  fields?: Field[]
+  submit?: string
+}
+
+const { class: className, inbox, fields, submit, ...props } = Astro.props
+---
+
+<form
+  method="POST"
+  data-netlify="true"
+  class={cn("flex w-full max-w-2xl flex-col gap-6", className)}
+  {...props}
+>
+  {
+    fields?.map(({ label, description, name = label, id = name, ...field }) => {
+      switch (field.type) {
+        case "textarea":
+          return (
+            <Field>
+              <FieldLabel for={id}>{label}</FieldLabel>
+              <Textarea id={id} name={name} {...field} />
+              <FieldDescription>{description}</FieldDescription>
+            </Field>
+          )
+        case "select":
+          const { options: selectOptions, placeholder, ...select } = field
+          return (
+            <Field>
+              <FieldLabel for={id}>{label}</FieldLabel>
+              <NativeSelect id={id} name={name} {...select}>
+                <NativeSelectOption
+                  value={placeholder}
+                  id={placeholder}
+                  disabled
+                  selected
+                >
+                  {placeholder}
+                </NativeSelectOption>
+                {selectOptions?.map((option) => (
+                  <NativeSelectOption value={option} id={option}>
+                    {option}
+                  </NativeSelectOption>
+                ))}
+              </NativeSelect>
+              <FieldDescription>{description}</FieldDescription>
+            </Field>
+          )
+        case "checkbox":
+          return (
+            <Field orientation="horizontal">
+              <Checkbox id={id} name={name} {...field} />
+              <FieldContent>
+                <FieldLabel for={id}>{label}</FieldLabel>
+                <FieldDescription>{description}</FieldDescription>
+              </FieldContent>
+            </Field>
+          )
+        case "radio-group":
+          const { options: radioOptions, ...radioGroup } = field
+          return (
+            <FieldSet>
+              <FieldLabel>{label}</FieldLabel>
+              <FieldDescription>{description}</FieldDescription>
+              <RadioGroup {...radioGroup}>
+                {radioOptions?.map((option) => (
+                  <Field orientation="horizontal">
+                    <RadioGroupItem value={option} id={option} name={name} />
+                    <FieldLabel for={option}>{option}</FieldLabel>
+                  </Field>
+                ))}
+              </RadioGroup>
+              <FieldDescription>{description}</FieldDescription>
+            </FieldSet>
+          )
+        default:
+          return (
+            <Field>
+              <FieldLabel for={id}>{label}</FieldLabel>
+              <Input id={id} name={name} {...field} />
+              <FieldDescription>{description}</FieldDescription>
+            </Field>
+          )
+      }
+    })
+  }
+  <slot />
+  {inbox && <input type="hidden" name="inbox_key" value={inbox} />}
+  <input type="text" name="_gotcha" class="hidden" />
+  <input type="text" name="Pagina" class="hidden" value={Astro.url.pathname} />
+  <Button type="submit">{submit}</Button>
+</form>

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

@@ -1,15 +1 @@
-export { default as AutoForm } from './AutoForm.vue'
-export { default as AutoFormField } from './AutoFormField.vue'
-
-export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
-export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
-export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
-
-export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
-export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
-export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
-export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
-export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
-export { default as AutoFormLabel } from './AutoFormLabel.vue'
-export type { Config, ConfigItem, FieldProps } from './interface'
-export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'
+export { default as AutoForm } from "./auto-form.astro"

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="avatar-fallback"
+      class={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -0,0 +1,33 @@
+---
+import type { ComponentProps } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Image } from "@/components/ui/image"
+
+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("aspect-square size-full", className)}
+      alt={alt}
+      width={width}
+      height={height}
+      sizes={sizes}
+      widths={widths}
+      {...(props as any)}
+    />
+  )
+}

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

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className, ...props } = Astro.props
+
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <div
+      data-slot="avatar"
+      class={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </div>
+  )
+}

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

@@ -1,24 +1,3 @@
-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 AvatarFallback } from "./avatar-fallback.astro"
+export { default as AvatarImage } from "./avatar-image.astro"

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

@@ -0,0 +1,54 @@
+---
+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<"span"> &
+  HTMLAttributes<"a"> & {
+    text?: string
+    html?: string
+  }
+
+const variants = 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 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        destructive:
+          "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const { class: className, variant, href, text, html, ...props } = Astro.props
+
+const Comp = href ? "a" : "span"
+const slot = await Astro.slots.render("default")
+---
+
+{
+  slot?.trim().length > 0 && (
+    <Comp
+      data-slot="badge"
+      class={cn(variants({ variant }), className)}
+      href={href}
+      set:html={html}
+      set:text={text}
+      {...props}
+    >
+      <Fragment set:html={slot} />
+    </Comp>
+  )
+}

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

@@ -1,22 +1 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-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"