@sveda-ai/vue 0.1.0

package/src/ui/button/index.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } 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-[var(--sveda-radius)] text-sm font-medium ring-offset-card 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: 'text-brand-primary-purple-foreground bg-brand-primary-purple',
+        destructive: 'bg-destructive text-destructive-foreground',
+        outline: 'border-[1px] bg-transparent border-brand-primary-purple text-brand-primary-purple',
+        secondary: 'bg-transparent border-[1px] border-brand-primary-purple text-brand-primary-purple',
+        ghost: 'text-muted-foreground',
+        ghostTransparent: 'bg-transparent text-muted-foreground',
+        link: 'text-brand-primary-purple underline-offset-4',
+        violet: 'text-brand-primary-purple-foreground bg-brand-primary-purple',
+        main: 'text-brand-primary-purple-foreground bg-brand-primary-purple',
+      },
+      size: {
+        default: 'h-10 px-4 py-2 ',
+        sm: 'min-h-9  px-3 max-sm:h-auto max-sm:w-auto max-sm:text-wrap',
+        lg: 'h-11 px-8 max-sm:h-7 max-sm:text-xs',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export const buttonHoverStyles: Record<
+  NonNullable<VariantProps<typeof buttonVariants>['variant']>,
+  string
+> = {
+  default: 'brightness-110 shadow-md',
+  destructive: 'bg-destructive/90 shadow-md',
+  outline: 'bg-foreground/5 dark:bg-foreground/5 border-brand-primary-purple text-brand-primary-purple shadow-md',
+  secondary: 'bg-foreground/5 dark:bg-foreground/5 border-brand-primary-purple text-brand-primary-purple shadow-md',
+  ghost: 'bg-brand-primary-purple-foreground/30 text-brand-primary-purple',
+  ghostTransparent: 'bg-transparent text-foreground',
+  link: 'underline',
+  violet: 'brightness-110 shadow-md',
+  main: 'brightness-110 shadow-md',
+};
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/ui/card/Card.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('rounded-[var(--sveda-radius)] border-[2px] bg-card text-card-foreground', props.class)">
+        <slot />
+    </div>
+</template>

package/src/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <div :class="cn('p-6 pt-0 main-max-md:p-4', props.class)" >
+        <slot />
+    </div>
+</template>

package/src/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+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/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+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/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+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 text-center main-md:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/ui/card/CardTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <h3 :class="cn('text-2xl font-bold leading-none tracking-tight', props.class)">
+        <slot />
+    </h3>
+</template>

package/src/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/ui/checkbox/Checkbox.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { cn } from '../../lib/utils.js'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps({
+  checked: Boolean,
+  defaultChecked: Boolean,
+  required: Boolean,
+  name: String,
+  value: String,
+  id: String,
+  disabled: Boolean,
+  class: String,
+})
+
+const emits = defineEmits(['update:checked'])
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer size-5 shrink-0 rounded-[var(--sveda-radius)] bg-input border border-input-border ring-offset-card focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-accent-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/ui/checkbox/index.ts

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

package/src/ui/dialog/Dialog.vue

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

package/src/ui/dialog/DialogClose.vue

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

package/src/ui/dialog/DialogContent.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+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(
+          'sveda-chat 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-card text-card-foreground 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%] main-sm:rounded-[var(--sveda-radius)]',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-card 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="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/ui/dialog/DialogDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+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/ui/dialog/DialogFooter.vue

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

package/src/ui/dialog/DialogHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils.js'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center main-sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+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(
+            'sveda-chat relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-card text-card-foreground p-6 shadow-lg duration-200 main-sm:rounded-[var(--sveda-radius)] main-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 top-3 right-3 p-0.5 transition-colors rounded-[var(--sveda-radius)] hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

package/src/ui/dialog/DialogTitle.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+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/ui/dialog/DialogTrigger.vue

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

package/src/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/ui/dropdown-menu/DropdownMenu.vue

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

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { Check } from 'lucide-vue-next';
+import {
+    DropdownMenuCheckboxItem,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+    type DropdownMenuCheckboxItemEmits,
+    type DropdownMenuCheckboxItemProps,
+} from 'reka-ui';
+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/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import {
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+    type DropdownMenuContentEmits,
+    type DropdownMenuContentProps,
+} from 'reka-ui';
+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(
+                    'sveda-chat z-50 min-w-32 overflow-hidden rounded-[var(--sveda-radius)] 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/ui/dropdown-menu/DropdownMenuGroup.vue

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

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { DropdownMenuItem, useForwardProps, type DropdownMenuItemProps } from 'reka-ui';
+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/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { DropdownMenuLabel, useForwardProps, type DropdownMenuLabelProps } from 'reka-ui';
+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/ui/dropdown-menu/DropdownMenuRadioGroup.vue

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