@privyid/persona 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/components/datepicker/Datepicker.vue

@@ -8,6 +8,7 @@
     :disabled="disabled">
     <template #activator>
       <Input
+        v-bind="$attrs"
         :value="value"
         :model-value="value"
         data-testid="datepicker-input"
@@ -16,7 +17,10 @@
         :disabled="disabled"
         :error="error"
         :size="size"
+        :clearable="clearable"
+        :container-class="containerClass"
         readonly
+        @clear="onClear"
         @focus="onFocus">
         <template #append>
           <IconCalendar
@@ -27,6 +31,7 @@
 
     <Calendar
       v-model="model"
+      class="datepicker__calendar"
       :start="start"
       :end="end"
       :disabled="disabled"
@@ -37,7 +42,6 @@
       :range="range"
       :min-range="minRange"
       :max-range="maxRange"
-      class="datepicker__calendar"
       @change="onSelected"
       @update:start="$emit('update:start', $event)"
       @update:end="$emit('update:end', $event)" />
@@ -60,6 +64,8 @@ import { useVModel } from '../input'
 import IconCalendar from '@privyid/persona-icon/vue/calendar/16.vue'
 import type { SizeVariant } from '../button'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps({
   modelValue: {
     type   : [Date, Array] as PropType<Date | [Date, Date]>,
@@ -69,6 +75,30 @@ const props = defineProps({
     type   : String as PropType<SizeVariant>,
     default: 'md',
   },
+  disabled: {
+    type   : Boolean,
+    default: false,
+  },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
+  error: {
+    type   : Boolean,
+    default: false,
+  },
+  clearable: {
+    type   : Boolean,
+    default: false,
+  },
+  containerClass: {
+    type: [
+      String,
+      Array,
+      Object,
+    ],
+    default: undefined,
+  },
   start: {
     type   : Date,
     default: undefined,
@@ -85,18 +115,6 @@ const props = defineProps({
     type   : String,
     default: 'dd/MM/yyyy',
   },
-  disabled: {
-    type   : Boolean,
-    default: undefined,
-  },
-  readonly: {
-    type   : Boolean,
-    default: undefined,
-  },
-  error: {
-    type   : Boolean,
-    default: undefined,
-  },
   max: {
     type   : Date,
     default: undefined,
@@ -178,6 +196,11 @@ function onFocus () {
     isOpen.value = true
 }
 
+function onClear () {
+  if (!props.disabled && !props.readonly)
+    model.value = undefined
+}
+
 function onSelected (event: Event) {
   isOpen.value = false
 

package/dist/components/dropdown/Dropdown.vue

@@ -197,7 +197,12 @@ defineEmits<{
 }>()
 
 const slots = defineSlots<{
-  'activator'(props: { isOpen: boolean, open: () => void, close: () => void, toggle: () => void }): VNode[],
+  'activator'(props: {
+    isOpen: boolean,
+    open: () => void,
+    close: () => void,
+    toggle: () => void,
+  }): VNode[],
   'button-content'(): VNode[],
   'prepend'(): VNode[],
   'append'(): VNode[],

package/dist/components/filterbar/pinned/PinnedSelect.vue.d.ts

@@ -11,7 +11,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: undefined;
     };
 }, {
@@ -30,7 +30,7 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: () => never[];
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: undefined;
     };
 }>> & {

package/dist/components/filterbar/pinned/PinnedToggle.vue.d.ts

@@ -6,15 +6,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     value: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     checked: {
@@ -30,15 +30,15 @@ declare const _default: import("vue-demi").DefineComponent<{
         required: true;
     };
     modelValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     value: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | ArrayConstructor | NumberConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
+        type: (NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | StringConstructor)[];
         default: boolean;
     };
     checked: {
@@ -49,8 +49,8 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     value: string | number | boolean | Record<string, any> | unknown[] | Date;
+    modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     checked: boolean;
     uncheckedValue: string | number | boolean | Record<string, any> | unknown[] | Date;
 }, {}>;

package/dist/components/meta.json

@@ -25,9 +25,9 @@
   "PCollapse": "components/collapse/Collapse.vue",
   "PContextualBar": "components/contextual-bar/ContextualBar.vue",
   "PCropper": "components/cropper/Cropper.vue",
+  "PDatepicker": "components/datepicker/Datepicker.vue",
   "PDialog": "components/dialog/Dialog.vue",
   "PDialogFooter": "components/dialog/DialogFooter.vue",
-  "PDatepicker": "components/datepicker/Datepicker.vue",
   "PDivider": "components/divider/Divider.vue",
   "PDot": "components/dot/Dot.vue",
   "PDropdown": "components/dropdown/Dropdown.vue",
@@ -74,16 +74,16 @@
   "PPdfObjectAddon": "components/pdf-object/PdfObjectAddon.vue",
   "PPdfObjectDebugger": "components/pdf-object/PdfObjectDebugger.vue",
   "PPdfObjects": "components/pdf-object/PdfObjects.vue",
+  "PPdfText": "components/pdf-text/PdfText.vue",
   "PPdfError": "components/pdf-viewer/PdfError.vue",
   "PPdfLoading": "components/pdf-viewer/PdfLoading.vue",
   "PPdfNavigation": "components/pdf-viewer/PdfNavigation.vue",
   "PPdfViewer": "components/pdf-viewer/PdfViewer.vue",
-  "PPdfText": "components/pdf-text/PdfText.vue",
   "PPopover": "components/popover/Popover.vue",
   "PPopup": "components/popup/Popup.vue",
-  "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
   "PProgress": "components/progress/Progress.vue",
   "PProgressItem": "components/progress/ProgressItem.vue",
+  "PProgressIndicator": "components/progress-indicator/ProgressIndicator.vue",
   "PProgressbar": "components/progressbar/Progressbar.vue",
   "PRadio": "components/radio/Radio.vue",
   "PRingbar": "components/ringbar/Ringbar.vue",
@@ -118,8 +118,11 @@
   "PTab": "components/tabs/Tab.vue",
   "PTabContent": "components/tabs/TabContent.vue",
   "PTabs": "components/tabs/Tabs.vue",
-  "PTextarea": "components/textarea/Textarea.vue",
   "PText": "components/text/Text.vue",
+  "PTextarea": "components/textarea/Textarea.vue",
+  "PTime": "components/time/Time.vue",
+  "PTimeItem": "components/time/TimeItem.vue",
+  "PTimepicker": "components/timepicker/Timepicker.vue",
   "PToast": "components/toast/Toast.vue",
   "PToggle": "components/toggle/Toggle.vue",
   "PTooltip": "components/tooltip/Tooltip.vue",

package/dist/components/select/Select.vue

@@ -89,7 +89,9 @@
       <div
         data-testid="select-no-data"
         class="select__empty">
-        <slot name="empty">
+        <slot
+          name="empty"
+          :keyword="keyword">
           {{ emptyText }}
         </slot>
       </div>
@@ -168,6 +170,7 @@ import IconLoading from '../spinner/SpinnerRing.vue'
 import type {
   PropType,
   HTMLAttributes,
+  VNode,
 } from 'vue-demi'
 import {
   computed,
@@ -459,6 +462,23 @@ defineExpose({
   menuEl,
   toggle,
 })
+
+defineSlots<{
+  'activator'(props: {
+    isOpen: boolean,
+    open: () => void,
+    close: () => void,
+    toggle: () => void,
+  }): VNode[],
+  'selected'(props: { item: unknown, multiple: boolean }): VNode[],
+  'placeholder'(): VNode[],
+  'empty'(props: { keyword: string }): VNode[],
+  'option'(props: {
+    item: SelectItem,
+    isSelected: boolean,
+  }): VNode[],
+  'loading'(): VNode[],
+}>()
 </script>
 
 <style lang="postcss">

package/dist/components/time/Time.vue

@@ -0,0 +1,257 @@
+<template>
+  <p-card
+    data-testid="time"
+    class="time"
+    element="div">
+    <div class="time__container">
+      <TimeItem
+        v-model="hour"
+        :options="hourOptions"
+        time-type="hour"
+        class="time__items--hour" />
+
+      <div class="time__separator">
+        {{ timeSeparator }}
+      </div>
+
+      <TimeItem
+        v-model="minute"
+        :options="minuteOptions"
+        time-type="minute"
+        class="time__items--minute" />
+
+      <TimeItem
+        v-if="is12Hour"
+        v-model="ampm"
+        :options="periodOptions"
+        time-type="ampm"
+        class="time__items--ampm" />
+    </div>
+    <template
+      v-if="$slots.default"
+      #footer>
+      <div class="time__action">
+        <slot :confirm="confirm" />
+      </div>
+    </template>
+  </p-card>
+</template>
+
+<script setup lang="ts">
+import pCard from '../card/Card.vue'
+import TimeItem from './TimeItem.vue'
+import type { PropType } from 'vue-demi'
+import {
+  watch,
+  computed,
+  nextTick,
+  onBeforeMount,
+  ref,
+} from 'vue-demi'
+import { watchDebounced } from '@vueuse/core'
+import { useVModel } from '../input'
+import {
+  format,
+  formatISO,
+  isDate,
+  parse,
+  startOfDay,
+} from 'date-fns'
+import type { TimeModel, TimeContext } from './index'
+import {
+  getHourUnits,
+  getMinuteUnits,
+  parseTime,
+  validateInterval,
+} from './utils'
+
+const props = defineProps({
+  modelValue: {
+    type   : [Date, Object] as PropType<Date | TimeModel>,
+    default: undefined,
+  },
+  timeSeparator: {
+    type   : String,
+    default: ':',
+  },
+  is12Hour: {
+    type   : Boolean,
+    default: false,
+  },
+  hourInterval: {
+    type     : Number,
+    default  : 1,
+    validator: (value: number, prop) => {
+      return validateInterval('hour', value, prop.is12Hour as boolean)
+    },
+  },
+  minuteInterval: {
+    type     : Number,
+    default  : 1,
+    validator: (value: number) => {
+      return validateInterval('minute', value)
+    },
+  },
+  min: {
+    type   : Date,
+    default: undefined,
+  },
+  max: {
+    type   : Date,
+    default: undefined,
+  },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [unknown],
+  'context': [TimeContext],
+  'change': [TimeContext],
+}>()
+
+const model      = useVModel(props)
+const localModel = ref<Date>(startOfDay(new Date()))
+
+const hour   = ref('00')
+const minute = ref('00')
+const ampm   = ref<'AM' | 'PM' | '-'>('AM')
+
+const timeLabel = computed(() => {
+  const time = `${hour.value}:${minute.value}`
+
+  return props.is12Hour ? `${time} ${ampm.value}` : time
+})
+
+const timeFormat = computed(() => props.is12Hour ? 'hh:mm a' : 'HH:mm')
+
+const hourOptions = computed(() => {
+  return getHourUnits(localModel.value, props.is12Hour, props.hourInterval, props.min, props.max)
+})
+
+const minuteOptions = computed(() => {
+  return getMinuteUnits(localModel.value, Number(hour.value), props.minuteInterval, props.min, props.max)
+})
+
+const periodOptions = computed(() => {
+  return ['AM', 'PM'] // TODO: should handle for period within time range
+})
+
+watchDebounced([
+  hour,
+  minute,
+  ampm,
+], () => {
+  const date = parse(timeLabel.value, timeFormat.value, localModel.value)
+
+  emit('change', getContext(date))
+}, { flush: 'post', debounce: 300 })
+
+watch(model, init)
+
+onBeforeMount(init)
+
+function init () {
+  try {
+    if (!model.value)
+      return
+
+    if (isDate(model.value)) {
+      localModel.value = new Date(model.value as Date)
+
+      const { hh, mm, a } = parseTime(localModel.value, timeFormat.value)
+
+      assignTime(hh, mm, a)
+    } else {
+      const { hh, mm, a } = (model.value as TimeModel)
+
+      assignTime(hh, mm, a)
+
+      localModel.value = parse(timeLabel.value, timeFormat.value, new Date())
+
+      !props.is12Hour && a && console.warn('Please provide is12Hour props to parse time to 12 Hour Format')
+    }
+  } catch (error) {
+    console.warn(error)
+  }
+}
+
+function confirm (): void {
+  try {
+    localModel.value = parse(timeLabel.value, timeFormat.value, localModel.value)
+
+    model.value = isDate(model.value)
+      ? new Date(localModel.value)
+      : {
+          hh: hour.value,
+          mm: minute.value,
+          a : props.is12Hour ? ampm.value : undefined,
+        }
+
+    emit('context', getContext(localModel.value))
+  } catch (error) {
+    console.warn(error)
+  }
+}
+
+async function assignTime (hh: string, mm: string, a?: 'AM' | 'PM' | '-') {
+  hour.value   = hh ?? '00'
+  minute.value = mm ?? '00'
+  ampm.value   = a ?? 'AM'
+
+  await nextTick()
+}
+
+function getContext (date: Date): TimeContext {
+  return {
+    time   : format(date, timeFormat.value),
+    date   : date,
+    dateISO: formatISO(date),
+  }
+}
+</script>
+
+<style lang="postcss">
+.time {
+  --p-card-padding-x: 2rem;
+  --p-card-padding-y: 2rem;
+
+  @apply flex flex-col shadow-xl;
+  @apply max-w-[320px] overflow-hidden;
+
+  &.card {
+    @apply border-transparent dark:border-transparent;
+  }
+
+  &__container {
+    @apply flex items-center justify-center w-full min-h-[144px] space-x-2;
+  }
+
+  &__separator {
+    @apply px-2.5 py-3;
+  }
+
+  &__action {
+    @apply grid grid-flow-col auto-cols-fr;
+
+    &--cancel,
+    &--confirm {
+      @apply mx-2;
+    }
+  }
+
+  .card__body {
+    @apply pb-6;
+  }
+
+  .card__footer {
+    @apply pt-0;
+  }
+
+  .splide__track {
+    @apply px-2;
+  }
+
+  .dropdown__subitem & {
+    @apply shadow-none;
+  }
+}
+</style>

package/dist/components/time/TimeItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    ref="container"
+    class="time__items splide"
+    :class="`time__times--${timeType}`">
+    <div class="splide__track">
+      <div class="splide__list">
+        <div
+          v-for="option in options"
+          :key="option"
+          class="time__item splide__slide">
+          {{ option }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  onMounted,
+  watch,
+  computed,
+} from 'vue-demi'
+import { watchDebounced } from '@vueuse/core'
+import type {
+  PropType,
+  Ref,
+} from 'vue-demi'
+import { useTime } from './index'
+import { useVModel } from '../input'
+import type { Options } from '@splidejs/splide'
+import '@splidejs/splide/css/core'
+
+type TimeType = 'hour' | 'minute' | 'ampm'
+
+const props = defineProps({
+  modelValue: {
+    type   : String,
+    default: '00',
+  },
+  timeType: {
+    type   : String as PropType<TimeType>,
+    default: 'hour',
+  },
+  options: {
+    type   : Array<string>,
+    default: () => [],
+  },
+})
+
+const { splide, activeSplide, initSplide } = useTime()
+
+const model     = useVModel(props)
+const container = ref<HTMLDivElement>()
+
+const timeOptions = computed(() => props.options)
+
+watch(activeSplide, (value) => {
+  model.value = props.options[value]
+})
+
+watchDebounced(timeOptions, (value) => {
+  if (!splide.value)
+    return
+
+  const splideOptions: Options = {
+    ...splide.value.options,
+    clones: value.length === 1 ? 0 : undefined,
+  }
+
+  splide.value.options = splideOptions
+  splide.value.refresh()
+
+  if (!value.includes(model.value))
+    model.value = value[0]
+}, { flush: 'post', debounce: 50 })
+
+onMounted(async () => {
+  if (container.value) {
+    const splideOptions: Options = {
+      start: timeOptions.value.indexOf(model.value),
+      type : props.timeType === 'ampm' ? 'slide' : 'loop',
+    }
+
+    await initSplide(container as Ref<HTMLDivElement>, splideOptions)
+  }
+
+  splide.value?.on('refresh', () => {
+    const index = timeOptions.value.indexOf(model.value)
+
+    splide.value?.go(index === -1 ? 0 : index)
+  })
+})
+
+</script>
+
+<style lang="postcss">
+.time {
+  &__items {
+    &:before {
+      @apply absolute content-[''] w-[42px] h-12 border-default dark:border-dark-default border-y;
+      @apply top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%];
+    }
+  }
+
+  &__item {
+    @apply text-center px-2.5 py-3 text-subtle dark:text-dark-subtle cursor-pointer;
+    @apply transition-[color] duration-[50ms];
+
+    &.is-active {
+      @apply text-default dark:text-dark-default font-medium cursor-default;
+    }
+  }
+}
+</style>

package/dist/components/time/index.d.ts

@@ -0,0 +1,19 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { Options, Splide } from '@splidejs/splide';
+export type TimeLimitation = Date | TimeModel | undefined;
+export interface TimeModel {
+    hh: string;
+    mm: string;
+    a?: 'AM' | 'PM' | '-';
+}
+export interface TimeContext {
+    time: string;
+    date: Date;
+    dateISO: string;
+}
+export declare function useTime(): {
+    splide: import("vue-demi").Ref<Splide | undefined>;
+    activeSplide: import("vue-demi").Ref<number>;
+    initSplide: (element: MaybeRef<HTMLDivElement>, options?: Options) => Promise<void>;
+    initSplideEvent: () => void;
+};

package/dist/components/time/index.mjs

@@ -0,0 +1,53 @@
+import {
+  onBeforeUnmount,
+  ref,
+  unref
+} from "vue-demi";
+import defu from "defu";
+export function useTime() {
+  const splide = ref();
+  const activeSplide = ref(1);
+  async function initSplide(element, options) {
+    const { Splide } = await import("@splidejs/splide");
+    const container = unref(element);
+    const splideOptions = defu(options, {
+      direction: "ttb",
+      height: "9rem",
+      width: "100%",
+      focus: "center",
+      perPage: 3,
+      perMove: 1,
+      arrows: false,
+      wheel: true,
+      wheelSleep: 150,
+      isNavigation: true,
+      pagination: false
+    });
+    splide.value = new Splide(container, splideOptions);
+    initSplideEvent();
+  }
+  function initSplideEvent() {
+    if (!splide.value)
+      return;
+    splide.value.on("mounted", onTimeLoad);
+    splide.value.on("move", onTimeChange);
+    splide.value.mount();
+  }
+  function onTimeLoad() {
+    if (!splide.value)
+      return;
+    activeSplide.value = splide.value.index;
+  }
+  function onTimeChange(index) {
+    activeSplide.value = index;
+  }
+  onBeforeUnmount(() => {
+    splide.value?.destroy();
+  });
+  return {
+    splide,
+    activeSplide,
+    initSplide,
+    initSplideEvent
+  };
+}

package/dist/components/time/utils/index.d.ts

@@ -0,0 +1,9 @@
+export declare function getHourUnits(model: Date, is12Hour: boolean, step?: number, min?: Date, max?: Date): string[];
+export declare function getMinuteUnits(model: Date, currentHour: number, step?: number, min?: Date, max?: Date): string[];
+export declare function getFormat(is12Hour: boolean): "hh:mm a" | "HH:mm";
+export declare function parseTime(date: Date, timeFormat: string): {
+    hh: string;
+    mm: string;
+    a: "AM" | "PM";
+};
+export declare function validateInterval(type: 'hour' | 'minute', value: number, is12Hour?: boolean): boolean;

package/dist/components/time/utils/index.mjs

@@ -0,0 +1,82 @@
+import {
+  set,
+  eachHourOfInterval,
+  eachMinuteOfInterval,
+  endOfDay,
+  format,
+  isBefore,
+  min as minDate,
+  max as maxDate,
+  startOfDay,
+  isSameHour,
+  endOfHour,
+  startOfHour
+} from "date-fns";
+import { uniq } from "lodash-es";
+export function getHourUnits(model, is12Hour, step = 1, min, max) {
+  if (isBefore(max, min)) {
+    console.warn("`max` value should greater than `min` value and vice versa");
+    return [];
+  }
+  let start = startOfDay(/* @__PURE__ */ new Date());
+  let end = endOfDay(/* @__PURE__ */ new Date());
+  if (min)
+    start = maxDate([model, min]);
+  if (max)
+    end = minDate([endOfDay(start), max]);
+  const hourUnits = eachHourOfInterval({
+    start,
+    end
+  }, { step });
+  const units = hourUnits.map((date) => {
+    if (is12Hour)
+      return format(date, "hh");
+    return format(date, "HH");
+  });
+  return uniq(units);
+}
+export function getMinuteUnits(model, currentHour, step = 1, min, max) {
+  if (isBefore(max, min)) {
+    console.warn("`max` value should greater than `min` value and vice versa");
+    return [];
+  }
+  let start = startOfDay(/* @__PURE__ */ new Date());
+  let end = endOfDay(/* @__PURE__ */ new Date());
+  if (min)
+    start = maxDate([model, min]);
+  if (max)
+    end = minDate([endOfDay(start), max]);
+  const currentTime = set(start, { hours: currentHour });
+  const minuteUnits = eachMinuteOfInterval({
+    start: isSameHour(currentTime, start) ? currentTime : startOfHour(currentTime),
+    end: isSameHour(currentTime, end) ? end : endOfHour(currentTime)
+  }, { step });
+  const units = minuteUnits.map((date) => {
+    return format(date, "mm");
+  });
+  return uniq(units);
+}
+export function getFormat(is12Hour) {
+  return is12Hour ? "hh:mm a" : "HH:mm";
+}
+export function parseTime(date, timeFormat) {
+  const [hh, mm] = format(date, timeFormat).split(":");
+  const a = format(date, "a");
+  return {
+    hh,
+    mm: mm.slice(0, 2),
+    a
+  };
+}
+export function validateInterval(type, value, is12Hour = false) {
+  let min = 0;
+  let max = 0;
+  if (type === "hour") {
+    min = 1;
+    max = is12Hour ? 12 : 24;
+  } else if (type === "minute") {
+    min = 1;
+    max = 60;
+  }
+  return value >= min && value < max;
+}

package/dist/components/timepicker/Timepicker.vue

@@ -0,0 +1,230 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    class="timepicker"
+    data-testid="timepicker"
+    aria-label="timepicker"
+    :class="classNames"
+    :disabled="disabled">
+    <template #activator>
+      <Input
+        :value="value"
+        :model-value="value"
+        data-testid="timepicker-input"
+        class="timepicker__input"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :error="error"
+        :size="size"
+        readonly
+        @focus="onFocus">
+        <template #append>
+          <IconTime
+            class="timepicker__icon" />
+        </template>
+      </Input>
+    </template>
+
+    <Time
+      v-if="isOpen"
+      v-slot="{ confirm }"
+      v-model="model"
+      :time-separator="timeSeparator"
+      :is12-hour="is12Hour"
+      :hour-interval="hourInterval"
+      :minute-interval="minuteInterval"
+      :min="min"
+      :max="max"
+      @context="onTimeContext"
+      @change="(context) => emit('change', context)">
+      <slot
+        name="footer"
+        :confirm="confirm"
+        :close="onClose">
+        <Button
+          v-if="dismissable"
+          variant="ghost"
+          class="time__action--cancel"
+          @click="onClose">
+          {{ dimissLabel }}
+        </Button>
+        <Button
+          variant="solid"
+          color="info"
+          @click="confirm">
+          {{ confirmLabel }}
+        </Button>
+      </slot>
+    </Time>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import Dropdown from '../dropdown/Dropdown.vue'
+import Input from '../input/Input.vue'
+import Button from '../button/Button.vue'
+import IconTime from '@privyid/persona-icon/vue/time/16.vue'
+import Time from '../time/Time.vue'
+import type { SizeVariant } from '../button'
+import { useVModel } from '../input'
+import type { TimeContext, TimeModel } from '../time'
+import { validateInterval } from '../time/utils'
+import type { PropType, VNode } from 'vue-demi'
+import {
+  ref, computed, onMounted,
+} from 'vue-demi'
+import { format, isDate } from 'date-fns'
+
+const props = defineProps({
+  modelValue: {
+    type   : [Date, Object] as PropType<Date | TimeModel>,
+    default: undefined,
+  },
+  size: {
+    type   : String as PropType<SizeVariant>,
+    default: 'md',
+  },
+  placeholder: {
+    type   : String,
+    default: '',
+  },
+  disabled: {
+    type   : Boolean,
+    default: undefined,
+  },
+  readonly: {
+    type   : Boolean,
+    default: undefined,
+  },
+  error: {
+    type   : Boolean,
+    default: undefined,
+  },
+  dismissable: {
+    type   : Boolean,
+    default: false,
+  },
+  dimissLabel: {
+    type   : String,
+    default: 'Cancel',
+  },
+  confirmLabel: {
+    type   : String,
+    default: 'Set',
+  },
+  timeSeparator: {
+    type   : String,
+    default: ':',
+  },
+  is12Hour: {
+    type   : Boolean,
+    default: false,
+  },
+  hourInterval: {
+    type     : Number,
+    default  : 1,
+    validator: (value: number, prop) => {
+      return validateInterval('hour', value, prop.is12Hour as boolean)
+    },
+  },
+  minuteInterval: {
+    type     : Number,
+    default  : 1,
+    validator: (value: number) => {
+      return validateInterval('minute', value)
+    },
+  },
+  min: {
+    type   : Date,
+    default: undefined,
+  },
+  max: {
+    type   : Date,
+    default: undefined,
+  },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [unknown],
+  'context': [TimeContext],
+  'change': [TimeContext],
+}>()
+
+const model  = useVModel(props)
+const isOpen = ref(false)
+const value  = ref('')
+
+const classNames = computed(() => {
+  const result: string[] = []
+
+  if (isOpen.value)
+    result.push('timepicker--open')
+
+  if (props.disabled)
+    result.push('timepicker--disabled')
+
+  if (props.readonly)
+    result.push('timepicker--readonly')
+
+  if (props.error)
+    result.push('timepicker--error', 'state--error')
+
+  return result
+})
+
+onMounted(() => {
+  if (!model.value)
+    return
+
+  if (isDate(model.value))
+    value.value = format(model.value as Date, props.is12Hour ? 'hh:mm a' : 'HH:mm')
+  else {
+    const { hh, mm, a } = model.value as TimeModel
+    const time          = `${hh}:${mm}`
+
+    value.value = props.is12Hour ? `${time} ${a || ''}` : time
+  }
+})
+
+function onFocus () {
+  if (!props.disabled && !props.readonly)
+    isOpen.value = true
+}
+
+function onTimeContext (context: TimeContext) {
+  onClose()
+
+  value.value = context.time
+  emit('context', context)
+}
+
+function onClose () {
+  isOpen.value = false
+}
+
+defineSlots<{
+  'footer'(props: {
+    confirm: () => void,
+    close: () => void,
+  }): VNode[], }>()
+</script>
+
+<style lang="postcss">
+.timepicker {
+  &__input {
+    @apply pr-8 truncate;
+  }
+
+  &__icon {
+    @apply transition-transform duration-150 text-muted pointer-events-none;
+    @apply dark:text-dark-muted;
+  }
+
+  > .dropdown__menu {
+    --p-dropdown-size: auto;
+    --p-dropdown-max-height: 100%;
+
+    @apply min-w-max max-h-min;
+  }
+}
+</style>

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "1.0.0-rc.1"
+  "version": "1.0.0-rc.2"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/persona",
   "description": "Persona core package",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/privy-open-source/design-system.git",
@@ -28,7 +28,7 @@
       "import": "./dist/directive/index.mjs",
       "types": "./dist/directive/index.d.ts"
     },
-    "./components/": "./dist/components/"
+    "./components/*": "./dist/components/*"
   },
   "typesVersions": {
     "*": {
@@ -58,15 +58,15 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.6.1",
+    "@floating-ui/dom": "1.6.3",
     "@jill64/universal-sanitizer": "^1.0.2",
     "@juggle/resize-observer": "3.4.0",
-    "@nuxt/kit": "3.9.3",
+    "@nuxt/kit": "3.10.2",
     "@splidejs/splide": "4.1.4",
     "@testing-library/dom": "9.3.4",
     "@testing-library/user-event": "14.5.2",
     "@vueuse/core": "10.7.2",
-    "@vueuse/math": "10.7.2",
+    "@vueuse/math": "10.8.0",
     "@zxing/browser": "0.1.4",
     "@zxing/library": "0.20.0",
     "chart.js": "4.4.1",
@@ -83,7 +83,7 @@
     "scroll-into-view": "1.16.2",
     "tabbable": "6.2.0",
     "vue-collapsed": "1.3.0",
-    "vue-demi": "0.14.6",
+    "vue-demi": "0.14.7",
     "vuedraggable": "next",
     "webfontloader": "1.6.28",
     "zxcvbn": "4.4.2"
@@ -92,8 +92,8 @@
     "extends @privyid/browserslist-config"
   ],
   "peerDependencies": {
-    "@privyid/browserslist-config": "^1.0.0-rc.1",
-    "@privyid/tailwind-preset": "^1.0.0-rc.1",
+    "@privyid/browserslist-config": "^1.0.0-rc.2",
+    "@privyid/tailwind-preset": "^1.0.0-rc.2",
     "postcss-custom-properties": "^12.1.11 || ^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",
@@ -102,13 +102,13 @@
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.0",
-    "@nuxt/schema": "3.9.3",
+    "@nuxt/schema": "3.10.2",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@privyid/browserslist-config": "^1.0.0-rc.1",
-    "@privyid/tailwind-preset": "^1.0.0-rc.1",
+    "@privyid/browserslist-config": "^1.0.0-rc.2",
+    "@privyid/tailwind-preset": "^1.0.0-rc.2",
     "@types/sanitize-html": "^2",
     "browserslist-to-esbuild": "^2.0.0",
-    "nuxt": "3.9.3",
+    "nuxt": "3.10.2",
     "postcss-custom-properties": "^13.0.0",
     "postcss-hexrgba": "^2.1.0",
     "postcss-lighten-darken": "^0.9.0",