motion-ui-skill 2.0.0

package/components/previews/motion/wheel-picker.preview.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Switch } from "@/components/motion/switch";
+import { WheelPicker } from "@/components/motion/wheel-picker";
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+const YEARS = Array.from({ length: 60 }, (_, i) => String(1980 + i));
+
+function daysIn(month: number, year: number) {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+export function WheelPickerPreview() {
+  const [month, setMonth] = useState("June");
+  const [year, setYear] = useState("2004");
+  const [day, setDay] = useState("9");
+  const [sound, setSound] = useState(false);
+
+  const monthIndex = MONTHS.indexOf(month);
+  const dayCount = daysIn(monthIndex, Number(year));
+  const days = Array.from({ length: dayCount }, (_, i) => String(i + 1));
+
+  // A short month or a non-leap February can strand the day past the end —
+  // pull it back to the last valid day.
+  useEffect(() => {
+    if (Number(day) > dayCount) setDay(String(dayCount));
+  }, [day, dayCount]);
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <span className="text-sm text-muted-foreground">
+        Born{" "}
+        <span className="font-medium text-foreground tabular-nums">
+          {month} {day}, {year}
+        </span>
+      </span>
+      <div className="flex items-stretch gap-1 rounded-3xl border border-border bg-background p-2">
+        <WheelPicker
+          options={MONTHS}
+          value={month}
+          onValueChange={setMonth}
+          className="w-32 border-0 bg-transparent"
+          visibleCount={7}
+          itemHeight={42}
+          sound={sound}
+          aria-label="Month"
+        />
+        <WheelPicker
+          options={days}
+          value={day}
+          onValueChange={setDay}
+          className="w-14 border-0 bg-transparent"
+          visibleCount={7}
+          itemHeight={42}
+          sound={sound}
+          aria-label="Day"
+        />
+        <WheelPicker
+          options={YEARS}
+          value={year}
+          onValueChange={setYear}
+          className="w-20 border-0 bg-transparent"
+          visibleCount={7}
+          itemHeight={42}
+          sound={sound}
+          aria-label="Year"
+        />
+      </div>
+      <Switch
+        checked={sound}
+        onCheckedChange={setSound}
+        label="Tick sound"
+        className="origin-left scale-[0.85] [&_label]:text-sm"
+      />
+    </div>
+  );
+}

package/components/pricing/retail-price-tag-card.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type RetailPriceTagCardProps = Readonly<
+  {
+    productName?: string;
+    price?: string;
+    originalPrice?: string;
+    sku?: string;
+    discount?: string;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const BARCODE_SLOTS = [
+  "barcode-01",
+  "barcode-02",
+  "barcode-03",
+  "barcode-04",
+  "barcode-05",
+  "barcode-06",
+  "barcode-07",
+  "barcode-08",
+  "barcode-09",
+  "barcode-10",
+  "barcode-11",
+  "barcode-12",
+  "barcode-13",
+  "barcode-14",
+  "barcode-15",
+  "barcode-16",
+  "barcode-17",
+  "barcode-18",
+  "barcode-19",
+  "barcode-20",
+  "barcode-21",
+  "barcode-22",
+  "barcode-23",
+  "barcode-24",
+] as const;
+
+// Production-ready Retail Price Tag component — styled with Tailwind CSS.
+export const RetailPriceTagCard = forwardRef<
+  HTMLDivElement,
+  RetailPriceTagCardProps
+>(
+  (
+    {
+      className,
+      productName = "Merino Crew Neck",
+      price = "₹2,499",
+      originalPrice = "₹3,999",
+      sku = "SKU-8842",
+      discount = "38% OFF",
+      ...props
+    },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="retail-price-tag-card"
+      className={cn("relative w-40 font-sans", className)}
+      {...props}
+    >
+      <div className="absolute -top-1 left-1/2 z-10 h-3 w-3 -translate-x-1/2 rounded-full border border-stone-300 bg-stone-50 shadow-sm" />
+      <div
+        className="absolute top-0 left-1/2 z-0 h-8 w-px -translate-x-1/2 bg-stone-300"
+        aria-hidden
+      />
+      <div className="relative mt-6 -rotate-2 rounded-sm border border-stone-300 bg-gradient-to-b from-stone-50 to-stone-100/90 px-4 py-3 shadow-sm shadow-stone-300/30">
+        <span className="absolute -top-2.5 right-2 rounded-sm border border-stone-300 bg-white px-1.5 py-0.5 text-[8px] font-semibold tracking-wide text-stone-600 uppercase">
+          {discount}
+        </span>
+        <p className="pr-10 text-[11px] leading-tight font-semibold text-stone-600">
+          {productName}
+        </p>
+        <p className="mt-2 text-2xl font-bold tracking-tight text-stone-800">
+          {price}
+        </p>
+        <p className="text-[11px] text-stone-400 line-through">
+          {originalPrice}
+        </p>
+        <p className="mt-2 font-mono text-[8px] tracking-wider text-stone-400 uppercase">
+          {sku}
+        </p>
+        <div className="mt-2 border-t border-dashed border-stone-300 pt-2">
+          <div className="flex justify-center gap-0.5">
+            {BARCODE_SLOTS.map((slotId, slotIndex) => (
+              <div
+                key={slotId}
+                className={cn(
+                  "h-4 w-px",
+                  slotIndex % 2 === 0 ? "bg-stone-500/70" : "bg-transparent",
+                )}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+);
+
+RetailPriceTagCard.displayName = "RetailPriceTagCard";

package/components/pricing/toggle-pricing-cards.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+import { Check } from "lucide-react";
+
+/**
+ * Toggle pricing cards built with Next.js, React,
+ * TypeScript, and Tailwind CSS.
+ *
+ * Replace the plans, pricing, and discount values
+ * with your own data.
+ *
+ * Need icons? Visit nexticons.in for free copy-paste icons.
+ */
+export type PricingPlan = {
+  name: string;
+  price: number;
+  yearlyPrice?: number;
+  popular?: boolean;
+  features: string[];
+};
+
+export type TogglePricingCardsProps = Readonly<
+  {
+    defaultYearly?: boolean;
+
+    monthlyLabel?: string;
+    yearlyLabel?: string;
+
+    discountLabel?: string;
+
+    plans?: PricingPlan[];
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+// Production-ready Toggle Pricing Cards component — styled with Tailwind CSS.
+export const TogglePricingCards = forwardRef<
+  HTMLDivElement,
+  TogglePricingCardsProps
+>(
+  (
+    {
+      className,
+
+      defaultYearly = false,
+
+      monthlyLabel = "Monthly",
+      yearlyLabel = "Yearly",
+
+      discountLabel = "-20%",
+
+      plans = [
+        {
+          name: "Starter",
+          price: 0,
+          yearlyPrice: 0,
+          features: ["10 components", "Community support"],
+        },
+        {
+          name: "Pro",
+          price: 29,
+          yearlyPrice: 24,
+          popular: true,
+          features: ["50+ components", "Priority support", "Custom themes"],
+        },
+        {
+          name: "Team",
+          price: 99,
+          yearlyPrice: 79,
+          features: ["Unlimited", "SSO", "Dedicated support"],
+        },
+      ],
+
+      ...props
+    },
+    ref,
+  ) => {
+    const [yearly, setYearly] = useState(defaultYearly);
+
+    return (
+      <div
+        ref={ref}
+        data-slot="toggle-pricing-cards"
+        className={cn("w-96 font-sans", className)}
+        {...props}
+      >
+        {/* Billing Toggle */}
+        <div
+          data-slot="toggle-pricing-cards-switch"
+          className="mb-4 flex items-center justify-center gap-3"
+        >
+          <span
+            className={cn(
+              "text-xs font-medium",
+              !yearly ? "text-neutral-900" : "text-neutral-400",
+            )}
+          >
+            {monthlyLabel}
+          </span>
+
+          <button
+            type="button"
+            aria-label="Toggle billing period"
+            onClick={() => setYearly((prev) => !prev)}
+            className={cn(
+              "relative h-6 w-11 cursor-pointer rounded-full transition-colors",
+              yearly ? "bg-neutral-800" : "bg-neutral-200",
+            )}
+          >
+            <div
+              className={cn(
+                "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-transform",
+                yearly ? "translate-x-5.5" : "translate-x-0.5",
+              )}
+            />
+          </button>
+
+          <span
+            className={cn(
+              "text-xs font-medium",
+              yearly ? "text-neutral-900" : "text-neutral-400",
+            )}
+          >
+            {yearlyLabel}
+
+            <span className="ml-1 text-[10px] font-semibold text-emerald-600">
+              {discountLabel}
+            </span>
+          </span>
+        </div>
+
+        {/* Plans */}
+        <div data-slot="toggle-pricing-cards-plans" className="flex gap-2">
+          {plans.map((plan) => {
+            const price = yearly
+              ? (plan.yearlyPrice ?? plan.price)
+              : plan.price;
+
+            return (
+              <div
+                key={plan.name}
+                data-slot="toggle-pricing-cards-plan"
+                className={cn(
+                  "flex-1 rounded-xl border p-3 transition-all",
+                  plan.popular
+                    ? "border-neutral-900 bg-neutral-900 text-white shadow-lg"
+                    : "border-neutral-100 bg-white",
+                )}
+              >
+                {plan.popular && (
+                  <span className="font-mono text-[8px] tracking-wider text-teal-300 uppercase">
+                    Popular
+                  </span>
+                )}
+
+                <p
+                  className={cn(
+                    "mt-1 text-[10px] font-medium",
+                    plan.popular ? "text-neutral-400" : "text-neutral-500",
+                  )}
+                >
+                  {plan.name}
+                </p>
+
+                <p className="mt-1 text-lg font-light tracking-tight">
+                  ${price}
+                  <span
+                    className={cn(
+                      "text-[10px]",
+                      plan.popular ? "text-neutral-500" : "text-neutral-400",
+                    )}
+                  >
+                    /mo
+                  </span>
+                </p>
+
+                <ul className="mt-2 space-y-1">
+                  {plan.features.map((feature) => (
+                    <li
+                      key={feature}
+                      className={cn(
+                        "flex items-center gap-1 text-[9px]",
+                        plan.popular ? "text-neutral-400" : "text-neutral-500",
+                      )}
+                    >
+                      <Check
+                        size={8}
+                        className={
+                          plan.popular ? "text-teal-400" : "text-emerald-500"
+                        }
+                      />
+
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+
+TogglePricingCards.displayName = "TogglePricingCards";

package/components/profile/contact-profile-card.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import Link from "next/link";
+
+import { cn } from "@/lib/cn";
+
+type ContactField = Readonly<{
+  label: string;
+  value: string;
+  href?: string;
+}>;
+
+export type ContactProfileCardProps = Readonly<
+  {
+    name?: string;
+    title?: string;
+    email?: string;
+    phone?: string;
+    location?: string;
+    website?: string;
+    websiteHref?: string;
+    catalogRef?: string;
+  } & ComponentPropsWithoutRef<"article">
+>;
+
+function ContactFieldRow({ label, value, href }: ContactField) {
+  const valueClassName =
+    "text-right text-sm text-neutral-800 transition-colors group-hover:text-neutral-950";
+
+  return (
+    <div className="group grid grid-cols-[5.5rem_1fr] items-baseline gap-3 py-1.5">
+      <span className="font-mono text-[9px] tracking-[0.18em] text-neutral-400 uppercase">
+        {label}
+      </span>
+      {href && href !== "#" ? (
+        <Link href={href} className={cn(valueClassName, "hover:underline")}>
+          {value}
+        </Link>
+      ) : (
+        <span className={valueClassName}>{value}</span>
+      )}
+    </div>
+  );
+}
+
+// Contact profile — museum placard directory entry, typography only.
+export const ContactProfileCard = forwardRef<
+  HTMLElement,
+  ContactProfileCardProps
+>(
+  (
+    {
+      className,
+      name = "Alex Morgan",
+      title = "Product engineer",
+      email = "alex.morgan@example.com",
+      phone = "+91 98765 43210",
+      location = "Kolkata, India",
+      website = "motion-ui.dev",
+      websiteHref = "https://motion-ui.dev",
+      catalogRef = "DIR · CONTACT",
+      ...props
+    },
+    ref,
+  ) => (
+    <article
+      ref={ref}
+      data-slot="contact-profile-card"
+      className={cn(
+        "w-80 rounded-sm border border-neutral-200 bg-[#faf8f5] px-5 py-4 font-sans shadow-sm",
+        className,
+      )}
+      {...props}
+    >
+      <p className="font-mono text-[9px] tracking-[0.22em] text-neutral-400 uppercase">
+        {catalogRef}
+      </p>
+
+      <h3 className="mt-3 font-serif text-xl leading-snug text-neutral-900">
+        {name}
+      </h3>
+      <p className="mt-1 text-xs text-neutral-500">{title}</p>
+
+      <div className="mt-4 space-y-0.5 border-t border-neutral-200 pt-3">
+        <ContactFieldRow label="Email" value={email} href={`mailto:${email}`} />
+        <ContactFieldRow
+          label="Phone"
+          value={phone}
+          href={`tel:${phone.replace(/\s/g, "")}`}
+        />
+        <ContactFieldRow label="Location" value={location} />
+        <ContactFieldRow label="Web" value={website} href={websiteHref} />
+      </div>
+    </article>
+  ),
+);
+
+ContactProfileCard.displayName = "ContactProfileCard";

package/components/profile/editorial-staff-profile-card.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/cn";
+
+export type EditorialStaffProfileCardProps = Readonly<
+  {
+    index?: string;
+    name?: string;
+    role?: string;
+    bio?: string;
+    image?: string;
+    imageAlt?: string;
+  } & ComponentPropsWithoutRef<"article">
+>;
+
+// Editorial staff index — numbered roster row, not another centered avatar card.
+export const EditorialStaffProfileCard = forwardRef<
+  HTMLElement,
+  EditorialStaffProfileCardProps
+>(
+  (
+    {
+      className,
+      index = "01",
+      name = "Alex Morgan",
+      role = "Design editor",
+      bio = "Typography, print systems, and the occasional long-form essay on slow tools.",
+      image = "/profile-picture.png",
+      imageAlt,
+      ...props
+    },
+    ref,
+  ) => {
+    const alt = imageAlt ?? name;
+
+    return (
+      <article
+        ref={ref}
+        data-slot="editorial-staff-profile-card"
+        className={cn(
+          "flex w-72 gap-4 border-l-2 border-neutral-900 bg-white py-4 pr-4 pl-5 font-sans",
+          className,
+        )}
+        {...props}
+      >
+        <p
+          aria-hidden
+          className="w-8 shrink-0 pt-0.5 font-mono text-[11px] leading-none text-neutral-400"
+        >
+          {index}
+        </p>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <h3 className="font-serif text-2xl leading-none tracking-tight text-neutral-950">
+                {name}
+              </h3>
+              <p className="mt-2 text-[10px] font-semibold tracking-[0.16em] text-neutral-500 uppercase">
+                {role}
+              </p>
+            </div>
+
+            <div className="size-14 shrink-0 overflow-hidden border border-neutral-200 bg-neutral-100">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={image} alt={alt} className="size-full object-cover" />
+            </div>
+          </div>
+
+          <p className="mt-3 text-xs leading-relaxed text-neutral-600">{bio}</p>
+        </div>
+      </article>
+    );
+  },
+);
+
+EditorialStaffProfileCard.displayName = "EditorialStaffProfileCard";