@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/UiTagsInput/types.ts

@@ -0,0 +1,60 @@
+import type { TagsInputRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+/**
+ * A tags input component that renders tags inside an input, followed by an actual text input.
+ * Use for entering multiple values like tags, keywords, or email addresses.
+ *
+ * @category Form Inputs
+ * @useCases tag entry, keyword input, email list, multi-value input, chip input
+ * @keywords tags, input, chips, tokens, multi, keywords, labels
+ * @related UiInput, UiBadge
+ * @extends TagsInputRootProps
+ */
+export interface UiTagsInputProps extends Omit<TagsInputRootProps, 'class'> {
+  /**
+   * Additional CSS classes to apply to the component.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiTagsInputInputProps {
+  /**
+   * Placeholder text for the input field.
+   */
+  placeholder?: string;
+  /**
+   * Additional CSS classes to apply to the input.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiTagsInputItemProps {
+  /**
+   * The value of the tag item.
+   */
+  value: string;
+  /**
+   * Whether the tag is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS classes to apply to the item.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiTagsInputItemTextProps {
+  /**
+   * Additional CSS classes to apply to the text.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiTagsInputItemDeleteProps {
+  /**
+   * Additional CSS classes to apply to the delete button.
+   */
+  class?: HTMLAttributes['class'];
+}

package/src/primitives/UiToggle/UiToggle.stories.ts

@@ -0,0 +1,370 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiToggle from './UiToggle.vue';
+import { UiIcon } from '../UiIcon';
+
+const meta: Meta<typeof UiToggle> = {
+  title: 'Primitives/UiToggle',
+  component: UiToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'The visual style variant',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+      description: 'The size of the toggle',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the toggle is disabled',
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiToggle>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle aria-label="Toggle bold">
+    <UiIcon name="bold" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Default toggle button with icon.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiToggle, UiIcon },
+    setup() {
+      return { args };
+    },
+    template: `<UiToggle :variant="args.variant" :size="args.size" :disabled="args.disabled" aria-label="Toggle bold">
+      <UiIcon name="bold" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const outlineTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle variant="outline" aria-label="Toggle bold">
+    <UiIcon name="bold" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Outline variant toggle.
+ */
+export const Outline: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle variant="outline" aria-label="Toggle bold">
+      <UiIcon name="bold" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: outlineTemplateSource,
+      },
+    },
+  },
+};
+
+const withTextTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle aria-label="Toggle italic">
+    <UiIcon name="italic" />
+    Italic
+  </UiToggle>
+</template>`;
+
+/**
+ * Toggle with text label.
+ */
+export const WithText: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle aria-label="Toggle italic">
+      <UiIcon name="italic" />
+      Italic
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withTextTemplateSource,
+      },
+    },
+  },
+};
+
+const smallTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle size="sm" aria-label="Toggle italic">
+    <UiIcon name="italic" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Small size toggle.
+ */
+export const Small: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle size="sm" aria-label="Toggle italic">
+      <UiIcon name="italic" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: smallTemplateSource,
+      },
+    },
+  },
+};
+
+const largeTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle size="lg" aria-label="Toggle italic">
+    <UiIcon name="italic" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Large size toggle.
+ */
+export const Large: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle size="lg" aria-label="Toggle italic">
+      <UiIcon name="italic" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: largeTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiToggle disabled aria-label="Toggle underline">
+    <UiIcon name="underline" />
+  </UiToggle>
+</template>`;
+
+/**
+ * Disabled toggle.
+ */
+export const Disabled: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `<UiToggle disabled aria-label="Toggle underline">
+      <UiIcon name="underline" />
+    </UiToggle>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};
+
+const allStatesTemplateSource = `<script setup lang="ts">
+import { UiToggle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <!-- Variants -->
+    <div>
+      <p class="text-sm font-medium mb-2">Variants</p>
+      <div class="flex items-center gap-2">
+        <UiToggle aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle default-value aria-label="Toggle bold (pressed)">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle variant="outline" aria-label="Toggle italic">
+          <UiIcon name="italic" />
+        </UiToggle>
+        <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
+          <UiIcon name="italic" />
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- Sizes -->
+    <div>
+      <p class="text-sm font-medium mb-2">Sizes</p>
+      <div class="flex items-end gap-2">
+        <UiToggle size="sm" aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+        <UiToggle size="lg" aria-label="Toggle bold">
+          <UiIcon name="bold" />
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- With Text -->
+    <div>
+      <p class="text-sm font-medium mb-2">With Text</p>
+      <div class="flex items-center gap-2">
+        <UiToggle aria-label="Toggle italic">
+          <UiIcon name="italic" />
+          Italic
+        </UiToggle>
+      </div>
+    </div>
+
+    <!-- Disabled -->
+    <div>
+      <p class="text-sm font-medium mb-2">Disabled</p>
+      <div class="flex items-center gap-2">
+        <UiToggle disabled aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled variant="outline" aria-label="Toggle underline">
+          <UiIcon name="underline" />
+        </UiToggle>
+        <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
+          <UiIcon name="underline" />
+        </UiToggle>
+      </div>
+    </div>
+  </div>
+</template>`;
+
+/**
+ * All toggle states displayed together: variants, sizes, with text, and disabled states.
+ */
+export const AllStates: Story = {
+  render: () => ({
+    components: { UiToggle, UiIcon },
+    template: `
+      <div class="flex flex-col gap-6">
+        <!-- Variants -->
+        <div>
+          <p class="text-sm font-medium mb-2">Variants</p>
+          <div class="flex items-center gap-2">
+            <UiToggle aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle default-value aria-label="Toggle bold (pressed)">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle variant="outline" aria-label="Toggle italic">
+              <UiIcon name="italic" />
+            </UiToggle>
+            <UiToggle variant="outline" default-value aria-label="Toggle italic (pressed)">
+              <UiIcon name="italic" />
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- Sizes -->
+        <div>
+          <p class="text-sm font-medium mb-2">Sizes</p>
+          <div class="flex items-end gap-2">
+            <UiToggle size="sm" aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+            <UiToggle size="lg" aria-label="Toggle bold">
+              <UiIcon name="bold" />
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- With Text -->
+        <div>
+          <p class="text-sm font-medium mb-2">With Text</p>
+          <div class="flex items-center gap-2">
+            <UiToggle aria-label="Toggle italic">
+              <UiIcon name="italic" />
+              Italic
+            </UiToggle>
+          </div>
+        </div>
+
+        <!-- Disabled -->
+        <div>
+          <p class="text-sm font-medium mb-2">Disabled</p>
+          <div class="flex items-center gap-2">
+            <UiToggle disabled aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled variant="outline" aria-label="Toggle underline">
+              <UiIcon name="underline" />
+            </UiToggle>
+            <UiToggle disabled variant="outline" default-value aria-label="Toggle underline (pressed)">
+              <UiIcon name="underline" />
+            </UiToggle>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: allStatesTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiToggle/UiToggle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { Toggle as ShadcnToggle } from '@/primitives/shadcn/toggle';
+  import type { UiToggleProps } from './types';
+
+  defineOptions({
+    name: 'UiToggle',
+  });
+
+  const props = withDefaults(defineProps<UiToggleProps>(), {
+    disabled: false,
+    variant: 'default',
+    size: 'default',
+  });
+
+  const modelValue = defineModel<boolean>();
+</script>
+
+<template>
+  <ShadcnToggle
+    v-model="modelValue"
+    :default-value="props.defaultValue"
+    :disabled="props.disabled"
+    :variant="props.variant"
+    :size="props.size"
+  >
+    <slot />
+  </ShadcnToggle>
+</template>

package/src/primitives/UiToggle/__tests__/UiToggle.test.ts

@@ -0,0 +1,62 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiToggle from '../UiToggle.vue';
+
+describe('UiToggle', () => {
+  test('renders toggle button', () => {
+    const { getByRole } = render(UiToggle, {
+      slots: { default: 'Toggle' },
+    });
+    expect(getByRole('button')).toBeInTheDocument();
+  });
+
+  test('has data-slot attribute', () => {
+    const { container } = render(UiToggle, {
+      slots: { default: 'Toggle' },
+    });
+    const toggle = container.querySelector('[data-slot="toggle"]');
+    expect(toggle).toBeInTheDocument();
+  });
+
+  test('starts in off state by default', () => {
+    const { getByRole } = render(UiToggle, {
+      slots: { default: 'Toggle' },
+    });
+    expect(getByRole('button')).toHaveAttribute('data-state', 'off');
+  });
+
+  test('is disabled when disabled prop is true', () => {
+    const { getByRole } = render(UiToggle, {
+      props: { disabled: true },
+      slots: { default: 'Toggle' },
+    });
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  test('applies outline variant classes', () => {
+    const { container } = render(UiToggle, {
+      props: { variant: 'outline' },
+      slots: { default: 'Toggle' },
+    });
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveClass('border');
+  });
+
+  test('applies sm size classes', () => {
+    const { container } = render(UiToggle, {
+      props: { size: 'sm' },
+      slots: { default: 'Toggle' },
+    });
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveClass('h-8');
+  });
+
+  test('applies lg size classes', () => {
+    const { container } = render(UiToggle, {
+      props: { size: 'lg' },
+      slots: { default: 'Toggle' },
+    });
+    const toggle = container.querySelector('button');
+    expect(toggle).toHaveClass('h-10');
+  });
+});

package/src/primitives/UiToggle/index.ts

@@ -0,0 +1,2 @@
+export { default as UiToggle } from './UiToggle.vue';
+export type { UiToggleProps } from './types';

package/src/primitives/UiToggle/types.ts

@@ -0,0 +1,35 @@
+/**
+ * A two-state button that can be toggled on or off.
+ * Use for enabling/disabling features or switching between states.
+ *
+ * @category Form Inputs
+ * @useCases toolbar button, formatting toggle, view toggle, filter toggle
+ * @keywords toggle, button, pressed, on, off, state
+ * @related UiSwitch, UiButton, UiCheckbox
+ */
+export interface UiToggleProps {
+  /**
+   * The controlled pressed state of the toggle. Use with v-model.
+   */
+  modelValue?: boolean;
+  /**
+   * The pressed state when initially rendered (uncontrolled mode).
+   * Use when you do not need to control its state.
+   */
+  defaultValue?: boolean;
+  /**
+   * Whether the toggle is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The visual style variant.
+   * @default 'default'
+   */
+  variant?: 'default' | 'outline';
+  /**
+   * The size of the toggle.
+   * @default 'default'
+   */
+  size?: 'default' | 'sm' | 'lg';
+}

package/src/primitives/UiTooltip/UiTooltip.stories.ts

@@ -115,7 +115,7 @@ import { UiIcon } from '@aleph-alpha/ui-library'
 <template>
   <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
     <UiButton size="icon" variant="ghost" aria-label="Information">
-      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+      <UiIcon name="info" :size="16" />
     </UiButton>
   </UiTooltip>
 </template>`;
@@ -124,7 +124,7 @@ const withIconButtonTemplate = `
   <div class="flex justify-center p-8">
     <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
       <UiButton size="icon" variant="ghost" aria-label="Information">
-        <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+        <UiIcon name="info" :size="16" />
       </UiButton>
     </UiTooltip>
   </div>
@@ -404,19 +404,19 @@ import { UiIcon } from '@aleph-alpha/ui-library'
 
   <UiTooltip content="Need help? Click for documentation" side="top" align="center">
     <UiButton size="icon" variant="ghost" aria-label="Help">
-      <UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+      <UiIcon name="circle-help" :size="16" />
     </UiButton>
   </UiTooltip>
 
   <UiTooltip content="Important information about this feature" side="top" align="center">
     <UiButton size="icon" variant="outline" aria-label="Information">
-      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+      <UiIcon name="info" :size="16" />
     </UiButton>
   </UiTooltip>
 
   <UiTooltip content="Warning: This may affect other settings" side="top" align="center">
     <UiButton size="icon" variant="secondary" aria-label="Warning">
-      <UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+      <UiIcon name="triangle-alert" :size="16" />
     </UiButton>
   </UiTooltip>
 
@@ -437,19 +437,19 @@ const useCasesTemplate = `
 
 		<UiTooltip content="Need help? Click for documentation" side="top" align="center">
 			<UiButton size="icon" variant="ghost" aria-label="Help">
-				<UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+				<UiIcon name="circle-help" :size="16" />
 			</UiButton>
 		</UiTooltip>
 
 		<UiTooltip content="Important information about this feature" side="top" align="center">
 			<UiButton size="icon" variant="outline" aria-label="Information">
-				<UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+				<UiIcon name="info" :size="16" />
 			</UiButton>
 		</UiTooltip>
 
 		<UiTooltip content="Warning: This may affect other settings" side="top" align="center">
 			<UiButton size="icon" variant="secondary" aria-label="Warning">
-				<UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+				<UiIcon name="triangle-alert" :size="16" />
 			</UiButton>
 		</UiTooltip>
 

package/src/primitives/index.ts

@@ -18,16 +18,23 @@ export * from './UiField';
 export * from './UiIcon';
 export * from './UiIconButton';
 export * from './UiInput';
+export * from './UiKbd';
+export * from './UiLabel';
+export * from './UiListbox';
 export * from './UiPopover';
 export * from './UiProgress';
 export * from './UiRadioGroup';
 export * from './UiRangeCalendar';
 export * from './UiSelect';
+export * from './UiSeparator';
+export * from './UiSkeleton';
 export * from './UiSlider';
 export * from './UiSpinner';
 export * from './UiSwitch';
 export * from './UiTable';
 export * from './UiTabs';
+export * from './UiTagsInput';
 export * from './UiTextarea';
+export * from './UiToggle';
 export * from './UiTooltip';
 export * from './shadcn';

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

@@ -2,7 +2,7 @@
   import type { AccordionTriggerProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { AccordionHeader, AccordionTrigger } from 'reka-ui';
   import { cn } from '@/lib/utils';
 
@@ -25,9 +25,10 @@
     >
       <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"
+        <UiIcon
+          name="chevron-down"
+          :size="16"
+          class="text-muted-foreground pointer-events-none shrink-0 translate-y-0.5 transition-transform duration-200"
         />
       </slot>
     </AccordionTrigger>

package/src/primitives/shadcn/calendar/CalendarNextButton.vue

@@ -2,7 +2,7 @@
   import type { CalendarNextProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import { reactiveOmit } from '@vueuse/core';
-  import { Icon } from '@/primitives/shadcn/icon';
+  import { UiIcon } from '@/primitives/UiIcon';
   import { CalendarNext, useForwardProps } from 'reka-ui';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '@/primitives/shadcn/button';
@@ -27,7 +27,7 @@
     v-bind="forwardedProps"
   >
     <slot>
-      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+      <UiIcon name="chevron-right" :size="16" />
     </slot>
   </CalendarNext>
 </template>