@tower_74/cms-app 0.1.0

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

@@ -0,0 +1,31 @@
+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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+                destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+                outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+                secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+                ghost: 'hover:bg-accent hover:text-accent-foreground',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2',
+                sm: 'h-8 rounded-md px-3 text-xs',
+                lg: 'h-10 rounded-md px-8',
+                icon: 'h-9 w-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/components/ui/card/Card.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 :class="cn('rounded-lg border bg-card text-card-foreground shadow-sm', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/card/CardContent.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 :class="cn('p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/card/CardDescription.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>
+    <p :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </p>
+</template>

package/src/components/ui/card/CardFooter.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 :class="cn('flex items-center p-6 pt-0', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/card/CardHeader.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 :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/card/CardTitle.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>
+    <h3 :class="cn('text-2xl font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </h3>
+</template>

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

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.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/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-vue-next';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue';
+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
+        v-bind="forwarded"
+        :class="
+            cn(
+                'focus-visible:outline-hidden peer size-5 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent-foreground data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+                props.class,
+            )
+        "
+    >
+        <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+            <slot>
+                <Check class="size-3.5 stroke-[3]" />
+            </slot>
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>

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

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

package/src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue';
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+        <slot :open="open" />
+    </CollapsibleRoot>
+</template>

package/src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue';
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+    <CollapsibleContent
+        v-bind="props"
+        class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all"
+    >
+        <slot />
+    </CollapsibleContent>
+</template>

package/src/components/ui/collapsible/CollapsibleTrigger.vue

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

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

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';

package/src/components/ui/dialog/Dialog.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogRoot v-bind="forwarded">
+        <slot />
+    </DialogRoot>
+</template>

package/src/components/ui/dialog/DialogClose.vue

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

package/src/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-vue-next';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+    type DialogContentEmits,
+    type DialogContentProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        />
+        <DialogContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+
+            <DialogClose
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            >
+                <X class="h-4 w-4" />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DialogDescription, useForwardProps, type DialogDescriptionProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+        <slot />
+    </DialogDescription>
+</template>

package/src/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/dialog/DialogHeader.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 :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-vue-next';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+    type DialogContentEmits,
+    type DialogContentProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        >
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 my-8 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        props.class,
+                    )
+                "
+                v-bind="forwarded"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+                            event.preventDefault();
+                        }
+                    }
+                "
+            >
+                <slot />
+
+                <DialogClose class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary">
+                    <X class="h-4 w-4" />
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DialogTitle, useForwardProps, type DialogTitleProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DialogTitle v-bind="forwardedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+        <slot />
+    </DialogTitle>
+</template>

package/src/components/ui/dialog/DialogTrigger.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/dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

package/src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, useForwardPropsEmits, type DropdownMenuRootEmits, type DropdownMenuRootProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuRoot v-bind="forwarded">
+        <slot />
+    </DropdownMenuRoot>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { Check } from 'lucide-vue-next';
+import {
+    DropdownMenuCheckboxItem,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+    type DropdownMenuCheckboxItemEmits,
+    type DropdownMenuCheckboxItemProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuCheckboxItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Check class="h-4 w-4" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import {
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+    type DropdownMenuContentEmits,
+    type DropdownMenuContentProps,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+    sideOffset: 4,
+});
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

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

package/src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DropdownMenuItem, useForwardProps, type DropdownMenuItemProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DropdownMenuItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+                inset && 'pl-8',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </DropdownMenuItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import { DropdownMenuLabel, useForwardProps, type DropdownMenuLabelProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DropdownMenuLabel v-bind="forwardedProps" :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+        <slot />
+    </DropdownMenuLabel>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRadioGroup, useForwardPropsEmits, type DropdownMenuRadioGroupEmits, type DropdownMenuRadioGroupProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuRadioGroup v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
+</template>