@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

package/src/ui/select/select.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+describe("Select", () => {
+  it("should render the trigger as a type button control", () => {
+    render(
+      <Select defaultValue={["a"]}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("type", "button");
+  });
+
+  it("should show placeholder when nothing is selected", () => {
+    render(
+      <Select defaultValue={[]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick one" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    expect(
+      screen.getByRole("button", { name: /pick one/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("should open the panel and list options when the trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select defaultValue={[]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button", { name: /pick/i }));
+    expect(screen.getByRole("option", { name: /alpha/i })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: /beta/i })).toBeInTheDocument();
+  });
+
+  it("should support multi-select and show comma-separated labels", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select multiple defaultValue={["a"]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button", { name: /pick/i }));
+    await screen.findByRole("button", { name: /alpha/i });
+    await user.click(screen.getByRole("option", { name: /beta/i }));
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveTextContent("Alpha");
+    expect(trigger).toHaveTextContent("Beta");
+  });
+
+  it("should close the panel after picking one value when multiple is false", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select multiple={false} defaultValue={["a"]}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button"));
+    await screen.findByRole("button", { name: /alpha/i });
+    expect(screen.getByRole("option", { name: /beta/i })).toBeInTheDocument();
+    await user.click(screen.getByRole("option", { name: /beta/i }));
+    expect(
+      screen.queryByRole("option", { name: /beta/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      await screen.findByRole("button", { name: /^beta$/i }),
+    ).toBeInTheDocument();
+  });
+
+  it("should mark selected options with aria-selected true", async () => {
+    const user = userEvent.setup();
+    render(
+      <Select defaultValue={["a"]}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+          <SelectItem value="b">Beta</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    await user.click(screen.getByRole("button"));
+    const alpha = await screen.findByRole("option", { name: /alpha/i });
+    const beta = screen.getByRole("option", { name: /beta/i });
+    expect(alpha).toHaveAttribute("aria-selected", "true");
+    expect(beta).toHaveAttribute("aria-selected", "false");
+  });
+});

package/src/ui/select/select.tsx

@@ -0,0 +1,221 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  SelectProps,
+  SelectOption,
+  SelectTriggerProps,
+  SelectContentProps,
+  SelectItemProps,
+  SelectValueProps,
+} from "./types";
+import { createContext, useContext } from "react";
+import { SelectContextType } from "./types";
+import { cn } from "../../lib/utils";
+import {
+  selectContentVariants,
+  selectItemVariants,
+  selectTriggerVariants,
+} from "./variants";
+
+export const SelectContext = createContext<SelectContextType | null>(null);
+
+export const useSelect = () => {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error("Select components must be used inside Select");
+  return ctx;
+};
+
+export const Select = ({
+  children,
+  value,
+  defaultValue = [],
+  onChange,
+  multiple = true,
+}: SelectProps) => {
+  const [internal, setInternal] = useState<string[]>(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [options, setOptions] = useState<SelectOption[]>([]);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const selected = value ?? internal;
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const root = rootRef.current;
+      if (!root) return;
+      const target = event.target;
+      if (target instanceof Node && !root.contains(target)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+
+  const setSelected = (vals: string[]) => {
+    if (value !== undefined) {
+      onChange?.(vals);
+    } else {
+      setInternal(vals);
+      onChange?.(vals);
+    }
+  };
+
+  const toggleValue = (val: string) => {
+    if (multiple) {
+      if (selected.includes(val)) {
+        setSelected(selected.filter((v) => v !== val));
+      } else {
+        setSelected([...selected, val]);
+      }
+    } else {
+      setSelected([val]);
+      setOpen(false);
+    }
+  };
+
+  const isSelected = (val: string) => selected.includes(val);
+
+  const registerOption = useCallback((opt: SelectOption) => {
+    setOptions((prev) => {
+      if (prev.find((o) => o.value === opt.value)) return prev;
+      return [...prev, opt];
+    });
+  }, []);
+
+  return (
+    <SelectContext.Provider
+      value={{
+        open,
+        setOpen,
+        selected,
+        toggleValue,
+        isSelected,
+        registerOption,
+        options,
+        multiple,
+      }}
+    >
+      <div ref={rootRef} className="relative w-full">
+        {children}
+      </div>
+    </SelectContext.Provider>
+  );
+};
+
+export const SelectTrigger = ({
+  className,
+  variant,
+  size,
+  ...props
+}: SelectTriggerProps) => {
+  const { open, setOpen } = useSelect();
+
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen(!open)}
+      className={cn(selectTriggerVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+};
+
+export const SelectValue = ({
+  placeholder = "Select...",
+  className,
+  ...props
+}: SelectValueProps) => {
+  const { selected, options } = useSelect();
+
+  const selectedOptions = options.filter((o) => selected.includes(o.value));
+
+  if (selectedOptions.length === 0) {
+    return (
+      <span className={cn(className)} {...props}>
+        {placeholder}
+      </span>
+    );
+  }
+
+  return (
+    <span className={cn(className)} {...props}>
+      {selectedOptions.map((option, index) => (
+        <span key={option.value}>
+          {index > 0 ? ", " : null}
+          {option.label}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+export const SelectContent = ({
+  children,
+  className,
+  appearance = "default",
+  size = "md",
+  spacing = "default",
+  ...props
+}: SelectContentProps) => {
+  const { open } = useSelect();
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        selectContentVariants({ appearance, size, spacing }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const SelectItem = ({
+  value,
+  children,
+  disabled,
+  appearance = "default",
+  className,
+  ...props
+}: SelectItemProps) => {
+  const { toggleValue, isSelected, registerOption } = useSelect();
+
+  useEffect(() => {
+    registerOption({ label: children, value, disabled });
+  }, [children, disabled, registerOption, value]);
+
+  const isActive = isSelected(value);
+
+  return (
+    <div
+      role="option"
+      aria-selected={isActive}
+      tabIndex={0}
+      onClick={() => !disabled && toggleValue(value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") toggleValue(value);
+      }}
+      data-selected={isActive ? "true" : "false"}
+      className={cn(
+        selectItemVariants({
+          disabled,
+          appearance,
+        }),
+        "flex justify-between",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {isActive && <span>✓</span>}
+    </div>
+  );
+};

package/src/ui/select/types.ts

@@ -0,0 +1,77 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+import type { selectTriggerVariants } from "./variants";
+
+export type SelectOption = {
+  label: ReactNode;
+  value: string;
+  disabled?: boolean;
+};
+export type SelectAppearance =
+  | "default"
+  | "glass"
+  | "ghost"
+  | "outline"
+  | "sky"
+  | "rose"
+  | "purple"
+  | "pink"
+  | "orange"
+  | "yellow"
+  | "teal"
+  | "indigo"
+  | "emerald"
+  | "gradient-blue"
+  | "gradient-green"
+  | "gradient-red"
+  | "gradient-yellow"
+  | "gradient-purple"
+  | "gradient-teal"
+  | "gradient-indigo"
+  | "gradient-pink"
+  | "gradient-orange";
+export type SelectContextType = {
+  open: boolean;
+  setOpen: (v: boolean) => void;
+  selected: string[];
+  toggleValue: (value: string) => void;
+  isSelected: (value: string) => boolean;
+  registerOption: (option: SelectOption) => void;
+  options: SelectOption[];
+  multiple: boolean;
+};
+
+export type SelectProps = {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[]) => void;
+  multiple?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+type SelectTriggerVariantProps = VariantProps<typeof selectTriggerVariants>;
+
+export type SelectTriggerProps = SelectTriggerVariantProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & {
+    className?: string;
+  };
+
+export type SelectContentProps = HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+  appearance?: SelectAppearance;
+  size?: "sm" | "md" | "lg";
+  spacing?: "none" | "default" | "sm" | "md" | "lg" | "xl";
+};
+
+export type SelectItemProps = HTMLAttributes<HTMLDivElement> & {
+  value: string;
+  children: ReactNode;
+  disabled?: boolean;
+  appearance?: SelectAppearance;
+};
+
+export type SelectValueProps = HTMLAttributes<HTMLSpanElement> & {
+  placeholder?: ReactNode;
+};

package/src/ui/select/variants.ts

@@ -0,0 +1,163 @@
+import { cva } from "class-variance-authority";
+
+export const selectTriggerVariants = cva(
+  "flex items-center justify-between rounded-md border transition-all focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-gray-300 bg-white text-gray-900",
+        outline: "border-2 border-gray-500",
+        ghost: "border-transparent",
+        sky: "border-sky-600 text-sky-600",
+        rose: "border-rose-600 text-rose-600",
+        purple: "border-purple-600 text-purple-600",
+        pink: "border-pink-600 text-pink-600",
+        orange: "border-orange-600 text-orange-600",
+        yellow: "border-yellow-600 text-yellow-600",
+        teal: "border-teal-600 text-teal-600",
+        indigo: "border-indigo-500 text-indigo-500",
+        emerald: "border-emerald-600 text-emerald-600",
+        glass: "border-white/15 bg-white/10 text-white backdrop-blur-md",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+        "gradient-green":
+          "bg-linear-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-white",
+        "gradient-red":
+          "bg-linear-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-white",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-white",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-white",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-white",
+      },
+      size: {
+        sm: "px-2 py-1 text-sm",
+        md: "px-3 py-2",
+        lg: "px-4 py-3 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+export const selectItemVariants = cva("cursor-pointer px-3 py-2 rounded-md", {
+  variants: {
+    appearance: {
+      default:
+        "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+      glass:
+        "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
+      outline:
+        "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+      ghost:
+        "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
+      sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
+      rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
+      purple:
+        "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
+      pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
+      orange:
+        "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
+      yellow:
+        "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
+      teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
+      indigo:
+        "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
+      emerald:
+        "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
+      "gradient-blue":
+        "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-blue-100",
+      "gradient-green":
+        "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl data-[selected=true]:text-green-100",
+      "gradient-red":
+        "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-red-100",
+      "gradient-yellow":
+        "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl data-[selected=true]:text-yellow-100",
+      "gradient-purple":
+        "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-purple-100",
+      "gradient-teal":
+        "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl data-[selected=true]:text-teal-100",
+      "gradient-indigo":
+        "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-indigo-100",
+      "gradient-pink":
+        "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl data-[selected=true]:text-pink-100",
+      "gradient-orange":
+        "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl data-[selected=true]:text-orange-100",
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+    },
+  },
+  defaultVariants: {
+    appearance: "default",
+  },
+});
+
+export const selectContentVariants = cva(
+  "absolute z-10 mt-2 w-full rounded-md border bg-white shadow-md",
+  {
+    variants: {
+      appearance: {
+        default: "bg-white shadow-md",
+        glass: "bg-white/10 backdrop-blur-md",
+        outline: "border-2 border-gray-500",
+        ghost: "border-transparent",
+        sky: "border-sky-600",
+        rose: "border-rose-600",
+        purple: "border-purple-600",
+        pink: "border-pink-600",
+        orange: "border-orange-600",
+        yellow: "border-yellow-600",
+        teal: "border-teal-600",
+        indigo: "border-indigo-600",
+        emerald: "border-emerald-600",
+        "gradient-blue":
+          "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+      size: {
+        sm: "px-2 py-1 text-sm",
+        md: "px-3 py-2",
+        lg: "px-4 py-3 text-lg",
+      },
+      spacing: {
+        none: "space-y-0",
+        default: "space-y-1",
+        sm: "space-y-2",
+        md: "space-y-3",
+        lg: "space-y-4",
+        xl: "space-y-5",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+      spacing: "default",
+    },
+  },
+);

package/src/ui/skeleton/animated/animations.ts

@@ -0,0 +1,15 @@
+import type { SkeletonAnimationPresets } from "./types";
+
+export const skeletonAnimationPresets: SkeletonAnimationPresets = {
+  none: {},
+  shimmer: {
+    initial: { backgroundPosition: "100% 0%" },
+    animate: { backgroundPosition: ["100% 0%", "0% 0%"] },
+    transition: { repeat: Infinity, duration: 1.35, ease: "linear" },
+  },
+  pulse: {
+    initial: { opacity: 1 },
+    animate: { opacity: [1, 0.5, 1] },
+    transition: { repeat: Infinity, duration: 1.35, ease: "easeInOut" },
+  },
+};

package/src/ui/skeleton/animated/index.ts

@@ -0,0 +1,20 @@
+"use client";
+
+export {
+  SkeletonAnimated,
+  SkeletonAvatarAnimated,
+  SkeletonButtonAnimated,
+  SkeletonCardAnimated,
+  SkeletonTextAnimated,
+} from "./skeleton-animated";
+export type {
+  SkeletonAnimatedProps,
+  SkeletonPresetMotionProps,
+  SkeletonAnimationPresets,
+  SkeletonAvatarAnimatedProps,
+  SkeletonButtonAnimatedProps,
+  SkeletonCardAnimatedProps,
+  SkeletonTextAnimatedProps,
+  SkeletonVariantProps,
+} from "./types";
+export { skeletonAnimationPresets } from "./animations";