@personizely/ui 0.0.42

package/src/components/ui/form/Form.vue

@@ -0,0 +1,13 @@
+<template>
+  <form :class="cn('flex flex-col gap-4', props.class)">
+    <slot />
+  </form>
+</template>
+<script setup lang="ts">
+import { cn } from '@/utils/tailwind'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/src/components/ui/form/FormControl.vue

@@ -0,0 +1,16 @@
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
+
+<script lang="ts" setup>
+import { Slot } from 'reka-ui'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>

package/src/components/ui/form/FormDescription.vue

@@ -0,0 +1,20 @@
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground group-[:has([disabled])]:opacity-70 group-[:has([disabled])]:cursor-not-allowed', props.class)"
+  >
+    <slot />
+  </p>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { useFormField } from './useFormField'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>

package/src/components/ui/form/FormField.vue

@@ -0,0 +1,61 @@
+<template>
+  <Field
+    v-slot="slotProps"
+    :name="name"
+    :rules="rules"
+    :model-modifiers="modelModifiers"
+    :label="errorLabel || label"
+  >
+    <div :class="cn('flex flex-col gap-2 group', props.class)">
+      <FormLabel v-if="$slots.label || label" :class="required ? 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-40' : ''">
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </FormLabel>
+      <FormControl>
+        <slot v-bind="slotProps" />
+      </FormControl>
+      <FormDescription v-if="($slots.description || description) && !slotProps.errors.length">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </FormDescription>
+      <FormMessage />
+    </div>
+  </Field>
+</template>
+
+<script lang="ts">
+import type { HTMLAttributes, InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
+</script>
+
+<script lang="ts" setup>
+import { Field } from 'vee-validate'
+import { provide } from 'vue'
+import { useId } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import FormMessage from './FormMessage.vue'
+import FormDescription from './FormDescription.vue'
+import FormControl from './FormControl.vue'
+import FormLabel from './FormLabel.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class'],
+  name: string
+  description?: string
+  label?: string
+  errorLabel?: string
+  required?: boolean
+  rules?: string
+  modelModifiers?: { [key:string]: any }
+}>(), {
+  default: () => {},
+  required: false
+})
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>

package/src/components/ui/form/FormLabel.vue

@@ -0,0 +1,23 @@
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
+
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'reka-ui'
+import { useFormField } from './useFormField'
+import { cn } from '@/utils/tailwind'
+import { Label } from '@/components/ui/label'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>

package/src/components/ui/form/FormMessage.vue

@@ -0,0 +1,16 @@
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-sm text-destructive group-[:has([disabled])]:opacity-70 group-[:has([disabled])]:cursor-not-allowed"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from './useFormField'
+
+const { name, formMessageId } = useFormField()
+</script>

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

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

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

@@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './FormField.vue'
+
+export function useFormField () {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  const fieldState = {
+    valid: useIsFieldValid(),
+    isDirty: useIsFieldDirty(),
+    isTouched: useIsFieldTouched(),
+    error: useFieldError()
+  }
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  }
+}

package/src/components/ui/icon/Icon.vue

@@ -0,0 +1,16 @@
+<template>
+  <Icon :icon="`${iconSet}:${icon}`" :aria-label="ariaLabel" />
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+withDefaults(defineProps<{
+  icon: string,
+  iconSet?: string,
+  ariaLabel?: string | null
+}>(), {
+  iconSet: 'lucide',
+  ariaLabel: null
+})
+</script>

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

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

package/src/components/ui/input/Input.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="cn('relative w-full items-center', props.class)">
+    <InputBase
+      v-bind="$attrs"
+      v-model="modelValue"
+      v-autofocus="autofocus"
+      :class="[
+        ((icon && iconPosition === 'left') || $slots.leading) && 'ps-8',
+        ((icon && iconPosition === 'right') || $slots.trailing) && 'pe-8'
+      ]"
+      @change="$emit('change', $event)"
+    />
+    <span v-if="$slots.leading || (icon && iconPosition === 'left')" class="absolute start-0 inset-y-0 flex items-center justify-center px-2 pointer-events-none">
+      <slot name="leading">
+        <Icon :icon="icon!" class="size-4 text-muted-foreground" />
+      </slot>
+    </span>
+    <span v-if="$slots.trailing || (icon && iconPosition === 'right')" class="absolute end-0 inset-y-0 flex items-center justify-center px-2 pointer-events-none">
+      <slot name="trailing">
+        <Icon :icon="icon!" class="size-4 text-muted-foreground" />
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+import vAutofocus from '@/directives/autofocus'
+import { Icon } from '@/components/ui/icon'
+import InputBase from '@/components/ui/input/InputBase.vue'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const modelValue = defineModel<string | number | null>()
+defineEmits<{
+  change: [value: InputEvent]
+}>()
+
+const props = withDefaults(defineProps<{
+  autofocus?: boolean
+  icon?: string
+  iconPosition?: string
+  class?: HTMLAttributes['class']
+}>(), {
+  iconPosition: 'left',
+  autofocus: false
+})
+</script>

package/src/components/ui/input/InputBase.vue

@@ -0,0 +1,18 @@
+<template>
+  <input
+    :value="modelValue"
+    :class="cn('flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    @input="modelValue = ($event.target as HTMLInputElement).value"
+  >
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const modelValue = defineModel<string | number | null>()
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

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

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

package/src/components/ui/label/Label.vue

@@ -0,0 +1,27 @@
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-[1.2] peer-disabled:cursor-not-allowed peer-disabled:opacity-70 group-[:has([disabled])]:opacity-70 group-[:has([disabled])]:cursor-not-allowed',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Label, type LabelProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

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

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

package/src/components/ui/pagination/Pagination.vue

@@ -0,0 +1,50 @@
+<template>
+  <PaginationRoot
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <PaginationContent v-slot="{ items }">
+      <PaginationFirst />
+      <PaginationPrevious />
+
+      <template v-for="(item, index) in items" :key="index">
+        <PaginationItem
+          v-if="item.type === 'page'"
+          :value="item.value"
+          :is-active="item.value === page"
+        >
+          {{ item.value }}
+        </PaginationItem>
+
+        <PaginationEllipsis v-else :key="item.type" :index="index" />
+      </template>
+
+      <PaginationNext />
+      <PaginationLast />
+    </PaginationContent>
+  </PaginationRoot>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationRoot, type PaginationRootEmits, type PaginationRootProps, useForwardPropsEmits } from 'reka-ui'
+import PaginationContent from './PaginationContent.vue'
+import PaginationItem from './PaginationItem.vue'
+import PaginationFirst from './PaginationFirst.vue'
+import PaginationPrevious from './PaginationPrevious.vue'
+import PaginationNext from './PaginationNext.vue'
+import PaginationLast from './PaginationLast.vue'
+import PaginationEllipsis from './PaginationEllipsis.vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<PaginationRootProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<PaginationRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,21 @@
+<template>
+  <PaginationList
+    v-slot="slotProps"
+    data-slot="pagination-content"
+    v-bind="delegatedProps"
+    :class="cn('flex flex-row items-center gap-1', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </PaginationList>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationList, type PaginationListProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,24 @@
+<template>
+  <PaginationEllipsis
+    data-slot="pagination-ellipsis"
+    v-bind="delegatedProps"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <Ellipsis class="size-4" />
+      <span class="sr-only">More pages</span>
+    </slot>
+  </PaginationEllipsis>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Ellipsis } from 'lucide-vue-next'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/components/ui/pagination/PaginationFirst.vue

@@ -0,0 +1,32 @@
+<template>
+  <PaginationFirst
+    data-slot="pagination-first"
+    :class="cn(buttonVariants({ variant: 'ghost', size, icon: true }), props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronsLeftIcon />
+      <span class="sr-only">First</span>
+    </slot>
+  </PaginationFirst>
+</template>
+
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronsLeftIcon } from 'lucide-vue-next'
+import { PaginationFirst, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationFirstProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}>(), {
+  size: 'md'
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwarded = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/pagination/PaginationItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <PaginationListItem
+    data-slot="pagination-item"
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      props.class)"
+  >
+    <slot />
+  </PaginationListItem>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationListItem, type PaginationListItemProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationListItemProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  isActive?: boolean
+}>(), {
+  size: 'md'
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive')
+</script>

package/src/components/ui/pagination/PaginationLast.vue

@@ -0,0 +1,32 @@
+<template>
+  <PaginationLast
+    data-slot="pagination-last"
+    :class="cn(buttonVariants({ variant: 'ghost', size, icon: true }), props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="sr-only">Last</span>
+      <ChevronsRightIcon />
+    </slot>
+  </PaginationLast>
+</template>
+
+<script setup lang="ts">
+import type { PaginationLastProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronsRightIcon } from 'lucide-vue-next'
+import { PaginationLast, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationLastProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}>(), {
+  size: 'sm'
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwarded = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,32 @@
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    :class="cn(buttonVariants({ variant: 'ghost', size, icon: true }), props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="sr-only">Next</span>
+      <ChevronRightIcon />
+    </slot>
+  </PaginationNext>
+</template>
+
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRightIcon } from 'lucide-vue-next'
+import { PaginationNext, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}>(), {
+  size: 'md'
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwarded = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/pagination/PaginationPrevious.vue

@@ -0,0 +1,32 @@
+<template>
+  <PaginationPrev
+    data-slot="pagination-previous"
+    :class="cn(buttonVariants({ variant: 'ghost', size, icon: true }), props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ChevronLeftIcon />
+      <span class="sr-only">Previous</span>
+    </slot>
+  </PaginationPrev>
+</template>
+
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronLeftIcon } from 'lucide-vue-next'
+import { PaginationPrev, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants, type ButtonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationPrevProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}>(), {
+  size: 'md'
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwarded = useForwardProps(delegatedProps)
+</script>

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

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

package/src/components/ui/popover/Popover.vue

@@ -0,0 +1,57 @@
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <PopoverTrigger v-if="$slots.trigger">
+      <slot name="trigger" />
+    </PopoverTrigger>
+
+    <PopoverPortal :to="options.portalTo">
+      <PopoverContent
+        :align="align"
+        :align-offset="alignOffset"
+        :side="side"
+        :side-offset="alignOffset"
+        v-bind="$attrs"
+        :class="
+          cn(
+            'z-50 min-w-48 max-h-[calc(var(--reka-popper-available-height)-4px)] overflow-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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',
+            props.class,
+          )
+        "
+      >
+        <div class="text-sm">
+          <slot />
+        </div>
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  PopoverPortal,
+  PopoverRoot,
+  PopoverContent,
+  type PopoverContentProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { type HTMLAttributes } from 'vue'
+import PopoverTrigger from './PopoverTrigger.vue'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { getOptions } from '@/options-provider'
+
+const props = withDefaults(defineProps<PopoverRootProps & Pick<PopoverContentProps, 'side' | 'align' | 'alignOffset' | 'sideOffset'> & {
+  class?: HTMLAttributes['class']
+}>(), {
+  align: 'center',
+  alignOffset: 4,
+  side: 'bottom',
+  sideOffset: 4
+})
+const emits = defineEmits<PopoverRootEmits>()
+
+const delegatedProps = useDelegatedProps(props, ['side', 'align', 'alignOffset', 'sideOffset', 'class'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const options = getOptions()
+</script>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,15 @@
+<template>
+  <PopoverTrigger as-child>
+    <slot />
+  </PopoverTrigger>
+</template>
+
+<script setup lang="ts">
+import {
+  PopoverTrigger
+} from 'reka-ui'
+import { provide } from 'vue'
+
+
+provide('hasDropdown', true)
+</script>

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

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