@aleph-alpha/ui-library 1.11.0 → 1.12.0

package/src/primitives/UiListbox/UiListboxItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { ListboxItem as ShadcnListboxItem } from '@/primitives/shadcn/listbox';
+  import { UiListboxItemProps } from './types';
+
+  defineOptions({
+    name: 'UiListboxItem',
+  });
+
+  const props = defineProps<UiListboxItemProps>();
+
+  const emit = defineEmits<{
+    select: [event: Event];
+  }>();
+</script>
+
+<template>
+  <ShadcnListboxItem v-bind="props" @select="emit('select', $event)">
+    <slot />
+  </ShadcnListboxItem>
+</template>

package/src/primitives/UiListbox/UiListboxItemIndicator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { ListboxItemIndicator as ShadcnListboxItemIndicator } from '@/primitives/shadcn/listbox';
+  import { UiListboxItemIndicatorProps } from './types';
+
+  defineOptions({
+    name: 'UiListboxItemIndicator',
+  });
+
+  const props = defineProps<UiListboxItemIndicatorProps>();
+</script>
+
+<template>
+  <ShadcnListboxItemIndicator v-bind="props">
+    <slot />
+  </ShadcnListboxItemIndicator>
+</template>

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

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiListbox from '../UiListbox.vue';
+import UiListboxContent from '../UiListboxContent.vue';
+import UiListboxItem from '../UiListboxItem.vue';
+import UiListboxItemIndicator from '../UiListboxItemIndicator.vue';
+
+describe('UiListbox', () => {
+  test('renders listbox with items', () => {
+    const { container } = render(UiListbox, {
+      props: {
+        modelValue: 'apple',
+      },
+      slots: {
+        default: `
+          <span>Apple</span>
+          <span>Banana</span>
+        `,
+      },
+      global: {
+        components: {
+          UiListboxContent,
+          UiListboxItem,
+          UiListboxItemIndicator,
+        },
+      },
+    });
+
+    expect(container.querySelector('[data-slot="listbox"]')).toBeInTheDocument();
+  });
+
+  test('renders disabled state', () => {
+    const { container } = render(UiListbox, {
+      props: {
+        modelValue: 'apple',
+        disabled: true,
+      },
+    });
+
+    expect(container.querySelector('[data-slot="listbox"]')).toBeInTheDocument();
+  });
+});

package/src/primitives/UiListbox/index.ts

@@ -0,0 +1,8 @@
+export { default as UiListbox } from './UiListbox.vue';
+export { default as UiListboxContent } from './UiListboxContent.vue';
+export { default as UiListboxFilter } from './UiListboxFilter.vue';
+export { default as UiListboxItem } from './UiListboxItem.vue';
+export { default as UiListboxItemIndicator } from './UiListboxItemIndicator.vue';
+export { default as UiListboxGroup } from './UiListboxGroup.vue';
+export { default as UiListboxGroupLabel } from './UiListboxGroupLabel.vue';
+export type * from './types';

package/src/primitives/UiListbox/types.ts

@@ -0,0 +1,119 @@
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+/**
+ * A listbox component for displaying a list of selectable options.
+ * Use for dropdown menus, selection lists, or any list-based selection UI.
+ *
+ * @category Form Inputs
+ * @useCases option selection, dropdown list, selectable items, multi-select
+ * @keywords listbox, select, options, list, dropdown, choices
+ * @related UiSelect, UiTagsInput
+ */
+export interface UiListboxProps {
+  /**
+   * The controlled value of the listbox. Optional; can be bound with v-model.
+   * - Omit for uncontrolled mode
+   * - Use `v-model` for controlled mode
+   */
+  modelValue?: AcceptableValue | AcceptableValue[];
+  /**
+   * The value of the listbox when initially rendered.
+   */
+  defaultValue?: AcceptableValue | AcceptableValue[];
+  /**
+   * Whether multiple options can be selected.
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * The orientation of the listbox.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The reading direction of the listbox.
+   */
+  dir?: 'ltr' | 'rtl';
+  /**
+   * When true, prevents the user from interacting with listbox.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * How multiple selection should behave.
+   * @default 'toggle'
+   */
+  selectionBehavior?: 'toggle' | 'replace';
+  /**
+   * When true, hover over item will trigger highlight.
+   * @default false
+   */
+  highlightOnHover?: boolean;
+  /**
+   * Use this to compare objects by a particular field.
+   */
+  by?: string | ((a: AcceptableValue, b: AcceptableValue) => boolean);
+  /**
+   * Additional CSS classes to apply to the component.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxContentProps {
+  /**
+   * Additional CSS classes to apply to the content container.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxFilterProps {
+  /**
+   * Placeholder text for the filter input.
+   */
+  placeholder?: string;
+  /**
+   * Whether to render as a child element (for composition with other components).
+   */
+  asChild?: boolean;
+  /**
+   * Additional CSS classes to apply to the filter input.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxItemProps {
+  /**
+   * The value of the listbox item.
+   */
+  value: AcceptableValue;
+  /**
+   * Whether the item is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS classes to apply to the item.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxItemIndicatorProps {
+  /**
+   * Additional CSS classes to apply to the indicator.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxGroupProps {
+  /**
+   * Additional CSS classes to apply to the group.
+   */
+  class?: HTMLAttributes['class'];
+}
+
+export interface UiListboxGroupLabelProps {
+  /**
+   * Additional CSS classes to apply to the group label.
+   */
+  class?: HTMLAttributes['class'];
+}

package/src/primitives/UiPopover/index.ts

@@ -1,5 +1,6 @@
 export { default as UiPopover } from './UiPopover.vue';
 export { default as UiPopoverTrigger } from './UiPopoverTrigger.vue';
 export { default as UiPopoverContent } from './UiPopoverContent.vue';
+export { PopoverAnchor as UiPopoverAnchor } from 'reka-ui';
 
 export * from './types';

package/src/primitives/UiSeparator/UiSeparator.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiSeparator from './UiSeparator.vue';
+
+const meta: Meta<typeof UiSeparator> = {
+  title: 'Primitives/UiSeparator',
+  component: UiSeparator,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the separator.\n\n@default "horizontal"',
+    },
+    decorative: {
+      control: 'boolean',
+      description: 'When true, the separator is purely decorative.\n\n@default true',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    decorative: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiSeparator>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiSeparator } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <h4 class="text-sm font-medium">Section Title</h4>
+      <p class="text-sm text-muted-foreground">Description text goes here.</p>
+    </div>
+    <UiSeparator />
+    <div>
+      <h4 class="text-sm font-medium">Another Section</h4>
+      <p class="text-sm text-muted-foreground">More content below the separator.</p>
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Horizontal separator between content sections.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSeparator },
+    setup() {
+      return { args };
+    },
+    template: `<div class="space-y-4">
+      <div>
+        <h4 class="text-sm font-medium">Section Title</h4>
+        <p class="text-sm text-muted-foreground">Description text goes here.</p>
+      </div>
+      <UiSeparator v-bind="args" />
+      <div>
+        <h4 class="text-sm font-medium">Another Section</h4>
+        <p class="text-sm text-muted-foreground">More content below the separator.</p>
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const verticalTemplateSource = `<script setup lang="ts">
+import { UiSeparator } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex h-5 items-center space-x-4 text-sm">
+    <span>Home</span>
+    <UiSeparator orientation="vertical" />
+    <span>Products</span>
+    <UiSeparator orientation="vertical" />
+    <span>About</span>
+    <UiSeparator orientation="vertical" />
+    <span>Contact</span>
+  </div>
+</template>`;
+
+/**
+ * Vertical separator for inline content.
+ */
+export const Vertical: Story = {
+  render: (args) => ({
+    components: { UiSeparator },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex h-5 items-center space-x-4 text-sm">
+      <span>Home</span>
+      <UiSeparator v-bind="args" orientation="vertical" />
+      <span>Products</span>
+      <UiSeparator v-bind="args" orientation="vertical" />
+      <span>About</span>
+      <UiSeparator v-bind="args" orientation="vertical" />
+      <span>Contact</span>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: verticalTemplateSource,
+      },
+    },
+  },
+};
+
+const cardTemplateSource = `<script setup lang="ts">
+import { UiSeparator } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="rounded-lg border p-4">
+    <div class="space-y-1">
+      <h4 class="text-sm font-medium leading-none">Aleph Alpha UI</h4>
+      <p class="text-sm text-muted-foreground">
+        An open-source UI component library.
+      </p>
+    </div>
+    <UiSeparator class="my-4" />
+    <div class="flex h-5 items-center space-x-4 text-sm">
+      <span>Docs</span>
+      <UiSeparator orientation="vertical" />
+      <span>Source</span>
+      <UiSeparator orientation="vertical" />
+      <span>Support</span>
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Card with both horizontal and vertical separators.
+ */
+export const InCard: Story = {
+  render: (args) => ({
+    components: { UiSeparator },
+    setup() {
+      return { args };
+    },
+    template: `<div class="rounded-lg border p-4">
+      <div class="space-y-1">
+        <h4 class="text-sm font-medium leading-none">Aleph Alpha UI</h4>
+        <p class="text-sm text-muted-foreground">
+          An open-source UI component library.
+        </p>
+      </div>
+      <UiSeparator class="my-4" />
+      <div class="flex h-5 items-center space-x-4 text-sm">
+        <span>Docs</span>
+        <UiSeparator orientation="vertical" />
+        <span>Source</span>
+        <UiSeparator orientation="vertical" />
+        <span>Support</span>
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: cardTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiSeparator/UiSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { Separator as ShadcnSeparator } from '@/primitives/shadcn/separator';
+  import type { UiSeparatorProps } from './types';
+
+  defineOptions({
+    name: 'UiSeparator',
+  });
+
+  const props = withDefaults(defineProps<UiSeparatorProps>(), {
+    orientation: 'horizontal',
+    decorative: true,
+  });
+</script>
+
+<template>
+  <ShadcnSeparator :orientation="props.orientation" :decorative="props.decorative" />
+</template>

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

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiSeparator from '../UiSeparator.vue';
+
+describe('UiSeparator', () => {
+  test('renders with default horizontal orientation', () => {
+    const { container } = render(UiSeparator);
+    const separator = container.querySelector('[data-slot="separator"]');
+    expect(separator).toBeInTheDocument();
+    expect(separator).toHaveAttribute('data-orientation', 'horizontal');
+  });
+
+  test('renders with vertical orientation', () => {
+    const { container } = render(UiSeparator, {
+      props: { orientation: 'vertical' },
+    });
+    const separator = container.querySelector('[data-slot="separator"]');
+    expect(separator).toHaveAttribute('data-orientation', 'vertical');
+  });
+
+  test('is decorative by default (role=none)', () => {
+    const { container } = render(UiSeparator);
+    const separator = container.querySelector('[data-slot="separator"]');
+    expect(separator).toHaveAttribute('role', 'none');
+  });
+
+  test('has separator role when not decorative', () => {
+    const { container } = render(UiSeparator, {
+      props: { decorative: false },
+    });
+    const separator = container.querySelector('[data-slot="separator"]');
+    expect(separator).toHaveAttribute('role', 'separator');
+  });
+});

package/src/primitives/UiSeparator/index.ts

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

package/src/primitives/UiSeparator/types.ts

@@ -0,0 +1,23 @@
+/**
+ * A visual divider between content sections. Use for grouping
+ * related items or creating visual breaks in layouts.
+ *
+ * @category Layout
+ * @useCases divider, section break, content grouping, visual separation
+ * @keywords separator, divider, line, hr, break, layout
+ * @related UiCard, UiDropdownMenu
+ */
+export interface UiSeparatorProps {
+  /**
+   * The orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * When true, the separator is purely decorative and not announced by screen readers.
+   * @type {boolean}
+   * @default true
+   */
+  decorative?: boolean;
+}