@zentauri-ui/zentauri-components 1.9.2 → 2.1.0

package/src/ui/combobox/combobox.test.tsx

@@ -0,0 +1,292 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "./combobox-base";
+
+function BasicCombobox({
+  multiple = false,
+  defaultValue = [],
+  onChange,
+}: {
+  multiple?: boolean;
+  defaultValue?: string[];
+  onChange?: (v: string[]) => void;
+}) {
+  return (
+    <Combobox
+      multiple={multiple}
+      defaultValue={defaultValue}
+      onChange={onChange}
+    >
+      <ComboboxTrigger>
+        <ComboboxValue placeholder="Pick a fruit" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxSearch placeholder="Search fruits..." />
+        <ComboboxList>
+          <ComboboxItem value="apple">Apple</ComboboxItem>
+          <ComboboxItem value="banana">Banana</ComboboxItem>
+          <ComboboxItem value="cherry">Cherry</ComboboxItem>
+          <ComboboxItem value="disabled-grape" disabled>
+            Grape
+          </ComboboxItem>
+          <ComboboxEmpty>No fruit found.</ComboboxEmpty>
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+describe("Combobox", () => {
+  it("renders the trigger as a button", () => {
+    render(<BasicCombobox />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "button");
+  });
+
+  it("shows placeholder when nothing is selected", () => {
+    render(<BasicCombobox />);
+    expect(
+      screen.getByRole("button", { name: /pick a fruit/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows selected label in trigger after selection", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("button")).toHaveTextContent("Apple");
+  });
+
+  it("opens the panel and lists options on trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /cherry/i })).toBeInTheDocument();
+  });
+
+  it("closes the panel on second trigger click", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    await user.click(trigger);
+    await screen.findByRole("option", { name: /apple/i });
+    await user.click(trigger);
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("closes after picking one value in single mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple={false} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /banana/i }));
+    expect(
+      screen.queryByRole("option", { name: /banana/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole("button")).toHaveTextContent("Banana");
+  });
+
+  it("keeps panel open after picking in multiple mode", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox multiple />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+
+  it("marks selected option with aria-selected=true", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox defaultValue={["apple"]} />);
+    await user.click(screen.getByRole("button"));
+    const apple = await screen.findByRole("option", { name: /apple/i });
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(apple).toHaveAttribute("aria-selected", "true");
+    expect(banana).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("calls onChange when a value is toggled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    await user.click(await screen.findByRole("option", { name: /cherry/i }));
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("deselects a value in multiple mode on second click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <BasicCombobox multiple defaultValue={["apple"]} onChange={onChange} />,
+    );
+    await user.click(screen.getByRole("button"));
+    await user.click(await screen.findByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("marks a disabled option with aria-disabled and ignores clicks", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const grape = await screen.findByRole("option", { name: /grape/i });
+    expect(grape).toHaveAttribute("aria-disabled", "true");
+    await user.click(grape);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("Combobox — search and filtering", () => {
+  it("renders a search input inside the panel", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    expect(search).toBeInTheDocument();
+  });
+
+  it("auto-focuses the search input when panel opens", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+  });
+
+  it("filters options as the user types", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "ban");
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("option", { name: /cherry/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the empty state when no options match", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await user.type(search, "xyz");
+    expect(screen.getByText(/no fruit found/i)).toBeInTheDocument();
+  });
+
+  it("clears the filter and restores all options after closing and reopening", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await user.type(await screen.findByRole("combobox"), "ban");
+    await user.click(trigger);
+    await user.click(trigger);
+    expect(
+      await screen.findByRole("option", { name: /apple/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /banana/i })).toBeInTheDocument();
+  });
+});
+
+describe("Combobox — keyboard navigation", () => {
+  it("closes the panel on Escape", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button", { name: /pick a fruit/i });
+    await user.click(trigger);
+    await screen.findByRole("combobox");
+    await user.keyboard("{Escape}");
+    expect(
+      screen.queryByRole("option", { name: /apple/i }),
+    ).not.toBeInTheDocument();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("moves highlight through options with ArrowDown/ArrowUp", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    const apple = screen.getByRole("option", { name: /apple/i });
+    expect(apple).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowDown}");
+    const banana = screen.getByRole("option", { name: /banana/i });
+    expect(banana).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("{ArrowUp}");
+    expect(apple).toHaveAttribute("data-active", "true");
+  });
+
+  it("selects the highlighted option on Enter", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["apple"]);
+  });
+
+  it("skips disabled options during keyboard navigation", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<BasicCombobox onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: /pick a fruit/i }));
+    const search = await screen.findByRole("combobox");
+    await waitFor(() => expect(search).toHaveFocus());
+
+    await user.keyboard("{ArrowUp}");
+    expect(screen.getByRole("option", { name: /cherry/i })).toHaveAttribute(
+      "data-active",
+      "true",
+    );
+    expect(screen.getByRole("option", { name: /grape/i })).not.toHaveAttribute(
+      "data-active",
+    );
+
+    await user.keyboard("{Enter}");
+    expect(onChange).toHaveBeenCalledWith(["cherry"]);
+  });
+
+  it("wires trigger aria attributes to the listbox", async () => {
+    const user = userEvent.setup();
+    render(<BasicCombobox />);
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    const listbox = screen.getByRole("listbox");
+    const controls = trigger.getAttribute("aria-controls");
+    expect(listbox).toHaveAttribute("id", controls);
+  });
+});

package/src/ui/combobox/combobox.tsx

@@ -0,0 +1,8 @@
+import { Combobox as ComboboxBase } from "./combobox-base";
+import type { ComboboxProps } from "./types";
+
+export const Combobox = (props: ComboboxProps) => {
+  return <ComboboxBase {...props} />;
+};
+
+Combobox.displayName = "Combobox";

package/src/ui/combobox/index.ts

@@ -0,0 +1,33 @@
+"use client";
+
+export {
+  Combobox,
+  ComboboxContext,
+  useCombobox,
+  ComboboxTrigger,
+  ComboboxValue,
+  ComboboxContent,
+  ComboboxSearch,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from "./combobox-base";
+export type {
+  ComboboxProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+  ComboboxContentProps,
+  ComboboxSearchProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxEmptyProps,
+  ComboboxOption,
+  ComboboxContextType,
+  ComboboxAppearance,
+} from "./types";
+export {
+  comboboxTriggerVariants,
+  comboboxItemVariants,
+  comboboxListVariants,
+  comboboxContentVariants,
+} from "./variants";

package/src/ui/combobox/types.ts

@@ -0,0 +1,91 @@
+import type { VariantProps } from "class-variance-authority";
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  RefObject,
+} from "react";
+
+import type { zuiComboboxContentAppearances } from "../../design-system/combobox";
+import type { comboboxTriggerVariants } from "./variants";
+
+export type ComboboxOption = {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+};
+
+export type ComboboxAppearance = keyof typeof zuiComboboxContentAppearances;
+
+export type ComboboxContextType = {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  query: string;
+  setQuery: (q: string) => void;
+  selected: string[];
+  toggleValue: (v: string) => void;
+  isSelected: (v: string) => boolean;
+  multiple: boolean;
+  options: ComboboxOption[];
+  registerOption: (opt: ComboboxOption) => void;
+  visibleValues: string[];
+  isVisible: (v: string) => boolean;
+  activeValue: string | null;
+  setActiveValue: (v: string | null) => void;
+  triggerId: string;
+  listboxId: string;
+  searchRef: RefObject<HTMLInputElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+
+export type ComboboxProps = {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  multiple?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+type ComboboxTriggerVariantProps = VariantProps<typeof comboboxTriggerVariants>;
+
+export type ComboboxTriggerProps = ComboboxTriggerVariantProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
+    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+  };
+
+export type ComboboxValueProps = HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: ReactNode;
+};
+
+export type ComboboxContentProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  appearance?: ComboboxAppearance;
+  size?: "sm" | "md" | "lg";
+  spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl";
+};
+
+export type ComboboxSearchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type"
+> & {
+  className?: string;
+  ref?: React.Ref<HTMLInputElement>;
+};
+
+export type ComboboxListProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
+
+export type ComboboxItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+  appearance?: ComboboxAppearance;
+};
+
+export type ComboboxEmptyProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};

package/src/ui/combobox/variants.ts

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiComboboxContentAppearances,
+  zuiComboboxContentBase,
+  zuiComboboxDisabled,
+  zuiComboboxItemAppearances,
+  zuiComboboxItemBase,
+  zuiComboboxListAppearances,
+  zuiComboboxListBase,
+  zuiComboboxSizes,
+  zuiComboboxSpacing,
+  zuiComboboxTriggerBase,
+  zuiComboboxTriggerVariants,
+} from "../../design-system/combobox";
+
+export const comboboxTriggerVariants = cva(zuiComboboxTriggerBase, {
+  variants: {
+    variant: zuiComboboxTriggerVariants,
+    size: zuiComboboxSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+export const comboboxItemVariants = cva(zuiComboboxItemBase, {
+  variants: {
+    appearance: zuiComboboxItemAppearances,
+    disabled: zuiComboboxDisabled,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxListVariants = cva(zuiComboboxListBase, {
+  variants: {
+    appearance: zuiComboboxListAppearances,
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const comboboxContentVariants = cva(zuiComboboxContentBase, {
+  variants: {
+    appearance: zuiComboboxContentAppearances,
+    size: zuiComboboxSizes,
+    spacing: zuiComboboxSpacing,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    spacing: "default",
+  },
+});

package/src/ui/search/search-suggestion-list.tsx

@@ -8,7 +8,7 @@ import { searchSuggestionOptionDomId } from "./search-suggestion-utils";
 import type { SearchSuggestionListProps } from "./types";
 
 const rowClassName =
-  "flex w-full flex-col gap-0.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors dark:hover:bg-white/5 hover:bg-black/10 focus-visible:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50";
+  "flex w-full flex-col gap-0.5 rounded-[var(--zui-search-suggestion-radius,var(--zui-radius,0.5rem))] px-3 py-2.5 text-left text-sm transition-colors hover:bg-[var(--zui-search-suggestion-bg-hover,var(--zui-surface-hover,#0000001a))] dark:hover:bg-[var(--zui-search-suggestion-bg-hover-dark,var(--zui-surface-hover-dark,#ffffff0d))] focus-visible:bg-[var(--zui-search-suggestion-bg-focus,var(--zui-surface-hover,#ffffff0d))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-search-suggestion-ring-focus,var(--zui-focus-ring,#22d3ee80))]";
 
 export function SearchSuggestionList({
   items,
@@ -25,7 +25,7 @@ export function SearchSuggestionList({
       <div
         data-slot="search-suggestion-list-empty"
         className={cn(
-          "px-1 py-6 text-center text-sm text-slate-900 dark:text-slate-200",
+          "px-1 py-6 text-center text-sm text-[color:var(--zui-search-empty-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-search-empty-fg-dark,var(--zui-fg-dark,#e2e8f0))]",
           className,
         )}
       >
@@ -78,7 +78,7 @@ export function SearchSuggestionList({
               {showGroup ? (
                 <div
                   role="presentation"
-                  className="sticky rounded-lg top-0 z-1 dark:bg-slate-950/95 bg-slate-50/95 px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-slate-900 dark:text-slate-200 backdrop-blur-sm"
+                  className="sticky top-0 z-1 rounded-[var(--zui-search-group-radius,var(--zui-radius,0.5rem))] bg-[var(--zui-search-group-bg,var(--zui-surface-muted,#f8fafcf2))] px-2 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-[color:var(--zui-search-group-fg,var(--zui-fg,#0f172a))] backdrop-blur-sm dark:bg-[var(--zui-search-group-bg-dark,var(--zui-surface-muted-dark,#020617f2))] dark:text-[color:var(--zui-search-group-fg-dark,var(--zui-fg-dark,#e2e8f0))]"
                 >
                   {item.group}
                 </div>
@@ -89,16 +89,21 @@ export function SearchSuggestionList({
                 role={useListbox ? "option" : undefined}
                 aria-selected={useListbox ? isActive : undefined}
                 data-active={isActive ? "" : undefined}
-                className={cn(rowClassName, isActive ? "bg-white/5" : null)}
+                className={cn(
+                  rowClassName,
+                  isActive
+                    ? "bg-[var(--zui-search-suggestion-bg-active,var(--zui-surface-hover,#ffffff0d))]"
+                    : null,
+                )}
                 onMouseEnter={() => onActiveIdChange?.(item.id)}
                 onFocus={() => onActiveIdChange?.(item.id)}
                 onClick={() => onSelect(item.id)}
               >
-                <span className="font-medium text-slate-900 dark:text-slate-100">
+                <span className="font-medium text-[color:var(--zui-search-suggestion-label-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-search-suggestion-label-fg-dark,var(--zui-fg-dark,#f1f5f9))]">
                   {item.label}
                 </span>
                 {item.description ? (
-                  <span className="truncate text-xs text-slate-900 dark:text-slate-200">
+                  <span className="truncate text-xs text-[color:var(--zui-search-suggestion-description-fg,var(--zui-fg-muted,#0f172a))] dark:text-[color:var(--zui-search-suggestion-description-fg-dark,var(--zui-fg-muted-dark,#e2e8f0))]">
                     {item.description}
                   </span>
                 ) : null}

package/src/ui/skeleton/variants.ts

@@ -145,6 +145,111 @@ export const skeletonVariants = cva(zuiSkeletonBase, {
       shimmerTone: "gradient-orange",
       class: skeletonShimmerGradientClasses["gradient-orange"],
     },
+    {
+      animation: "shimmer",
+      shimmerTone: "blue",
+      class: skeletonShimmerGradientClasses.blue,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "cyan",
+      class: skeletonShimmerGradientClasses.cyan,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "green",
+      class: skeletonShimmerGradientClasses.green,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "lime",
+      class: skeletonShimmerGradientClasses.lime,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "mint",
+      class: skeletonShimmerGradientClasses.mint,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "ocean",
+      class: skeletonShimmerGradientClasses.ocean,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "sapphire",
+      class: skeletonShimmerGradientClasses.sapphire,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "lavender",
+      class: skeletonShimmerGradientClasses.lavender,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "ruby",
+      class: skeletonShimmerGradientClasses.ruby,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "red",
+      class: skeletonShimmerGradientClasses.red,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "slate",
+      class: skeletonShimmerGradientClasses.slate,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "zinc",
+      class: skeletonShimmerGradientClasses.zinc,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "stone",
+      class: skeletonShimmerGradientClasses.stone,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "royal",
+      class: skeletonShimmerGradientClasses.royal,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "electric",
+      class: skeletonShimmerGradientClasses.electric,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "forest",
+      class: skeletonShimmerGradientClasses.forest,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "sunset",
+      class: skeletonShimmerGradientClasses.sunset,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "magenta",
+      class: skeletonShimmerGradientClasses.magenta,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "crimson",
+      class: skeletonShimmerGradientClasses.crimson,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "aqua",
+      class: skeletonShimmerGradientClasses.aqua,
+    },
+    {
+      animation: "shimmer",
+      shimmerTone: "plum",
+      class: skeletonShimmerGradientClasses.plum,
+    },
     {
       animation: "pulse",
       class: "",