fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/components/ui/select/SelectContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+})
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]'
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/ui/select/SelectGroup.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup
+    :class="cn('p-1 w-full', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </SelectGroup>
+</template>

package/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { Check } from 'lucide-vue-next'
+import { SelectItem, SelectItemIndicator, type SelectItemProps, SelectItemText, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/src/components/ui/select/SelectItemText.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>

package/src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

package/src/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

package/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+  />
+</template>

package/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+        props.class
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

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

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class']; label?: string }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn('shrink-0 bg-border relative', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2'
+        )
+      "
+      >{{ props.label }}</span
+    >
+  </Separator>
+</template>

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

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

package/src/components/ui/switch/Switch.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        props.class
+      )
+    "
+  >
+    <SwitchThumb
+      :class="
+        cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5'
+        )
+      "
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from 'fulldev-ui/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        props.class
+      )
+    "
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { cn } from 'fulldev-ui/lib/utils'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="
+      cn(
+        'flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/schemas/blocks/categoryGroup.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+import { categorySingleSchema } from './categorySingle'
+
+export const categoryGroupSchema = z
+  .object({
+    title: z.string().optional(),
+    description: z.string().optional(),
+    categories: categorySingleSchema
+      .extend({
+        href: z.string(),
+      })
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type CategoryGroupSchema = z.infer<typeof categoryGroupSchema>

package/src/schemas/blocks/categoryList.ts

@@ -0,0 +1,18 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/fields/button'
+import { categorySingleSchema } from '../blocks/categorySingle'
+
+export const categoryListSchema = z
+  .object({
+    writeup: z.string().optional(),
+    button: buttonSchema.optional(),
+    categories: categorySingleSchema
+      .extend({
+        href: z.string(),
+      })
+      .array()
+      .optional(),
+  })
+  .strict()
+
+export type CategoryListSchema = z.infer<typeof categoryListSchema>

package/src/schemas/blocks/categorySingle.ts

@@ -0,0 +1,12 @@
+import { z } from 'astro:content'
+import { imageSchema } from 'fulldev-ui/schemas/fields/image.ts'
+
+export const categorySingleSchema = z
+  .object({
+    title: z.string(),
+    description: z.string().optional(),
+    image: imageSchema.optional(),
+  })
+  .strict()
+
+export type CategorySingleSchema = z.infer<typeof categorySingleSchema>

package/src/schemas/blocks/contact.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import { channelSchema } from '../fields/channel'
+
+export const contactSchema = z
+  .object({
+    writeup: z.string().optional(),
+    channels: channelSchema.array().optional(),
+    socials: z.string().array().optional(),
+    form: z.any(),
+  })
+  .strict()
+
+export type ContactSchema = z.infer<typeof contactSchema>

package/src/schemas/blocks/content.ts

@@ -0,0 +1,13 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/fields/button.ts'
+import { imageSchema } from '../fields/image'
+
+export const contentSchema = z
+  .object({
+    writeup: z.string().optional(),
+    buttons: buttonSchema.array().optional(),
+    image: imageSchema.optional(),
+  })
+  .strict()
+
+export type ContentSchema = z.infer<typeof contentSchema>

package/src/schemas/blocks/cta.ts

@@ -0,0 +1,11 @@
+import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/fields/button.ts'
+
+export const ctaSchema = z
+  .object({
+    writeup: z.string().optional(),
+    buttons: buttonSchema.array().optional(),
+  })
+  .strict()
+
+export type CtaSchema = z.infer<typeof ctaSchema>

package/src/schemas/blocks/faqs.ts

@@ -0,0 +1,17 @@
+import { z } from 'astro:content'
+import { buttonSchema } from '../fields/button'
+
+export const faqsSchema = z
+  .object({
+    writeup: z.string().optional(),
+    buttons: buttonSchema.array().optional(),
+    faqs: z
+      .object({
+        title: z.string(),
+        description: z.string(),
+      })
+      .array(),
+  })
+  .strict()
+
+export type FaqsSchema = z.infer<typeof faqsSchema>

package/src/schemas/blocks/features.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+
+export const featuresSchema = z
+  .object({
+    writeup: z.string().optional(),
+    features: z
+      .object({
+        icon: z.string(),
+        title: z.string(),
+        description: z.string(),
+      })
+      .array(),
+  })
+  .strict()
+
+export type FeaturesSchema = z.infer<typeof featuresSchema>

package/src/schemas/blocks/footer.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content'
+import { channelSchema } from 'fulldev-ui/schemas/fields/channel.ts'
+import { logoSchema } from 'fulldev-ui/schemas/fields/logo.ts'
+import { menuSchema } from 'fulldev-ui/schemas/fields/menu.ts'
+
+export const footerSchema = z
+  .object({
+    logo: logoSchema.optional(),
+    description: z.string().optional(),
+    socials: z.string().array().optional(),
+    channels: channelSchema.array().optional(),
+    menus: menuSchema.array().optional(),
+  })
+  .strict()
+
+export type FooterSchema = z.infer<typeof footerSchema>