@oneclick.dev/cms-kit 0.0.1 → 0.0.3

package/components/ui/sheet/SheetHeader.vue

@@ -1,15 +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="sheet-header"
-    :class="cn('flex flex-col gap-1.5 p-4', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sheet/SheetOverlay.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <DialogOverlay
-    data-slot="sheet-overlay"
-    :class="cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
-      'grid place-items-center overflow-y-auto',
-      props.class
-    )"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogOverlay>
-</template>

package/components/ui/sheet/SheetTitle.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DialogTitle, type DialogTitleProps } from 'reka-ui'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <DialogTitle
-    data-slot="sheet-title"
-    :class="cn('text-foreground font-semibold', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogTitle>
-</template>

package/components/ui/sheet/SheetTrigger.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger
-    data-slot="sheet-trigger"
-    v-bind="props"
-  >
-    <slot />
-  </DialogTrigger>
-</template>

package/components/ui/sheet/index.ts

@@ -1,8 +0,0 @@
-export { default as Sheet } from './Sheet.vue'
-export { default as SheetClose } from './SheetClose.vue'
-export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetDescription } from './SheetDescription.vue'
-export { default as SheetFooter } from './SheetFooter.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'

package/components/ui/sidebar/Sidebar.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import type { SidebarProps } from '.'
-import { cn } from '../../../lib/utils'
-import { Sheet, SheetContent } from '../sheet'
-import SheetDescription from '../sheet/SheetDescription.vue'
-import SheetHeader from '../sheet/SheetHeader.vue'
-import SheetTitle from '../sheet/SheetTitle.vue'
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SidebarProps>(), {
-  side: 'left',
-  variant: 'sidebar',
-  collapsible: 'offcanvas',
-})
-
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-</script>
-
-<template>
-  <div
-    v-if="collapsible === 'none'"
-    data-slot="sidebar"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-
-  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-    <SheetContent
-      data-sidebar="sidebar"
-      data-slot="sidebar"
-      data-mobile="true"
-      :side="side"
-      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-      :style="{
-        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-      }"
-    >
-      <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-      </SheetHeader>
-      <div class="flex h-full w-full flex-col">
-        <slot />
-      </div>
-    </SheetContent>
-  </Sheet>
-
-  <div
-    v-else
-    class="group peer text-sidebar-foreground hidden md:block"
-    data-slot="sidebar"
-    :data-state="state"
-    :data-collapsible="state === 'collapsed' ? collapsible : ''"
-    :data-variant="variant"
-    :data-side="side"
-  >
-    <!-- This is what handles the sidebar gap on desktop  -->
-    <div
-      :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        variant === 'floating' || variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-      )"
-    />
-    <div
-      :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-        side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        // Adjust the padding for floating and inset variants.
-        variant === 'floating' || variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
-      v-bind="$attrs"
-    >
-      <div
-        data-sidebar="sidebar"
-        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>

package/components/ui/sidebar/SidebarContent.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>
-  <div
-    data-slot="sidebar-content"
-    data-sidebar="content"
-    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarFooter.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>
-  <div
-    data-slot="sidebar-footer"
-    data-sidebar="footer"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarGroup.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>
-  <div
-    data-slot="sidebar-group"
-    data-sidebar="group"
-    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarGroupAction.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive } from 'reka-ui'
-
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-group-action"
-    data-sidebar="group-action"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </Primitive>
-</template>

package/components/ui/sidebar/SidebarGroupContent.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>
-  <div
-    data-slot="sidebar-group-content"
-    data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarGroupLabel.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive } from 'reka-ui'
-
-const props = defineProps<PrimitiveProps & {
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-group-label"
-    data-sidebar="group-label"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(
-      'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-      props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>

package/components/ui/sidebar/SidebarHeader.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>
-  <div
-    data-slot="sidebar-header"
-    data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarInput.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Input } from '../input'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <Input
-    data-slot="sidebar-input"
-    data-sidebar="input"
-    :class="cn(
-      'bg-background h-8 w-full shadow-none',
-      props.class,
-    )"
-  >
-    <slot />
-  </Input>
-</template>

package/components/ui/sidebar/SidebarInset.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <main
-    data-slot="sidebar-inset"
-    :class="cn(
-      'bg-background-accent relative flex w-full min-w-0 flex-1 flex-col',
-      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-      props.class,
-    )"
-  >
-    <slot />
-  </main>
-</template>

package/components/ui/sidebar/SidebarMenu.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>
-  <ul
-    data-slot="sidebar-menu"
-    data-sidebar="menu"
-    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
-  >
-    <slot />
-  </ul>
-</template>

package/components/ui/sidebar/SidebarMenuAction.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-
-const props = withDefaults(defineProps<PrimitiveProps & {
-  showOnHover?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'button',
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-action"
-    data-sidebar="menu-action"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-      'after:absolute after:-inset-2 md:after:hidden',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      showOnHover
-        && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-      props.class,
-    )"
-    :as="as"
-    :as-child="asChild"
-  >
-    <slot />
-  </Primitive>
-</template>

package/components/ui/sidebar/SidebarMenuBadge.vue

@@ -1,26 +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="sidebar-menu-badge"
-    data-sidebar="menu-badge"
-    :class="cn(
-      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
-import { type Component, computed } from 'vue'
-import SidebarMenuButtonChild, { type SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
-import { useSidebar } from './utils'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps & {
-  tooltip?: string | Component
-}>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
-
-const { isMobile, state } = useSidebar()
-
-const delegatedProps = computed(() => {
-  const { tooltip, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
-    <slot />
-  </SidebarMenuButtonChild>
-
-  <Tooltip v-else>
-    <TooltipTrigger as-child>
-      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-        <slot />
-      </SidebarMenuButtonChild>
-    </TooltipTrigger>
-    <TooltipContent
-      side="right"
-      align="center"
-      :hidden="state !== 'collapsed' || isMobile"
-    >
-      <template v-if="typeof tooltip === 'string'">
-        {{ tooltip }}
-      </template>
-      <component :is="tooltip" v-else />
-    </TooltipContent>
-  </Tooltip>
-</template>

package/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type SidebarMenuButtonVariants, sidebarMenuButtonVariants } from '.'
-
-export interface SidebarMenuButtonProps extends PrimitiveProps {
-  variant?: SidebarMenuButtonVariants['variant']
-  size?: SidebarMenuButtonVariants['size']
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
-  as: 'button',
-  variant: 'default',
-  size: 'default',
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-button"
-    data-sidebar="menu-button"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
-    :as="as"
-    :as-child="asChild"
-    v-bind="$attrs"
-  >
-    <slot />
-  </Primitive>
-</template>

package/components/ui/sidebar/SidebarMenuItem.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-item"
-    data-sidebar="menu-item"
-    :class="cn('group/menu-item relative', props.class)"
-  >
-    <slot />
-  </li>
-</template>

package/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../../../lib/utils'
-import { Skeleton } from '../skeleton'
-import { computed, type HTMLAttributes } from 'vue'
-
-const props = defineProps<{
-  showIcon?: boolean
-  class?: HTMLAttributes['class']
-}>()
-
-const width = computed(() => {
-  return `${Math.floor(Math.random() * 40) + 50}%`;
-})
-</script>
-
-<template>
-  <div
-    data-slot="sidebar-menu-skeleton"
-    data-sidebar="menu-skeleton"
-    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
-  >
-    <Skeleton
-      v-if="showIcon"
-      class="size-4 rounded-md"
-      data-sidebar="menu-skeleton-icon"
-    />
-
-    <Skeleton
-      class="h-4 max-w-(--skeleton-width) flex-1"
-      data-sidebar="menu-skeleton-text"
-      :style="{ '--skeleton-width': width }"
-    />
-  </div>
-</template>

package/components/ui/sidebar/SidebarMenuSub.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>
-  <ul
-    data-slot="sidebar-menu-sub"
-    data-sidebar="menu-badge"
-    :class="cn(
-      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </ul>
-</template>

package/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../lib/utils'
-import { Primitive } from 'reka-ui'
-
-const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: 'sm' | 'md'
-  isActive?: boolean
-  class?: HTMLAttributes['class']
-}>(), {
-  as: 'a',
-  size: 'md',
-})
-</script>
-
-<template>
-  <Primitive
-    data-slot="sidebar-menu-sub-button"
-    data-sidebar="menu-sub-button"
-    :as="as"
-    :as-child="asChild"
-    :data-size="size"
-    :data-active="isActive"
-    :class="cn(
-      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-      size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
-      props.class,
-    )"
-  >
-    <slot />
-  </Primitive>
-</template>