motion-ui-skill 2.0.0

package/components/inputs/textarea-field-input.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+export type TextareaFieldInputProps = Readonly<
+  {
+    label?: string;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    showCount?: boolean;
+    containerClassName?: string;
+  } & Omit<ComponentPropsWithoutRef<"textarea">, "onChange">
+> & {
+  onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+};
+
+export const TextareaFieldInput = forwardRef<
+  HTMLTextAreaElement,
+  TextareaFieldInputProps
+>(function TextareaFieldInput(
+  {
+    className,
+    containerClassName,
+    id,
+    label = "Message",
+    hint,
+    error = false,
+    errorMessage = "Message is too long.",
+    showCount = true,
+    disabled,
+    required,
+    value,
+    defaultValue = "",
+    maxLength = 500,
+    rows = 4,
+    onChange,
+    ...props
+  },
+  ref,
+) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const hintId = `${inputId}-hint`;
+  const errorId = `${inputId}-error`;
+  const countId = `${inputId}-count`;
+
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = useState(String(defaultValue));
+  const current = isControlled ? String(value) : internal;
+  const length = current.length;
+  const safeMaxLength =
+    maxLength === undefined
+      ? undefined
+      : Number.isFinite(maxLength)
+        ? Math.max(0, Math.floor(maxLength))
+        : 500;
+  const atLimit = safeMaxLength !== undefined && length >= safeMaxLength;
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const next = event.target.value;
+      if (!isControlled) setInternal(next);
+      onChange?.(next, event);
+    },
+    [isControlled, onChange],
+  );
+
+  return (
+    <div
+      data-slot="textarea-field-input"
+      data-error={error || undefined}
+      className={cn("w-full max-w-sm font-sans", containerClassName)}
+    >
+      <div className="mb-1.5 flex items-baseline justify-between gap-3">
+        <label
+          htmlFor={inputId}
+          className="text-sm font-medium text-neutral-900"
+        >
+          {label}
+          {required ? (
+            <span className="ml-0.5 text-rose-500" aria-hidden>
+              *
+            </span>
+          ) : null}
+        </label>
+
+        {showCount && safeMaxLength !== undefined ? (
+          <span
+            id={countId}
+            className={cn(
+              "text-xs text-neutral-400 tabular-nums",
+              atLimit && "text-amber-600",
+            )}
+          >
+            {length}/{safeMaxLength}
+          </span>
+        ) : null}
+      </div>
+
+      <textarea
+        ref={ref}
+        id={inputId}
+        rows={rows}
+        disabled={disabled}
+        required={required}
+        value={current}
+        maxLength={safeMaxLength}
+        aria-invalid={error || undefined}
+        aria-describedby={
+          [
+            error ? errorId : null,
+            hint ? hintId : null,
+            showCount && safeMaxLength !== undefined ? countId : null,
+          ]
+            .filter(Boolean)
+            .join(" ") || undefined
+        }
+        onChange={handleChange}
+        className={cn(
+          "min-h-24 w-full resize-y rounded-lg border bg-white px-3.5 py-2.5 font-sans text-sm leading-relaxed text-neutral-900 ring-0 transition-[border-color,background-color] duration-200 outline-none placeholder:text-neutral-400 focus:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-50 disabled:text-neutral-400",
+          error
+            ? "border-rose-300 focus:border-rose-400"
+            : "border-neutral-200 focus:border-neutral-900",
+          className,
+        )}
+        {...props}
+      />
+
+      {error ? (
+        <p id={errorId} role="alert" className="mt-1.5 text-xs text-rose-600">
+          {errorMessage}
+        </p>
+      ) : hint ? (
+        <p id={hintId} className="mt-1.5 text-xs text-neutral-500">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+});
+
+TextareaFieldInput.displayName = "TextareaFieldInput";

package/components/loaders/apple-hello-loader.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { cn } from "@/lib/cn";
+
+const DEFAULT_GREETINGS = [
+  "hello",
+  "bonjour",
+  "hola",
+  "ciao",
+  "olá",
+  "namaste",
+] as const;
+
+export type AppleHelloLoaderProps = Readonly<{
+  greetings?: readonly string[];
+  intervalMs?: number;
+  fadeMs?: number;
+  fill?: boolean;
+  className?: string;
+}>;
+
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setReduced(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+
+  return reduced;
+}
+
+export function AppleHelloLoader({
+  greetings = DEFAULT_GREETINGS,
+  intervalMs = 2600,
+  fadeMs = 400,
+  fill = false,
+  className,
+}: AppleHelloLoaderProps) {
+  const reducedMotion = usePrefersReducedMotion();
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const items = greetings.length > 0 ? greetings : DEFAULT_GREETINGS;
+
+  useEffect(() => {
+    if (reducedMotion || items.length <= 1) return;
+
+    const interval = globalThis.setInterval(() => {
+      setVisible(false);
+      globalThis.setTimeout(() => {
+        setIndex((current) => (current + 1) % items.length);
+        setVisible(true);
+      }, fadeMs);
+    }, intervalMs);
+
+    return () => globalThis.clearInterval(interval);
+  }, [fadeMs, intervalMs, items.length, reducedMotion]);
+
+  return (
+    <div
+      data-slot="apple-hello-loader"
+      className={cn(
+        "flex items-center justify-center bg-black",
+        fill ? "absolute inset-0" : "min-h-24 min-w-40 rounded-2xl px-6 py-8",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={items[index]}
+    >
+      <p
+        className={cn(
+          "px-4 text-center font-sans text-lg font-extralight tracking-tight text-white capitalize transition-all duration-500 motion-reduce:transition-none",
+          visible ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0",
+        )}
+      >
+        {items[index]}
+      </p>
+    </div>
+  );
+}

package/components/loaders/spin-loader.tsx

@@ -0,0 +1,51 @@
+import type { LucideIcon } from "lucide-react";
+import { Loader } from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+export type SpinLoaderSize = "sm" | "md" | "lg";
+
+export type SpinLoaderProps = Readonly<{
+  size?: SpinLoaderSize;
+  icon?: LucideIcon;
+  label?: string;
+  className?: string;
+  iconClassName?: string;
+}>;
+
+const SIZE: Record<SpinLoaderSize, number> = {
+  sm: 18,
+  md: 24,
+  lg: 32,
+};
+
+export function SpinLoader({
+  size = "md",
+  icon: Icon = Loader,
+  label = "Loading",
+  className,
+  iconClassName,
+}: SpinLoaderProps) {
+  const iconSize = SIZE[size];
+
+  return (
+    <div
+      data-slot="spin-loader"
+      data-size={size}
+      className={cn("inline-flex items-center justify-center", className)}
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+    >
+      <Icon
+        size={iconSize}
+        strokeWidth={2}
+        className={cn(
+          "animate-spin text-neutral-900 motion-reduce:animate-none",
+          iconClassName,
+        )}
+        aria-hidden
+      />
+    </div>
+  );
+}

package/components/loaders/text-loader.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type TextLoaderVariant = "default" | "sunset" | "ocean" | "neon";
+
+export type TextLoaderProps = Readonly<{
+  text?: string;
+  variant?: TextLoaderVariant;
+  textColor?: string;
+  className?: string;
+}>;
+
+const colorSchemes = {
+  default: {
+    midBg: "#7c0911",
+    shadows: [
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #ff5f9f inset, 0 4px 4px 0 #0693ff inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #d60a47 inset, 0 4px 4px 0 #fbef19 inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #ff5f9f inset, 0 4px 4px 0 #28a9ff inset",
+    ],
+  },
+  sunset: {
+    midBg: "#7c2d12",
+    shadows: [
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #fb923c inset, 0 4px 4px 0 #f97316 inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #ea580c inset, 0 4px 4px 0 #fbbf24 inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #fb923c inset, 0 4px 4px 0 #fdba74 inset",
+    ],
+  },
+  ocean: {
+    midBg: "#0c4a6e",
+    shadows: [
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #22d3ee inset, 0 4px 4px 0 #0284c7 inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #06b6d4 inset, 0 4px 4px 0 #38bdf8 inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #22d3ee inset, 0 4px 4px 0 #7dd3fc inset",
+    ],
+  },
+  neon: {
+    midBg: "#14532d",
+    shadows: [
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #4ade80 inset, 0 4px 4px 0 #22d3ee inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #22c55e inset, 0 4px 4px 0 #2dd4bf inset",
+      "0 1px 1px 0 #fff inset, 0 3px 5px 0 #4ade80 inset, 0 4px 4px 0 #38bdf8 inset",
+    ],
+  },
+} as const;
+
+function TextLoaderOrb({
+  scheme,
+}: Readonly<{
+  scheme: (typeof colorSchemes)[TextLoaderVariant];
+}>) {
+  const orbRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = orbRef.current;
+    if (!node) return;
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      node.style.transform = "rotate(270deg)";
+      node.style.backgroundColor = scheme.midBg;
+      node.style.boxShadow = scheme.shadows[1];
+      return;
+    }
+
+    const animation = node.animate(
+      [
+        {
+          transform: "rotate(90deg)",
+          backgroundColor: "transparent",
+          boxShadow: scheme.shadows[0],
+        },
+        {
+          transform: "rotate(270deg)",
+          backgroundColor: scheme.midBg,
+          boxShadow: scheme.shadows[1],
+          offset: 0.5,
+        },
+        {
+          transform: "rotate(450deg)",
+          backgroundColor: "transparent",
+          boxShadow: scheme.shadows[2],
+        },
+      ],
+      {
+        duration: 1500,
+        iterations: Number.POSITIVE_INFINITY,
+        easing: "linear",
+      },
+    );
+
+    return () => animation.cancel();
+  }, [scheme]);
+
+  return (
+    <div
+      ref={orbRef}
+      aria-hidden="true"
+      className="z-0 size-5 shrink-0 rounded-full bg-transparent will-change-transform motion-reduce:transform-none"
+      style={{ transform: "rotate(90deg)" }}
+    />
+  );
+}
+
+export function TextLoader({
+  text = "Searching",
+  variant = "default",
+  textColor = "#ffffff",
+  className,
+}: TextLoaderProps) {
+  const letters = text.split("");
+  const scheme = colorSchemes[variant];
+
+  return (
+    <div
+      data-slot="text-loader"
+      data-variant={variant}
+      className={cn(
+        "relative flex items-center justify-center gap-2.5 select-none",
+        className,
+      )}
+      style={{ color: textColor }}
+      role="status"
+      aria-live="polite"
+      aria-label={text}
+    >
+      <TextLoaderOrb scheme={scheme} />
+
+      <div className="flex gap-px" aria-hidden="true">
+        {letters.map((letter, index) => (
+          <span
+            key={`${letter}-${index}`}
+            className="inline-block animate-pulse rounded-[50ch] border-none opacity-40 will-change-[opacity] motion-reduce:animate-none motion-reduce:opacity-100"
+            style={{
+              animationDuration: "1.8s",
+              animationDelay: `${index * 0.09}s`,
+            }}
+          >
+            {letter}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/mockups/apple-ipod-mockup-card.tsx

@@ -0,0 +1,155 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/cn";
+
+const ipodFrameVariants = {
+  silver: {
+    body: "border-neutral-200/80 bg-[#e8e8ec]",
+    wheel: "border-neutral-200/80 bg-[#efeff2]",
+    wheelCenter: "border-neutral-200/70 bg-[#f8f8fa]",
+    label: "text-neutral-500",
+  },
+  black: {
+    body: "border-neutral-700/50 bg-[#2a2a2e]",
+    wheel: "border-neutral-600/50 bg-[#3a3a3e]",
+    wheelCenter: "border-neutral-600/40 bg-[#4a4a4f]",
+    label: "text-neutral-400",
+  },
+  white: {
+    body: "border-neutral-200/80 bg-[#f2f2f6]",
+    wheel: "border-neutral-200/80 bg-[#fafafa]",
+    wheelCenter: "border-neutral-200/70 bg-white",
+    label: "text-neutral-500",
+  },
+  pink: {
+    body: "border-rose-200/60 bg-[#eec0cc]",
+    wheel: "border-rose-200/60 bg-[#f4d0da]",
+    wheelCenter: "border-rose-200/50 bg-[#fae8ee]",
+    label: "text-rose-700/70",
+  },
+  blue: {
+    body: "border-sky-200/60 bg-[#a8c8e8]",
+    wheel: "border-sky-200/60 bg-[#c0d8f0]",
+    wheelCenter: "border-sky-200/50 bg-[#d8e8f8]",
+    label: "text-sky-800/70",
+  },
+  green: {
+    body: "border-emerald-200/60 bg-[#a8d4a8]",
+    wheel: "border-emerald-200/60 bg-[#c0e0c0]",
+    wheelCenter: "border-emerald-200/50 bg-[#d8f0d8]",
+    label: "text-emerald-800/70",
+  },
+  red: {
+    body: "border-red-200/50 bg-[#e07070]",
+    wheel: "border-red-200/50 bg-[#e88888]",
+    wheelCenter: "border-red-200/40 bg-[#f0a0a0]",
+    label: "text-red-900/70",
+  },
+} as const;
+
+export type IpodFrameVariant = keyof typeof ipodFrameVariants;
+
+const FRAME_RADIUS = "1.35rem";
+const FRAME_PADDING = "0.625rem";
+const SCREEN_RADIUS = `calc(${FRAME_RADIUS} - ${FRAME_PADDING})`;
+
+type IpodMockupCardProps = Readonly<
+  ComponentPropsWithoutRef<"div"> & {
+    variant?: IpodFrameVariant;
+    children?: ReactNode;
+  }
+>;
+
+function ClickWheel({
+  frame,
+}: {
+  frame: (typeof ipodFrameVariants)[IpodFrameVariant];
+}) {
+  return (
+    <div
+      className={cn(
+        "relative flex h-22 w-22 items-center justify-center rounded-full border",
+        frame.wheel,
+      )}
+      aria-hidden="true"
+    >
+      <span
+        className={cn(
+          "absolute top-2 left-1/2 -translate-x-1/2 text-[6px] font-semibold tracking-wide uppercase",
+          frame.label,
+        )}
+      >
+        Menu
+      </span>
+      <span
+        className={cn(
+          "absolute top-1/2 left-2 -translate-y-1/2 text-[7px] font-bold",
+          frame.label,
+        )}
+      >
+        {"\u25C0\u25C0"}
+      </span>
+      <span
+        className={cn(
+          "absolute top-1/2 right-2 -translate-y-1/2 text-[7px] font-bold",
+          frame.label,
+        )}
+      >
+        {"\u25B6\u25B6"}
+      </span>
+      <span
+        className={cn(
+          "absolute bottom-2 left-1/2 -translate-x-1/2 text-[7px] font-bold",
+          frame.label,
+        )}
+      >
+        {"\u25B6\u275A"}
+      </span>
+
+      <div
+        className={cn(
+          "flex h-8 w-8 items-center justify-center rounded-full border",
+          frame.wheelCenter,
+        )}
+      />
+    </div>
+  );
+}
+
+export const IpodMockupCard = forwardRef<HTMLDivElement, IpodMockupCardProps>(
+  ({ className, children, variant = "silver", ...props }, ref) => {
+    const frame = ipodFrameVariants[variant];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="ipod-mockup-card"
+        data-variant={variant}
+        className={cn(
+          "flex w-55 flex-col border p-2.5 pb-3.5 shadow-[0_8px_24px_rgba(0,0,0,0.07)]",
+          frame.body,
+          className,
+        )}
+        style={{ borderRadius: FRAME_RADIUS }}
+        {...props}
+      >
+        <div
+          className="relative aspect-[1.32] w-full overflow-hidden bg-white shadow-[inset_0_0_0_1px_rgba(0,0,0,0.06)]"
+          style={{ borderRadius: SCREEN_RADIUS }}
+        >
+          {children}
+        </div>
+
+        <div className="mt-3 flex justify-center">
+          <ClickWheel frame={frame} />
+        </div>
+      </div>
+    );
+  },
+);
+
+IpodMockupCard.displayName = "IpodMockupCard";