@opengovsg/oui-theme 0.0.13 → 0.0.15

package/dist/chunk-LMYYQSDD.mjs

@@ -0,0 +1,332 @@
+import {
+  colorVariants
+} from "./chunk-C7FUGWVY.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-E43A5ROR.mjs";
+import {
+  tv
+} from "./chunk-4JENAMGV.mjs";
+
+// src/components/pagination.ts
+var paginationStyles = tv({
+  slots: {
+    base: ["p-2.5", "-m-2.5", "overflow-x-scroll", "scrollbar-hide"],
+    wrapper: [
+      "flex",
+      "flex-nowrap",
+      "h-fit",
+      "max-w-fit",
+      "relative",
+      "gap-1",
+      "items-center",
+      "overflow-visible"
+    ],
+    item: [
+      "tap-highlight-transparent",
+      "select-none",
+      "touch-none",
+      "transition"
+    ],
+    prev: "",
+    next: "",
+    cursor: [
+      "absolute",
+      "flex",
+      "overflow-visible",
+      "items-center",
+      "justify-center",
+      "origin-center",
+      "left-0",
+      "select-none",
+      "touch-none",
+      "pointer-events-none",
+      "z-20",
+      "text-standard-white"
+    ],
+    forwardIcon: [
+      "hidden",
+      "group-hover:block",
+      "group-data-[focus-visible=true]:block",
+      "data-[before=true]:rotate-180"
+    ],
+    ellipsis: "group-hover:hidden group-data-[focus-visible=true]:hidden",
+    chevronNext: "rotate-180"
+  },
+  variants: {
+    variant: {
+      light: {
+        item: "bg-transparent"
+      }
+    },
+    color: {
+      main: {
+        cursor: colorVariants.solid.main
+      },
+      neutral: {
+        cursor: colorVariants.solid.neutral
+      },
+      success: {
+        cursor: colorVariants.solid.success
+      },
+      warning: {
+        cursor: colorVariants.solid.warning
+      },
+      critical: {
+        cursor: colorVariants.solid.critical
+      }
+    },
+    size: {
+      sm: {
+        item: "prose-body-2",
+        cursor: "prose-body-2"
+      },
+      md: {
+        item: "prose-body-2",
+        cursor: "prose-body-2"
+      },
+      lg: {
+        item: "prose-body-1",
+        cursor: "prose-body-1"
+      }
+    },
+    radius: {
+      none: {},
+      sm: {},
+      md: {},
+      lg: {},
+      full: {}
+    },
+    isCompact: {
+      true: {
+        wrapper: "gap-1"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "pointer-events-none"
+      }
+    },
+    disableCursorAnimation: {
+      true: {
+        cursor: "hidden"
+      }
+    },
+    disableAnimation: {
+      true: {
+        item: "transition-none",
+        cursor: "transition-none"
+      },
+      false: {
+        item: [
+          "data-[pressed=true]:scale-[0.95]",
+          "transition-transform-background"
+        ],
+        cursor: [
+          "data-[moving=true]:transition-transform",
+          "!data-[moving=true]:duration-300",
+          // this hides the cursor and only shows it once it has been moved to its initial position
+          "opacity-0",
+          "data-[moving]:opacity-100"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "light",
+    color: "neutral",
+    size: "md",
+    radius: "sm",
+    isCompact: false,
+    isDisabled: false,
+    disableCursorAnimation: false
+  },
+  compoundVariants: [
+    /**
+     * --------------------------------------------------------
+     * disableCursorAnimation
+     * the classNames will be applied to the active item
+     * --------------------------------------------------------
+     */
+    // disableCursorAnimation / color
+    {
+      disableCursorAnimation: true,
+      color: "main",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-main-active",
+          "data-[active=true]:border-interaction-main-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "neutral",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-support-selected",
+          "data-[active=true]:border-interaction-support-selected",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "success",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-success-active",
+          "data-[active=true]:border-interaction-success-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "warning",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-warning-active",
+          "data-[active=true]:border-interaction-warning-active",
+          "data-[active=true]:text-base-content-strong"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "critical",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-critical-active",
+          "data-[active=true]:border-interaction-critical-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    }
+  ],
+  compoundSlots: [
+    // without variant
+    {
+      slots: ["item", "prev", "next"],
+      class: [
+        "flex",
+        "flex-wrap",
+        "truncate",
+        "box-border",
+        "outline-transparent outline-solid",
+        "items-center",
+        "justify-center",
+        "text-base-content-default",
+        // focus ring
+        ...dataFocusVisibleClasses,
+        "outline-offset-0",
+        // disabled
+        "data-[disabled=true]:text-interaction-support-disabled-content",
+        "data-[disabled=true]:pointer-events-none"
+      ]
+    },
+    {
+      slots: ["prev", "next"],
+      variant: "light",
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default",
+        "[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover",
+        "active:bg-interaction-muted-neutral-active"
+      ]
+    },
+    {
+      slots: ["item"],
+      variant: "light",
+      isCompact: false,
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default",
+        "[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover",
+        "active:bg-interaction-muted-neutral-active"
+      ]
+    },
+    // size
+    {
+      slots: ["item", "cursor"],
+      size: "sm",
+      isCompact: false,
+      class: "h-7 w-7 min-w-7"
+    },
+    {
+      slots: ["item"],
+      size: "sm",
+      isCompact: true,
+      class: "px-2"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "sm",
+      class: "h-7 w-7 min-w-7 [&_svg]:size-5"
+    },
+    {
+      slots: ["item", "cursor"],
+      size: "md",
+      isCompact: false,
+      class: "h-8 w-8 min-w-8"
+    },
+    {
+      slots: ["item"],
+      size: "md",
+      isCompact: true,
+      class: "px-2.5"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "md",
+      class: "h-8 w-8 min-w-8 [&_svg]:size-6"
+    },
+    {
+      slots: ["item", "cursor"],
+      size: "lg",
+      isCompact: false,
+      class: "h-9 w-9 min-w-9"
+    },
+    {
+      slots: ["item"],
+      size: "lg",
+      isCompact: true,
+      class: "px-3"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "lg",
+      class: "h-9 w-9 min-w-9 [&_svg]:size-7"
+    },
+    // radius
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "full",
+      class: "rounded-full"
+    }
+  ]
+});
+
+export {
+  paginationStyles
+};
+//# sourceMappingURL=chunk-LMYYQSDD.mjs.map

package/dist/chunk-LMYYQSDD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pagination.ts"],"sourcesContent":["import type { VariantProps } from \"tailwind-variants\"\n\nimport { dataFocusVisibleClasses } from \"../utils/classes\"\nimport { tv } from \"../utils/tv\"\nimport { colorVariants } from \"../utils/variants\"\n\n/**\n * Pagination wrapper **Tailwind Variants** component\n *\n * const {base, cursor, prev, next, item } = paginationStyles({...})\n *\n * @example\n * <ul className={base()} aria-label=\"pagination navigation\">\n *    <li className={cursor()} aria-hidden=\"true\">{active page}</li> // this marks the active page\n *    <li role=\"button\" className={prev()} aria-label=\"Go to previous page\" data-disabled=\"true\">Prev</li>\n *    <li role=\"button\" className={item()} aria-label=\"page 1\" data-active=\"true\">1</li>\n *    <li role=\"button\" className={item()} aria-label=\"page 2\">2</li>\n *    <li role=\"button\" className={item()} aria-hidden=\"true\">...</li>\n *    <li role=\"button\" className={item()} aria-label=\"page 10\">10</li>\n *    <li role=\"button\" className={next()} aria-label=\"Go to next page\">Next</li>\n *  </ul>\n */\nexport const paginationStyles = tv({\n  slots: {\n    base: [\"p-2.5\", \"-m-2.5\", \"overflow-x-scroll\", \"scrollbar-hide\"],\n    wrapper: [\n      \"flex\",\n      \"flex-nowrap\",\n      \"h-fit\",\n      \"max-w-fit\",\n      \"relative\",\n      \"gap-1\",\n      \"items-center\",\n      \"overflow-visible\",\n    ],\n    item: [\n      \"tap-highlight-transparent\",\n      \"select-none\",\n      \"touch-none\",\n      \"transition\",\n    ],\n    prev: \"\",\n    next: \"\",\n    cursor: [\n      \"absolute\",\n      \"flex\",\n      \"overflow-visible\",\n      \"items-center\",\n      \"justify-center\",\n      \"origin-center\",\n      \"left-0\",\n      \"select-none\",\n      \"touch-none\",\n      \"pointer-events-none\",\n      \"z-20\",\n      \"text-standard-white\",\n    ],\n    forwardIcon: [\n      \"hidden\",\n      \"group-hover:block\",\n      \"group-data-[focus-visible=true]:block\",\n      \"data-[before=true]:rotate-180\",\n    ],\n    ellipsis: \"group-hover:hidden group-data-[focus-visible=true]:hidden\",\n    chevronNext: \"rotate-180\",\n  },\n  variants: {\n    variant: {\n      light: {\n        item: \"bg-transparent\",\n      },\n    },\n    color: {\n      main: {\n        cursor: colorVariants.solid.main,\n      },\n      neutral: {\n        cursor: colorVariants.solid.neutral,\n      },\n      success: {\n        cursor: colorVariants.solid.success,\n      },\n      warning: {\n        cursor: colorVariants.solid.warning,\n      },\n      critical: {\n        cursor: colorVariants.solid.critical,\n      },\n    },\n    size: {\n      sm: {\n        item: \"prose-body-2\",\n        cursor: \"prose-body-2\",\n      },\n      md: {\n        item: \"prose-body-2\",\n        cursor: \"prose-body-2\",\n      },\n      lg: {\n        item: \"prose-body-1\",\n        cursor: \"prose-body-1\",\n      },\n    },\n    radius: {\n      none: {},\n      sm: {},\n      md: {},\n      lg: {},\n      full: {},\n    },\n    isCompact: {\n      true: {\n        wrapper: \"gap-1\",\n      },\n    },\n    isDisabled: {\n      true: {\n        base: \"pointer-events-none\",\n      },\n    },\n    disableCursorAnimation: {\n      true: {\n        cursor: \"hidden\",\n      },\n    },\n    disableAnimation: {\n      true: {\n        item: \"transition-none\",\n        cursor: \"transition-none\",\n      },\n      false: {\n        item: [\n          \"data-[pressed=true]:scale-[0.95]\",\n          \"transition-transform-background\",\n        ],\n        cursor: [\n          \"data-[moving=true]:transition-transform\",\n          \"!data-[moving=true]:duration-300\",\n          // this hides the cursor and only shows it once it has been moved to its initial position\n          \"opacity-0\",\n          \"data-[moving]:opacity-100\",\n        ],\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"light\",\n    color: \"neutral\",\n    size: \"md\",\n    radius: \"sm\",\n    isCompact: false,\n    isDisabled: false,\n    disableCursorAnimation: false,\n  },\n  compoundVariants: [\n    /**\n     * --------------------------------------------------------\n     * disableCursorAnimation\n     * the classNames will be applied to the active item\n     * --------------------------------------------------------\n     */\n    // disableCursorAnimation / color\n    {\n      disableCursorAnimation: true,\n      color: \"main\",\n      class: {\n        item: [\n          \"data-[active=true]:bg-interaction-main-active\",\n          \"data-[active=true]:border-interaction-main-active\",\n          \"data-[active=true]:text-white\",\n        ],\n      },\n    },\n    {\n      disableCursorAnimation: true,\n      color: \"neutral\",\n      class: {\n        item: [\n          \"data-[active=true]:bg-interaction-support-selected\",\n          \"data-[active=true]:border-interaction-support-selected\",\n          \"data-[active=true]:text-white\",\n        ],\n      },\n    },\n    {\n      disableCursorAnimation: true,\n      color: \"success\",\n      class: {\n        item: [\n          \"data-[active=true]:bg-interaction-success-active\",\n          \"data-[active=true]:border-interaction-success-active\",\n          \"data-[active=true]:text-white\",\n        ],\n      },\n    },\n    {\n      disableCursorAnimation: true,\n      color: \"warning\",\n      class: {\n        item: [\n          \"data-[active=true]:bg-interaction-warning-active\",\n          \"data-[active=true]:border-interaction-warning-active\",\n          \"data-[active=true]:text-base-content-strong\",\n        ],\n      },\n    },\n    {\n      disableCursorAnimation: true,\n      color: \"critical\",\n      class: {\n        item: [\n          \"data-[active=true]:bg-interaction-critical-active\",\n          \"data-[active=true]:border-interaction-critical-active\",\n          \"data-[active=true]:text-white\",\n        ],\n      },\n    },\n  ],\n  compoundSlots: [\n    // without variant\n    {\n      slots: [\"item\", \"prev\", \"next\"],\n      class: [\n        \"flex\",\n        \"flex-wrap\",\n        \"truncate\",\n        \"box-border\",\n        \"outline-transparent outline-solid\",\n        \"items-center\",\n        \"justify-center\",\n        \"text-base-content-default\",\n        // focus ring\n        ...dataFocusVisibleClasses,\n        \"outline-offset-0\",\n        // disabled\n        \"data-[disabled=true]:text-interaction-support-disabled-content\",\n        \"data-[disabled=true]:pointer-events-none\",\n      ],\n    },\n    {\n      slots: [\"prev\", \"next\"],\n      variant: \"light\",\n      class: [\n        \"[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default\",\n        \"[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover\",\n        \"active:bg-interaction-muted-neutral-active\",\n      ],\n    },\n    {\n      slots: [\"item\"],\n      variant: \"light\",\n      isCompact: false,\n      class: [\n        \"[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default\",\n        \"[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover\",\n        \"active:bg-interaction-muted-neutral-active\",\n      ],\n    },\n    // size\n    {\n      slots: [\"item\", \"cursor\"],\n      size: \"sm\",\n      isCompact: false,\n      class: \"h-7 w-7 min-w-7\",\n    },\n    {\n      slots: [\"item\"],\n      size: \"sm\",\n      isCompact: true,\n      class: \"px-2\",\n    },\n    {\n      slots: [\"prev\", \"next\"],\n      size: \"sm\",\n      class: \"h-7 w-7 min-w-7 [&_svg]:size-5\",\n    },\n    {\n      slots: [\"item\", \"cursor\"],\n      size: \"md\",\n      isCompact: false,\n      class: \"h-8 w-8 min-w-8\",\n    },\n    {\n      slots: [\"item\"],\n      size: \"md\",\n      isCompact: true,\n      class: \"px-2.5\",\n    },\n    {\n      slots: [\"prev\", \"next\"],\n      size: \"md\",\n      class: \"h-8 w-8 min-w-8 [&_svg]:size-6\",\n    },\n    {\n      slots: [\"item\", \"cursor\"],\n      size: \"lg\",\n      isCompact: false,\n      class: \"h-9 w-9 min-w-9\",\n    },\n    {\n      slots: [\"item\"],\n      size: \"lg\",\n      isCompact: true,\n      class: \"px-3\",\n    },\n    {\n      slots: [\"prev\", \"next\"],\n      size: \"lg\",\n      class: \"h-9 w-9 min-w-9 [&_svg]:size-7\",\n    },\n    // radius\n    {\n      slots: [\"wrapper\", \"item\", \"cursor\", \"prev\", \"next\"],\n      radius: \"none\",\n      class: \"rounded-none\",\n    },\n    {\n      slots: [\"wrapper\", \"item\", \"cursor\", \"prev\", \"next\"],\n      radius: \"sm\",\n      class: \"rounded-sm\",\n    },\n    {\n      slots: [\"wrapper\", \"item\", \"cursor\", \"prev\", \"next\"],\n      radius: \"md\",\n      class: \"rounded-md\",\n    },\n    {\n      slots: [\"wrapper\", \"item\", \"cursor\", \"prev\", \"next\"],\n      radius: \"lg\",\n      class: \"rounded-lg\",\n    },\n    {\n      slots: [\"wrapper\", \"item\", \"cursor\", \"prev\", \"next\"],\n      radius: \"full\",\n      class: \"rounded-full\",\n    },\n  ],\n})\n\nexport type PaginationVariantProps = VariantProps<typeof paginationStyles>\nexport type PaginationSlots = keyof ReturnType<typeof paginationStyles>\n"],"mappings":"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","names":[]}

package/dist/chunk-LTX7TV6H.js

@@ -0,0 +1 @@
+"use strict";//# sourceMappingURL=chunk-LTX7TV6H.js.map

package/dist/{chunk-2DNFT7QN.js.map → chunk-LTX7TV6H.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-2DNFT7QN.js"],"names":[],"mappings":"AAAA","file":"/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-2DNFT7QN.js"}
+{"version":3,"sources":["/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-LTX7TV6H.js"],"names":[],"mappings":"AAAA","file":"/home/runner/work/oui-design-system/oui-design-system/packages/theme/dist/chunk-LTX7TV6H.js"}

package/dist/chunk-MA67SUVH.js

@@ -0,0 +1,332 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk7Y2HFACMjs = require('./chunk-7Y2HFACM.js');
+
+
+var _chunkPWPTVAILjs = require('./chunk-PWPTVAIL.js');
+
+
+var _chunkUZONBJUXjs = require('./chunk-UZONBJUX.js');
+
+// src/components/pagination.ts
+var paginationStyles = _chunkUZONBJUXjs.tv.call(void 0, {
+  slots: {
+    base: ["p-2.5", "-m-2.5", "overflow-x-scroll", "scrollbar-hide"],
+    wrapper: [
+      "flex",
+      "flex-nowrap",
+      "h-fit",
+      "max-w-fit",
+      "relative",
+      "gap-1",
+      "items-center",
+      "overflow-visible"
+    ],
+    item: [
+      "tap-highlight-transparent",
+      "select-none",
+      "touch-none",
+      "transition"
+    ],
+    prev: "",
+    next: "",
+    cursor: [
+      "absolute",
+      "flex",
+      "overflow-visible",
+      "items-center",
+      "justify-center",
+      "origin-center",
+      "left-0",
+      "select-none",
+      "touch-none",
+      "pointer-events-none",
+      "z-20",
+      "text-standard-white"
+    ],
+    forwardIcon: [
+      "hidden",
+      "group-hover:block",
+      "group-data-[focus-visible=true]:block",
+      "data-[before=true]:rotate-180"
+    ],
+    ellipsis: "group-hover:hidden group-data-[focus-visible=true]:hidden",
+    chevronNext: "rotate-180"
+  },
+  variants: {
+    variant: {
+      light: {
+        item: "bg-transparent"
+      }
+    },
+    color: {
+      main: {
+        cursor: _chunk7Y2HFACMjs.colorVariants.solid.main
+      },
+      neutral: {
+        cursor: _chunk7Y2HFACMjs.colorVariants.solid.neutral
+      },
+      success: {
+        cursor: _chunk7Y2HFACMjs.colorVariants.solid.success
+      },
+      warning: {
+        cursor: _chunk7Y2HFACMjs.colorVariants.solid.warning
+      },
+      critical: {
+        cursor: _chunk7Y2HFACMjs.colorVariants.solid.critical
+      }
+    },
+    size: {
+      sm: {
+        item: "prose-body-2",
+        cursor: "prose-body-2"
+      },
+      md: {
+        item: "prose-body-2",
+        cursor: "prose-body-2"
+      },
+      lg: {
+        item: "prose-body-1",
+        cursor: "prose-body-1"
+      }
+    },
+    radius: {
+      none: {},
+      sm: {},
+      md: {},
+      lg: {},
+      full: {}
+    },
+    isCompact: {
+      true: {
+        wrapper: "gap-1"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "pointer-events-none"
+      }
+    },
+    disableCursorAnimation: {
+      true: {
+        cursor: "hidden"
+      }
+    },
+    disableAnimation: {
+      true: {
+        item: "transition-none",
+        cursor: "transition-none"
+      },
+      false: {
+        item: [
+          "data-[pressed=true]:scale-[0.95]",
+          "transition-transform-background"
+        ],
+        cursor: [
+          "data-[moving=true]:transition-transform",
+          "!data-[moving=true]:duration-300",
+          // this hides the cursor and only shows it once it has been moved to its initial position
+          "opacity-0",
+          "data-[moving]:opacity-100"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "light",
+    color: "neutral",
+    size: "md",
+    radius: "sm",
+    isCompact: false,
+    isDisabled: false,
+    disableCursorAnimation: false
+  },
+  compoundVariants: [
+    /**
+     * --------------------------------------------------------
+     * disableCursorAnimation
+     * the classNames will be applied to the active item
+     * --------------------------------------------------------
+     */
+    // disableCursorAnimation / color
+    {
+      disableCursorAnimation: true,
+      color: "main",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-main-active",
+          "data-[active=true]:border-interaction-main-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "neutral",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-support-selected",
+          "data-[active=true]:border-interaction-support-selected",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "success",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-success-active",
+          "data-[active=true]:border-interaction-success-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "warning",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-warning-active",
+          "data-[active=true]:border-interaction-warning-active",
+          "data-[active=true]:text-base-content-strong"
+        ]
+      }
+    },
+    {
+      disableCursorAnimation: true,
+      color: "critical",
+      class: {
+        item: [
+          "data-[active=true]:bg-interaction-critical-active",
+          "data-[active=true]:border-interaction-critical-active",
+          "data-[active=true]:text-white"
+        ]
+      }
+    }
+  ],
+  compoundSlots: [
+    // without variant
+    {
+      slots: ["item", "prev", "next"],
+      class: [
+        "flex",
+        "flex-wrap",
+        "truncate",
+        "box-border",
+        "outline-transparent outline-solid",
+        "items-center",
+        "justify-center",
+        "text-base-content-default",
+        // focus ring
+        ..._chunkPWPTVAILjs.dataFocusVisibleClasses,
+        "outline-offset-0",
+        // disabled
+        "data-[disabled=true]:text-interaction-support-disabled-content",
+        "data-[disabled=true]:pointer-events-none"
+      ]
+    },
+    {
+      slots: ["prev", "next"],
+      variant: "light",
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default",
+        "[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover",
+        "active:bg-interaction-muted-neutral-active"
+      ]
+    },
+    {
+      slots: ["item"],
+      variant: "light",
+      isCompact: false,
+      class: [
+        "[&[data-hover=true]:not([data-active=true])]:bg-interaction-neutral-subtle-default",
+        "[&[data-pressed=true]:not([data-active=true])]:bg-interaction-neutral-subtle-hover",
+        "active:bg-interaction-muted-neutral-active"
+      ]
+    },
+    // size
+    {
+      slots: ["item", "cursor"],
+      size: "sm",
+      isCompact: false,
+      class: "h-7 w-7 min-w-7"
+    },
+    {
+      slots: ["item"],
+      size: "sm",
+      isCompact: true,
+      class: "px-2"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "sm",
+      class: "h-7 w-7 min-w-7 [&_svg]:size-5"
+    },
+    {
+      slots: ["item", "cursor"],
+      size: "md",
+      isCompact: false,
+      class: "h-8 w-8 min-w-8"
+    },
+    {
+      slots: ["item"],
+      size: "md",
+      isCompact: true,
+      class: "px-2.5"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "md",
+      class: "h-8 w-8 min-w-8 [&_svg]:size-6"
+    },
+    {
+      slots: ["item", "cursor"],
+      size: "lg",
+      isCompact: false,
+      class: "h-9 w-9 min-w-9"
+    },
+    {
+      slots: ["item"],
+      size: "lg",
+      isCompact: true,
+      class: "px-3"
+    },
+    {
+      slots: ["prev", "next"],
+      size: "lg",
+      class: "h-9 w-9 min-w-9 [&_svg]:size-7"
+    },
+    // radius
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "none",
+      class: "rounded-none"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "sm",
+      class: "rounded-sm"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "md",
+      class: "rounded-md"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "lg",
+      class: "rounded-lg"
+    },
+    {
+      slots: ["wrapper", "item", "cursor", "prev", "next"],
+      radius: "full",
+      class: "rounded-full"
+    }
+  ]
+});
+
+
+
+exports.paginationStyles = paginationStyles;
+//# sourceMappingURL=chunk-MA67SUVH.js.map