Carousel

const CarouselAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Carousel__root",
        "relative",
    ]),
    content: cva([
        "UI-Carousel__content",
        "overflow-hidden",
    ]),
    innerContent: cva([
        "UI-Carousel__innerContent",
        "flex",
    ], {
        variants: {
            gap: { none: null, sm: null, md: null, lg: null, xl: null },
            orientation: { horizontal: null, vertical: null },
        },
        compoundVariants: [
            { gap: "none", orientation: "horizontal", className: "ml-0" },
            { gap: "sm", orientation: "horizontal", className: "-ml-2" },
            { gap: "md", orientation: "horizontal", className: "-ml-4" },
            { gap: "lg", orientation: "horizontal", className: "-ml-6" },
            { gap: "xl", orientation: "horizontal", className: "-ml-8" },
            /**/
            { gap: "none", orientation: "vertical", className: "-mt-0 flex-col" },
            { gap: "sm", orientation: "vertical", className: "-mt-2 flex-col" },
            { gap: "md", orientation: "vertical", className: "-mt-4 flex-col" },
            { gap: "lg", orientation: "vertical", className: "-mt-6 flex-col" },
            { gap: "xl", orientation: "vertical", className: "-mt-8 flex-col" },
        ],
    }),
    item: cva([
        "UI-Carousel__item",
        "min-w-0 shrink-0 grow-0 basis-full",
    ], {
        variants: {
            gap: { none: null, sm: null, md: null, lg: null, xl: null },
            orientation: { horizontal: null, vertical: null },
        },
        compoundVariants: [
            { gap: "none", orientation: "horizontal", className: "pl-0" },
            { gap: "sm", orientation: "horizontal", className: "pl-2" },
            { gap: "md", orientation: "horizontal", className: "pl-4" },
            { gap: "lg", orientation: "horizontal", className: "pl-6" },
            { gap: "xl", orientation: "horizontal", className: "pl-8" },
            /**/
            { gap: "none", orientation: "vertical", className: "pt-0" },
            { gap: "sm", orientation: "vertical", className: "pt-2" },
            { gap: "md", orientation: "vertical", className: "pt-4" },
            { gap: "lg", orientation: "vertical", className: "pt-6" },
            { gap: "xl", orientation: "vertical", className: "pt-8" },
        ],
    }),
    button: cva([
        "UI-Carousel__button",
        "absolute rounded-full",
    ], {
        variants: {
            placement: { previous: null, next: null },
            orientation: { horizontal: null, vertical: null },
        },
        compoundVariants: [
            { placement: "previous", orientation: "horizontal", className: "-left-12 top-1/2 -translate-y-1/2" },
            { placement: "previous", orientation: "vertical", className: "-top-12 left-1/2 -translate-x-1/2 rotate-90" },
            { placement: "next", orientation: "horizontal", className: "-right-12 top-1/2 -translate-y-1/2" },
            { placement: "next", orientation: "vertical", className: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90" },
        ],
    }),
    chevronIcon: cva([
        "UI-Carousel__chevronIcon",
        "size-6",
    ]),
})