import { cva } from "class-variance-authority";
// Panel animations - these are for documentation purposes and need to be added to the global CSS
// These keyframes should be added to the tailwind.config.js in the theme.extend.keyframes section
export const panelAnimations = {
    appear: `
    @keyframes panel-appear {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  `,
    disappear: `
    @keyframes panel-disappear {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  `,
    slideIn: `
    @keyframes panel-slide-in {
      from { right: -110vw; }
      to { right: 0; }
    }
  `,
    slideInRtl: `
    @keyframes panel-slide-in-rtl {
      from { left: -110vw; }
      to { left: 0; }
    }
  `,
    slideOut: `
    @keyframes panel-slide-out {
      from { right: 0; }
      to { right: -110vw; }
    }
  `,
    slideOutRtl: `
    @keyframes panel-slide-out-rtl {
      from { left: 0; }
      to { left: -110vw; }
    }
  `
};
export const panelVariants = cva("!flex flex-col bg-white dark:bg-iridium dark:text-secondary-300", {
    variants: {
        variant: {
            extended: "w-4/5 h-full rounded-s-xl",
            compact: "w-2/5 h-[calc(100%-5rem)] rounded-md"
        },
        animation: {
            slideIn: "animate-[panel-slide-in_0.5s]",
            slideOut: "animate-[panel-slide-out_0.5s]",
            none: ""
        },
        visibility: {
            visible: "block",
            hidden: "hidden"
        }
    },
    defaultVariants: {
        variant: "compact",
        animation: "none",
        visibility: "visible"
    }
});
export const panelOverlayVariants = cva("hidden md:fixed md:inset-0 bg-black/40", {
    variants: {
        animation: {
            appear: "animate-[panel-appear_0.5s] md:block",
            disappear: "animate-[panel-disappear_0.5s] md:block",
            none: ""
        },
        visibility: {
            visible: "md:block",
            hidden: "hidden"
        }
    },
    defaultVariants: {
        animation: "none",
        visibility: "hidden"
    }
});
export const panelContainerVariants = cva("z-[1080] relative", {
    variants: {
        toggleVisibility: {
            true: "",
            false: ""
        }
    },
    defaultVariants: {
        toggleVisibility: false
    }
});
export const panelHeaderVariants = cva("flex px-6 py-4 min-h-11 border-b border-secondary-100 justify-between items-center gap-6 flex-shrink-0 dark:bg-secondary-800 dark:border-secondary-500", {
    variants: {},
    defaultVariants: {}
});
export const panelBodyVariants = cva("p-6 flex-1 overflow-y-auto", {
    variants: {},
    defaultVariants: {}
});
export const panelFooterVariants = cva("px-6 py-3 min-h-11 flex-shrink-0 border-t border-secondary-100 dark:bg-secondary-800 dark:border-secondary-500", {
    variants: {},
    defaultVariants: {}
});
// CSS classes for toggle visibility using CSS
export const cssVisibilityVariants = {
    container: "z-[1080] relative",
    panel: {
        base: "fixed end-0 start-auto shadow-xl translate-x-full rtl:-translate-x-full transition-transform duration-500" +
            " flex flex-col bg-white dark:bg-iridium dark:text-secondary-300",
        compact: "w-2/5 h-[calc(100%-5rem)] rounded-md inset-y-8",
        extended: "w-4/5 h-full rounded-s-xl",
        show: {
            extended: "-translate-x-0",
            compact: "-translate-x-8"
        }
    },
    overlay: {
        base: "hidden md:fixed md:inset-0 bg-black/40 opacity-0 transition-opacity duration-500",
        show: "block opacity-100 animate-[panel-appear_0.5s]"
    }
};
//# sourceMappingURL=panelVariants.js.map