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

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.11",
     "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,10 @@
     "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.11",
+        "@flux-ui/types": "3.2.0-beta.11",
         "clsx": "^2.1.1",
         "rough-notation": "^0.5.1"
     },
@@ -59,13 +60,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/FluxVisualBorderBeam.vue

@@ -24,9 +24,10 @@
     lang="ts"
     setup>
     import { useInView } from '@flux-ui/internals';
+    import type { BorderBeamVariant } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, ref, unref, useTemplateRef, watch } from 'vue';
-    import { useBorderBeamPulse, type BorderBeamVariant } from '~flux/visuals/composable/private';
+    import { useBorderBeamPulse } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/BorderBeam.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxVisualHighlighter.vue

@@ -10,9 +10,10 @@
     lang="ts"
     setup>
     import { prefersReducedMotion, useInView } from '@flux-ui/internals';
+    import type { HighlighterVariant } from '@flux-ui/types';
     import { annotate } from 'rough-notation';
     import { computed, onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch } from 'vue';
-    import { useHighlighterGroupInjection, type HighlighterGroupEntry, type HighlighterVariant } from '~flux/visuals/composable/private';
+    import { useHighlighterGroupInjection, type HighlighterGroupEntry } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/Highlighter.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxVisualHighlighterGroup.vue

@@ -7,7 +7,8 @@
 <script
     lang="ts"
     setup>
-    import { useHighlighterGroup, type HighlighterGroupProps } from '~flux/visuals/composable/private';
+    import type { HighlighterGroupProps } from '@flux-ui/types';
+    import { useHighlighterGroup } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/Highlighter.module.scss';
 
     const props = defineProps<HighlighterGroupProps>();

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/composable/private/index.ts

@@ -1,2 +1,2 @@
-export { default as useBorderBeamPulse, type BorderBeamVariant } from './useBorderBeamPulse';
-export { default as useHighlighterGroup, useHighlighterGroupInjection, type HighlighterGroupContext, type HighlighterGroupEntry, type HighlighterGroupProps, type HighlighterVariant } from './useHighlighterGroup';
+export { default as useBorderBeamPulse } from './useBorderBeamPulse';
+export { default as useHighlighterGroup, useHighlighterGroupInjection, type HighlighterGroupContext, type HighlighterGroupEntry } from './useHighlighterGroup';

package/src/composable/private/useBorderBeamPulse.ts

@@ -1,8 +1,7 @@
 import { prefersReducedMotion } from '@flux-ui/internals';
+import type { BorderBeamVariant } from '@flux-ui/types';
 import { unref, watchEffect, type Ref } from 'vue';
 
-export type BorderBeamVariant = 'sm' | 'md' | 'line' | 'pulse-inner' | 'pulse-outside';
-
 type PulseOscillator = {
     readonly prop: string;
     readonly a: number;

package/src/composable/private/useHighlighterGroup.ts

@@ -1,21 +1,9 @@
+import type { HighlighterGroupProps } from '@flux-ui/types';
 import { annotationGroup } from 'rough-notation';
 import { inject, onScopeDispose, provide, type InjectionKey } from 'vue';
 
 type Annotation = Parameters<typeof annotationGroup>[0][number];
 
-export type HighlighterVariant = 'highlight' | 'box' | 'circle' | 'underline' | 'strike-through' | 'crossed-off' | 'bracket';
-
-export type HighlighterGroupProps = {
-    readonly variant?: HighlighterVariant;
-    readonly color?: string;
-    readonly strokeWidth?: number;
-    readonly animationDuration?: number;
-    readonly iterations?: number;
-    readonly padding?: number;
-    readonly multiline?: boolean;
-    readonly whenInView?: boolean;
-};
-
 export type HighlighterGroupEntry = {
     readonly element: HTMLElement;
     getAnnotation(): Annotation | null;

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);
+    }
+}