@personizely/ui 0.0.42

package/src/components/ui/toast/Toast.vue

@@ -0,0 +1,28 @@
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'
+import { type ToastProps, toastVariants } from '.'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ToastProps>()
+
+const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/toast/ToastAction.vue

@@ -0,0 +1,26 @@
+<template>
+  <ToastAction v-bind="delegatedProps" as-child>
+    <Button
+      size="sm"
+      :class="props.class"
+      :variant="variant === 'destructive' ? 'destructive' : 'ghost'"
+    >
+      <slot />
+    </Button>
+  </ToastAction>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastAction, type ToastActionProps } from 'reka-ui'
+import { Button } from '@/components/ui/button'
+import type { ToastVariants } from './'
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'], variant: ToastVariants['variant'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/toast/ToastClose.vue

@@ -0,0 +1,29 @@
+<template>
+  <ToastClose v-bind="delegatedProps" as-child>
+    <Button
+      size="xs"
+      icon="x"
+      :variant="variant === 'destructive' ? 'destructive' : 'ghost'"
+      :class="cn('absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity focus:opacity-100', props.class)"
+    />
+  </ToastClose>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastClose, type ToastCloseProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import { Button } from '@/components/ui/button'
+import type { ToastVariants } from './'
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class'],
+  variant: ToastVariants['variant']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/toast/ToastDescription.vue

@@ -0,0 +1,19 @@
+<template>
+  <ToastDescription :class="cn('text-xs opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastDescription, type ToastDescriptionProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/toast/ToastProvider.vue

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

package/src/components/ui/toast/ToastTitle.vue

@@ -0,0 +1,19 @@
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-xs font-medium', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastTitle, type ToastTitleProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/toast/ToastViewport.vue

@@ -0,0 +1,17 @@
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToastViewport, type ToastViewportProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>

package/src/components/ui/toast/Toaster.vue

@@ -0,0 +1,30 @@
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose :variant="toast.variant" />
+      </div>
+      <component :is="toast.action" :variant="toast.variant" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import { useToast } from './useToast'
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
+
+const { toasts } = useToast()
+</script>

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

@@ -0,0 +1,34 @@
+import type { ToastRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export { default as Toaster } from './Toaster.vue'
+export { default as Toast } from './Toast.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
+export { default as ToastAction } from './ToastAction.vue'
+export { default as ToastClose } from './ToastClose.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastDescription } from './ToastDescription.vue'
+export { default as ToastProvider } from './ToastProvider.vue'
+export { toast, useToast } from './useToast'
+
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export const toastVariants = cva('group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-10 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--reka-toast-swipe-end-x) data-[swipe=move]:translate-x-(--reka-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full', {
+  variants: {
+    variant: {
+      default: 'border bg-background text-foreground',
+      destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+})
+
+export type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  onOpenChange?: ((value: boolean) => void) | undefined
+}

package/src/components/ui/toast/useToast.ts

@@ -0,0 +1,163 @@
+import { computed, ref } from 'vue'
+import type { Component, VNode } from 'vue'
+import type { ToastProps } from '.'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
+} as const
+
+let count = 0
+
+function genId () {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+    type: ActionType['ADD_TOAST']
+    toast: ToasterToast
+  }
+  | {
+    type: ActionType['UPDATE_TOAST']
+    toast: Partial<ToasterToast>
+  }
+  | {
+    type: ActionType['DISMISS_TOAST']
+    toastId?: ToasterToast['id']
+  }
+  | {
+    type: ActionType['REMOVE_TOAST']
+    toastId?: ToasterToast['id']
+  }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue (toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: []
+})
+
+function dispatch (action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t)
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+            ...t,
+            open: false
+          }
+          : t)
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = []
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+
+      break
+  }
+}
+
+function useToast () {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId })
+  }
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast (payload: Toast | string) {
+  const props = typeof payload === 'string' ? { description: payload } : payload
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id }
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss()
+      }
+    }
+  })
+
+  return {
+    id,
+    dismiss,
+    update
+  }
+}
+
+export { toast, useToast }

package/src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,51 @@
+<template>
+  <Tooltip :disabled="!icon || !label">
+    <template #trigger>
+      <Toggle
+        v-bind="forwarded"
+        :aria-label="label"
+        :data-active="modelValue"
+        :class="cn(toggleVariants({ variant, size, icon: Boolean(icon) }), 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', props.class)"
+      >
+        <slot>
+          <component
+            :is="typeof icon === 'string' ? Icon : icon"
+            v-if="icon"
+            :class="buttonIconVariants({ size })"
+            :icon="icon!"
+          />
+        </slot>
+      </Toggle>
+    </template>
+
+    {{ label }}
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, type Component } from 'vue'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
+import { type ToggleVariants, toggleVariants } from '.'
+import { cn } from '@/utils/tailwind'
+import { Icon } from '@/components/ui/icon'
+import { Tooltip } from '@/components/ui/tooltip'
+import { buttonIconVariants } from '@/components/ui/button'
+import { useDelegatedProps } from '@/composables/delegated-props'
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+  icon?: string | Component
+  label?: string
+}>(), {
+  variant: 'default',
+  size: 'md',
+  disabled: false
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'size', 'variant', 'icon', 'label'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

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

@@ -0,0 +1,71 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva('inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground 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-transparent',
+      outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'
+    },
+    size: {
+      '2xs': 'px-2 h-5 rounded-sm font-normal text-2xs',
+      xs: 'px-3 h-6 rounded-sm font-normal',
+      sm: 'px-3 h-7 rounded-sm font-normal',
+      md: 'px-3 h-8',
+      lg: 'px-4 h-9 text-sm gap-2'
+    },
+    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 toggleIconVariants = cva('', {
+  variants: {
+    size: {
+      '2xs': 'w-3 h-3',
+      xs: 'w-3 h-3',
+      sm: 'w-3 h-3',
+      md: 'w-4 h-4',
+      lg: 'w-5 h-5'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,58 @@
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="cn('flex items-center justify-center gap-1', props.class)"
+  >
+    <ToggleGroupItem
+      v-for="item in items"
+      :key="item.value"
+      :label="item.label"
+      :icon="item.icon"
+      :size="size"
+      :variant="variant"
+      :value="item.value"
+    >
+      <slot v-if="$slots.default || !item.icon" v-bind="{ item }">
+        {{ item.label }}
+      </slot>
+    </ToggleGroupItem>
+  </ToggleGroupRoot>
+</template>
+
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes } from 'vue'
+import {
+  ToggleGroupRoot,
+  type ToggleGroupRootEmits,
+  type ToggleGroupRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { toggleVariants } from '@/components/ui/toggle'
+import ToggleGroupItem from './ToggleGroupItem.vue'
+import { cn } from '@/utils/tailwind'
+import { useDelegatedProps } from '@/composables/delegated-props'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+interface Item {
+  label: string
+  value: number | string
+  icon?: string
+}
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size'],
+  items: Item[]
+}>()
+
+defineSlots<{
+  default(props: { item: Item }): any
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['class', 'size', 'variant', 'items'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,54 @@
+<template>
+  <Tooltip :disabled="!label || !icon">
+    <template #trigger>
+      <ToggleGroupItem
+        v-bind="forwardedProps"
+        :aria-label="label"
+        :class="cn(toggleVariants({
+          variant: variant,
+          size: size,
+          icon: Boolean(icon)
+        }), 'data-active:bg-accent data-active:text-accent-foreground', props.class)"
+      >
+        <slot>
+          <component
+            :is="typeof icon === 'string' ? Icon : icon"
+            v-if="icon"
+            :class="buttonIconVariants({ size })"
+            :icon="icon!"
+          />
+        </slot>
+      </ToggleGroupItem>
+    </template>
+
+    {{ label }}
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import { type HTMLAttributes, type Component, computed } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'reka-ui'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/utils/tailwind'
+import { buttonIconVariants } from '@/components/ui/button'
+import { Tooltip } from '@/components/ui/tooltip'
+import { Icon } from '@/components/ui/icon'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  label?: string
+  size?: ToggleGroupVariants['size']
+  icon?: string | Component
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, variant: _variant, size: _size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/toggle-group/index.ts

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

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,42 @@
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <TooltipTrigger as-child>
+      <slot name="trigger" />
+    </TooltipTrigger>
+    <TooltipPortal :to="options.portalTo">
+      <TooltipContent
+        v-bind="$attrs"
+        :side-offset="4"
+        align="center"
+        :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-2 py-1 text-xs text-popover-foreground shadow-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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)"
+      >
+        <slot />
+      </TooltipContent>
+    </TooltipPortal>
+  </TooltipRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  TooltipPortal,
+  TooltipRoot,
+  TooltipContent,
+  TooltipTrigger,
+  type TooltipRootEmits,
+  type TooltipRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import type { HTMLAttributes } from 'vue'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { getOptions } from '@/options-provider'
+
+const props = defineProps<TooltipRootProps & {
+  class?: HTMLAttributes['class']
+}>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const delegatedProps = useDelegatedProps(props, ['class'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const options = getOptions()
+</script>

package/src/components/ui/tooltip/TooltipProvider.vue

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

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

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