@aleph-alpha/ui-library 1.11.0 → 1.13.0

package/src/{primitives/shadcn → components/core}/range-calendar/RangeCalendarNextButton.vue

@@ -2,10 +2,10 @@
   import type { RangeCalendarNextProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { RangeCalendarNext, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>();
 
@@ -28,7 +28,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+      <UiIcon name="chevron-right" :size="16" />
     </slot>
   </RangeCalendarNext>
 </template>

package/src/{primitives/shadcn → components/core}/range-calendar/RangeCalendarPrevButton.vue

@@ -2,10 +2,10 @@
   import type { RangeCalendarPrevProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { RangeCalendarPrev, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
-  import { buttonVariants } from '@/primitives/shadcn/button';
+  import { buttonVariants } from '@/components/core/button';
 
   const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>();
 
@@ -28,7 +28,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+      <UiIcon name="chevron-left" :size="16" />
     </slot>
   </RangeCalendarPrev>
 </template>

package/src/{primitives/shadcn → components/core}/select/Select.vue

@@ -9,7 +9,7 @@
 </script>
 
 <template>
-  <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+  <SelectRoot #default="slotProps" data-slot="select" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </SelectRoot>
 </template>

package/src/{primitives/shadcn → components/core}/select/SelectItem.vue

@@ -2,7 +2,7 @@
   import type { SelectItemProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -19,7 +19,7 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        'focus:bg-hover-default focus:text-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
         props.class,
       )
     "
@@ -27,7 +27,7 @@
     <span class="absolute right-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
         <slot name="indicator-icon">
-          <Icon icon="i-material-symbols-check" class="text-base" />
+          <UiIcon name="check" :size="16" />
         </slot>
       </SelectItemIndicator>
     </span>

package/src/{primitives/shadcn → components/core}/select/SelectScrollDownButton.vue

@@ -2,7 +2,7 @@
   import type { SelectScrollDownButtonProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -20,7 +20,7 @@
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-down" class="text-base" />
+      <UiIcon name="chevron-down" :size="16" />
     </slot>
   </SelectScrollDownButton>
 </template>

package/src/{primitives/shadcn → components/core}/select/SelectScrollUpButton.vue

@@ -2,7 +2,7 @@
   import type { SelectScrollUpButtonProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -20,7 +20,7 @@
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-up" class="text-base" />
+      <UiIcon name="chevron-up" :size="16" />
     </slot>
   </SelectScrollUpButton>
 </template>

package/src/{primitives/shadcn → components/core}/select/SelectTrigger.vue

@@ -2,7 +2,7 @@
   import type { SelectTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -24,14 +24,14 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "
   >
     <slot />
     <SelectIcon as-child>
-      <Icon icon="i-material-symbols-keyboard-arrow-down" class="text-base opacity-50" />
+      <UiIcon name="chevron-down" :size="16" class="opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

package/src/components/core/skeleton/Skeleton.vue

@@ -0,0 +1,10 @@
+<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="skeleton" :class="cn('bg-muted animate-pulse rounded-md', props.class)" />
+</template>

package/src/components/core/skeleton/index.ts

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

package/src/{primitives/shadcn → components/core}/spinner/Spinner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { HTMLAttributes } from 'vue';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/components/UiIcon';
   import { cn } from '@/lib/utils';
 
   const props = defineProps<{
@@ -9,10 +9,11 @@
 </script>
 
 <template>
-  <Icon
-    icon="i-material-symbols-progress-activity"
+  <UiIcon
+    name="loader-circle"
+    :size="16"
     role="status"
     aria-label="Loading"
-    :class="cn('text-base animate-spin', props.class)"
+    :class="cn('animate-spin', props.class)"
   />
 </template>

package/src/{primitives/shadcn → components/core}/switch/Switch.vue

@@ -21,7 +21,7 @@
     v-bind="forwarded"
     :class="
       cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer data-[state=checked]:bg-accent-default data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

package/src/{primitives/shadcn → components/core}/table/TableRow.vue

@@ -13,7 +13,10 @@
     data-slot="table-row"
     :data-state="props.dataState"
     :class="
-      cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)
+      cn(
+        'hover:bg-hover-default data-[state=selected]:bg-muted border-b transition-colors',
+        props.class,
+      )
     "
   >
     <slot />

package/src/{primitives/shadcn → components/core}/tabs/Tabs.vue

@@ -14,7 +14,7 @@
 
 <template>
   <TabsRoot
-    v-slot="slotProps"
+    #default="slotProps"
     data-slot="tabs"
     v-bind="forwarded"
     :class="cn('flex flex-col gap-2', props.class)"

package/src/components/core/tabs/TabsTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { TabsTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { TabsTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="
+      cn(
+        'data-[state=active]:bg-popover dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/components/core/tags-input/TagsInput.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<TagsInputRootEmits>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TagsInputRoot
+    #default="slotProps"
+    data-slot="tags-input"
+    :class="
+      cn(
+        'border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-input-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TagsInputRoot>
+</template>

package/src/components/core/tags-input/TagsInputInput.vue

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

package/src/components/core/tags-input/TagsInputItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import type { TagsInputItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputItem, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItem
+    data-slot="tags-input-item"
+    :class="
+      cn(
+        'bg-secondary text-secondary-foreground data-[state=active]:border-ring data-[state=active]:ring-ring/50 inline-flex h-6 shrink-0 items-center gap-1 rounded-sm border px-1 text-xs font-medium transition-[color,box-shadow] data-[state=active]:ring-[3px] [&[data-disabled]]:opacity-50 [&>button]:shrink-0',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TagsInputItem>
+</template>

package/src/components/core/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import type { TagsInputItemDeleteProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
+  import { computed } from 'vue';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = computed(() => {
+    const { class: _class, ...delegated } = props;
+    return delegated;
+  });
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItemDelete
+    data-slot="tags-input-item-delete"
+    :class="
+      cn(
+        'hover:bg-secondary-foreground/20 focus-visible:border-ring focus-visible:ring-ring/50 -mr-0.5 flex size-4 items-center justify-center rounded-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px]',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </slot>
+  </TagsInputItemDelete>
+</template>

package/src/components/core/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/components/core/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 → components/core}/textarea/Textarea.vue

@@ -25,7 +25,7 @@
     data-slot="textarea"
     :class="
       cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         props.class,
       )
     "

package/src/components/core/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/components/core/toggle/index.ts

@@ -0,0 +1,26 @@
+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-hover-default outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent-default data-[state=on]:text-accent-default-foreground data-[state=on]:hover:bg-accent-default data-[state=on]:hover:text-accent-default-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm focus-visible:border-ring',
+      },
+      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>;

package/src/components/core/toggle-group/ToggleGroup.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
+  import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+  import { provide, toRefs } from 'vue';
+  import { cn } from '@/lib/utils';
+  import type { ToggleGroupVariants } from '.';
+  import { toggleGroupContextKey } from './context';
+
+  const props = withDefaults(
+    defineProps<
+      ToggleGroupRootProps & {
+        variant?: ToggleGroupVariants['variant'];
+        size?: ToggleGroupVariants['size'];
+      }
+    >(),
+    {
+      variant: 'default',
+      size: 'default',
+    },
+  );
+
+  const emits = defineEmits<ToggleGroupRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+
+  const { variant, size } = toRefs(props);
+  provide(toggleGroupContextKey, { variant, size });
+</script>
+
+<template>
+  <ToggleGroupRoot
+    data-slot="toggle-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center justify-center gap-1', $attrs.class ?? '')"
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/core/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import type { ToggleGroupItemProps } from 'reka-ui';
+  import { ToggleGroupItem, useForwardProps } from 'reka-ui';
+  import { inject } from 'vue';
+  import { cn } from '@/lib/utils';
+  import { toggleGroupVariants, type ToggleGroupVariants } from '.';
+  import { toggleGroupContextKey } from './context';
+
+  const props = defineProps<
+    ToggleGroupItemProps & {
+      variant?: ToggleGroupVariants['variant'];
+      size?: ToggleGroupVariants['size'];
+    }
+  >();
+
+  const context = inject(toggleGroupContextKey);
+
+  const forwarded = useForwardProps(props);
+</script>
+
+<template>
+  <ToggleGroupItem
+    data-slot="toggle-group-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        toggleGroupVariants({
+          variant: props.variant ?? context?.variant?.value,
+          size: props.size ?? context?.size?.value,
+        }),
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/core/toggle-group/context.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { ToggleGroupVariants } from '.';
+
+export interface ToggleGroupContext {
+  variant: Ref<ToggleGroupVariants['variant']>;
+  size: Ref<ToggleGroupVariants['size']>;
+}
+
+export const toggleGroupContextKey = Symbol(
+  'toggleGroupContext',
+) as InjectionKey<ToggleGroupContext>;

package/src/components/core/toggle-group/index.ts

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
+export { toggleGroupContextKey, type ToggleGroupContext } from './context';
+
+export const toggleGroupVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-hover-default outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent-default data-[state=on]:text-accent-default-foreground data-[state=on]:hover:bg-accent-default data-[state=on]:hover:text-accent-default-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm focus-visible:border-ring',
+      },
+      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 ToggleGroupVariants = VariantProps<typeof toggleGroupVariants>;

package/src/{primitives/shadcn → components/core}/tooltip/TooltipContent.vue

@@ -29,7 +29,7 @@
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 overflow-hidden rounded-md bg-inverse px-3 py-1.5 text-xs text-inverse-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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,
         )
       "