@flux-ui/visuals 3.2.0-beta.11 → 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.11",
+    "version": "3.2.0-beta.9",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,10 +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.11",
-        "@flux-ui/types": "3.2.0-beta.11",
+        "@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"
     },
@@ -60,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/FluxVisualBorderBeam.vue

@@ -24,10 +24,9 @@
     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 } from '~flux/visuals/composable/private';
+    import { useBorderBeamPulse, type BorderBeamVariant } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/BorderBeam.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxVisualHighlighter.vue

@@ -10,10 +10,9 @@
     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 } from '~flux/visuals/composable/private';
+    import { useHighlighterGroupInjection, type HighlighterGroupEntry, type HighlighterVariant } from '~flux/visuals/composable/private';
     import $style from '~flux/visuals/css/component/Highlighter.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxVisualHighlighterGroup.vue

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

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

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

package/src/composable/private/useBorderBeamPulse.ts

@@ -1,7 +1,8 @@
 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,9 +1,21 @@
-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/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);
-    }
-}