@nullpixel/ui/.nuxt/ui/carousel.ts

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

const orientation = [
  "vertical",
  "horizontal"
] as const

export default {
  "slots": {
    "root": "relative focus:outline-none",
    "viewport": "overflow-hidden",
    "container": "flex items-start",
    "item": "min-w-0 shrink-0 basis-full",
    "controls": "",
    "arrows": "",
    "prev": "absolute rounded-full",
    "next": "absolute rounded-full",
    "dots": "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
    "dot": [
      "cursor-pointer size-3 bg-(--ui-border-accented) rounded-full",
      "transition"
    ]
  },
  "variants": {
    "orientation": {
      "vertical": {
        "container": "flex-col -mt-4",
        "item": "pt-4",
        "prev": "-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
        "next": "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
      },
      "horizontal": {
        "container": "flex-row -ms-4",
        "item": "ps-4",
        "prev": "-start-12 top-1/2 -translate-y-1/2",
        "next": "-end-12 top-1/2 -translate-y-1/2"
      }
    },
    "active": {
      "true": {
        "dot": "bg-(--ui-border-inverted)"
      }
    }
  }
}