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

package/package.json

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

package/src/component/index.ts

@@ -9,7 +9,6 @@ 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/dist/component/FluxVisualPaneIllustration.vue.d.ts

@@ -1,20 +0,0 @@
-import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly animatedColors: string[];
-    readonly animatedOpacity?: number;
-    readonly animatedSeed?: number;
-    readonly aspectRatio?: number;
-    readonly isMasked?: boolean;
-};
-type __VLS_Slots = {
-    default?(): VNode[];
-    controlled?(): VNode[];
-};
-declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/component/FluxVisualPaneIllustration.vue

@@ -1,69 +0,0 @@
-<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/css/component/PaneIllustration.module.scss

@@ -1,49 +0,0 @@
-.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);
-    }
-}