Carousel

import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@oration/canon/components/carousel";import { toast } from "@oration/canon/components/toast";import { MailIcon } from "lucide-react";export function SeveralPerView() {    const templates = [        {            id: "standard",            name: "Standard remittance",            detail: "Invoice list and totals",        },        { id: "short", name: "Short notice", detail: "One line per payment" },        { id: "itemized", name: "Itemized", detail: "Line items and credits" },        { id: "spanish", name: "Spanish", detail: "Aviso de pago" },        { id: "plain", name: "Plain text", detail: "For strict mail filters" },    ];    return (        <Carousel            aria-label="Remittance email templates"            opts={{ align: "start", slidesToScroll: "auto" }}            className="mx-12 w-[calc(100%-6rem)] max-w-xl"        >            <CarouselContent>                {templates.map((template, i) => (                    <CarouselItem                        key={template.id}                        aria-label={`${template.name}, ${i + 1} of ${templates.length}`}                        className="basis-1/2 sm:basis-1/3"                    >                        <button                            type="button"                            onClick={() =>                                toast.add({                                    title: `${template.name} selected`,                                    description:                                        "Used for remittances from the next run.",                                })                            }                            className="flex h-28 w-full flex-col justify-between rounded-xl bg-card p-3 text-left shadow-border outline-none transition-shadow duration-150 ease-out hover:shadow-border-hover focus-visible:ring-3 focus-visible:ring-ring/40"                        >                            <MailIcon                                aria-hidden="true"                                className="size-4 text-muted-foreground"                            />                            <span className="flex flex-col gap-0.5">                                <span className="text-13 font-medium">                                    {template.name}                                </span>                                <span className="text-xs text-muted-foreground">                                    {template.detail}                                </span>                            </span>                        </button>                    </CarouselItem>                ))}            </CarouselContent>            <CarouselPrevious />            <CarouselNext />        </Carousel>    );}

import {  Carousel,  type CarouselApi,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@oration/canon/components/carousel";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function WithCounter() {    const [api, setApi] = React.useState<CarouselApi>();    const [current, setCurrent] = React.useState(0);    const [count, setCount] = React.useState(0);    const tips = [        "Hold an invoice to keep it out of every run until someone releases it.",        "Split a payment to pay part now and the rest in a later run.",        "Invoices on 2/10 net 30 terms are flagged when paying early saves money.",        "Approvers can release runs up to their limit from Slack.",    ];    React.useEffect(() => {        if (!api) return;        const update = () => {            setCount(api.scrollSnapList().length);            setCurrent(api.selectedScrollSnap());        };        update();        api.on("select", update);        api.on("reInit", update);        return () => {            api.off("select", update);            api.off("reInit", update);        };    }, [api]);    return (        <div className="mx-12 flex w-[calc(100%-6rem)] max-w-sm flex-col gap-3">            <Carousel aria-label="Payment run tips" setApi={setApi}>                <CarouselContent>                    {tips.map((tip, i) => (                        <CarouselItem                            key={tip}                            aria-label={`${i + 1} of ${tips.length}`}                        >                            <div className="flex h-28 items-center rounded-xl bg-card p-4 text-sm text-pretty shadow-border">                                {tip}                            </div>                        </CarouselItem>                    ))}                </CarouselContent>                <CarouselPrevious />                <CarouselNext />            </Carousel>            <div className="flex items-center justify-center gap-1.5">                {tips.map((tip, i) => (                    <button                        key={tip}                        type="button"                        aria-label={`Go to tip ${i + 1}`}                        aria-current={i === current || undefined}                        onClick={() => api?.scrollTo(i)}                        className="flex size-6 items-center justify-center rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/40"                    >                        <span                            className={cn(                                "h-1.5 rounded-full transition-[width,background-color] duration-200 ease-out motion-reduce:transition-none",                                i === current                                    ? "w-4 bg-foreground"                                    : "w-1.5 bg-foreground/20",                            )}                        />                    </button>                ))}            </div>            <p                aria-live="polite"                className="text-center text-xs text-muted-foreground tabular-nums"            >                {count ? `${current + 1} of ${count}` : null}            </p>        </div>    );}

import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@oration/canon/components/carousel";export function Vertical() {    const notes = [        { who: "Priya Raman", text: "Approved PR-0412 with 212 invoices." },        {            who: "Tomás Ferreira",            text: "Held INV-20944 until the credit memo arrives.",        },        { who: "Aisha Bello", text: "Requested a new W-9 from Halcyon." },        { who: "Jordan Lee", text: "Changed Orchard Street to Net 45." },    ];    return (        <Carousel            aria-label="Recent approvals activity"            orientation="vertical"            opts={{ align: "start" }}            className="my-12 w-full max-w-xs"        >            <CarouselContent className="h-40">                {notes.map((note, i) => (                    <CarouselItem                        key={note.who}                        aria-label={`${i + 1} of ${notes.length}`}                        className="basis-1/2"                    >                        <div className="flex h-full flex-col justify-center gap-0.5 rounded-xl bg-card px-4 shadow-border">                            <span className="text-13 font-medium">                                {note.who}                            </span>                            <span className="text-13 text-muted-foreground">                                {note.text}                            </span>                        </div>                    </CarouselItem>                ))}            </CarouselContent>            <CarouselPrevious />            <CarouselNext />        </Carousel>    );}

import {  Carousel,  CarouselContent,  CarouselItem,  CarouselNext,  CarouselPrevious,} from "@oration/canon/components/carousel";export function Loop() {    const suppliers = ["Northwind Freight", "Halcyon", "Orchard Street"];    return (        <Carousel            aria-label="Suppliers with open invoices"            opts={{ loop: true }}            className="mx-12 w-[calc(100%-6rem)] max-w-xs"        >            <CarouselContent>                {suppliers.map((supplier, i) => (                    <CarouselItem                        key={supplier}                        aria-label={`${i + 1} of ${suppliers.length}`}                    >                        <div className="flex h-24 flex-col justify-center gap-0.5 rounded-xl bg-card px-4 shadow-border">                            <span className="text-sm font-medium">                                {supplier}                            </span>                            <span className="text-13 text-muted-foreground tabular-nums">                                {i + 2} open invoices                            </span>                        </div>                    </CarouselItem>                ))}            </CarouselContent>            <CarouselPrevious />            <CarouselNext />        </Carousel>    );}