fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/blocks/services-7.astro

@@ -0,0 +1,131 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import { Section, SectionContainer } from "@/components/ui/section"
+
+type Props = {
+  class?: string
+  badge?: string
+  title: string
+  description?: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+  services: {
+    image: {
+      src: ImageMetadata
+      alt: string
+    }
+    label?: string
+    title: string
+    description: string
+    href?: string
+  }[]
+}
+
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  buttons,
+  services,
+} = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="gap-8">
+    <div
+      class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
+    >
+      <div class="max-w-2xl">
+        {badge && <Badge variant="secondary">{badge}</Badge>}
+        <h2
+          class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        {
+          description && (
+            <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">
+              {description}
+            </p>
+          )
+        }
+      </div>
+      {
+        buttons?.length && (
+          <div class="flex flex-wrap gap-3">
+            {buttons.map(({ href, label, ...button }) => (
+              <Button as="a" href={href} variant={button.variant}>
+                {label}
+              </Button>
+            ))}
+          </div>
+        )
+      }
+    </div>
+    <div class="grid gap-6 lg:grid-cols-3">
+      {
+        services.map((service, index) => (
+          <a
+            href={service.href ?? "#"}
+            class={cn(
+              "group/service flex flex-col overflow-hidden rounded-xl border shadow-xs transition-shadow hover:shadow-md",
+              index === 0 && "lg:col-span-2 lg:row-span-2"
+            )}
+          >
+            <Image
+              src={service.image.src}
+              alt={service.image.alt}
+              class={cn(
+                "w-full object-cover",
+                index === 0 ? "aspect-video" : "aspect-16/10"
+              )}
+              widths={[320, 480, 640, 960]}
+              sizes={
+                index === 0
+                  ? "(min-width: 1024px) 66vw, 100vw"
+                  : "(min-width: 1024px) 33vw, 100vw"
+              }
+            />
+            <div class="flex flex-1 flex-col gap-2 p-5">
+              {service.label && (
+                <Badge variant="secondary" class="w-fit">
+                  {service.label}
+                </Badge>
+              )}
+              <h3
+                class={cn("font-medium", index === 0 ? "text-xl" : "text-base")}
+              >
+                {service.title}
+              </h3>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {service.description}
+              </p>
+              <div
+                class={cn(
+                  "text-primary flex items-center gap-1.5 pt-2 text-sm font-medium",
+                  index !== 0 && "mt-auto"
+                )}
+              >
+                Learn more
+                <Icon
+                  name="arrow-right"
+                  class="size-3.5 transition-transform group-hover/service:translate-x-1"
+                />
+              </div>
+            </div>
+          </a>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>

package/src/components/blocks/sidebar-1.astro

@@ -0,0 +1,385 @@
+---
+import { cn } from "@/lib/utils"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command"
+import { Dialog, DialogTrigger } from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
+import { Icon } from "@/components/ui/icon"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { Kbd } from "@/components/ui/kbd"
+import { LogoImage, LogoText } from "@/components/ui/logo"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar"
+import { ThemeToggle } from "@/components/ui/theme-toggle"
+
+type Props = {
+  class?: string
+  logo: {
+    label: string
+    href: string
+    src?: any
+    srcLight?: any
+    srcDark?: any
+    alt?: string
+  }
+  search: {
+    label: string
+    empty: string
+    items: {
+      label: string
+      href: string
+      title: string
+      path: string
+      description: string
+      group: string
+    }[]
+  }
+  breadcrumb: {
+    items: {
+      label: string
+      href: string
+    }[]
+    menu: {
+      label: string
+      href: string
+    }[]
+  }
+  navigation: {
+    label: string
+    href: string
+    links?: {
+      label: string
+      href: string
+    }[]
+  }[]
+  githubRepo: string
+}
+
+const {
+  class: className,
+  logo,
+  search,
+  breadcrumb,
+  navigation,
+  githubRepo,
+}: Props = Astro.props
+
+const normalizePath = (path: string) => {
+  if (path === "/") return path
+
+  return path.replace(/\/$/, "")
+}
+const currentPath = normalizePath(Astro.url.pathname)
+const searchGroups = search.items.reduce<
+  { label: string; items: typeof search.items }[]
+>((groups, item) => {
+  const group = groups.find((entry) => entry.label === item.group)
+
+  if (group) {
+    group.items.push(item)
+  } else {
+    groups.push({ label: item.group, items: [item] })
+  }
+
+  return groups
+}, [])
+
+let githubStars = "Stars"
+
+try {
+  const response = await fetch(`https://api.github.com/repos/${githubRepo}`)
+  const data = await response.json()
+
+  if (response.ok && typeof data.stargazers_count === "number") {
+    githubStars = new Intl.NumberFormat().format(data.stargazers_count)
+  }
+} catch {
+  // Keep the fallback label when GitHub is unavailable.
+}
+---
+
+<SidebarProvider>
+  <Sidebar class={cn("", className)} collapsible="offcanvas" variant="inset">
+    <SidebarHeader class="flex-col">
+      <SidebarMenuButton size="lg" variant="ghost" href={logo.href}>
+        <LogoImage
+          src={logo.src}
+          srcLight={logo.srcLight}
+          srcDark={logo.srcDark}
+          alt={logo.alt}
+        />
+        <LogoText class="font-semibold">{logo.label}</LogoText>
+      </SidebarMenuButton>
+      <Dialog class="w-full" data-search-dialog>
+        <DialogTrigger
+          as="div"
+          role="button"
+          tabindex="0"
+          class="h-auto w-full cursor-pointer border-0 bg-transparent p-0 shadow-none hover:bg-transparent"
+          aria-keyshortcuts="Meta+K Control+K"
+        >
+          <InputGroup class="h-8 shadow-none">
+            <InputGroupInput
+              placeholder={search.label}
+              readonly
+              tabindex="-1"
+              aria-label={search.label}
+              class="cursor-pointer"
+            />
+            <InputGroupAddon>
+              <Icon name="search" />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              <Kbd data-search-modifier>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+        </DialogTrigger>
+
+        <CommandDialog title={search.label} description={search.label}>
+          <Command
+            class="[&_[data-slot=command-item][data-selected]]:bg-accent [&_[data-slot=command-item][data-selected]]:text-accent-foreground"
+          >
+            <CommandInput placeholder={search.label} />
+            <CommandList>
+              <CommandEmpty>{search.empty}</CommandEmpty>
+
+              {
+                searchGroups.map((group) => (
+                  <CommandGroup heading={group.label}>
+                    {group.items.map((item) => (
+                      <CommandItem
+                        href={item.href}
+                        value={item.path}
+                        label={item.label}
+                        keywords={[item.title, item.path]}
+                      >
+                        {item.label}
+                        <CommandShortcut>{item.href}</CommandShortcut>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              }
+            </CommandList>
+          </Command>
+        </CommandDialog>
+      </Dialog>
+    </SidebarHeader>
+    <SidebarContent
+      class="mask-[linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%-1rem),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,black_1rem,black_calc(100%-1rem),transparent)] group-data-[collapsible=icon]:mask-none group-data-[collapsible=icon]:[-webkit-mask-image:none]"
+    >
+      {
+        navigation.map((group) => (
+          <SidebarGroup>
+            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+            <SidebarMenu>
+              {(group.links ?? [group]).map((item) => (
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    href={item.href}
+                    isActive={normalizePath(item.href) === currentPath}
+                  >
+                    <span>{item.label}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        ))
+      }
+    </SidebarContent>
+  </Sidebar>
+  <SidebarInset>
+    <Header class="h-16">
+      <HeaderContainer class="max-w-none justify-between">
+        <HeaderGroup>
+          <SidebarTrigger />
+          <Separator orientation="vertical" class="my-auto mr-2 h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              {
+                breadcrumb.items.map((item, index) => {
+                  const isLast = index === breadcrumb.items.length - 1
+                  const isHome = item.href === "/"
+                  const hasMenu =
+                    !isHome &&
+                    breadcrumb.menu.some(
+                      (menuItem) =>
+                        normalizePath(menuItem.href) ===
+                        normalizePath(item.href)
+                    )
+
+                  return (
+                    <>
+                      {index > 0 && (
+                        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                      )}
+                      <BreadcrumbItem>
+                        {hasMenu ? (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger
+                              aria-label={`${item.label} pages`}
+                              aria-current={isLast ? "page" : undefined}
+                              class={cn(
+                                "hover:text-foreground inline-flex items-center gap-1 transition-colors",
+                                isLast && "text-foreground"
+                              )}
+                            >
+                              {item.label}
+                              <Icon
+                                name="chevron-down"
+                                class="size-3.5 opacity-70"
+                                aria-hidden="true"
+                              />
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start">
+                              <DropdownMenuGroup>
+                                {breadcrumb.menu.map((menuItem) => (
+                                  <a
+                                    href={menuItem.href}
+                                    aria-current={
+                                      normalizePath(menuItem.href) ===
+                                      currentPath
+                                        ? "page"
+                                        : undefined
+                                    }
+                                    class="hover:bg-accent hover:text-accent-foreground aria-[current=page]:text-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+                                  >
+                                    {menuItem.label}
+                                  </a>
+                                ))}
+                              </DropdownMenuGroup>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        ) : isLast ? (
+                          <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                        ) : (
+                          <BreadcrumbLink href={item.href}>
+                            {item.label}
+                          </BreadcrumbLink>
+                        )}
+                      </BreadcrumbItem>
+                    </>
+                  )
+                })
+              }
+              {
+                breadcrumb.menu.length > 0 && currentPath === "/" && (
+                  <>
+                    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                    <BreadcrumbItem>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger
+                          aria-label="Open page menu"
+                          class="hover:text-foreground inline-flex items-center leading-none transition-colors"
+                        >
+                          <BreadcrumbEllipsis />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                          <DropdownMenuGroup>
+                            {breadcrumb.menu.map((item) => (
+                              <a
+                                href={item.href}
+                                class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+                              >
+                                {item.label}
+                              </a>
+                            ))}
+                          </DropdownMenuGroup>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </BreadcrumbItem>
+                  </>
+                )
+              }
+            </BreadcrumbList>
+          </Breadcrumb>
+        </HeaderGroup>
+        <HeaderGroup>
+          <Button
+            as="a"
+            href={`https://github.com/${githubRepo}`}
+            size="sm"
+            variant="ghost"
+            target="_blank"
+            rel="noreferrer"
+            aria-label={`View ${githubRepo} on GitHub, ${githubStars}`}
+          >
+            <Icon name="github" />
+            <span>{githubStars}</span>
+          </Button>
+          <ThemeToggle />
+        </HeaderGroup>
+      </HeaderContainer>
+    </Header>
+    <slot />
+  </SidebarInset>
+</SidebarProvider>
+
+<script>
+  const isMac = /Mac|iPhone|iPad|iPod/i.test(
+    navigator.platform || navigator.userAgent
+  )
+
+  document.querySelectorAll("[data-search-modifier]").forEach((shortcut) => {
+    shortcut.textContent = isMac ? "⌘" : "Ctrl"
+  })
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key.toLowerCase() !== "k") return
+    if (event.shiftKey || event.altKey) return
+
+    const dialog = document.querySelector("[data-search-dialog]")
+    const isSearchShortcut = isMac
+      ? event.metaKey && !event.ctrlKey
+      : event.ctrlKey && !event.metaKey
+
+    if (!dialog || dialog.hasAttribute("data-open") || !isSearchShortcut) return
+
+    event.preventDefault()
+    dialog.dispatchEvent(
+      new CustomEvent("dialog:set", { detail: { open: true } })
+    )
+  })
+</script>

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

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div">
+
+const { class: className, ...props } = Astro.props
+---
+
+<div
+  data-slot="accordion-content"
+  class="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+  {...props}
+>
+  <div
+    data-slot="accordion-content-inner"
+    class={cn(
+      "[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+      className
+    )}
+  >
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  value: string
+  disabled?: boolean
+}
+
+const { class: className, value, disabled, ...props } = Astro.props
+---
+
+<div
+  data-slot="accordion-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  class={cn("not-last:border-b", className)}
+  {...props}
+>
+  <slot />
+</div>

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

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+import { Icon } from "@/components/ui/icon"
+
+type Props = HTMLAttributes<"button">
+
+const { class: className, type = "button", ...props } = Astro.props
+---
+
+<button
+  data-slot="accordion-trigger"
+  type={type}
+  class={cn(
+    "group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 relative flex w-full flex-1 items-center justify-between gap-4 rounded-md border border-transparent bg-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    className
+  )}
+  {...props}
+>
+  <slot />
+  <Icon
+    name="chevron-down"
+    data-slot="accordion-trigger-icon"
+    aria-hidden="true"
+    class="text-muted-foreground pointer-events-none ml-auto size-4 shrink-0 group-aria-expanded/accordion-trigger:hidden"
+  />
+  <Icon
+    name="chevron-up"
+    data-slot="accordion-trigger-icon"
+    aria-hidden="true"
+    class="text-muted-foreground pointer-events-none ml-auto hidden size-4 shrink-0 group-aria-expanded/accordion-trigger:inline"
+  />
+</button>

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

@@ -0,0 +1,52 @@
+---
+import type { HTMLAttributes } from "astro/types"
+
+import { cn } from "@/lib/utils"
+
+type Props = HTMLAttributes<"div"> & {
+  multiple?: boolean
+  defaultValue?: string | string[]
+  disabled?: boolean
+  orientation?: "horizontal" | "vertical"
+  loopFocus?: boolean
+  hiddenUntilFound?: boolean
+  collapsible?: boolean
+}
+
+const {
+  class: className,
+  multiple,
+  defaultValue,
+  disabled,
+  orientation = "vertical",
+  loopFocus,
+  hiddenUntilFound,
+  collapsible,
+  ...props
+} = Astro.props
+
+const serializedDefaultValue = Array.isArray(defaultValue)
+  ? JSON.stringify(defaultValue)
+  : defaultValue
+---
+
+<div
+  data-slot="accordion"
+  data-multiple={multiple}
+  data-default-value={serializedDefaultValue}
+  data-disabled={disabled}
+  data-orientation={orientation}
+  data-loop-focus={loopFocus}
+  data-hidden-until-found={hiddenUntilFound}
+  data-collapsible={collapsible}
+  class={cn("flex w-full flex-col", className)}
+  {...props}
+>
+  <slot />
+</div>
+
+<script>
+  import { create } from "@data-slot/accordion"
+
+  create()
+</script>

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-action.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="alert-action"
+  class={cn("absolute top-2.5 right-3", className)}
+  {...props}
+>
+  <slot />
+</div>