@aleph-alpha/ui-library 1.9.0 → 1.10.0

package/src/primitives/UiTooltip/types.ts

@@ -0,0 +1,53 @@
+export type UiTooltipSides = 'top' | 'right' | 'bottom' | 'left';
+export type UiTooltipAlign = 'start' | 'center' | 'end';
+
+/**
+ * A popup that displays information on hover or focus. Use for
+ * explaining icons, providing hints, or showing additional context.
+ *
+ * @category Overlays
+ * @useCases icon explanation, help text, additional info, hints
+ * @keywords tooltip, hint, hover, popup, info, help, explanation
+ * @related UiPopover
+ */
+export interface UiTooltipProps {
+  /**
+   * The text content to display in the tooltip.
+   */
+  content: string;
+
+  /**
+   * The side of the trigger where the tooltip should appear.
+   * @default 'top'
+   */
+  side?: UiTooltipSides;
+
+  /**
+   * The distance in pixels from the trigger.
+   * @default 4
+   */
+  sideOffset?: number;
+
+  /**
+   * The preferred alignment against the trigger.
+   * @default 'center'
+   */
+  align?: UiTooltipAlign;
+
+  /**
+   * Additional CSS classes to apply to the tooltip content.
+   */
+  class?: string;
+
+  /**
+   * The duration from when the pointer enters the trigger until the tooltip opens.
+   * @default 500
+   */
+  delayDuration?: number;
+
+  /**
+   * Prevents the tooltip from opening.
+   * @default false
+   */
+  disabled?: boolean;
+}

package/src/primitives/index.ts

@@ -0,0 +1,33 @@
+/**
+This file is auto-generated by prepare-build.js script
+Do not edit this file manually
+*/
+
+export * from './UiAccordion';
+export * from './UiAlert';
+export * from './UiAlertDialog';
+export * from './UiAvatar';
+export * from './UiBadge';
+export * from './UiButton';
+export * from './UiCalendar';
+export * from './UiCard';
+export * from './UiCheckbox';
+export * from './UiDrawer';
+export * from './UiDropdownMenu';
+export * from './UiField';
+export * from './UiIcon';
+export * from './UiIconButton';
+export * from './UiInput';
+export * from './UiPopover';
+export * from './UiProgress';
+export * from './UiRadioGroup';
+export * from './UiRangeCalendar';
+export * from './UiSelect';
+export * from './UiSlider';
+export * from './UiSpinner';
+export * from './UiSwitch';
+export * from './UiTable';
+export * from './UiTabs';
+export * from './UiTextarea';
+export * from './UiTooltip';
+export * from './shadcn';

package/src/primitives/shadcn/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
+  import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
+
+  const props = defineProps<AccordionRootProps>();
+  const emits = defineEmits<AccordionRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/src/primitives/shadcn/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import type { AccordionContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AccordionContent } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/primitives/shadcn/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import type { AccordionItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AccordionItem, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

package/src/primitives/shadcn/accordion/AccordionTrigger.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import type { AccordionTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  import { AccordionHeader, AccordionTrigger } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <Icon
+          icon="i-material-symbols-keyboard-arrow-down"
+          class="text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 text-base transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/primitives/shadcn/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';

package/src/primitives/shadcn/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import type { AlertVariants } from '.';
+  import { cn } from '@/lib/utils';
+  import { alertVariants } from '.';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    variant?: AlertVariants['variant'];
+  }>();
+</script>
+
+<template>
+  <div data-slot="alert" :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/alert/AlertDescription.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>
+  <div
+    data-slot="alert-description"
+    :class="
+      cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/alert/AlertTitle.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>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/primitives/shadcn/alert-dialog/AlertDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
+  import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+  const props = defineProps<AlertDialogProps>();
+  const emits = defineEmits<AlertDialogEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <AlertDialogRoot #default="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import type { AlertDialogActionProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AlertDialogAction } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/button';
+
+  const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { AlertDialogCancelProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AlertDialogCancel } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/button';
+
+  const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import {
+    AlertDialogContent,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    useForwardPropsEmits,
+  } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<AlertDialogContentEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="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"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { AlertDialogDescriptionProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AlertDialogDescription } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogFooter.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>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogHeader.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>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/alert-dialog/AlertDialogTitle.vue

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

package/src/primitives/shadcn/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+  import type { AlertDialogTriggerProps } from 'reka-ui';
+  import { AlertDialogTrigger } from 'reka-ui';
+
+  const props = defineProps<AlertDialogTriggerProps>();
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/src/primitives/shadcn/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

package/src/primitives/shadcn/avatar/Avatar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { AvatarRoot } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>

package/src/primitives/shadcn/avatar/AvatarFallback.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { AvatarFallbackProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { AvatarFallback } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>

package/src/primitives/shadcn/avatar/AvatarImage.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+  import type { AvatarImageProps } from 'reka-ui';
+  import { AvatarImage } from 'reka-ui';
+
+  const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+  <AvatarImage data-slot="avatar-image" v-bind="props" class="aspect-square size-full">
+    <slot />
+  </AvatarImage>
+</template>

package/src/primitives/shadcn/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';

package/src/primitives/shadcn/badge/Badge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import type { BadgeVariants } from '.';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Primitive } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { badgeVariants } from '.';
+
+  const props = defineProps<
+    PrimitiveProps & {
+      variant?: BadgeVariants['variant'];
+      class?: HTMLAttributes['class'];
+    }
+  >();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/primitives/shadcn/badge/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export { default as Badge } from './Badge.vue';
+
+export const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/primitives/shadcn/button/Button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import type { PrimitiveProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import type { ButtonVariants } from '.';
+  import { Primitive } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '.';
+
+  interface Props extends PrimitiveProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    as: 'button',
+  });
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>