@personizely/ui 0.0.42

package/src/components/ui/autocomplete/Autocomplete.vue

@@ -0,0 +1,170 @@
+<template>
+  <AutocompleteRoot
+    v-bind="omit(forwarded, ['class', 'placeholder', 'searchPlaceholder', 'disableFilter', 'disablePortal', 'keys', 'options', 'autofocus', 'modelValue', 'onUpdate:modelValue'])"
+    v-model="modelValue"
+    v-model:open="open"
+    :ignore-filter="disableFilter"
+    :reset-search-term-on-blur="false"
+  >
+    <ComboboxAnchor :class="cn('flex h-8 items-center w-full justify-between rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:break-all', props.class)">
+      <ComboboxInput
+        ref="input"
+        :model-value="selectedOption ? selectedOption[keys.label] : modelValue"
+        :auto-focus="autofocus"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="cn(
+          'flex h-8 w-full bg-transparent py-1 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          loading ? 'pe-8' : 'pe-2'
+        )"
+        @update:model-value="modelValue = $event"
+      />
+      <div v-if="loading" class="pointer-events-none">
+        <ProgressCircular class="size-4 text-muted-foreground" />
+      </div>
+
+      <Primitive
+        v-else-if="modelValue"
+        as="button"
+        class="focus:outline-hidden focus:ring-2 rounded focus:ring-ring focus:ring-offset-2"
+        @click="reset"
+      >
+        <X class="w-4 h-4 opacity-50" />
+      </Primitive>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-if="filteredOptions.length > 0" :disabled="disablePortal" :to="opts.portalTo">
+      <AutocompleteContent :side-offset="5">
+        <ComboboxViewport class="p-1 max-h-[300px] overflow-y-auto overflow-x-hidden">
+          <AutocompleteEmpty />
+          <AutocompleteGroup>
+            <AutocompleteItem
+              v-for="(option, index) in filteredOptions"
+              :key="option[keys.id] || option[keys.value] || index"
+              :value="option[keys.value]"
+              :disabled="option[keys.disabled] || disabled"
+              @select="onSelect($event, option)"
+            >
+              <slot name="option" v-bind="{ option }">
+                {{ option[keys.label] || option }}
+              </slot>
+              <ComboboxItemIndicator as-child>
+                <Check class="ml-auto h-4 w-4 text-muted-foreground" />
+              </ComboboxItemIndicator>
+            </AutocompleteItem>
+          </AutocompleteGroup>
+        </ComboboxViewport>
+      </AutocompleteContent>
+    </ComboboxPortal>
+  </AutocompleteRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed, ref, useTemplateRef } from 'vue'
+import { Check } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
+import omit from 'lodash/omit'
+import {
+  Primitive,
+  ComboboxItemIndicator,
+  ComboboxAnchor,
+  ComboboxPortal,
+  ComboboxViewport,
+  ComboboxInput,
+  type ComboboxItemEmits,
+  type ComboboxRootEmits,
+  type ComboboxRootProps,
+  type ComboboxInputProps
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import AutocompleteRoot from './AutocompleteRoot.vue'
+import AutocompleteContent from './AutocompleteContent.vue'
+import AutocompleteItem from './AutocompleteItem.vue'
+import AutocompleteGroup from './AutocompleteGroup.vue'
+import AutocompleteEmpty from './AutocompleteEmpty.vue'
+import { ProgressCircular } from '@/components/ui/progress-circular'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+import { type CustomOption, type Keys, type Option, prepareOptions } from '@/utils/options'
+import { getOptions } from '@/options-provider'
+
+const modelValue = defineModel<ComboboxRootProps['modelValue']>()
+const searchTerm = defineModel<ComboboxInputProps['modelValue']>('searchTerm', { default: '' })
+
+const props = withDefaults(defineProps<Omit<ComboboxRootProps, 'modelValue' | 'resetSearchTermOnBlur'> & {
+  class?: HTMLAttributes['class']
+  placeholder?: string
+  loading?: boolean
+  disableFilter?: boolean
+  disablePortal?: boolean
+  autofocus?: boolean
+  searchPlaceholder?: string
+  keys?: Keys
+  options: string[] | Option[] | CustomOption[] | { [key:string]: string }
+}>(), {
+  disableFilter: false,
+  disablePortal: false,
+  loading: false,
+  autofocus: false,
+  placeholder: 'Select a value...',
+  searchPlaceholder: 'Search...',
+  keys: () => ({
+    id: 'id',
+    label: 'label',
+    help: 'help',
+    value: 'value',
+    disabled: 'disabled'
+  })
+})
+
+const emits = defineEmits<Omit<ComboboxRootEmits, 'update:modelValue'> & {
+  blur: [event: MouseEvent]
+  focus: [event: MouseEvent]
+  select: [option: Option | CustomOption]
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'placeholder', 'loading', 'disableFilter', 'disablePortal', 'autofocus', 'searchPlaceholder', 'keys', 'options'])
+const delegatedEmits = useEmitAsProps(emits, ['blur', 'focus', 'select', 'update:modelValue', 'update:searchTerm'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+const opts = getOptions()
+
+const open = ref(false)
+const input = useTemplateRef<typeof ComboboxInput>('input')
+
+const onSelect = (event: ComboboxItemEmits['select'][0], option: Option | CustomOption) => {
+  modelValue.value = event.detail.value
+  emits('select', option)
+}
+
+const reset = () => {
+  modelValue.value = ''
+  searchTerm.value = ''
+  input.value?.$el.focus()
+}
+
+const selectedOption = computed(() => {
+  if (modelValue.value) {
+    return preparedOptions.value.find((o) => {
+      return o[props.keys.value] === modelValue.value
+    })
+  }
+
+  return null
+})
+
+const filterFunction = (options: any, searchTerm: string) => {
+  if (!props.disableFilter) return options
+
+  return options.filter((option: any) => {
+    const result = preparedOptions.value.find((o: Option | CustomOption) => {
+      return o[props.keys.value] === option
+    })
+
+    return result ? result[props.keys.label]?.toLowerCase().includes(searchTerm?.toLowerCase()) : false
+  })
+}
+
+const preparedOptions = computed(() => prepareOptions(props.options, props.keys))
+const filteredOptions = computed(() => filterFunction(preparedOptions.value, String(searchTerm.value)))
+</script>

package/src/components/ui/autocomplete/AutocompleteContent.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('z-50 min-w-(--reka-popper-anchor-width) rounded-md border bg-popover 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 role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import { ComboboxContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper'
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/autocomplete/AutocompleteEmpty.vue

@@ -0,0 +1,20 @@
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-4 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxEmptyProps } from 'reka-ui'
+import { ComboboxEmpty } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/autocomplete/AutocompleteGroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <SelectGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden text-foreground', props.class)"
+  >
+    <SelectLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </SelectLabel>
+    <slot />
+  </SelectGroup>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxGroupProps } from 'reka-ui'
+import { SelectGroup, SelectLabel } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/autocomplete/AutocompleteItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent aria-selected:font-medium data-disabled:pointer-events-none data-disabled:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/autocomplete/AutocompleteRoot.vue

@@ -0,0 +1,31 @@
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn(props.class)"
+    as-child
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: ''
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/autocomplete/AutocompleteSeparator.vue

@@ -0,0 +1,23 @@
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import { ComboboxSeparator } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

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

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

package/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,31 @@
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <AvatarImage v-if="src" :src="src" :alt="alt" />
+    <AvatarFallback>
+      <slot>
+        {{ fallback }}
+      </slot>
+    </AvatarFallback>
+  </AvatarRoot>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { type AvatarVariants, avatarVariant } from '.'
+import AvatarImage from './AvatarImage.vue'
+import AvatarFallback from './AvatarFallback.vue'
+import { cn } from '@/utils/tailwind'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+  src?: string
+  alt?: string
+  fallback: string
+}>(), {
+  size: 'sm',
+  shape: 'circle'
+})
+</script>

package/src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,11 @@
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
+
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>

package/src/components/ui/avatar/AvatarImage.vue

@@ -0,0 +1,9 @@
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
+
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'reka-ui'
+
+const props = defineProps<AvatarImageProps>()
+</script>

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

@@ -0,0 +1,19 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.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>

package/src/components/ui/badge/Badge.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { type BadgeVariants, badgeVariants } from '.'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>

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

@@ -0,0 +1,22 @@
+import { type VariantProps, cva } 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-medium transition-colors focus:outline-hidden 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>

package/src/components/ui/button/Button.vue

@@ -0,0 +1,123 @@
+<template>
+  <DefineTemplate>
+    <component
+      v-bind="buildAttrs($attrs)"
+      :is="to ? 'router-link' : Primitive"
+      :as="!to ? (href ? 'a' : 'button') : null"
+      :class="cn(buttonVariants({ variant, size, icon: Boolean(icon || $slots.icon) && !$slots.default }), props.class)"
+      :disabled="!href ? disabled || loading : null"
+      :to="to || null"
+    >
+      <Icon
+        v-if="iconPosition === 'right' && hasDropdown && $slots.default"
+        icon="chevron-down"
+        :class="buttonIconVariants({ size })"
+      />
+
+      <template v-if="iconPosition === 'left' && (icon || $slots.icon || loading)">
+        <template v-if="loading">
+          <ProgressCircular
+            v-if="loading"
+            class="text-inherit"
+            :class="buttonIconVariants({ size })"
+          />
+        </template>
+        <slot v-else name="icon">
+          <Icon
+            :icon="icon!"
+            :class="buttonIconVariants({ size })"
+          />
+        </slot>
+      </template>
+
+      <slot />
+
+      <template v-if="iconPosition === 'right' && (icon || $slots.icon || loading)">
+        <template v-if="loading">
+          <ProgressCircular
+            v-if="loading"
+            class="text-inherit"
+            :class="buttonIconVariants({ size })"
+          />
+        </template>
+        <slot v-else name="icon">
+          <Icon
+            :icon="icon!"
+            :class="buttonIconVariants({ size })"
+          />
+        </slot>
+      </template>
+
+      <Icon
+        v-if="iconPosition === 'left' && hasDropdown && $slots.default"
+        icon="chevron-down"
+        :class="cn('ml-auto', buttonIconVariants({ size }))"
+      />
+    </component>
+  </DefineTemplate>
+
+  <Tooltip v-if="tooltip || $slots.tooltip">
+    <template #trigger>
+      <ReuseTemplate />
+    </template>
+
+    <slot name="tooltip">
+      {{ tooltip }}
+    </slot>
+  </Tooltip>
+  <ReuseTemplate v-else />
+</template>
+
+<script lang="ts">
+import type { ButtonVariants } from '@/components/ui/button'
+import type { AnchorHTMLAttributes, HTMLAttributes } from 'vue'
+
+type ButtonProps = {
+  variant?: ButtonVariants['variant']
+  tooltip?: string
+  to?: any
+  icon?: string
+  iconPosition?: string
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+  href?: AnchorHTMLAttributes['href']
+  loading?: boolean
+}
+
+export { type ButtonProps }
+</script>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { Primitive } from 'reka-ui'
+import { buttonIconVariants, buttonVariants } from '.'
+import { cn } from '@/utils/tailwind'
+import { ProgressCircular } from '@/components/ui/progress-circular'
+import { Icon } from '@/components/ui/icon'
+import { Tooltip } from '@/components/ui/tooltip'
+import { createReusableTemplate } from '@vueuse/core'
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const hasDropdown = inject('hasDropdown', false)
+
+const buildAttrs = (attrs: { [key: string]: any }) => {
+  attrs = { ...attrs }
+  if (!props.to) {
+    attrs.href = props.href && !(props.disabled || props.loading) ? props.href : null
+  }
+
+  return attrs
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  loading: false,
+  disabled: false,
+  iconPosition: 'left'
+})
+</script>

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

@@ -0,0 +1,78 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium text-xs gap-1 ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline'
+    },
+    size: {
+      '2xs': 'px-1.5 h-5 rounded-sm font-normal text-2xs gap-0.5',
+      xs: 'px-2 h-6 rounded-sm font-normal',
+      sm: 'px-2.5 h-7 rounded-sm font-normal',
+      md: 'px-3 h-8',
+      lg: 'px-4 h-9 text-sm gap-1.5'
+    },
+    icon: {
+      true: '',
+      false: ''
+    }
+  },
+  compoundVariants: [
+    {
+      icon: true,
+      size: '2xs',
+      class: 'px-0 w-5'
+    },
+    {
+      icon: true,
+      size: 'xs',
+      class: 'px-0 w-6'
+    },
+    {
+      icon: true,
+      size: 'sm',
+      class: 'px-0 w-7'
+    },
+    {
+      icon: true,
+      size: 'md',
+      class: 'px-0 w-8'
+    },
+    {
+      icon: true,
+      size: 'lg',
+      class: 'px-0 w-9'
+    }
+  ],
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+})
+
+export const buttonIconVariants = cva('', {
+  variants: {
+    size: {
+      '2xs': 'w-2.5 h-2.5 min-w-2.5',
+      xs: 'w-3 h-3 min-w-3',
+      sm: 'w-3 h-3 min-w-3',
+      md: 'w-3.5 h-3.5 min-w-3.5',
+      lg: 'w-4 h-4 min-w-4'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>