@flux-ui/visuals 0.0.0 → 3.2.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/visuals",
     "description": "Visual effect components for the Flux UI library.",
-    "version": "0.0.0",
+    "version": "3.2.0-beta.10",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -38,7 +38,7 @@
     },
     "publishConfig": {
         "access": "public",
-        "provenance": false
+        "provenance": true
     },
     "files": [
         "dist",
@@ -49,9 +49,9 @@
     "types": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.45.0",
-        "@basmilius/utils": "^3.45.0",
-        "@flux-ui/internals": "workspace:*",
+        "@basmilius/common": "^3.50.0",
+        "@basmilius/utils": "^3.50.0",
+        "@flux-ui/internals": "3.2.0-beta.10",
         "clsx": "^2.1.1",
         "rough-notation": "^0.5.1"
     },
@@ -59,13 +59,13 @@
         "vue": "^3.6.0-beta.17"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.45.0",
-        "@types/node": "^26.0.1",
+        "@basmilius/vite-preset": "^3.50.0",
+        "@types/node": "^26.1.0",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.1.0",
-        "vue-tsc": "^3.3.5"
+        "vite": "^8.1.3",
+        "vue-tsc": "^3.3.6"
     }
 }

package/src/component/FluxVisualPaneIllustration.vue

@@ -0,0 +1,69 @@
+<template>
+    <div
+        data-flux-pane-illustration
+        :class="isMasked ? $style.paneIllustrationMasked : $style.paneIllustration"
+        :style="{
+            aspectRatio
+        }">
+        <div
+            :class="$style.paneIllustrationMagic"
+            :style="{
+                border: `1px solid ${borderColor}`
+            }">
+            <FluxVisualGridPattern :stroke-dasharray="3"/>
+
+            <FluxVisualAnimatedColors
+                :colors="animatedColors"
+                :opacity="animatedOpacity"
+                :seed="animatedSeed"/>
+        </div>
+
+        <div
+            v-if="slots.controlled"
+            :class="$style.paneIllustrationContentControlled">
+            <slot name="controlled"/>
+        </div>
+
+        <div
+            v-if="slots.default"
+            :class="$style.paneIllustrationContent">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { hexToRGB } from '@basmilius/utils';
+    import { computed, type VNode } from 'vue';
+    import FluxVisualAnimatedColors from './FluxVisualAnimatedColors.vue';
+    import FluxVisualGridPattern from './FluxVisualGridPattern.vue';
+    import $style from '~flux/visuals/css/component/PaneIllustration.module.scss';
+
+    const {
+        animatedColors,
+        aspectRatio = 16 / 9
+    } = defineProps<{
+        readonly animatedColors: string[];
+        readonly animatedOpacity?: number;
+        readonly animatedSeed?: number;
+        readonly aspectRatio?: number;
+        readonly isMasked?: boolean;
+    }>();
+
+    const slots = defineSlots<{
+        default?(): VNode[];
+        controlled?(): VNode[];
+    }>();
+
+    const borderColor = computed(() => {
+        if (!animatedColors || animatedColors.length === 0) {
+            return 'transparent';
+        }
+
+        const [r, g, b] = hexToRGB(animatedColors[0]);
+
+        return `rgb(${r} ${g} ${b} / .15)`;
+    });
+</script>

package/src/component/index.ts

@@ -9,6 +9,7 @@ export { default as FluxVisualHighlighter } from './FluxVisualHighlighter.vue';
 export { default as FluxVisualHighlighterGroup } from './FluxVisualHighlighterGroup.vue';
 export { default as FluxVisualNoise } from './FluxVisualNoise.vue';
 export { default as FluxVisualNumberFlow } from './FluxVisualNumberFlow.vue';
+export { default as FluxVisualPaneIllustration } from './FluxVisualPaneIllustration.vue';
 export { default as FluxVisualPing } from './FluxVisualPing.vue';
 export { default as FluxVisualSlotText } from './FluxVisualSlotText.vue';
 export { default as FluxVisualTextScramble } from './FluxVisualTextScramble.vue';

package/src/css/component/PaneIllustration.module.scss

@@ -0,0 +1,49 @@
+.paneIllustration {
+    --mask: linear-gradient(to bottom, black, transparent);
+    --mask-content: linear-gradient(to bottom, black, rgb(0 0 0 / .75), transparent);
+
+    position: relative;
+    border-radius: calc(var(--radius) - 1px);
+
+    &:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    &:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.paneIllustrationContent {
+    position: relative;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.paneIllustrationContentControlled {
+    composes: paneIllustrationContent;
+
+    overflow: hidden;
+
+    -webkit-mask-image: var(--mask-content);
+    mask-image: var(--mask-content);
+}
+
+.paneIllustrationMagic {
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+}
+
+.paneIllustrationMasked {
+    composes: paneIllustration;
+
+    .paneIllustrationMagic {
+        -webkit-mask-image: var(--mask);
+        mask-image: var(--mask);
+    }
+}