@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiCalendar/UiCalendar.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-  import { Calendar as ShadcnCalendar } from '@/primitives/shadcn/calendar';
-  import type { UiCalendarProps } from './types';
-
-  defineOptions({
-    name: 'UiCalendar',
-  });
-
-  const props = withDefaults(defineProps<UiCalendarProps>(), {
-    disabled: false,
-    readonly: false,
-    locale: 'en',
-    weekStartsOn: 0,
-    numberOfMonths: 1,
-    pagedNavigation: false,
-    weekdayFormat: 'narrow',
-    fixedWeeks: false,
-    preventDeselect: false,
-    multiple: false,
-    initialFocus: false,
-    disableDaysOutsideCurrentView: false,
-  });
-
-  const model = defineModel<UiCalendarProps['modelValue']>();
-  const placeholder = defineModel<UiCalendarProps['placeholder']>('placeholder');
-</script>
-
-<template>
-  <ShadcnCalendar
-    v-model="model"
-    v-model:placeholder="placeholder"
-    :default-value="props.defaultValue"
-    :default-placeholder="props.defaultPlaceholder"
-    :min-value="props.minValue"
-    :max-value="props.maxValue"
-    :disabled="props.disabled"
-    :readonly="props.readonly"
-    :locale="props.locale"
-    :week-starts-on="props.weekStartsOn"
-    :number-of-months="props.numberOfMonths"
-    :paged-navigation="props.pagedNavigation"
-    :weekday-format="props.weekdayFormat"
-    :fixed-weeks="props.fixedWeeks"
-    :layout="props.layout"
-    :year-range="props.yearRange"
-    :prevent-deselect="props.preventDeselect"
-    :multiple="props.multiple"
-    :calendar-label="props.calendarLabel"
-    :initial-focus="props.initialFocus"
-    :is-date-disabled="props.isDateDisabled"
-    :is-date-unavailable="props.isDateUnavailable"
-    :dir="props.dir"
-    :next-page="props.nextPage"
-    :prev-page="props.prevPage"
-    :disable-days-outside-current-view="props.disableDaysOutsideCurrentView"
-  >
-    <template #calendar-heading="{ date, month, year }">
-      <slot name="calendar-heading" :date="date" :month="month" :year="year" />
-    </template>
-    <template #calendar-prev-icon>
-      <slot name="prev-icon" />
-    </template>
-    <template #calendar-next-icon>
-      <slot name="next-icon" />
-    </template>
-  </ShadcnCalendar>
-</template>

package/src/primitives/UiCalendar/types.ts

@@ -1,236 +0,0 @@
-import type { DateValue } from 'reka-ui';
-import type { Matcher } from 'reka-ui/date';
-
-/**
- * Layout options for the calendar header.
- * Controls which dropdown selectors are shown for quick navigation.
- *
- * - `'month-and-year'` - Show dropdowns for both month and year
- * - `'month-only'` - Show dropdown for month only
- * - `'year-only'` - Show dropdown for year only
- */
-export type UiCalendarLayout = 'month-and-year' | 'month-only' | 'year-only';
-
-/**
- * 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 UiCalendarWeekdayFormat = '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 UiCalendarWeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-/**
- * Reading direction for the calendar.
- */
-export type UiCalendarDirection = 'ltr' | 'rtl';
-
-/**
- * A date picker calendar for selecting single or multiple dates. Use for
- * booking forms, event scheduling, or any date selection needs.
- *
- * @category Form Inputs
- * @useCases date selection, booking form, event picker, birthday input, schedule
- * @keywords calendar, date, picker, datepicker, schedule, booking, day, month
- * @related UiRangeCalendar, UiPopover
- */
-export interface UiCalendarProps {
-  /**
-   * The controlled selected date value.
-   * Use with v-model for two-way binding.
-   * When `multiple` is true, this should be an array of DateValue.
-   */
-  modelValue?: DateValue | DateValue[];
-
-  /**
-   * The default selected date when first rendered.
-   * Use when you don't need controlled state.
-   */
-  defaultValue?: DateValue;
-
-  /**
-   * The placeholder date used to determine which month/year to display.
-   * Defaults to today's date if not provided.
-   */
-  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?: UiCalendarWeekStartsOn;
-
-  /**
-   * 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?: UiCalendarWeekdayFormat;
-
-  /**
-   * Whether to always show 6 weeks in the calendar.
-   * Useful for consistent height.
-   * @default false
-   */
-  fixedWeeks?: boolean;
-
-  /**
-   * Layout mode for the calendar header.
-   * Controls dropdown selectors for quick month/year navigation.
-   * When undefined, shows simple text heading.
-   */
-  layout?: UiCalendarLayout;
-
-  /**
-   * Custom year range for the year selector dropdown.
-   * Only used when layout includes year selection.
-   */
-  yearRange?: DateValue[];
-
-  /**
-   * Whether to prevent the user from deselecting a date without selecting another date first.
-   * @default false
-   */
-  preventDeselect?: boolean;
-
-  /**
-   * Whether multiple dates can be selected.
-   * When true, modelValue should be an array.
-   * @default false
-   */
-  multiple?: 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;
-
-  /**
-   * The reading direction of the calendar.
-   * If omitted, inherits from ConfigProvider or assumes 'ltr'.
-   */
-  dir?: UiCalendarDirection;
-
-  /**
-   * 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;
-
-  /**
-   * Whether to disable days outside the current view.
-   * @default false
-   */
-  disableDaysOutsideCurrentView?: boolean;
-}
-
-/**
- * Emits for UiCalendar component.
- */
-export interface UiCalendarEmits {
-  /**
-   * Emitted when the selected date changes.
-   *
-   * The payload is always a union type: `DateValue | DateValue[] | undefined`.
-   * - `undefined` when the selection is cleared.
-   * - `DateValue` for single selection when `multiple` is false or not set.
-   * - `DateValue[]` when `multiple` is true.
-   */
-  (e: 'update:modelValue', value: DateValue | DateValue[] | undefined): void;
-
-  /**
-   * Emitted when the placeholder (displayed month/year) changes.
-   */
-  (e: 'update:placeholder', value: DateValue): void;
-}
-
-export type { DateValue, Matcher };

package/src/primitives/UiCard/UiCard.stories.ts

@@ -1,197 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { UiButton } from '../UiButton';
-import { UiInput } from '../UiInput';
-import {
-  UiCard,
-  UiCardAction,
-  UiCardContent,
-  UiCardDescription,
-  UiCardFooter,
-  UiCardHeader,
-  UiCardTitle,
-} from './index';
-
-const meta: Meta<typeof UiCard> = {
-  title: 'Primitives/UiCard',
-  component: UiCard,
-  tags: ['autodocs'],
-  argTypes: {},
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiCard>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import {
-  UiCard,
-  UiCardAction,
-  UiCardContent,
-  UiCardDescription,
-  UiCardFooter,
-  UiCardHeader,
-  UiCardTitle,
-  UiButton,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiCard class="w-full max-w-sm">
-    <UiCardHeader>
-      <UiCardTitle>Login to your account</UiCardTitle>
-      <UiCardDescription>
-        Enter your email below to login to your account
-      </UiCardDescription>
-      <UiCardAction>
-        <UiButton variant="link">Sign Up</UiButton>
-      </UiCardAction>
-    </UiCardHeader>
-    <UiCardContent>
-      <form>
-        <div class="grid w-full items-center gap-4">
-          <div class="flex flex-col space-y-1.5">
-            <label for="email" class="text-sm font-medium">Email</label>
-            <UiInput id="email" type="email" placeholder="m@example.com" />
-          </div>
-          <div class="flex flex-col space-y-1.5">
-            <div class="flex items-center">
-              <label for="password" class="text-sm font-medium">Password</label>
-              <a href="#" class="ml-auto inline-block text-sm underline">
-                Forgot your password?
-              </a>
-            </div>
-            <UiInput id="password" type="password" />
-          </div>
-        </div>
-      </form>
-    </UiCardContent>
-    <UiCardFooter class="flex flex-col gap-2">
-      <UiButton class="w-full">Login</UiButton>
-      <UiButton variant="outline" class="w-full">Login with Google</UiButton>
-    </UiCardFooter>
-  </UiCard>
-</template>`;
-
-/**
- * Login card example from shadcn-vue docs.
- * Shows header with action, form content, and footer with buttons.
- */
-export const Default: Story = {
-  render: () => ({
-    components: {
-      UiCard,
-      UiCardAction,
-      UiCardContent,
-      UiCardDescription,
-      UiCardFooter,
-      UiCardHeader,
-      UiCardTitle,
-      UiButton,
-      UiInput,
-    },
-    template: `<UiCard class="w-full max-w-sm">
-      <UiCardHeader>
-        <UiCardTitle>Login to your account</UiCardTitle>
-        <UiCardDescription>
-          Enter your email below to login to your account
-        </UiCardDescription>
-        <UiCardAction>
-          <UiButton variant="link">Sign Up</UiButton>
-        </UiCardAction>
-      </UiCardHeader>
-      <UiCardContent>
-        <form>
-          <div class="grid w-full items-center gap-4">
-            <div class="flex flex-col space-y-1.5">
-              <label for="email" class="text-sm font-medium">Email</label>
-              <UiInput id="email" type="email" placeholder="m@example.com" />
-            </div>
-            <div class="flex flex-col space-y-1.5">
-              <div class="flex items-center">
-                <label for="password" class="text-sm font-medium">Password</label>
-                <a href="#" class="ml-auto inline-block text-sm underline">
-                  Forgot your password?
-                </a>
-              </div>
-              <UiInput id="password" type="password" />
-            </div>
-          </div>
-        </form>
-      </UiCardContent>
-      <UiCardFooter class="flex flex-col gap-2">
-        <UiButton class="w-full">Login</UiButton>
-        <UiButton variant="outline" class="w-full">Login with Google</UiButton>
-      </UiCardFooter>
-    </UiCard>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const simpleTemplateSource = `<script setup lang="ts">
-import {
-  UiCard,
-  UiCardContent,
-  UiCardDescription,
-  UiCardFooter,
-  UiCardHeader,
-  UiCardTitle,
-} from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiCard>
-    <UiCardHeader>
-      <UiCardTitle>Card Title</UiCardTitle>
-      <UiCardDescription>Card Description</UiCardDescription>
-    </UiCardHeader>
-    <UiCardContent>
-      <p>Card Content</p>
-    </UiCardContent>
-    <UiCardFooter>
-      <p>Card Footer</p>
-    </UiCardFooter>
-  </UiCard>
-</template>`;
-
-/**
- * Simple card usage example from shadcn-vue docs.
- */
-export const Simple: Story = {
-  render: () => ({
-    components: {
-      UiCard,
-      UiCardContent,
-      UiCardDescription,
-      UiCardFooter,
-      UiCardHeader,
-      UiCardTitle,
-    },
-    template: `<UiCard>
-      <UiCardHeader>
-        <UiCardTitle>Card Title</UiCardTitle>
-        <UiCardDescription>Card Description</UiCardDescription>
-      </UiCardHeader>
-      <UiCardContent>
-        <p>Card Content</p>
-      </UiCardContent>
-      <UiCardFooter>
-        <p>Card Footer</p>
-      </UiCardFooter>
-    </UiCard>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: simpleTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiCard/UiCard.vue

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

package/src/primitives/UiCard/UiCardAction.vue

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

package/src/primitives/UiCard/UiCardContent.vue

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

package/src/primitives/UiCard/UiCardDescription.vue

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

package/src/primitives/UiCard/UiCardFooter.vue

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

package/src/primitives/UiCard/UiCardHeader.vue

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

package/src/primitives/UiCard/UiCardTitle.vue

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

package/src/primitives/UiCard/index.ts

@@ -1,7 +0,0 @@
-export { default as UiCard } from './UiCard.vue';
-export { default as UiCardAction } from './UiCardAction.vue';
-export { default as UiCardContent } from './UiCardContent.vue';
-export { default as UiCardDescription } from './UiCardDescription.vue';
-export { default as UiCardFooter } from './UiCardFooter.vue';
-export { default as UiCardHeader } from './UiCardHeader.vue';
-export { default as UiCardTitle } from './UiCardTitle.vue';

package/src/primitives/UiCard/types.ts

@@ -1,10 +0,0 @@
-/**
- * A container for grouping related content with header, body, and footer.
- * Use for displaying information in a bordered, elevated container.
- *
- * @category Layout
- * @useCases content card, product card, profile card, info panel, dashboard widget
- * @keywords card, container, panel, box, section, tile, widget
- * @related UiAlert
- */
-export type UiCardProps = Record<string, never>;