@kitnai/chat 0.1.0

package/src/components/image.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { Image } from './image';
+
+// Compact SVG chat typing icon as base64
+const chatIconBase64 =
+  'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHJ4PSIxMCIgZmlsbD0iIzdjM2FlZCIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjQiIHI9IjQiIGZpbGw9IiNmZmYiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSI0IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMzIiIGN5PSIyNCIgcj0iNCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==';
+
+const meta = {
+  title: 'Components/Image',
+  component: Image,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'Renders an image from a `base64` string or a `uint8Array`, building a data URL or object URL automatically; shows a pulsing placeholder until a source is available.',
+          '**When to use:** to display model-generated or attached images supplied as raw bytes / base64 (the `GeneratedImageLike` shape) rather than a remote URL.',
+          '**How to use:** pass `base64` + `mediaType` (or `uint8Array` + `mediaType`) and an `alt` description; size and style via `class`.',
+          '**Placement:** inside assistant messages, attachment previews, or anywhere a generated image needs to be shown.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    base64: {
+      control: 'text',
+      description: 'Base64-encoded image data. Combined with `mediaType` to form a data URL.',
+    },
+    uint8Array: {
+      control: 'object',
+      description: 'Raw image bytes. Combined with `mediaType` to form an object URL.',
+    },
+    mediaType: {
+      control: 'text',
+      description: 'MIME type of the image data, e.g. `image/png` or `image/svg+xml`.',
+      table: { defaultValue: { summary: 'image/png' } },
+    },
+    alt: {
+      control: 'text',
+      description: 'Alternative text describing the image (also used on the placeholder).',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes for the image / placeholder element.',
+    },
+  },
+  args: {
+    base64: chatIconBase64,
+    mediaType: 'image/svg+xml',
+    alt: 'Compact gradient chat icon',
+    class: 'h-24 w-24 rounded-md',
+  },
+  render: (args) => <Image {...args} />,
+} satisfies Meta<typeof Image>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Image } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — swap the base64 data, media type, and sizing classes. */
+export const Playground: Story = {
+  ...src(`<Image
+  base64={chatIconBase64}
+  mediaType="image/svg+xml"
+  alt="Compact gradient chat icon"
+  class="h-24 w-24 rounded-md"
+/>`),
+};
+
+export const Basic: Story = {
+  args: { class: 'h-24 w-24 rounded-md' },
+  ...src(`<Image base64={chatIconBase64} mediaType="image/svg+xml" alt="Compact gradient chat icon" class="h-24 w-24 rounded-md" />`),
+};
+
+export const CustomSize: Story = {
+  args: { alt: 'Large preview', class: 'h-64 w-64 rounded-lg' },
+  ...src(`<Image base64={chatIconBase64} mediaType="image/svg+xml" alt="Large preview" class="h-64 w-64 rounded-lg" />`),
+};
+
+/** Placeholder state shown while no `base64`/`uint8Array` source is available (showcase). */
+export const Placeholder: Story = {
+  render: () => <Image alt="Loading image" class="h-24 w-24 rounded-md" />,
+  ...src(`<Image alt="Loading image" class="h-24 w-24 rounded-md" />`),
+};

package/src/components/image.tsx

@@ -0,0 +1,67 @@
+import { type JSX, splitProps, createSignal, createEffect, onCleanup, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export interface GeneratedImageLike {
+  base64?: string;
+  uint8Array?: Uint8Array;
+  mediaType?: string;
+}
+
+export interface ImageProps extends GeneratedImageLike {
+  alt: string;
+  class?: string;
+}
+
+function getImageSrc(base64?: string, mediaType?: string): string | undefined {
+  if (base64 && mediaType) {
+    return `data:${mediaType};base64,${base64}`;
+  }
+  return undefined;
+}
+
+function Image(props: ImageProps) {
+  const [local, rest] = splitProps(props, ['base64', 'uint8Array', 'mediaType', 'class', 'alt']);
+  const [objectUrl, setObjectUrl] = createSignal<string | undefined>(undefined);
+
+  const mediaType = () => local.mediaType ?? 'image/png';
+
+  createEffect(() => {
+    const arr = local.uint8Array;
+    const mt = mediaType();
+    if (arr && mt) {
+      const blob = new Blob([arr as BlobPart], { type: mt });
+      const url = URL.createObjectURL(blob);
+      setObjectUrl(url);
+      onCleanup(() => URL.revokeObjectURL(url));
+    } else {
+      setObjectUrl(undefined);
+    }
+  });
+
+  const src = () => getImageSrc(local.base64, mediaType()) ?? objectUrl();
+
+  return (
+    <Show
+      when={src()}
+      fallback={
+        <div
+          aria-label={local.alt}
+          role="img"
+          class={cn(
+            'h-auto max-w-full animate-pulse overflow-hidden rounded-md bg-muted',
+            local.class
+          )}
+        />
+      }
+    >
+      <img
+        src={src()}
+        alt={local.alt}
+        class={cn('h-auto max-w-full overflow-hidden rounded-md', local.class)}
+        role="img"
+      />
+    </Show>
+  );
+}
+
+export { Image };

package/src/components/loader.stories.tsx

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { For } from 'solid-js';
+import { Loader, type LoaderVariant, type LoaderSize } from './loader';
+
+const meta = {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      controls: { exclude: ['use:eventListener'] },
+      description: {
+        component: [
+          'A loading indicator with twelve animated **variants** (spinners, dots, bars, terminal, and text-based) in three **sizes**.',
+          '**When to use:** while waiting on an async operation — a streaming response, a tool call, or any pending state.',
+          '**How to use:** pick a `variant` and `size`. Text variants (`text-blink`, `text-shimmer`, `loading-dots`) display the `text` prop (defaults to "Thinking").',
+          '**Placement:** inside assistant message bubbles, send-button states, empty states, or anywhere an in-progress signal is needed.',
+        ].join('\n\n'),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
+        'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
+      ],
+      description: 'Animation style of the loader.',
+      table: { defaultValue: { summary: 'circular' } },
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Loader size preset.',
+      table: { defaultValue: { summary: 'md' } },
+    },
+    text: {
+      control: 'text',
+      description: 'Label shown by the text variants (`text-blink`, `text-shimmer`, `loading-dots`).',
+      table: { defaultValue: { summary: 'Thinking' } },
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes for the loader element.',
+    },
+  },
+  args: {
+    variant: 'circular',
+    size: 'md',
+    text: 'Thinking',
+  },
+  render: (args) => <Loader {...args} />,
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import { Loader } from '@kitnai/chat';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — switch variant, size, and text to explore every loader. */
+export const Playground: Story = {
+  ...src(`<Loader variant="circular" size="md" />`),
+};
+
+export const Classic: Story = {
+  args: { variant: 'classic' },
+  ...src(`<Loader variant="classic" size="md" />`),
+};
+
+export const Pulse: Story = {
+  args: { variant: 'pulse' },
+  ...src(`<Loader variant="pulse" size="md" />`),
+};
+
+export const PulseDot: Story = {
+  args: { variant: 'pulse-dot' },
+  ...src(`<Loader variant="pulse-dot" size="md" />`),
+};
+
+export const Dots: Story = {
+  args: { variant: 'dots' },
+  ...src(`<Loader variant="dots" size="md" />`),
+};
+
+export const Typing: Story = {
+  args: { variant: 'typing' },
+  ...src(`<Loader variant="typing" size="md" />`),
+};
+
+export const Wave: Story = {
+  args: { variant: 'wave' },
+  ...src(`<Loader variant="wave" size="md" />`),
+};
+
+export const Bars: Story = {
+  args: { variant: 'bars' },
+  ...src(`<Loader variant="bars" size="md" />`),
+};
+
+export const Terminal: Story = {
+  args: { variant: 'terminal' },
+  ...src(`<Loader variant="terminal" size="md" />`),
+};
+
+export const TextBlink: Story = {
+  args: { variant: 'text-blink', text: 'Thinking' },
+  ...src(`<Loader variant="text-blink" text="Thinking" size="md" />`),
+};
+
+export const TextShimmer: Story = {
+  args: { variant: 'text-shimmer', text: 'Analyzing' },
+  ...src(`<Loader variant="text-shimmer" text="Analyzing" size="md" />`),
+};
+
+export const LoadingDots: Story = {
+  args: { variant: 'loading-dots', text: 'Processing' },
+  ...src(`<Loader variant="loading-dots" text="Processing" size="md" />`),
+};
+
+const allVariants: LoaderVariant[] = [
+  'circular', 'classic', 'pulse', 'pulse-dot', 'dots', 'typing',
+  'wave', 'bars', 'terminal', 'text-blink', 'text-shimmer', 'loading-dots',
+];
+
+const allSizes: LoaderSize[] = ['sm', 'md', 'lg'];
+
+/** Every variant across every size (showcase — not driven by controls). */
+export const AllVariantsGrid: Story = {
+  render: () => (
+    <div class="space-y-6">
+      <For each={allVariants}>
+        {(variant) => (
+          <div class="flex items-center gap-6">
+            <span class="w-28 text-sm text-muted-foreground font-mono">{variant}</span>
+            <For each={allSizes}>
+              {(size) => (
+                <div class="flex items-center justify-center w-24 h-10">
+                  <Loader
+                    variant={variant}
+                    size={size}
+                    text={['text-blink', 'text-shimmer', 'loading-dots'].includes(variant) ? 'Loading' : undefined}
+                  />
+                </div>
+              )}
+            </For>
+          </div>
+        )}
+      </For>
+    </div>
+  ),
+  ...src(`<Loader variant="circular" size="sm" />
+<Loader variant="circular" size="md" />
+<Loader variant="circular" size="lg" />`),
+};
+
+/** A single variant rendered at all three sizes (showcase). */
+export const AllSizes: Story = {
+  render: () => (
+    <div class="flex items-end gap-6">
+      <div class="text-center space-y-2">
+        <Loader variant="circular" size="sm" />
+        <p class="text-xs text-muted-foreground">Small</p>
+      </div>
+      <div class="text-center space-y-2">
+        <Loader variant="circular" size="md" />
+        <p class="text-xs text-muted-foreground">Medium</p>
+      </div>
+      <div class="text-center space-y-2">
+        <Loader variant="circular" size="lg" />
+        <p class="text-xs text-muted-foreground">Large</p>
+      </div>
+    </div>
+  ),
+  ...src(`<Loader variant="circular" size="sm" />
+<Loader variant="circular" size="md" />
+<Loader variant="circular" size="lg" />`),
+};

package/src/components/loader.tsx

@@ -0,0 +1,333 @@
+import { Switch, Match, For, Show } from 'solid-js';
+import { cn } from '../utils/cn';
+
+export type LoaderVariant =
+  | 'circular'
+  | 'classic'
+  | 'pulse'
+  | 'pulse-dot'
+  | 'dots'
+  | 'typing'
+  | 'wave'
+  | 'bars'
+  | 'terminal'
+  | 'text-blink'
+  | 'text-shimmer'
+  | 'loading-dots';
+
+export type LoaderSize = 'sm' | 'md' | 'lg';
+
+export interface LoaderProps {
+  variant?: LoaderVariant;
+  size?: LoaderSize;
+  text?: string;
+  class?: string;
+}
+
+// --- CircularLoader ---
+
+export function CircularLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
+  return (
+    <div
+      class={cn(
+        'border-primary animate-spin rounded-full border-2 border-t-transparent',
+        sizeClasses[size()],
+        props.class
+      )}
+    >
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- ClassicLoader ---
+
+export function ClassicLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
+  const barSizes = {
+    sm: { height: '6px', width: '1.5px' },
+    md: { height: '8px', width: '2px' },
+    lg: { height: '10px', width: '2.5px' },
+  };
+  return (
+    <div class={cn('relative', sizeClasses[size()], props.class)}>
+      <div class="absolute h-full w-full">
+        <For each={Array.from({ length: 12 }, (_, i) => i)}>
+          {(i) => (
+            <div
+              class="bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full"
+              style={{
+                top: '0',
+                left: '50%',
+                'margin-left': size() === 'sm' ? '-0.75px' : size() === 'lg' ? '-1.25px' : '-1px',
+                'transform-origin': `${size() === 'sm' ? '0.75px' : size() === 'lg' ? '1.25px' : '1px'} ${size() === 'sm' ? '10px' : size() === 'lg' ? '14px' : '12px'}`,
+                transform: `rotate(${i * 30}deg)`,
+                opacity: 0,
+                'animation-delay': `${i * 0.1}s`,
+                height: barSizes[size()].height,
+                width: barSizes[size()].width,
+              }}
+            />
+          )}
+        </For>
+      </div>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- PulseLoader ---
+
+export function PulseLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const sizeClasses = { sm: 'size-4', md: 'size-5', lg: 'size-6' };
+  return (
+    <div class={cn('relative', sizeClasses[size()], props.class)}>
+      <div class="border-primary absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2" />
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- PulseDotLoader ---
+
+export function PulseDotLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const sizeClasses = { sm: 'size-1', md: 'size-2', lg: 'size-3' };
+  return (
+    <div
+      class={cn(
+        'bg-primary animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full',
+        sizeClasses[size()],
+        props.class
+      )}
+    >
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- DotsLoader ---
+
+export function DotsLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const dotSizes = { sm: 'h-1.5 w-1.5', md: 'h-2 w-2', lg: 'h-2.5 w-2.5' };
+  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
+  return (
+    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
+      <For each={[0, 1, 2]}>
+        {(i) => (
+          <div
+            class={cn(
+              'bg-primary animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full',
+              dotSizes[size()]
+            )}
+            style={{ 'animation-delay': `${i * 160}ms` }}
+          />
+        )}
+      </For>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- TypingLoader ---
+
+export function TypingLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const dotSizes = { sm: 'h-1 w-1', md: 'h-1.5 w-1.5', lg: 'h-2 w-2' };
+  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
+  return (
+    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
+      <For each={[0, 1, 2]}>
+        {(i) => (
+          <div
+            class={cn(
+              'bg-primary animate-[typing_1s_infinite] rounded-full',
+              dotSizes[size()]
+            )}
+            style={{ 'animation-delay': `${i * 250}ms` }}
+          />
+        )}
+      </For>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- WaveLoader ---
+
+export function WaveLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const barWidths = { sm: 'w-0.5', md: 'w-0.5', lg: 'w-1' };
+  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
+  const heights: Record<LoaderSize, string[]> = {
+    sm: ['6px', '9px', '12px', '9px', '6px'],
+    md: ['8px', '12px', '16px', '12px', '8px'],
+    lg: ['10px', '15px', '20px', '15px', '10px'],
+  };
+  return (
+    <div class={cn('flex items-center gap-0.5', containerSizes[size()], props.class)}>
+      <For each={[0, 1, 2, 3, 4]}>
+        {(i) => (
+          <div
+            class={cn(
+              'bg-primary animate-[wave_1s_ease-in-out_infinite] rounded-full',
+              barWidths[size()]
+            )}
+            style={{
+              'animation-delay': `${i * 100}ms`,
+              height: heights[size()][i],
+            }}
+          />
+        )}
+      </For>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- BarsLoader ---
+
+export function BarsLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const barWidths = { sm: 'w-1', md: 'w-1.5', lg: 'w-2' };
+  const containerSizes = { sm: 'h-4 gap-1', md: 'h-5 gap-1.5', lg: 'h-6 gap-2' };
+  return (
+    <div class={cn('flex', containerSizes[size()], props.class)}>
+      <For each={[0, 1, 2]}>
+        {(i) => (
+          <div
+            class={cn(
+              'bg-primary h-full animate-[wave-bars_1.2s_ease-in-out_infinite]',
+              barWidths[size()]
+            )}
+            style={{ 'animation-delay': `${i * 0.2}s` }}
+          />
+        )}
+      </For>
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- TerminalLoader ---
+
+export function TerminalLoader(props: { class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const cursorSizes = { sm: 'h-3 w-1.5', md: 'h-4 w-2', lg: 'h-5 w-2.5' };
+  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
+  const containerSizes = { sm: 'h-4', md: 'h-5', lg: 'h-6' };
+  return (
+    <div class={cn('flex items-center space-x-1', containerSizes[size()], props.class)}>
+      <span class={cn('text-primary font-mono', textSizes[size()])}>{'>'}</span>
+      <div class={cn('bg-primary animate-[blink_1s_step-end_infinite]', cursorSizes[size()])} />
+      <span class="sr-only">Loading</span>
+    </div>
+  );
+}
+
+// --- TextBlinkLoader ---
+
+export function TextBlinkLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
+  return (
+    <div
+      class={cn(
+        'animate-[text-blink_2s_ease-in-out_infinite] font-medium',
+        textSizes[size()],
+        props.class
+      )}
+    >
+      {props.text ?? 'Thinking'}
+    </div>
+  );
+}
+
+// --- TextShimmerLoader ---
+
+export function TextShimmerLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
+  return (
+    <div
+      class={cn(
+        'bg-[linear-gradient(to_right,var(--color-muted-foreground)_40%,var(--color-foreground)_60%,var(--color-muted-foreground)_80%)]',
+        'bg-size-[200%_auto] bg-clip-text font-medium text-transparent',
+        'animate-[shimmer_4s_infinite_linear]',
+        textSizes[size()],
+        props.class
+      )}
+    >
+      {props.text ?? 'Thinking'}
+    </div>
+  );
+}
+
+// --- TextDotsLoader ---
+
+export function TextDotsLoader(props: { text?: string; class?: string; size?: LoaderSize }) {
+  const size = () => props.size ?? 'md';
+  const textSizes = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
+  return (
+    <div class={cn('inline-flex items-center', props.class)}>
+      <span class={cn('text-primary font-medium', textSizes[size()])}>
+        {props.text ?? 'Thinking'}
+      </span>
+      <span class="inline-flex">
+        <span class="text-primary animate-[loading-dots_1.4s_infinite_0.2s]">.</span>
+        <span class="text-primary animate-[loading-dots_1.4s_infinite_0.4s]">.</span>
+        <span class="text-primary animate-[loading-dots_1.4s_infinite_0.6s]">.</span>
+      </span>
+    </div>
+  );
+}
+
+// --- Loader (variant dispatcher) ---
+
+export function Loader(props: LoaderProps) {
+  return (
+    <Switch fallback={<CircularLoader size={props.size} class={props.class} />}>
+      <Match when={props.variant === 'circular'}>
+        <CircularLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'classic'}>
+        <ClassicLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'pulse'}>
+        <PulseLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'pulse-dot'}>
+        <PulseDotLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'dots'}>
+        <DotsLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'typing'}>
+        <TypingLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'wave'}>
+        <WaveLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'bars'}>
+        <BarsLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'terminal'}>
+        <TerminalLoader size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'text-blink'}>
+        <TextBlinkLoader text={props.text} size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'text-shimmer'}>
+        <TextShimmerLoader text={props.text} size={props.size} class={props.class} />
+      </Match>
+      <Match when={props.variant === 'loading-dots'}>
+        <TextDotsLoader text={props.text} size={props.size} class={props.class} />
+      </Match>
+    </Switch>
+  );
+}