@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/shadcn/tags-input/TagsInputItemText.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+  import type { TagsInputItemTextProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputItemText, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItemText
+    data-slot="tags-input-item-text"
+    :class="cn('px-1', props.class)"
+    v-bind="forwardedProps"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';

package/src/primitives/shadcn/toggle/Toggle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import type { ToggleEmits, ToggleProps } from 'reka-ui';
+  import { Toggle, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { toggleVariants } from '.';
+
+  const props = withDefaults(
+    defineProps<
+      ToggleProps & {
+        variant?: 'default' | 'outline';
+        size?: 'default' | 'sm' | 'lg';
+      }
+    >(),
+    {
+      variant: 'default',
+      size: 'default',
+      disabled: false,
+    },
+  );
+
+  const emits = defineEmits<ToggleEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Toggle
+    data-slot="toggle"
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant: props.variant, size: props.size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </Toggle>
+</template>

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

@@ -0,0 +1,27 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Toggle } from './Toggle.vue';
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;