@byyuurin/ui 0.0.2 → 0.0.3

package/dist/runtime/theme/input.cjs

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "inline-flex items-center gap-x-2 rounded-ui-base transition-colors aria-disabled:opacity-50",
+    base: ["w-full color-inherit bg-transparent border-0 placeholder:color-ui-cb/50", "focus:outline-none", "disabled:cursor-not-allowed"],
+    prefix: "flex items-center",
+    prefixIcon: "shrink-0 size-1.25em",
+    suffix: "flex items-center",
+    suffixIcon: "shrink-0 size-1.25em"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "text-xs"
+      },
+      sm: {
+        root: "text-sm"
+      },
+      md: {
+        root: "text-base"
+      },
+      lg: {
+        root: "text-lg"
+      },
+      xl: {
+        root: "text-xl"
+      }
+    },
+    variant: {
+      outline: {
+        root: ["color-ui-cb/80 bg-ui-c1 ring ring-inset ring-ui-cb/50", "focus-within:ring-2 focus-within:ring-ui-cb/50", "aria-disabled:ring-ui-cb/80 hover:aria-disabled:ring-ui-cb/80"]
+      },
+      soft: {
+        root: ["color-ui-cb/80 bg-ui-cb/4", "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85", "aria-disabled:color-ui-content/80 aria-disabled:bg-ui-fill/5 hover:aria-disabled:color-ui-content/80 hover:aria-disabled:bg-ui-fill/5"]
+      },
+      ghost: {
+        root: ["color-ui-cb/80 bg-transparent", "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85", "aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"]
+      },
+      none: {
+        root: "color-ui-cb bg-transparent"
+      }
+    },
+    prefix: {
+      true: ""
+    },
+    suffix: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    underline: {
+      true: ""
+    },
+    highlight: {
+      true: {
+        base: ""
+      }
+    },
+    type: {
+      file: {
+        base: "prefix-normal not-disabled:cursor-pointer file:pointer-events-none file:py-0 file:font-size-0.875em file:rounded-ui-button file:border-none file:color-ui-c1 file:bg-ui-cb/80"
+      }
+    }
+  },
+  compoundVariants: [{
+    variant: ["soft", "ghost", "none"],
+    highlight: false,
+    underline: true,
+    class: {
+      root: "relative after:content-empty after:absolute after:inset-x-0 after:bottom-0 after:h-1px after:bg-ui-cb/40"
+    }
+  }, {
+    size: ["xs", "sm", "md"],
+    class: {
+      root: "p-1.5 px-2.5"
+    }
+  }, {
+    size: ["lg", "xl"],
+    class: {
+      root: "p-2.5 px-3.5"
+    }
+  }, {
+    variant: ["soft", "ghost", "none"],
+    highlight: true,
+    class: {
+      root: "ring ring-inset ring-ui-fill/80"
+    }
+  }, {
+    variant: ["outline"],
+    highlight: true,
+    class: {
+      root: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80"
+    }
+  }, {
+    loading: true,
+    prefix: true,
+    class: {
+      prefixIcon: "animate-spin"
+    }
+  }, {
+    loading: true,
+    prefix: false,
+    suffix: true,
+    class: {
+      suffixIcon: "animate-spin"
+    }
+  }]
+});

package/dist/runtime/theme/link.cjs

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  base: "border-y border-t-transparent focus-visible:outline-ui-cb",
+  variants: {
+    underline: {
+      true: "border-current",
+      false: "border-transparent"
+    },
+    active: {
+      true: ["color-ui-fill", "disabled:color-ui-fill aria-disabled:color-ui-fill"],
+      false: ["color-ui-cb hover:color-ui-cb/80 transition-colors", "disabled:hover:color-ui-cb aria-disabled:hover:color-ui-cb"]
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-50"
+    }
+  }
+});

package/dist/runtime/theme/modal.cjs

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    overlay: "fixed inset-0 bg-ui-c3/75",
+    content: "fixed bg-ui-c1 divide-y divide-ui-cb/10 flex flex-col focus:outline-none",
+    header: "flex flex-wrap items-center gap-1 px-4 py-5 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "flex-grow color-ui-cb text-xl font-semibold",
+    description: "w-full color-ui-cb/80",
+    close: "ms-auto"
+  },
+  variants: {
+    transition: {
+      true: {
+        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+      }
+    },
+    blur: {
+      true: {
+        overlay: "backdrop-blur-sm"
+      }
+    },
+    size: {
+      fullscreen: {
+        content: "inset-0"
+      },
+      sm: {
+        content: "w-screen-sm"
+      },
+      md: {
+        content: "w-screen-md"
+      },
+      lg: {
+        content: "w-screen-lg"
+      },
+      xl: {
+        content: "w-screen-xl"
+      }
+    }
+  },
+  compoundVariants: [{
+    size: ["sm", "md", "lg", "xl"],
+    class: {
+      content: ["bottom-4 left-[50%] translate-x-[-50%] h-auto max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] ring ring-ui-c2", "sm:bottom-auto sm:top-[50%] sm:translate-y-[-50%] sm:rounded-ui-box sm:shadow-lg"]
+    }
+  }]
+});

package/dist/runtime/theme/popover.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    content: ["color-ui-base bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/10", "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto"],
+    arrow: "fill-ui-base stroke-ui-cb/10"
+  }
+});

package/dist/runtime/theme/radioGroup.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "relative",
+    fieldset: "flex flex-wrap gap-0.5em",
+    legend: "mb-1 block font-medium color-ui-cb",
+    item: "flex items-start",
+    base: "size-1.25em rounded-ui-base ring ring-inset ring-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb",
+    indicator: "flex items-center justify-center size-full rounded-ui-base bg-ui-fill",
+    container: "h-1.5em flex items-center",
+    wrapper: "ms-2",
+    label: "block font-medium color-ui-cb",
+    description: "color-ui-cb/60"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        fieldset: "flex-row",
+        wrapper: "me-2"
+      },
+      vertical: {
+        fieldset: "flex-col"
+      }
+    },
+    size: {
+      xs: {
+        root: "text-xs"
+      },
+      sm: {
+        root: "text-sm"
+      },
+      md: {
+        root: "text-base"
+      },
+      lg: {
+        root: "text-lg"
+      },
+      xl: {
+        root: "text-xl"
+      }
+    },
+    dot: {
+      true: {
+        indicator: "after:content-empty after:size-0.75em after:bg-ui-c1 after:rounded-ui-base"
+      }
+    },
+    round: {
+      true: {
+        base: "rounded-full",
+        indicator: "rounded-full after:rounded-full"
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+      },
+      false: {
+        label: "cursor-pointer"
+      }
+    },
+    required: {
+      true: {
+        legend: "after:content-['*'] after:ms-0.5"
+      }
+    }
+  }
+});

package/dist/runtime/theme/select.cjs

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    base: ["bg-ui-c1 relative group rounded-ui-base inline-flex items-center gap-x-2 focus:outline-none transition-colors", "disabled:cursor-not-allowed disabled:opacity-50"],
+    value: "me-auto truncate pointer-events-none",
+    placeholder: "me-auto truncate color-ui-cb/50",
+    arrow: "fill-ui-c1 stroke-ui-cb/10",
+    content: ["max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-c1 shadow-lg rounded-[calc(var(--ui-radius-tabs)*0.66)] ring ring-ui-cb/10 overflow-hidden pointer-events-auto", "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"],
+    viewport: "divide-y divide-ui-cb/10 scroll-py-1",
+    group: "p-1 isolate",
+    empty: "py-2 text-center text-sm color-ui-cb/50",
+    label: "font-semibold color-ui-cb cursor-pointer",
+    separator: "-mx-1 my-1 h-px bg-ui-cb/10",
+    item: ["group relative w-full flex gap-2 items-center select-none outline-none color-ui-cb/50 transition-colors cursor-pointer", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50", "before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-ui-base before:transition-colors", "data-[highlighted]:color-ui-cb data-[highlighted]:before:bg-ui-cb/3", "data-[state=checked]:color-ui-base"],
+    itemPrefixIcon: "shrink-0 color-ui-cb/80 group-data-[highlighted]:color-ui-cb/80 transition-colors",
+    itemSuffix: "ms-auto inline-flex gap-1.5 items-center",
+    itemSuffixIcon: "shrink-0",
+    itemLabel: "truncate",
+    prefix: "flex items-center",
+    prefixIcon: "shrink-0 size-1.25em",
+    suffix: "flex items-center",
+    suffixIcon: "shrink-0 size-1.25em"
+  },
+  variants: {
+    variant: {
+      outline: {
+        base: ["color-ui-cb/80 bg-ui-c1 ring ring-inset ring-ui-cb/50", "focus-within:ring-2 focus-within:ring-ui-cb/50", "disabled:ring-ui-cb/80 hover:disabled:ring-ui-cb/80"]
+      },
+      soft: {
+        base: ["color-ui-cb/80 bg-ui-cb/4", "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85", "disabled:color-ui-content/80 disabled:bg-ui-fill/5 hover:disabled:color-ui-content/80 hover:disabled:bg-ui-fill/5"]
+      },
+      ghost: {
+        base: ["color-ui-cb/80 bg-transparent", "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85", "disabled:color-ui-fill/80 disabled:bg-transparent hover:disabled:color-ui-fill/80 hover:disabled:bg-transparent"]
+      },
+      none: {
+        base: "color-ui-cb bg-transparent"
+      }
+    },
+    size: {
+      xs: {
+        base: "text-xs",
+        item: "text-xs"
+      },
+      sm: {
+        base: "text-sm",
+        item: "text-sm"
+      },
+      md: {
+        base: "text-base",
+        item: "text-base"
+      },
+      lg: {
+        base: "text-lg",
+        item: "text-lg"
+      },
+      xl: {
+        base: "text-xl",
+        item: "text-xl"
+      }
+    },
+    prefix: {
+      true: ""
+    },
+    suffix: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    underline: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [{
+    variant: ["soft", "ghost", "none"],
+    highlight: false,
+    underline: true,
+    class: {
+      base: "relative after:content-empty after:absolute after:inset-x-0 after:bottom-0 after:h-1px after:bg-ui-cb/40"
+    }
+  }, {
+    size: ["xs", "sm", "md"],
+    class: {
+      base: "p-1.5 px-2.5",
+      item: "p-1.5 px-2.5"
+    }
+  }, {
+    size: ["lg", "xl"],
+    class: {
+      base: "p-2.5 px-3.5",
+      item: "p-2.5 px-3.5"
+    }
+  }, {
+    variant: ["soft", "ghost", "none"],
+    highlight: true,
+    class: {
+      base: "ring ring-inset ring-ui-fill/80"
+    }
+  }, {
+    variant: ["outline"],
+    highlight: true,
+    class: {
+      base: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80"
+    }
+  }, {
+    loading: true,
+    prefix: true,
+    class: {
+      prefixIcon: "animate-spin"
+    }
+  }, {
+    loading: true,
+    prefix: false,
+    suffix: true,
+    class: {
+      suffixIcon: "animate-spin"
+    }
+  }]
+});

package/dist/runtime/theme/switch.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "relative flex items-start",
+    base: ["inline-flex items-center shrink-0 rounded-ui-base border-2 border-transparent transition-colors duration-200", "focus-visible:outline-2 focus-visible:outline-offset-2", "data-[state=unchecked]:bg-ui-cb/10 data-[state=checked]:bg-ui-fill/80 focus-visible:outline-ui-base", "w-2.7em"],
+    container: "flex items-center h-1.5em",
+    thumb: ["group pointer-events-none rounded-ui-base size-1.25em bg-ui-c1 shadow-lg ring-0 transition-transform duration-200 flex items-center justify-center", "data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:translate-x-0 data-[state=checked]:translate-x-1.25em data-[state=checked]:rtl:-translate-x-1.25em"],
+    icon: ["absolute shrink-0 opacity-0 size-10/12 transition-[color,opacity] duration-200", "group-data-[state=unchecked]:color-ui-cb/50 group-data-[state=checked]:color-ui-base"],
+    wrapper: "ms-2",
+    label: "flex color-ui-cb/80",
+    description: "color-ui-cb/60"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "text-xs"
+      },
+      sm: {
+        root: "text-sm"
+      },
+      md: {
+        root: "text-base"
+      },
+      lg: {
+        root: "text-lg"
+      },
+      xl: {
+        root: "text-xl"
+      }
+    },
+    round: {
+      true: {
+        base: "rounded-full",
+        thumb: "rounded-full"
+      }
+    },
+    checked: {
+      true: {
+        icon: "group-data-[state=checked]:opacity-100"
+      }
+    },
+    unchecked: {
+      true: {
+        icon: "group-data-[state=unchecked]:opacity-100"
+      }
+    },
+    loading: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed",
+        icon: "animate-spin"
+      }
+    },
+    required: {
+      true: {
+        label: `after:content-['*'] after:ms-0.5`
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+      },
+      false: {
+        label: "cursor-pointer"
+      }
+    }
+  }
+});

package/dist/runtime/theme/tabs.cjs

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "flex items-center gap-2",
+    list: "relative flex p-1 group",
+    indicator: "absolute transition-all duration-200",
+    trigger: ["group relative inline-flex items-center shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors", "focus:outline-hidden", "disabled:cursor-not-allowed disabled:opacity-50"],
+    content: "w-full focus:outline-none",
+    leadingIcon: "shrink-0",
+    label: "truncate"
+  },
+  variants: {
+    variant: {
+      solid: {
+        list: "bg-ui-cb/5 rounded-ui-tabs",
+        trigger: ["data-[state=active]:color-ui-c1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill/80", "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"],
+        indicator: "bg-ui-fill/90 rounded-ui-tabs shadow-xs"
+      },
+      soft: {
+        list: "bg-ui-c1 rounded-ui-tabs",
+        trigger: ["data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill", "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"],
+        indicator: "bg-ui-fill/10 rounded-ui-tabs shadow-xs"
+      },
+      link: {
+        list: "border-ui-cb/10",
+        indicator: "bg-ui-fill rounded-full",
+        trigger: ["data-[state=active]:color-ui-base focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base", "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"]
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        list: "w-full",
+        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+        trigger: "justify-center"
+      },
+      vertical: {
+        list: "flex-col",
+        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]",
+        trigger: "flex-1 w-full"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "px-2 py-1 text-xs gap-1",
+        leadingIcon: "size-4"
+      },
+      sm: {
+        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
+        leadingIcon: "size-4"
+      },
+      md: {
+        trigger: "px-3 py-1.5 text-sm gap-1.5",
+        leadingIcon: "size-5"
+      },
+      lg: {
+        trigger: "px-3 py-2 text-sm gap-2",
+        leadingIcon: "size-5"
+      },
+      xl: {
+        trigger: "px-3 py-2 text-base gap-2",
+        leadingIcon: "size-6"
+      }
+    },
+    full: {
+      true: {
+        trigger: "w-full flex-1"
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    variant: ["solid", "soft"],
+    class: {
+      indicator: "inset-y-1"
+    }
+  }, {
+    orientation: "horizontal",
+    variant: "link",
+    class: {
+      list: "border-b -mb-px",
+      indicator: "-bottom-px h-px"
+    }
+  }, {
+    orientation: "vertical",
+    variant: ["solid", "soft"],
+    class: {
+      indicator: "inset-x-1",
+      list: "items-center rounded-[calc(var(--ui-radius-tabs)*0.66)]"
+    }
+  }, {
+    orientation: "vertical",
+    variant: "link",
+    class: {
+      list: "border-s -ms-px",
+      indicator: "-start-px w-px"
+    }
+  }]
+});

package/dist/runtime/theme/toast.cjs

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    root: "relative group overflow-hidden bg-ui-c1 shadow-lg rounded-ui-box ring ring-ui-c2 p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-c2",
+    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    title: "text-base font-medium color-ui-cb",
+    description: "text-sm color-ui-cb/80",
+    icon: "shrink-0 size-6 color-ui-cb",
+    avatar: "shrink-0",
+    avatarSize: "2xl",
+    actions: "flex flex-wrap gap-1.5 shrink-0",
+    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1] color-ui-base/80 bg-current",
+    close: "p-0.5"
+  },
+  variants: {
+    multiline: {
+      true: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      },
+      false: {
+        root: "items-center",
+        actions: "items-center"
+      }
+    }
+  }
+});

package/dist/runtime/theme/toaster.cjs

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _uiKit = require("@byyuurin/ui-kit");
+module.exports = (0, _uiKit.ct)({
+  slots: {
+    viewport: ["fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] focus:outline-none", "data-[expanded=true]:h-[var(--height)]"],
+    base: ["pointer-events-auto absolute inset-x-0 z-[var(--index)] [transform:var(--transform)] transition-all duration-200 ease-out", "[&[data-expanded=false][data-front=false]]:h-[var(--front-height)]", "[&[data-expanded=false][data-front=false]>*]:invisible", "data-[state=closed]:animate-[toast-closed_200ms_ease-in-out]", "[&[data-state=closed][data-expanded=false][data-front=false]]:animate-[toast-collapsed-closed_200ms_ease-in-out]", "data-[swipe=move]:transition-none"]
+  },
+  variants: {
+    position: {
+      "top-left": {
+        viewport: "left-4"
+      },
+      "top-center": {
+        viewport: "left-1/2 -translate-x-1/2"
+      },
+      "top-right": {
+        viewport: "right-4"
+      },
+      "bottom-left": {
+        viewport: "left-4"
+      },
+      "bottom-center": {
+        viewport: "left-1/2 -translate-x-1/2"
+      },
+      "bottom-right": {
+        viewport: "right-4"
+      }
+    },
+    swipeDirection: {
+      up: {
+        base: "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]"
+      },
+      right: {
+        base: "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]"
+      },
+      down: {
+        base: "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]"
+      },
+      left: {
+        base: "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+      }
+    }
+  },
+  compoundVariants: [{
+    position: ["top-left", "top-center", "top-right"],
+    class: {
+      viewport: "top-4",
+      base: "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+    }
+  }, {
+    position: ["bottom-left", "bottom-center", "bottom-right"],
+    class: {
+      viewport: "bottom-4",
+      base: "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+    }
+  }, {
+    swipeDirection: ["left", "right"],
+    class: {
+      base: ["data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)]", "data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)]", "data-[swipe=cancel]:translate-x-0"]
+    }
+  }, {
+    swipeDirection: ["up", "down"],
+    class: {
+      base: ["data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]", "data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)]", "data-[swipe=cancel]:translate-y-0"]
+    }
+  }]
+});