@aleph-alpha/ui-library 1.9.0 → 1.10.0

package/src/primitives/shadcn/field/Field.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import type { FieldVariants } from '.';
+  import { cn } from '@/lib/utils';
+  import { fieldVariants } from '.';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    orientation?: FieldVariants['orientation'];
+  }>();
+</script>
+
+<template>
+  <div
+    role="group"
+    data-slot="field"
+    :data-orientation="orientation"
+    :class="cn(fieldVariants({ orientation }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/field/FieldContent.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="field-content"
+    :class="cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/field/FieldDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <p
+    data-slot="field-description"
+    :class="
+      cn(
+        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </p>
+</template>

package/src/primitives/shadcn/field/FieldError.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+  import type { HTMLAttributes, VNode } from 'vue';
+  import { Comment, Fragment, Text, computed, useSlots } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    errors?: Array<string | { message: string | undefined } | undefined>;
+  }>();
+
+  const content = computed(() => {
+    if (!props.errors || props.errors.length === 0) return null;
+
+    const uniqueErrors = [
+      ...new Map(
+        props.errors.filter(Boolean).map((error) => {
+          const message = typeof error === 'string' ? error : error?.message;
+          return [message, error];
+        }),
+      ).values(),
+    ];
+
+    if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+      return typeof uniqueErrors[0] === 'string' ? uniqueErrors[0] : uniqueErrors[0].message;
+    }
+
+    return uniqueErrors.map((error) => (typeof error === 'string' ? error : error?.message));
+  });
+
+  // NOTE: Vue template ref-unwrapping doesn't always play well with `typeof` checks.
+  // Use a helper to ensure we always work with the plain value.
+  const getContent = () => content.value;
+
+  const slots = useSlots();
+  const defaultSlotContent = computed(() => slots.default?.() ?? []);
+
+  function hasMeaningfulNodes(nodes: VNode[]): boolean {
+    return nodes.some((node) => {
+      if (node.type === Comment) return false;
+      if (node.type === Text) return String(node.children ?? '').trim().length > 0;
+      if (node.type === Fragment && Array.isArray(node.children))
+        return hasMeaningfulNodes(node.children as VNode[]);
+      return true;
+    });
+  }
+
+  const hasDefaultSlotContent = computed(() => hasMeaningfulNodes(defaultSlotContent.value));
+</script>
+
+<template>
+  <div
+    v-if="hasDefaultSlotContent || getContent()"
+    role="alert"
+    data-slot="field-error"
+    :class="cn('text-destructive text-sm font-normal', props.class)"
+  >
+    <slot v-if="hasDefaultSlotContent" />
+
+    <template v-else-if="typeof getContent() === 'string'">
+      {{ getContent() }}
+    </template>
+
+    <ul v-else-if="Array.isArray(getContent())" class="ml-4 flex list-disc flex-col gap-1">
+      <li v-for="(error, index) in getContent()" :key="index">
+        {{ error }}
+      </li>
+    </ul>
+  </div>
+</template>

package/src/primitives/shadcn/field/FieldGroup.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="field-group"
+    :class="
+      cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/primitives/shadcn/field/FieldLabel.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { Label } from '@/primitives/shadcn/label';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    for?: string;
+  }>();
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+  <Label
+    data-slot="field-label"
+    :for="props.for"
+    :class="
+      cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

package/src/primitives/shadcn/field/FieldLegend.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+    variant?: 'legend' | 'label';
+  }>();
+</script>
+
+<template>
+  <legend
+    data-slot="field-legend"
+    :data-variant="variant"
+    :class="
+      cn(
+        'mb-3 font-medium',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </legend>
+</template>

package/src/primitives/shadcn/field/FieldSeparator.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { Separator } from '@/primitives/shadcn/separator';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <div
+    data-slot="field-separator"
+    :data-content="!!$slots.default"
+    :class="
+      cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)
+    "
+  >
+    <Separator class="absolute inset-0 top-1/2" />
+    <span
+      v-if="$slots.default"
+      class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+      data-slot="field-separator-content"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

package/src/primitives/shadcn/field/FieldSet.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class'];
+  }>();
+</script>
+
+<template>
+  <fieldset
+    data-slot="field-set"
+    :class="
+      cn(
+        'flex flex-col gap-6',
+        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </fieldset>
+</template>

package/src/primitives/shadcn/field/FieldTitle.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="field-label"
+    :class="
+      cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,39 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+        horizontal: [
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+);
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';

package/src/primitives/shadcn/icon/Icon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  interface Props {
+    /**
+     * Icon class generated by UnoCSS preset-icons / ds-icons.
+     *
+     * Example: `i-material-symbols-help`
+     */
+    icon: string;
+
+    /**
+     * Accessible label for the icon. When provided, the icon is exposed as `role="img"`.
+     * If omitted, the icon is treated as decorative (`aria-hidden="true"`).
+     */
+    ariaLabel?: string;
+
+    /**
+     * Override the implicit role. Useful for spinner-like icons (`role="status"`).
+     */
+    role?: string;
+
+    class?: HTMLAttributes['class'];
+  }
+
+  const props = defineProps<Props>();
+</script>
+
+<template>
+  <span
+    data-slot="icon"
+    :class="cn(props.icon, props.class)"
+    :role="props.role ?? (props.ariaLabel ? 'img' : undefined)"
+    :aria-label="props.ariaLabel"
+    :aria-hidden="props.ariaLabel ? undefined : 'true'"
+  />
+</template>

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

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

package/src/primitives/shadcn/index.ts

@@ -0,0 +1,3 @@
+export * from './button';
+export * from './tabs';
+export * from './tooltip';

package/src/primitives/shadcn/input/Input.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { useVModel } from '@vueuse/core';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes['class'];
+  }>();
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', payload: string | number): void;
+  }>();
+
+  const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+  });
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="
+      cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        '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',
+        props.class,
+      )
+    "
+  />
+</template>

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

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

package/src/primitives/shadcn/label/Label.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { LabelProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Label } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class', 'for');
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :for="props.for"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

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

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

package/src/primitives/shadcn/native-select/NativeSelect.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+  import type { AcceptableValue } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit, useVModel } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = defineProps<{
+    modelValue?: AcceptableValue | AcceptableValue[];
+    class?: HTMLAttributes['class'];
+  }>();
+
+  const emit = defineEmits<{
+    'update:modelValue': AcceptableValue;
+  }>();
+
+  const modelValue = useVModel(props, 'modelValue', emit, {
+    passive: true,
+    defaultValue: '',
+  });
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <div
+    class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+    data-slot="native-select-wrapper"
+  >
+    <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
+      data-slot="native-select"
+      :class="
+        cn(
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          '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',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </select>
+    <Icon
+      icon="i-material-symbols-keyboard-arrow-down"
+      class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 -translate-y-1/2 text-base opacity-50 select-none"
+      aria-hidden="true"
+      data-slot="native-select-icon"
+    />
+  </div>
+</template>

package/src/primitives/shadcn/native-select/NativeSelectOptGroup.vue

@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <optgroup
+    data-slot="native-select-optgroup"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </optgroup>
+</template>

package/src/primitives/shadcn/native-select/NativeSelectOption.vue

@@ -0,0 +1,18 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <option
+    data-slot="native-select-option"
+    :class="cn('bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </option>
+</template>

package/src/primitives/shadcn/native-select/index.ts

@@ -0,0 +1,3 @@
+export { default as NativeSelect } from './NativeSelect.vue';
+export { default as NativeSelectOptGroup } from './NativeSelectOptGroup.vue';
+export { default as NativeSelectOption } from './NativeSelectOption.vue';

package/src/primitives/shadcn/popover/Popover.vue

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

package/src/primitives/shadcn/popover/PopoverContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      sideOffset: 4,
+      align: 'center',
+    },
+  );
+  const emits = defineEmits<PopoverContentEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground 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 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-none',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/primitives/shadcn/popover/PopoverTrigger.vue

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

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

@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { PopoverAnchor } from 'reka-ui';

package/src/primitives/shadcn/progress/Progress.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import type { ProgressRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { ProgressIndicator, ProgressRoot } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = withDefaults(
+    defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      modelValue: 0,
+    },
+  );
+
+  const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', props.class)"
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

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

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