@oneclick.dev/cms-kit 0.0.2 → 0.0.4

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

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarCell, type RangeCalendarCellProps, 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
-    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-view])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </RangeCalendarCell>
-</template>

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

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

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

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarGrid, type RangeCalendarGridProps, 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
-    :class="cn('w-full border-collapse space-y-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </RangeCalendarGrid>
-</template>

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

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

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

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

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

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarGridRow, type RangeCalendarGridRowProps, 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 :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
-    <slot />
-  </RangeCalendarGridRow>
-</template>

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

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, 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 :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
-    <slot />
-  </RangeCalendarHeadCell>
-</template>

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

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarHeader, type RangeCalendarHeaderProps, 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 :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
-    <slot />
-  </RangeCalendarHeader>
-</template>

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

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, 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 }"
-    :class="cn('text-sm font-medium', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot :heading-value>
-      {{ headingValue }}
-    </slot>
-  </RangeCalendarHeading>
-</template>

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

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { ChevronRight } from 'lucide-vue-next'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { buttonVariants } from '../button'
-
-const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <RangeCalendarNext
-    :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="size-4" />
-    </slot>
-  </RangeCalendarNext>
-</template>

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

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { ChevronLeft } from 'lucide-vue-next'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { buttonVariants } from '../button'
-
-const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <RangeCalendarPrev
-    :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="size-4" />
-    </slot>
-  </RangeCalendarPrev>
-</template>

package/components/ui/range-calendar/index.ts

@@ -1,12 +0,0 @@
-export { default as RangeCalendar } from './RangeCalendar.vue'
-export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
-export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
-export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
-export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
-export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
-export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
-export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
-export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
-export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
-export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
-export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'

package/components/ui/resizable/ResizableHandle.vue

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

package/components/ui/resizable/ResizablePanel.vue

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

package/components/ui/resizable/ResizablePanelGroup.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<SplitterGroupEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SplitterGroup
-    data-slot="resizable-panel-group"
-    v-bind="forwarded"
-    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
-  >
-    <slot />
-  </SplitterGroup>
-</template>

package/components/ui/resizable/index.ts

@@ -1,3 +0,0 @@
-export { default as ResizableHandle } from './ResizableHandle.vue'
-export { default as ResizablePanel } from './ResizablePanel.vue'
-export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'

package/components/ui/ripple-button/RippleButton.vue

@@ -1,97 +0,0 @@
-<template>
-  <button
-    ref="rippleButtonRef"
-    :class="
-      cn(
-        'relative overflow-hidden inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2',
-        $props.class,
-      )
-    "
-    :style="{ '--duration': $props.duration + 'ms' }"
-    @click="handleClick"
-  >
-    <div class="relative z-10 flex items-center gap-2">
-      <slot />
-    </div>
-    <span class="pointer-events-none absolute inset-0">
-      <span
-        v-for="ripple in buttonRipples"
-        :key="ripple.key"
-        class="ripple-animation absolute rounded-full bg-background opacity-30"
-        :style="{
-          width: ripple.size + 'px',
-          height: ripple.size + 'px',
-          top: ripple.y + 'px',
-          left: ripple.x + 'px',
-          backgroundColor: $props.rippleColor,
-          transform: 'scale(0)',
-          animationDuration: $props.duration + 'ms',
-        }"
-      />
-    </span>
-  </button>
-</template>
-
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue";
-import { cn } from "~/lib/utils";
-
-interface RippleButtonProps {
-  class?: HTMLAttributes["class"];
-  rippleColor?: string;
-  duration?: number;
-}
-
-const props = withDefaults(defineProps<RippleButtonProps>(), {
-  rippleColor: "#484848",
-  duration: 600,
-});
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const rippleButtonRef = ref<HTMLButtonElement | null>(null);
-const buttonRipples = ref<Array<{ x: number; y: number; size: number; key: number }>>([]);
-
-function handleClick(event: MouseEvent) {
-  createRipple(event);
-  emit("click", event);
-}
-
-function createRipple(event: MouseEvent) {
-  const button = rippleButtonRef.value;
-  if (!button) return;
-  const rect = button.getBoundingClientRect();
-  const size = Math.max(rect.width, rect.height);
-  const x = event.clientX - rect.left - size / 2;
-  const y = event.clientY - rect.top - size / 2;
-  const newRipple = { x, y, size, key: Date.now() };
-  buttonRipples.value.push(newRipple);
-}
-
-watchEffect(() => {
-  if (buttonRipples.value.length > 0) {
-    const lastRipple = buttonRipples.value[buttonRipples.value.length - 1];
-    setTimeout(() => {
-      buttonRipples.value = buttonRipples.value.filter((ripple) => ripple.key !== lastRipple.key);
-    }, props.duration);
-  }
-});
-</script>
-
-<style scoped>
-@keyframes rippling {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.ripple-animation {
-  animation: rippling var(--duration) ease-out;
-}
-</style>

package/components/ui/ripple-button/index.ts

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

package/components/ui/sandbox/Sandbox.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Variable {
-  name: string
-  type: string
-  value: any
-}
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    required: true
-  },
-  variables: {
-    type: Array as () => Variable[],
-    default: () => []
-  },
-  placeholder: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const code = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-</script>
-
-<template>
-  <CodeEditor v-model="code" :variables="variables" language="" :placeholder="placeholder" />
-</template>

package/components/ui/sandbox/index.ts

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

package/components/ui/scroll-area/ScrollArea.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  type ScrollAreaRootProps,
-  ScrollAreaViewport,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import ScrollBar from './ScrollBar.vue'
-
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaRoot
-    data-slot="scroll-area"
-    v-bind="delegatedProps"
-    :class="cn('relative', props.class)"
-  >
-    <ScrollAreaViewport
-      data-slot="scroll-area-viewport"
-      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-    >
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
-</template>

package/components/ui/scroll-area/ScrollBar.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
-  orientation: 'vertical',
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaScrollbar
-    data-slot="scroll-area-scrollbar"
-    v-bind="delegatedProps"
-    :class="
-      cn('flex touch-none p-px transition-colors select-none',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent',
-         props.class)"
-  >
-    <ScrollAreaThumb
-      data-slot="scroll-area-thumb"
-      class="bg-border relative flex-1 rounded-full"
-    />
-  </ScrollAreaScrollbar>
-</template>

package/components/ui/scroll-area/index.ts

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