@geniusdynamics/ns8-ui-lib 1.0.3 → 1.0.5

package/src/components/ui/pin-input/PinInputSlot.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { PinInputInput, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput
+    data-slot="pin-input-slot"
+    v-bind="forwardedProps"
+    :class="cn('tw:border-input tw:focus:border-ring tw:focus:ring-ring/50 tw:focus:aria-invalid:ring-destructive/20 tw:dark:bg-input/30 tw:dark:focus:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:focus:aria-invalid:border-destructive tw:relative tw:flex tw:h-9 tw:w-9 tw:items-center tw:justify-center tw:border-y tw:border-r tw:text-sm tw:shadow-xs tw:transition-all tw:outline-none tw:text-center tw:first:rounded-l-md tw:first:border-l tw:last:rounded-r-md tw:focus:z-10 tw:focus:ring-[3px]', props.class)"
+  />
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot
+    v-slot="slotProps"
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </PopoverRoot>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from "reka-ui"
+import { PopoverAnchor } from "reka-ui"
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor
+    data-slot="popover-anchor"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverAnchor>
+</template>

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:w-72 tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:origin-(--reka-popover-content-transform-origin) tw:outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/ui/progress/Progress.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { ProgressRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  ProgressIndicator,
-  ProgressRoot,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
+import type { ProgressRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ProgressIndicator, ProgressRoot } from "reka-ui";
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
   {
     modelValue: 0,
   },
-)
+);
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
@@ -24,14 +21,14 @@ const delegatedProps = reactiveOmit(props, "class")
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        'tw:bg-primary/20 tw:relative tw:h-2 tw:w-full tw:overflow-hidden tw:rounded-full',
         props.class,
       )
     "
   >
     <ProgressIndicator
       data-slot="progress-indicator"
-      class="bg-primary h-full w-full flex-1 transition-all"
+      class="tw:bg-primary tw:h-full tw:w-full tw:flex-1 tw:transition-all"
       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
     />
   </ProgressRoot>

package/src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-slot="slotProps"
+    data-slot="radio-group"
+    :class="cn('tw:grid tw:gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { CircleIcon } from "lucide-vue-next";
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  RadioGroupItemProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'tw:border-input tw:text-primary tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:aria-invalid:ring-destructive/20 tw:dark:aria-invalid:ring-destructive/40 tw:aria-invalid:border-destructive tw:dark:bg-input/30 tw:aspect-square tw:size-4 tw:shrink-0 tw:rounded-full tw:border tw:shadow-xs tw:transition-[color,box-shadow] tw:outline-none tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="tw:relative tw:flex tw:items-center tw:justify-center"
+    >
+      <slot>
+        <CircleIcon
+          class="tw:fill-primary tw:absolute tw:top-1/2 tw:left-1/2 tw:size-2 tw:-translate-x-1/2 tw:-translate-y-1/2"
+        />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/components/ui/range-calendar/RangeCalendar.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from "."
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    data-slot="range-calendar"
+    :class="cn('tw:p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class=""tw:flex tw:items-center tw:gap-1"">
+        <RangeCalendarPrevButton />
+        <RangeCalendarNextButton />
+      </div>
+    </RangeCalendarHeader>
+
+    <div class=""tw:flex tw:flex-col tw:gap-y-4 tw:mt-4 tw:sm:flex-row tw:sm:gap-x-4 tw:sm:gap-y-0"">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class=""tw:mt-2 tw:w-full"">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>

package/src/components/ui/range-calendar/RangeCalendarCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    data-slot="range-calendar-cell"
+    :class="cn('tw:relative tw:p-0 tw:text-center tw:text-sm tw:focus-within:relative tw:focus-within:z-20 tw:[&:has([data-selected])]:bg-accent tw:first:[&:has([data-selected])]:rounded-l-md tw:last:[&:has([data-selected])]:rounded-r-md tw:[&:has([data-selected][data-selection-end])]:rounded-r-md tw:[&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>

package/src/components/ui/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarCellTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "button",
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    data-slot="range-calendar-trigger"
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'tw:h-8 tw:w-8 tw:p-0 tw:font-normal tw:data-[selected]:opacity-100',
+      'tw:[&[data-today]:not([data-selected])]:bg-accent tw:[&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'tw:data-[selection-start]:bg-primary tw:data-[selection-start]:text-primary-foreground tw:data-[selection-start]:hover:bg-primary tw:data-[selection-start]:hover:text-primary-foreground tw:data-[selection-start]:focus:bg-primary tw:data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'tw:data-[selection-end]:bg-primary tw:data-[selection-end]:text-primary-foreground tw:data-[selection-end]:hover:bg-primary tw:data-[selection-end]:hover:text-primary-foreground tw:data-[selection-end]:focus:bg-primary tw:data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'tw:data-[outside-view]:text-muted-foreground',
+      // Disabled
+      'tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-50',
+      // Unavailable
+      'tw:data-[unavailable]:text-destructive-foreground tw:data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>

package/src/components/ui/range-calendar/RangeCalendarGrid.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGrid, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    data-slot="range-calendar-grid"
+    :class="cn('tw:w-full tw:border-collapse tw:space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>

package/src/components/ui/range-calendar/RangeCalendarGridBody.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from "reka-ui"
+import { RangeCalendarGridBody } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody
+    data-slot="range-calendar-grid-body"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridBody>
+</template>

package/src/components/ui/range-calendar/RangeCalendarGridHead.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from "reka-ui"
+import { RangeCalendarGridHead } from "reka-ui"
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead
+    data-slot="range-calendar-grid-head"
+    v-bind="props"
+  >
+    <slot />
+  </RangeCalendarGridHead>
+</template>

package/src/components/ui/range-calendar/RangeCalendarGridRow.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarGridRow, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow
+    data-slot="range-calendar-grid-row"
+    :class="cn('tw:flex', props.class)" v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGridRow>
+</template>

package/src/components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeadCell, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell
+    data-slot="range-calendar-head-cell"
+    :class="cn('tw:w-8 tw:rounded-md tw:text-[0.8rem] tw:font-normal tw:text-muted-foreground', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeadCell>
+</template>

package/src/components/ui/range-calendar/RangeCalendarHeader.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeader, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader
+    data-slot="range-calendar-header"
+    :class="cn('tw:flex tw:justify-center tw:pt-1 tw:relative tw:items-center tw:w-full', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeader>
+</template>

package/src/components/ui/range-calendar/RangeCalendarHeading.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RangeCalendarHeading, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+
+defineSlots<{
+  default: (props: { headingValue: string }) => any
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    data-slot="range-calendar-heading"
+    :class="cn('tw:text-sm tw:font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>

package/src/components/ui/range-calendar/RangeCalendarNextButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { RangeCalendarNext, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    data-slot="range-calendar-next-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'tw:absolute tw:right-1',
+      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class=""tw:size-4"" />
+    </slot>
+  </RangeCalendarNext>
+</template>

package/src/components/ui/range-calendar/RangeCalendarPrevButton.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronLeft } from "lucide-vue-next"
+import { RangeCalendarPrev, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    data-slot="range-calendar-prev-button"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'tw:absolute tw:left-1',
+      'tw:size-7 tw:bg-transparent tw:p-0 tw:opacity-50 tw:hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class=""tw:size-4"" />
+    </slot>
+  </RangeCalendarPrev>
+</template>

package/src/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { GripVertical } from "lucide-vue-next"
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "withHandle")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="cn('tw:bg-border tw:focus-visible:ring-ring tw:relative tw:flex tw:w-px tw:items-center tw:justify-center tw:after:absolute tw:after:inset-y-0 tw:after:left-1/2 tw:after:w-1 tw:after:-translate-x-1/2 tw:focus-visible:ring-1 tw:focus-visible:ring-offset-1 tw:focus-visible:outline-hidden tw:data-[orientation=vertical]:h-px tw:data-[orientation=vertical]:w-full tw:data-[orientation=vertical]:after:left-0 tw:data-[orientation=vertical]:after:h-1 tw:data-[orientation=vertical]:after:w-full tw:data-[orientation=vertical]:after:-translate-y-1/2 tw:data-[orientation=vertical]:after:translate-x-0 tw:[&[data-orientation=vertical]>div]:rotate-90', props.class)"
+  >
+    <template v-if="props.withHandle">
+      <div class=""tw:bg-border tw:z-10 tw:flex tw:h-4 tw:w-3 tw:items-center tw:justify-center tw:rounded-xs tw:border"">
+        <slot>
+          <GripVertical class=""tw:size-2.5"" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

package/src/components/ui/resizable/ResizablePanel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SplitterPanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const { forwardRef } = useForwardExpose()
+</script>
+
+<template>
+  <SplitterPanel
+    :ref="forwardRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>