@teammodlr/ui-kit 3.0.0-beta.2 → 3.0.0-beta.21

package/src/components/popover/examples/placement.vue

@@ -0,0 +1,59 @@
+<template>
+    <div style="padding: 150px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <MPopover placement="top">
+            <MButton>Top</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="top-start">
+            <MButton>Top Start</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top Start</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="top-end">
+            <MButton>Top End</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top End</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom">
+            <MButton>Bottom</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom-start">
+            <MButton>Bottom Start</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom Start</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom-end">
+            <MButton>Bottom End</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom End</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="left">
+            <MButton>Left</MButton>
+            <template #content>
+                <div style="padding: 8px;">Left</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="right">
+            <MButton>Right</MButton>
+            <template #content>
+                <div style="padding: 8px;">Right</div>
+            </template>
+        </MPopover>
+    </div>
+</template>

package/src/components/popover/examples/variant.vue

@@ -0,0 +1,30 @@
+<template>
+    <div style="padding: 100px; display: flex; gap: 16px;">
+        <MPopover>
+            <MButton>Light (Default)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Light popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark">
+            <MButton variant="dark">Dark</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark" arrow placement="bottom">
+            <MButton variant="dark">Dark with Arrow</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover with arrow</p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

package/src/components/popover/style/Popover.css.ts

@@ -0,0 +1,203 @@
+import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const menuFadeOutAnimation = 'popover-fade-out';
+globalKeyframes(menuFadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const menuSlideFadeOutTopAnimation = 'popover-slide-fade-out-top';
+globalKeyframes(menuSlideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutBottomAnimation = 'popover-slide-fade-out-bottom';
+globalKeyframes(menuSlideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutLeftAnimation = 'popover-slide-fade-out-left';
+globalKeyframes(menuSlideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutRightAnimation = 'popover-slide-fade-out-right';
+globalKeyframes(menuSlideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeTopAnimation = 'popover-slide-fade-top';
+globalKeyframes(menuSlideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeBottomAnimation = 'popover-slide-fade-bottom';
+globalKeyframes(menuSlideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeLeftAnimation = 'popover-slide-fade-left';
+globalKeyframes(menuSlideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const menuSlideFadeRightAnimation = 'popover-slide-fade-right';
+globalKeyframes(menuSlideFadeRightAnimation, {
+    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-popover-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: menuSlideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: menuSlideFadeOutBottomAnimation
+        },
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: menuSlideFadeOutLeftAnimation
+        },
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: menuSlideFadeOutRightAnimation
+        },
+        '&[data-state="open"][data-side="top"]': {
+            animationName: menuSlideFadeTopAnimation
+        },
+        '&[data-state="open"][data-side="bottom"]': {
+            animationName: menuSlideFadeBottomAnimation
+        },
+        '&[data-state="open"][data-side="left"]': {
+            animationName: menuSlideFadeLeftAnimation
+        },
+        '&[data-state="open"][data-side="right"]': {
+            animationName: menuSlideFadeRightAnimation
+        }
+    }
+});
+
+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]
+});
+
+export const close = style({
+    position: 'absolute',
+    top: themeVars.space[2],
+    right: themeVars.space[2],
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    borderRadius: themeVars.rounded.default,
+    cursor: 'pointer',
+    color: themeVars.color.font.muted,
+    ':hover': {
+        backgroundColor: themeVars.color.gray[100],
+        color: themeVars.color.font.text
+    }
+});

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

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

package/src/components/tab/Tab.vue

@@ -14,7 +14,7 @@
 
     <teleport v-if="teleportTo && hasContent" :to="teleportTo">
         <TabsContent :value="computedValue" as-child>
-            <div>
+            <div style="outline: none">
                 <slot />
             </div>
         </TabsContent>

package/src/components/tab/style/Tab.css.ts

@@ -91,6 +91,12 @@ export const baseButton = style({
             vars: {
                 color: themeVars.color.blue[400],
             },
+        },
+        '&:focus': {
+            outline: 'none',
+        },
+        '&:focus-visible': {
+            outline: 'none',
         }
     }
 });