@teammodlr/ui-kit 3.0.0-beta.30 → 3.0.0-beta.33

package/lib/components/hovercard/HoverCard.vue.d.ts

@@ -1,122 +0,0 @@
-import { type PropType } from 'vue';
-import { type Placement } from '../../composables/usePopper';
-import * as style from './style';
-declare const _default: import("vue").DefineComponent<{
-    open: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-        validator: (value: Placement) => boolean;
-    };
-    transfer: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    sideOffset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    collisionPadding: {
-        type: PropType<number | {
-            top?: number;
-            right?: number;
-            bottom?: number;
-            left?: number;
-        }>;
-        default: number;
-    };
-    arrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    variant: {
-        type: PropType<"light" | "dark">;
-        default: string;
-    };
-    openDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    closeDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    zIndex: {
-        type: NumberConstructor;
-    };
-}, {
-    isOpen: import("vue").Ref<boolean>;
-    zIndex: import("vue").Ref<number>;
-    showArrow: import("vue").ComputedRef<boolean>;
-    contentClasses: import("vue").ComputedRef<unknown[]>;
-    resolvedSide: import("vue").ComputedRef<"bottom" | "left" | "right" | "top" | undefined>;
-    resolvedAlign: import("vue").ComputedRef<"center" | "end" | "start" | undefined>;
-    style: typeof style;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    open: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    placement: {
-        type: PropType<Placement>;
-        default: string;
-        validator: (value: Placement) => boolean;
-    };
-    transfer: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    sideOffset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    collisionPadding: {
-        type: PropType<number | {
-            top?: number;
-            right?: number;
-            bottom?: number;
-            left?: number;
-        }>;
-        default: number;
-    };
-    arrow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    variant: {
-        type: PropType<"light" | "dark">;
-        default: string;
-    };
-    openDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    closeDelay: {
-        type: NumberConstructor;
-        default: number;
-    };
-    zIndex: {
-        type: NumberConstructor;
-    };
-}>> & {
-    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
-}, {
-    open: boolean;
-    variant: "dark" | "light";
-    placement: Placement;
-    transfer: boolean;
-    arrow: boolean;
-    sideOffset: number;
-    collisionPadding: number | {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-    openDelay: number;
-    closeDelay: number;
-}, {}>;
-export default _default;

package/lib/components/hovercard/style/HoverCard.css.d.ts

@@ -1,3 +0,0 @@
-export declare const content: string;
-export declare const arrow: string;
-export declare const dark: string;

package/lib/components/hovercard/style/index.d.ts

@@ -1 +0,0 @@
-export * from './HoverCard.css';

package/src/components/hovercard/HoverCard.vue

@@ -1,163 +0,0 @@
-<template>
-    <HoverCardRoot
-        v-model:open="isOpen"
-        :open-delay="openDelay"
-        :close-delay="closeDelay"
-    >
-        <HoverCardTrigger as-child>
-            <slot />
-        </HoverCardTrigger>
-        <HoverCardPortal :disabled="!transfer">
-            <HoverCardContent
-                :class="contentClasses"
-                :side="resolvedSide"
-                :align="resolvedAlign"
-                :side-offset="sideOffset"
-                :collision-padding="collisionPadding"
-                :style="{ zIndex: zIndex }"
-            >
-                <slot name="content" />
-                <HoverCardArrow v-if="showArrow" :class="style.arrow" :width="12" :height="6" />
-            </HoverCardContent>
-        </HoverCardPortal>
-    </HoverCardRoot>
-</template>
-
-<script lang="ts">
-import {
-    HoverCardArrow,
-    HoverCardContent,
-    HoverCardPortal,
-    HoverCardRoot,
-    HoverCardTrigger,
-    type HoverCardContentProps
-} from 'reka-ui';
-import {
-    computed,
-    defineComponent,
-    ref,
-    useAttrs,
-    watch,
-    type PropType
-} from 'vue';
-import {
-    type Placement,
-    placementWhileList
-} from '../../composables/usePopper';
-import { useZIndex } from '../../composables/useZIndex';
-import * as style from './style';
-
-export default defineComponent({
-    name: 'MHoverCard',
-    inheritAttrs: false,
-    components: {
-        HoverCardArrow,
-        HoverCardContent,
-        HoverCardPortal,
-        HoverCardRoot,
-        HoverCardTrigger
-    },
-    props: {
-        open: {
-            type: Boolean,
-            default: false
-        },
-        placement: {
-            type: String as PropType<Placement>,
-            default: 'bottom',
-            validator: (value: Placement) => placementWhileList.includes(value)
-        },
-        transfer: {
-            type: Boolean,
-            default: true
-        },
-        sideOffset: {
-            type: Number,
-            default: 5
-        },
-        collisionPadding: {
-            type: [Number, Object] as PropType<number | { top?: number; right?: number; bottom?: number; left?: number }>,
-            default: 10
-        },
-        arrow: {
-            type: Boolean,
-            default: false
-        },
-        variant: {
-            type: String as PropType<'light' | 'dark'>,
-            default: 'light'
-        },
-        openDelay: {
-            type: Number,
-            default: 700
-        },
-        closeDelay: {
-            type: Number,
-            default: 300
-        },
-        zIndex: {
-            type: Number
-        }
-    },
-    emits: ['update:open'],
-    setup(props, { emit }) {
-        const attrs = useAttrs();
-        const { nextZIndex } = useZIndex();
-        const isOpen = ref(props.open);
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-
-        const resolvedPlacement = computed(() => {
-            const [side, align] = props.placement.split('-');
-
-            return {
-                side: side === 'top' || side === 'right' || side === 'bottom' || side === 'left'
-                    ? side
-                    : undefined,
-                align: align === 'start' || align === 'center' || align === 'end'
-                    ? align
-                    : undefined
-            } as {
-                side?: HoverCardContentProps['side'];
-                align?: HoverCardContentProps['align'];
-            };
-        });
-
-        const showArrow = computed(() => {
-            const { align } = resolvedPlacement.value;
-            return props.arrow && (!align || align === 'center');
-        });
-
-        const contentClasses = computed(() => {
-            return [
-                'm-hover-card-content',
-                style.content,
-                {
-                    [style.dark]: props.variant === 'dark'
-                },
-                attrs.class
-            ];
-        });
-
-        watch(
-            () => props.open,
-            value => {
-                isOpen.value = value;
-            }
-        );
-
-        watch(isOpen, value => {
-            emit('update:open', value);
-        });
-
-        return {
-            isOpen,
-            zIndex,
-            showArrow,
-            contentClasses,
-            resolvedSide: computed(() => resolvedPlacement.value.side),
-            resolvedAlign: computed(() => resolvedPlacement.value.align),
-            style
-        };
-    }
-});
-</script>

package/src/components/hovercard/style/HoverCard.css.ts

@@ -1,175 +0,0 @@
-import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.css';
-
-const slideFadeOutTopAnimation = 'hover-card-slide-fade-out-top';
-globalKeyframes(slideFadeOutTopAnimation, {
-    from: {
-        opacity: 1,
-        transform: 'translateY(0) scale(1)'
-    },
-    to: {
-        opacity: 0,
-        transform: 'translateY(6px) scale(0.98)'
-    }
-});
-
-const slideFadeOutBottomAnimation = 'hover-card-slide-fade-out-bottom';
-globalKeyframes(slideFadeOutBottomAnimation, {
-    from: {
-        opacity: 1,
-        transform: 'translateY(0) scale(1)'
-    },
-    to: {
-        opacity: 0,
-        transform: 'translateY(-6px) scale(0.98)'
-    }
-});
-
-const slideFadeOutLeftAnimation = 'hover-card-slide-fade-out-left';
-globalKeyframes(slideFadeOutLeftAnimation, {
-    from: {
-        opacity: 1,
-        transform: 'translateX(0) scale(1)'
-    },
-    to: {
-        opacity: 0,
-        transform: 'translateX(6px) scale(0.98)'
-    }
-});
-
-const slideFadeOutRightAnimation = 'hover-card-slide-fade-out-right';
-globalKeyframes(slideFadeOutRightAnimation, {
-    from: {
-        opacity: 1,
-        transform: 'translateX(0) scale(1)'
-    },
-    to: {
-        opacity: 0,
-        transform: 'translateX(-6px) scale(0.98)'
-    }
-});
-
-const slideFadeTopAnimation = 'hover-card-slide-fade-top';
-globalKeyframes(slideFadeTopAnimation, {
-    from: {
-        opacity: 0,
-        transform: 'translateY(6px) scale(0.98)'
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateY(0) scale(1)'
-    }
-});
-
-const slideFadeBottomAnimation = 'hover-card-slide-fade-bottom';
-globalKeyframes(slideFadeBottomAnimation, {
-    from: {
-        opacity: 0,
-        transform: 'translateY(-6px) scale(0.98)'
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateY(0) scale(1)'
-    }
-});
-
-const slideFadeLeftAnimation = 'hover-card-slide-fade-left';
-globalKeyframes(slideFadeLeftAnimation, {
-    from: {
-        opacity: 0,
-        transform: 'translateX(6px) scale(0.98)'
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateX(0) scale(1)'
-    }
-});
-
-const slideFadeRightAnimation = 'hover-card-slide-fade-right';
-globalKeyframes(slideFadeRightAnimation, {
-    from: {
-        opacity: 0,
-        transform: 'translateX(-6px) scale(0.98)'
-    },
-    to: {
-        opacity: 1,
-        transform: 'translateX(0) scale(1)'
-    }
-});
-
-export const content = style({
-    backgroundColor: '#ffffff',
-    borderRadius: '5px',
-    padding: '5px',
-    zIndex: 4000,
-    boxSizing: 'border-box',
-    position: 'relative',
-    minWidth: '130px',
-    maxWidth: '350px',
-    border: `1px solid ${themeVars.color.gray[300]}`,
-    boxShadow: themeVars.shadow.md,
-    transformOrigin: 'var(--reka-hover-card-content-transform-origin)',
-    willChange: 'transform, opacity',
-    outline: 'none',
-    selectors: {
-        '&[data-state="open"]': {
-            animationDuration: '0.16s',
-            animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-            animationFillMode: 'both'
-        },
-        '&[data-state="closed"]': {
-            animationDuration: '0.12s',
-            animationTimingFunction: 'ease-out',
-            animationFillMode: 'both'
-        },
-        '&[data-state="closed"][data-side="top"]': {
-            animationName: slideFadeOutTopAnimation
-        },
-        '&[data-state="closed"][data-side="bottom"]': {
-            animationName: slideFadeOutBottomAnimation
-        },
-        '&[data-state="closed"][data-side="left"]': {
-            animationName: slideFadeOutLeftAnimation
-        },
-        '&[data-state="closed"][data-side="right"]': {
-            animationName: slideFadeOutRightAnimation
-        },
-        '&[data-state="open"][data-side="top"]': {
-            animationName: slideFadeTopAnimation
-        },
-        '&[data-state="open"][data-side="bottom"]': {
-            animationName: slideFadeBottomAnimation
-        },
-        '&[data-state="open"][data-side="left"]': {
-            animationName: slideFadeLeftAnimation
-        },
-        '&[data-state="open"][data-side="right"]': {
-            animationName: slideFadeRightAnimation
-        }
-    }
-});
-
-export const arrow = style({
-    fill: '#ffffff'
-});
-
-globalStyle(`${arrow} path`, {
-    fill: '#ffffff',
-    stroke: themeVars.color.gray[300],
-    strokeWidth: '1px'
-});
-
-export const dark = style({
-    backgroundColor: themeVars.color.gray[900],
-    border: `1px solid ${themeVars.color.gray[800]}`,
-    color: themeVars.color.gray[100]
-});
-
-globalStyle(`${dark} ${arrow}`, {
-    fill: themeVars.color.gray[900]
-});
-
-globalStyle(`${dark} ${arrow} path`, {
-    fill: themeVars.color.gray[900],
-    stroke: themeVars.color.gray[800]
-});

package/src/components/hovercard/style/index.ts

@@ -1 +0,0 @@
-export * from './HoverCard.css';