@oneclick.dev/cms-kit 0.0.2 → 0.0.4

package/components/ui/button/Button.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes, ButtonHTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type ButtonVariants, buttonVariants } from '.'
-import { Loader } from 'lucide-vue-next'
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
-  disabled?: boolean
-  loading?: boolean
-  loadingText?: string
-  type?: ButtonHTMLAttributes['type']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-  type: 'button',
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="button"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-    :disabled="disabled || loading"
-    :type="type"
-  >
-    <slot v-if="!loading" />
-    <div v-else class="inline-flex items-center gap-2">
-      <Loader class="size-4 animate-spin" />
-      <span>{{ loadingText }}</span>
-    </div>
-  </Primitive>
-</template>

package/components/ui/button/index.ts

@@ -1,36 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>

package/components/ui/calendar/Calendar.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '../../../lib/utils'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
-
-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>
-
-<template>
-  <CalendarRoot
-    v-slot="{ grid, weekDays }"
-    data-slot="calendar"
-    :class="cn('p-3', props.class)"
-    v-bind="forwarded"
-  >
-    <CalendarHeader>
-      <CalendarHeading />
-
-      <div class="flex items-center gap-1">
-        <CalendarPrevButton />
-        <CalendarNextButton />
-      </div>
-    </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>

package/components/ui/calendar/CalendarCell.vue

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

package/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,41 +0,0 @@
-<script lang="ts" setup>
-import { cn } from '../../../lib/utils'
-import { buttonVariants } from '../button'
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
-  as: 'button',
-})
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarCellTrigger
-    data-slot="calendar-cell-trigger"
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-      '[&[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-view]:text-muted-foreground',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCellTrigger>
-</template>

package/components/ui/calendar/CalendarGrid.vue

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

package/components/ui/calendar/CalendarGridBody.vue

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

package/components/ui/calendar/CalendarGridHead.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
-import { CalendarGridHead, type CalendarGridHeadProps } from 'reka-ui'
-
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <CalendarGridHead
-    data-slot="calendar-grid-head"
-    v-bind="props"
-  >
-    <slot />
-  </CalendarGridHead>
-</template>

package/components/ui/calendar/CalendarGridRow.vue

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

package/components/ui/calendar/CalendarHeadCell.vue

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

package/components/ui/calendar/CalendarHeader.vue

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

package/components/ui/calendar/CalendarHeading.vue

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

package/components/ui/calendar/CalendarNextButton.vue

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

package/components/ui/calendar/CalendarPrevButton.vue

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

package/components/ui/calendar/index.ts

@@ -1,12 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as CalendarCell } from './CalendarCell.vue'
-export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
-export { default as CalendarGrid } from './CalendarGrid.vue'
-export { default as CalendarGridBody } from './CalendarGridBody.vue'
-export { default as CalendarGridHead } from './CalendarGridHead.vue'
-export { default as CalendarGridRow } from './CalendarGridRow.vue'
-export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
-export { default as CalendarHeader } from './CalendarHeader.vue'
-export { default as CalendarHeading } from './CalendarHeading.vue'
-export { default as CalendarNextButton } from './CalendarNextButton.vue'
-export { default as CalendarPrevButton } from './CalendarPrevButton.vue'

package/components/ui/card/Card.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card"
-    :class="
-      cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-input dark:border-border py-6 shadow-card',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardAction.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-action"
-    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardContent.vue

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

package/components/ui/card/CardDescription.vue

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

package/components/ui/card/CardFooter.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-footer"
-    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardHeader.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="card-header"
-    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardTitle.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-semibold', props.class)"
-  >
-    <slot />
-  </h3>
-</template>

package/components/ui/card/index.ts

@@ -1,7 +0,0 @@
-export { default as Card } from './Card.vue'
-export { default as CardAction } from './CardAction.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'

package/components/ui/checkbox/Checkbox.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-import { Check } from 'lucide-vue-next'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<CheckboxRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CheckboxRoot
-    data-slot="checkbox"
-    v-bind="forwarded"
-    :class="
-      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-         props.class)"
-  >
-    <CheckboxIndicator
-      data-slot="checkbox-indicator"
-      class="flex items-center justify-center text-current transition-none"
-    >
-      <slot>
-        <Check class="size-3.5" />
-      </slot>
-    </CheckboxIndicator>
-  </CheckboxRoot>
-</template>

package/components/ui/checkbox/index.ts

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