@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiRangeCalendar/types.ts

@@ -1,184 +0,0 @@
-import type { DateRange, DateValue } from 'reka-ui';
-import type { Matcher } from 'reka-ui/date';
-
-/**
- * Format options for weekday labels displayed in the calendar header.
- *
- * - `'narrow'` - Single letter (e.g., "M", "T", "W")
- * - `'short'` - Abbreviated (e.g., "Mon", "Tue", "Wed")
- * - `'long'` - Full name (e.g., "Monday", "Tuesday", "Wednesday")
- */
-export type UiRangeCalendarWeekdayFormat = 'narrow' | 'short' | 'long';
-
-/**
- * Day of the week to start the calendar on.
- *
- * - `0` - Sunday
- * - `1` - Monday
- * - `2` - Tuesday
- * - `3` - Wednesday
- * - `4` - Thursday
- * - `5` - Friday
- * - `6` - Saturday
- */
-export type UiRangeCalendarWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-/**
- * A calendar for selecting date ranges (start and end dates). Use for
- * booking periods, vacation dates, or any range-based date selection.
- *
- * @category Form Inputs
- * @useCases date range, booking period, vacation dates, filter by dates
- * @keywords calendar, range, daterange, period, booking, from, to, start, end
- * @related UiCalendar, UiPopover
- */
-export interface UiRangeCalendarProps {
-  /**
-   * The controlled selected date range value.
-   * Use with v-model for two-way binding.
-   */
-  modelValue?: DateRange;
-
-  /**
-   * The default selected date range when first rendered.
-   * Use when you don't need controlled state.
-   */
-  defaultValue?: DateRange;
-
-  /**
-   * The placeholder date used to determine which month/year to display.
-   * Defaults to today's date if not provided.
-   * Use with `v-model:placeholder` for two-way binding.
-   */
-  placeholder?: DateValue;
-
-  /**
-   * The default placeholder date when first rendered.
-   */
-  defaultPlaceholder?: DateValue;
-
-  /**
-   * The minimum selectable date.
-   * Dates before this will be disabled.
-   */
-  minValue?: DateValue;
-
-  /**
-   * The maximum selectable date.
-   * Dates after this will be disabled.
-   */
-  maxValue?: DateValue;
-
-  /**
-   * Whether the calendar is disabled.
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Whether the calendar is read-only.
-   * Users can navigate but not select dates.
-   * @default false
-   */
-  readonly?: boolean;
-
-  /**
-   * The locale to use for formatting dates and weekday names.
-   * @default 'en'
-   * @example 'de', 'fr', 'es'
-   */
-  locale?: string;
-
-  /**
-   * The day of the week to start on.
-   * @default 0 (Sunday)
-   */
-  weekStartsOn?: UiRangeCalendarWeekStartsOn;
-
-  /**
-   * The number of months to display at once.
-   * @default 1
-   */
-  numberOfMonths?: number;
-
-  /**
-   * Whether to navigate by page (all visible months) or by single month.
-   * @default false
-   */
-  pagedNavigation?: boolean;
-
-  /**
-   * The format to use for weekday labels.
-   * @default 'narrow'
-   */
-  weekdayFormat?: UiRangeCalendarWeekdayFormat;
-
-  /**
-   * Whether to always show 6 weeks in the calendar.
-   * Useful for consistent height.
-   * @default false
-   */
-  fixedWeeks?: boolean;
-
-  /**
-   * Whether to prevent the user from deselecting a date without selecting another date first.
-   * @default false
-   */
-  preventDeselect?: boolean;
-
-  /**
-   * The accessible label for the calendar.
-   * Used for screen readers.
-   */
-  calendarLabel?: string;
-
-  /**
-   * If true, the calendar will focus the selected day, today, or the first day
-   * of the month depending on what is visible when the calendar is mounted.
-   * @default false
-   */
-  initialFocus?: boolean;
-
-  /**
-   * A function that returns whether or not a date is disabled.
-   * Disabled dates cannot be selected.
-   * @example (date) => date.dayOfWeek === 0 // Disable Sundays
-   */
-  isDateDisabled?: Matcher;
-
-  /**
-   * A function that returns whether or not a date is unavailable.
-   * Unavailable dates are styled differently but may still be selectable.
-   * @example (date) => isHoliday(date)
-   */
-  isDateUnavailable?: Matcher;
-
-  /**
-   * A function that returns the next page of the calendar.
-   * Receives the current placeholder as an argument.
-   */
-  nextPage?: (placeholder: DateValue) => DateValue;
-
-  /**
-   * A function that returns the previous page of the calendar.
-   * Receives the current placeholder as an argument.
-   */
-  prevPage?: (placeholder: DateValue) => DateValue;
-}
-
-/**
- * Emits for UiRangeCalendar component.
- */
-export interface UiRangeCalendarEmits {
-  /**
-   * Emitted when the selected date range changes.
-   */
-  (e: 'update:modelValue', value: DateRange): void;
-
-  /**
-   * Emitted when the placeholder (displayed month/year) changes.
-   */
-  (e: 'update:placeholder', value: DateValue): void;
-}
-
-export type { DateRange, DateValue, Matcher };

package/src/primitives/UiSelect/UiSelect.stories.ts

@@ -1,425 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref } from 'vue';
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-  UiSelectLabel,
-  UiSelectGroup,
-  UiSelectSeparator,
-} from './index';
-
-const meta: Meta<typeof UiSelect> = {
-  title: 'Primitives/UiSelect',
-  component: UiSelect,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'The controlled value of the select (use with v-model)',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the select is disabled',
-    },
-    required: {
-      control: 'boolean',
-      description: 'Whether the select is required in a form',
-    },
-  },
-  args: {
-    disabled: false,
-    required: false,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiSelect>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiSelect v-model="value">
-    <UiSelectTrigger>
-      <UiSelectValue placeholder="Select a fruit" />
-    </UiSelectTrigger>
-    <UiSelectContent>
-      <UiSelectItem value="apple">Apple</UiSelectItem>
-      <UiSelectItem value="banana">Banana</UiSelectItem>
-      <UiSelectItem value="orange">Orange</UiSelectItem>
-    </UiSelectContent>
-  </UiSelect>
-</template>`;
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
-    setup() {
-      const value = ref('');
-      return { args, value };
-    },
-    template: `
-      <UiSelect v-model="value" v-bind="args">
-        <UiSelectTrigger>
-          <UiSelectValue placeholder="Select a fruit" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectItem value="apple">Apple</UiSelectItem>
-          <UiSelectItem value="banana">Banana</UiSelectItem>
-          <UiSelectItem value="orange">Orange</UiSelectItem>
-          <UiSelectItem value="grape">Grape</UiSelectItem>
-          <UiSelectItem value="mango">Mango</UiSelectItem>
-        </UiSelectContent>
-      </UiSelect>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const withGroupsTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-  UiSelectLabel,
-  UiSelectGroup,
-  UiSelectSeparator,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiSelect v-model="value">
-    <UiSelectTrigger>
-      <UiSelectValue placeholder="Select a food" />
-    </UiSelectTrigger>
-    <UiSelectContent>
-      <UiSelectGroup>
-        <UiSelectLabel>Fruits</UiSelectLabel>
-        <UiSelectItem value="apple">Apple</UiSelectItem>
-        <UiSelectItem value="banana">Banana</UiSelectItem>
-        <UiSelectItem value="orange">Orange</UiSelectItem>
-      </UiSelectGroup>
-      <UiSelectSeparator />
-      <UiSelectGroup>
-        <UiSelectLabel>Vegetables</UiSelectLabel>
-        <UiSelectItem value="carrot">Carrot</UiSelectItem>
-        <UiSelectItem value="broccoli">Broccoli</UiSelectItem>
-        <UiSelectItem value="spinach">Spinach</UiSelectItem>
-      </UiSelectGroup>
-    </UiSelectContent>
-  </UiSelect>
-</template>`;
-
-export const WithGroups: Story = {
-  render: (args) => ({
-    components: {
-      UiSelect,
-      UiSelectTrigger,
-      UiSelectContent,
-      UiSelectItem,
-      UiSelectValue,
-      UiSelectLabel,
-      UiSelectGroup,
-      UiSelectSeparator,
-    },
-    setup() {
-      const value = ref('');
-      return { args, value };
-    },
-    template: `
-      <UiSelect v-model="value" v-bind="args">
-        <UiSelectTrigger>
-          <UiSelectValue placeholder="Select a food" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectGroup>
-            <UiSelectLabel>Fruits</UiSelectLabel>
-            <UiSelectItem value="apple">Apple</UiSelectItem>
-            <UiSelectItem value="banana">Banana</UiSelectItem>
-            <UiSelectItem value="orange">Orange</UiSelectItem>
-          </UiSelectGroup>
-          <UiSelectSeparator />
-          <UiSelectGroup>
-            <UiSelectLabel>Vegetables</UiSelectLabel>
-            <UiSelectItem value="carrot">Carrot</UiSelectItem>
-            <UiSelectItem value="broccoli">Broccoli</UiSelectItem>
-            <UiSelectItem value="spinach">Spinach</UiSelectItem>
-          </UiSelectGroup>
-        </UiSelectContent>
-      </UiSelect>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withGroupsTemplateSource,
-      },
-    },
-  },
-};
-
-const withDisabledItemsTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiSelect v-model="value">
-    <UiSelectTrigger>
-      <UiSelectValue placeholder="Select a plan" />
-    </UiSelectTrigger>
-    <UiSelectContent>
-      <UiSelectItem value="free">Free Plan</UiSelectItem>
-      <UiSelectItem value="pro">Pro Plan</UiSelectItem>
-      <UiSelectItem value="enterprise" :disabled="true">Enterprise (Contact Sales)</UiSelectItem>
-    </UiSelectContent>
-  </UiSelect>
-</template>`;
-
-export const WithDisabledItems: Story = {
-  render: (args) => ({
-    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
-    setup() {
-      const value = ref('');
-      return { args, value };
-    },
-    template: `
-      <UiSelect v-model="value" v-bind="args">
-        <UiSelectTrigger>
-          <UiSelectValue placeholder="Select a plan" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectItem value="free">Free Plan</UiSelectItem>
-          <UiSelectItem value="pro">Pro Plan</UiSelectItem>
-          <UiSelectItem value="enterprise" :disabled="true">Enterprise (Contact Sales)</UiSelectItem>
-        </UiSelectContent>
-      </UiSelect>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withDisabledItemsTemplateSource,
-      },
-    },
-  },
-};
-
-const disabledTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiSelect v-model="value" :disabled="true">
-    <UiSelectTrigger>
-      <UiSelectValue placeholder="Select an option" />
-    </UiSelectTrigger>
-    <UiSelectContent>
-      <UiSelectItem value="option1">Option 1</UiSelectItem>
-      <UiSelectItem value="option2">Option 2</UiSelectItem>
-    </UiSelectContent>
-  </UiSelect>
-</template>`;
-
-export const Disabled: Story = {
-  render: () => ({
-    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
-    setup() {
-      const value = ref('');
-      return { value };
-    },
-    template: `
-      <UiSelect v-model="value" :disabled="true">
-        <UiSelectTrigger>
-          <UiSelectValue placeholder="Select an option" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectItem value="option1">Option 1</UiSelectItem>
-          <UiSelectItem value="option2">Option 2</UiSelectItem>
-        </UiSelectContent>
-      </UiSelect>
-    `,
-  }),
-  args: { disabled: true },
-  parameters: {
-    docs: {
-      source: {
-        code: disabledTemplateSource,
-      },
-    },
-  },
-};
-
-const sizesTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-const value2 = ref('')
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <UiSelect v-model="value">
-      <UiSelectTrigger size="sm">
-        <UiSelectValue placeholder="Small" />
-      </UiSelectTrigger>
-      <UiSelectContent>
-        <UiSelectItem value="a">Option A</UiSelectItem>
-        <UiSelectItem value="b">Option B</UiSelectItem>
-      </UiSelectContent>
-    </UiSelect>
-    <UiSelect v-model="value2">
-      <UiSelectTrigger size="default">
-        <UiSelectValue placeholder="Default" />
-      </UiSelectTrigger>
-      <UiSelectContent>
-        <UiSelectItem value="a">Option A</UiSelectItem>
-        <UiSelectItem value="b">Option B</UiSelectItem>
-      </UiSelectContent>
-    </UiSelect>
-  </div>
-</template>`;
-
-export const Sizes: Story = {
-  render: () => ({
-    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
-    setup() {
-      const value = ref('');
-      const value2 = ref('');
-      return { value, value2 };
-    },
-    template: `
-      <div class="flex items-center gap-4">
-        <UiSelect v-model="value">
-          <UiSelectTrigger size="sm">
-            <UiSelectValue placeholder="Small" />
-          </UiSelectTrigger>
-          <UiSelectContent>
-            <UiSelectItem value="a">Option A</UiSelectItem>
-            <UiSelectItem value="b">Option B</UiSelectItem>
-          </UiSelectContent>
-        </UiSelect>
-        <UiSelect v-model="value2">
-          <UiSelectTrigger size="default">
-            <UiSelectValue placeholder="Default" />
-          </UiSelectTrigger>
-          <UiSelectContent>
-            <UiSelectItem value="a">Option A</UiSelectItem>
-            <UiSelectItem value="b">Option B</UiSelectItem>
-          </UiSelectContent>
-        </UiSelect>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: sizesTemplateSource,
-      },
-    },
-  },
-};
-
-const withDefaultValueTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectValue,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('banana')
-</script>
-
-<template>
-  <UiSelect v-model="value">
-    <UiSelectTrigger>
-      <UiSelectValue placeholder="Select a fruit" />
-    </UiSelectTrigger>
-    <UiSelectContent>
-      <UiSelectItem value="apple">Apple</UiSelectItem>
-      <UiSelectItem value="banana">Banana</UiSelectItem>
-      <UiSelectItem value="orange">Orange</UiSelectItem>
-    </UiSelectContent>
-  </UiSelect>
-</template>`;
-
-export const WithDefaultValue: Story = {
-  render: () => ({
-    components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectItem, UiSelectValue },
-    setup() {
-      const value = ref('banana');
-      return { value };
-    },
-    template: `
-      <UiSelect v-model="value">
-        <UiSelectTrigger>
-          <UiSelectValue placeholder="Select a fruit" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectItem value="apple">Apple</UiSelectItem>
-          <UiSelectItem value="banana">Banana</UiSelectItem>
-          <UiSelectItem value="orange">Orange</UiSelectItem>
-        </UiSelectContent>
-      </UiSelect>
-    `,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: withDefaultValueTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiSelect/UiSelect.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-  import type { AcceptableValue } from 'reka-ui';
-  import { Select as ShadcnSelect } from '@/primitives/shadcn/select';
-  import type { UiSelectProps, UiSelectEmits } from './types';
-
-  defineOptions({
-    name: 'UiSelect',
-  });
-
-  const props = withDefaults(defineProps<UiSelectProps>(), {
-    modelValue: undefined,
-    defaultValue: undefined,
-    defaultOpen: false,
-    open: undefined,
-    disabled: false,
-    required: false,
-    name: undefined,
-    dir: 'ltr',
-  });
-
-  const emit = defineEmits<UiSelectEmits>();
-
-  // reka-ui's AcceptableValue can be string | number | boolean | Record
-  // Our API restricts to string only for type safety
-  function handleModelValueUpdate(value: AcceptableValue) {
-    if (typeof value === 'string') {
-      emit('update:modelValue', value);
-    }
-  }
-</script>
-
-<template>
-  <ShadcnSelect
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :default-open="props.defaultOpen"
-    :open="props.open"
-    :disabled="props.disabled"
-    :required="props.required"
-    :name="props.name"
-    :dir="props.dir"
-    @update:model-value="handleModelValueUpdate"
-    @update:open="emit('update:open', $event)"
-  >
-    <slot />
-  </ShadcnSelect>
-</template>

package/src/primitives/UiSelect/UiSelectContent.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-  import { SelectContent as ShadcnSelectContent } from '@/primitives/shadcn/select';
-  import type { UiSelectContentProps, UiSelectContentEmits } from './types';
-
-  defineOptions({
-    name: 'UiSelectContent',
-  });
-
-  const props = withDefaults(defineProps<UiSelectContentProps>(), {
-    side: 'bottom',
-    sideOffset: 4,
-    align: 'start',
-    position: 'popper',
-  });
-
-  const emit = defineEmits<UiSelectContentEmits>();
-</script>
-
-<template>
-  <ShadcnSelectContent
-    :side="props.side"
-    :side-offset="props.sideOffset"
-    :align="props.align"
-    :position="props.position"
-    @escape-key-down="emit('escapeKeyDown', $event)"
-    @pointer-down-outside="emit('pointerDownOutside', $event)"
-  >
-    <slot />
-  </ShadcnSelectContent>
-</template>

package/src/primitives/UiSelect/UiSelectGroup.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-  import { SelectGroup as ShadcnSelectGroup } from '@/primitives/shadcn/select';
-
-  defineOptions({
-    name: 'UiSelectGroup',
-  });
-</script>
-
-<template>
-  <ShadcnSelectGroup>
-    <slot />
-  </ShadcnSelectGroup>
-</template>