fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/Block.astro

@@ -1,40 +0,0 @@
----
-import { getEntries } from 'astro:content'
-
-let { block, categories, products, ...rest } = Astro.props
-
-const blocks = {
-  ...import.meta.glob('/src/blocks/**/*.astro'),
-  ...import.meta.glob('../blocks/**/*.astro'),
-}
-
-const path = Object.keys(blocks).find((path) => path.split('/').pop()?.split('.')[0] === block)
-
-const BlockComponent = path && (await (blocks[path] as any)()).default
-
-if (categories && categories[0]?.id) {
-  categories = (await getEntries(categories)).map((category: any) => ({
-    slug: category.id,
-    ...category.data,
-  }))
-}
-
-if (products && products[0]?.id) {
-  products = (await getEntries(products)).map((product: any) => ({
-    slug: product.id,
-    ...product.data,
-  }))
-}
----
-
-{
-  BlockComponent && (
-    <BlockComponent
-      {categories}
-      {products}
-      {...rest}
-    >
-      <slot />
-    </BlockComponent>
-  )
-}

package/src/components/Box.astro

@@ -1,28 +0,0 @@
----
-import { cn } from '@/lib/utils'
-
-const {
-  href,
-  as: As = href ? 'a' : 'div',
-  show = 'content',
-  target = href?.startsWith('http') ? '_blank' : undefined,
-  class: className,
-  ...rest
-} = Astro.props
-
-const slot = await Astro.slots.render('default')
-const render = show === 'content' ? slot?.trim().length > 0 : show
----
-
-{
-  render && (
-    <As
-      class:list={cn('box', className)}
-      {href}
-      {target}
-      {...rest}
-    >
-      <Fragment set:html={slot} />
-    </As>
-  )
-}

package/src/components/Button.astro

@@ -1,54 +0,0 @@
----
-import Icon from '@/components/Icon.astro'
-import type { ButtonVariants } from '@/components/ui/button'
-import { buttonVariants } from '@/components/ui/button'
-import type { HTMLAttributes } from 'astro/types'
-import Box from './Box.astro'
-
-interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'>, ButtonVariants {
-  href?: string
-  text?: string
-  icon?: string
-  reverse?: boolean
-}
-
-const slot = await Astro.slots.render('default')
-const hasSlot = slot?.trim().length > 0
-
-const {
-  href,
-  text,
-  size = !(hasSlot || text) ? 'icon' : undefined,
-  variant,
-  icon,
-  reverse,
-  class: className,
-  ...rest
-} = Astro.props
----
-
-<Box
-  class:list={['button', buttonVariants({ variant, size }), className]}
-  as={href ? 'a' : 'button'}
-  {href}
-  {...rest}
->
-  {
-    !reverse && (
-      <Icon
-        class={!(hasSlot || text) ? 'absolute' : undefined}
-        name={icon}
-      />
-    )
-  }
-  <Fragment set:html={text} />
-  <Fragment set:html={slot} />
-  {
-    reverse && (
-      <Icon
-        class={!(hasSlot || text) ? 'absolute' : undefined}
-        name={icon}
-      />
-    )
-  }
-</Box>

package/src/components/Buttons.astro

@@ -1,50 +0,0 @@
----
-import Button from '@/components/Button.astro'
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Box from './Box.astro'
-
-interface Props extends HTMLAttributes<'div'> {
-  justify?: 'start' | 'center' | 'end'
-  size?: ComponentProps<typeof Button>['size']
-  buttons?: ComponentProps<typeof Button>[]
-  reverse?: boolean
-}
-
-const { size = 'default', justify = 'start', reverse = false, class: className, buttons, ...rest } = Astro.props
-
-const getButtonVariant = (index: number) => {
-  if (reverse) {
-    const length = buttons?.length || 0
-    if (index === length - 1) return 'default'
-    if (index === length - 2) return 'outline'
-    return 'ghost'
-  }
-  if (index === 0) return 'default'
-  if (index === 1) return 'outline'
-  return 'ghost'
-}
----
-
-<Box
-  class:list={[
-    'buttons justify-inherit inline-flex flex-wrap gap-2',
-    {
-      'justify-start': justify === 'start',
-      'justify-center': justify === 'center',
-      'justify-end': justify === 'end',
-    },
-    className,
-  ]}
-  {...rest}
->
-  {
-    buttons?.map((button, i) => (
-      <Button
-        variant={getButtonVariant(i)}
-        {size}
-        {...button}
-      />
-    ))
-  }
-  <slot />
-</Box>

package/src/components/Card.astro

@@ -1,20 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {}
-
-const { href, class: className, ...rest } = Astro.props
----
-
-<Box
-  class:list={[
-    'card color-card-foreground relative flex flex-col gap-3 overflow-hidden rounded-lg border bg-card p-6',
-    className,
-  ]}
-  as={href ? 'a' : 'div'}
-  {href}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Carousel.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel'
-import { parse } from 'node-html-parser'
-import { renderToString } from 'vue/server-renderer'
-
-interface Props {
-  itemClass?: string
-}
-
-const { itemClass } = defineProps<Props>()
-
-const slots = defineSlots<{
-  default(): any
-}>()
-
-const slot = slots['default']()[0]
-const html = await renderToString(slot)
-const root = parse(html)
-const container = root.querySelector('astro-static-slot') || root.querySelector('astro-slot') || root
-const children = container.children
-const htmlItems = children.map((child) => child.outerHTML)
-</script>
-
-<template>
-  <Carousel v-slot="{ canScrollNext }">
-    <CarouselContent>
-      <CarouselItem
-        v-for="(htmlItem, index) in htmlItems"
-        :key="index"
-        :class="itemClass"
-      >
-        <div v-html="htmlItem" />
-      </CarouselItem>
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext v-if="canScrollNext" />
-  </Carousel>
-</template>

package/src/components/Chip.astro

@@ -1,27 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import { buttonVariants } from '@/components/ui/button'
-import type { HTMLAttributes } from 'astro/types'
-import { badgeVariants, type BadgeVariants } from './ui/badge'
-
-interface Props extends HTMLAttributes<'a'>, BadgeVariants {
-  text?: string
-  href?: string
-}
-
-const { href, text, variant, class: className, ...rest } = Astro.props
----
-
-<Box
-  class:list={[
-    'chip',
-    href ? buttonVariants({ variant }) : badgeVariants({ variant }),
-    'h-7 rounded-full px-3.5 text-xs font-medium',
-    className,
-  ]}
-  {href}
-  {...rest}
->
-  <Fragment set:html={text} />
-  <slot />
-</Box>

package/src/components/Code.astro

@@ -1,72 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { ComponentProps } from 'astro/types'
-import { Code as AstroCode } from 'astro:components'
-
-interface Props extends ComponentProps<typeof AstroCode> {}
-
-const { lang = 'astro', code, ...rest } = Astro.props
----
-
-<Box class:list="code">
-  <div class="example">
-    <slot name="example" />
-    <Fragment set:html={code} />
-  </div>
-  <slot name="code" />
-  {
-    code && (
-      <AstroCode
-        class:list="code"
-        code={code}
-        {lang}
-        {...rest}
-      />
-    )
-  }
-</Box>
-
-<style is:global>
-  @layer fulldev {
-    .code {
-      margin-top: var(--spacing-8);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-md);
-      width: 100%;
-      &:first-child {
-        margin-top: 0;
-      }
-
-      .example {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--spacing-8);
-        padding: var(--spacing-8);
-
-        > *,
-        > slot > * {
-          margin-top: 0;
-        }
-
-        .heading,
-        .paragraph {
-          width: 100%;
-        }
-      }
-
-      .astro-code {
-        margin-top: 0;
-        border: none;
-        border-radius: 0;
-        padding: var(--spacing-4);
-        overflow-x: auto;
-        font-size: var(--text-sm);
-
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-</style>

package/src/components/Container.astro

@@ -1,25 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: 'sm' | 'default' | 'lg'
-}
-
-const { size = 'default', class: className, ...rest } = Astro.props
----
-
-<Box
-  class:list={[
-    'mx-auto w-full gap-x-8 gap-y-16 px-4 lg:px-8',
-    {
-      'max-w-screen-md lg:px-16': size === 'sm',
-      'max-w-screen-xl': size === 'default',
-      'max-w-screen-2xl': size === 'lg',
-    },
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Drawer.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from '@/components/ui/drawer'
-import type { HTMLAttributes } from 'vue'
-
-interface Props {
-  class?: HTMLAttributes['class']
-  button?: {
-    text?: string
-    variant?: 'default' | 'secondary' | 'outline' | 'ghost'
-    size?: 'default' | 'sm' | 'lg'
-  }
-  title?: string
-  description?: string
-}
-
-const { button, title, description, class: className } = defineProps<Props>()
-</script>
-
-<template>
-  <Drawer>
-    <DrawerTrigger as-child>
-      <Button
-        :variant="button?.variant"
-        :size="button?.size"
-        :class="className"
-        name="drawer-trigger"
-      >
-        {{ button?.text }}
-        <slot name="trigger" />
-      </Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>{{ title }}</DrawerTitle>
-        <DrawerDescription>{{ description }}</DrawerDescription>
-        <slot name="header" />
-      </DrawerHeader>
-      <slot />
-      <DrawerFooter>
-        <slot name="footer" />
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
-</template>

package/src/components/Form.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { AutoForm } from '@/components/ui/auto-form'
-import { Button } from '@/components/ui/button'
-import { z } from 'zod'
-
-interface Props {
-  fields?: {
-    label: string
-    type: 'text' | 'email' | 'checkbox' | 'select'
-    optional?: boolean
-    options?: string[]
-  }[]
-  submit?: string
-}
-
-const { fields, submit } = defineProps<Props>()
-
-// Conditionally add the optional flag to the zod schema
-const withOptional = (optional: boolean | undefined, schema: z.ZodSchema) => (optional ? schema.optional() : schema)
-
-// Get the correct zod schema for the field
-const getFieldSchema = ({ type, optional, options }: any) => {
-  switch (type) {
-    case 'text':
-      return withOptional(optional, z.string())
-    case 'email':
-      return withOptional(optional, z.string().email())
-    case 'checkbox':
-      return withOptional(optional, z.boolean())
-    case 'select':
-      return withOptional(optional, z.enum(options))
-    case 'date':
-      return withOptional(optional, z.coerce.date())
-    case 'textarea':
-      return withOptional(optional, z.string())
-    default:
-      return withOptional(optional, z.string())
-  }
-}
-
-// Get the correct config object the field
-const getFieldConfig = ({ type }: any) => {
-  switch (type) {
-    case 'textarea':
-      return {
-        component: 'textarea',
-      }
-    default:
-      return {}
-  }
-}
-
-// Loop over fields array and create on object using getFieldSchema for each field
-const schema = z.object(
-  (fields || []).reduce((acc: any, field) => {
-    acc[field.label] = getFieldSchema(field)
-    return acc
-  }, {})
-)
-
-// Loop over fields array and create on object using getFieldSchema for each field
-const config = (fields || []).reduce((acc: any, field) => {
-  acc[field.label] = getFieldConfig(field)
-  return acc
-}, {})
-</script>
-
-<template>
-  <AutoForm
-    class="w-full space-y-6 [&>div>p[role='alert']]:hidden"
-    :field-config="config"
-    :schema="schema"
-  >
-    <slot />
-    <Button type="submit">
-      {{ submit }}
-    </Button>
-  </AutoForm>
-</template>

package/src/components/Gallery.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import {
-  Carousel,
-  type CarouselApi,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@/components/ui/carousel'
-import { watchOnce } from '@vueuse/core'
-import { parse } from 'node-html-parser'
-import { ref } from 'vue'
-import { renderToString } from 'vue/server-renderer'
-
-const emblaMainApi = ref<CarouselApi>()
-const emblaThumbnailApi = ref<CarouselApi>()
-const selectedIndex = ref(0)
-
-function onSelect() {
-  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
-  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()
-  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())
-}
-
-function onThumbClick(index: number) {
-  if (!emblaMainApi.value || !emblaThumbnailApi.value) return
-  emblaMainApi.value.scrollTo(index)
-}
-
-watchOnce(emblaMainApi, (emblaMainApi) => {
-  if (!emblaMainApi) return
-
-  onSelect()
-  emblaMainApi.on('select', onSelect)
-  emblaMainApi.on('reInit', onSelect)
-})
-
-const slots = defineSlots<{
-  default(): any
-}>()
-
-const slot = slots['default']()[0]
-const html = await renderToString(slot)
-const root = parse(html)
-const container = root.querySelector('astro-static-slot') || root.querySelector('astro-slot') || root
-const children = container.children
-const htmlItems = children.map((child) => child.outerHTML)
-</script>
-
-<template>
-  <div class="w-full flex flex-col gap-2">
-    <Carousel
-      class="relative"
-      @init-api="(val) => (emblaMainApi = val)"
-    >
-      <CarouselContent>
-        <CarouselItem
-          v-for="(htmlItem, index) in htmlItems"
-          :key="index"
-          class="rounded-md overflow-hidden"
-        >
-          <div v-html="htmlItem" />
-        </CarouselItem>
-      </CarouselContent>
-      <CarouselPrevious class="left-2" />
-      <CarouselNext class="right-2" />
-    </Carousel>
-    <Carousel
-      class="relative w-full"
-      @init-api="(val) => (emblaThumbnailApi = val)"
-    >
-      <CarouselContent class="flex gap-2 ml-0">
-        <CarouselItem
-          v-for="(htmlItem, index) in htmlItems"
-          :key="index"
-          class="pl-0 basis-1/5 cursor-pointer border rounded-md"
-          :class="index === selectedIndex ? 'border-ring' : ''"
-          @click="onThumbClick(index)"
-        >
-          <div v-html="htmlItem" />
-        </CarouselItem>
-      </CarouselContent>
-    </Carousel>
-  </div>
-</template>

package/src/components/Grid.astro

@@ -1,35 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'div'> {
-  size?: 'sm' | 'default' | 'lg'
-  length: number | undefined
-}
-
-const { size = 'default', length = 4, class: className, ...rest } = Astro.props
----
-
-<Box
-  class:list={[
-    'relative grid w-full gap-x-4 gap-y-8',
-    {
-      'sm:grid-cols-2': size === 'default',
-      'md:grid-cols-3': size === 'default' && length === 3,
-      'lg:grid-cols-4': size === 'default' && length === 4,
-      'md:grid-cols-3 xl:grid-cols-5': size === 'default' && length === 5,
-      'lg:grid-cols-3': size === 'default' && length === 6,
-      'md:grid-cols-3 lg:grid-cols-4': size === 'default' && length > 6,
-    },
-    {
-      'md:grid-cols-2': size === 'lg',
-      'md:grid-cols-3': size === 'lg' && length === 3,
-      'xl:grid-cols-4': size === 'lg' && length === 4,
-      'lg:grid-cols-3': size === 'lg' && length > 4,
-    },
-    className,
-  ]}
-  {...rest}
->
-  <slot />
-</Box>

package/src/components/Icon.astro

@@ -1,24 +0,0 @@
----
-import Box from '@/components/Box.astro'
-import tablerIcons from '@iconify-json/tabler/icons.json'
-import type { HTMLAttributes } from 'astro/types'
-
-interface Props extends HTMLAttributes<'svg'> {
-  name?: string | undefined
-}
-
-const { name, ...rest } = Astro.props
-
-const trimmedName = name?.trim()
-const icon = trimmedName ? (tablerIcons as any)?.icons[trimmedName]?.body : undefined
----
-
-<Box
-  class:list="icon size-[1em] inline-flex child:stroke-[calc(1em/12)]"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  as="svg"
-  {...rest}
->
-  <Fragment set:html={icon} />
-</Box>

package/src/components/Image.astro

@@ -1,26 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types'
-import { Image as AstroImage } from 'astro:assets'
-
-interface Props extends HTMLAttributes<'img'> {
-  src?: string
-  alt?: string
-  height?: number
-  width?: number
-}
-
-const { src, alt = '', height = 1920, width = 1920, class: className, ...rest } = Astro.props
----
-
-{
-  src && (
-    <AstroImage
-      class:list={['image block', className]}
-      {alt}
-      {src}
-      {width}
-      {height}
-      {...rest}
-    />
-  )
-}