@personizely/ui 0.0.42

package/src/components/ui/calendar/Calendar.vue

@@ -0,0 +1,76 @@
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  CalendarRoot,
+  type CalendarRootEmits,
+  type CalendarRootProps,
+  useForwardPropsEmits
+} from 'reka-ui'
+import CalendarCell from './CalendarCell.vue'
+import CalendarCellTrigger from './CalendarCellTrigger.vue'
+import CalendarGrid from './CalendarGrid.vue'
+import CalendarGridBody from './CalendarGridBody.vue'
+import CalendarGridHead from './CalendarGridHead.vue'
+import CalendarGridRow from './CalendarGridRow.vue'
+import CalendarHeadCell from './CalendarHeadCell.vue'
+import CalendarHeader from './CalendarHeader.vue'
+import CalendarHeading from './CalendarHeading.vue'
+import CalendarNextButton from './CalendarNextButton.vue'
+import CalendarPrevButton from './CalendarPrevButton.vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/components/ui/calendar/CalendarCell.vue

@@ -0,0 +1,24 @@
+<template>
+  <CalendarCell
+    :class="cn('relative h-7 w-7 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,38 @@
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-7 w-7 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-selected:bg-primary data-selected:text-primary-foreground data-selected:opacity-100 data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground',
+      // Disabled
+      'data-disabled:text-muted-foreground data-disabled:opacity-50',
+      // Unavailable
+      'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+      // Outside months
+      'data-outside-month:pointer-events-none data-outside-month:text-muted-foreground data-outside-month:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarGrid.vue

@@ -0,0 +1,24 @@
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarGridBody.vue

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

package/src/components/ui/calendar/CalendarGridHead.vue

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

package/src/components/ui/calendar/CalendarGridRow.vue

@@ -0,0 +1,21 @@
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -0,0 +1,21 @@
+<template>
+  <CalendarHeadCell :class="cn('w-7 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarHeader.vue

@@ -0,0 +1,21 @@
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarHeading.vue

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

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'reka-ui'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -0,0 +1,32 @@
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
+
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'reka-ui'
+import { ChevronLeft } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

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

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

package/src/components/ui/card/Card.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    :class="
+      cn(
+        'rounded border bg-card text-card-foreground shadow-xs flex flex-col gap-4 p-8',
+        props.class,
+        props.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
+      )
+    "
+    :aria-disabled="props.disabled"
+  >
+    <CardHeader v-if="$slots.header || $slots.title || $slots.description || title || description">
+      <slot name="header">
+        <CardTitle v-if="title || $slots.title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </CardTitle>
+        <CardDescription v-if="description || $slots.description">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </CardDescription>
+        <CardTray v-if="$slots.tray">
+          <slot name="tray" />
+        </CardTray>
+      </slot>
+    </CardHeader>
+    <CardContent v-if="$slots.default" :class="loading && 'relative [&>*:not(:last-child)]:opacity-20'">
+      <slot />
+      <ProgressCircular v-if="loading" class="size-5 top-1/2 left-1/2 absolute -translate-x-1/2 -translate-y-1/2" />
+    </CardContent>
+    <CardFooter v-if="$slots.footer">
+      <slot name="footer" />
+    </CardFooter>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+import CardDescription from './CardDescription.vue'
+import CardContent from './CardContent.vue'
+import CardFooter from './CardFooter.vue'
+import CardTitle from './CardTitle.vue'
+import CardHeader from './CardHeader.vue'
+import CardTray from './CardTray.vue'
+import ProgressCircular from '@/components/ui/progress-circular/ProgressCircular.vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  title?: string
+  description?: string
+  loading?: boolean
+  disabled?: boolean
+}>()
+</script>

package/src/components/ui/card/CardContent.vue

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

package/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/src/components/ui/card/CardFooter.vue

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

package/src/components/ui/card/CardHeader.vue

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

package/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<template>
+  <h3
+    :class="
+      cn('text-base font-medium leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/tailwind'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>

package/src/components/ui/card/CardTray.vue

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

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

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

package/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="cn('items-top flex gap-x-2', props.class)">
+    <CheckboxBase
+      :id="id"
+      v-model="modelValue"
+      :disabled="disabled"
+      :required="required"
+      :name="name"
+      :default-value="defaultValue"
+      :value="value"
+      @focus="$emit('focus', $event)"
+      @blur="$emit('blur', $event)"
+    />
+
+    <div v-if="help || $slots.help" class="grid gap-1 leading-[1.2] [&>label]:peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <label
+        :for="id"
+        class="text-sm font-medium leading-[1.2]"
+      >
+        <slot>{{ label }}</slot>
+      </label>
+      <p class="text-sm text-muted-foreground">
+        <slot name="help">
+          {{ help }}
+        </slot>
+      </p>
+    </div>
+
+    <label
+      v-else-if="label || $slots.default"
+      :for="id || name"
+      class="text-sm font-medium leading-[1.2] peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      <slot>{{ label }}</slot>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes, type Events } from 'vue'
+import { useId } from 'reka-ui'
+import { cn } from '@/utils/tailwind'
+import CheckboxBase from './CheckboxBase.vue'
+
+const modelValue = defineModel<boolean | 'indeterminate'>()
+const props = withDefaults(defineProps<{
+  defaultValue?: boolean
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+  id?: string
+  class?: HTMLAttributes['class']
+  label?: string
+  help?: string
+}>(), {
+  id: () => useId()
+})
+defineEmits<{
+  focus: [event: Events['onFocus']]
+  blur: [event: Events['onBlur']]
+}>()
+</script>

package/src/components/ui/checkbox/CheckboxBase.vue

@@ -0,0 +1,39 @@
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', props.class)"
+    @change.stop
+    @input.stop
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot name="indicator">
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
+
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import {
+  CheckboxIndicator,
+  CheckboxRoot,
+  type CheckboxRootEmits,
+  type CheckboxRootProps,
+  useId,
+  useForwardPropsEmits
+} from 'reka-ui'
+import { Check } from 'lucide-vue-next'
+import { cn } from '@/utils/tailwind'
+import { useDelegatedProps } from '@/composables/delegated-props'
+
+const props = withDefaults(defineProps<CheckboxRootProps & {
+  class?: HTMLAttributes['class']
+}>(), {
+  id: () => useId()
+})
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = useDelegatedProps(props, ['class'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

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

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