@tower_74/cms-app 0.1.0

package/src/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+    <DialogTrigger v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>

package/src/components/ui/sheet/index.ts

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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';
+
+export const sheetVariants = cva(
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    {
+        variants: {
+            side: {
+                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;

package/src/components/ui/sidebar/Sidebar.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Sheet from '@/components/ui/sheet/Sheet.vue';
+import SheetContent from '@/components/ui/sheet/SheetContent.vue';
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<{
+        side?: 'left' | 'right';
+        variant?: 'sidebar' | 'floating' | 'inset';
+        collapsible?: 'offcanvas' | 'icon' | 'none';
+        class?: HTMLAttributes['class'];
+    }>(),
+    {
+        side: 'left',
+        variant: 'sidebar',
+        collapsible: 'offcanvas',
+    },
+);
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+    <div
+        v-if="collapsible === 'none'"
+        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', 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-mobile="true"
+            :side="side"
+            class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            :style="{
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            }"
+        >
+            <div class="flex h-full w-full flex-col">
+                <slot />
+            </div>
+        </SheetContent>
+    </Sheet>
+
+    <div
+        v-else
+        class="group peer hidden md:block"
+        :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 h-svh 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)_+_theme(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)_+_theme(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="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            >
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div
+        data-sidebar="content"
+        :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+    >
+        <slot />
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarGroupAction.vue

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

package/src/components/ui/sidebar/SidebarGroupContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarGroupLabel.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<
+    PrimitiveProps & {
+        class?: HTMLAttributes['class'];
+    }
+>();
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="group-label"
+        :as="as"
+        :as-child="asChild"
+        :class="
+            cn(
+                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] 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/src/components/ui/sidebar/SidebarHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/sidebar/SidebarInput.vue

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

package/src/components/ui/sidebar/SidebarInset.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <main
+        :class="
+            cn(
+                'relative flex min-h-svh flex-1 flex-col bg-background',
+                'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </main>
+</template>

package/src/components/ui/sidebar/SidebarMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ul data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+        <slot />
+    </ul>
+</template>

package/src/components/ui/sidebar/SidebarMenuAction.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            showOnHover?: boolean;
+            class?: HTMLAttributes['class'];
+        }
+    >(),
+    {
+        as: 'button',
+    },
+);
+</script>
+
+<template>
+    <Primitive
+        data-sidebar="menu-action"
+        :class="
+            cn(
+                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+                // Increases the hit area of the button on mobile.
+                'after:absolute after:-inset-2 after:md: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 &&
+                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+                props.class,
+            )
+        "
+        :as="as"
+        :as-child="asChild"
+    >
+        <slot />
+    </Primitive>
+</template>

package/src/components/ui/sidebar/SidebarMenuBadge.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div
+        data-sidebar="menu-badge"
+        :class="
+            cn(
+                'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+                '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/src/components/ui/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
+import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
+import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
+import { computed, type Component } 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/src/components/ui/sidebar/SidebarMenuButtonChild.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+import { sidebarMenuButtonVariants, type 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-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/src/components/ui/sidebar/SidebarMenuItem.vue

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

package/src/components/ui/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
+import { cn } from '@/lib/utils';
+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-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/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <ul
+        data-sidebar="menu-badge"
+        :class="
+            cn(
+                'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+                'group-data-[collapsible=icon]:hidden',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </ul>
+</template>

package/src/components/ui/sidebar/SidebarMenuSubButton.vue

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

package/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <li>
+        <slot />
+    </li>
+</template>