@oneclick.dev/cms-kit 0.0.1

package/components/ui/sidebar/index.ts

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+<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

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

package/components/ui/sonner/Sonner.vue

@@ -0,0 +1,18 @@
+<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

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

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

@@ -0,0 +1,110 @@
+<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

@@ -0,0 +1,160 @@
+<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

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

package/components/ui/switch/Switch.vue

@@ -0,0 +1,41 @@
+<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

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

package/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,17 @@
+<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>

package/components/ui/table/TableCell.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

package/components/ui/table/TableEmpty.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '../../../lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

package/components/ui/table/TableFooter.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>

package/components/ui/table/TableHead.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
+  >
+    <slot />
+  </th>
+</template>

package/components/ui/table/TableHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn('[&_tr]:border-b', props.class)"
+  >
+    <slot />
+  </thead>
+</template>

package/components/ui/table/TableRow.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+  >
+    <slot />
+  </tr>
+</template>

package/components/ui/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/components/ui/table/utils.ts

@@ -0,0 +1,9 @@
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
+  ref.value
+    = typeof updaterOrValue === 'function'
+      ? updaterOrValue(ref.value)
+      : updaterOrValue
+}

package/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>