@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiSkeleton/types.ts

@@ -1,26 +0,0 @@
-/**
- * A placeholder loading state for content. Use to indicate
- * loading state while preserving layout structure.
- *
- * @category Feedback
- * @useCases loading state, content placeholder, lazy loading, data fetching
- * @keywords skeleton, loading, placeholder, shimmer, pulse, loader
- * @related UiSpinner, UiProgress
- */
-export interface UiSkeletonProps {
-  /**
-   * Custom width for the skeleton.
-   * Can be any valid CSS width value.
-   */
-  width?: string;
-  /**
-   * Custom height for the skeleton.
-   * Can be any valid CSS height value.
-   */
-  height?: string;
-  /**
-   * Whether to render as a rounded.
-   * @default false
-   */
-  rounded?: boolean;
-}

package/src/primitives/UiSlider/UiSlider.stories.ts

@@ -1,226 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import { ref, watch } from 'vue';
-import { UiSlider } from '.';
-
-/**
- * UiSlider lets users pick a numeric value (single thumb) or a range (multiple thumbs) by dragging.
- * Use it for filters and settings where immediate, continuous feedback is helpful.
- */
-const meta: Meta<typeof UiSlider> = {
-  title: 'Primitives/UiSlider',
-  component: UiSlider,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'object',
-      description:
-        'Controlled slider value (array of numbers). Use `[value]` for a single thumb and `[min, max]` for a range.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the slider is disabled.',
-    },
-    min: {
-      control: { type: 'number' },
-      description: 'Minimum value.',
-    },
-    max: {
-      control: { type: 'number' },
-      description: 'Maximum value.',
-    },
-    step: {
-      control: { type: 'number' },
-      description: 'Step size.',
-    },
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Slider orientation.',
-    },
-    inverted: {
-      control: 'boolean',
-      description: 'Whether the slider direction is visually inverted (low/high swapped).',
-    },
-  },
-  args: {
-    modelValue: [50],
-    disabled: false,
-    min: 0,
-    max: 100,
-    step: 1,
-    orientation: 'horizontal',
-    inverted: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof UiSlider>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiSlider } from '@aleph-alpha/ui-library'
-
-const value = ref([50])
-</script>
-
-<template>
-  <div class="w-72 space-y-3">
-    <UiSlider v-model="value" :min="0" :max="100" :step="1" />
-    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
-  </div>
-</template>`;
-
-/**
- * Single-thumb slider for selecting a single numeric value.
- * Use this for settings like volume/zoom/opacity.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiSlider },
-    setup() {
-      const value = ref<number[]>(Array.isArray(args.modelValue) ? args.modelValue : [50]);
-      watch(
-        () => args.modelValue,
-        (val) => {
-          value.value = Array.isArray(val) ? val : [50];
-        },
-      );
-      return { args, value };
-    },
-    template: `
-      <div class="w-72 space-y-3">
-        <UiSlider
-          v-model="value"
-          :disabled="args.disabled"
-          :min="args.min"
-          :max="args.max"
-          :step="args.step"
-          :orientation="args.orientation"
-          :inverted="args.inverted"
-        />
-        <div class="text-sm text-muted-foreground">Value: {{ value }}</div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: { source: { code: defaultTemplateSource } },
-  },
-};
-
-const rangeTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiSlider } from '@aleph-alpha/ui-library'
-
-const range = ref([25, 75])
-</script>
-
-<template>
-  <div class="w-72 space-y-3">
-    <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
-    <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
-  </div>
-</template>`;
-
-/**
- * Multi-thumb slider for selecting a min/max range.
- * Use this for filters like price ranges or rating ranges.
- */
-export const Range: Story = {
-  render: () => ({
-    components: { UiSlider },
-    setup() {
-      const range = ref([25, 75]);
-      return { range };
-    },
-    template: `
-      <div class="w-72 space-y-3">
-        <UiSlider v-model="range" :min="0" :max="100" :step="1" :min-steps-between-thumbs="5" />
-        <div class="text-sm text-muted-foreground">Range: {{ range[0] }} – {{ range[1] }}</div>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: rangeTemplateSource } },
-  },
-};
-
-const verticalTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiSlider } from '@aleph-alpha/ui-library'
-
-const value = ref([50])
-</script>
-
-<template>
-  <div class="flex items-center gap-6">
-    <div class="h-44">
-      <UiSlider v-model="value" orientation="vertical" />
-    </div>
-    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
-  </div>
-</template>`;
-
-/**
- * Vertical slider orientation.
- * Use this when horizontal space is limited or when matching an existing vertical control pattern.
- */
-export const Vertical: Story = {
-  render: () => ({
-    components: { UiSlider },
-    setup() {
-      const value = ref([50]);
-      return { value };
-    },
-    template: `
-      <div class="flex items-center gap-6">
-        <div class="h-44">
-          <UiSlider v-model="value" orientation="vertical" />
-        </div>
-        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: verticalTemplateSource } },
-  },
-};
-
-const disabledTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import { UiSlider } from '@aleph-alpha/ui-library'
-
-const value = ref([50])
-</script>
-
-<template>
-  <div class="w-72 space-y-3">
-    <UiSlider v-model="value" disabled />
-    <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
-  </div>
-</template>`;
-
-/**
- * Disabled state.
- * Use this when the slider is not currently applicable (e.g., gated behind another toggle).
- */
-export const Disabled: Story = {
-  render: () => ({
-    components: { UiSlider },
-    setup() {
-      const value = ref([50]);
-      return { value };
-    },
-    template: `
-      <div class="w-72 space-y-3">
-        <UiSlider v-model="value" disabled />
-        <div class="text-sm text-muted-foreground">Value: {{ value[0] }}</div>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: disabledTemplateSource } },
-  },
-};

package/src/primitives/UiSlider/UiSlider.vue

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-  import type { SliderRootEmits } from 'reka-ui';
-  import { Slider as ShadcnSlider } from '@/primitives/shadcn/slider';
-  import type { UiSliderProps, UiSliderEmits } from './types';
-
-  defineOptions({
-    name: 'UiSlider',
-  });
-
-  const props = defineProps<UiSliderProps>();
-  const emit = defineEmits<UiSliderEmits>();
-
-  function handleModelValueUpdate(
-    value: SliderRootEmits['update:modelValue'] extends [infer P] ? P : unknown,
-  ) {
-    if (Array.isArray(value) && value.every((v) => typeof v === 'number')) {
-      emit('update:modelValue', value);
-      return;
-    }
-
-    // reka-ui can emit undefined in some cases; keep our public API stable.
-    emit('update:modelValue', []);
-  }
-</script>
-
-<template>
-  <ShadcnSlider
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :disabled="props.disabled"
-    :orientation="props.orientation"
-    :dir="props.dir"
-    :inverted="props.inverted"
-    :min="props.min"
-    :max="props.max"
-    :step="props.step"
-    :min-steps-between-thumbs="props.minStepsBetweenThumbs"
-    :thumb-alignment="props.thumbAlignment"
-    :name="props.name"
-    :required="props.required"
-    @update:model-value="handleModelValueUpdate"
-    @value-commit="emit('valueCommit', $event)"
-  />
-</template>

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

@@ -1,76 +0,0 @@
-import { render } from '@testing-library/vue';
-import { describe, expect, test, vi } from 'vitest';
-import { defineComponent, h, ref } from 'vue';
-import { UiSlider } from '../index';
-
-let emitUndefinedPayload = false;
-
-vi.mock('@/primitives/shadcn/slider', () => {
-  return {
-    Slider: defineComponent({
-      name: 'ShadcnSliderMock',
-      emits: ['update:modelValue', 'valueCommit'],
-      setup(_props, { emit }) {
-        return () =>
-          h('button', {
-            type: 'button',
-            onClick: () => {
-              const payload = emitUndefinedPayload ? undefined : [51];
-              emit('update:modelValue', payload);
-              if (!emitUndefinedPayload) {
-                emit('valueCommit', [51]);
-              }
-            },
-          });
-      },
-    }),
-  };
-});
-
-describe('UiSlider', () => {
-  test('re-emits update:modelValue and valueCommit from the vendor slider', async () => {
-    const { container, emitted } = render(UiSlider, {
-      props: { modelValue: [50] },
-    });
-
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-    await (button as HTMLButtonElement).click();
-
-    expect(emitted('update:modelValue')?.[0]).toEqual([[51]]);
-    expect(emitted('valueCommit')?.[0]).toEqual([[51]]);
-  });
-
-  test('normalizes invalid update:modelValue payloads to an empty array', async () => {
-    emitUndefinedPayload = true;
-    const { container, emitted } = render(UiSlider);
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-    await (button as HTMLButtonElement).click();
-
-    expect(emitted('update:modelValue')?.[0]).toEqual([[]]);
-    emitUndefinedPayload = false;
-  });
-
-  test('supports controlled mode via v-model:modelValue', async () => {
-    const { container, getByText } = render({
-      components: { UiSlider },
-      setup() {
-        const value = ref([50]);
-        return { value };
-      },
-      template: `
-        <div>
-          <div>Value: {{ value[0] }}</div>
-          <UiSlider v-model:modelValue="value" />
-        </div>
-      `,
-    });
-
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-    await (button as HTMLButtonElement).click();
-
-    expect(getByText('Value: 51')).toBeInTheDocument();
-  });
-});

package/src/primitives/UiSlider/index.ts

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

package/src/primitives/UiSlider/types.ts

@@ -1,101 +0,0 @@
-/**
- * A range input for selecting numeric values by dragging a thumb along a track.
- * Supports single-thumb sliders via `[value]` and multi-thumb sliders via `[min, max]`.
- *
- * @category Form Inputs
- * @useCases volume control, price range, numeric input, filter range
- * @keywords slider, range, input, thumb, track, numeric
- * @related UiInput
- */
-export interface UiSliderProps {
-  /**
-   * The controlled value of the slider.
-   * Use `v-model` / `v-model:modelValue` for controlled mode.
-   */
-  modelValue?: number[];
-
-  /**
-   * The value of the slider when initially rendered (uncontrolled).
-   * @default [0]
-   */
-  defaultValue?: number[];
-
-  /**
-   * When `true`, prevents the user from interacting with the slider.
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * The orientation of the slider.
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-
-  /**
-   * The reading direction.
-   * @default 'ltr'
-   */
-  dir?: 'ltr' | 'rtl';
-
-  /**
-   * Whether the slider is visually inverted.
-   * @default false
-   */
-  inverted?: boolean;
-
-  /**
-   * The minimum value for the range.
-   * @default 0
-   */
-  min?: number;
-
-  /**
-   * The maximum value for the range.
-   * @default 100
-   */
-  max?: number;
-
-  /**
-   * The stepping interval.
-   * @default 1
-   */
-  step?: number;
-
-  /**
-   * The minimum permitted steps between multiple thumbs.
-   * @default 0
-   */
-  minStepsBetweenThumbs?: number;
-
-  /**
-   * Slider thumb alignment.
-   * - `contain`: thumbs are contained within the track bounds.
-   * - `overflow`: thumbs can overflow the track bounds.
-   * @default 'contain'
-   */
-  thumbAlignment?: 'contain' | 'overflow';
-
-  /**
-   * Optional form field name (only relevant when used inside a form).
-   */
-  name?: string;
-
-  /**
-   * Whether the form field is required.
-   * @default false
-   */
-  required?: boolean;
-}
-
-export interface UiSliderEmits {
-  /**
-   * Emitted when the slider value changes.
-   */
-  (e: 'update:modelValue', value: number[]): void;
-
-  /**
-   * Emitted when the value changes at the end of an interaction (commit).
-   */
-  (e: 'valueCommit', value: number[]): void;
-}

package/src/primitives/UiSpinner/UiSpinner.stories.ts

@@ -1,143 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import UiSpinner from './UiSpinner.vue';
-
-const meta: Meta<typeof UiSpinner> = {
-  title: 'Primitives/UiSpinner',
-  component: UiSpinner,
-  tags: ['autodocs'],
-  argTypes: {
-    ariaLabel: {
-      control: 'text',
-      description: 'Accessible label for the spinner (announced by screen readers)',
-    },
-    class: {
-      control: 'text',
-      description: 'Additional CSS classes to apply to the spinner',
-    },
-  },
-  args: {
-    ariaLabel: 'Loading',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof UiSpinner>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { UiSpinner } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <UiSpinner />
-</template>`;
-
-/**
- * Default spinner with standard size.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: { UiSpinner },
-    setup() {
-      return { args };
-    },
-    template: '<UiSpinner :aria-label="args.ariaLabel" :class="args.class" />',
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: defaultTemplateSource,
-      },
-    },
-  },
-};
-
-const sizesTemplateSource = `<script setup lang="ts">
-import { UiSpinner } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <div class="flex items-end gap-6">
-    <div class="flex flex-col items-center gap-2">
-      <span class="text-muted-foreground text-xs">default</span>
-      <UiSpinner />
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <span class="text-muted-foreground text-xs">size-6</span>
-      <UiSpinner class="size-6" />
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <span class="text-muted-foreground text-xs">size-8</span>
-      <UiSpinner class="size-8" />
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <span class="text-muted-foreground text-xs">size-12</span>
-      <UiSpinner class="size-12" />
-    </div>
-  </div>
-</template>`;
-
-/**
- * Spinner sizes using Tailwind classes. Default is size-4.
- */
-export const Sizes: Story = {
-  render: () => ({
-    components: { UiSpinner },
-    template: `<div class="flex items-end gap-6">
-      <div class="flex flex-col items-center gap-2">
-        <span class="text-muted-foreground text-xs">default</span>
-        <UiSpinner />
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <span class="text-muted-foreground text-xs">size-6</span>
-        <UiSpinner class="size-6" />
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <span class="text-muted-foreground text-xs">size-8</span>
-        <UiSpinner class="size-8" />
-      </div>
-      <div class="flex flex-col items-center gap-2">
-        <span class="text-muted-foreground text-xs">size-12</span>
-        <UiSpinner class="size-12" />
-      </div>
-    </div>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: sizesTemplateSource,
-      },
-    },
-  },
-};
-
-const inlineTemplateSource = `<script setup lang="ts">
-import { UiSpinner } from '@aleph-alpha/ui-library'
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <UiSpinner />
-    <span>Loading...</span>
-  </div>
-</template>`;
-
-/**
- * Spinner used inline with text.
- */
-export const InlineWithText: Story = {
-  render: () => ({
-    components: { UiSpinner },
-    template: `<div class="flex items-center gap-2">
-      <UiSpinner />
-      <span>Loading...</span>
-    </div>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: inlineTemplateSource,
-      },
-    },
-  },
-};

package/src/primitives/UiSpinner/UiSpinner.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-  import { Spinner as ShadcnSpinner } from '@/primitives/shadcn/spinner';
-  import type { UiSpinnerProps } from './types';
-
-  defineOptions({
-    name: 'UiSpinner',
-  });
-
-  const props = withDefaults(defineProps<UiSpinnerProps>(), {
-    ariaLabel: 'Loading',
-  });
-</script>
-
-<template>
-  <ShadcnSpinner :aria-label="props.ariaLabel" />
-</template>

package/src/primitives/UiSpinner/types.ts

@@ -1,16 +0,0 @@
-/**
- * An animated loading indicator. Use while content is loading
- * or an action is processing.
- *
- * @category Feedback
- * @useCases loading state, processing, waiting, fetching data
- * @keywords spinner, loading, loader, wait, progress, animation
- * @related UiProgress
- */
-export interface UiSpinnerProps {
-  /**
-   * Accessible label for the spinner.
-   * @default 'Loading'
-   */
-  ariaLabel?: string;
-}