@oneclick.dev/cms-kit 0.0.2 → 0.0.4

package/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <li
-    data-slot="sidebar-menu-sub-item"
-    data-sidebar="menu-sub-item"
-    :class="cn('group/menu-sub-item relative', props.class)"
-  >
-    <slot />
-  </li>
-</template>

package/components/ui/sidebar/SidebarProvider.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
-import { TooltipProvider } from 'reka-ui'
-import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
-
-const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  defaultOpen: true,
-  open: undefined,
-})
-
-const emits = defineEmits<{
-  'update:open': [open: boolean]
-}>()
-
-const isMobile = useMediaQuery('(max-width: 768px)')
-const openMobile = ref(false)
-
-const open = useVModel(props, 'open', emits, {
-  defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
-
-function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
-
-  // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-}
-
-function setOpenMobile(value: boolean) {
-  openMobile.value = value
-}
-
-// Helper to toggle the sidebar.
-function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
-}
-
-useEventListener('keydown', (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
-  }
-})
-
-// We add a state so that we can do data-state="expanded" or "collapsed".
-// This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? 'expanded' : 'collapsed')
-
-provideSidebarContext({
-  state,
-  open,
-  setOpen,
-  isMobile,
-  openMobile,
-  setOpenMobile,
-  toggleSidebar,
-})
-</script>
-
-<template>
-  <TooltipProvider :delay-duration="0">
-    <div
-      data-slot="sidebar-wrapper"
-      :style="{
-        '--sidebar-width': SIDEBAR_WIDTH,
-        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-      }"
-      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </TooltipProvider>
-</template>

package/components/ui/sidebar/SidebarRail.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { useSidebar } from './utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { toggleSidebar } = useSidebar()
-</script>
-
-<template>
-  <button
-    data-sidebar="rail"
-    data-slot="sidebar-rail"
-    aria-label="Toggle Sidebar"
-    :tabindex="-1"
-    title="Toggle Sidebar"
-    :class="cn(
-      'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-      'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      props.class,
-    )"
-    @click="toggleSidebar"
-  >
-    <slot />
-  </button>
-</template>

package/components/ui/sidebar/SidebarSeparator.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Separator } from '../separator'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <Separator
-    data-slot="sidebar-separator"
-    data-sidebar="separator"
-    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
-  >
-    <slot />
-  </Separator>
-</template>

package/components/ui/sidebar/SidebarTrigger.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Button } from '../button'
-import { PanelLeft } from 'lucide-vue-next'
-import { useSidebar } from './utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const { toggleSidebar } = useSidebar()
-</script>
-
-<template>
-  <Button
-    data-sidebar="trigger"
-    data-slot="sidebar-trigger"
-    variant="ghost"
-    size="icon"
-    :class="cn('h-7 w-7', props.class)"
-    @click="toggleSidebar"
-  >
-    <PanelLeft />
-    <span class="sr-only">Toggle Sidebar</span>
-  </Button>
-</template>

package/components/ui/sidebar/index.ts

@@ -1,60 +0,0 @@
-import type { VariantProps } from 'class-variance-authority'
-import type { HTMLAttributes } from 'vue'
-import { cva } from 'class-variance-authority'
-
-export interface SidebarProps {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
-}
-
-export { default as Sidebar } from './Sidebar.vue'
-export { default as SidebarContent } from './SidebarContent.vue'
-export { default as SidebarFooter } from './SidebarFooter.vue'
-export { default as SidebarGroup } from './SidebarGroup.vue'
-export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
-export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
-export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
-export { default as SidebarHeader } from './SidebarHeader.vue'
-export { default as SidebarInput } from './SidebarInput.vue'
-export { default as SidebarInset } from './SidebarInset.vue'
-export { default as SidebarMenu } from './SidebarMenu.vue'
-export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
-export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
-export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
-export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
-export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
-export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
-export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
-export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
-export { default as SidebarProvider } from './SidebarProvider.vue'
-export { default as SidebarRail } from './SidebarRail.vue'
-export { default as SidebarSeparator } from './SidebarSeparator.vue'
-export { default as SidebarTrigger } from './SidebarTrigger.vue'
-
-export { useSidebar } from './utils'
-
-export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-      },
-      size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

package/components/ui/sidebar/utils.ts

@@ -1,19 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import { createContext } from 'reka-ui'
-
-export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
-export const SIDEBAR_WIDTH_MOBILE = '18rem'
-export const SIDEBAR_WIDTH_ICON = '3rem'
-export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
-
-export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<'expanded' | 'collapsed'>
-  open: Ref<boolean>
-  setOpen: (value: boolean) => void
-  isMobile: Ref<boolean>
-  openMobile: Ref<boolean>
-  setOpenMobile: (value: boolean) => void
-  toggleSidebar: () => void
-}>('Sidebar')

package/components/ui/skeleton/Skeleton.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-interface SkeletonProps {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<SkeletonProps>()
-</script>
-
-<template>
-  <div
-    data-slot="skeleton"
-    :class="cn('animate-pulse rounded-md bg-primary/10', props.class)"
-  />
-</template>

package/components/ui/skeleton/index.ts

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

package/components/ui/sonner/Sonner.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
-
-const props = defineProps<ToasterProps>()
-</script>
-
-<template>
-  <Sonner
-    class="toaster group"
-    v-bind="props"
-    :style="{
-      '--normal-bg': 'var(--popover)',
-      '--normal-text': 'var(--popover-foreground)',
-      '--normal-border': 'var(--border)',
-
-    }"
-  />
-</template>

package/components/ui/sonner/index.ts

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

package/components/ui/spring-calendar/SpringCalendar.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { Motion, MotionConfig } from "motion-v";
-
-interface CalendarEvent {
-  title: string;
-  day: string;
-  time: string;
-}
-
-interface CalendarDay {
-  month: string;
-  date: number;
-  day: string;
-  events?: CalendarEvent[];
-}
-
-const props = defineProps<{
-  calendarData: CalendarDay[];
-  initialIndex?: number;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:activeIndex", value: number): void;
-}>();
-
-const activeIndex = ref(props.initialIndex ?? 0);
-
-function setActive(index: number) {
-  activeIndex.value = index;
-  emit("update:activeIndex", index);
-}
-</script>
-
-<template>
-  <MotionConfig :transition="{ duration: 0.7, type: 'spring', bounce: 0.5 }">
-    <Motion
-      layout
-      as="div"
-      class="flex w-full flex-col gap-6 overflow-hidden rounded-3xl border bg-muted/50 p-8"
-      :animate="{
-        height: calendarData[activeIndex].events ? 'auto' : 'fit',
-      }"
-    >
-      <TextMorph
-        :text="calendarData[activeIndex].day"
-        class="w-fit font-bold"
-        :morph-time="0.5"
-        :cool-down-time="0.1"
-      />
-
-      <Motion
-        v-if="calendarData[activeIndex].events"
-        :key="'event-container' + Math.random()"
-        layout
-        as="div"
-        class="flex flex-col gap-4"
-        :initial="{ x: 10, opacity: 0 }"
-        :animate="{ x: 0, opacity: 1 }"
-      >
-        <Motion
-          as="div"
-          class="flex items-center gap-2"
-          layout
-          :initial="{ x: 10, opacity: 0 }"
-          :animate="{ x: 0, opacity: 1 }"
-        >
-          <Icon name="lucide:calendar" />
-          <span class="font-medium">Upcoming Events</span>
-        </Motion>
-
-        <div class="flex flex-wrap gap-4">
-          <Motion
-            v-for="event in calendarData[activeIndex].events"
-            :key="event.title + event.time + Math.random()"
-            as="div"
-            layout
-            class="w-full max-w-44 rounded-lg border p-3"
-            :initial="{ x: 10, opacity: 0 }"
-            :animate="{ x: 0, opacity: 1 }"
-          >
-            <p class="text-sm font-medium">{{ event.title }}</p>
-            <p class="text-xs text-muted-foreground">{{ event.day }}, {{ event.time }}</p>
-          </Motion>
-        </div>
-      </Motion>
-
-      <div class="flex flex-wrap gap-3">
-        <Motion
-          v-for="(day, index) in calendarData"
-          :key="day.date + '-' + index"
-          as="button"
-          layout
-          class="flex flex-col rounded-2xl border border-border p-3 text-center opacity-100 duration-200 hover:bg-muted-foreground/10"
-          :class="activeIndex === index ? 'bg-muted-foreground/5' : ''"
-          :while-hover="{ scale: 1.1 }"
-          :while-press="{ scale: 0.8 }"
-          :transition="{ duration: 0.01 }"
-          @click="setActive(index)"
-        >
-          <span class="text-xs font-medium uppercase">{{ day.month }}</span>
-          <span class="font-semibold">{{ day.date }}</span>
-          <span class="text-xs font-medium uppercase text-primary duration-200">
-            {{ day.day }}
-          </span>
-        </Motion>
-      </div>
-    </Motion>
-  </MotionConfig>
-</template>

package/components/ui/spring-calendar/TextMorph.vue

@@ -1,160 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch, onMounted, onUnmounted } from "vue";
-import { cn } from "@/lib/utils";
-
-const TEXT_CLASSES = "absolute inset-x-0 top-0 m-auto inline-block w-full";
-
-interface Props {
-  class?: string;
-  text: string;
-  morphTime?: number;
-  coolDownTime?: number;
-}
-const props = withDefaults(defineProps<Props>(), {
-  morphTime: 1.5,
-  coolDownTime: 0.5,
-});
-
-const text1Ref = ref<HTMLSpanElement>();
-const text2Ref = ref<HTMLSpanElement>();
-
-const previousText = ref(props.text);
-const currentText = ref(props.text);
-const morph = ref(0);
-const coolDown = ref(0);
-const time = ref(new Date());
-
-const isAnimating = ref(false);
-
-let animationFrameId: number = 0;
-
-function setStyles(fraction: number) {
-  if (!text1Ref.value || !text2Ref.value) return;
-
-  text2Ref.value.textContent = currentText.value;
-  text1Ref.value.textContent = previousText.value;
-
-  text2Ref.value.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
-  text2Ref.value.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
-
-  const invertedFraction = 1 - fraction;
-  text1Ref.value.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
-  text1Ref.value.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
-}
-
-function doMorph() {
-  morph.value -= coolDown.value;
-  coolDown.value = 0;
-
-  let fraction = morph.value / props.morphTime;
-
-  if (fraction > 1) {
-    coolDown.value = props.coolDownTime;
-    fraction = 1;
-  }
-
-  setStyles(fraction);
-
-  if (fraction === 1) {
-    previousText.value = currentText.value;
-  }
-}
-
-function doCoolDown() {
-  morph.value = 0;
-
-  if (text1Ref.value && text2Ref.value) {
-    text2Ref.value.style.filter = "none";
-    text2Ref.value.style.opacity = "100%";
-    text1Ref.value.style.filter = "none";
-    text1Ref.value.style.opacity = "0%";
-  }
-}
-
-function animate() {
-  animationFrameId = requestAnimationFrame(animate);
-
-  const newTime = new Date();
-  const dt = (newTime.getTime() - time.value.getTime()) / 1000;
-  time.value = newTime;
-
-  coolDown.value -= dt;
-
-  if (coolDown.value <= 0) {
-    doMorph();
-
-    // Stop if morphing is done
-    if (coolDown.value > 0) {
-      cancelAnimationFrame(animationFrameId);
-      isAnimating.value = false;
-    }
-  } else {
-    doCoolDown();
-  }
-}
-
-watch(
-  () => props.text,
-  (newText) => {
-    if (newText !== currentText.value) {
-      previousText.value = currentText.value;
-      currentText.value = newText;
-      morph.value = 0;
-      coolDown.value = 0;
-      time.value = new Date();
-
-      if (!isAnimating.value) {
-        isAnimating.value = true;
-        animate();
-      }
-    }
-  },
-);
-
-onMounted(() => {
-  animate();
-});
-
-onUnmounted(() => {
-  cancelAnimationFrame(animationFrameId);
-});
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'relative h-16 w-full max-w-screen-md text-center text-[40pt] font-bold leading-none [filter:url(#threshold)_blur(0.6px)]',
-        props.class,
-      )
-    "
-  >
-    <span
-      ref="text1Ref"
-      :class="cn(TEXT_CLASSES)"
-    />
-    <span
-      ref="text2Ref"
-      :class="cn(TEXT_CLASSES)"
-    />
-
-    <svg
-      id="filters"
-      class="fixed size-0"
-      preserveAspectRatio="xMidYMid slice"
-    >
-      <defs>
-        <filter id="threshold">
-          <feColorMatrix
-            in="SourceGraphic"
-            type="matrix"
-            values="1 0 0 0 0
-                    0 1 0 0 0
-                    0 0 1 0 0
-                    0 0 0 255 -140"
-          />
-        </filter>
-      </defs>
-    </svg>
-  </div>
-</template>

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

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

package/components/ui/switch/Switch.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import {
-  SwitchRoot,
-  type SwitchRootEmits,
-  type SwitchRootProps,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<SwitchRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SwitchRoot
-    data-slot="switch"
-    v-bind="forwarded"
-    :class="cn(
-      'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-      props.class,
-    )"
-  >
-    <SwitchThumb
-      data-slot="switch-thumb"
-      :class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
-    >
-      <slot name="thumb" />
-    </SwitchThumb>
-  </SwitchRoot>
-</template>

package/components/ui/switch/index.ts

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

package/components/ui/table/Table.vue

@@ -1,16 +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="table-container" class="relative w-full overflow-auto">
-    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
-      <slot />
-    </table>
-  </div>
-</template>

package/components/ui/table/TableBody.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>
-  <tbody
-    data-slot="table-body"
-    :class="cn('[&_tr:last-child]:border-0', props.class)"
-  >
-    <slot />
-  </tbody>
-</template>

package/components/ui/table/TableCaption.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>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
-  >
-    <slot />
-  </caption>
-</template>